diff --git a/Epsilon.Abstractions/Epsilon.Abstractions.csproj b/Epsilon.Abstractions/Epsilon.Abstractions.csproj
index d46fbc80..d034d6a3 100644
--- a/Epsilon.Abstractions/Epsilon.Abstractions.csproj
+++ b/Epsilon.Abstractions/Epsilon.Abstractions.csproj
@@ -23,5 +23,4 @@
     <ItemGroup>
       <PackageReference Include="DocumentFormat.OpenXml" Version="2.18.0" />
     </ItemGroup>
-
 </Project>
diff --git a/Epsilon.Abstractions/Model/CompetenceOutcomeResult.cs b/Epsilon.Abstractions/Model/CompetenceOutcomeResult.cs
new file mode 100644
index 00000000..7d6e8cc5
--- /dev/null
+++ b/Epsilon.Abstractions/Model/CompetenceOutcomeResult.cs
@@ -0,0 +1,7 @@
+namespace Epsilon.Abstractions.Model;
+
+public record CompetenceOutcomeResult(
+    int OutcomeId,
+    double Grade,
+    DateTime SubmittedAt
+);
\ No newline at end of file
diff --git a/Epsilon.Abstractions/Model/DecayingAverage.cs b/Epsilon.Abstractions/Model/DecayingAverage.cs
new file mode 100644
index 00000000..0de50cae
--- /dev/null
+++ b/Epsilon.Abstractions/Model/DecayingAverage.cs
@@ -0,0 +1,7 @@
+namespace Epsilon.Abstractions.Model;
+
+public record DecayingAverage(
+    double Score,
+    int ArchitectureLayer,
+    int Activity
+);
\ No newline at end of file
diff --git a/Epsilon.Abstractions/Model/DecayingAveragePerActivity.cs b/Epsilon.Abstractions/Model/DecayingAveragePerActivity.cs
deleted file mode 100644
index 0c7c7645..00000000
--- a/Epsilon.Abstractions/Model/DecayingAveragePerActivity.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-namespace Epsilon.Abstractions.Model;
-
-public record DecayingAveragePerActivity(
-    int Activity,
-    double DecayingAverage
-);
\ No newline at end of file
diff --git a/Epsilon.Abstractions/Model/DecayingAveragePerLayer.cs b/Epsilon.Abstractions/Model/DecayingAveragePerLayer.cs
deleted file mode 100644
index 7c3d648e..00000000
--- a/Epsilon.Abstractions/Model/DecayingAveragePerLayer.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-namespace Epsilon.Abstractions.Model;
-
-public record DecayingAveragePerLayer(
-    int ArchitectureLayer,
-    IEnumerable<DecayingAveragePerActivity> LayerActivities
-);
\ No newline at end of file
diff --git a/Epsilon.Abstractions/Model/DecayingAveragePerSkill.cs b/Epsilon.Abstractions/Model/DecayingAveragePerSkill.cs
deleted file mode 100644
index 90eef853..00000000
--- a/Epsilon.Abstractions/Model/DecayingAveragePerSkill.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-namespace Epsilon.Abstractions.Model;
-
-public record DecayingAveragePerSkill(
-    int Skill,
-    double DecayingAverage
-);
\ No newline at end of file
diff --git a/Epsilon.Abstractions/Model/ProfessionalSkillResult.cs b/Epsilon.Abstractions/Model/ProfessionalSkillResult.cs
index 8cd48934..505b4f3b 100644
--- a/Epsilon.Abstractions/Model/ProfessionalSkillResult.cs
+++ b/Epsilon.Abstractions/Model/ProfessionalSkillResult.cs
@@ -1,8 +1,9 @@
 namespace Epsilon.Abstractions.Model;
 
 public record ProfessionalSkillResult(
+    int OutcomeId,
     int Skill,
     int MasteryLevel,
     double Grade,
     DateTime AssessedAt
-);
\ No newline at end of file
+)  : CompetenceOutcomeResult(OutcomeId, Grade, AssessedAt);
\ No newline at end of file
diff --git a/Epsilon.Abstractions/Model/ProfessionalTaskResult.cs b/Epsilon.Abstractions/Model/ProfessionalTaskResult.cs
index 55998383..a83e9c83 100644
--- a/Epsilon.Abstractions/Model/ProfessionalTaskResult.cs
+++ b/Epsilon.Abstractions/Model/ProfessionalTaskResult.cs
@@ -1,9 +1,10 @@
 namespace Epsilon.Abstractions.Model;
 
 public record ProfessionalTaskResult(
+    int OutcomeId,
     int ArchitectureLayer,
     int Activity,
     int MasteryLevel,
     double Grade,
     DateTime AssessedAt
-);
\ No newline at end of file
+) : CompetenceOutcomeResult(OutcomeId, Grade, AssessedAt);
\ No newline at end of file
diff --git a/Epsilon.Host.Frontend/src/components/CompetenceGraph.vue b/Epsilon.Host.Frontend/src/components/CompetenceGraph.vue
index 176fac24..44185abb 100644
--- a/Epsilon.Host.Frontend/src/components/CompetenceGraph.vue
+++ b/Epsilon.Host.Frontend/src/components/CompetenceGraph.vue
@@ -1,18 +1,22 @@
 <template>
     <ApexChart
