diff --git a/README.md b/README.md
index c19b6f3b3fa7e1fe1416d3223ff51885f995808c..52236505f4c10f2345d77f5ab07a0f2d53dcac6b 100644
--- a/README.md
+++ b/README.md
@@ -3,3 +3,17 @@
 An audiovisualisation of the Max Planck Digital Library services (minervamessenger, keeper, bloxberg). Events of these
 services are presented as fading dots accompanied by a relaxing soundscape. Dot sizes and tone pitches vary based on event
 information. Based on [Hatnote](https://github.com/hatnote/listen-to-wikipedia).
+
+## Build
+
+For development run `npm run build-dev`. Staging: `npm run build-staging`. Production: `npm run build-prod`.
+
+Then run `npm run start` to start the web server.
+
+Now you can open the website on http://localhost:3000.
+
+## Deployment
+See on Keeper.
+
+## Additional notes
+Further documentation and possible missing files can be found on Keeper.
\ No newline at end of file
diff --git a/web/.env.defaults b/web/.env.defaults
index c2ced226eee2201bb4314fb95fd2e8b08f4cddef..5228d429253ad28195987755e87465035a9003ee 100644
--- a/web/.env.defaults
+++ b/web/.env.defaults
@@ -1,2 +1,2 @@
 # the following line will be replaced by a script ("update_version.sh"). Do not change the line. If you do, make sure to change the script. You also need to copy this number manually to the backend code if you want to trigger a notification for the user when the user is running the application but has not updated the browser, or if the user has to clear the browser cache.
-VERSION=20240116140759
\ No newline at end of file
+VERSION=20240226105052
\ No newline at end of file
diff --git a/web/src/canvas/canvas.ts b/web/src/canvas/canvas.ts
index db349efe4c798f0d681c494e3844dc2efb0cba00..4f4fe120341e00c4d76d4a9f7d409c881d4dccd2 100644
--- a/web/src/canvas/canvas.ts
+++ b/web/src/canvas/canvas.ts
@@ -97,16 +97,16 @@ export class Canvas {
             this.carousel = new Carousel(this)
         }
 
-        // needs to be here because otherwise the transition animation layer of the carousel would lay above the mute icon
-        // and block the cursor event of the mute icon
-        this.mute_icon = new MuteIcon(this)
-
         // needs to be added after the carousel transition because the transition layer spans over the entire screen
         // which captures mouse clicks that otherwise would not arrive at the navigation buttons
         if (this.isMobileScreen && !this.settings.embedded_mode) {
             this.navigation = new Navigation(this)
         }
 
+        // needs to be here because otherwise the transition animation and mobile navigation layer of the carousel would lay above the mute icon
+        // and block the cursor event of the mute icon
+        this.mute_icon = new MuteIcon(this)
+
         this.renderCurrentTheme();
 
         if(!settings.kiosk_mode && !settings.audio_mute){
diff --git a/web/src/canvas/mute_icon.ts b/web/src/canvas/mute_icon.ts
index b1687474f2bec67b5f4fdaae8ed2b50377182ff2..c75bbc125d0152c8d62dfcea2650539fe959b97c 100644
--- a/web/src/canvas/mute_icon.ts
+++ b/web/src/canvas/mute_icon.ts
@@ -7,16 +7,19 @@ export class MuteIcon{
     private readonly image: Selection<SVGImageElement, unknown, HTMLElement, any>;
     private readonly text: Selection<SVGTextElement, unknown, HTMLElement, any>;
     private readonly line1: Selection<SVGTSpanElement, unknown, HTMLElement, any>;
+    private readonly background: Selection<SVGRectElement, unknown, HTMLElement, any>;
     private readonly image_width = 100;
     private readonly text_color = '#fff';
     private readonly canvas: Canvas;
 
+    // consists not only of the icon but also spans a transparent clickable container above everything
     constructor(canvas: Canvas) {
         this.canvas = canvas
         this.root = canvas.appendSVGElement('g')
             .attr('id', 'qr_code')
             .attr('opacity', 0)
             .attr('cursor', 'auto')
+            .attr('pointer-events','none')
             .attr('id', 'mute_icon')
         this.image = this.root.append('image')
             .attr('href', QrCodeMinerva)
@@ -31,23 +34,32 @@ export class MuteIcon{
             .attr('text-anchor', 'middle')
         this.line1.text('Click here to unmute')
 
+        // needs to be added last so the click on this layer is not blocked by other elements
+        this.background = this.root.append('rect')
+            .attr('opacity', 0)
+            .attr('width', this.canvas.width)
+            .attr('height', this.canvas.height)
+            .attr('id', 'mute_icon_background')
+
         this.setPosition()
 
-        document.getElementById('mute_icon')?.addEventListener("click", (_) => {
+        document.getElementById('mute_icon_background')?.addEventListener("click", (_) => {
             this.hide();
         });
     }
 
     public windowUpdate(){
         this.setPosition();
+        this.background.attr('width', this.canvas.width)
+        this.background.attr('height', this.canvas.height)
     }
 
     public show(){
-        this.root.attr('opacity', 0.7).attr('cursor', 'pointer')
+        this.root.attr('opacity', 0.7).attr('cursor', 'pointer').attr('pointer-events','visiblePainted')
     }
 
     public hide(){
-        this.root.attr('opacity', 0).attr('cursor', 'auto')
+        this.root.attr('opacity', 0).attr('cursor', 'auto').attr('pointer-events','none')
     }
 
     private setPosition(){