diff --git a/app/assets/sass/components/_dark-mode.scss b/app/assets/sass/components/_dark-mode.scss
index 1e791aa9..c9e62461 100644
--- a/app/assets/sass/components/_dark-mode.scss
+++ b/app/assets/sass/components/_dark-mode.scss
@@ -263,6 +263,38 @@ $app-tag--blue-dark-text: nhsuk-tint(nhsuk-colour("blue"), 80%);
     color: $app-tag--blue-dark-text;
   }
 
+  .app-reading-compare-card.nhsuk-card--feature {
+    &.app-reading-compare-card--normal {
+      outline-color: $app-tag--green-dark-border;
+
+      .nhsuk-card__heading {
+        background-color: $app-tag--green-dark-background;
+        color: $app-tag--green-dark-text;
+        outline-color: $app-tag--green-dark-border;
+      }
+    }
+
+    &.app-reading-compare-card--technical-recall {
+      outline-color: $app-tag--orange-dark-border;
+
+      .nhsuk-card__heading {
+        background-color: $app-tag--orange-dark-background;
+        color: $app-tag--orange-dark-text;
+        outline-color: $app-tag--orange-dark-border;
+      }
+    }
+
+    &.app-reading-compare-card--recall-for-assessment {
+      outline-color: $app-tag--red-dark-border;
+
+      .nhsuk-card__heading {
+        background-color: $app-tag--red-dark-background;
+        color: $app-tag--red-dark-text;
+        outline-color: $app-tag--red-dark-border;
+      }
+    }
+  }
+
   .nhsuk-error-summary__title {
     color: $app-dark-mode-text-colour;
   }
diff --git a/app/assets/sass/components/_reading.scss b/app/assets/sass/components/_reading.scss
index 24b63cb4..6d5eafc7 100644
--- a/app/assets/sass/components/_reading.scss
+++ b/app/assets/sass/components/_reading.scss
@@ -348,3 +348,94 @@
   font-weight: 400;
   opacity: 0.8;
 }
+
+// Compare opinions: card colours by read opinion
+.app-reading-compare-card.nhsuk-card--feature {
+  outline: 2px solid nhsuk-colour("grey-3");
+  outline-offset: -2px;
+
+  .nhsuk-card__heading {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+  }
+
+  &.app-reading-compare-card--normal {
+    outline-color: nhsuk-shade(nhsuk-colour("green"), 40%);
+
+    .nhsuk-card__heading {
+      background-color: nhsuk-tint(nhsuk-colour("green"), 80%);
+      color: nhsuk-shade(nhsuk-colour("green"), 40%);
+      outline-color: nhsuk-shade(nhsuk-colour("green"), 40%);
+    }
+  }
+
+  &.app-reading-compare-card--technical-recall {
+    outline-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
+
+    .nhsuk-card__heading {
+      background-color: nhsuk-tint(nhsuk-colour("warm-yellow"), 50%);
+      color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
+      outline-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
+    }
+  }
+
+  &.app-reading-compare-card--recall-for-assessment {
+    outline-color: nhsuk-shade(nhsuk-colour("red"), 50%);
+
+    .nhsuk-card__heading {
+      background-color: nhsuk-tint(nhsuk-colour("red"), 80%);
+      color: nhsuk-shade(nhsuk-colour("red"), 50%);
+      outline-color: nhsuk-shade(nhsuk-colour("red"), 50%);
+    }
+  }
+}
+
+.app-reading-compare-card__action {
+  .nhsuk-button {
+    width: 100%;
+  }
+}
+
+.app-reading-compare-card__action--top {
+  margin-bottom: nhsuk-spacing(4);
+}
+
+.app-reading-compare-card__action--bottom {
+  margin-top: nhsuk-spacing(4);
+}
+
+.app-reading-compare-grid--bottom-actions {
+  // Use direct-child selectors in this block.
+  // Nested summary rows also use .nhsuk-grid-column-one-half and must keep
+  // the default float-based grid layout so left/right breast details stay side by side.
+  display: flex;
+  flex-wrap: wrap;
+
+  > .nhsuk-grid-column-one-half {
+    float: none;
+    display: flex;
+    flex-direction: column;
+  }
+
+  > .nhsuk-grid-column-one-half > .app-reading-compare-card.nhsuk-card--feature {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+
+    .nhsuk-card__heading {
+      align-self: flex-start;
+    }
+
+    .nhsuk-card__content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+  }
+
+  .app-reading-compare-card__action--bottom {
+    margin-top: auto;
+    padding-top: nhsuk-spacing(4);
+  }
+}
diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss
index cda77378..f2d071ae 100755
--- a/app/assets/sass/main.scss
+++ b/app/assets/sass/main.scss
@@ -1,7 +1,7 @@
-$nhsuk-page-width: 1260px;
-
 // Import NHS.UK frontend library
