diff --git a/report-viewer/src/components/CodePanel.vue b/report-viewer/src/components/CodePanel.vue
index c057ae5a6..6dacf9852 100644
--- a/report-viewer/src/components/CodePanel.vue
+++ b/report-viewer/src/components/CodePanel.vue
@@ -28,7 +28,10 @@
             <td
               class="w-full"
               :style="{
-                background: line.match !== null ? line.match.color : 'hsla(0, 0%, 0%, 0)'
+                background:
+                  line.match !== null
+                    ? getMatchColor(line.match.colorIndex as number, 0.3)
+                    : 'hsla(0, 0%, 0%, 0)'
               }"
             >
               <pre v-html="line.line" class="code-font !bg-transparent" ref="lineRefs"></pre>
@@ -52,6 +55,7 @@ import type { Match } from '@/model/Match'
 import type { SubmissionFile } from '@/stores/state'
 import { highlight } from '@/utils/CodeHighlighter'
 import type { HighlightLanguage } from '@/model/Language'
+import { getMatchColor } from '@/utils/ColorUtils'
 
 const props = defineProps({
   /**
diff --git a/report-viewer/src/components/MatchList.vue b/report-viewer/src/components/MatchList.vue
index aeb218112..3a1e5f66d 100644
--- a/report-viewer/src/components/MatchList.vue
+++ b/report-viewer/src/components/MatchList.vue
@@ -9,7 +9,7 @@
     <div class="flex w-full flex-row space-x-1 overflow-x-auto">
       <Interactable
         class="my-2 flex h-6 items-center whitespace-nowrap !rounded-2xl !bg-opacity-50 text-center"
-        :style="{ background: match.color }"
+        :style="{ background: getMatchColor(match.colorIndex as number, 0.3) }"
         v-for="[index, match] in matches?.entries()"
         v-bind:key="index"
         @click="$emit('matchSelected', match)"
@@ -23,6 +23,7 @@
 <script setup lang="ts">
 import type { Match } from '@/model/Match'
 import Interactable from './InteractableComponent.vue'
+import { getMatchColor } from '@/utils/ColorUtils'
 
 defineProps({
   /**
diff --git a/report-viewer/src/model/factories/ComparisonFactory.ts b/report-viewer/src/model/factories/ComparisonFactory.ts
index 5b4f4dffe..e6f3bd1cd 100644
--- a/report-viewer/src/model/factories/ComparisonFactory.ts
+++ b/report-viewer/src/model/factories/ComparisonFactory.ts
@@ -119,7 +119,7 @@ export class ComparisonFactory extends BaseFactory {
     const matchesSecond = Array.from(matches)
       .sort((a, b) => a.startInSecond - b.startInSecond)
       .sort((a, b) => (a.secondFile > b.secondFile ? 1 : -1))
-    const sortedSize = Array.from(matches).sort((a, b) => a.tokens - b.tokens)
+    const sortedSize = Array.from(matches).sort((a, b) => b.tokens - a.tokens)
 
     function canColor(matchList: Match[], index: number) {
       return (
diff --git a/report-viewer/src/utils/ColorUtils.ts b/report-viewer/src/utils/ColorUtils.ts
index 770730f66..53184c9f9 100644
--- a/report-viewer/src/utils/ColorUtils.ts
+++ b/report-viewer/src/utils/ColorUtils.ts
@@ -59,7 +59,15 @@ function generateColorsForInterval(
   return colors
 }
 
-const matchColors: { red: number; green: number; blue: number }[] = []
+const matchColors: { red: number; green: number; blue: number }[] = [
+  { red: 0, green: 9, blue: 255 },
+  { red: 254, green: 255, blue: 0 },
+  { red: 0, green: 255, blue: 254 },
+  { red: 255, green: 0, blue: 243 },
+  { red: 0, green: 180, blue: 180 },
+  { red: 255, green: 118, blue: 0 },
+  { red: 0, green: 255, blue: 160 }
+]
 
 function getMatchColorCount() {
   return matchColors.length