diff --git a/scoring/static/scoring/scss/main.scss b/scoring/static/scoring/scss/main.scss
index 39151331..7913ac83 100644
--- a/scoring/static/scoring/scss/main.scss
+++ b/scoring/static/scoring/scss/main.scss
@@ -66,3 +66,4 @@
 @import "open-graph-preview";
 @import "years";
 @import "gallery-component";
+@import "percentage-ring";
diff --git a/scoring/static/scoring/scss/percentage-ring.scss b/scoring/static/scoring/scss/percentage-ring.scss
new file mode 100644
index 00000000..ec19d664
--- /dev/null
+++ b/scoring/static/scoring/scss/percentage-ring.scss
@@ -0,0 +1,36 @@
+/* USAGE:
+Always check how the ring will look at 100% and if there is an overlap between elements.
+
+<div class="progress-ring" style="--ring-size: 40px;--ring-percentage: {% widthratio answer.council_count council_count 100%};">
+  <div class="percentage fs-8">
+    {% widthratio answer.council_count council_count 100%}%
+  </div>
+</div>
+*/
+
+.progress-ring {
+  min-width: var(--ring-size, 150px);
+  height: var(--ring-size, 150px);
+  border-radius: 50%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: conic-gradient(
+    var(--ring-primary-color, $primary) 0% calc(var(--ring-percentage) * 1%),
+    var(--ring-secondary-color, $primary-200) calc(var(--ring-percentage) * 1%) 100%
+  );
+
+  .percentage {
+    font-weight: bold;
+    color: var(--ring-primary-color, $primary);
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: calc(var(--ring-size, 150px) * 0.7);
+    height: calc(var(--ring-size, 150px) * 0.7);
+    background: white;
+    border-radius: 50%;
+  }
+}
diff --git a/scoring/templates/scoring/council.html b/scoring/templates/scoring/council.html
index abe1839c..0fd33fb2 100644
--- a/scoring/templates/scoring/council.html
+++ b/scoring/templates/scoring/council.html
@@ -243,29 +243,29 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
       {% for section in sections %}
         <tbody class="table-question-council__section">
 
-          {% if section.has_negative_points %}
-            <tr data-has-plan="no" class="section-row bg-red-100 text-red-900">
-          {% else %}
-            <tr data-has-plan="no" class="section-row bg-primary-100">
-          {% endif %}
+            <tr data-has-plan="no" class="section-row fw-bold">
 
-                <td colspan="1" class="section-cell border-bottom border-end border-opacity-25 border-primary text-start">
+                <td colspan="1" class="section-cell border-bottom border-start border-end border-opacity-25 border-primary text-start">
                     {{ section.description }}
 
                     {% if section.has_negative_points %}
-                    <div class="d-flex flex-column mb-0 mt-2 fs-7 text-warning">
+                    <div class="d-flex flex-column mb-0 mt-2 fs-7 rounded p-2 bg-red-100 text-warning">
                         <p class="mb-1">
                           {% include 'caps/icons/warning.html' with classes='me-1 mb-1' width='1.1em' height='1.1em' role='presentation' %}
                           <strong class="me-2">Penalty marks</strong>
                         </p>
-                        {% if section.only_negative %}
-                          {{ council.name }} was only awarded penalty marks in this section
-                        {% else %}
-                          {{ council.name }} incurred a penalty of {{ section.negative_percent|floatformat:0 }}% in this section
-                        {% endif %}
+                        <p class="fw-normal mb-1">
+                          {% if section.only_negative %}
+                            {{ council.name }} was only awarded penalty marks in this section
+                          {% else %}
+                            {{ council.name }} incurred a penalty of {{ section.negative_percent|floatformat:0 }}% in this section
+                          {% endif %}
+                        </p>
+                        <p class="fw-normal mt-1 mb-0">
+                          {{ section.score }} &equals; Total score ({{ section.non_negative_max|floatformat:"-2" }}) &minus; Penalty points ({{ section.negative_points }})
+                        </p>
                     </div>
                     {% endif %}
