diff --git a/src/app/component/activity-description/activity-description.component.css b/src/app/component/activity-description/activity-description.component.css
index 20a4ed39..a0d963da 100644
--- a/src/app/component/activity-description/activity-description.component.css
+++ b/src/app/component/activity-description/activity-description.component.css
@@ -36,16 +36,19 @@
   margin-bottom: 10px;
   color: var(--text-tertiary);
 }
+
 .activity-subheader .level {
   min-width: fit-content;
 }
+
 .activity-subheader .uuid {
   text-align: end;
 }
+
 .activity-subheader .uuid-label {
-    font-size: 12px;
-    margin-right: 0.1em;
-  }
+  font-size: 12px;
+  margin-right: 0.1em;
+}
 
 .close-button {
   flex-shrink: 0;
@@ -150,11 +153,36 @@ mat-panel-title b {
 }
 
 /* Level-based coloring for difficulty */
-.level-1 { background-color: #e8f5e8; color: #2e7d32; }  /* Light green */
-.level-2 { background-color: #e0f2e7; color: #388e3c; }  /* Medium green */
-.level-3 { background-color: #fff8e1; color: #f57c00; }  /* Light orange */
-.level-4 { background-color: #fff3e0; color: #ef6c00; }  /* Medium orange */
-.level-5 { background-color: #ffebee; color: #c62828; }  /* Light red */
+.level-1 {
+  background-color: #e8f5e8;
+  color: #2e7d32;
+}
+
+/* Light green */
+.level-2 {
+  background-color: #e0f2e7;
+  color: #388e3c;
+}
+
+/* Medium green */
+.level-3 {
+  background-color: #fff8e1;
+  color: #f57c00;
+}
+
+/* Light orange */
+.level-4 {
+  background-color: #fff3e0;
+  color: #ef6c00;
+}
+
+/* Medium orange */
+.level-5 {
+  background-color: #ffebee;
+  color: #c62828;
+}
+
+/* Light red */
 
 /* Usefulness Section Styling */
 .usefulness-section {
@@ -180,9 +208,10 @@ mat-panel-title b {
 }
 
 mat-icon.mat-icon {
-    width: fit-content;
-    height: fit-content;
+  width: fit-content;
+  height: fit-content;
 }
+
 .usefulness-stars {
   display: flex;
   align-items: center;
@@ -322,16 +351,16 @@ mat-icon.mat-icon {
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
   }
-  
+
   .references-summary {
     /* flex-wrap: wrap; */
     gap: 10px;
   }
-  
+
   .ref-section {
     flex: 0 1 48%;
   }
-  
+
 }
 
 @media (max-width: 350px) {
@@ -339,18 +368,18 @@ mat-icon.mat-icon {
     grid-template-columns: 1fr;
     gap: 10px;
   }
-  
+
   .references-summary {
     flex-direction: column;
     gap: 8px;
   }
-  
+
   .ref-section {
     flex: 1;
     flex-direction: row;
     gap: 8px;
   }
-  
+
   .ref-section strong {
     min-width: 80px;
     flex-shrink: 0;
@@ -436,12 +465,47 @@ mat-icon.mat-icon {
   transition: background-color 0.2s, transform 0.1s;
 }
 
+
+
+/* 1. Light Mode (Default) */
+.level,
+.uuid {
+  color: rgb(64, 64, 64) !important;
+}
+
+/* 2. Dark Mode (When .dark-theme is active on body) */
+:host-context(body.dark-theme) .level,
+:host-context(body.dark-theme) .uuid {
+  color: rgb(224, 224, 224) !important;
+}
+
+
 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
+
   /* Level badges in dark mode - maintain readability */
-  .level-1 { background-color: #2e7d32; color: #e8f5e8; }
-  .level-2 { background-color: #388e3c; color: #e0f2e7; }
-  .level-3 { background-color: #f57c00; color: #fff8e1; }
-  .level-4 { background-color: #ef6c00; color: #fff3e0; }
-  .level-5 { background-color: #c62828; color: #ffebee; }
+  .level-1 {
+    background-color: #2e7d32;
+    color: #e8f5e8;
+  }
+
+  .level-2 {
+    background-color: #388e3c;
+    color: #e0f2e7;
+  }
+
+  .level-3 {
+    background-color: #f57c00;
+    color: #fff8e1;
+  }
+
+  .level-4 {
+    background-color: #ef6c00;
+    color: #fff3e0;
+  }
+
+  .level-5 {
+    background-color: #c62828;
+    color: #ffebee;
+  }
 }
\ No newline at end of file
diff --git a/src/app/component/activity-description/activity-description.component.html b/src/app/component/activity-description/activity-description.component.html
index 28fcc422..4123a7cd 100644
--- a/src/app/component/activity-description/activity-description.component.html
+++ b/src/app/component/activity-description/activity-description.component.html
@@ -9,11 +9,7 @@ <h1>
         {{ currentActivity.name }}
       </h1>
     </div>
-    <button
-      *ngIf="showCloseButton"
-      class="close-button"
-      mat-icon-button
-      (click)="onCloseRequested()">
+    <button *ngIf="showCloseButton" class="close-button" mat-icon-button (click)="onCloseRequested()">
       <mat-icon>close</mat-icon>
     </button>
   </div>
@@ -68,8 +64,7 @@ <h1>
         </mat-panel-title>
       </mat-expansion-panel-header>
       <div *ngIf="currentActivity?.name">
-        <app-dependency-graph
-          [activityName]="currentActivity?.name || ''"
+        <app-dependency-graph [activityName]="currentActivity?.name || ''"
           (activityClicked)="onActivityClicked($event)">
         </app-dependency-graph>
       </div>
@@ -88,13 +83,10 @@ <h1>
       <div class="usefulness-header">
         <h3><b>Usefulness</b></h3>
         <div class="usefulness-stars">
-          <mat-icon
-            *ngFor="let star of [1, 2, 3, 4, 5]"
-            class="star"
+          <mat-icon *ngFor="let star of [1, 2, 3, 4, 5]" class="star"
             [class.filled]="star <= (currentActivity.usefulness || 0)">
-            {{ star <= (currentActivity.usefulness || 0) ? 'star' : 'star_border' }}
-          </mat-icon>
-          <span class="usefulness-label">{{ this.UsefulnessLabel }}</span>
+            {{ star <= (currentActivity.usefulness || 0) ? 'star' : 'star_border' }} </mat-icon>
+              <span class="usefulness-label">{{ this.UsefulnessLabel }}</span>
         </div>
       </div>
     </div>
@@ -106,30 +98,21 @@ <h3><b>Usefulness</b></h3>
           <div class="difficulty-summary" [class.hidden]="difficultyPanel.expanded">
             <span class="difficulty-indicator">
               <mat-icon class="difficulty-icon">school</mat-icon>
-              <span
-                class="difficulty-level level-{{
+              <span class="difficulty-level level-{{
                   currentActivity.difficultyOfImplementation?.knowledge
-                }}"
-                >{{ this.KnowledgeLabel }}</span
-              >
+                }}">{{ this.KnowledgeLabel }}</span>
             </span>
             <span class="difficulty-indicator">
               <mat-icon class="difficulty-icon">schedule</mat-icon>
-              <span
-                class="difficulty-level level-{{
+              <span class="difficulty-level level-{{
                   currentActivity.difficultyOfImplementation?.time
-                }}"
-                >{{ this.TimeLabel }}</span
-              >
+                }}">{{ this.TimeLabel }}</span>
             </span>
             <span class="difficulty-indicator">
               <mat-icon class="difficulty-icon">people</mat-icon>
-              <span
-                class="difficulty-level level-{{
+              <span class="difficulty-level level-{{
                   currentActivity.difficultyOfImplementation?.resources
-                }}"
-                >{{ this.ResourceLabel }}</span
-              >
+                }}">{{ this.ResourceLabel }}</span>
             </span>
           </div>
         </mat-panel-title>
@@ -138,30 +121,22 @@ <h3><b>Usefulness</b></h3>
         <div class="difficulty-detail-item">
           <mat-icon>school</mat-icon>
           <span class="detail-label">Knowledge:</span>
-          <span
-            class="difficulty-badge level-{{
+          <span class="difficulty-badge level-{{
               currentActivity.difficultyOfImplementation?.knowledge
-            }}"
-            >{{ this.KnowledgeLabel }}</span
-          >
+            }}">{{ this.KnowledgeLabel }}</span>
         </div>
         <div class="difficulty-detail-item">
           <mat-icon>schedule</mat-icon>
           <span class="detail-label">Time:</span>
