diff --git a/interface/resources/icons/tablet-mute-icon.svg b/interface/resources/icons/tablet-mute-icon.svg
new file mode 100644
index 0000000000..dc626845e6
--- /dev/null
+++ b/interface/resources/icons/tablet-mute-icon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M24.6,12.5l1.6-1.6C24.7,9.2,22.4,8,19.9,8c-2.4,0-4.6,1-6.1,2.7c0.5,0.5,1,1,1.6,1.6c1.1-1.2,2.7-2,4.5-2
+	C21.8,10.2,23.5,11.1,24.6,12.5z"/>
+<path class="st0" d="M28.3,8.9l1.6-1.6c-2.4-2.7-6-4.4-9.9-4.4c-3.8,0-7.3,1.6-9.7,4.2c0.5,0.5,1,1,1.6,1.6c2-2.2,4.9-3.5,8.1-3.5
+	C23.2,5.1,26.2,6.6,28.3,8.9z"/>
+<path class="st0" d="M22.5,18.7v-3.1c0-1.5-1.2-2.6-2.6-2.6h0c-1.5,0-2.6,1.1-2.6,2.6v3.1H22.5z"/>
+<path class="st0" d="M17.3,21.4v3c0,1.5,1.2,2.6,2.7,2.6h0c1.5,0,2.6-1.2,2.6-2.6v-3H17.3z"/>
+<path class="st0" d="M27.9,24.9c0,0,0-3.6,0-3.8c0-0.7-0.6-1.2-1.3-1.2c-0.7,0-1.2,0.6-1.2,1.3c0,0.2,0,3.4,0,3.7
+	c0,2.6-2.4,4.8-5.3,4.8c-2.9,0-5.3-2.1-5.3-4.8c0-0.3,0-3.5,0-3.8c0-0.7-0.5-1.3-1.2-1.3c-0.7,0-1.3,0.5-1.3,1.2c0,0.2,0,3.9,0,3.9
+	c0,3.6,2.9,6.6,6.6,7.2l0,2.4h-3.1c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3h8.8c0.7,0,1.3-0.6,1.3-1.3c0-0.7-0.6-1.3-1.3-1.3
+	h-3.2l0-2.4C25,31.6,27.9,28.6,27.9,24.9z"/>
+</svg>
diff --git a/interface/resources/icons/tablet-unmute-icon.svg b/interface/resources/icons/tablet-unmute-icon.svg
new file mode 100644
index 0000000000..34a33a3535
--- /dev/null
+++ b/interface/resources/icons/tablet-unmute-icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M17.3,18.4v6c0,1.5,1.2,2.6,2.7,2.6h0c1.5,0,2.6-1.2,2.6-2.6v-6H17.3z"/>
+<path class="st0" d="M27.9,24.9c0,0,0-3.6,0-3.8c0-0.7-0.6-1.2-1.3-1.2c-0.7,0-1.2,0.6-1.2,1.3c0,0.2,0,3.4,0,3.7
+	c0,2.6-2.4,4.8-5.3,4.8c-2.9,0-5.3-2.1-5.3-4.8c0-0.3,0-3.5,0-3.8c0-0.7-0.5-1.3-1.2-1.3c-0.7,0-1.3,0.5-1.3,1.2c0,0.2,0,3.9,0,3.9
+	c0,3.6,2.9,6.6,6.6,7.2l0,2.4h-3.1c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3h8.8c0.7,0,1.3-0.6,1.3-1.3c0-0.7-0.6-1.3-1.3-1.3
+	h-3.2l0-2.4C25,31.6,27.9,28.6,27.9,24.9z"/>
+<g>
+	<polygon class="st0" points="23.4,15.8 23.4,15.8 23.4,15.8 	"/>
+	<path class="st0" d="M21.9,10.5l3.4-3.4c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L20,8.6l-3.4-3.4c-0.5-0.5-1.4-0.5-1.9,0
+		s-0.5,1.4,0,1.9l3.4,3.4l-3.4,3.4c-0.5,0.5-0.5,1.4,0,1.9c0.5,0.5,1.4,0.5,1.9,0l3.4-3.4l3.4,3.4c0.5,0.5,1.4,0.5,1.9,0
+		c0.5-0.5,0.5-1.4,0-1.9L21.9,10.5z"/>
+</g>
+</svg>
diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml
index 59bcb511e9..c6b38b538f 100644
--- a/interface/resources/qml/hifi/tablet/Tablet.qml
+++ b/interface/resources/qml/hifi/tablet/Tablet.qml
@@ -1,25 +1,148 @@
 import QtQuick 2.0
