diff --git a/client/src/components/competences/LeistungskriteriumRow.vue b/client/src/components/competences/LeistungskriteriumRow.vue
new file mode 100644
index 00000000..811cdf67
--- /dev/null
+++ b/client/src/components/competences/LeistungskriteriumRow.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+
+
+
+interface Props {
+  description: string
+  unit: string
+  unitUrl: string
+  unitId: number
+  state: string  // maybe enum
+  showState: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  description: '',
+  unit: '',
+  unitUrl: '',
+  unitId: -1,
+  state: 'open',
+  showState: false
+})
+
+</script>
+
+<template>
+  <div class="flex flex-row items-center justify-between">
+    <div v-if="showState">
+      <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
+      <it-icon-smiley-thinking v-if="state === 'notDone'"></it-icon-smiley-thinking>
+      <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
+    </div>
+    <div class="pr-5 mr-10">
+      <h4 class="text-bold mb-2">{{description}}</h4>
+      <p>Lerneinheit: <a :href="unitUrl">{{unit}}</a></p>
+    </div>
+    <span class="whitespace-nowrap">Sich nochmals einschätzen</span>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index 0e242b06..ca97e9eb 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -2,6 +2,7 @@
 import * as log from 'loglevel'
 import { ref, watch } from 'vue'
 import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
+import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
 
 log.debug('CompetencesMainView created')
 
@@ -119,6 +120,27 @@ const summary = {
   open: 28
 };
 
+const nokCriteria = [
+  {
+    unitId: 1,
+    unit: 'Fahrzeuge',
+    unitUrl: 'https://www.iterativ.ch',
+    description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die Ziele und Pläne des Kunden zu ergründen (SOLL).'
+  },
+  {
+    unitId: 2,
+    unit: 'Reisen',
+    unitUrl: 'https://www.iterativ.ch',
+    description: 'Innerhalb des Handlungsfelds «Fahrzeug» bin ich fähig, die IST-Situation des Kunden mit der geeigneten Gesprächs-/Fragetechnik zu erfassen.'
+  },
+  {
+    unitId: 3,
+    unit: 'Einkommenssicherung',
+    unitUrl: 'https://www.iterativ.ch',
+    description: 'Innerhalb des Handlungsfelds «Einkommenssicherung» bin ich fähig, mir intern und extern die nötigen Informationen über den (Neu-) Kunden zu beschaffen.'
+  },
+]
+
 </script>
 
 <template>
@@ -131,12 +153,16 @@ const summary = {
     </div>
     <div class="bg-white p-8 mb-8">
       <div>
-        <h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
-        <ul class="divide-y">
+        <h3 class="pb-4 border-b border-gray-500">Letzte verbesserte Kompetenzen</h3>
+        <ul>
           <li v-for="competence in lastCompetences" :key="competence.description"
-              class="py-4 flex flex-col lg:flex-row items-center">
+              class="py-4 flex flex-col lg:flex-row items-center border-b border-gray-500 last:mb-8">
             <p class="w-1/4 inline-block mr-5">{{competence.description}}</p>
-            <ComptenceProgress :total="7" :done="3" :open="2"></ComptenceProgress>
+            <ComptenceProgress
+              :total="7"
+              :done="3"
+              :open="2"
+            ></ComptenceProgress>
           </li>
         </ul>
          <router-link
@@ -148,40 +174,61 @@ const summary = {
           </router-link>
       </div>
     </div>
+    <div class="bg-white p-8 mb-8">
+      <h3 class="mb-4">Einschätzungen</h3>
+       <ul class="flex flex-col lg:flex-row items-center mb-6">
+         <li class="inline-block pr-12 mr-12 border-r border-gray-500">
+           <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
+           <div class="flex flex-row items-center">
+             <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
+             <p class="text-7xl font-bold inline-block ml-4">{{summary.nok}}</p>
+           </div>
+         </li>
+         <li class="inline-block pr-12 mr-12 border-r border-gray-500">
+           <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
+           <div class="flex flex-row items-center">
+             <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
+             <p class="text-7xl font-bold inline-block ml-4">{{summary.ok}}</p>
+           </div>
+         </li>
+           <li>
+           <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
+           <div class="flex flex-row items-center border-r">
+             <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
+             <p class="text-7xl font-bold inline-block ml-4">{{summary.open}}</p>
+           </div>
+         </li>
+       </ul>
+       <router-link
+          to="/mediacenter/handlungsfeldlist"
+          class="flex items-center"
+        >
+          <span>Alle anschauen</span>
+          <it-icon-arrow-right></it-icon-arrow-right>
+        </router-link>
+    </div>
     <div class="bg-white p-8">
-      <div>
-        <h3 class="pb-4">Einschätzungen</h3>
-         <ul class="flex flex-col lg:flex-row items-center mb-6">
-           <li class="inline-block pr-12 mr-12 border-r">
-             <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
-             <div class="flex flex-row items-center">
-               <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
-               <p class="text-7xl font-bold inline-block ml-4">{{summary.nok}}</p>
-             </div>
-           </li>
-           <li class="inline-block pr-12 mr-12 border-r">
-             <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
-             <div class="flex flex-row items-center">
-               <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
-               <p class="text-7xl font-bold inline-block ml-4">{{summary.ok}}</p>
-             </div>
-           </li>
-             <li>
-             <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
-             <div class="flex flex-row items-center border-r">
-               <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
-               <p class="text-7xl font-bold inline-block ml-4">{{summary.open}}</p>
-             </div>
-           </li>
-         </ul>
-         <router-link
-            to="/mediacenter/handlungsfeldlist"
-            class="flex items-center"
-          >
-            <span>Alle anschauen</span>
-            <it-icon-arrow-right></it-icon-arrow-right>
-          </router-link>
+      <div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
+        <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
+        <h3 class="pb-4">«Das muss ich nochmals anschauen»</h3>
       </div>
+       <ul class="mb-6">
+          <li v-for="criteria in nokCriteria" :key="criteria.description"
+              class="mb-4 pb-4 border-b border-gray-500">
+            <LeistungskriteriumRow
+              :unit-url="criteria.unitUrl"
+              :unit="criteria.unit"
+              :description="criteria.description"
+              :unit-id="criteria.unitId"></LeistungskriteriumRow>
+         </li>
+       </ul>
+       <router-link
+          to="/mediacenter/handlungsfeldlist"
+          class="flex items-center"
+        >
+          <span>Alle anschauen</span>
+          <it-icon-arrow-right></it-icon-arrow-right>
+        </router-link>
     </div>
   </div>
 </template>