diff --git a/assets/css/universal-dapp.css b/assets/css/universal-dapp.css
index 4460039734..b0b4b93f46 100644
--- a/assets/css/universal-dapp.css
+++ b/assets/css/universal-dapp.css
@@ -223,8 +223,8 @@
 }
 
 .udapp .contractProperty .call {
-	background-color: #FF8B8B;
-	border-color: #FF8B8B;
+	background-color: #FFB9B9;
+	border-color: #FFB9B9;
 }
 
 .udapp .contractProperty .debug {
@@ -238,6 +238,12 @@
 	width: 25%;
 }
 
+.udapp .contractProperty.payable .call {
+	background-color: #FF8B8B;
+	border-color: #FF8B8B;
+	width: 25%;
+}
+
 .udapp .contractProperty input {
 	display: none;
 }
@@ -307,13 +313,17 @@
 }
 
 .udapp .legend .attach:before {
-	background-color: #62B762;
+	background-color: #B1EAC5;
 }
 
 .udapp .legend .transact:before {
-	background-color: #D42828;
+	background-color: #FFB9B9;
+}
+
+.udapp .legend .payable:before {
+	background-color: #FF8B8B;
 }
 
 .udapp .legend .call:before {
-	background-color: #556DF3;
+	background-color: #9DC1F5;
 }
diff --git a/src/universal-dapp.js b/src/universal-dapp.js
index 85b79d1dc1..2347752e99 100644
--- a/src/universal-dapp.js
+++ b/src/universal-dapp.js
@@ -152,6 +152,7 @@ UniversalDApp.prototype.render = function () {
   var $legend = $('<div class="legend" />')
     .append($('<div class="attach"/>').text('Attach'))
     .append($('<div class="transact"/>').text('Transact'))
+    .append($('<div class="payable"/>').text('Transact (Payable)'))
     .append($('<div class="call"/>').text('Call'))
 
   self.$el.append($legend)
@@ -654,6 +655,10 @@ UniversalDApp.prototype.getCallButton = function (args) {
     $contractProperty.addClass('hasArgs')
   }
 
+  if (args.abi.payable === true) {
+    $contractProperty.addClass('payable')
+  }
+
   return $contractProperty.append(outputSpan)
 }