diff --git a/ui/app/AppLayouts/UIComponents/UIComponents.qml b/ui/app/AppLayouts/UIComponents/UIComponents.qml
index 21e10ec067..ad8826d93a 100644
--- a/ui/app/AppLayouts/UIComponents/UIComponents.qml
+++ b/ui/app/AppLayouts/UIComponents/UIComponents.qml
@@ -39,7 +39,6 @@ Item {
 
             StatusButton {
                 text: "Secondary Small Button"
-                type: "secondary"
                 size: "small"
             }
 
@@ -50,12 +49,18 @@ Item {
             }
 
             StatusRoundButton {
-                type: "secondary"
                 size: "medium"
                 icon.name: "arrow-right"
                 icon.height: 15
                 icon.width: 20
             }
+
+            StatusRoundButton {
+                size: "small"
+                icon.name: "arrow-right"
+                icon.height: 12
+                icon.width: 18
+            }
         }
 
         RowLayout {
@@ -91,13 +96,20 @@ Item {
             }
 
             StatusRoundButton {
-                type: "secondary"
                 size: "medium"
                 icon.name: "arrow-right"
                 icon.height: 15
                 icon.width: 20
                 enabled: false
             }
+
+            StatusRoundButton {
+                size: "small"
+                icon.name: "arrow-right"
+                icon.height: 12
+                icon.width: 18
+                enabled: false
+            }
         }
 
         RowLayout {
@@ -130,10 +142,14 @@ Item {
             }
 
             StatusRoundButton {
-                type: "secondary"
                 size: "medium"
                 state: "pending"
             }
+
+            StatusRoundButton {
+                size: "small"
+                state: "pending"
+            }
         }
 
         RowLayout {
diff --git a/ui/shared/status/StatusRoundButton.qml b/ui/shared/status/StatusRoundButton.qml
index c539df0a8c..54cd12c76d 100644
--- a/ui/shared/status/StatusRoundButton.qml
+++ b/ui/shared/status/StatusRoundButton.qml
@@ -6,24 +6,54 @@ import "../../imports"
 import "../../shared"
 
 RoundButton {
-    property string type: "primary"
     property string state: "default"
     property string size: "large"
-
     id: control
 
     font.pixelSize: 15
     font.weight: Font.Medium
 
-    implicitWidth: size === "medium" ? 40 : 44
-    implicitHeight: size === "medium" ? 40 : 44
+    implicitWidth: {
+        switch(size) {
+            case "large":
+                return 44
+            case "medium":
+                return 40
+            case "small":
+                return 32
+            default:
+                return 44
+        }
+    }
+    implicitHeight: implicitWidth
 
     enabled: state === "default"
 
-    icon.source: "../../app/img/" + icon.name + ".svg"
-    icon.height: size === "medium" ? 14 : 20
-    icon.width: size === "medium" ? 14 : 20
-    icon.color: type === "secondary" ? 
+    icon.height: {
+        switch(size) {
+            case "large":
+                return 20
+            case "medium":
+                return 14
+            case "small":
+                return 12
+            default:
+                return 20
+        }
+    }
+    icon.width: {
+        switch(size) {
+            case "large":
+                return 20
+            case "medium":
+                return 14
+            case "small":
+                return 12
+            default:
+                return 20
+        }
+    }
+    icon.color: size === "medium" || size === "small" ? 
         !enabled ? 
           Style.current.roundedButtonSecondaryDisabledForegroundColor :
           Style.current.roundedButtonSecondaryForegroundColor
@@ -32,10 +62,14 @@ RoundButton {
           Style.current.roundedButtonDisabledForegroundColor : 
           Style.current.roundedButtonForegroundColor
 
+    onIconChanged: {
+      icon.source = icon.name ? "../../app/img/" + icon.name + ".svg" : ""
+    }
+
     background: Rectangle {
         anchors.fill: parent
         color: {
-            if (type === "secondary") {
+            if (size === "medium" || size == "small") {
                 return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor :
                   hovered ? Style.current.roundedButtonSecondaryHoveredBackgroundColor : 
                   Style.current.roundedButtonSecondaryBackgroundColor
@@ -64,7 +98,7 @@ RoundButton {
         LoadingImage {
             id: loadingIndicator
             visible: false
-            height: 18
+            height: size === "small" ? 14 : 18
             width: loadingIndicator.height
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
@@ -74,7 +108,7 @@ RoundButton {
             anchors.fill: iconImg
             visible: control.state === "default"
             source: iconImg
-            color: control.type === "secondary" ?
+            color: control.size === "medium" || control.size === "small" ?
               Style.current.roundedButtonSecondaryDisabledForegroundColor :
               Style.current.roundedButtonDisabledForegroundColor
             antialiasing: true
@@ -85,7 +119,7 @@ RoundButton {
             visible: control.state === "pending"
             anchors.fill: loadingIndicator
             source: loadingIndicator
-            color: control.type === "secondary" ?
+            color: control.size === "medium" || control.size === "small" ?
               Style.current.roundedButtonSecondaryDisabledForegroundColor :
               Style.current.roundedButtonDisabledForegroundColor
             antialiasing: true