diff --git a/client/src/pages/competence/CompetenceAssignmentRow.vue b/client/src/pages/competence/CompetenceAssignmentRow.vue
new file mode 100644
index 00000000..037e1be9
--- /dev/null
+++ b/client/src/pages/competence/CompetenceAssignmentRow.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { CompetenceCertificateAssignment } from "@/types";
+import * as log from "loglevel";
+
+log.debug("CompetenceAssignmentRow setup");
+
+const props = defineProps<{
+  assignment: CompetenceCertificateAssignment;
+}>();
+
+const getIconName = () => {
+  if (props.assignment.assignment_type === "EDONIQ_TEST") {
+    return "it-icon-test-large";
+  }
+  return "it-icon-assignment-large";
+};
+</script>
+
+<template>
+  <div class="flex items-center border-b py-8">
+    <component :is="getIconName()" class="mr-4 h-9 w-9"></component>
+    <div class="flex w-[420px] flex-col">
+      <h3 class="text-bold flex items-center gap-2">{{ assignment.title }}</h3>
+      <p class="text-gray-800">
+        <a :href="assignment.frontend_url" class="link" target="_blank">
+          Im Circle «{{ assignment.learning_content.circle.title }}» anschauen
+        </a>
+      </p>
+    </div>
+    <div class="grow px-8">
+      <div
+        v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
+        class="flex items-center"
+      >
+        <div
+          class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500 bg-green-500"
+        >
+          <it-icon-check class="h-4/5 w-4/5"></it-icon-check>
+        </div>
+        <div class="ml-2">Bewertung freigegeben</div>
+      </div>
+      <div
+        v-else-if="
+          ['EVALUATION_IN_PROGRESS', 'SUBMITTED'].includes(
+            assignment.completion?.completion_status || ''
+          )
+        "
+        class="flex items-center"
+      >
+        <div
+          class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500"
+        >
+          <it-icon-check class="h-6 w-6"></it-icon-check>
+        </div>
+        <div class="ml-2">Ergebnisse abgegeben</div>
+      </div>
+    </div>
+    <div>
+      <div
+        v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
+        class="flex flex-col items-center"
+      >
+        <div class="flex flex-col items-center">
+          <div class="heading-2">
+            {{ assignment.completion?.evaluation_points }}
+          </div>
+          <div>von {{ assignment.max_points }} Punkten</div>
+        </div>
+      </div>
+      <div v-else class="flex flex-col items-center">
+        <div>Höchstpunktzahl</div>
+        <div>{{ assignment.max_points }} Punkte</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/client/src/pages/competence/CompetenceCertificateComponent.vue b/client/src/pages/competence/CompetenceCertificateComponent.vue
new file mode 100644
index 00000000..d0d23624
--- /dev/null
+++ b/client/src/pages/competence/CompetenceCertificateComponent.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import * as log from "loglevel";
+import type { CompetenceCertificate } from "@/types";
+import CompetenceAssignmentRow from "@/pages/competence/CompetenceAssignmentRow.vue";
+import { computed } from "vue";
+import ItProgress, { StatusCount } from "@/components/ui/ItProgress.vue";
+
+log.debug("CompetenceCertificateComponent setup");
+
+const props = defineProps<{
+  competenceCertificate: CompetenceCertificate;
+}>();
+
+const totalPointsEvaluatedAssignments = computed(() => {
+  return props.competenceCertificate.assignments.reduce((acc, assignment) => {
+    if (assignment.completion?.completion_status === "EVALUATION_SUBMITTED") {
+      return acc + assignment.max_points;
+    }
+    return acc;
+  }, 0);
+});
+
+const userPointsEvaluatedAssignments = computed(() => {
+  return props.competenceCertificate.assignments.reduce((acc, assignment) => {
+    if (assignment.completion?.completion_status === "EVALUATION_SUBMITTED") {
+      return acc + assignment.completion.evaluation_points;
+    }
+    return acc;
+  }, 0);
+});
+
+const numAssignmentsEvaluated = computed(() => {
+  return props.competenceCertificate.assignments.filter((a) => {
+    return a.completion?.completion_status === "EVALUATION_SUBMITTED";
+  }).length;
+});
+
+const numAssignmentsTotal = computed(() => {
+  return props.competenceCertificate.assignments.length;
+});
+
+const progressStatusCount = computed(() => {
+  return {
+    SUCCESS: numAssignmentsEvaluated.value,
+    UNKNOWN: numAssignmentsTotal.value - numAssignmentsEvaluated.value,
+    FAIL: 0,
+  } as StatusCount;
+});
+</script>
+
+<template>
+  <div>
+    <div class="mb-4 bg-white p-8">
+      <h2>
+        {{ props.competenceCertificate.title }}
+      </h2>
+
+      <div class="flex items-center">
+        <div class="heading-1 py-4">
+          {{ userPointsEvaluatedAssignments }}
+        </div>
+        <div class="pl-2">von {{ totalPointsEvaluatedAssignments }} Punkten</div>
+      </div>
+      <ItProgress :status-count="progressStatusCount" />
+      <div>
+        {{ numAssignmentsEvaluated }} von {{ numAssignmentsTotal }} Arbeiten
+        abgeschlossen
+      </div>
+    </div>
+
+    <div
+      v-for="assignment in props.competenceCertificate.assignments"
+      class="bg-white px-8"
+    >
+      <CompetenceAssignmentRow :assignment="assignment"></CompetenceAssignmentRow>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/client/src/pages/competence/CompetenceOverviewPage.vue b/client/src/pages/competence/CompetenceOverviewPage.vue
index ee9b1e6e..f40b786b 100644
--- a/client/src/pages/competence/CompetenceOverviewPage.vue
+++ b/client/src/pages/competence/CompetenceOverviewPage.vue
@@ -3,8 +3,9 @@ import log from "loglevel";
 import { COMPETENCE_NAVI_CERTIFICATE_QUERY } from "@/graphql/queries";
 import { useQuery } from "@urql/vue";
 import { computed, onMounted } from "vue";
