diff --git a/src/TrueCV.Web/Components/Pages/Report.razor b/src/TrueCV.Web/Components/Pages/Report.razor
index 4f8b7ef..c34e23e 100644
--- a/src/TrueCV.Web/Components/Pages/Report.razor
+++ b/src/TrueCV.Web/Components/Pages/Report.razor
@@ -132,10 +132,16 @@
                                 <div class="score-roundel @GetScoreColorClass(_report!.OverallScore)">
                                     <svg class="score-ring" viewBox="0 0 120 120">
                                         <circle class="score-ring-bg" cx="60" cy="60" r="54" />
+                                        @{
+                                            var circumference = 339.292;
+                                            var progressLength = circumference * _report.OverallScore / 100;
+                                            var gapLength = circumference - progressLength;
+                                        }
                                         @if (_report.OverallScore > 0)
                                         {
                                             <circle class="score-ring-progress" cx="60" cy="60" r="54"
-                                                    stroke-dasharray="@(339.3 * _report.OverallScore / 100) 339.3" />
+                                                    stroke-dasharray="@progressLength @gapLength"
+                                                    stroke-dashoffset="0" />
                                         }
                                     </svg>
                                     <div class="score-value-container">
@@ -512,6 +518,12 @@
         padding: 8px;
     }
 
+    .score-roundel .score-ring {
+        transform: rotate(-90deg);
+        width: 100%;
+        height: 100%;
+    }
+
     .score-roundel .score-ring-bg {
         fill: none;
         stroke: rgba(255, 255, 255, 0.2);
@@ -522,6 +534,7 @@
         fill: none;
         stroke-width: 8;
         stroke-linecap: round;
+        transform-origin: center;
         transition: stroke-dasharray 0.6s ease;
     }
 
@@ -559,55 +572,6 @@
         color: white;
     }
 
-    /* Legacy score-ring-container for backwards compat */
-    .score-ring-container {
-        position: relative;
-        width: 140px;
-        height: 140px;
-        margin: 0 auto;
-    }
-
-    .score-ring {
-        transform: rotate(-90deg);
-        width: 100%;
-        height: 100%;
-    }
-
-    .score-ring-bg {
-        fill: none;
-        stroke: rgba(255, 255, 255, 0.2);
-        stroke-width: 8;
-    }
-
-    .score-ring-progress {
-        fill: none;
-        stroke: white;
-        stroke-width: 8;
-        stroke-linecap: round;
-        transition: stroke-dasharray 0.6s ease;
-    }
-
-    .score-value-container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        text-align: center;
-    }
-
-    .score-value-container .score-value {
-        font-size: 2.5rem;
-        font-weight: 700;
-        line-height: 1;
-        color: white;
-    }
-
-    .score-value-container .score-max {
-        font-size: 1rem;
-        opacity: 0.7;
-        color: white;
-    }
-
     /* Stat Items */
     .stat-item {
         padding: 0.5rem;
@@ -684,12 +648,12 @@
             font-size: 1.5rem;
         }
 
-        .score-ring-container {
+        .score-roundel {
             width: 120px;
             height: 120px;
         }
 
-        .score-value-container .score-value {
+        .score-roundel .score-value {
             font-size: 2rem;
         }