-@forward "nhsuk-frontend/dist/nhsuk/nhsuk";
+@forward "nhsuk-frontend/dist/nhsuk/nhsuk" with (
+  $nhsuk-page-width: 960px
+);
 
 // Components that are not in the NHS.UK frontend library
 
@@ -35,8 +35,6 @@ $nhsuk-page-width: 1260px;
 @forward "typography";
 @forward "utils";
 
-$nhsuk-page-width: 1260px;
-
 ///////////////////////////////////////////
 // Add your custom CSS/Sass styles below...
 ///////////////////////////////////////////
diff --git a/app/views/_includes/summary-lists/read-summary.njk b/app/views/_includes/summary-lists/read-summary.njk
index 59683897..94086bf2 100644
--- a/app/views/_includes/summary-lists/read-summary.njk
+++ b/app/views/_includes/summary-lists/read-summary.njk
@@ -13,6 +13,7 @@
 {% set read = read if read is defined else data.imageReadingTemp %}
 {% set allowEdits = allowEdits if allowEdits is defined else false %}
 {% set hideEmptyRows = hideEmptyRows if hideEmptyRows is defined else false %}
+{% set hideOpinionRow = hideOpinionRow if hideOpinionRow is defined else false %}
 {# Support legacy opinionOnly parameter #}
 {% if opinionOnly is defined and opinionOnly %}
   {% set hideEmptyRows = true %}
@@ -77,24 +78,26 @@
 {# Build rows based on result type #}
 {% set rows = [] %}
 
-{# Opinion row - always shown #}
-{% set rows = rows | push({
-  key: {
-    text: "Opinion"
-  },
-  value: {
-    html: read.opinion | toTag
-  },
-  actions: {
-    items: [
-      {
-        href: changeOpinionUrl,
-        text: "Change",
-        visuallyHiddenText: "opinion"
-      }
-    ]
-  } if allowEdits and changeOpinionUrl
-}) %}
+{# Opinion row #}
+{% if not hideOpinionRow %}
+  {% set rows = rows | push({
+    key: {
+      text: "Opinion"
+    },
+    value: {
+      html: read.opinion | toTag
+    },
+    actions: {
+      items: [
+        {
+          href: changeOpinionUrl,
+          text: "Change",
+          visuallyHiddenText: "opinion"
+        }
+      ]
+    } if allowEdits and changeOpinionUrl
+  }) %}
+{% endif %}
 
 {# Determine if detail rows have data #}
 {% set hasNormalDetails = read.opinion == 'normal' and read.normalDetails %}
diff --git a/app/views/reading/workflow/compare.html b/app/views/reading/workflow/compare.html
index eff745a3..ec1a3fc5 100644
--- a/app/views/reading/workflow/compare.html
+++ b/app/views/reading/workflow/compare.html
@@ -4,9 +4,13 @@
 {% extends 'layout-reading.html' %}
 
 {% set pageHeading = "Compare opinions" %}
+{% set bodyClasses = (bodyClasses or "") + " app-page-width--wide" %}
 
 {# Layout option: 'side-by-side' or 'stacked' #}
-{% set cardLayout = 'stacked' %}
+{% set cardLayout = 'side-by-side' %}
+
+{# Side-by-side card action position: 'top' or 'bottom' #}
+{% set sideBySideCardActionPosition = "bottom" %}
 
 {% set back = {
   href: "./opinion",
@@ -38,6 +42,15 @@
   {% set firstOpinionLabel = opinionLabels[firstOpinion] or firstOpinion %}
   {% set secondOpinionLabel = opinionLabels[secondOpinion] or secondOpinion %}
 
+  {% set opinionCardClasses = {
+    "normal": "app-reading-compare-card--normal",
+    "technical_recall": "app-reading-compare-card--technical-recall",
+    "recall_for_assessment": "app-reading-compare-card--recall-for-assessment"
+  } %}
+
+  {% set firstOpinionCardClass = opinionCardClasses[firstOpinion] or "" %}
+  {% set secondOpinionCardClass = opinionCardClasses[secondOpinion] or "" %}
+
   {# 
     Determine if opinions need/have details:
     - Normal: only needs details if wantsNormalDetails flag is set
@@ -78,6 +91,7 @@ <h1 class="nhsuk-heading-l">{{ pageHeading }}</h1>
   {% set firstReadSummaryHtml %}
     {% set read = firstRead %}
     {% set allowEdits = false %}
+    {% set hideOpinionRow = true %}
     {% include "_includes/summary-lists/read-summary.njk" %}
   {% endset %}
 
@@ -87,26 +101,112 @@ <h1 class="nhsuk-heading-l">{{ pageHeading }}</h1>
     {% set read = data.imageReadingTemp %}
     {% set allowEdits = false %}
     {% set hideEmptyRows = true %}
+    {% set hideOpinionRow = true %}
     {% include "_includes/summary-lists/read-summary.njk" %}
   {% endset %}
 
+  {# Build decision labels/hints once for cards or radios #}
+  {% set keepLabelHtml %}
+    Keep my opinion {{ secondOpinion | toTag }}
+    {%- if secondOpinionNeedsDetails and not secondHasDetails %} and provide details
+    {%- elseif secondHasDetails %} and my details
+    {%- endif %}
+  {% endset %}
+
+  {% set keepHint %}
+    {% if comparisonType == "discordant" %}
+      This case will go to arbitration
+    {% endif %}
+  {% endset %}
+
+  {% set adoptLabelHtml %}
+    {% if comparisonType == "discordant" %}
+      Change my opinion to {{ firstOpinion | toTag }}
+      {%- if firstOpinionHasDetails %} and use their details{%- endif %}
+    {% else %}
+      Use the first reader's details
+    {% endif %}
+  {% endset %}
+
+  {% set adoptHint %}
+    {% if comparisonType == "discordant" and not firstOpinionHasDetails %}
+      You can add details when reviewing
+    {% endif %}
+  {% endset %}
+
+  {% set keepActionHtml %}
+    <div class="app-reading-compare-card__action app-reading-compare-card__action--{{ sideBySideCardActionPosition }}">
+      <form action="./compare-answer" method="post" class="app-reading-compare-card__action-form">
+        <input type="hidden" name="compareDecision" value="keep">
+        {{ button({
+          text: "Keep your opinion",
+          classes: "nhsuk-button--secondary nhsuk-u-margin-bottom-0"
+        }) }}
+      </form>
+      {# <p class="nhsuk-body nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-0">{{ keepLabelHtml | safe }}</p>
+      {% if keepHint | trim %}
+        <p class="nhsuk-hint nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-0">{{ keepHint }}</p>
+      {% endif %} #}
+    </div>
+  {% endset %}
+
+  {% set adoptActionHtml %}
+    <div class="app-reading-compare-card__action app-reading-compare-card__action--{{ sideBySideCardActionPosition }}">
+      <form action="./compare-answer" method="post" class="app-reading-compare-card__action-form">
+        <input type="hidden" name="compareDecision" value="adopt">
+        {{ button({
+          text: "Use their details" if comparisonType == "agreeing" else "Change to this opinion",
+          classes: "nhsuk-button--secondary nhsuk-u-margin-bottom-0"
+        }) }}
+      </form>
+      {# <p class="nhsuk-body nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-0">{{ adoptLabelHtml | safe }}</p> #}
+      {# {% if adoptHint | trim %}
+        <p class="nhsuk-hint nhsuk-u-margin-top-2 nhsuk-u-margin-bottom-0">{{ adoptHint }}</p>
+      {% endif %} #}
+    </div>
+  {% endset %}
+
+  {% set firstReadCardContentHtml %}
+    {% if sideBySideCardActionPosition == "top" %}
+      {{ adoptActionHtml | safe }}
+    {% endif %}
+    {{ firstReadSummaryHtml | safe }}
+    {% if sideBySideCardActionPosition == "bottom" %}
+      {{ adoptActionHtml | safe }}
+    {% endif %}
+  {% endset %}
+
+  {% set secondReadCardContentHtml %}
+    {% if sideBySideCardActionPosition == "top" %}
+      {{ keepActionHtml | safe }}
+    {% endif %}
+    {{ secondReadSummaryHtml | safe }}
+    {% if sideBySideCardActionPosition == "bottom" %}
+      {{ keepActionHtml | safe }}
+    {% endif %}
+  {% endset %}
+
   {% if cardLayout == 'side-by-side' %}
     {# Side by side layout #}
-    <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-row app-reading-compare-grid app-reading-compare-grid--{{ sideBySideCardActionPosition }}-actions">
       <div class="nhsuk-grid-column-one-half">
+        <h2 class="nhsuk-u-margin-bottom-0">First read</h2>
         {{ card({
-          heading: "First read",
+          heading: firstOpinionLabel,
           headingLevel: "2",
           feature: true,
-          descriptionHtml: firstReadSummaryHtml
+          classes: "app-reading-compare-card " + firstOpinionCardClass,
+          descriptionHtml: firstReadCardContentHtml
         }) }}
       </div>
       <div class="nhsuk-grid-column-one-half">
+        <h2 class="nhsuk-u-margin-bottom-0">Your read</h2>
         {{ card({
-          heading: "Your read",
+          heading: secondOpinionLabel,
           headingLevel: "2",
           feature: true,
-          descriptionHtml: secondReadSummaryHtml
+          classes: "app-reading-compare-card " + secondOpinionCardClass,
+          descriptionHtml: secondReadCardContentHtml
         }) }}
       </div>
     </div>
@@ -118,6 +218,7 @@ <h1 class="nhsuk-heading-l">{{ pageHeading }}</h1>
           heading: "First read",
           headingLevel: "2",
           feature: true,
+          classes: "app-reading-compare-card " + firstOpinionCardClass,
           descriptionHtml: firstReadSummaryHtml
         }) }}
 
@@ -125,6 +226,7 @@ <h1 class="nhsuk-heading-l">{{ pageHeading }}</h1>
           heading: "Your read",
           headingLevel: "2",
           feature: true,
+          classes: "app-reading-compare-card " + secondOpinionCardClass,
           descriptionHtml: secondReadSummaryHtml
         }) }}
       </div>
@@ -134,30 +236,13 @@ <h1 class="nhsuk-heading-l">{{ pageHeading }}</h1>
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-two-thirds">
 
+      {% if cardLayout == 'stacked' %}
+
       <form action="./compare-answer" method="POST">
 
         {# Build radio options based on comparison type and detail state #}
         {% set radioItems = [] %}
 
-        {# 
-          KEEP option - keep your opinion
-          Label varies based on:
-          - Whether your opinion needs details
-          - Whether you already have details
-        #}
-        {% set keepLabelHtml %}
-          Keep my opinion {{ secondOpinion | toTag }}
-          {%- if secondOpinionNeedsDetails and not secondHasDetails %} and provide details
-          {%- elseif secondHasDetails %} and my details
-          {%- endif %}
-        {% endset %}
-
-        {% set keepHint %}
-          {% if comparisonType == "discordant" %}
-            This case will go to arbitration
-          {% endif %}
-        {% endset %}
-
         {% set radioItems = radioItems | push({
           value: "keep",
           html: keepLabelHtml,
@@ -166,28 +251,6 @@ <h1 class="nhsuk-heading-l">{{ pageHeading }}</h1>
           } if keepHint | trim
         }) %}
 
-        {# 
-          ADOPT option - change to match first reader
-          Label varies based on:
-          - Discordant: "Change my opinion to [tag]" + mention details if first reader has them
-          - Agreeing: "Use the first reader's details" (opinion is already the same)
-        #}
-        {% set adoptLabelHtml %}
-          {% if comparisonType == "discordant" %}
-            Change my opinion to {{ firstOpinion | toTag }}
-            {%- if firstOpinionHasDetails %} and use their details{%- endif %}
-          {% else %}
-            Use the first reader's details
-          {% endif %}
-        {% endset %}
-
-        {% set adoptHint %}
-          {# Hint only needed if first reader doesn't have details we're copying #}
-          {% if comparisonType == "discordant" and not firstOpinionHasDetails %}
-            You can add details when reviewing
-          {% endif %}
-        {% endset %}
-
         {% set radioItems = radioItems | push({
           value: "adopt",
           html: adoptLabelHtml,
@@ -214,6 +277,8 @@ <h1 class="nhsuk-heading-l">{{ pageHeading }}</h1>
 
       </form>
 
+      {% endif %}
+
     </div>
   </div>