-
                     <button type="button" class="d-block mt-2 d-md-none btn btn-outline-primary btn-sm js-toggle-council-question-table-section rounded-0" aria-label="Expand this section" title="Expand this section">
                         {% include 'caps/icons/chevron-down.html' with classes='align-text-bottom' width='1.2em' height='1.2em' role='presentation' %}
                         Show questions
@@ -276,25 +276,39 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                 <td class="score border-bottom border-opacity-25 border-primary is--section-score">
                     {% include 'caps/icons/scorecards-star.html' with classes='text-info align-text-bottom me-1' width='1.2em' height='1.2rem' role='presentation' %}
                     <span>{{ section.weighted_score|floatformat:0 }}%</span>
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
+                    <!-- TODO: Change text-success to text-danger if comparison is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+                    <!-- TODO: Change text-success to text-dark if there is no comparison -->
+                    <!-- TODO: If there is no comparison then display '-' -->
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
               {% else %}
                 <td class="score border-bottom border-opacity-25 border-primary is--section-score">
-                  <span>{{section.weighted_score|floatformat:0 }}%</span>
-                    {% if section.has_negative_points %}
-                    <div class="fs-7 mt-2">
-                        {{ section.score }} &equals; Total score ({{ section.non_negative_max|floatformat:"-2" }}) &minus; Penalty points ({{ section.negative_points }})
-                    </div>
-                    {% endif %}
+                    <span>{{section.weighted_score|floatformat:0 }}%</span>
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
+                    <!-- TODO: Change text-success to text-danger if comparison is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+                    <!-- TODO: Change text-success to text-dark if there is no comparison -->
+                    <!-- TODO: If there is no comparison then display '-' -->
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
               {% endif %}
 
               {% for comparison in section.comparisons %}
                 <td class="d-none d-md-table-cell score border-bottom border-opacity-25 border-primary is--section-score {% if comparison.top_performer %}top-performer{% endif %}">
                     {{ comparison.weighted_score|floatformat:0 }}%
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
+                    <!-- TODO: Change text-success to text-danger if comparison is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+                    <!-- TODO: Change text-success to text-dark if there is no comparison -->
+                    <!-- TODO: If there is no comparison then display '-' -->
+                    <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+                    <button button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
               {% endfor %}
 
-                <td class="d-none d-md-table-cell top-tier-score border-bottom border-opacity-25 border-primary"></td>
+                <td class="d-none d-md-table-cell top-tier-score border-end border-bottom border-opacity-25 border-primary"></td>
 
                 <td class="button-wrapper p-0 bg-white d-none d-md-table-cell text-start">
                     <button type="button" class="btn btn-outline-primary js-toggle-council-question-table-section border-start-0 rounded-0" aria-label="Expand this section" title="Expand this section">
@@ -310,27 +324,55 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
                 </td>
 
                 <td data-column="score" class="score border-bottom">
-                    <span>{{ answer.score|format_mark }}/{{ answer.max }}</span>
+                    <div class="d-flex flex-row gap-3 justify-content-end align-items-center">
+                        <p class="mb-0">
+                          <span class="fs-5">{{ answer.score|format_mark }} <span class="fs-7">out of </span> {{ answer.max }}
+                          </span>
+                        </p>
+                        <!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
+                        <!-- TODO: Change text-success to text-danger if comparison is negative  -->
+                        <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+                        <!-- TODO: Change text-success to text-dark if there is no comparison -->
+                        <!-- TODO: If there is no comparison then display '-' -->
+                        <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+                        <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
+                    </div>
                 </td>
 
               {% for comparison in answer.comparisons %}
                 <td data-column="score" class="d-none d-md-table-cell score border-bottom">