-          <span
-            class="difficulty-badge level-{{ currentActivity.difficultyOfImplementation?.time }}"
-            >{{ this.TimeLabel }}</span
-          >
+          <span class="difficulty-badge level-{{ currentActivity.difficultyOfImplementation?.time }}">{{ this.TimeLabel
+            }}</span>
         </div>
         <div class="difficulty-detail-item">
           <mat-icon>people</mat-icon>
           <span class="detail-label">Resources:</span>
-          <span
-            class="difficulty-badge level-{{
+          <span class="difficulty-badge level-{{
               currentActivity.difficultyOfImplementation?.resources
-            }}"
-            >{{ this.ResourceLabel }}</span
-          >
+            }}">{{ this.ResourceLabel }}</span>
         </div>
       </div>
     </mat-expansion-panel>
@@ -173,50 +148,33 @@ <h3><b>Usefulness</b></h3>
           <div class="references-summary" [class.hidden]="referencesPanel.expanded">
             <span class="ref-section">
               <strong>SAMM 2:</strong>
-              <span
-                class="ref-values"
-                *ngIf="currentActivity?.references?.samm2?.length; else sammEmpty">
-                <span *ngFor="let samm of currentActivity?.references?.samm2; let last = last"
-                  >{{ samm }}<span *ngIf="!last">, </span></span
-                >
+              <span class="ref-values" *ngIf="currentActivity?.references?.samm2?.length; else sammEmpty">
+                <span *ngFor="let samm of currentActivity?.references?.samm2; let last = last">{{ samm }}<span
+                    *ngIf="!last">, </span></span>
               </span>
               <ng-template #sammEmpty>-</ng-template>
             </span>
             <span class="ref-section">
               <strong>ISO 2017:</strong>
