diff --git a/retroshare-qml-app/src/components/Btn.qml b/retroshare-qml-app/src/components/Btn.qml
new file mode 100644
index 000000000..ae0f094a9
--- /dev/null
+++ b/retroshare-qml-app/src/components/Btn.qml
@@ -0,0 +1,123 @@
+import QtQuick 2.0
+import QtQuick.Controls 1.4
+
+Item
+{
+
+ id: button
+ property alias buttonText: innerText.text;
+ property alias innerAnchors: innerElements.anchors;
+ property alias rectangleButton: rectangleButton;
+
+ property var iconUrl
+ property int iconHeight: 20
+
+ property color color
+ property color hoverColor
+ property color pressColor
+ property int fontSize
+ property int borderWidth
+ property int borderRadius
+
+ scale: state === "Pressed" ? 0.96 : 1.0
+ onEnabledChanged: state = ""
+ signal clicked
+
+ Rectangle
+ {
+ id: rectangleButton
+ anchors.fill: parent
+ radius: borderRadius
+ color: button.enabled ? button.color : "grey"
+ border.width: borderWidth
+ border.color: "black"
+
+ ToolButton {
+ id: innerElements
+
+ Image
+ {
+ id: icon
+ source: (iconUrl)? iconUrl: ""
+ height: (iconUrl)? iconHeight: 0
+ width: (iconUrl)? iconHeight: 0
+
+ visible: (iconUrl)? true: false
+ anchors.left: innerElements.left
+
+ anchors.margins:(iconUrl)? 10 : 0
+ anchors.verticalCenter: parent.verticalCenter
+ }
+
+ Text
+ {
+ anchors.margins: 10
+ id: innerText
+ font.pointSize: fontSize
+ anchors.left: icon.right
+ anchors.verticalCenter: parent.verticalCenter
+ }
+ }
+ }
+
+ states: [
+ State
+ {
+ name: "Hovering"
+ PropertyChanges
+ {
+ target: rectangleButton
+ color: hoverColor
+ }
+ },
+ State
+ {
+ name: "Pressed"
+ PropertyChanges
+ {
+ target: rectangleButton
+ color: pressColor
+ }
+ }
+ ]
+
+ transitions: [
+ Transition
+ {
+ from: ""; to: "Hovering"
+ ColorAnimation { duration: 200 }
+ },
+ Transition
+ {
+ from: "*"; to: "Pressed"
+ ColorAnimation { duration: 10 }
+ }
+ ]
+
+ MouseArea
+ {
+ hoverEnabled: true
+ anchors.fill: button
+ onEntered: { button.state='Hovering'}
+ onExited: { button.state=''}
+ onClicked: { button.clicked();}
+ onPressed: { button.state="Pressed" }
+ onReleased:
+ {
+ if (containsMouse)
+ button.state="Hovering";
+ else
+ button.state="";
+ }
+ }
+
+ Behavior on scale
+ {
+ NumberAnimation
+ {
+ duration: 100
+ easing.type: Easing.InOutQuad
+ }
+ }
+
+}
diff --git a/retroshare-qml-app/src/qml.qrc b/retroshare-qml-app/src/qml.qrc
index 398056100..5c597c0c0 100644
--- a/retroshare-qml-app/src/qml.qrc
+++ b/retroshare-qml-app/src/qml.qrc
@@ -40,5 +40,7 @@
styles/ChatStyle.qml
components/AvatarOrColorHash.qml
components/SideBar.qml
+ styles/SideBarStyle.qml
+ components/Btn.qml
diff --git a/retroshare-qml-app/src/styles/SideBarStyle.qml b/retroshare-qml-app/src/styles/SideBarStyle.qml
new file mode 100644
index 000000000..9c36e13c5
--- /dev/null
+++ b/retroshare-qml-app/src/styles/SideBarStyle.qml
@@ -0,0 +1,5 @@
+import QtQuick 2.0
+
+Item {
+
+}