diff --git a/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.scss b/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.scss
index 10d9991a6..2c9fd6e7b 100644
--- a/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.scss
+++ b/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.scss
@@ -6,25 +6,25 @@
   }
 
   .dashes-back {
-    stroke: #455066;
+    stroke: #e7e7e7;
   }
 
   .target-circle,
   .target-circle-bg {
-    fill: #1b1e27;
+    fill: white;
   }
 
   .target-circle-bg {
-    stroke: #455066;
+    stroke: #e7e7e7;
   }
 
-  .target-label {
-    fill: #a0aabe;
-  }
+  // .target-label {
+  //   fill: #a0aabe;
+  // }
 
-  .target-value {
-    fill: #cdd2dd;
-  }
+  // .target-value {
+  //   fill: #cdd2dd;
+  // }
 
   .total {
     dominant-baseline: middle;
@@ -35,3 +35,41 @@
     text-anchor: middle;
   }
 }
+
+// .percent-gauge {
+//   cursor: pointer;
+
+//   text {
+//     text-anchor: middle;
+//   }
+
+//   .dashes-back {
+//     stroke: #455066;
+//   }
+
+//   .target-circle,
+//   .target-circle-bg {
+//     fill: #1b1e27;
+//   }
+
+//   .target-circle-bg {
+//     stroke: #455066;
+//   }
+
+//   .target-label {
+//     fill: #a0aabe;
+//   }
+
+//   .target-value {
+//     fill: #cdd2dd;
+//   }
+
+//   .total {
+//     dominant-baseline: middle;
+//   }
+
+//   .label {
+//     display: block;
+//     text-anchor: middle;
+//   }
+// }
diff --git a/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.ts b/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.ts
index cc9f843a2..238eceda8 100644
--- a/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/gauge/percent-gauge/percent-gauge.component.ts
@@ -25,7 +25,7 @@ import { ScaleType } from '../../common/types/scale-type.enum';
               [style.stroke-dashoffset]="circumference * (1 - percent / 100)"
             />
           </mask>
-          <text x="0" y="0" fill="white" stroke="none" class="total" [style.font-size]="valueFontSize">
+          <text x="0" y="0" stroke="none" class="total" [style.font-size]="valueFontSize">
             {{ displayValue }}
           </text>
           <circle
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 7a53a5b0a..65bc1cdbd 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -334,4 +334,27 @@ main {
     font-size: 0.8em;
     color: $color-text-med;
   }
+
+  .percent-gauge {
+    .dashes-back {
+      stroke: #455066;
+    }
+
+    .target-circle,
+    .target-circle-bg {
+      fill: #1b1e27;
+    }
+
+    .target-circle-bg {
+      stroke: #455066;
+    }
+
+    .target-label {
+      fill: #a0aabe;
+    }
+
+    .target-value {
+      fill: #cdd2dd;
+    }
+  }
 }