-              <span
-                class="ref-values"
-                *ngIf="currentActivity?.references?.iso27001_2017?.length; else iso17Empty">
-                <span
-                  *ngFor="let iso of currentActivity?.references?.iso27001_2017; let last = last"
-                  >{{ iso }}<span *ngIf="!last">, </span></span
-                >
+              <span class="ref-values" *ngIf="currentActivity?.references?.iso27001_2017?.length; else iso17Empty">
+                <span *ngFor="let iso of currentActivity?.references?.iso27001_2017; let last = last">{{ iso }}<span
+                    *ngIf="!last">, </span></span>
               </span>
               <ng-template #iso17Empty>-</ng-template>
             </span>
             <span class="ref-section">
               <strong>ISO 2022:</strong>
-              <span
-                class="ref-values"
-                *ngIf="currentActivity?.references?.iso27001_2022?.length; else iso22Empty">
-                <span
-                  *ngFor="let iso22 of currentActivity?.references?.iso27001_2022; let last = last"
-                  >{{ iso22 }}<span *ngIf="!last">, </span></span
-                >
+              <span class="ref-values" *ngIf="currentActivity?.references?.iso27001_2022?.length; else iso22Empty">
+                <span *ngFor="let iso22 of currentActivity?.references?.iso27001_2022; let last = last">{{ iso22 }}<span
+                    *ngIf="!last">, </span></span>
               </span>
               <ng-template #iso22Empty>-</ng-template>
             </span>
             <span class="ref-section">
               <strong>OpenCRE:</strong>
-              <span
-                class="ref-values"
-                *ngIf="currentActivity?.references?.openCRE?.length; else creEmpty">
-                <a
-                  *ngFor="let openCRE of currentActivity?.references?.openCRE"
-                  target="_blank"
-                  [href]="openCRE">
-                  View OpenCRE</a
-                >
+              <span class="ref-values" *ngIf="currentActivity?.references?.openCRE?.length; else creEmpty">
+                <a *ngFor="let openCRE of currentActivity?.references?.openCRE" target="_blank" [href]="openCRE">
+                  View OpenCRE</a>
               </span>
               <ng-template #creEmpty>-</ng-template>
             </span>
@@ -229,7 +187,7 @@ <h3><b>Usefulness</b></h3>
           <div class="reference-values">
             <span class="reference-value" *ngFor="let samm of currentActivity?.references?.samm2">{{
               samm
-            }}</span>
+              }}</span>
             <span class="no-references" *ngIf="!currentActivity?.references?.samm2?.length">-</span>
           </div>
         </div>
@@ -237,52 +195,35 @@ <h3><b>Usefulness</b></h3>
         <div class="reference-column">
           <div class="reference-header">{{ ISOVersion }}</div>
           <div class="reference-values">
-            <span
-              class="reference-value"
-              *ngFor="let iso of currentActivity?.references?.iso27001_2017"
-              >{{ iso }}</span
-            >
-            <span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2017?.length"
-              >-</span
-            >
+            <span class="reference-value" *ngFor="let iso of currentActivity?.references?.iso27001_2017">{{ iso
+              }}</span>
+            <span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2017?.length">-</span>
           </div>
         </div>
 
         <div class="reference-column">
           <div class="reference-header">{{ ISO22Version }}</div>
           <div class="reference-values">
