diff --git a/BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml b/BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml
index 2e37f7acd..710d49b25 100644
--- a/BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml
+++ b/BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml
@@ -45,40 +45,40 @@
            
             <div class="card-body">
 
-                 <div class="row py-2 text-center">
-                                                <div class="col-sm border-right">
-                                                    <h5>{{srvModel.info.currentAmount + srvModel.info.currentPendingAmount }} {{targetCurrency}} </h5>
-                                                    <h5 class="text-muted">Raised</h5>
-                                                </div>
-                                                <div  class="col-sm  border-right">
-                                                    <h5>{{srvModel.info.progressPercentage + srvModel.info.pendingProgressPercentage }}%</h5>
-                                                    <h5 class="text-muted">Of Goal</h5>
-                                                </div>
-                                                <div  class="col-sm  border-right">
-                                                    <h5>
-                                                        {{srvModel.info.totalContributors}}
-                                                    </h5>
-                                                    <h5 class="text-muted">Contributors</h5>
-                                                </div> 
-                                                <div  class="col-sm" v-if="endDiff">
-                                                    <h5>
-                                                        {{endDiff}}
-                                                    </h5>
-                                                    <h5 class="text-muted">Left</h5>
-                                                </div>
-                                                <div  class="col-sm" v-if="startDiff">
-                                                    <h5>
-                                                        {{startDiff}}
-                                                    </h5>
-                                                    <h5 class="text-muted">Left to start</h5>
-                                                </div>
-                                                <div  class="col-sm" v-if="ended">
-                                                    <h5>
-                                                        Campaign
-                                                    </h5>
-                                                    <h5 >not active</h5>
-                                                </div>
-                                            </div>
+                <div class="row py-2 text-center">
+                    <div class="col-sm border-right">
+                        <h5>{{srvModel.info.currentAmount + srvModel.info.currentPendingAmount }} {{targetCurrency}} </h5>
+                        <h5 class="text-muted">Raised</h5>
+                    </div>
+                    <div  class="col-sm  border-right">
+                        <h5>{{srvModel.info.progressPercentage + srvModel.info.pendingProgressPercentage }}%</h5>
+                        <h5 class="text-muted">Of Goal</h5>
+                    </div>
+                    <div  class="col-sm  border-right">
+                        <h5>
+                            {{srvModel.info.totalContributors}}
+                        </h5>
+                        <h5 class="text-muted">Contributors</h5>
+                    </div> 
+                    <div  class="col-sm" v-if="endDiff">
+                        <h5>
+                            {{endDiff}}
+                        </h5>
+                        <h5 class="text-muted">Left</h5>
+                    </div>
+                    <div  class="col-sm" v-if="startDiff">
+                        <h5>
+                            {{startDiff}}
+                        </h5>
+                        <h5 class="text-muted">Left to start</h5>
+                    </div>
+                    <div  class="col-sm" v-if="ended">
+                        <h5>
+                            Campaign
+                        </h5>
+                        <h5 >not active</h5>
+                    </div>
+                </div>
                 <div class="card-title">
 
                     <div class="row">
@@ -134,6 +134,21 @@
                     </div>
                 </template>
             </div>
+            <div class="card-footer text-muted d-flex" v-if="srvModel.animationsEnabled || srvModel.soundsEnabled">
+              
+                <div class="form-check mx-1"  v-if="srvModel.animationsEnabled || animation">
+                    <input class="form-check-input" type="checkbox" id="cbAnime" v-model="animation">
+                    <label class="form-check-label" for="cbAnime">
+                        Animations
+                    </label>
+                </div>
+                <div class="form-check mx-1"  v-if="srvModel.soundsEnabled|| sound">
+                        <input class="form-check-input" type="checkbox"  id="cbSounds" v-model="sound">
+                        <label class="form-check-label" for="cbSounds">
+                            Sounds
+                        </label>
+                    </div>
+            </div>
         </div>
     </div>
     <b-modal title="Contribute" v-model="contributeModalOpen" size="lg" ok-only="true" ok-variant="secondary" ok-title="Close" ref="modalContribute">
diff --git a/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml b/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml
index 8074d3b23..341521569 100644
--- a/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml
+++ b/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml
@@ -44,8 +44,11 @@ else
     <noscript>
         @await Html.PartialAsync("Crowdfund/MinimalCrowdfund", Model)
     </noscript>
-    
-    <canvas id="fireworks"></canvas>
+
+    if (Model.AnimationsEnabled)
+    {
+        <canvas id="fireworks"></canvas>
+    }
     @await Html.PartialAsync("Crowdfund/VueCrowdfund", Model)
 }
 
diff --git a/BTCPayServer/wwwroot/crowdfund/app.js b/BTCPayServer/wwwroot/crowdfund/app.js
index 06e67aad8..12c764a7a 100644
--- a/BTCPayServer/wwwroot/crowdfund/app.js
+++ b/BTCPayServer/wwwroot/crowdfund/app.js
@@ -85,6 +85,8 @@ addLoadEvent(function (ev) {
         mounted: function () {
             hubListener.connect();
             var self = this;
+            this.sound = this.srvModel.soundsEnabled;
+            this.animation = this.srvModel.animationsEnabled;
             eventAggregator.$on("invoice-created", function (invoiceId) {
                 btcpay.setApiUrlPrefix(window.location.origin);
                 btcpay.showInvoice(invoiceId);
@@ -94,10 +96,10 @@ addLoadEvent(function (ev) {
             });
             eventAggregator.$on("payment-received", function (amount, cryptoCode, type) {
                 var onChain = type.toLowerCase() === "btclike";
-                if(this.srvModel.soundsEnabled) {
+                if(self.sound) {
                     playRandomQuakeSound();
                 }
-                if(this.srvModel.animationsEnabled) {
+                if(self.animation) {
                     fireworks();
                 }
                 if(onChain){