diff --git a/php/public/style.css b/php/public/style.css
index 57e973d9..a20a7701 100644
--- a/php/public/style.css
+++ b/php/public/style.css
@@ -574,6 +574,10 @@ input[type="checkbox"]:disabled:not(:checked) + label {
     flex-direction: column;
 }
 
+.office-card-disabled {
+    opacity: 50%;
+}
+
 .office-card:hover {
     border-color: var(--color-primary-element);
     box-shadow: 0 4px 12px rgba(0, 130, 201, 0.15);
diff --git a/php/templates/includes/optional-containers.twig b/php/templates/includes/optional-containers.twig
index 883dc278..9eb512cb 100644
--- a/php/templates/includes/optional-containers.twig
+++ b/php/templates/includes/optional-containers.twig
@@ -24,7 +24,7 @@
                 checked="checked"
             {% endif %}
         >
-        <label class="office-card" for="office-collabora">
+        <label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}" for="office-collabora">
             <div class="office-card-header">
                 <h4>Nextcloud Office</h4>
                 <svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -58,7 +58,7 @@
                 checked="checked"
             {% endif %}
         >
-        <label class="office-card" for="office-onlyoffice">
+        <label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}" for="office-onlyoffice">
             <div class="office-card-header">
                 <h4>OnlyOffice</h4>
                 <svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">