diff --git a/resources/[tools]/nordi_license/client/main.lua b/resources/[tools]/nordi_license/client/main.lua
index f00da1395..135d4c2ae 100644
--- a/resources/[tools]/nordi_license/client/main.lua
+++ b/resources/[tools]/nordi_license/client/main.lua
@@ -389,3 +389,28 @@ function manageLicensesMenu()
         type = 'info'
     })
 end
+
+-- Foto vom Spieler machen
+RegisterNetEvent('license-system:client:takePlayerPhoto', function(targetId)
+    local targetPed = GetPlayerPed(GetPlayerFromServerId(targetId))
+    
+    if targetPed and targetPed ~= 0 then
+        -- Mugshot erstellen
+        local mugshot = RegisterPedheadshot(targetPed)
+        
+        -- Warten bis Mugshot geladen ist
+        while not IsPedheadshotReady(mugshot) do
+            Wait(100)
+        end
+        
+        -- Mugshot-Textur holen
+        local mugshotTxd = GetPedheadshotTxdString(mugshot)
+        
+        -- An Server senden
+        TriggerServerEvent('license-system:server:savePlayerPhoto', QBCore.Functions.GetPlayerData().citizenid, mugshotTxd)
+        
+        -- Mugshot wieder freigeben
+        UnregisterPedheadshot(mugshot)
+    end
+end)
+
diff --git a/resources/[tools]/nordi_license/html/index.html b/resources/[tools]/nordi_license/html/index.html
index 07e45cf8b..bc0d9109e 100644
--- a/resources/[tools]/nordi_license/html/index.html
+++ b/resources/[tools]/nordi_license/html/index.html
@@ -5,56 +5,270 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>License System</title>
     <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
+    <!-- Hauptcontainer für Lizenz-Anzeige -->
     <div id="license-container" class="hidden">
+        <div class="license-overlay" onclick="closeLicense()"></div>
+        
         <div class="license-card" id="license-card">
+            <!-- Sicherheitselemente -->
+            <div class="security-strip"></div>
+            <div class="hologram"></div>
+            <div class="microtext">SECURE DOCUMENT • OFFICIAL USE ONLY • GOVERNMENT ISSUED</div>
+            
+            <!-- Header der Lizenz -->
             <div class="license-header">
-                <div class="license-title"></div>
-                <div class="license-logo">
-                    <i class="license-icon"></i>
+                <div class="header-left">
+                    <div class="license-title" id="license-title">Personalausweis</div>
+                    <div class="license-subtitle">Bundesrepublik Deutschland</div>
+                </div>
+                <div class="header-right">
+                    <div class="license-logo">
+                        <i class="license-icon" id="license-icon"></i>
+                    </div>
+                    <div class="government-seal">
+                        <i class="fas fa-certificate"></i>
+                    </div>
                 </div>
             </div>
+            
+            <!-- Hauptinhalt der Lizenz -->
             <div class="license-content">
-                <div class="license-photo">
-                    <i class="fas fa-user"></i>
+                <!-- Foto-Bereich -->
+                <div class="license-photo-section">
+                    <div class="license-photo" id="license-photo">
+                        <img id="player-photo" class="hidden" alt="Spieler Foto">
+                        <div id="photo-placeholder" class="photo-placeholder">
+                            <i class="fas fa-user"></i>
+                        </div>
+                    </div>
+                    <div class="photo-frame"></div>
                 </div>
+                
+                <!-- Informations-Bereich -->
                 <div class="license-info">
-                    <div class="info-row">
-                        <span class="label">Name:</span>
-                        <span class="value" id="license-name"></span>
+                    <div class="info-section personal-info">
+                        <h3 class="section-title">Persönliche Daten</h3>
+                        
+                        <div class="info-row">
+                            <span class="label">
+                                <i class="fas fa-user"></i>
+                                Name:
+                            </span>
+                            <span class="value" id="license-name">Max Mustermann</span>
+                        </div>
+                        
+                        <div class="info-row">
+                            <span class="label">
+                                <i class="fas fa-birthday-cake"></i>
+                                Geburtsdatum:
+                            </span>
+                            <span class="value" id="license-birthday">01.01.1990</span>
+                        </div>
+                        
+                        <div class="info-row">
+                            <span class="label">
+                                <i class="fas fa-venus-mars"></i>
+                                Geschlecht:
+                            </span>
+                            <span class="value" id="license-gender">Männlich</span>
+                        </div>
                     </div>
