diff --git a/config.js b/config.js
index 5507c47..43a9e36 100644
--- a/config.js
+++ b/config.js
@@ -1,4 +1,8 @@
-var displayConfig = {
+let displayConfig = {
     coreIP: "192.168.0.105",
-    corePort: 9100
+    corePort: 9100,
+    targetZone: "Node",
+    graphics: {
+        enableDithering: true
+    }
 }
\ No newline at end of file
diff --git a/img/noise.svg b/img/noise.svg
new file mode 100644
index 0000000..eb27c3c
--- /dev/null
+++ b/img/noise.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 800 480">
+  <defs>
+    <filter id="noise-filter">
+      <feTurbulence baseFrequency="0.7" stitchTiles="stitch" type="fractalNoise" numOctaves="3"></feTurbulence>
+      <feColorMatrix type="luminanceToAlpha"></feColorMatrix>
+    </filter>
+  </defs>
+  <rect x="0" y="0" width="800" height="480" filter="url(#noise-filter)"/>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 94bd5d5..218a45f 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
     <!-- MAIN SCREEN -->
     <div id="main-content-box">
         <img id="album-art-bg" />
+        <div id="noise-overlay"></div>
         <div id="album-cover">
             <div id="album-cover-body">
                 <div id="cover-front"></div>
@@ -19,7 +20,6 @@
             </div>
         </div>
 
-
         <div id="track-info">
             <h4 id="song-name"></h4>
             <div id="artist-album">
diff --git a/src/controller.ts b/src/controller.ts
index 63b1a9a..05a3590 100644
--- a/src/controller.ts
+++ b/src/controller.ts
@@ -18,20 +18,27 @@ const AlbumImageConfig = {
 
 const LoadingText = [".", "..", "..."]
 
-const targetZone = "Node"
-
 const FaceFront = "front"
 const FaceBack = "back"
 
 export default class Controller {
 
     private core: RoonCore
+    private targetZone: string
     private zone: Zone
 
     private currentFace = FaceFront
 
     private loadingAnimator = null
 
+    constructor(targetZone: string, enableDithering: boolean) {
+        this.targetZone = targetZone
+
+        if (enableDithering) {
+            $("#noise-overlay").show()
+        }
+    }
+
     public setCore(core: RoonCore | null) {
         this.core = core
 
@@ -63,7 +70,7 @@ export default class Controller {
         const updatedZones = payload.zones || payload.zones_added || payload.zones_changed
         const zoneSeekChange = payload.zones_seek_changed
         if (updatedZones) {
-            const zone = updatedZones.find(zone => zone.display_name == targetZone)
+            const zone = updatedZones.find(zone => zone.display_name == this.targetZone)
 
             if (!zone) {
                 console.log("Failed to find zone. Check config")
diff --git a/src/index.ts b/src/index.ts
index 7926115..425772d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,7 +9,7 @@ import RoonApiImage from "node-roon-api-image"
 
 import Controller from "./controller"
 
-const controller = new Controller()
+const controller = new Controller(displayConfig.targetZone, displayConfig.graphics.enableDithering)
 controller.setCore(null) // init with no core
 
 const roonConnected = (core) => {
diff --git a/style/main.css b/style/main.css
index 54bfb65..7a04073 100644
--- a/style/main.css
+++ b/style/main.css
@@ -30,6 +30,19 @@ body {
     opacity: 0.4;
 }
 
+#noise-overlay {
+    position: absolute;
+    display: none; /* default is hidden, will show if enabled through config */
+    top: 0; left: 0;
+    width: 800px;
+    height: 480px;
+    background-color: rgb(60, 60, 60);
+    mix-blend-mode: overlay;
+    opacity: 0.7;
+    mask: url("../img/noise.svg");
+    -webkit-mask: url("../img/noise.svg");
+}
+
 #album-cover {
     position: relative;
     display: block;