diff --git a/frontend/src/assets/scss/custom/gradido-custom/_color.scss b/frontend/src/assets/scss/custom/gradido-custom/_color.scss
index 87cc0f45a..733bcb4a0 100644
--- a/frontend/src/assets/scss/custom/gradido-custom/_color.scss
+++ b/frontend/src/assets/scss/custom/gradido-custom/_color.scss
@@ -16,6 +16,8 @@ $gradido-f5: #f5f5f5 !default;
 $gradido-248: rgb(248 248 248) !default;
 $gradido-140: rgb(140 66 5) !default;
 $gradido-205: rgb(205 86 86) !default;
+$gradido-197: rgb(197 141 56) !default;
+$gradido-4: rgb(4 112 6) !default;
 $black: #000 !default;
 $grays: () !default;
 $grays: map.merge(
@@ -32,7 +34,9 @@ $grays: map.merge(
     "f5": $gradido-f5,
     "248": $gradido-248,
     "140": $gradido-140,
-    "205": $gradido-205
+    "205": $gradido-205,
+    "197": $gradido-197,
+    "4": $gradido-4
   ),
   $grays
 );
@@ -69,7 +73,9 @@ $colors: map.merge(
     "f5": $gradido-f5,
     "248": $gradido-248,
     "140": $gradido-140,
-    "205": $gradido-205
+    "205": $gradido-205,
+    "197": $gradido-197,
+    "4": $gradido-4
   ),
   $colors
 );
@@ -110,7 +116,9 @@ $theme-colors: map.merge(
     "f5":           $gradido-f5,
     "248":           $gradido-248,
     "140":           $gradido-140,
-    "205":           $gradido-205
+    "205":           $gradido-205,
+    "197":           $gradido-197,
+    "4":           $gradido-4
   ),
   $theme-colors
 );
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index dfff60840..a3116d7c4 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -31,7 +31,7 @@
           <div class="small">createdAt {{ createdAt }}</div> -->
         </b-col>
         <b-col cols="12" lg="3" offset="3" offset-md="0" offset-lg="0">
-          <div class="small">{{ $t('creation') }}</div>
+          <div class="small">{{ $t('creation') }} ({{ amount / 20 }} h)</div>
           <div class="font-weight-bold">{{ amount | GDD }}</div>
         </b-col>
         <b-col cols="12" md="1" lg="1" class="text-right align-items-center">
@@ -69,7 +69,7 @@
             "
           >
             <b-icon icon="pencil"></b-icon>
-            {{ $t('edit') }}
+            <div>{{ $t('edit') }}</div>
           </div>
         </b-col>
 
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
index 1b0ad6462..7224b0131 100644
--- a/frontend/src/components/Contributions/OpenCreationsAmount.vue
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -1,29 +1,33 @@
 <template>
-  <div class="px-2">
-    <div>
+  <div class="bg-white appBoxShadow gradido-border-radius p-3">
+    <div class="pl-3">
       <b-row class="small">
         <b-col>Monatsbeiträge</b-col>
         <b-col class="d-none d-md-inline">Status</b-col>
-        <b-col class="d-none d-md-inline">Eingereicht</b-col>
-        <b-col>offene Stunden</b-col>
+        <b-col class="d-none d-md-inline text-center">Eingereicht</b-col>
+        <b-col class="text-center">offene Stunden</b-col>
       </b-row>
 
-      <b-row>
+      <b-row class="font-weight-bold pt-3">
         <b-col>{{ $d(new Date(minimalDate), 'monthAndYear') }}</b-col>
         <b-col class="d-none d-md-inline">
           {{ maxGddLastMonth > 0 ? 'Einreichen' : 'Max. erreicht' }}
         </b-col>
-        <b-col class="d-none d-md-inline">{{ (1000 - maxGddLastMonth) / 20 }} h</b-col>
-        <b-col>{{ maxGddLastMonth / 20 }} h</b-col>
+        <b-col class="d-none d-md-inline text-197 text-center">
+          {{ (1000 - maxGddLastMonth) / 20 }} h
+        </b-col>
+        <b-col class="text-4 text-center">{{ maxGddLastMonth / 20 }} h</b-col>
       </b-row>
 
-      <b-row>
+      <b-row class="font-weight-bold">
         <b-col>{{ $d(new Date(), 'monthAndYear') }}</b-col>
         <b-col class="d-none d-md-inline">
           {{ maxGddThisMonth > 0 ? 'Einreichen' : 'Max. erreicht' }}
         </b-col>
-        <b-col class="d-none d-md-inline">{{ (1000 - maxGddThisMonth) / 20 }} h</b-col>
-        <b-col>{{ maxGddThisMonth / 20 }} h</b-col>
+        <b-col class="d-none d-md-inline text-197 text-center">
+          {{ (1000 - maxGddThisMonth) / 20 }} h
+        </b-col>
+        <b-col class="text-4 text-center">{{ maxGddThisMonth / 20 }} h</b-col>
       </b-row>
     </div>
   </div>