diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index 474981327774b78f05499dad9f48e6943a1bdcd0..9f77cca54a435e1a0b0d75f35c980afeeed99d3b 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -40,7 +40,7 @@ main {
 }
 
 .budgetmaster-green {
-    background-color: #5cb85c;
+    background-color: #5cb85c !important;
 }
 
 .budgetmaster-green-text {
@@ -56,7 +56,7 @@ main {
 }
 
 .budgetmaster-red {
-    background-color: #D82C29;
+    background-color: #D82C29 !important;
 }
 
 .budgetmaster-red-text {
@@ -72,7 +72,7 @@ main {
 }
 
 .budgetmaster-grey {
-    background-color: #CCCCCC;
+    background-color: #CCCCCC !important;
 }
 
 .budgetmaster-grey-text {
@@ -99,6 +99,10 @@ main {
     color: rgba(0, 0, 0, 0.87);
 }
 
+.budgetmaster-text-isPayment {
+    color: rgba(0, 0, 0, 0.87);
+}
+
 .budgetmaster-update {
     background-color: #e9c46a;
 }
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index ae72de47d8a063cb38bd448efce0e2757098fd72..316c012329566d27b495a024859a34cda71c4fa0 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -39,7 +39,7 @@ main {
 }
 
 .budgetmaster-green {
-    background-color: #5cb85c;
+    background-color: #5cb85c !important;
 }
 
 .budgetmaster-green-text {
@@ -55,7 +55,7 @@ main {
 }
 
 .budgetmaster-red {
-    background-color: #D82C29;
+    background-color: #D82C29 !important;
 }
 
 .budgetmaster-red-text {
@@ -71,7 +71,7 @@ main {
 }
 
 .budgetmaster-grey {
-    background-color: #696969;
+    background-color: #696969 !important;
 }
 
 .budgetmaster-grey-text {
@@ -98,6 +98,10 @@ main {
     color: rgba(0,0,0,0.87);
 }
 
+.budgetmaster-text-isPayment {
+    color: #FFFFFF;
+}
+
 .budgetmaster-update {
     background-color: #F7EB84;
 }
diff --git a/src/main/resources/static/js/transactions.js b/src/main/resources/static/js/transactions.js
index 5d1470ff0bf1cc0831adb074673afc9a662cd738..75994b4433542828a6807a8ade3aa7dfd6097a87 100644
--- a/src/main/resources/static/js/transactions.js
+++ b/src/main/resources/static/js/transactions.js
@@ -155,6 +155,34 @@ $( document ).ready(function() {
         }
     });
 
+    $('#buttonIncome').click(function()
+    {
+        $(this).removeClass("budgetmaster-grey");
+        $(this).removeClass("budgetmaster-text-isPayment");
+        $(this).addClass("budgetmaster-green");
+
+        var buttonExpenditure = $('#buttonExpenditure');
+        buttonExpenditure.removeClass("budgetmaster-red");
+        buttonExpenditure.addClass("budgetmaster-grey");
+        buttonExpenditure.addClass("budgetmaster-text-isPayment");
+
+        document.getElementById("input-isPayment").value = 0;
+    });
+
+    $('#buttonExpenditure').click(function()
+    {
+        $(this).removeClass("budgetmaster-grey");
+        $(this).removeClass("budgetmaster-text-isPayment");
+        $(this).addClass("budgetmaster-red");
+
+        var buttonIncome = $('#buttonIncome');
+        buttonIncome.removeClass("budgetmaster-green");
+        buttonIncome.addClass("budgetmaster-grey");
+        buttonIncome.addClass("budgetmaster-text-isPayment");
+
+        document.getElementById("input-isPayment").value = 1;
+    });
+
     beautifyCategorySelect();
 });
 
diff --git a/src/main/resources/templates/transactions/newTransaction.ftl b/src/main/resources/templates/transactions/newTransaction.ftl
index 547181d0d8f42e58332b8c6ae30efd9a3a19b91c..6068c77b7431058182d57cc207c3c2cae27fe563 100644
--- a/src/main/resources/templates/transactions/newTransaction.ftl
+++ b/src/main/resources/templates/transactions/newTransaction.ftl
@@ -29,17 +29,27 @@
                         <#-- isPayment switch -->
                         <div class="row">
                             <div class="col s12 m12 l8 offset-l2 center-align">
-                                <div class="switch">
-                                    <label>
-                                        ${locale.getString("title.income")}
-                                        <#if transaction.getAmount()??>
-                                            <input type="checkbox" name="isPayment" <#if transaction.getAmount() < 0>checked</#if>>
+                                <div class="row hide-on-small-only">
+                                    <div class="col m6 l4 offset-l2 right-align">
+                                        <#assign isPayment = 1>
+
+                                        <#if transaction.getAmount()?? && (transaction.getAmount() > 0)>
+                                            <#assign colorButtonIncome = "budgetmaster-green">
+                                            <#assign isPayment = 0>
                                         <#else>
-                                            <input type="checkbox" name="isPayment" checked>
+                                            <#assign colorButtonIncome = "budgetmaster-grey budgetmaster-text-isPayment">
                                         </#if>
-                                        <span class="lever"></span>
-                                        ${locale.getString("title.expenditure")}
-                                    </label>
+                                        <a class="waves-effect waves-light btn ${colorButtonIncome}" id="buttonIncome"><i class="material-icons left">file_download</i>${locale.getString("title.income")}</a>
+                                    </div>
+                                    <div class="col m6 l4 left-align">
+                                        <#if transaction.getAmount()?? && (transaction.getAmount() > 0)>
+                                            <#assign colorButtonExpenditure = "budgetmaster-grey budgetmaster-text-isPayment">
+                                        <#else>
+                                            <#assign colorButtonExpenditure = "budgetmaster-red">
+                                        </#if>
+                                        <a class="waves-effect waves-light btn ${colorButtonExpenditure}" id="buttonExpenditure"><i class="material-icons left">file_upload</i>${locale.getString("title.expenditure")}</a>
+                                    </div>
+                                    <input type="hidden" name="isPayment" id="input-isPayment" value="${isPayment}">
                                 </div>
                             </div>
                         </div>