-import type { CompetenceCertificate, CompetenceCertificateAssignment } from "@/types";
+import type { CompetenceCertificate } from "@/types";
 import { useCurrentCourseSession } from "@/composables";
+import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
 
 const props = defineProps<{
   courseSlug: string;
@@ -32,89 +33,19 @@ const competenceCertificates = computed(() => {
 onMounted(async () => {
   // log.debug("AssignmentView mounted", props.assignmentId, props.userId);
 });
-
-const getIconName = (assignment: CompetenceCertificateAssignment) => {
-  if (assignment.assignment_type === "EDONIQ_TEST") {
-    return "it-icon-test-large";
-  }
-  return "it-icon-assignment-large";
-};
 </script>
 
 <template>
   <div class="container-large lg:mt-4">
     <h1>{{ $t("competences.title") }}</h1>
-    <!--    <pre>-->
-    <!--      {{ competenceCertificates }}-->
-    <!--    </pre>-->
 
     <div
       v-for="competenceCertificate in competenceCertificates"
       :key="competenceCertificate.id"
     >
-      {{ competenceCertificate.title }}
-
-      <div
-        v-for="assignment in competenceCertificate.assignments"
-        class="bg-white px-8"
-      >
-        <div class="flex items-center border-b py-8">
-          <component :is="getIconName(assignment)" class="mr-4 h-9 w-9"></component>
-          <div class="flex w-[420px] flex-col">
-            <h3 class="text-bold flex items-center gap-2">{{ assignment.title }}</h3>
-            <p class="text-gray-800">
-              <a :href="assignment.frontend_url" class="link" target="_blank">
-                Im Circle «{{ assignment.learning_content.circle.title }}» anschauen
-              </a>
-            </p>
-          </div>
-          <div class="grow px-8">
-            <div
-              v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
-              class="flex items-center"
-            >
-              <div
-                class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500 bg-green-500"
-              >
-                <it-icon-check class="h-4/5 w-4/5"></it-icon-check>
-              </div>
-              <div class="ml-2">Bewertung freigegeben</div>
-            </div>
-            <div
-              v-else-if="
-                ['EVALUATION_IN_PROGRESS', 'SUBMITTED'].includes(
-                  assignment.completion?.completion_status || ''
-                )
-              "
-              class="flex items-center"
-            >
-              <div
-                class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500"
-              >
-                <it-icon-check class="h-6 w-6"></it-icon-check>
-              </div>
-              <div class="ml-2">Ergebnisse abgegeben</div>
-            </div>
-          </div>
-          <div>
-            <div
-              v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
-              class="flex flex-col items-center"
-            >
-              <div class="flex flex-col items-center">
-                <div class="heading-2">
-                  {{ assignment.completion?.evaluation_points }}
-                </div>
-                <div>von {{ assignment.max_points }} Punkten</div>
-              </div>
-            </div>
-            <div v-else class="flex flex-col items-center">
-              <div>Höchstpunktzahl</div>
-              <div>{{ assignment.max_points }} Punkte</div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <CompetenceCertificateComponent
+        :competence-certificate="competenceCertificate"
+      ></CompetenceCertificateComponent>
     </div>
   </div>
 </template>