-                    <div class="info-row">
-                        <span class="label">Geburtsdatum:</span>
-                        <span class="value" id="license-birthday"></span>
-                    </div>
-                    <div class="info-row">
-                        <span class="label">Geschlecht:</span>
-                        <span class="value" id="license-gender"></span>
-                    </div>
-                    <div class="info-row">
-                        <span class="label">Ausgestellt:</span>
-                        <span class="value" id="license-issue"></span>
-                    </div>
-                    <div class="info-row">
-                        <span class="label">Gültig bis:</span>
-                        <span class="value" id="license-expire"></span>
-                    </div>
-                    <div class="info-row" id="license-classes-row">
-                        <span class="label">Klassen:</span>
-                        <span class="value" id="license-classes"></span>
+                    
+                    <div class="info-section document-info">
+                        <h3 class="section-title">Dokument-Informationen</h3>
+                        
+                        <div class="info-row">
+                            <span class="label">
+                                <i class="fas fa-calendar-plus"></i>
+                                Ausgestellt:
+                            </span>
+                            <span class="value" id="license-issue">01.01.2024</span>
+                        </div>
+                        
+                        <div class="info-row">
+                            <span class="label">
+                                <i class="fas fa-calendar-times"></i>
+                                Gültig bis:
+                            </span>
+                            <span class="value" id="license-expire">01.01.2034</span>
+                        </div>
+                        
+                        <div class="info-row">
+                            <span class="label">
+                                <i class="fas fa-hashtag"></i>
+                                Dokument-ID:
+                            </span>
+                            <span class="value" id="license-id">#000001</span>
+                        </div>
+                        
+                        <div class="info-row" id="license-classes-row">
+                            <span class="label">
+                                <i class="fas fa-list"></i>
+                                Klassen:
+                            </span>
+                            <span class="value" id="license-classes">A, B, C</span>
+                        </div>
+                        
+                        <div class="info-row">
+                            <span class="label">
+                                <i class="fas fa-user-tie"></i>
+                                Ausgestellt von:
+                            </span>
+                            <span class="value" id="license-issuer">Behörde</span>
+                        </div>
                     </div>
                 </div>
             </div>
+            
+            <!-- Footer der Lizenz -->
             <div class="license-footer">
-                <div class="license-status" id="license-status"></div>
-                <button class="close-btn" onclick="closeLicense()">
-                    <i class="fas fa-times"></i> Schließen
-                </button>
+                <div class="footer-left">
+                    <div class="license-status" id="license-status">
+                        <i class="status-icon"></i>
+                        <span class="status-text">Gültig</span>
+                    </div>
+                    
+                    <div class="validity-indicator" id="validity-indicator">
+                        <div class="validity-bar">
+                            <div class="validity-fill" id="validity-fill"></div>
+                        </div>
+                        <span class="validity-text" id="validity-text">Noch 365 Tage gültig</span>
+                    </div>
+                </div>
+                
+                <div class="footer-center">
+                    <div class="qr-code" id="qr-code">
+                        <div class="qr-pattern">
+                            <div class="qr-dot"></div>
+                            <div class="qr-dot"></div>
+                            <div class="qr-dot"></div>
+                            <div class="qr-dot"></div>
+                            <div class="qr-dot"></div>
+                            <div class="qr-dot"></div>
+                            <div class="qr-dot"></div>
+                            <div class="qr-dot"></div>
+                            <div class="qr-dot"></div>
+                        </div>
+                        <span class="qr-label">QR</span>
+                    </div>
+                </div>
+                
+                <div class="footer-right">
+                    <button class="action-btn view-btn" onclick="flipCard()" title="Rückseite anzeigen">
+                        <i class="fas fa-sync-alt"></i>
+                        <span>Drehen</span>
+                    </button>
+                    
+                    <button class="action-btn close-btn" onclick="closeLicense()" title="Schließen">
+                        <i class="fas fa-times"></i>
+                        <span>Schließen</span>
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Rückseite der Lizenz (für Führerschein-Klassen etc.) -->
+            <div class="license-back hidden" id="license-back">
+                <div class="back-header">
+                    <h3>Zusätzliche Informationen</h3>
+                </div>
+                
+                <div class="back-content">
+                    <div class="classes-grid" id="classes-grid">
+                        <!-- Wird dynamisch befüllt -->
+                    </div>
+                    
+                    <div class="restrictions" id="restrictions">
+                        <h4>Beschränkungen:</h4>
+                        <ul id="restrictions-list">
+                            <!-- Wird dynamisch befüllt -->
+                        </ul>
+                    </div>
+                    
+                    <div class="notes" id="notes">
+                        <h4>Bemerkungen:</h4>
+                        <p id="notes-text">Keine besonderen Bemerkungen</p>
+                    </div>
+                </div>
+                
+                <div class="back-footer">
+                    <button class="action-btn" onclick="flipCard()">
+                        <i class="fas fa-arrow-left"></i>
+                        Zurück
+                    </button>
+                </div>
             </div>
         </div>
     </div>
