diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..b734202
Binary files /dev/null and b/.DS_Store differ
diff --git a/Icons/.DS_Store b/Icons/.DS_Store
new file mode 100644
index 0000000..6672a1d
Binary files /dev/null and b/Icons/.DS_Store differ
diff --git a/Icons/erase.svg b/Icons/erase.svg
new file mode 100644
index 0000000..7a584b4
--- /dev/null
+++ b/Icons/erase.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="5px" viewBox="0 0 14 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Path 3</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-48.000000, -173.000000)" stroke="#FFFFFF" stroke-width="4">
+            <g id="Group-2" transform="translate(40.000000, 160.000000)">
+                <path d="M8,15.6666667 L22,15.6666667" id="Path-3"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Icons/wave.svg b/Icons/wave.svg
new file mode 100644
index 0000000..43b456f
--- /dev/null
+++ b/Icons/wave.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="9px" viewBox="0 0 22 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Path</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard" transform="translate(-44.000000, -51.000000)" stroke="#FFFFFF" stroke-width="4">
+            <g id="Group-3" transform="translate(40.000000, 40.000000)">
+                <path d="M6.66666667,15.3333333 C9.36459466,12.3384576 12.2192522,12.3384576 15.2306392,15.3333333 C18.2420262,18.3282091 21.1651465,18.3282091 24,15.3333333" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Icons/zigzag.svg b/Icons/zigzag.svg
new file mode 100644
index 0000000..84a0782
--- /dev/null
+++ b/Icons/zigzag.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="12px" viewBox="0 0 23 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Path 2</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="Artboard" transform="translate(-43.000000, -109.000000)" stroke="#FFFFFF" stroke-width="4">
+            <g id="Group" transform="translate(40.000000, 100.000000)">
+                <polyline id="Path-2" points="6.66666667 15 11.2651176 12 17.6113927 18 22.6666667 15"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/drawing.js b/drawing.js
index d14728d..6b910ea 100644
--- a/drawing.js
+++ b/drawing.js
@@ -1,7 +1,6 @@
 var x, y
-
-var WIDTH = 640
-var HEIGHT = 300
+var WIDTH = 900
+var HEIGHT = 900
 var viz, sketch
 var audioLoaded = false
 const STATE_AUDIO = 0
@@ -14,6 +13,7 @@ function createLines (offsetX, offsetY) {
 }
 
 var bgColor = '#dbd8e3'
