diff --git a/package-lock.json b/package-lock.json
index da98082..438c519 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1033,9 +1033,9 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.24",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.24.tgz",
-      "integrity": "sha512-+VaWXDa6+l6MhflBvVXjIEAzb59nQ2JUK3bwRp2zRpPtU+8TFRy9Gg/5oIcNlkEL5PGlBFGfemUVvIgLnTzq7Q==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2257,9 +2257,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.689",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.689.tgz",
-      "integrity": "sha512-GatzRKnGPS1go29ep25reM94xxd1Wj8ritU0yRhCJ/tr1Bg8gKnm6R9O/yPOhGQBoLMZ9ezfrpghNaTw97C/PQ==",
+      "version": "1.4.690",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.690.tgz",
+      "integrity": "sha512-+2OAGjUx68xElQhydpcbqH50hE8Vs2K6TkAeLhICYfndb67CVH0UsZaijmRUE3rHlIxU1u0jxwhgVe6fK3YANA==",
       "dev": true
     },
     "node_modules/es-abstract": {
diff --git a/src/App.tsx b/src/App.tsx
index ab47398..c502eb4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -101,7 +101,7 @@ export default function App() {
 
   return (
     <>
-      <Buttons data={data} setData={setData} sortBy={sortBy} />
+      <Buttons data={data} setData={setData} sortBy={sortBy} colors={colors} />
       {data.benches.length < 1 ? (
         <Group
           align="start"
@@ -123,7 +123,6 @@ export default function App() {
         <>
           <DataDisplay
             data={data}
-            colors={colors}
             chartTypes={chartTypes}
             chartsPerRow={chartsPerRow}
           />
diff --git a/src/components/Buttons/Buttons.tsx b/src/components/Buttons/Buttons.tsx
index 7619265..b7e596d 100644
--- a/src/components/Buttons/Buttons.tsx
+++ b/src/components/Buttons/Buttons.tsx
@@ -6,7 +6,7 @@ import React from "react";
 import type { Data } from "../types";
 import html2canvas from "html2canvas";
 import { saveAs } from "file-saver";
-import type { sortOptions } from "../static";
+import type { initialColors, sortOptions } from "../static";
 
 function exportPage(download: boolean) {
   void html2canvas(document.body, {
@@ -40,10 +40,12 @@ export default function Buttons({
   data,
   setData,
   sortBy,
+  colors,
 }: {
   data: Data;
   setData: React.Dispatch<React.SetStateAction<Data>>;
   sortBy: (typeof sortOptions)[number];
+  colors: typeof initialColors;
 }) {
   const resetRef = React.useRef<() => void>(null);
 
@@ -54,7 +56,7 @@ export default function Buttons({
         multiple
         accept=".csv,.json"
         onChange={(files) => {
-          void handleUpload(files, data, setData, sortBy, resetRef);
+          void handleUpload(files, data, setData, sortBy, resetRef, colors);
         }}
       >
         {(props) => (
diff --git a/src/components/DataDisplay/DataDisplay.tsx b/src/components/DataDisplay/DataDisplay.tsx
index 3bbe887..b9beffd 100644
--- a/src/components/DataDisplay/DataDisplay.tsx
+++ b/src/components/DataDisplay/DataDisplay.tsx
@@ -1,10 +1,5 @@
 import { Group, SimpleGrid, Stack, Table, Tooltip } from "@mantine/core";
-import {
-  percentileList,
-  barMetrics,
-  type initialChartTypes,
-  type initialColors,
-} from "../static";
+import { percentileList, barMetrics, type initialChartTypes } from "../static";
 import type { Data } from "../types";
 import { IconAlertTriangleFilled } from "@tabler/icons-react";
 import s from "./DataDisplay.module.css";
@@ -70,7 +65,7 @@ function PresentModes({ presentModes }: { presentModes: string | undefined }) {
   return <Table.Td>{presentModes}</Table.Td>;
 }
 
-function Info({ data, colors }: { data: Data; colors: typeof initialColors }) {
+function Info({ data }: { data: Data }) {
   return (
     <Table>
       <Table.Thead>
@@ -87,11 +82,11 @@ function Info({ data, colors }: { data: Data; colors: typeof initialColors }) {
         </Table.Tr>
       </Table.Thead>
       <Table.Tbody>
-        {data.benches.map((bench, index) => (
+        {data.benches.map((bench) => (
           <Table.Tr
             key={bench.name + bench.uploaded}
             className={s.text}
-            style={{ backgroundColor: colors[index] }}
+            style={{ backgroundColor: bench.color }}
           >
             <Table.Td>{bench.name}</Table.Td>
             <Table.Td>{bench.applications}</Table.Td>
@@ -118,24 +113,18 @@ function Info({ data, colors }: { data: Data; colors: typeof initialColors }) {
   );
 }
 
-function LineMs({
-  data,
-  colors,
-}: {
-  data: Data;
-  colors: typeof initialColors;
-}) {
+function LineMs({ data }: { data: Data }) {
   return (
     <div>
       <Scatter
         datasetIdKey="datasetIdKey"
         data={{
-          datasets: data.benches.map((bench, index) => ({
+          datasets: data.benches.map((bench) => ({
             datasetIdKey: bench.name + bench.uploaded,
             label: bench.name,
             data: bench.ms.chartFormat,
-            backgroundColor: colors[index],
-            borderColor: colors[index],
+            backgroundColor: bench.color,
+            borderColor: bench.color,
           })),
         }}
         options={{
@@ -195,24 +184,18 @@ function LineMs({
   );
 }
 
-function LineFps({
-  data,
-  colors,
-}: {
-  data: Data;
-  colors: typeof initialColors;
-}) {
+function LineFps({ data }: { data: Data }) {
   return (
     <div>
       <Scatter
         datasetIdKey="datasetIdKey"
         data={{
-          datasets: data.benches.map((bench, index) => ({
+          datasets: data.benches.map((bench) => ({
             datasetIdKey: bench.name + bench.uploaded,
             label: bench.name,
             data: bench.fps.chartFormat,
-            backgroundColor: colors[index],
-            borderColor: colors[index],
+            backgroundColor: bench.color,
+            borderColor: bench.color,
           })),
         }}
         options={{
@@ -272,24 +255,18 @@ function LineFps({
   );
 }
 
-function ScatterMs({
-  data,
-  colors,
-}: {
-  data: Data;
-  colors: typeof initialColors;
-}) {
+function ScatterMs({ data }: { data: Data }) {
   return (
     <div>
       <Scatter
         datasetIdKey="datasetIdKey"
         data={{
-          datasets: data.benches.map((bench, index) => ({
+          datasets: data.benches.map((bench) => ({
             datasetIdKey: bench.name + bench.uploaded,
             label: bench.name,
             data: bench.ms.chartFormat,
-            backgroundColor: colors[index],
-            borderColor: colors[index],
+            backgroundColor: bench.color,
+            borderColor: bench.color,
           })),
         }}
         options={{
@@ -343,24 +320,18 @@ function ScatterMs({
   );
 }
 
-function ScatterFps({
-  data,
-  colors,
-}: {
-  data: Data;
-  colors: typeof initialColors;
-}) {
+function ScatterFps({ data }: { data: Data }) {
   return (
     <div>
       <Scatter
         datasetIdKey="datasetIdKey"
         data={{
-          datasets: data.benches.map((bench, index) => ({
+          datasets: data.benches.map((bench) => ({
             datasetIdKey: bench.name + bench.uploaded,
             label: bench.name,
             data: bench.fps.chartFormat,
-            backgroundColor: colors[index],
-            borderColor: colors[index],
+            backgroundColor: bench.color,
+            borderColor: bench.color,
           })),
         }}
         options={{
@@ -414,27 +385,21 @@ function ScatterFps({
   );
 }
 
-function PercentilesFps({
-  data,
-  colors,
-}: {
-  data: Data;
-  colors: typeof initialColors;
-}) {
+function PercentilesFps({ data }: { data: Data }) {
   return (
     <div>
       <Scatter
         datasetIdKey="datasetIdKey"
         data={{
-          datasets: data.benches.map((bench, index) => ({
+          datasets: data.benches.map((bench) => ({
             datasetIdKey: bench.name + bench.uploaded,
             label: bench.name,
             data: percentileList.map((percentile) => ({
               x: percentile,
               y: bench.fps.metrics.percentiles[percentile],
             })),
-            backgroundColor: colors[index],
-            borderColor: colors[index],
+            backgroundColor: bench.color,
+            borderColor: bench.color,
           })),
         }}
         options={{
@@ -489,27 +454,21 @@ function PercentilesFps({
   );
 }
 
-function LowsFps({
-  data,
-  colors,
-}: {
-  data: Data;
-  colors: typeof initialColors;
-}) {
+function LowsFps({ data }: { data: Data }) {
   return (
     <div>
       <Scatter
         datasetIdKey="datasetIdKey"
         data={{
-          datasets: data.benches.map((bench, index) => ({
+          datasets: data.benches.map((bench) => ({
             datasetIdKey: bench.name + bench.uploaded,
             label: bench.name,
             data: percentileList.map((percentile) => ({
               x: percentile,
               y: bench.fps.metrics.lows[percentile],
             })),
-            backgroundColor: colors[index],
-            borderColor: colors[index],
+            backgroundColor: bench.color,
+            borderColor: bench.color,
           })),
         }}
         options={{
@@ -564,13 +523,7 @@ function LowsFps({
   );
 }
 
-function BoxFps({
-  data,
-  colors,
-}: {
-  data: Data;
-  colors: typeof initialColors;
-}) {
+function BoxFps({ data }: { data: Data }) {
   return (
     <div>
       <Chart
@@ -590,7 +543,7 @@ function BoxFps({
               "Max",
             ],
           ],
-          datasets: data.benches.map((bench, index) => ({
+          datasets: data.benches.map((bench) => ({
             datasetIdKey: bench.name + bench.uploaded,
             label: bench.name,
             data: [
@@ -608,12 +561,12 @@ function BoxFps({
                 ],
               },
             ],
-            backgroundColor: colors[index],
-            borderColor: colors[index],
+            backgroundColor: bench.color,
+            borderColor: bench.color,
             borderWidth: 3,
             medianColor: "rgb(150,150,150)",
-            outlierBackgroundColor: colors[index],
-            outlierBorderColor: colors[index],
+            outlierBackgroundColor: bench.color,
+            outlierBorderColor: bench.color,
             outlierRadius: 4,
           })),
         }}
@@ -638,13 +591,7 @@ function BoxFps({
   );
 }
 
-function BarFps({
-  data,
-  colors,
-}: {
-  data: Data;
-  colors: typeof initialColors;
-}) {
+function BarFps({ data }: { data: Data }) {
   return (
     <div style={{ minHeight: `${16 + data.benches.length * 35}vh` }}>
       <Bar
@@ -694,7 +641,7 @@ function BarFps({
                 display: false,
               },
               ticks: {
-                color: colors,
+                color: data.benches.map((bench) => bench.color),
                 textStrokeColor: "white",
                 textStrokeWidth: 3,
                 font: { weight: 700 },
@@ -720,27 +667,25 @@ function BarFps({
 
 export default function DataDisplay({
   data,
-  colors,
   chartTypes,
   chartsPerRow,
 }: {
   data: Data;
-  colors: typeof initialColors;
   chartTypes: typeof initialChartTypes;
   chartsPerRow: number;
 }) {
   return (
     <Stack>
-      {chartTypes[0].show && <Info data={data} colors={colors} />}
+      {chartTypes[0].show && <Info data={data} />}
       <SimpleGrid cols={chartsPerRow}>
-        {chartTypes[1].show && <LineMs data={data} colors={colors} />}
-        {chartTypes[2].show && <LineFps data={data} colors={colors} />}
-        {chartTypes[3].show && <ScatterMs data={data} colors={colors} />}
-        {chartTypes[4].show && <ScatterFps data={data} colors={colors} />}
-        {chartTypes[5].show && <PercentilesFps data={data} colors={colors} />}
-        {chartTypes[6].show && <LowsFps data={data} colors={colors} />}
-        {chartTypes[7].show && <BoxFps data={data} colors={colors} />}
-        {chartTypes[8].show && <BarFps data={data} colors={colors} />}
+        {chartTypes[1].show && <LineMs data={data} />}
+        {chartTypes[2].show && <LineFps data={data} />}
+        {chartTypes[3].show && <ScatterMs data={data} />}
+        {chartTypes[4].show && <ScatterFps data={data} />}
+        {chartTypes[5].show && <PercentilesFps data={data} />}
+        {chartTypes[6].show && <LowsFps data={data} />}
+        {chartTypes[7].show && <BoxFps data={data} />}
+        {chartTypes[8].show && <BarFps data={data} />}
       </SimpleGrid>
     </Stack>
   );
diff --git a/src/components/scripts.ts b/src/components/scripts.ts
index 58177e5..522ba40 100644
--- a/src/components/scripts.ts
+++ b/src/components/scripts.ts
@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { Bench, Data, Ms, Fps, Cfx } from "./types";
-import { percentileList, type sortOptions } from "./static";
+import { percentileList, type sortOptions, type initialColors } from "./static";
+
+let benchIndex = 0;
 
 function calculateMetrics(
   ms: Pick<Ms, "unsorted" | "chartFormat">,
@@ -62,7 +64,11 @@ function calculateMetrics(
   };
 }
 
-function processCfxJson(name: string, bench: Cfx): Bench {
+function processCfxJson(
+  name: string,
+  bench: Cfx,
+  colors: typeof initialColors
+): Bench {
   let unsortedMs: number[] = [];
   const chartFormatMs: { x: number; y: number }[] = [];
   const unsortedFps: number[] = [];
@@ -107,6 +113,7 @@ function processCfxJson(name: string, bench: Cfx): Bench {
   return {
     name,
     uploaded: Date.now().toString(),
+    color: colors[benchIndex++],
     duration,
     frames: unsortedMs.length,
     ...(dropped.length !== 0 && {
@@ -149,7 +156,8 @@ function processCsv(
   lines: string[],
   lowerCaseSplitRow: string[],
   indicator: "msbetweenpresents" | "frametime" | "fps",
-  transformFunc: (arg0: number) => number
+  transformFunc: (arg0: number) => number,
+  colors: typeof initialColors
 ): Bench {
   const unsortedMs: number[] = [];
   const chartFormatMs: { x: number; y: number }[] = [];
@@ -214,6 +222,7 @@ function processCsv(
   return {
     name,
     uploaded: Date.now().toString(),
+    color: colors[benchIndex++],
     duration,
     frames: unsortedMs.length,
     ...(droppedIndex !== -1 && { dropped }),
@@ -238,7 +247,8 @@ export async function handleUpload(
   data: Data,
   setData: React.Dispatch<React.SetStateAction<Data>>,
   sortBy: (typeof sortOptions)[number],
-  resetRef: React.RefObject<() => void>
+  resetRef: React.RefObject<() => void>,
+  colors: typeof initialColors
 ) {
   const newBenches: Bench[] = [];
 
@@ -262,7 +272,8 @@ export async function handleUpload(
               lines.slice(index + 1),
               lowerCaseSplitRow,
               "msbetweenpresents",
-              (value) => value
+              (value) => value,
+              colors
             )
           );
 
@@ -274,7 +285,8 @@ export async function handleUpload(
               lines.slice(index + 3),
               lines[index + 2].toLowerCase().trim().split(","),
               "frametime",
-              (value) => value
+              (value) => value,
+              colors
             )
           );
 
@@ -286,7 +298,8 @@ export async function handleUpload(
               lines.slice(index + 1),
               lowerCaseSplitRow,
               "fps",
-              (value) => 1000 / value
+              (value) => 1000 / value,
+              colors
             )
           );
 
@@ -295,7 +308,11 @@ export async function handleUpload(
       }
     } else if (name.endsWith(".json")) {
       newBenches.push(
-        processCfxJson(name.slice(0, -5), JSON.parse(await file.text()) as Cfx)
+        processCfxJson(
+          name.slice(0, -5),
+          JSON.parse(await file.text()) as Cfx,
+          colors
+        )
       );
     }
   }
diff --git a/src/components/types.ts b/src/components/types.ts
index 0ec1e46..6219253 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -1,6 +1,7 @@
 export interface Bench {
   name: string;
   uploaded: string;
+  color: string;
   duration: number;
   frames: number;
   dropped?: number;