diff --git a/vue-project/src/components/ListItem.vue b/vue-project/src/components/ListItem.vue
index 5f2050f..279fcad 100644
--- a/vue-project/src/components/ListItem.vue
+++ b/vue-project/src/components/ListItem.vue
@@ -12,6 +12,7 @@
 </template>
 
 <script setup>
+import {computed} from 'vue';
 
 const props = defineProps({
   kuerzel: null,
@@ -26,6 +27,26 @@ function emitData() {
   emit("deleteEntry", props.id)
 }
 
+const Colors = {
+  EXCELLENT: '#247d37',
+  GOOD: '#7ba656',
+  AVERAGE: '#ded147',
+  POOR: '#dea947',
+  FAIL: '#de6847',
+};
+
+const backgroundColor = computed(() => {
+  if (props.note <= 1.3)
+    return Colors.EXCELLENT;
+  if (props.note <= 2.3)
+    return Colors.GOOD;
+  if (props.note <= 3.3)
+    return Colors.AVERAGE;
+  if (props.note <= 4.3)
+    return Colors.POOR;
+  return Colors.FAIL;
+});
+
 </script>
 
 <style></style>
\ No newline at end of file