diff --git a/css/main.css b/css/main.css
index bbe7754eb33e715f17656ecafc62d28afd09091d..c15868d4b90bb45e5d2495d1222607b42e4777b5 100644
--- a/css/main.css
+++ b/css/main.css
@@ -304,21 +304,21 @@ solid-invoicing .submit input {
   align-items: center;
   justify-content: flex-end;
 }
-
 .invoices-list [name="invoice-aside"] [name="state"] {
   width: 100px;
 }
-.invoices-list [name="invoice-aside"] [name="state"] .button {
-  padding: 6px 20px;
-  height: 27px;
+.invoices-list .state {
+  padding: 8px 20px;
+  border-radius: 3px;
 }
 .invoices-list [name="state"] .pending {
-  color: var(--color-secondary);
+  color: var(--color-heading);
   border: solid 1px var(--color-secondary);
 }
 .invoices-list [name="state"] .edited {
-  background-color: var(--color-secondary);
-  color: white;
+  background-color: white;
+  color: var(--color-heading);
+  border: 1px solid var(--color-primary);
 }
 .invoices-list [name="state"] .paid {
   background-color: #94d176;
@@ -330,7 +330,7 @@ solid-invoicing .submit input {
 }
 .invoices-list [name="state"] .sent {
   border: solid 1px var(--color-third);
-  color:  var(--color-heading);;
+  color:  var(--color-heading);
 }
 .invoices-list solid-display-value[name="state"] {
   display: inline-block;
diff --git a/solid-invoicing.js b/solid-invoicing.js
index 07f145cf53c7402f15dcab257a7815e0c20285d7..957ae08aea032cdc18d38add6fe26d77028e74dd 100644
--- a/solid-invoicing.js
+++ b/solid-invoicing.js
@@ -479,11 +479,11 @@ export class SolidInvoicing extends SolidTemplateElement {
 
     <solid-widget name="widget-state">
       <template>
-        \${value == 'edited' ? '<div class="segment full button text-xsmall text-bold text-center edited ">${this.localize('option.edited')}</div>' : '' }
-        \${value == 'pending' ? '<div class="segment full button text-xsmall text-bold text-center pending">${this.localize('option.pending')}</div>' : '' }
-        \${value == 'sent' ? '<div class="segment full button text-xsmall text-bold text-center sent">${this.localize('option.sent')}</div>' : '' }
-        \${value == 'paid' ? '<div class="segment full button text-xsmall text-bold text-center reversed paid bordered">${this.localize('option.paid')}</div>' : '' }
-        \${value == 'late' ? '<div class="segment full button text-xsmall text-bold text-center reversed bordered late">${this.localize('option.late')}</div>' : '' }
+        \${value == 'edited' ? '<div class="segment full state text-xsmall text-bold text-center edited ">${this.localize('option.edited')}</div>' : '' }
+        \${value == 'pending' ? '<div class="segment full state text-xsmall text-bold text-center pending">${this.localize('option.pending')}</div>' : '' }
+        \${value == 'sent' ? '<div class="segment full state text-xsmall text-bold text-center sent">${this.localize('option.sent')}</div>' : '' }
+        \${value == 'paid' ? '<div class="segment full state text-xsmall text-bold text-center reversed paid bordered">${this.localize('option.paid')}</div>' : '' }
+        \${value == 'late' ? '<div class="segment full state text-xsmall text-bold text-center reversed bordered late">${this.localize('option.late')}</div>' : '' }
       </template>
     </solid-widget>