diff --git a/css/main.css b/css/main.css
index 7327ab3..4136e17 100644
--- a/css/main.css
+++ b/css/main.css
@@ -124,7 +124,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
-    background-color: rgb(200, 200, 0);
+    background-color: rgb(0,0,255);
     visibility: hidden;
 }
 
@@ -146,7 +146,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
-    background-color: rgb(200, 200, 0);
+    background-color: rgb(0,0,255);
     visibility: hidden;
 }
 
@@ -168,7 +168,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
-    background-color: rgb(200, 200, 0);
+    background-color: rgb(0,0,255);
     visibility: hidden;
 }
 
@@ -190,7 +190,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
-    background-color: rgb(200, 200, 0);
+    background-color: rgb(0,0,255);
     visibility: hidden;
 }
 
diff --git a/dist/css/main.css b/dist/css/main.css
index 7327ab3..4136e17 100644
--- a/dist/css/main.css
+++ b/dist/css/main.css
@@ -124,7 +124,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
-    background-color: rgb(200, 200, 0);
+    background-color: rgb(0,0,255);
     visibility: hidden;
 }
 
@@ -146,7 +146,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
-    background-color: rgb(200, 200, 0);
+    background-color: rgb(0,0,255);
     visibility: hidden;
 }
 
@@ -168,7 +168,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
-    background-color: rgb(200, 200, 0);
+    background-color: rgb(0,0,255);
     visibility: hidden;
 }
 
@@ -190,7 +190,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
-    background-color: rgb(200, 200, 0);
+    background-color: rgb(0,0,255);
     visibility: hidden;
 }
 
diff --git a/dist/images/image0.png b/dist/images/image0.png
index 5eb6e70..0866dfa 100644
Binary files a/dist/images/image0.png and b/dist/images/image0.png differ
diff --git a/dist/images/image1.png b/dist/images/image1.png
index e1ed8ff..0866dfa 100644
Binary files a/dist/images/image1.png and b/dist/images/image1.png differ
diff --git a/dist/images/image2.png b/dist/images/image2.png
index 6a5cd1d..0866dfa 100644
Binary files a/dist/images/image2.png and b/dist/images/image2.png differ
diff --git a/dist/images/image3.png b/dist/images/image3.png
index e34ba19..0866dfa 100644
Binary files a/dist/images/image3.png and b/dist/images/image3.png differ
diff --git a/dist/images/image4.png b/dist/images/image4.png
index 2ca96a3..0866dfa 100644
Binary files a/dist/images/image4.png and b/dist/images/image4.png differ
diff --git a/dist/images/image5.png b/dist/images/image5.png
index 7b4e3c2..0866dfa 100644
Binary files a/dist/images/image5.png and b/dist/images/image5.png differ
diff --git a/dist/images/image6.png b/dist/images/image6.png
index 9515aaa..0866dfa 100644
Binary files a/dist/images/image6.png and b/dist/images/image6.png differ
diff --git a/dist/images/image7.png b/dist/images/image7.png
index c87f435..0866dfa 100644
Binary files a/dist/images/image7.png and b/dist/images/image7.png differ
diff --git a/dist/images/image8.png b/dist/images/image8.png
index 56165bc..0866dfa 100644
Binary files a/dist/images/image8.png and b/dist/images/image8.png differ
diff --git a/dist/sketch.js b/dist/sketch.js
index cc3f4fd..7b40580 100644
--- a/dist/sketch.js
+++ b/dist/sketch.js
@@ -496,7 +496,7 @@ function playSynth(i) {
   document.getElementById(`i${i}`).style.backgroundColor="magenta";
 }
 
-var col = ["rgb(255, 255, 0)", "rgb(200, 200, 0)", "rgb(255, 255, 0)", "rgb(200, 200, 0)", "rgb(255, 255, 0)", "rgb(200, 200, 0)", "rgb(255, 255, 0)", "rgb(200, 200, 0)", "rgb(255, 255, 0)"]; //colour of button
+var col = ["rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)"]; //colour of button
 
 function stopSynth(i) {
   sampler.triggerRelease(notes[i], Tone.now());
diff --git a/images/image0.png b/images/image0.png
index 5eb6e70..0866dfa 100644
Binary files a/images/image0.png and b/images/image0.png differ
diff --git a/images/image1.png b/images/image1.png
index e1ed8ff..0866dfa 100644
Binary files a/images/image1.png and b/images/image1.png differ
diff --git a/images/image2.png b/images/image2.png
index 6a5cd1d..0866dfa 100644
Binary files a/images/image2.png and b/images/image2.png differ
diff --git a/images/image3.png b/images/image3.png
index e34ba19..0866dfa 100644
Binary files a/images/image3.png and b/images/image3.png differ
diff --git a/images/image4.png b/images/image4.png
index 2ca96a3..0866dfa 100644
Binary files a/images/image4.png and b/images/image4.png differ
diff --git a/images/image5.png b/images/image5.png
index 7b4e3c2..0866dfa 100644
Binary files a/images/image5.png and b/images/image5.png differ
diff --git a/images/image6.png b/images/image6.png
index 9515aaa..0866dfa 100644
Binary files a/images/image6.png and b/images/image6.png differ
diff --git a/images/image7.png b/images/image7.png
index c87f435..0866dfa 100644
Binary files a/images/image7.png and b/images/image7.png differ
diff --git a/images/image8.png b/images/image8.png
index 56165bc..0866dfa 100644
Binary files a/images/image8.png and b/images/image8.png differ
diff --git a/sketch.js b/sketch.js
index cc3f4fd..7b40580 100644
--- a/sketch.js
+++ b/sketch.js
@@ -496,7 +496,7 @@ function playSynth(i) {
   document.getElementById(`i${i}`).style.backgroundColor="magenta";
 }
 
-var col = ["rgb(255, 255, 0)", "rgb(200, 200, 0)", "rgb(255, 255, 0)", "rgb(200, 200, 0)", "rgb(255, 255, 0)", "rgb(200, 200, 0)", "rgb(255, 255, 0)", "rgb(200, 200, 0)", "rgb(255, 255, 0)"]; //colour of button
+var col = ["rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)", "rgb(0,0,255)", "rgb(255, 255, 0)"]; //colour of button
 
 function stopSynth(i) {
   sampler.triggerRelease(notes[i], Tone.now());