-                    <span>{{ comparison.score|format_mark }}/{{ comparison.max }}</span>
+                    <div class="d-flex flex-row gap-3 justify-content-end align-items-center">
+                        <p class="mb-0">
+                          <span class="fs-5">{{ comparison.score|format_mark }} <span class="fs-7">out of </span> {{ comparison.max }}
+                          </span>
+                        </p>
+                        <!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
+                        <!-- TODO: Change text-success to text-danger if comparison is negative  -->
+                        <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+                        <!-- TODO: Change text-success to text-dark if there is no comparison -->
+                        <!-- TODO: If there is no comparison then display '-' -->
+                        <!-- TODO: If question didn't exist in previous years then let's add 'NA' with bg-gray-100 text-dark -->
+                        <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+1</button>
+                    </div>
                 </td>
               {% endfor %}
 
                 <td class="d-none d-md-table-cell top-tier-score border-bottom border-end">
-                  <a href="{% url 'scoring:question' answer.code %}?type={{ council.get_scoring_group.slug }}" class="mx-auto" style="text-transform: none">
-                        {{ answer.council_count }} out of {{ council_count }}
-                    </a>
-                    <span class="fs-8 mt-1 me-0 ms-auto d-block">
-                        {% include 'scoring/includes/scoring-group-name.html' with group=council.get_scoring_group.slug plural=True %}
-                      {% if answer.type == "negative" %}
-                        got <strong>no penalty marks</strong> for this question.
-                      {% else %}
-                        got full marks for this question.
-                      {% endif %}
-                    </span>
+                    <div class="d-flex flex-row gap-2 justify-content-end">
+                      <div class="progress-ring" style="--ring-size: 40px;--ring-percentage: {% widthratio answer.council_count council_count 100%};">
+                        <div class="percentage fs-8">
+                          {% widthratio answer.council_count council_count 100%}%
+                        </div>
+                      </div>
+                      <span class="fs-8 mt-1 me-0 text-start">
+                          {% include 'scoring/includes/scoring-group-name.html' with group=council.get_scoring_group.slug plural=True %}
+                        {% if answer.type == "negative" %}
+                          got <strong>no penalty marks</strong> for this question.
+                        {% else %}
+                          got full marks for this question.
+                        {% endif %}
+                      </span>
+                    </div>
                 </td>
             </tr>
           {% endfor %}
@@ -339,21 +381,33 @@ <h3 class="exclamation text-white">Visit us again on a bigger screen</h3>
       {% endfor %}
 
         <tbody class="table-question-council__section">
-            <tr data-has-plan="no" class="section-row bg-purple-200 fw-bold">
-                <td colspan="1" class="section-cell border-bottom border-end border-opacity-25 border-primary text-start">
+            <tr data-has-plan="no" class="section-row bg-purple-100 fw-bold">
+                <td colspan="1" class="section-cell border-bottom border-start border-end border-opacity-25 border-primary text-start">
                     Total score
                 </td>
                 <td class="score border-bottom border-opacity-25 border-primary is--section-score">
                     {{ plan_score.weighted_total|floatformat:0 }}%
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
+                    <!-- TODO: Change text-success to text-danger if comparison is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+                    <!-- TODO: Change text-success to text-dark if there is no comparison -->
+                    <!-- TODO: If there is no comparison then display '-' -->
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
 
               {% for comparison in comparisons %}
                 <td class="d-none d-md-table-cell score border-bottom border-opacity-25 border-primary is--section-score">
                     {{ comparison.weighted_total|floatformat:0 }}%
+                    <!-- TODO: Change bg-green-100 to bg-red-100 if comparison is negative -->
+                    <!-- TODO: Change text-success to text-danger if comparison is negative  -->
+                    <!-- TODO: Change bg-green-100 to bg-gray-100 if there is no comparison -->
+                    <!-- TODO: Change text-success to text-dark if there is no comparison -->
+                    <!-- TODO: If there is no comparison then display '-' -->
+                    <button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Comparison with Action Scorecards 2023" class="badge small ms-2 mb-0 align-text-bottom bg-green-100 text-success border-0">+5%</button>
                 </td>
               {% endfor %}
 
-                <td class="d-none d-md-table-cell top-tier-score border-bottom border-opacity-25 border-primary"></td>
+                <td class="d-none d-md-table-cell top-tier-score border-end border-bottom border-opacity-25 border-primary"></td>
                 <td class="button-wrapper p-0 bg-white d-none d-md-table-cell"></td>
             </tr>
         </tbody>