-        type="bar"
-        height="350"
-        width="750"
         :options="chartOptions"
-        :series="series" />
+        :series="series"
+        height="350"
+        type="bar"
+        width="750" />
 </template>
 
 <script lang="ts" setup>
 import ApexChart from "vue3-apexcharts"
-import { DecayingAveragePerLayer, IHboIDomain } from "../logic/Api"
-import { onMounted } from "vue"
+import { IHboIDomain, ProfessionalTaskResult } from "../logic/Api"
+import { onMounted, watch } from "vue"
+import {
+    DecayingAverageLogic,
+    DecayingAveragePerLayer,
+} from "../logic/DecayingAverageLogic"
 
-const series: Array<{
+let series: Array<{
     name: string
     color: string
     data: Array<string | number> | undefined
@@ -21,7 +25,7 @@ const chartOptions = {
     annotations: {
         yaxis: [
             {
-                y: 9,
+                y: 3,
                 borderColor: "red",
                 strokeDashArray: 0,
                 label: {
@@ -77,41 +81,35 @@ const chartOptions = {
 
 const props = defineProps<{
     domain: IHboIDomain
-    data: DecayingAveragePerLayer[]
+    data: ProfessionalTaskResult[]
 }>()
 
-onMounted(() => {
-    // Setup categories
-    const activities = props.domain.activities
-
-    if (activities != null) {
-        activities.forEach((s) => {
+function loadChartData(): void {
+    series = []
+    chartOptions.xaxis.categories = []
+    if (props.domain.activities != null) {
+        props.domain.activities.forEach((s) => {
             chartOptions.xaxis.categories.push(s.name as never)
         })
     }
 
-    // Add data
-    const layers = props.domain.architectureLayers
-
-    if (layers != null) {
-        props.data.forEach((layerDecayingAverage) => {
-            const layer = layers.find(
-                (layer) => layer.id == layerDecayingAverage.architectureLayer
-            )
-
-            if (layer != undefined) {
-                series.push({
-                    name: layer.name as string,
-                    color: layer.color as string,
-                    data: layerDecayingAverage.layerActivities?.map(
-                        (decayingAverage) =>
-                            decayingAverage.decayingAverage?.toFixed(
-                                2
-                            ) as string
-                    ),
-                })
-            }
+    DecayingAverageLogic.getAverageTaskOutcomeScores(
+        props.data,
+        props.domain
+    ).map((layer: DecayingAveragePerLayer) => {
+        const ar = props.domain.architectureLayers?.at(layer.architectureLayer)
+        series.push({
+            name: ar?.name,
+            color: ar?.color,
+            data: layer.layerActivities.map((ac) =>
+                ac.decayingAverage.toFixed(3)
+            ),
         })
-    }
+    })
+}
+
+onMounted(() => {
+    loadChartData()
 })
+watch(() => loadChartData())
 </script>
diff --git a/Epsilon.Host.Frontend/src/components/PersonalDevelopmentGraph.vue b/Epsilon.Host.Frontend/src/components/PersonalDevelopmentGraph.vue
index 61b89581..6190ea02 100644
--- a/Epsilon.Host.Frontend/src/components/PersonalDevelopmentGraph.vue
+++ b/Epsilon.Host.Frontend/src/components/PersonalDevelopmentGraph.vue
@@ -1,23 +1,28 @@
 <template>
     <ApexChart
-        type="bar"
-        height="350"
-        width="200"
         :options="chartOptions"
-        :series="series" />
+        :series="series"
+        height="350"
+        type="bar"
+        width="200" />
 </template>
 
 <script lang="ts" setup>
 import ApexChart from "vue3-apexcharts"
-import { DecayingAveragePerSkill, IHboIDomain } from "../logic/Api"
-import { onMounted } from "vue"
+import {
+    IHboIDomain,
+    MasteryLevel,
+    ProfessionalSkillResult,
+} from "../logic/Api"
+import { onMounted, watch } from "vue"
+import { DecayingAverageLogic } from "../logic/DecayingAverageLogic"
 
 const props = defineProps<{
     domain: IHboIDomain
-    data: DecayingAveragePerSkill[]
+    data: ProfessionalSkillResult[]
 }>()
 
-const series: Array<{ name: string; data: Array<number | string> }> = []
+let series: Array<{ name: string; data: Array<number | string> }> = []
 const chartOptions = {
     annotations: {
         yaxis: [
@@ -36,7 +41,7 @@ const chartOptions = {
             },
         ],
     },
-    colors: ["#A8D08D"],
+    colors: ["#FFFFFF"],
     chart: {
         type: "bar",
         stacked: true,
@@ -76,22 +81,42 @@ const chartOptions = {
 }
 
 onMounted(() => {
-    // Setup categories
-    const professionalSkills = props.domain.professionalSkills
+    loadChartData()
+})
+watch(() => loadChartData())
 
-    if (professionalSkills != null) {
-        professionalSkills.forEach((s) => {
-            chartOptions.xaxis.categories.push(s.shortName as never)
+function loadChartData(): void {
+    series = []
+    chartOptions.xaxis.categories = []
+    if (props.domain.professionalSkills != null) {
+        props.domain.professionalSkills.forEach((s) => {
+            chartOptions.xaxis.categories.push(s.name as never)
         })
     }
 
     // Add data
     series.push({
-        name: "Decaying Average",
-        data: props.data.map(
-            (decayingAverage) =>
-                decayingAverage.decayingAverage?.toFixed(2) as string
-        ),
+        name: "Score",
+        data: DecayingAverageLogic.getAverageSkillOutcomeScores(
+            props.data,
+            props.domain
+        )?.map((d) => {
+            return {
+                y: d.decayingAverage.toFixed(3),
+                x: props.domain.professionalSkills?.at(d.skill)?.name,
+                fillColor: getMastery(d.masteryLevel)?.color,
+            }
+        }),
     })
-})
+}
+
+function getMastery(masteryId: number): MasteryLevel | undefined {
+    if (props.domain.masteryLevels == null) {
+        return undefined
+    }
+
+    return props.domain.masteryLevels.find(
+        (masteryLevel) => masteryLevel.id == masteryId
+    )
+}
 </script>
diff --git a/Epsilon.Host.Frontend/src/logic/DecayingAverageLogic.ts b/Epsilon.Host.Frontend/src/logic/DecayingAverageLogic.ts
new file mode 100644
index 00000000..186262b9
--- /dev/null
+++ b/Epsilon.Host.Frontend/src/logic/DecayingAverageLogic.ts
@@ -0,0 +1,199 @@
+import {
+    IHboIDomain,
+    ProfessionalSkillResult,
+    ProfessionalTaskResult,
+} from "/@/logic/Api"
+
+export interface DecayingAveragePerActivity {
+    outcome: number
+    activity: number
+    decayingAverage: number
+}
+
+export interface DecayingAveragePerLayer {
+    architectureLayer: number
+    layerActivities: DecayingAveragePerActivity[]
+}
+
+export interface DecayingAveragePerSkill {
+    skill: number
+    decayingAverage: number
+    masteryLevel: number
+}
+
+export class DecayingAverageLogic {
+    /**
+     * Calculate the averages for each skill type
+     * @param taskResults
+     * @param domain
+     * @constructor
+     */
+    public static getAverageSkillOutcomeScores(
+        taskResults: ProfessionalSkillResult[],
+        domain: IHboIDomain
+    ): DecayingAveragePerSkill[] {
+        const listOfResults = Object.entries(
+            this.groupBy(taskResults, (r) => r.outcomeId as unknown as string)
+        ).map(([, j]) => {
+            return {
+                decayingAverage: this.getDecayingAverageFromOneOutcomeType(j),
+                skill: j.at(0)?.skill,
+                masteryLevel: j
+                    .sort((a) => a.masteryLevel as never as number)
+                    .at(0)?.masteryLevel,
+            } as DecayingAveragePerSkill
+        })
+
+        return domain.professionalSkills?.map((s) => {
+            let score = 0.0
+            const filteredResults = listOfResults.filter(
+                (r) => r.skill === s.id
+            )
+            filteredResults.map((result) => {
+                score += result.decayingAverage
+            })
+            return {
+                decayingAverage: score / filteredResults.length,
+                skill: s.id,
+                masteryLevel: filteredResults
+                    .sort((a) => a.masteryLevel as never as number)
+                    .at(0)?.masteryLevel,
+            } as DecayingAveragePerSkill
+        }) as DecayingAveragePerSkill[]
+    }
+
+    /**
+     * Calculate the averages for each task type divided in architecture layers.
+     * @param taskResults
+     * @param domain
+     * @constructor
+     */
+    public static getAverageTaskOutcomeScores(
+        taskResults: ProfessionalTaskResult[],
+        domain: IHboIDomain
+    ): DecayingAveragePerLayer[] {
+        const canvasDecaying = this.getDecayingAverageForAllOutcomes(
+            taskResults,
+            domain
+        )
+        return domain.architectureLayers?.map((layer) => {
+            return {
+                architectureLayer: layer.id,
+                layerActivities: domain.activities?.map((activity) => {
+                    let totalScoreActivity = 0
+                    let totalScoreArchitectureActivity = 0
+                    let amountOfActivities = 0
+
+                    //Calculate the total score from activity
+                    canvasDecaying.map((l) =>
+                        l.layerActivities
+                            ?.filter((la) => la.activity === activity.id)
+                            .map(
+                                (la) =>
+                                    (totalScoreActivity +=
+                                        la.decayingAverage &&
+                                        amountOfActivities++)
+                            )
+                    )
+
+                    //Calculate the total score from activity inside this architecture layer
+                    canvasDecaying
+                        .filter((l) => l.architectureLayer === layer.id)
+                        .map((l) =>
+                            l.layerActivities
+                                ?.filter((la) => la.activity === activity.id)
+                                .map(
+                                    (la) =>
+                                        (totalScoreArchitectureActivity +=
+                                            la.decayingAverage)
+                                )
+                        )
+
+                    return {
+                        activity: activity.id,
+                        decayingAverage:
+                            ((totalScoreActivity / amountOfActivities) *
+                                totalScoreArchitectureActivity) /
+                            totalScoreActivity,
+                    } as DecayingAveragePerActivity
+                }),
+            }
+        }) as DecayingAveragePerLayer[]
+    }
+
+    /**
+     * Calculate average of given tasks divided in architectural layers
+     * @param taskResults
+     * @param domain
+     * @constructor
+     * @private
+     */
+    private static getDecayingAverageForAllOutcomes(
+        taskResults: ProfessionalTaskResult[],
+        domain: IHboIDomain
+    ): DecayingAveragePerLayer[] {
+        return domain.architectureLayers?.map((l) => {
+            return {
+                architectureLayer: l.id,
+                layerActivities: Object.entries(
+                    this.groupBy(
+                        //Ensure that given results are only relined on the architecture that is currently being used.
+                        taskResults.filter(
+                            (layer) => layer.architectureLayer === l.id
+                        ),
+                        (r) => r.outcomeId as unknown as string
+                    )
+                ).map(([i, j]) => {
+                    //From all selected outcomes calculate the decaying average, Give outcome id and activity layer.
+                    return {
+                        outcome: i,
+                        activity: j.at(0)?.activity,
+                        decayingAverage:
+                            this.getDecayingAverageFromOneOutcomeType(j),
+                    }
+                }) as unknown as DecayingAveragePerActivity[],
+            }
+        }) as DecayingAveragePerLayer[]
+    }
+
+    /**
+     * Calculate decaying average described by Canvas: https://community.canvaslms.com/t5/Canvas-Basics-Guide/What-are-Outcomes/ta-p/75#decaying_average
+     * !IMPORTANT, The list of results will always have to be a list of the same outcome id. Not a list of equal activity and architecture layer.
+     * @param results
+     * @constructor
+     * @private
+     */
+    private static getDecayingAverageFromOneOutcomeType(
+        results: ProfessionalTaskResult[] | ProfessionalSkillResult[]
+    ): number {
+        let totalGradeScore = 0.0
+
+        const recentResult = results.reverse().pop()
+        if (recentResult && recentResult.grade) {
+            if (results.length > 0) {
+                results.forEach(
+                    (r) => (totalGradeScore += r.grade ? r.grade : 0)
+                )
+                totalGradeScore =
+                    (totalGradeScore / results.length) * 0.35 +
+                    recentResult.grade * 0.65
+            } else {
+                totalGradeScore = recentResult.grade
+            }
+        }
+
+        return totalGradeScore
+    }
+
+    private static groupBy<T>(
+        arr: T[],
+        fn: (item: T) => number | string
+    ): Record<string, T[]> {
+        return arr.reduce<Record<string, T[]>>((prev, curr) => {
+            const groupKey = fn(curr)
+            const group = prev[groupKey] || []
+            group.push(curr)
+            return { ...prev, [groupKey]: group }
+        }, {})
+    }
+}
diff --git a/Epsilon.Host.Frontend/src/views/PerformanceDashboard.vue b/Epsilon.Host.Frontend/src/views/PerformanceDashboard.vue
index 3e5989d3..e487b248 100644
--- a/Epsilon.Host.Frontend/src/views/PerformanceDashboard.vue
+++ b/Epsilon.Host.Frontend/src/views/PerformanceDashboard.vue
@@ -4,16 +4,16 @@
             :terms="data.terms"
             @on-term-selected="setTermFilter" />
         <CompetenceProfileComponent
-            :domain="data.hboIDomain"
-            :data="filteredProfessionalTaskOutcomes" />
+            :data="filteredProfessionalTaskOutcomes"
+            :domain="data.hboIDomain" />
         <CompetenceProfileLegend :domain="data.hboIDomain" />
         <div />
         <CompetenceGraph
-            :domain="data.hboIDomain"
-            :data="data.decayingAveragesPerTask" />
-        <PersonalDevelopmentMatrix
-            :domain="data.hboIDomain"
-            :data="data.decayingAveragesPerSkill" />
+            :data="filteredProfessionalTaskOutcomes"
+            :domain="data.hboIDomain" />
+        <PersonalDevelopmentGraph
+            :data="filteredProfessionalSkillOutcomes"
+            :domain="data?.hboIDomain"></PersonalDevelopmentGraph>
     </div>
     <RoundLoader v-else />
 </template>
@@ -21,17 +21,17 @@
 <script lang="ts" setup>
 import {
     Api,
-    HttpResponse,
     CompetenceProfile,
     EnrollmentTerm,
+    HttpResponse,
 } from "../logic/Api"
 import CompetenceProfileComponent from "@/components/CompetenceProfile.vue"
 import CompetenceProfileLegend from "@/components/CompetenceProfileLegend.vue"
 import CompetenceGraph from "@/components/CompetenceGraph.vue"
-import PersonalDevelopmentMatrix from "@/components/PersonalDevelopmentGraph.vue"
 import { computed, onMounted, Ref, ref } from "vue"
 import RoundLoader from "@/components/RoundLoader.vue"
 import EnrollmentTermButtons from "@/components/EnrollmentTermButtons.vue"
+import PersonalDevelopmentGraph from "@/components/PersonalDevelopmentGraph.vue"
 
 const data: Ref<CompetenceProfile | undefined> = ref(undefined)
 const App = new Api()
@@ -39,16 +39,30 @@ const App = new Api()
 const selectedTerm = ref<EnrollmentTerm | null>(null)
 
 const filteredProfessionalTaskOutcomes = computed(() => {
-    if (!data.value) {
+    if (!data.value?.professionalTaskOutcomes) {
         return []
     }
 
-    if (!selectedTerm.value) {
+    if (!selectedTerm.value?.end_at) {
         return data.value?.professionalTaskOutcomes
     }
 
     return data.value.professionalTaskOutcomes.filter(
-        (o) => o.assessedAt < selectedTerm.value.end_at
+        (o) => o.assessedAt < selectedTerm.value?.end_at
+    )
+})
+
+const filteredProfessionalSkillOutcomes = computed(() => {
+    if (!data.value?.professionalSkillOutcomes) {
+        return []
+    }
+
+    if (!selectedTerm.value?.end_at) {
+        return data.value?.professionalSkillOutcomes
+    }
+
+    return data.value?.professionalSkillOutcomes?.filter(
+        (o) => o.assessedAt < selectedTerm.value?.end_at
     )
 })