diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 06365605b..81df5a00e 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,7 +7,7 @@ import { MappingComponent } from './component/mapping/mapping.component';
 import { MatrixComponent } from './component/matrix/matrix.component';
 import { ActivityDescriptionComponent } from './component/activity-description/activity-description.component';
 import { UsageComponent } from './component/usage/usage.component';
-import { Teams } from './component/teams/teams.component';
+import { TeamsComponent } from './component/teams/teams.component';
 
 const routes: Routes = [
   { path: '', component: MatrixComponent },
@@ -15,7 +15,7 @@ const routes: Routes = [
   { path: 'activity-description', component: ActivityDescriptionComponent },
   { path: 'mapping', component: MappingComponent },
   { path: 'usage', component: UsageComponent },
-  { path: 'teams', component: Teams },
+  { path: 'teams', component: TeamsComponent },
   { path: 'about', component: AboutUsComponent },
   { path: 'userday', component: UserdayComponent },
 ];
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b43eefe60..c4911cc82 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,7 +20,7 @@ import { UsageComponent } from './component/usage/usage.component';
 import { UserdayComponent } from './component/userday/userday.component';
 import { AboutUsComponent } from './component/about-us/about-us.component';
 import { DependencyGraphComponent } from './component/dependency-graph/dependency-graph.component';
-import { Teams } from './component/teams/teams.component';
+import { TeamsComponent } from './component/teams/teams.component';
 import { ToStringValuePipe } from './pipe/to-string-value.pipe';
 
 @NgModule({
@@ -37,7 +37,7 @@ import { ToStringValuePipe } from './pipe/to-string-value.pipe';
     UsageComponent,
     AboutUsComponent,
     DependencyGraphComponent,
-    Teams,
+    TeamsComponent,
     ToStringValuePipe,
     UserdayComponent,
   ],
diff --git a/src/app/component/activity-description/activity-description.component.ts b/src/app/component/activity-description/activity-description.component.ts
index a361b770b..f823a7e5d 100644
--- a/src/app/component/activity-description/activity-description.component.ts
+++ b/src/app/component/activity-description/activity-description.component.ts
@@ -37,7 +37,7 @@ export interface activityDescription {
   assessment: string;
   comments: string;
   isImplemented: boolean;
-  teamsImplemented: Object;
+  teamsImplemented: Record<string, any>;
 }
 
 @Component({
@@ -78,6 +78,7 @@ export class ActivityDescriptionComponent implements OnInit {
   YamlObject: any;
   GeneralLabels: string[] = [];
   KnowledgeLabels: string[] = [];
+  TeamList: string[] = [];
   rowIndex: number = 0;
   markdown: md = md();
   SAMMVersion: string = 'OWASP SAMM VERSION 2';
@@ -95,16 +96,20 @@ export class ActivityDescriptionComponent implements OnInit {
     //gets value from sample file
     this.yaml.setURI('./assets/YAML/meta.yaml');
     // Function sets label data
+    console.log(this.perfNow() + 's: meta.yaml fetch');
     this.yaml.getJson().subscribe(data => {
-      this.YamlObject = data;
-      this.GeneralLabels = this.YamlObject['strings']['en']['labels'];
-      this.KnowledgeLabels =
-        this.YamlObject['strings']['en']['KnowledgeLabels'];
+      console.log(this.perfNow() + 's: meta.yaml');
+      this.GeneralLabels = data['strings']['en']['labels'];
+      this.KnowledgeLabels = data['strings']['en']['KnowledgeLabels'];
+      this.TeamList = data['teams']; // Genuine teams (the true source)
+      console.log(this.perfNow() + 's: meta.yaml processed');
     });
     //gets value from generated folder
+    console.log(this.perfNow() + 's: generated.yaml fetch');
     this.yaml.setURI('./assets/YAML/generated/generated.yaml');
     // Function sets data
     this.yaml.getJson().subscribe(data => {
+      console.log(this.perfNow() + 's: generated.yaml downloaded');
       this.YamlObject = data;
 
       var allDimensionNames = Object.keys(this.YamlObject);
@@ -250,40 +255,48 @@ export class ActivityDescriptionComponent implements OnInit {
         data['isImplemented'],
         false
       );
-      const dataFromLocalStorage = localStorage.getItem('dataset');
+      let combinedTeamsImplemented: any = {};
+      const dataFromLocalStorage: string | null =
+        localStorage.getItem('dataset');
       if (dataFromLocalStorage !== null) {
-        var parsedDataFromLocalStorage = JSON.parse(dataFromLocalStorage);
-        var index = -1;
-        for (var i = 0; i < parsedDataFromLocalStorage.length; i++) {
-          for (
-            var j = 0;
-            j < parsedDataFromLocalStorage[i]['Activity'].length;
-            j++
-          ) {
-            if (
-              parsedDataFromLocalStorage[i]['Activity'][j]['uuid'] ===
-              data['uuid']
-            ) {
-              console.log('test', parsedDataFromLocalStorage[i]['Activity'][j]);
-
-              index = i;
-              this.currentActivity.teamsImplemented =
-                parsedDataFromLocalStorage[i]['Activity'][j][
-                  'teamsImplemented'
-                ];
+        let localData = JSON.parse(dataFromLocalStorage);
+        let localDataActivity = null;
 
+        // Find the activity with the correct uuid
+        for (let subdim of localData) {
+          for (let activity of subdim?.Activity) {
+            if (activity?.uuid === data?.uuid) {
+              console.log('Found', activity);
+              localDataActivity = activity;
               break;
             }
           }
+          if (localDataActivity) break;
         }
-        // this.currentActivity.teamsEvidence = this.defineEvidenceObject();
-      } else this.currentActivity.teamsImplemented = data['teamsImplemented'];
+
+        // Combine teams status from local storage and loaded yaml file
+        combinedTeamsImplemented = Object.assign(
+          {},
+          localDataActivity?.teamsImplemented,
+          this.currentActivity?.teamsImplemented
+        );
+      } else {
+        combinedTeamsImplemented = data['teamsImplemented'];
+      }
+
+      // Only keep genuine teams
+      this.currentActivity.teamsImplemented = {};
+      for (let team of this.TeamList) {
+        this.currentActivity.teamsImplemented[team] =
+          combinedTeamsImplemented[team];
+      }
 
       this.currentActivity.teamsEvidence = this.defineEvidenceObject(
         data['teamsEvidence']
       );
       // console.log("data['teamsEvidence']", data['teamsEvidence']);
       this.openall();
+      console.log(this.perfNow() + 's: generated.yaml processed');
     });
   }
 
@@ -378,4 +391,8 @@ export class ActivityDescriptionComponent implements OnInit {
       element.closeAll();
     });
   }
+
+  perfNow() {
+    return (performance.now() / 1000).toFixed(3);
+  }
 }
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.html b/src/app/component/circular-heatmap/circular-heatmap.component.html
index 027d2d5a8..34c586d87 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.html
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.html
@@ -218,7 +218,7 @@ <h2>Nothing to show</h2>
                 </mat-chip>
                 <mat-chip
                   #c="matChip"
-                  *ngFor="let group of teamGroups | keyvalue"
+                  *ngFor="let group of teamGroups | keyvalue : unsorted"
                   (click)="toggleTeamGroupSelection(c)">
                   {{ group.key }}
                 </mat-chip>
@@ -263,14 +263,15 @@ <h2>Nothing to show</h2>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
                   <ul class="team-list">
-                    <li
-                      *ngFor="let item of activity.teamsImplemented | keyvalue">
+                    <li *ngFor="let teamname of teamVisible">
                       <mat-checkbox
-                        [checked]="item.value === true"
-                        *ngIf="teamVisible.includes(item.key | ToStringValue)"
+                        [checked]="activity.teamsImplemented[teamname]"
                         color="primary"
-                        (click)="this.teamCheckbox(activityIndex, item.key)">
-                        {{ item.key }}
+                        (click)="
+                          this.teamCheckbox(activityIndex, teamname);
+                          $event.preventDefault()
+                        ">
+                        {{ teamname }}
                       </mat-checkbox>
                     </li>
                   </ul>
@@ -288,7 +289,7 @@ <h2>Nothing to show</h2>
           class="normal-button"
           mat-raised-button
           class="downloadButtonClass"
-          (click)="SaveEditedYAMLfile()">
+          (click)="saveEditedYAMLfile()">
           Download edited YAML file
         </button>
         <button
diff --git a/src/app/component/circular-heatmap/circular-heatmap.component.ts b/src/app/component/circular-heatmap/circular-heatmap.component.ts
index d23d1cfff..aaeced693 100644
--- a/src/app/component/circular-heatmap/circular-heatmap.component.ts
+++ b/src/app/component/circular-heatmap/circular-heatmap.component.ts
@@ -41,7 +41,7 @@ type ProjectData = {
 })
 export class CircularHeatmapComponent implements OnInit {
   Routing: string = '/activity-description';
-  maxLevelOfActivities: number = -1;
+  maxLevelOfMaturity: number = -1;
   showActivityCard: boolean = false;
   cardHeader: string = '';
   cardSubheader: string = '';
@@ -85,125 +85,53 @@ export class CircularHeatmapComponent implements OnInit {
 
   private LoadMaturityDataFromGeneratedYaml() {
     return new Promise<void>((resolve, reject) => {
-      console.log(
-        `${this.perfNow()}s: LoadMaturityDataFromGeneratedYaml Fetch`
-      );
+      console.log(`${this.perfNow()}s: LoadMaturityData Fetch`);
       this.yaml.setURI('./assets/YAML/generated/generated.yaml');
-
       this.yaml.getJson().subscribe(data => {
-        console.log(
-          `${this.perfNow()}s: LoadMaturityDataFromGeneratedYaml Downloaded`
-        );
+        console.log(`${this.perfNow()}s: LoadMaturityData Downloaded`);
         this.YamlObject = data;
-        var allDimensionNames = Object.keys(this.YamlObject);
-        var totalTeamsImplemented: number = 0;
-        var totalActivityTeams: number = 0;
-
-        this.AddSegmentLabels(allDimensionNames);
-
-        for (var l = 0; l < this.maxLevelOfActivities; l++) {
-          for (var d = 0; d < allDimensionNames.length; d++) {
-            var allSubDimensionInThisDimension = Object.keys(
-              this.YamlObject[allDimensionNames[d]]
-            );
-            for (var s = 0; s < allSubDimensionInThisDimension.length; s++) {
-              var allActivityInThisSubDimension = Object.keys(
-                this.YamlObject[allDimensionNames[d]][
-                  allSubDimensionInThisDimension[s]
-                ]
+        this.AddSegmentLabels(this.YamlObject);
+        const localStorageData = this.getDatasetFromBrowserStorage();
+
+        // Initialize the card array
+        let segmentTotalCount = this.segment_labels.length;
+        let cardTotalCount = segmentTotalCount * this.maxLevelOfMaturity;
+        this.ALL_CARD_DATA = new Array(cardTotalCount).fill(null);
+
+        // Process each card / sector
+        let subdimCount = -1;
+        for (let dim in this.YamlObject) {
+          for (let subdim in this.YamlObject[dim]) {
+            subdimCount++;
+            console.log(subdimCount, subdim);
+            let activities: Map<number, activitySchema[]> =
+              this.processActivities(
+                this.YamlObject[dim][subdim],
+                localStorageData
               );
-              var level = 'Level ' + (l + 1);
-              var activity: activitySchema[] = [];
-              var activityCompletionStatus: number = -1;
-
-              for (var a = 0; a < allActivityInThisSubDimension.length; a++) {
-                try {
-                  var uuid =
-                    this.YamlObject[allDimensionNames[d]][
-                      allSubDimensionInThisDimension[s]
-                    ][allActivityInThisSubDimension[a]]['uuid'];
-
-                  var lvlOfCurrentActivity =
-                    this.YamlObject[allDimensionNames[d]][
-                      allSubDimensionInThisDimension[s]
-                    ][allActivityInThisSubDimension[a]]['level'];
-
-                  if (lvlOfCurrentActivity == l + 1) {
-                    var nameOfActivity: string =
-                      allActivityInThisSubDimension[a];
-                    var teamStatus: { [key: string]: boolean } = {};
-                    const teams = this.teamList;
-
-                    totalActivityTeams += 1;
-
-                    teams.forEach((singleTeam: any) => {
-                      teamStatus[singleTeam] = false;
-                    });
-
-                    var teamsImplemented: any =
-                      this.YamlObject[allDimensionNames[d]][
-                        allSubDimensionInThisDimension[s]
-                      ][allActivityInThisSubDimension[a]]['teamsImplemented'];
-
-                    if (teamsImplemented) {
-                      teamStatus = teamsImplemented;
-                    }
-
-                    var localStorageData = this.getFromBrowserState();
-
-                    if (
-                      localStorageData != null &&
-                      localStorageData.length > 0
-                    ) {
-                      this.YamlObject[allDimensionNames[d]][
-                        allSubDimensionInThisDimension[s]
-                      ][allActivityInThisSubDimension[a]]['teamsImplemented'] =
-                        this.getTeamImplementedFromJson(
-                          localStorageData,
-                          allActivityInThisSubDimension[a]
-                        );
-                    }
-
-                    (
-                      Object.keys(teamStatus) as (keyof typeof teamStatus)[]
-                    ).forEach((key, index) => {
-                      totalActivityTeams += 1;
-                      if (teamStatus[key] === true) {
-                        totalTeamsImplemented += 1;
-                      }
-                    });
-
-                    activity.push({
-                      uuid: uuid,
-                      activityName: nameOfActivity,
-                      teamsImplemented: teamStatus,
-                    });
-                  }
-
-                  if (totalActivityTeams > 0) {
-                    activityCompletionStatus =
-                      totalTeamsImplemented / totalActivityTeams;
-                  }
-                } catch {
-                  console.log('level for activity does not exist');
-                }
-              }
 
+            for (
+              let level: number = 1;
+              level <= this.maxLevelOfMaturity;
+              level++
+            ) {
+              // Create and store each card (with activities for that level)
               var cardSchemaData: cardSchema = {
-                Dimension: allDimensionNames[d],
-                SubDimension: allSubDimensionInThisDimension[s],
-                Level: level,
-                'Done%': activityCompletionStatus,
-                Activity: activity,
+                Dimension: dim,
+                SubDimension: subdim,
+                Level: 'Level ' + level,
+                'Done%': -1,
+                Activity: activities.get(level) || [],
               };
 
-              this.ALL_CARD_DATA.push(cardSchemaData);
+              // Store cards in sequential slots, by dimension then level
+              let levelIndex = (level - 1) * segmentTotalCount;
+              this.ALL_CARD_DATA[levelIndex + subdimCount] = cardSchemaData;
             }
           }
         }
 
         console.log('ALL CARD DATA', this.ALL_CARD_DATA);
-        this.loadState();
         this.loadCircularHeatMap(
           this.ALL_CARD_DATA,
           '#chart',
@@ -211,14 +139,61 @@ export class CircularHeatmapComponent implements OnInit {
           this.segment_labels
         );
         this.noActivitytoGrey();
-        console.log(
-          `${this.perfNow()}s: LoadMaturityDataFromGeneratedYaml End`
-        );
+        console.log(`${this.perfNow()}s: LoadMaturityData End`);
         resolve();
       });
     });
   }
 
+  /**
+   * Returns activities of one subdimension, separated by maturity level.
+   * Source of activities is the cards from the server.
+   *
+   * Status of Team Implementation is merged from both server status and
+   * locally stored changes.
+   */
+  private processActivities(
+    card: any,
+    localStorageData: any
+  ): Map<number, activitySchema[]> {
+    let activities: Map<number, activitySchema[]> = new Map();
+    for (let activityName in card) {
+      let currentActivity: any = card[activityName];
+      let level: number = currentActivity.level;
+      var uuid = currentActivity?.uuid;
+
+      // Initialize a status for all genuine teams
+      let genuineTeams: any = {};
+      this.teamList.forEach((singleTeam: string) => {
+        genuineTeams[singleTeam] = false;
+      });
+
+      // Read server and locally stored teams statuses as well
+      var teamsFromYaml: any = currentActivity.teamsImplemented;
+      var teamsFromLocalstorage: any = this.getTeamImplementedFromJson(
+        localStorageData,
+        activityName
+      );
+
+      // Combine the lot, where local changes takes priority
+      var combinedTeamsImplemented = Object.assign(
+        {},
+        genuineTeams,
+        teamsFromYaml,
+        teamsFromLocalstorage
+      );
+
+      // Store each activity, split by maturity level
+      if (!activities.has(level)) activities.set(level, []);
+      activities.get(level)?.push({
+        uuid: uuid,
+        activityName: activityName,
+        teamsImplemented: combinedTeamsImplemented,
+      });
+    }
+    return activities;
+  }
+
   private getTeamImplementedFromJson(
     data: ProjectData,
     activityName: string
@@ -236,14 +211,10 @@ export class CircularHeatmapComponent implements OnInit {
     return undefined;
   }
 
-  private AddSegmentLabels(allDimensionNames: string[]) {
-    console.log(allDimensionNames);
-    for (var i = 0; i < allDimensionNames.length; i++) {
-      var allSubDimensionInThisDimension = Object.keys(
-        this.YamlObject[allDimensionNames[i]]
-      );
-      for (var j = 0; j < allSubDimensionInThisDimension.length; j++) {
-        this.segment_labels.push(allSubDimensionInThisDimension[j]);
+  private AddSegmentLabels(yampObject: any[]) {
+    for (let dim in yampObject) {
+      for (let subdim in yampObject[dim]) {
+        this.segment_labels.push(subdim);
       }
     }
     console.log(this.segment_labels);
@@ -257,9 +228,17 @@ export class CircularHeatmapComponent implements OnInit {
         console.log(`${this.perfNow()}s: LoadTeamsFromMetaYaml Downloaded`);
         this.YamlObject = data;
 
-        this.teamList = this.YamlObject['teams'];
+        this.teamList = this.YamlObject['teams']; // Genuine teams (the true source)
         this.teamGroups = this.YamlObject['teamGroups'];
         this.teamVisible = [...this.teamList];
+
+        // Ensure that all team names in the groups are genuine team names
+        for (let team in this.teamGroups) {
+          this.teamGroups[team] = this.teamGroups[team].filter((t: string) =>
+            this.teamList.includes(t)
+          );
+          if (this.teamGroups[team].length == 0) delete this.teamGroups[team];
+        }
         resolve();
       });
     });
@@ -278,7 +257,7 @@ export class CircularHeatmapComponent implements OnInit {
         for (let x in this.YamlObject['strings']['en']['maturity_levels']) {
           var y = parseInt(x) + 1;
           this.radial_labels.push('Level ' + y);
-          this.maxLevelOfActivities = y;
+          this.maxLevelOfMaturity = y;
         }
         resolve();
       });
@@ -375,7 +354,7 @@ export class CircularHeatmapComponent implements OnInit {
         teamKey
       ];
 
-    this.saveState();
+    this.saveDataset();
     this.reColorHeatmap();
   }
 
@@ -470,7 +449,6 @@ export class CircularHeatmapComponent implements OnInit {
         _self.activityData = curr.Activity;
         _self.cardHeader = curr.SubDimension;
         _self.showActivityCard = true;
-        //console.log(_self.activityData)
       })
       .on('mouseover', function (d) {
         //console.log(d.toElement.__data__.Name)
@@ -761,8 +739,10 @@ export class CircularHeatmapComponent implements OnInit {
     this.showOverlay = false;
   }
 
-  SaveEditedYAMLfile() {
+  saveEditedYAMLfile() {
+    this.setTeamsStatus(this.YamlObject, this.teamList, this.ALL_CARD_DATA);
     let yamlStr = yaml.dump(this.YamlObject);
+
     let file = new Blob([yamlStr], { type: 'text/csv;charset=utf-8' });
     var link = document.createElement('a');
     link.href = window.URL.createObjectURL(file);
@@ -771,6 +751,26 @@ export class CircularHeatmapComponent implements OnInit {
     link.remove();
   }
 
+  setTeamsStatus(yamlObject: any, teamList: string[], card_data: cardSchema[]) {
+    // Loop through all activities from the card_data
+    for (let card of card_data) {
+      for (let activity of card.Activity) {
+        let dim: string = card.Dimension;
+        let subdim: string = card.SubDimension;
+        let activityName: string = activity.activityName;
+        let teamsImplemented: any = {};
+
+        // Get the state for all genuine teams of the activity
+        for (let team of teamList) {
+          teamsImplemented[team] = activity?.teamsImplemented[team] || false;
+        }
+        // Save the teams' state to the yaml object
+        yamlObject[dim][subdim][activityName].teamsImplemented =
+          teamsImplemented;
+      }
+    }
+  }
+
   reColorHeatmap() {
     console.log('recolor');
     for (var index = 0; index < this.ALL_CARD_DATA.length; index++) {
@@ -818,33 +818,40 @@ export class CircularHeatmapComponent implements OnInit {
 
   ResetIsImplemented() {
     localStorage.removeItem('dataset');
-    this.loadState();
+    this.loadDataset();
   }
 
-  saveState() {
+  saveDataset() {
     localStorage.setItem('dataset', JSON.stringify(this.ALL_CARD_DATA));
   }
 
-  loadState() {
-    var content = localStorage.getItem('dataset');
+  loadDataset() {
+    var content = this.getDatasetFromBrowserStorage();
+    if (content != null) {
+      this.ALL_CARD_DATA = content;
+    }
+  }
+
+  getDatasetFromBrowserStorage(): any {
+    console.log(`${this.perfNow()}s: getDatasetFromBrowserStorage() ####`);
     // @ts-ignore
-    if (this.ALL_CARD_DATA[0]['Task'] != null) {
+    if (this.ALL_CARD_DATA?.length && this.ALL_CARD_DATA[0]?.Task != null) {
       console.log('Found outdated dataset, removing');
       localStorage.removeItem('dataset');
     }
-    if (content != null) {
-      this.ALL_CARD_DATA = JSON.parse(content);
-    }
-  }
 
-  getFromBrowserState(): any {
     var content = localStorage.getItem('dataset');
     if (content != null) {
       return JSON.parse(content);
     }
+    return null;
   }
 
   perfNow(): string {
     return (performance.now() / 1000).toFixed(3);
   }
+
+  unsorted() {
+    return 0;
+  }
 }
diff --git a/src/app/component/dependency-graph/dependency-graph.component.ts b/src/app/component/dependency-graph/dependency-graph.component.ts
index c0c2e1578..b1e253220 100644
--- a/src/app/component/dependency-graph/dependency-graph.component.ts
+++ b/src/app/component/dependency-graph/dependency-graph.component.ts
@@ -61,21 +61,23 @@ export class DependencyGraphComponent implements OnInit {
     try {
       var activitysThatCurrenActivityIsDependentOn =
         this.YamlObject[activity]['dependsOn'];
-      for (
-        var j = 0;
-        j < activitysThatCurrenActivityIsDependentOn.length;
-        j++
-      ) {
-        this.checkIfNodeHasBeenGenerated(
-          activitysThatCurrenActivityIsDependentOn[j]
-        );
-        this.graphData['links'].push({
-          source: activitysThatCurrenActivityIsDependentOn[j],
-          target: activity,
-        });
-        this.populateGraphWithActivitiesCurrentActivityDependsOn(
-          activitysThatCurrenActivityIsDependentOn[j]
-        );
+      if (activitysThatCurrenActivityIsDependentOn) {
+        for (
+          var j = 0;
+          j < activitysThatCurrenActivityIsDependentOn.length;
+          j++
+        ) {
+          this.checkIfNodeHasBeenGenerated(
+            activitysThatCurrenActivityIsDependentOn[j]
+          );
+          this.graphData['links'].push({
+            source: activitysThatCurrenActivityIsDependentOn[j],
+            target: activity,
+          });
+          this.populateGraphWithActivitiesCurrentActivityDependsOn(
+            activitysThatCurrenActivityIsDependentOn[j]
+          );
+        }
       }
     } catch (e) {
       console.log(e);
diff --git a/src/app/component/matrix/matrix.component.html b/src/app/component/matrix/matrix.component.html
index 9a6e5ae6b..7831cfe51 100644
--- a/src/app/component/matrix/matrix.component.html
+++ b/src/app/component/matrix/matrix.component.html
@@ -62,7 +62,9 @@
         <th mat-header-cell *matHeaderCellDef>{{ levels[i] }}</th>
         <td mat-cell *matCellDef="let element">
           <ul class="activity-list">
-            <li class="mat-cell-activity" *ngFor="let activity of element[lvl]; index as j">
+            <li
+              class="mat-cell-activity"
+              *ngFor="let activity of element[lvl]; index as j">
               <div>
                 <div>
                   <a
diff --git a/src/app/component/teams/teams.component.html b/src/app/component/teams/teams.component.html
index 902b70744..3ce251837 100644
--- a/src/app/component/teams/teams.component.html
+++ b/src/app/component/teams/teams.component.html
@@ -6,7 +6,7 @@ <h2>Team List</h2>
     </ul>
   </div>
   <h2>Team Group</h2>
-  <div class="group-expand" *ngFor="let group of teamGroups | keyvalue">
+  <div class="group-expand" *ngFor="let group of teamGroups | keyvalue : unsorted">
     <h3>{{ group.key }}</h3>
     <div class="team-list">
       <ul>
diff --git a/src/app/component/teams/teams.component.spec.ts b/src/app/component/teams/teams.component.spec.ts
index 844664c7e..cb1aee988 100644
--- a/src/app/component/teams/teams.component.spec.ts
+++ b/src/app/component/teams/teams.component.spec.ts
@@ -6,22 +6,22 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { ymlService } from 'src/app/service/yaml-parser/yaml-parser.service';
 import { MatChip } from '@angular/material/chips';
 
-import { Teams } from './teams.component';
+import { TeamsComponent } from './teams.component';
 
-describe('Teams', () => {
-  let component: Teams;
-  let fixture: ComponentFixture<Teams>;
+describe('TeamsComponent', () => {
+  let component: TeamsComponent;
+  let fixture: ComponentFixture<TeamsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       providers: [ymlService, HttpClientTestingModule],
       imports: [RouterTestingModule, HttpClientModule],
-      declarations: [Teams, MatChip],
+      declarations: [TeamsComponent, MatChip],
     }).compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(Teams);
+    fixture = TestBed.createComponent(TeamsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/component/teams/teams.component.ts b/src/app/component/teams/teams.component.ts
index 017ddbe17..af4123843 100644
--- a/src/app/component/teams/teams.component.ts
+++ b/src/app/component/teams/teams.component.ts
@@ -7,7 +7,7 @@ import * as yaml from 'js-yaml';
   templateUrl: './teams.component.html',
   styleUrls: ['./teams.component.css'],
 })
-export class Teams implements OnInit {
+export class TeamsComponent implements OnInit {
   YamlObject: any;
   teamList: any;
   teamGroups: Map<string, string[]> = new Map();
@@ -27,7 +27,12 @@ export class Teams implements OnInit {
       console.log('teamGroups', this.teamGroups);
     });
   }
+
   getTeamArray(key: string): string[] {
     return this.teamGroups.get(key) || [];
   }
+
+  unsorted() {
+    return 0;
+  }
 }