diff --git a/go_cloud/internal/http/wopi_handlers.go b/go_cloud/internal/http/wopi_handlers.go
index 77699a3..aafb1c9 100644
--- a/go_cloud/internal/http/wopi_handlers.go
+++ b/go_cloud/internal/http/wopi_handlers.go
@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"io"
 	"net/http"
+	"net/url"
 	"strings"
 	"sync"
 	"time"
@@ -663,47 +664,51 @@ func collaboraProxyHandler(w http.ResponseWriter, r *http.Request, db *database.
 	// Build WOPISrc URL
 	wopiSrc := fmt.Sprintf("https://go.b0esche.cloud/wopi/files/%s?access_token=%s", fileID, accessToken)
 
-	// Return HTML page with auto-submitting form
-	// Collabora requires: POST to /loleaflet/dist/loleaflet.html with WOPISrc in request body
+	// Build Collabora editor URL with WOPISrc in query string
+	editorURL := fmt.Sprintf("%s/loleaflet/dist/loleaflet.html?WOPISrc=%s&closebutton=1", collaboraURL, url.QueryEscape(wopiSrc))
+
+	// Return HTML page that loads Collabora in an iframe
 	htmlContent := fmt.Sprintf(`<!DOCTYPE html>
 <html>
 <head>
   <title>Loading Document...</title>
   <meta charset="utf-8">
   <style>
-    body { margin: 0; padding: 0; background: #f5f5f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-    .container { display: flex; justify-content: center; align-items: center; height: 100vh; }
-    .message { color: #666; font-size: 16px; }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%%; height: 100%%; overflow: hidden; }
+    #collabora-container { width: 100%%; height: 100%%; background: #f5f5f5; }
+    #collabora-frame { width: 100%%; height: 100%%; border: none; }
+    .loading { position: absolute; top: 50%%; left: 50%%; transform: translate(-50%%, -50%%); text-align: center; }
+    .loading p { color: #666; margin-top: 10px; }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div class="message">Loading document in Collabora Online...</div>
+  <div id="collabora-container">
+    <div class="loading">
+      <p>Loading Collabora Online...</p>
+    </div>
+    <iframe id="collabora-frame"></iframe>
   </div>
-  <form method="POST" action="%s/loleaflet/dist/loleaflet.html" target="collabora-frame" id="collaboraForm" style="display: none;">
-    <input type="hidden" name="WOPISrc" value="%s">
-  </form>
-  <iframe name="collabora-frame" id="collabora-frame" style="width:100%%; height:100%%; border:none; position:fixed; top:0; left:0;"></iframe>
   <script>
     window.addEventListener('load', function() {
-      setTimeout(function() {
-        var form = document.getElementById('collaboraForm');
-        if (form) {
-          console.log('[COLLABORA] Form found, submitting...');
-          try {
-            form.submit();
-            console.log('[COLLABORA] Form submitted successfully');
-          } catch(e) {
-            console.error('[COLLABORA] Form submission failed:', e);
-          }
-        } else {
-          console.error('[COLLABORA] Form element not found!');
-        }
-      }, 100);
+      var frame = document.getElementById('collabora-frame');
+      var loading = document.querySelector('.loading');
+      
+      if (frame) {
+        frame.onload = function() {
+          if (loading) loading.style.display = 'none';
+        };
+        frame.onerror = function() {
+          console.error('[COLLABORA] Frame load error');
+        };
+        
+        console.log('[COLLABORA] Loading editor from:', '%s');
+        frame.src = '%s';
+      }
     });
   </script>
 </body>
-</html>`, collaboraURL, wopiSrc)
+</html>`, editorURL, editorURL)
 
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
 	// Don't set X-Frame-Options - this endpoint is meant to be loaded in an iframe
