diff --git a/frontend/src/pages/AgentDetailPage.jsx b/frontend/src/pages/AgentDetailPage.jsx
index 817a1e6..b9fff05 100644
--- a/frontend/src/pages/AgentDetailPage.jsx
+++ b/frontend/src/pages/AgentDetailPage.jsx
@@ -296,7 +296,7 @@ function RemoteDesktop({ agentId, agentHostname }) {
     const [error, setError] = useState('');
     const [fps, setFps] = useState(0);
     const [resolution, setResolution] = useState('');
-    const imgRef = useRef(null);
+    const canvasRef = useRef(null);
     const wsRef = useRef(null);
     const fpsCounterRef = useRef({ count: 0, last: Date.now() });
 
@@ -321,16 +321,24 @@ function RemoteDesktop({ agentId, agentHostname }) {
         ws.onmessage = (e) => {
             try {
                 const msg = JSON.parse(e.data);
-                if (msg.type === 'rdp_frame' && imgRef.current) {
-                    imgRef.current.src = 'data:image/jpeg;base64,' + msg.data;
-                    if (msg.w && msg.h) setResolution(`${msg.w}×${msg.h}`);
-                    // FPS-Counter
-                    const now = Date.now();
-                    fpsCounterRef.current.count++;
-                    if (now - fpsCounterRef.current.last >= 1000) {
-                        setFps(fpsCounterRef.current.count);
-                        fpsCounterRef.current = { count: 0, last: now };
-                    }
+                if (msg.type === 'rdp_frame') {
+                    const img = new window.Image();
+                    img.onload = () => {
+                        const canvas = canvasRef.current;
+                        if (!canvas) return;
+                        if (canvas.width !== img.naturalWidth) canvas.width = img.naturalWidth;
+                        if (canvas.height !== img.naturalHeight) canvas.height = img.naturalHeight;
+                        canvas.getContext('2d').drawImage(img, 0, 0);
+                        if (msg.w && msg.h) setResolution(`${msg.w}×${msg.h}`);
+                        // FPS-Counter
+                        const now = Date.now();
+                        fpsCounterRef.current.count++;
+                        if (now - fpsCounterRef.current.last >= 1000) {
+                            setFps(fpsCounterRef.current.count);
+                            fpsCounterRef.current = { count: 0, last: now };
+                        }
+                    };
+                    img.src = 'data:image/jpeg;base64,' + msg.data;
                 } else if (msg.type === 'rdp_disconnected') {
                     setStatus('idle');
                     setError('Agent hat die Verbindung getrennt');
@@ -348,7 +356,8 @@ function RemoteDesktop({ agentId, agentHostname }) {
             wsRef.current.close();
         }
         wsRef.current = null;
-        if (imgRef.current) imgRef.current.src = '';
+        const canvas = canvasRef.current;
+        if (canvas) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
         setStatus('idle');
         setFps(0);
         setResolution('');
@@ -397,14 +406,13 @@ function RemoteDesktop({ agentId, agentHostname }) {
                     </div>
                 </div>
             ) : (
-                <div style={{ background: '#000', lineHeight: 0, position: 'relative' }}>
-                    <img
-                        ref={imgRef}
-                        alt="Remote Desktop"
-                        style={{ width: '100%', display: 'block', maxHeight: 640, objectFit: 'contain' }}
+                <div style={{ background: '#000', lineHeight: 0, position: 'relative', minHeight: 400 }}>
+                    <canvas
+                        ref={canvasRef}
+                        style={{ width: '100%', height: 'auto', display: 'block' }}
                     />
                     {status === 'connecting' && (
-                        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.7)', color: '#fff', fontSize: 14 }}>
+                        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.85)', color: '#fff', fontSize: 14 }}>
                             Verbinde…
                         </div>
                     )}