-import "../../styles-uit/"
+import QtGraphicalEffects 1.0
 
 Item {
-    id: item1
+    id: tablet
+
+    property double miclevel: 0.8
+
     width: 480
     height: 720
 
     Rectangle {
-        id: bg
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 0
+        id: bgAudio
+        height: 90
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: "#6b6b6b"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#595959"
+            }
+        }
         anchors.right: parent.right
         anchors.rightMargin: 0
         anchors.left: parent.left
         anchors.leftMargin: 0
-        anchors.top: parent.top
         anchors.topMargin: 0
+        anchors.top: parent.top
+
+        Row {
+            id: rowAudio1
+            height: parent.height
+            anchors.topMargin: 0
+            anchors.top: parent.top
+            anchors.leftMargin: 30
+            anchors.left: parent.left
+            anchors.rightMargin: 30
+            anchors.right: parent.right
+            spacing: 5
+
+            Rectangle {
+                id: muteButton
+                width: 128
+                height: 40
+                color: "#464646"
+                anchors.verticalCenter: parent.verticalCenter
+                Text {
+                    id: muteText
+                    color: "#ffffff"
+                    text: "MUTE"
+                    z: 1
+                    verticalAlignment: Text.AlignVCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    font.pixelSize: 16
+                    anchors.verticalCenter: parent.verticalCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    font.bold: true
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onEntered: {
+                        console.log("Mute Botton Hovered!");
+                        parent.color = "#2d2d2d";
+                        parent.border.width = 2;
+                        parent.border.color = "#ffffff";
+                    }
+                    onExited: {
+                        console.log("Mute Botton Unhovered!");
+                        parent.color = "#464646";
+                        parent.border.width = 0;
+                    }
+
+                    onClicked: {
+                        console.log("Mute Button Clicked! current tablet state: " + tablet.state );
+                        if (tablet.state === "muted state") {
+                            tablet.state = "base state";
+                        } else {
+                            tablet.state = "muted state";
+                        }
+                    }
+                }
+            }
+
+            Image {
+                id: muteIcon
+                width: 40
+                height: 40
+                source: "../../../icons/tablet-mute-icon.svg"
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Item {
+                id: item1
+                width: 225
+                height: 10
+                anchors.verticalCenter: parent.verticalCenter
+                Rectangle {
+                    id: audioBarBase
+                    color: "#333333"
+                    radius: 5
+                    anchors.fill: parent
+                }
+                Rectangle {
+                    id: audioBarMask
+                    width: parent.width * tablet.miclevel
+                    color: "#333333"
+                    radius: 5
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 0
+                    anchors.top: parent.top
+                    anchors.topMargin: 0
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                }
+                LinearGradient {
+                    anchors.fill: audioBarMask
+                    source: audioBarMask
+                    start: Qt.point(0, 0)
+                    end: Qt.point(225, 0)
+                    gradient: Gradient {
+                        GradientStop {
+                            position: 0
+                            color: "#00b8ff"
+                        }
+                        GradientStop {
+                            position: 1
+                            color: "#ff2d73"
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: bgMain
         gradient: Gradient {
             GradientStop {
                 position: 0
-                color: "#7c7c7c"
+                color: "#787878"
+
             }
 
             GradientStop {
@@ -27,50 +150,77 @@ Item {
                 color: "#000000"
             }
         }
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.top: bgAudio.bottom
+        anchors.topMargin: 0
 
         Flow {
-            id: flow
+            id: flowMain
             spacing: 12
             anchors.right: parent.right
-            anchors.rightMargin: 17
+            anchors.rightMargin: 30
             anchors.left: parent.left
-            anchors.leftMargin: 17
+            anchors.leftMargin: 30
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 8
+            anchors.bottomMargin: 30
             anchors.top: parent.top
-            anchors.topMargin: 123
-        }
-
-        Image {
-            id: muteIcon
-            x: 205
-            width: 70
-            height: 70
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
-            anchors.topMargin: 28
-            fillMode: Image.Stretch
-            source: "../../../icons/circle.svg"
-
-            RalewaySemiBold {
-                id: muteText
-                x: 15
-                y: 27
-                color: "#ffffff"
-                text: qsTr("MUTE")
-                horizontalAlignment: Text.AlignHCenter
-                font.pixelSize: 14
-            }
+            anchors.topMargin: 30
         }
 
         Component.onCompleted: {
-            console.log("AJT: Tablet.onCompleted!");
-            // AJT: test flow by adding buttons
+            console.log("Tablet.onCompleted!");
             var component = Qt.createComponent("TabletButton.qml");
-            for (var i = 0; i < 10; i++) {
-                component.createObject(flow);
+            var buttons = [];
+            for (var i = 0; i < 9; i++) {
+                buttons.push(component.createObject(flowMain));
             }
+
+            // set button color
+            var green = "#1FC6A6";
+            var lightblue = "#00B4EF";
+            buttons[3].color = lightblue;
+            buttons[4].color = lightblue;
+            buttons[5].color = lightblue;
+            buttons[6].color = green;
+            buttons[7].color = green;
+            buttons[8].color = green;
+
+            // set button text
+            buttons[0].text = "GO TO";
+            buttons[1].text = "BUBBLE";
+            buttons[2].text = "MENU";
+            buttons[3].text = "MARKET";
+            buttons[4].text = "SWITCH";
+            buttons[5].text = "PAUSE";
+            buttons[6].text = "EDIT";
+            buttons[7].text = "SNAP";
+            buttons[8].text = "SCRIPTS";
         }
     }
+    states: [
+        State {
+            name: "muted state"
+
+            PropertyChanges {
+                target: muteText
+                text: "UNMUTE"
+            }
+
+            PropertyChanges {
+                target: muteIcon
+                source: "../../../icons/tablet-unmute-icon.svg"
+            }
+
+            PropertyChanges {
+                target: tablet
+                miclevel: 0
+            }
+        }
+    ]
 }
 
diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml
index a1d17cf423..75f5423f41 100644
--- a/interface/resources/qml/hifi/tablet/TabletButton.qml
+++ b/interface/resources/qml/hifi/tablet/TabletButton.qml
@@ -1,28 +1,93 @@
 import QtQuick 2.0
-import "../../styles-uit/"
+import QtGraphicalEffects 1.0
 
-Rectangle {
+Item {
     id: tabletButton
-    width: 140
-    height: 140
-    color: "#1794c3"
+    property string color: "#1080B8"
+    property string text: "EDIT"
+    property string icon: "icons/edit-icon.svg"
+    width: 132
+    height: 132
+
+    Rectangle {
+        id: buttonBg
+        color: tabletButton.color
+        border.width: 0
+        border.color: "#00000000"
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.top: parent.top
+        anchors.topMargin: 0
+    }
 
     Image {
         id: icon
-        x: 40
-        y: 30
         width: 60
         height: 60
-        source: "../../../icons/edit-icon.svg"
+        anchors.bottom: text.top
+        anchors.bottomMargin: 5
+        anchors.horizontalCenter: parent.horizontalCenter
+        fillMode: Image.Stretch
+        source: "../../../" + tabletButton.icon
     }
 
-    RalewaySemiBold {
+    Text {
         id: text
-        x: 50
-        y: 96
         color: "#ffffff"
-        text: qsTr("EDIT")
-        horizontalAlignment: Text.AlignHCenter
+        text: tabletButton.text
+        font.bold: true
         font.pixelSize: 18
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 20
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
     }
+
+    DropShadow {
+        id: dropshadow
+        anchors.fill: parent
+        horizontalOffset: 0
+        verticalOffset: 3
+        color: "#aa000000"
+        radius: 20
+        z: -1
+        samples: 41
+        source: buttonBg
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: {
+            console.log("Tablet Button Hovered!");
+            tabletButton.state = "hover state";
+        }
+        onExited: {
+            console.log("Tablet Button Unhovered!");
+            tabletButton.state = "base state";
+        }
+    }
+
+    states: [
+        State {
+            name: "hover state"
+
+            PropertyChanges {
+                target: buttonBg
+                border.width: 2
+                border.color: "#ffffff"
+            }
+            PropertyChanges {
+                target: dropshadow
+                verticalOffset: 0
+                color: "#ffffff"
+            }
+        }
+    ]
 }
+
+