+//how can i set this bgColor to 0% opacity?//
 function setup () {
   cursor(CROSS)
   if (windowHeight < HEIGHT) {
@@ -38,9 +38,9 @@ function draw () {
   if (state < STATE_AUDIO) {
     viz.background(bgColor)
 
-    viz.textSize(32)
-    viz.fill(150)
-    viz.text('Preparing stuff', WIDTH / 2 - 100, HEIGHT / 2)
+    viz.textSize(20)
+    viz.fill(300)
+    viz.text('Preparing stuff', WIDTH / 2 - 60, HEIGHT / 2)
     image(viz, 0, 0, WIDTH, HEIGHT)
     return
   }
@@ -48,9 +48,9 @@ function draw () {
   if (state < STATE_DRAW) {
     viz.background(bgColor)
 
-    viz.textSize(32)
-    viz.fill(150)
-    viz.text('Draw something here', WIDTH / 2 - 150, HEIGHT / 2)
+    viz.textSize(20)
+    viz.fill(300)
+    viz.text('Scribble, quibble, dribble, you know what to do. Hit spacebar when you’re done.', WIDTH / 2 - 300, HEIGHT / 2)
     image(viz, 0, 0, WIDTH, HEIGHT)
     return
   }
@@ -117,6 +117,7 @@ var eraser = document.querySelector('#toolbox__eraser')
 
 var tool = 0 // 0 = pen, 1 = eraser
 
+
 pencil.onclick = function (e) {
   tool = 0
   eraser.classList.remove('toolbox__item--selected')
diff --git a/index.html b/index.html
index b7843c0..344524e 100644
--- a/index.html
+++ b/index.html
@@ -14,31 +14,31 @@
     <div id="sketch-canvas">
 
     </div>
+
     <div class="spaced">
 
-      <div class="spaced toolbox">
-        <p>
-          Select tool
-        </p>
-        <button id="toolbox__pencil" class="toolbox__item toolbox__item--selected">Brush 1</button>
-        <button id="toolbox__pencil-2" class="toolbox__item">Brush 2</button>
-        <button id="toolbox__eraser" class="toolbox__item">Eraser</button>
+      <div id="floating-button-area" class="spaced toolbox">
+        <a id="toolbox__pencil" class="toolbox__item toolbox__item--selected"> <img class="brushicon" src="Icons/wave.svg"> </a>
+        <a id="toolbox__pencil-2" class="toolbox__item"> <img class="brushicon" src="Icons/zigzag.svg"> </a>
+        <a id="toolbox__eraser" class="toolbox__item"> <img class="brushicon" src="Icons/erase.svg">  </a>
       </div>
-      <div class="spaced">
-        <label for="triad">Select Scale</label>
-        <select id="triad">
-          <option value="A">A</option>
-          <option value="A#">A#</option>
-          <option value="B">B</option>
-          <option value="C">C</option>
-          <option value="C#">C#</option>
-          <option value="D">D</option>
-          <option value="D#">D#</option>
-          <option value="E">E</option>
-          <option value="F">F</option>
-          <option value="F#">F#</option>
-          <option value="G">G</option>
-          <option value="G#">G#</option>
+
+      <div id="key-selection-area"class="spaced">
+      
+          <button value="A">A</button>
+          <button value="A#">A#</button>
+          <button value="B">B</button>
+          <button value="C">C</button>
+          <button value="C#">C#</button>
+          <button value="D">D</button>
+          <button value="D#">D#</button>
+          <button value="E">E</button>
+          <button value="F">F</button>
+          <button value="F#">F#</button>
+          <button value="G">G</button>
+          <button value="G#">G#</button>
+       
+       <!-- to do: create drop-up from the Key selectors for these options
         </select>
         <select id="type">
           <option value="major">Major</option>
@@ -48,12 +48,12 @@
           <option value="myxolydian">Myxolydian</option>
           <option value="aeolian">Aeolian</option>
           <option value="locrian">Locrian</option>
-        </select>
+        </select> -->
+
       </div>
+
     </div>
-      <div class="spaced">
-        Use your cursor to draw patterns on the canvas to generate music. Use the dropdown to change the foundation scale/mode.
-      </div>
+     
         <!-- import the webpage's javascript file -->
     <script src="Tone.js"></script>
     <script src="Tonejs-Instruments.js"></script>
diff --git a/style.css b/style.css
index 496a33d..916ba3c 100644
--- a/style.css
+++ b/style.css
@@ -3,7 +3,7 @@
 body {
   font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
   margin: 2em;
-  background-color: #5c5470;
+  background-image: linear-gradient(100deg, #8256D6, #5943C8, #3C39BC);
   color: #dbd8e3;
 }
 html, body {
@@ -20,32 +20,70 @@ body {
   margin: 0;
   display: flex;
   flex-wrap: wrap;
+  /* Making this fullscreen smhow?. */
+  justify-content: left;
+  align-items: top;
+}
 
-  /* This centers our sketch horizontally. */
-  justify-content: center;
+#floating-button-area{
+  position: absolute;
+  left: 40px;
+  top: 60px;
+  width: 100px;
+  height: 200px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  flex-direction: column;
+}
 
-  /* This centers our sketch vertically. */
-  align-items: center;
+#key-selection-area {
+  position:absolute;
+  left:50px;
+  bottom: 50px;
+  width:1600px;
+  height:50px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding: 50px 0;
 }
 
 #sketch-canvas {
    display: block;
+   position: absolute;
+   top:0;
+   right:0;
+   bottom:0;
+   left:100px;
 }
 
-.spaced {
-   margin: 16px;
-}
-
+  /* trying some code for brush buttons */
 .toolbox__item {
-    font-size: 14px;
+    position: relative;
+    height: 42px;
+    width: 42px;
+    border-radius: 40px;
+    text-align: center;
+    line-height: 42px;
+    background: #9566DF;
+    margin-bottom: 42px;
     cursor: pointer;
-    padding: 16px;
-    border: none;
-    background: #352f44;
-    color: #ccc;
+    transition: all .25s ease;
 }
 
+
+.toolbox__item:hover {
+      box-shadow: 4px 10px 14px 0px rgba(0,0,0,0.15);
+      }
+
+
 .toolbox__item--selected {
-    color: #333;
-    background: #dbd8e3;
+    background: #FF90C3;
+    box-shadow: 4px 10px 14px 0px rgba(168,137,26,0.4);
 }
+
+
+
+
+