+    
+    <!-- Kamera-Interface für Foto-Aufnahme -->
+    <div id="camera-container" class="hidden">
+        <div class="camera-overlay" onclick="closeCamera()"></div>
+        
+        <div class="camera-interface">
+            <div class="camera-header">
+                <h3>Foto für Lizenz aufnehmen</h3>
+                <button class="camera-close" onclick="closeCamera()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            
+            <div class="camera-content">
+                <div class="camera-preview">
+                    <video id="camera-video" autoplay playsinline></video>
+                    <canvas id="camera-canvas" class="hidden"></canvas>
+                    
+                    <div class="camera-overlay-guide">
+                        <div class="face-guide">
+                            <div class="guide-circle"></div>
+                            <p>Gesicht hier positionieren</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="camera-controls">
+                    <button class="camera-btn capture-btn" onclick="takePhoto()">
+                        <i class="fas fa-camera"></i>
+                        Foto aufnehmen
+                    </button>
+                    
+                    <button class="camera-btn cancel-btn" onclick="closeCamera()">
+                        <i class="fas fa-ban"></i>
+                        Abbrechen
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Loading-Overlay -->
+    <div id="loading-overlay" class="hidden">
+        <div class="loading-spinner">
+            <div class="spinner"></div>
+            <p>Lizenz wird geladen...</p>
+        </div>
+    </div>
+    
+    <!-- Notification-System -->
+    <div id="notification-container">
+        <!-- Notifications werden hier dynamisch eingefügt -->
+    </div>
+    
+    <!-- Audio für Sound-Effekte -->
+    <audio id="card-flip-sound" preload="auto">
+        <source src="sounds/card_flip.mp3" type="audio/mpeg">
+    </audio>
+    
+    <audio id="camera-shutter-sound" preload="auto">
+        <source src="sounds/camera_shutter.mp3" type="audio/mpeg">
+    </audio>
+    
+    <!-- JavaScript -->
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/resources/[tools]/nordi_license/html/script.js b/resources/[tools]/nordi_license/html/script.js
index fd6da9c7a..66d984978 100644
--- a/resources/[tools]/nordi_license/html/script.js
+++ b/resources/[tools]/nordi_license/html/script.js
@@ -63,6 +63,21 @@ function showLicense(data) {
     container.classList.remove('hidden');
 }
 
+    // Foto anzeigen
+    const photoImg = document.getElementById('player-photo');
+    const photoPlaceholder = document.getElementById('photo-placeholder');
+    
+    if (data.license.photo_url && data.license.photo_url !== '') {
+        // Echtes Foto anzeigen
+        photoImg.src = data.license.photo_url;
+        photoImg.classList.remove('hidden');
+        photoPlaceholder.classList.add('hidden');
+    } else {
+        // Platzhalter anzeigen
+        photoImg.classList.add('hidden');
+        photoPlaceholder.classList.remove('hidden');
+    }
+
 // Geschlecht formatieren
 function formatGender(gender) {
     const genderMap = {
diff --git a/resources/[tools]/nordi_license/html/style.css b/resources/[tools]/nordi_license/html/style.css
index cd5e99b71..5948277ca 100644
--- a/resources/[tools]/nordi_license/html/style.css
+++ b/resources/[tools]/nordi_license/html/style.css
@@ -83,11 +83,28 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+    position: relative;
+}
+
+#player-photo {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 6px;
+}
+
+#photo-placeholder {
     font-size: 48px;
     color: rgba(255, 255, 255, 0.7);
-    flex-shrink: 0;
 }
 
+.hidden {
+    display: none !important;
+}
+
+
 .license-info {
     flex: 1;
 }
diff --git a/resources/[tools]/nordi_license/server/main.lua b/resources/[tools]/nordi_license/server/main.lua
index 216a87e07..b28bb6aa9 100644
--- a/resources/[tools]/nordi_license/server/main.lua
+++ b/resources/[tools]/nordi_license/server/main.lua
@@ -290,3 +290,23 @@ exports('hasLicenseClass', function(citizenid, class)
     end
     return false
 end)
+
+-- Spieler-Foto aus QBCore holen
+RegisterNetEvent('license-system:server:getPlayerPhoto', function(targetId)
+    local src = source
+    local TargetPlayer = QBCore.Functions.GetPlayer(targetId)
+    
+    if TargetPlayer then
+        -- Mugshot vom Spieler machen
+        TriggerClientEvent('license-system:client:takePlayerPhoto', src, targetId)
+    end
+end)
+
+-- Foto-URL speichern
+RegisterNetEvent('license-system:server:savePlayerPhoto', function(citizenid, photoUrl)
+    MySQL.Async.execute('UPDATE player_licenses SET photo_url = ? WHERE citizenid = ? AND id = ?', {
+        photoUrl,
+        citizenid,
+        -- Hier die aktuelle Lizenz-ID
+    })
+end)