-            <span
-              class="reference-value"
-              *ngFor="let iso22 of currentActivity?.references?.iso27001_2022"
-              >{{ iso22 }}</span
-            >
-            <span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2022?.length"
-              >-</span
-            >
+            <span class="reference-value" *ngFor="let iso22 of currentActivity?.references?.iso27001_2022">{{ iso22
+              }}</span>
+            <span class="no-references" *ngIf="!currentActivity?.references?.iso27001_2022?.length">-</span>
           </div>
         </div>
 
         <div class="reference-column">
           <div class="reference-header">{{ openCREVersion }}</div>
           <div class="reference-values">
-            <a
-              class="reference-link"
-              *ngFor="let openCRE of currentActivity?.references?.openCRE"
-              target="_blank"
+            <a class="reference-link" *ngFor="let openCRE of currentActivity?.references?.openCRE" target="_blank"
               [href]="openCRE">
               <mat-icon>open_in_new</mat-icon>
               View CRE
             </a>
-            <span class="no-references" *ngIf="!currentActivity?.references?.openCRE?.length"
-              >-</span
-            >
+            <span class="no-references" *ngIf="!currentActivity?.references?.openCRE?.length">-</span>
           </div>
         </div>
       </div>
-      <span
-        >In other frameworks and standards the '{{ currentActivity?.name }}' activity is part of
-        sections above.</span
-      >
+      <span>In other frameworks and standards the '{{ currentActivity?.name }}' activity is part of
+        sections above.</span>
     </mat-expansion-panel>
 
     <!-- <mat-expansion-panel>
@@ -305,17 +246,12 @@ <h3><b>Usefulness</b></h3>
       </mat-accordion>
     </mat-expansion-panel> -->
 
-    <mat-expansion-panel
-      [expanded]="true"
-      #implementationPanel
-      *ngIf="currentActivity.implementation?.length">
+    <mat-expansion-panel [expanded]="true" #implementationPanel *ngIf="currentActivity.implementation?.length">
       <mat-expansion-panel-header>
         <mat-panel-title>
           <b>Tools</b>
           <div class="implementation-preview" [class.hidden]="implementationPanel.expanded">
-            <span class="tool-count-badge"
-              >{{ currentActivity.implementation?.length || 0 }} tools</span
-            >
+            <span class="tool-count-badge">{{ currentActivity.implementation?.length || 0 }} tools</span>
           </div>
         </mat-panel-title>
       </mat-expansion-panel-header>
@@ -342,10 +278,8 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
             <span class="ref-section" *ngFor="let progressTitle of progressTitlesWithTeams">
               <strong>{{ progressTitle }}:</strong>
               <span class="ref-values">
-                <span
-                  *ngFor="let teamName of teamsByProgressTitle.get(progressTitle); let last = last"
-                  >{{ teamName }}<span *ngIf="!last">, </span></span
-                >
+                <span *ngFor="let teamName of teamsByProgressTitle.get(progressTitle); let last = last">{{ teamName
+                  }}<span *ngIf="!last">, </span></span>
               </span>
             </span>
             <span class="ref-section" *ngIf="teamsImplemented.size === 0">
@@ -358,9 +292,7 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
         <div class="reference-column" *ngFor="let progressTitle of progressTitlesWithTeams">
           <div class="reference-header">{{ progressTitle }}</div>
           <div class="reference-values">
-            <span
-              class="reference-value"
-              *ngFor="let teamName of teamsByProgressTitle.get(progressTitle)">
+            <span class="reference-value" *ngFor="let teamName of teamsByProgressTitle.get(progressTitle)">
               {{ teamName }}
             </span>
           </div>
@@ -372,11 +304,9 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
     </mat-expansion-panel>
   </mat-accordion>
 
-  <div
-    class="tags-section"
-    *ngIf="currentActivity.tags?.length && currentActivity.tags?.[0] !== 'none'">
+  <div class="tags-section" *ngIf="currentActivity.tags?.length && currentActivity.tags?.[0] !== 'none'">
     <div class="tags-container">
       <span class="tag-chip" *ngFor="let tag of currentActivity.tags">{{ tag }}</span>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/component/teams-groups-editor/selectable-list.component.css b/src/app/component/teams-groups-editor/selectable-list.component.css
index 9d90d91d..c7256a0a 100644
--- a/src/app/component/teams-groups-editor/selectable-list.component.css
+++ b/src/app/component/teams-groups-editor/selectable-list.component.css
@@ -45,3 +45,33 @@
   font-size: 0.8em;
   color: #666;;
 }
+
+
+
+
+:host-context(body.dark-theme) .selectable-list li {
+  color: #e0e0e0;
+  transition: all 0.2s ease;
+}
+
+:host-context(body.dark-theme) .selectable-list li:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+:host-context(body.dark-theme) .selectable-list li.selected {
+  background-color: #25ca2dd8 !important;
+  color: #ffffff !important;
+}
+
+:host-context(body.dark-theme) .selectable-list li.highlighted {
+  background-color: #34aa3acd !important;
+  color: #ffffff !important;
+}
+
+:host-context(body.dark-theme) .selectable-list li:not(.selected):not(.highlighted) {
+  opacity: 0.9;
+}
+
+:host-context(body.dark-theme) mat-icon {
+  color: #ffffff;
+}
\ No newline at end of file
diff --git a/src/app/pages/circular-heatmap/circular-heatmap.component.css b/src/app/pages/circular-heatmap/circular-heatmap.component.css
index b31aac0b..a941e454 100644
--- a/src/app/pages/circular-heatmap/circular-heatmap.component.css
+++ b/src/app/pages/circular-heatmap/circular-heatmap.component.css
@@ -98,6 +98,49 @@
   flex-direction: column;
 }
 
+
+
+
+/* 
+
+/* Dark theme styling for filters */
+:host-context(body.dark-theme) .team-filter ::ng-deep mat-chip {
+  background-color: #3d3d3d !important;
+  color: #e0e0e0 !important;
+  border: 1px solid #555;
+  transition: all 0.2s ease-in-out;
+}
+
+:host-context(body.dark-theme) .team-filter ::ng-deep mat-chip:hover {
+  background-color: #4a4a4a !important;
+  border-color: #777;
+  cursor: pointer;
+}
+
+:host-context(body.dark-theme) .team-filter ::ng-deep mat-chip.mat-chip-selected {
+  background-color: #66bb6a !important;
+  color: #121212 !important;
+  border-color: #66bb6a;
+}
+
+:host-context(body.dark-theme) .team-filter ::ng-deep mat-chip.mat-chip-selected:hover {
+  background-color: #81c784 !important;
+}
+
+:host-context(body.dark-theme) .team-filter ::ng-deep .mat-form-field-label {
+  color: #b0b0b0 !important;
+}
+
+:host-context(body.dark-theme) .team-filter ::ng-deep .mat-form-field-underline {
+  background-color: #555 !important;
+}
+ */
+
+
+
+
+
+
 .team-filter.hidden {
   height: 0;
   visibility: collapse;
diff --git a/src/app/pages/matrix/matrix.component.css b/src/app/pages/matrix/matrix.component.css
index cc1c8d09..ca2f5e31 100644
--- a/src/app/pages/matrix/matrix.component.css
+++ b/src/app/pages/matrix/matrix.component.css
@@ -37,10 +37,12 @@
   margin-bottom: 1em;
   position: relative;
 }
+
 .mat-cell-activity a.activity-title {
   text-decoration: unset;
   margin: 0;
 }
+
 .mat-cell-activity a::after {
   content: "";
   position: absolute;
@@ -49,6 +51,7 @@
   width: 100%;
   height: 100%;
 }
+
 .mat-cell-activity a.activity-title:link {
   color: inherit;
 }
@@ -57,8 +60,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  
+
 }
+
 .mat-cell .dim-icon mat-icon {
   font-size: 45px;
   width: 45px;
@@ -75,6 +79,7 @@
   font-style: italic;
   font-size: 12px;
 }
+
 /*tag activity - light */
 :host-context(body.light-theme) .tags-activity,
 :host-context(body.light-theme) .tags-activity span {
@@ -127,3 +132,34 @@
   color: rgba(0, 0, 0, 0.54);
   padding: 24px;
 }
+
+
+
+/* Dark theme styling for Activity and Dimension Filters */
+:host-context(body.dark-theme) .activity-chip-list ::ng-deep mat-chip {
+  background-color: #3d3d3d !important;
+  color: #e0e0e0 !important;
+}
+
+:host-context(body.dark-theme) .activity-chip-list ::ng-deep mat-chip:hover {
+  background-color: #4a4a4a !important;
+
+}
+
+:host-context(body.dark-theme) .activity-chip-list ::ng-deep mat-chip.mat-chip-selected {
+  background-color: #66bb6a !important;
+  color: #121212 !important;
+  border-color: #66bb6a;
+}
+
+:host-context(body.dark-theme) .activity-chip-list ::ng-deep mat-chip.mat-chip-selected:hover {
+  background-color: #81c784 !important;
+}
+
+:host-context(body.dark-theme) .activity-chip-list ::ng-deep .mat-form-field-label {
+  color: #b0b0b0 !important;
+}
+
+:host-context(body.dark-theme) .activity-chip-list ::ng-deep .mat-form-field-underline {
+  background-color: #555 !important;
+}
\ No newline at end of file