diff --git a/packages/app/schema/nl/__named_difference.json b/packages/app/schema/nl/__named_difference.json
index 696945b5de..ea6c31c5fb 100644
--- a/packages/app/schema/nl/__named_difference.json
+++ b/packages/app/schema/nl/__named_difference.json
@@ -13,41 +13,31 @@
   "required": ["variants__percentage"],
   "additionalProperties": false,
   "definitions": {
-    "named_diff_integer": {
-      "title": "named_difference_integer",
-      "type": "object",
-      "properties": {
-        "name": {
-          "type": "string"
-        },
-        "old_value": {
-          "type": "integer"
-        },
-        "difference": {
-          "type": "integer"
-        },
-        "old_date_unix": {
-          "type": "integer"
-        },
-        "new_date_unix": {
-          "type": "integer"
-        }
-      },
-      "required": [
-        "name",
-        "old_value",
-        "difference",
-        "old_date_unix",
-        "new_date_unix"
-      ],
-      "additionalProperties": false
-    },
     "named_diff_decimal": {
       "title": "named_difference_decimal",
       "type": "object",
       "properties": {
-        "name": {
-          "type": "string"
+        "variant_code": {
+          "type": "string",
+          "enum": [
+            "B_1_1_529",
+            "BA_1",
+            "BA_2",
+            "BA_4",
+            "BA_5",
+            "BA_2+S:L452X",
+            "BA_2_12_1",
+            "BA_3",
+            "B_1_617_2",
+            "B_1_351",
+            "P_1",
+            "B_1_1_7",
+            "B_1_621",
+            "C_37",
+            "BA_2_75",
+            "other_table",
+            "other_graph"
+          ]
         },
         "old_value": {
           "type": "number"
@@ -63,7 +53,7 @@
         }
       },
       "required": [
-        "name",
+        "variant_code",
         "old_value",
         "difference",
         "old_date_unix",
diff --git a/packages/app/schema/nl/variants.json b/packages/app/schema/nl/variants.json
index 24e3dea273..2a9df6d395 100644
--- a/packages/app/schema/nl/variants.json
+++ b/packages/app/schema/nl/variants.json
@@ -17,10 +17,29 @@
       "type": "object",
       "title": "nl_variants_variant",
       "additionalProperties": false,
-      "required": ["name", "values", "last_value"],
+      "required": ["variant_code", "values", "last_value"],
       "properties": {
-        "name": {
-          "type": "string"
+        "variant_code": {
+          "type": "string",
+          "enum": [
+            "B_1_1_529",
+            "BA_1",
+            "BA_2",
+            "BA_4",
+            "BA_5",
+            "BA_2+S:L452X",
+            "BA_2_12_1",
+            "BA_3",
+            "B_1_617_2",
+            "B_1_351",
+            "P_1",
+            "B_1_1_7",
+            "B_1_621",
+            "C_37",
+            "BA_2_75",
+            "other_table",
+            "other_graph"
+          ]
         },
         "values": {
           "type": "array",
@@ -38,6 +57,7 @@
       "title": "nl_variants_variant_value",
       "additionalProperties": false,
       "required": [
+        "order",
         "occurrence",
         "percentage",
         "is_variant_of_concern",
@@ -45,9 +65,13 @@
         "sample_size",
         "date_start_unix",
         "date_end_unix",
+        "date_of_report_unix",
         "date_of_insertion_unix"
       ],
       "properties": {
+        "order": {
+          "type": "integer"
+        },
         "occurrence": {
           "type": "integer"
         },
@@ -71,6 +95,9 @@
         },
         "date_of_insertion_unix": {
           "type": "integer"
+        },
+        "date_of_report_unix": {
+          "type": "integer"
         }
       }
     }
diff --git a/packages/app/src/domain/variants/static-props/get-variant-chart-data.ts b/packages/app/src/domain/variants/static-props/get-variant-chart-data.ts
index d12e394e12..e8e13154ec 100644
--- a/packages/app/src/domain/variants/static-props/get-variant-chart-data.ts
+++ b/packages/app/src/domain/variants/static-props/get-variant-chart-data.ts
@@ -2,20 +2,20 @@ import { NlVariants } from '@corona-dashboard/common';
 import { isDefined } from 'ts-is-present';
 import { SiteText } from '~/locale';
 
-type VariantName = keyof SiteText['common']['variants'];
+export type VariantCode = keyof SiteText['common']['variant_codes'];
 
 export type VariantChartValue = {
   date_start_unix: number;
   date_end_unix: number;
   is_reliable: boolean;
 } & Partial<{
-  [key in `${VariantName}_percentage`]: number;
+  [key in `${VariantCode}_percentage`]: number;
 }>;
 
 const EMPTY_VALUES = {
   variantChart: null,
   dates: {
-    date_of_insertion_unix: 0,
+    date_of_report_unix: 0,
     date_start_unix: 0,
     date_end_unix: 0,
   },
@@ -26,22 +26,15 @@ export function getVariantChartData(variants: NlVariants | undefined) {
     return EMPTY_VALUES;
   }
 
-  const firstOccurences = variants.values.sort().reverse().reduce<Record<string, number>>(
-    (acc, x) =>
-      Object.assign(acc, {
-        [x.name]: x.values.find((value) => value.percentage > 0)
-          ?.date_start_unix,
-      }),
-    {}
-  );
-
   const variantsOfConcern = variants.values
     .filter(
-      (x) =>
-        x.last_value.is_variant_of_concern ||
-        x.last_value.has_historical_significance
+      (variant) =>
+        variant.last_value.is_variant_of_concern ||
+        variant.last_value.has_historical_significance
     )
-    .sort((a, b) => firstOccurences[b.name] - firstOccurences[a.name]);
+    .sort((a, b) => b.last_value.order - a.last_value.order);
+
+  
 
   const firstVariant = variantsOfConcern.shift();
 
@@ -54,12 +47,12 @@ export function getVariantChartData(variants: NlVariants | undefined) {
       is_reliable: true,
       date_start_unix: value.date_start_unix,
       date_end_unix: value.date_end_unix,
-      [`${firstVariant.name}_percentage`]: value.percentage,
+      [`${firstVariant.variant_code}_percentage`]: value.percentage,
     };
 
     variantsOfConcern.forEach((variant) => {
       (item as unknown as Record<string, number>)[
-        `${variant.name}_percentage`
+        `${variant.variant_code}_percentage`
       ] = variant.values[index].percentage;
     });
 
@@ -69,7 +62,7 @@ export function getVariantChartData(variants: NlVariants | undefined) {
   return {
     variantChart: values,
     dates: {
-      date_of_insertion_unix: firstVariant.last_value.date_of_insertion_unix,
+      date_of_report_unix: firstVariant.last_value.date_of_report_unix,
       date_start_unix: firstVariant.last_value.date_start_unix,
       date_end_unix: firstVariant.last_value.date_end_unix,
     },
diff --git a/packages/app/src/domain/variants/static-props/get-variant-order-colors.ts b/packages/app/src/domain/variants/static-props/get-variant-order-colors.ts
new file mode 100644
index 0000000000..2fc1fd505b
--- /dev/null
+++ b/packages/app/src/domain/variants/static-props/get-variant-order-colors.ts
@@ -0,0 +1,40 @@
+import { NlVariants, colors } from '@corona-dashboard/common';
+import { isDefined } from 'ts-is-present';
+import { VariantCode } from './'
+
+export type ColorMatch = {
+  variant: VariantCode;
+  color: string;
+};
+
+const getColorForVariant = (variantCode: VariantCode, index: number): string => {
+  if (variantCode === 'other_table') return colors.data.variants.other_table;
+  if (variantCode === 'other_graph') return colors.data.variants.other_graph;
+
+  return colors.data.variants.colorList[index];
+}
+
+export function getVariantOrderColors(
+  variants: NlVariants | undefined
+): ColorMatch[] {
+  if (!isDefined(variants) || !isDefined(variants.values)) {
+    return [];
+  }
+
+  const colorOrder = variants.values
+    .filter(
+      (variant) =>
+        variant.last_value.is_variant_of_concern ||
+        variant.last_value.has_historical_significance
+    )
+    .sort((a, b) => a.last_value.order - b.last_value.order)
+    .map((variant, index) => {
+      const variantColor = getColorForVariant(variant.variant_code, index)
+      return {
+        variant: variant.variant_code,
+        color: variantColor
+      };
+  });
+
+  return colorOrder;
+}
diff --git a/packages/app/src/domain/variants/static-props/get-variant-sidebar-value.ts b/packages/app/src/domain/variants/static-props/get-variant-sidebar-value.ts
deleted file mode 100644
index c4b93cf15d..0000000000
--- a/packages/app/src/domain/variants/static-props/get-variant-sidebar-value.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NlVariants, NlVariantsVariantValue } from '@corona-dashboard/common';
-import { maxBy } from 'lodash';
-import { isDefined } from 'ts-is-present';
-
-export type VariantSidebarValue = {
-  name: string;
-} & NlVariantsVariantValue;
-
-export function getVariantSidebarValue(nlVariants: NlVariants | undefined) {
-  if (!isDefined(nlVariants) || !isDefined(nlVariants.values)) {
-    return null;
-  }
-
-  return maxBy(
-    nlVariants.values.map<VariantSidebarValue>((x) => ({
-      name: x.name,
-      ...x.last_value,
-    })),
-    (x) => x.percentage
-  );
-}
diff --git a/packages/app/src/domain/variants/static-props/get-variant-table-data.ts b/packages/app/src/domain/variants/static-props/get-variant-table-data.ts
index 12132ce183..6fe8b7b017 100644
--- a/packages/app/src/domain/variants/static-props/get-variant-table-data.ts
+++ b/packages/app/src/domain/variants/static-props/get-variant-table-data.ts
@@ -7,9 +7,11 @@ import {
 } from '@corona-dashboard/common';
 import { first } from 'lodash';
 import { isDefined, isPresent } from 'ts-is-present';
+import { ColorMatch } from './get-variant-order-colors';
+import { VariantCode } from '../static-props';
 
 export type VariantRow = {
-  variant: string;
+  variantCode: VariantCode;
   percentage: number | null;
   difference?: NamedDifferenceDecimal | null;
   color: string;
@@ -17,49 +19,28 @@ export type VariantRow = {
 
 export type VariantTableData = ReturnType<typeof getVariantTableData>;
 
-export const VARIANT_TABLE_MAP = [
-  'alpha',
-  'beta',
-  'gamma',
-  'delta',
-  'eta',
-  'epsilon',
-  'theta',
-  'kappa',
-  'lambda',
-  'iota',
-  'zeta',
-  'mu',
-  'nu',
-  'xi',
-  'omicron',
-  'pi',
-  'rho',
-  'sigma',
-  'tau',
-  'upsilon',
-  'phi',
-  'chi',
-  'psi',
-  'omega',
-];
-
 export function getVariantTableData(
   variants: NlVariants | undefined,
-  namedDifference: NlNamedDifference
+  namedDifference: NlNamedDifference,
+  variantColors: ColorMatch[]
 ) {
+  const emptyValues = {
+    variantTable: null,
+    dates: {
+      date_of_report_unix: 0,
+      date_start_unix: 0,
+      date_end_unix: 0,
+    },
+  } as const;
+
   if (!isDefined(variants) || !isDefined(variants.values)) {
-    return {
-      variantTable: null,
-      dates: null,
-      sampleSize: 0,
-    } as const;
+    return emptyValues;
   }
 
   function findDifference(name: string) {
     if (isPresent(namedDifference.variants__percentage)) {
       const difference = namedDifference.variants__percentage.find(
-        (x) => x.name === name
+        (x) => x.variant_code === name
       );
 
       if (!difference) {
@@ -72,85 +53,34 @@ export function getVariantTableData(
 
   const firstLastValue = first<NlVariantsVariant>(variants.values);
 
+  if (!isDefined(firstLastValue)) {
+    return emptyValues;
+  }
   const dates = {
-    date_end_unix: firstLastValue?.last_value.date_end_unix ?? 0,
-    date_start_unix: firstLastValue?.last_value.date_start_unix ?? 0,
-    date_of_insertion_unix:
-      firstLastValue?.last_value.date_of_insertion_unix ?? 0,
+    date_end_unix: firstLastValue.last_value.date_end_unix,
+    date_start_unix: firstLastValue.last_value.date_start_unix,
+    date_of_report_unix: firstLastValue.last_value.date_of_report_unix,
   };
-  const sampleSize = firstLastValue?.last_value.sample_size ?? 0;
 
-  const getVariantSortingRank = (variantName: string): number => {
-    const index = VARIANT_TABLE_MAP.findIndex((variant) =>
-      variantName.includes(variant)
-    );
-
-    if (index === -1) return 1000;
-    return index;
-  };
-
-  const variantColors = colors.data.variants;
   const variantTable = variants.values
-    /**
-     * Since the schemas for international still has to change to
-     * the new way of calculating this prevents the typescript error for now.
-     */
-    .map((variant) => ({
-      has_historical_significance:
-        'has_historical_significance' in variant.last_value
-          ? variant.last_value.has_historical_significance
-          : true,
-      ...variant,
-    }))
     .filter(
       (variant) =>
-        variant.name !== 'other_graph' || !variant.has_historical_significance
+        variant.variant_code !== 'other_graph' && !variant.last_value.has_historical_significance
     )
-    .sort((variantA, variantB) => {
-      if (variantA.name === 'other_table') {
-        return 1;
-      }
-      if (variantB.name === 'other_table') {
-        return -1;
-      }
-
-      const relativeSortingValue: number =
-        getVariantSortingRank(variantA.name) -
-        getVariantSortingRank(variantB.name);
-
-      if (relativeSortingValue !== 0) {
-        return relativeSortingValue;
-      }
-
-      return variantA.name.localeCompare(variantB.name);
-    })
-    .map<VariantRow>((variant, index) => ({
-      variant: variant.name,
-      percentage: variant.last_value.percentage,
-      difference: findDifference(variant.name),
-      color:
-        variant.name === 'other_table'
-          ? variantColors.other_table
-          : variantColors.colorList[index],
-    }))
-    .filter(
-      (row) =>
-        // Make sure the 'other' variant persists in the table.
-        row.variant === 'other_table' || row.percentage
-    )
-    .sort()
-    .reverse()
-    .sort((rowA, rowB) => {
-      // Make sure the 'other' variant is always sorted last.
-      if (rowA.variant === 'other_table') {
-        return 1;
-      }
-      if (rowB.variant === 'other_table') {
-        return -1;
-      }
-
-      return 0;
+    .sort((a, b) => a.last_value.order - b.last_value.order)
+    .map<VariantRow>((variant) => {
+      const color =
+        variantColors.find(
+          (variantColor) => variantColor.variant === variant.variant_code
+        )?.color || colors.data.variants.fallbackColor;
+
+      return {
+        variantCode: variant.variant_code,
+        percentage: variant.last_value.percentage,
+        difference: findDifference(variant.variant_code),
+        color,
+      };
     });
 
-  return { variantTable, dates, sampleSize };
+  return { variantTable, dates };
 }
diff --git a/packages/app/src/domain/variants/static-props/index.ts b/packages/app/src/domain/variants/static-props/index.ts
index 5cc693e298..c455be43bc 100644
--- a/packages/app/src/domain/variants/static-props/index.ts
+++ b/packages/app/src/domain/variants/static-props/index.ts
@@ -1,3 +1,3 @@
 export * from './get-variant-chart-data';
-export * from './get-variant-sidebar-value';
+export * from './get-variant-order-colors';
 export * from './get-variant-table-data';
diff --git a/packages/app/src/domain/variants/variants-over-time.tsx b/packages/app/src/domain/variants/variants-over-time.tsx
deleted file mode 100644
index e6bff3c468..0000000000
--- a/packages/app/src/domain/variants/variants-over-time.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { colors, TimeframeOption } from '@corona-dashboard/common';
-import { useMemo } from 'react';
-import { Spacer } from '~/components/base';
-import { InteractiveLegend } from '~/components/interactive-legend';
-import { Legend, LegendItem } from '~/components/legend';
-import { TimeSeriesChart } from '~/components/time-series-chart';
-import {
-  calculateSeriesMaximum,
-  LineSeriesDefinition,
-  SeriesConfig,
-  useSeriesList,
-} from '~/components/time-series-chart/logic';
-import { BoldText } from '~/components/typography';
-import { VariantChartValue } from '~/domain/variants/static-props';
-import { SiteText } from '~/locale';
-import { getBoundaryDateStartUnix } from '~/utils/get-boundary-date-start-unix';
-import { useList } from '~/utils/use-list';
-
-interface VariantsOverTimeProps {
-  values: VariantChartValue[];
-  seriesConfig: LineSeriesDefinition<VariantChartValue>[];
-  timeframe: TimeframeOption;
-  text: SiteText['pages']['variants_page']['nl']['varianten_over_tijd'];
-}
-
-export function VariantsOverTime({
-  values,
-  seriesConfig,
-  timeframe,
-  text,
-}: VariantsOverTimeProps) {
-  const { list, toggle, clear } = useList<string>();
-
-  const underReportedDateStart = getBoundaryDateStartUnix(values, 1);
-
-  const underReportedLegendItem: LegendItem = {
-    shape: 'square',
-    color: colors.data.underReported,
-    label: text.labels.niet_compleet,
-  };
-
-  const alwaysEnabled: keyof VariantChartValue | [] = useMemo(() => [], []);
-
-  /* Filter for each config group */
-
-  /**
-   * Chart:
-   * - when nothing selected: all items
-   * - otherwise: selected items
-   */
-  const compareList = list.concat(alwaysEnabled);
-  const chartConfig = useMemo(
-    () =>
-      [
-        ...seriesConfig.filter(
-          (item) =>
-            compareList.includes(item.metricProperty) ||
-            compareList.length === alwaysEnabled.length
-        ),
-        {
-          type: 'invisible',
-          metricProperty: 'sample_size',
-          label: text.labels.totaal_monsters,
-          isPercentage: false,
-        },
-      ] as SeriesConfig<VariantChartValue>,
-    [seriesConfig, alwaysEnabled, compareList, text.labels.totaal_monsters]
-  );
-
-  /* Static legend contains only the inaccurate item */
-  const staticLegendItems: LegendItem[] = [underReportedLegendItem];
-
-  const seriesList = useSeriesList(values, chartConfig);
-  const maximum = calculateSeriesMaximum(seriesList, chartConfig);
-  const forcedMaximumValue =
-    maximum <= 10 ? 10 : maximum >= 80 ? 100 : undefined;
-
-  if (!values.length) {
-    return null;
-  }
-
-  return (
-    <>
-      <InteractiveLegend
-        helpText={text.legend_help_tekst}
-        selectOptions={seriesConfig}
-        selection={list}
-        onToggleItem={toggle}
-        onReset={clear}
-      />
-      <Spacer mb={2} />
-      <BoldText variant="label2" color="data.axisLabels">
-        {text.percentage_gevonden_varianten}
-      </BoldText>
-      <TimeSeriesChart
-        accessibility={{ key: 'variants_over_time_chart' }}
-        values={values}
-        timeframe={timeframe}
-        seriesConfig={chartConfig}
-        disableLegend
-        dataOptions={{
-          isPercentage: true,
-          forcedMaximumValue,
-          timespanAnnotations: [
-            {
-              start: underReportedDateStart,
-              end: Infinity,
-              label: text.labels.niet_compleet,
-              shortLabel: text.tooltip_labels.niet_compleet,
-            },
-          ],
-        }}
-      />
-      <Legend items={staticLegendItems} />
-    </>
-  );
-}
diff --git a/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx b/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx
index 0a2b886e05..1a9d974b11 100644
--- a/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx
+++ b/packages/app/src/domain/variants/variants-stacked-area-tile/variants-stacked-area-tile.tsx
@@ -18,16 +18,17 @@ import { GappedAreaSeriesDefinition } from '~/components/time-series-chart/logic
 import { VariantChartValue } from '~/domain/variants/static-props';
 import { SiteText } from '~/locale';
 import { useList } from '~/utils/use-list';
-import { Variants } from '../variants-table-tile/types';
+import { ColorMatch, VariantCode } from '~/domain/variants/static-props';
 import { useUnreliableDataAnnotations } from './logic/use-unreliable-data-annotations';
 
 type VariantsStackedAreaTileText = {
-  varianten: Variants;
+  variantCodes: SiteText['common']['variant_codes'];
 } & SiteText['pages']['variants_page']['nl']['varianten_over_tijd_grafiek'];
 
 type VariantsStackedAreaTileProps = {
   text: VariantsStackedAreaTileText;
   values?: VariantChartValue[] | null;
+  variantColors: ColorMatch[];
   metadata: MetadataProps;
   children?: ReactNode;
   noDataMessage?: ReactNode;
@@ -35,6 +36,7 @@ type VariantsStackedAreaTileProps = {
 
 export function VariantsStackedAreaTile({
   values,
+  variantColors,
   metadata,
   children = null,
   noDataMessage = '',
@@ -57,6 +59,7 @@ export function VariantsStackedAreaTile({
       text={text}
       values={values}
       metadata={metadata}
+      variantColors={variantColors}
     >
       {children}
     </VariantStackedAreaTileWithData>
@@ -69,12 +72,14 @@ type VariantStackedAreaTileWithDataProps = {
   text: VariantsStackedAreaTileText;
   values: VariantChartValue[];
   metadata: MetadataProps;
+  variantColors: ColorMatch[];
   children?: ReactNode;
 };
 
 function VariantStackedAreaTileWithData({
   text,
   values,
+  variantColors,
   metadata,
   children = null,
 }: VariantStackedAreaTileWithDataProps) {
@@ -83,7 +88,8 @@ function VariantStackedAreaTileWithData({
 
   const [seriesConfig, otherConfig, selectOptions] = useSeriesConfig(
     text,
-    values
+    values,
+    variantColors
   );
 
   const filteredConfig = useFilteredSeriesConfig(
@@ -197,7 +203,8 @@ function useFilteredSeriesConfig(
 
 function useSeriesConfig(
   text: VariantsStackedAreaTileText,
-  values: VariantChartValue[]
+  values: VariantChartValue[],
+  variantColors: ColorMatch[]
 ) {
   return useMemo(() => {
     const baseVariantsFiltered = values
@@ -210,18 +217,21 @@ function useSeriesConfig(
 
     /* Enrich config with dynamic data / locale */
     const seriesConfig: GappedAreaSeriesDefinition<VariantChartValue>[] =
-      baseVariantsFiltered.map((variantKey, index) => {
-        const color = colors.data.variants.colorList[index];
+      baseVariantsFiltered.map((variantKey) => {
+        const variantCodeFragments = variantKey.split('_');
+        variantCodeFragments.pop();
+        const variantCode = variantCodeFragments.join('_') as VariantCode;
 
-        const variantNameFragments = variantKey.split('_');
-        variantNameFragments.pop();
-        const variantName = variantNameFragments.join('_') as keyof Variants;
+        const color =
+          variantColors.find(
+            (variantColors) => variantColors.variant === variantCode
+          )?.color || colors.data.variants.fallbackColor;
 
         return {
           type: 'gapped-area',
           metricProperty: variantKey as keyof VariantChartValue,
           color,
-          label: text.varianten[variantName]?.name || variantName,
+          label: text.variantCodes[variantCode],
           shape: 'gapped-area',
           strokeWidth: 2,
           fillOpacity: 0.2,
@@ -243,7 +253,12 @@ function useSeriesConfig(
     const selectOptions = [...seriesConfig];
 
     return [seriesConfig, otherConfig, selectOptions] as const;
-  }, [values, text]);
+  }, [
+    values,
+    text.tooltip_labels.other_percentage,
+    text.variantCodes,
+    variantColors,
+  ]);
 }
 
 const NoDataBox = styled.div(
diff --git a/packages/app/src/domain/variants/variants-table-tile/components/narrow-variants-table.tsx b/packages/app/src/domain/variants/variants-table-tile/components/narrow-variants-table.tsx
index 9536bc4a83..40ee66c00d 100644
--- a/packages/app/src/domain/variants/variants-table-tile/components/narrow-variants-table.tsx
+++ b/packages/app/src/domain/variants/variants-table-tile/components/narrow-variants-table.tsx
@@ -55,7 +55,7 @@ export function NarrowVariantsTable(props: NarrowVariantsTableProps) {
             row={row}
             formatValue={formatValue}
             text={text}
-            key={row.variant}
+            key={row.variantCode}
           />
         ))}
       </tbody>
@@ -78,7 +78,12 @@ function MobileVariantRow(props: MobileVariantRowProps) {
   return (
     <>
       <tr style={{ cursor: 'pointer' }} onClick={collapsible.toggle}>
-        <VariantNameCell variant={row.variant} text={text} mobile narrow />
+        <VariantNameCell
+          variantCode={row.variantCode}
+          text={text}
+          mobile
+          narrow
+        />
         <Cell mobile>
           {isPresent(row.percentage) ? (
             <PercentageBarWithNumber
diff --git a/packages/app/src/domain/variants/variants-table-tile/components/variant-name-cell.tsx b/packages/app/src/domain/variants/variants-table-tile/components/variant-name-cell.tsx
index f687521df6..59567e7993 100644
--- a/packages/app/src/domain/variants/variants-table-tile/components/variant-name-cell.tsx
+++ b/packages/app/src/domain/variants/variants-table-tile/components/variant-name-cell.tsx
@@ -1,19 +1,19 @@
 import { BoldText } from '~/components/typography';
 import { Cell } from '.';
 import { TableText } from '../types';
+import { VariantCode } from '../../static-props';
 
 type VariantNameCellProps = {
-  variant: string;
+  variantCode: VariantCode;
   text: TableText;
   mobile?: boolean;
   narrow?: boolean;
 };
 
 export function VariantNameCell(props: VariantNameCellProps) {
-  const { variant, text, mobile, narrow } = props;
+  const { variantCode, text, mobile, narrow } = props;
 
-  const { name: variantName } =
-    text.varianten[variant as keyof typeof text.varianten];
+  const variantName = text.variantCodes[variantCode];
 
   return (
     <Cell mobile={mobile} narrow={narrow}>
diff --git a/packages/app/src/domain/variants/variants-table-tile/components/wide-variants-table.tsx b/packages/app/src/domain/variants/variants-table-tile/components/wide-variants-table.tsx
index 40560b6292..9b5ac41787 100644
--- a/packages/app/src/domain/variants/variants-table-tile/components/wide-variants-table.tsx
+++ b/packages/app/src/domain/variants/variants-table-tile/components/wide-variants-table.tsx
@@ -49,8 +49,8 @@ export function WideVariantsTable(props: WideVariantsTableProps) {
       </thead>
       <tbody>
         {rows.map((row) => (
-          <tr key={row.variant}>
-            <VariantNameCell variant={row.variant} text={text} />
+          <tr key={row.variantCode}>
+            <VariantNameCell variantCode={row.variantCode} text={text} />
             <Cell>
               {isPresent(row.percentage) ? (
                 <Box maxWidth="20em">
diff --git a/packages/app/src/domain/variants/variants-table-tile/types.ts b/packages/app/src/domain/variants/variants-table-tile/types.ts
index c43ba84624..d2de1ea629 100644
--- a/packages/app/src/domain/variants/variants-table-tile/types.ts
+++ b/packages/app/src/domain/variants/variants-table-tile/types.ts
@@ -1,137 +1,4 @@
-export interface Variants {
-  alpha: {
-    name: string;
-    country_of_origin: string;
-  };
-  beta: {
-    name: string;
-    country_of_origin: string;
-  };
-  chi: {
-    name: string;
-    country_of_origin: string;
-  };
-  delta: {
-    name: string;
-    country_of_origin: string;
-  };
-  epsilon: {
-    name: string;
-    country_of_origin: string;
-  };
-  eta: {
-    name: string;
-    country_of_origin: string;
-  };
-  gamma: {
-    name: string;
-    country_of_origin: string;
-  };
-  iota: {
-    name: string;
-    country_of_origin: string;
-  };
-  kappa: {
-    name: string;
-    country_of_origin: string;
-  };
-  lambda: {
-    name: string;
-    country_of_origin: string;
-  };
-  mu: {
-    name: string;
-    country_of_origin: string;
-  };
-  nu: {
-    name: string;
-    country_of_origin: string;
-  };
-  omega: {
-    name: string;
-    country_of_origin: string;
-  };
-  'omicron b_1_1_529': {
-    name: string;
-    country_of_origin: string;
-  };
-  'omicron ba_1': {
-    name: string;
-    country_of_origin: string;
-  };
-  'omicron ba_2': {
-    name: string;
-    country_of_origin: string;
-  };
-  'omicron ba_3': {
-    name: string;
-    country_of_origin: string;
-  };
-  'omicron ba_4': {
-    name: string;
-    country_of_origin: string;
-  };
-  'omicron ba_5': {
-    name: string;
-    country_of_origin: string;
-  };
-  'omicron ba_2_12_1': {
-    name: string;
-    country_of_origin: string;
-  };
-  other: {
-    name: string;
-    country_of_origin: string;
-  };
-  other_graph: {
-    name: string;
-    country_of_origin: string;
-  };
-  other_table: {
-    name: string;
-    country_of_origin: string;
-  };
-  phi: {
-    name: string;
-    country_of_origin: string;
-  };
-  pi: {
-    name: string;
-    country_of_origin: string;
-  };
-  psi: {
-    name: string;
-    country_of_origin: string;
-  };
-  rho: {
-    name: string;
-    country_of_origin: string;
-  };
-  sigma: {
-    name: string;
-    country_of_origin: string;
-  };
-  tau: {
-    name: string;
-    country_of_origin: string;
-  };
-  theta: {
-    name: string;
-    country_of_origin: string;
-  };
-  upsilon: {
-    name: string;
-    country_of_origin: string;
-  };
-  xi: {
-    name: string;
-    country_of_origin: string;
-  };
-  zeta: {
-    name: string;
-    country_of_origin: string;
-  };
-}
+import { SiteText } from '~/locale';
 
 export type TableText = {
   anderen_tooltip: string;
@@ -146,7 +13,7 @@ export type TableText = {
     vorige_meting: string;
   };
   verschil: { gelijk: string; meer: string; minder: string };
-  varianten: Variants;
+  variantCodes: SiteText['common']['variant_codes'];
   description: string;
   geen_percentage_cijfer: string;
   geen_percentage_cijfer_tooltip: string;
diff --git a/packages/app/src/domain/variants/variants-table-tile/variants-table-tile.tsx b/packages/app/src/domain/variants/variants-table-tile/variants-table-tile.tsx
index 668860ecfb..df482046cc 100644
--- a/packages/app/src/domain/variants/variants-table-tile/variants-table-tile.tsx
+++ b/packages/app/src/domain/variants/variants-table-tile/variants-table-tile.tsx
@@ -19,7 +19,6 @@ export function VariantsTableTile({
   noDataMessage = '',
   source,
   data,
-  sampleSize,
   dates,
   children = null,
 }: {
@@ -31,12 +30,11 @@ export function VariantsTableTile({
     href: string;
     text: string;
   };
-  sampleSize: number;
-  dates?: {
+  dates: {
     date_start_unix: number;
     date_end_unix: number;
-    date_of_insertion_unix: number;
-  } | null;
+    date_of_report_unix: number;
+  };
   children?: ReactNode;
 }) {
   if (!isPresent(data) || !isPresent(dates)) {
@@ -61,7 +59,6 @@ export function VariantsTableTile({
       text={text}
       source={source}
       data={data}
-      sampleSize={sampleSize}
       dates={dates}
     >
       {children}
@@ -73,7 +70,6 @@ function VariantsTableTileWithData({
   text,
   source,
   data,
-  sampleSize,
   dates,
   children = null,
 }: {
@@ -84,11 +80,10 @@ function VariantsTableTileWithData({
     href: string;
     text: string;
   };
-  sampleSize: number;
   dates: {
     date_start_unix: number;
     date_end_unix: number;
-    date_of_insertion_unix: number;
+    date_of_report_unix: number;
   };
   children?: ReactNode;
 }) {
@@ -97,16 +92,15 @@ function VariantsTableTileWithData({
   const metadata: MetadataProps = {
     date: [dates.date_start_unix, dates.date_end_unix],
     source,
-    obtainedAt: dates.date_of_insertion_unix,
+    obtainedAt: dates.date_of_report_unix,
   };
 
   const [date_start, date_end] = formatDateSpan(
-    { seconds: dates?.date_start_unix },
-    { seconds: dates?.date_end_unix }
+    { seconds: dates.date_start_unix },
+    { seconds: dates.date_end_unix }
   );
 
   const descriptionText = replaceVariablesInText(text.omschrijving, {
-    sample_size: sampleSize,
     date_start,
     date_end,
   });
diff --git a/packages/app/src/pages/landelijk/varianten.tsx b/packages/app/src/pages/landelijk/varianten.tsx
index cc3b00c97a..7d7290d3e6 100644
--- a/packages/app/src/pages/landelijk/varianten.tsx
+++ b/packages/app/src/pages/landelijk/varianten.tsx
@@ -6,7 +6,7 @@ import { Layout } from '~/domain/layout/layout';
 import { NlLayout } from '~/domain/layout/nl-layout';
 import {
   getVariantChartData,
-  getVariantSidebarValue,
+  getVariantOrderColors,
   getVariantTableData,
 } from '~/domain/variants/static-props';
 import { VariantsStackedAreaTile } from '~/domain/variants/variants-stacked-area-tile';
@@ -52,10 +52,16 @@ export const getStaticProps = createGetStaticProps(
       selectedNlData: { variants },
     } = data;
 
+    const variantColors = getVariantOrderColors(variants);
+
     return {
-      variantSidebarValue: getVariantSidebarValue(variants) ?? null,
-      ...getVariantTableData(variants, data.selectedNlData.named_difference),
+      ...getVariantTableData(
+        variants,
+        data.selectedNlData.named_difference,
+        variantColors
+      ),
       ...getVariantChartData(variants),
+      variantColors,
     };
   },
   async (context: GetStaticPropsContext) => {
@@ -77,12 +83,12 @@ export default function CovidVariantenPage(
 ) {
   const {
     pageText,
-    variantSidebarValue,
     selectedNlData: data,
     lastGenerated,
     content,
     variantTable,
     variantChart,
+    variantColors,
     dates,
   } = props;
 
@@ -124,9 +130,10 @@ export default function CovidVariantenPage(
           <VariantsStackedAreaTile
             text={{
               ...textNl.varianten_over_tijd_grafiek,
-              varianten: commonTexts.variants,
+              variantCodes: commonTexts.variant_codes,
             }}
             values={variantChart}
+            variantColors={variantColors}
             metadata={{
               datumsText: textNl.datums,
               date: getLastInsertionDateOfPage(data, ['variants']),
@@ -134,23 +141,20 @@ export default function CovidVariantenPage(
             }}
           />
 
-          {variantSidebarValue?.sample_size && (
-            <VariantsTableTile
-              data={variantTable}
-              sampleSize={variantSidebarValue.sample_size}
-              text={{
-                ...textShared.varianten_tabel,
-                varianten: commonTexts.variants,
-                description: textNl.varianten_omschrijving,
-              }}
-              source={textNl.bronnen.rivm}
-              dates={{
-                date_end_unix: dates.date_end_unix,
-                date_of_insertion_unix: dates.date_of_insertion_unix,
-                date_start_unix: dates.date_start_unix,
-              }}
-            />
-          )}
+          <VariantsTableTile
+            data={variantTable}
+            text={{
+              ...textShared.varianten_tabel,
+              variantCodes: commonTexts.variant_codes,
+              description: textNl.varianten_omschrijving,
+            }}
+            source={textNl.bronnen.rivm}
+            dates={{
+              date_end_unix: dates.date_end_unix,
+              date_of_report_unix: dates.date_of_report_unix,
+              date_start_unix: dates.date_start_unix,
+            }}
+          />
         </TileList>
       </NlLayout>
     </Layout>
diff --git a/packages/app/src/utils/get-last-insertion-date-of-page.ts b/packages/app/src/utils/get-last-insertion-date-of-page.ts
index 1a8685c0f5..126952d102 100644
--- a/packages/app/src/utils/get-last-insertion-date-of-page.ts
+++ b/packages/app/src/utils/get-last-insertion-date-of-page.ts
@@ -7,7 +7,7 @@ function hasLastValue(metric: any): boolean {
 
 function hasValues(metric: any): boolean {
   return Array.isArray(metric?.values) &&
-    typeof metric?.values[metric?.values.length - 1]?.date_of_insertion_unix !== 'undefined';
+    typeof metric?.values[metric.values.length - 1]?.date_of_insertion_unix !== 'undefined';
 }
 
 function hasInsertionDate(metric: any): boolean {
diff --git a/packages/cms/src/lokalize/key-mutations.csv b/packages/cms/src/lokalize/key-mutations.csv
index c9d0270c89..e0d4b9daeb 100755
--- a/packages/cms/src/lokalize/key-mutations.csv
+++ b/packages/cms/src/lokalize/key-mutations.csv
@@ -1773,27 +1773,146 @@ timestamp,action,key,document_id,move_to
 2022-07-26T12:58:35.218Z,move,pages.variantsPage.shared.varianten_tabel.verschil.gelijk,JtApmkyAs5Fi3aTDSuAEoV,pages.variants_page.shared.varianten_tabel.verschil.gelijk
 2022-07-26T12:58:35.220Z,move,pages.variantsPage.shared.varianten_tabel.verschil.meer,4AqTI8FFRhehh0HHQUZG6W,pages.variants_page.shared.varianten_tabel.verschil.meer
 2022-07-26T12:58:35.223Z,move,pages.variantsPage.shared.varianten_tabel.verschil.minder,4AqTI8FFRhehh0HHQUZH3S,pages.variants_page.shared.varianten_tabel.verschil.minder
-2022-07-28T12:02:39.295Z,delete,common.variants.BA_1,An4w9epLkFHDxSkpYpwz3D,__
-2022-07-28T12:02:39.297Z,delete,common.variants.BA_2,An4w9epLkFHDxSkpYpwzHj,__
-2022-07-28T12:02:39.304Z,delete,common.variants.BA_2+S:L452X,60cpu3ttRIYKBCP3mPt80y,__
-2022-07-28T12:02:39.307Z,delete,common.variants.BA_2_12_1,0c2rQsUsOYxNZXCMntS8av,__
-2022-07-28T12:02:39.309Z,delete,common.variants.BA_2_75,An4w9epLkFHDxSkpYpx0SJ,__
-2022-07-28T12:02:39.312Z,delete,common.variants.BA_3,0c2rQsUsOYxNZXCMntS8g3,__
-2022-07-28T12:02:39.315Z,delete,common.variants.BA_4,60cpu3ttRIYKBCP3mPt7pq,__
-2022-07-28T12:02:39.317Z,delete,common.variants.BA_5,60cpu3ttRIYKBCP3mPt7vP,__
-2022-07-28T12:02:39.320Z,delete,common.variants.B_1_1_529,An4w9epLkFHDxSkpYpwyrb,__
-2022-07-28T12:02:39.323Z,delete,common.variants.B_1_1_7,0c2rQsUsOYxNZXCMntS8vR,__
-2022-07-28T12:02:39.326Z,delete,common.variants.B_1_351,An4w9epLkFHDxSkpYpwzkl,__
-2022-07-28T12:02:39.329Z,delete,common.variants.B_1_617_2,0c2rQsUsOYxNZXCMntS8ic,__
-2022-07-28T12:02:39.331Z,delete,common.variants.B_1_621,60cpu3ttRIYKBCP3mPt8jU,__
-2022-07-28T12:02:39.335Z,delete,common.variants.C_37,60cpu3ttRIYKBCP3mPt8p3,__
-2022-07-28T12:02:39.337Z,delete,common.variants.Other_graph,60cpu3ttRIYKBCP3mRSaMS,__
-2022-07-28T12:02:39.339Z,delete,common.variants.P_1,0c2rQsUsOYxNZXCMntS8qJ,__
-2022-07-28T12:02:39.341Z,delete,common.variants.other_graph,An4w9epLkFHDxSkpYpx0pX,__
-2022-07-28T12:02:39.343Z,delete,common.variants.other_table,An4w9epLkFHDxSkpYpx0b1,__
 2022-07-28T12:22:19.935Z,move,common.common.metadata.dateFromTo,jF33EuwumlGuwav2FD3gCi,common.common.metadata.date_from_to
 2022-07-28T12:22:19.937Z,move,common.seoHead.default_description,jF33EuwumlGuwav2FD3h12,common.seo_head.default_description
 2022-07-28T12:22:19.949Z,move,common.seoHead.default_title,jF33EuwumlGuwav2FD3h2i,common.seo_head.default_title
 2022-07-28T12:22:19.973Z,move,common.seoHead.default_url,jF33EuwumlGuwav2FD3h4O,common.seo_head.default_url
 2022-07-28T12:22:19.977Z,move,pages.infectious_people_page.nl.lineLegendLabel,jF33EuwumlGuwav2FD3Zts,pages.infectious_people_page.nl.line_legend_label
 2022-07-28T12:22:19.981Z,move,pages.infectious_people_page.nl.rangeLegendLabel,jF33EuwumlGuwav2FD3ZsC,pages.infectious_people_page.nl.range_legend_label
+2022-07-26T16:26:05.902Z,delete,common.variants.alpha.country_of_origin,ATrwynrL85JmIH7bDlAcr5,__
+2022-07-26T16:26:05.902Z,delete,common.variants.alpha.name,ivi6qq7M7M0wYBxAz9VgMO,__
+2022-07-26T16:26:05.902Z,delete,common.variants.beta.country_of_origin,ATrwynrL85JmIH7bDlAdY3,__
+2022-07-26T16:26:05.902Z,delete,common.variants.beta.name,ivi6qq7M7M0wYBxAz9Vgu4,__
+2022-07-26T16:26:05.902Z,delete,common.variants.chi.country_of_origin,ivi6qq7M7M0wYBxAz9Vhr0,__
+2022-07-26T16:26:05.902Z,delete,common.variants.chi.name,YtCS7EIPEP7gjS5dKmhdEO,__
+2022-07-26T16:26:05.902Z,delete,common.variants.delta.country_of_origin,ATrwynrL85JmIH7bDlAect,__
+2022-07-26T16:26:05.902Z,delete,common.variants.delta.name,YtCS7EIPEP7gjS5dKmhdoq,__
+2022-07-26T16:26:05.902Z,delete,common.variants.epsilon.country_of_origin,YtCS7EIPEP7gjS5dKmheWa,__
+2022-07-26T16:26:05.902Z,delete,common.variants.epsilon.name,ATrwynrL85JmIH7bDlAf0l,__
+2022-07-26T16:26:05.902Z,delete,common.variants.eta.country_of_origin,ATrwynrL85JmIH7bDlAfcx,__
+2022-07-26T16:26:05.902Z,delete,common.variants.eta.name,YtCS7EIPEP7gjS5dKmhehW,__
+2022-07-26T16:26:05.902Z,delete,common.variants.gamma.country_of_origin,ivi6qq7M7M0wYBxAz9VjxV,__
+2022-07-26T16:26:05.902Z,delete,common.variants.gamma.name,ivi6qq7M7M0wYBxAz9VjU2,__
+2022-07-26T16:26:05.902Z,delete,common.variants.iota.country_of_origin,ivi6qq7M7M0wYBxAz9VkQy,__
+2022-07-26T16:26:05.902Z,delete,common.variants.iota.name,ivi6qq7M7M0wYBxAz9VkA8,__
+2022-07-26T16:26:05.903Z,delete,common.variants.kappa.country_of_origin,YtCS7EIPEP7gjS5dKmhg3M,__
+2022-07-26T16:26:05.903Z,delete,common.variants.kappa.name,ATrwynrL85JmIH7bDlAgYF,__
+2022-07-26T16:26:05.903Z,delete,common.variants.lambda.country_of_origin,YtCS7EIPEP7gjS5dKmhgEI,__
+2022-07-26T16:26:05.903Z,delete,common.variants.lambda.name,ATrwynrL85JmIH7bDlAhAR,__
+2022-07-26T16:26:05.903Z,delete,common.variants.mu.country_of_origin,ATrwynrL85JmIH7bDlAhwB,__
+2022-07-26T16:26:05.903Z,delete,common.variants.mu.name,YtCS7EIPEP7gjS5dKmhgPE,__
+2022-07-26T16:26:05.903Z,delete,common.variants.nu.country_of_origin,ATrwynrL85JmIH7bDlAimh,__
+2022-07-26T16:26:05.903Z,delete,common.variants.nu.name,YtCS7EIPEP7gjS5dKmhghS,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omega.country_of_origin,ATrwynrL85JmIH7bDlAjTf,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omega.name,ATrwynrL85JmIH7bDlAj11,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron b_1_1_529.country_of_origin,FpB1VG3smRHDNCGaZfFnHc,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron b_1_1_529.name,FpB1VG3smRHDNCGaZfFnJP,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_1.country_of_origin,ITiTU3jVuy3jp8GMhgLGnz,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_1.name,FpB1VG3smRHDNCGaZfFnPN,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_2.country_of_origin,avHj0RuKBVR3WKDFarkBDI,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_2.name,FpB1VG3smRHDNCGaZfFnWX,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_2_12_1.country_of_origin,ITiTU3jVuy3jp8GMhgLHhL,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_2_12_1.name,FpB1VG3smRHDNCGaZfFnnF,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_3.country_of_origin,FpB1VG3smRHDNCGaZfFnp2,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_3.name,avHj0RuKBVR3WKDFarkBch,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_4.country_of_origin,FpB1VG3smRHDNCGaZfFnuP,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_4.name,FpB1VG3smRHDNCGaZfFnwC,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_5.country_of_origin,avHj0RuKBVR3WKDFarkC5j,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron ba_5.name,ITiTU3jVuy3jp8GMhgLJBb,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron.country_of_origin,YtCS7EIPEP7gjS5dKmhhsM,__
+2022-07-26T16:26:05.903Z,delete,common.variants.omicron.name,ivi6qq7M7M0wYBxAz9VlnA,__
+2022-07-26T16:26:05.904Z,delete,common.variants.other.country_of_origin,ATrwynrL85JmIH7bDlAk15,__
+2022-07-26T16:26:05.904Z,delete,common.variants.other.name,YtCS7EIPEP7gjS5dKmhi3I,__
+2022-07-26T16:26:05.904Z,delete,common.variants.other_graph.country_of_origin,ivi6qq7M7M0wYBxAz9VnDZ,__
+2022-07-26T16:26:05.904Z,delete,common.variants.other_graph.name,ivi6qq7M7M0wYBxAz9VmoJ,__
+2022-07-26T16:26:05.904Z,delete,common.variants.other_table.country_of_origin,ivi6qq7M7M0wYBxAz9VnYc,__
+2022-07-26T16:26:05.904Z,delete,common.variants.other_table.name,YtCS7EIPEP7gjS5dKmhiWS,__
+2022-07-26T16:26:05.904Z,delete,common.variants.phi.country_of_origin,YtCS7EIPEP7gjS5dKmhjP8,__
+2022-07-26T16:26:05.904Z,delete,common.variants.phi.name,ivi6qq7M7M0wYBxAz9Vntf,__
+2022-07-26T16:26:05.904Z,delete,common.variants.pi.country_of_origin,YtCS7EIPEP7gjS5dKmhjhM,__
+2022-07-26T16:26:05.904Z,delete,common.variants.pi.name,ATrwynrL85JmIH7bDlAm1D,__
+2022-07-26T16:26:05.904Z,delete,common.variants.psi.country_of_origin,ATrwynrL85JmIH7bDlAmwV,__
+2022-07-26T16:26:05.904Z,delete,common.variants.psi.name,ivi6qq7M7M0wYBxAz9VoAV,__
+2022-07-26T16:26:05.904Z,delete,common.variants.rho.country_of_origin,ATrwynrL85JmIH7bDlAnAp,__
+2022-07-26T16:26:05.904Z,delete,common.variants.rho.name,YtCS7EIPEP7gjS5dKmhkEA,__
+2022-07-26T16:26:05.904Z,delete,common.variants.sigma.country_of_origin,YtCS7EIPEP7gjS5dKmhka2,__
+2022-07-26T16:26:05.904Z,delete,common.variants.sigma.name,ivi6qq7M7M0wYBxAz9Vody,__
+2022-07-26T16:26:05.904Z,delete,common.variants.tau.country_of_origin,YtCS7EIPEP7gjS5dKmhkky,__
+2022-07-26T16:26:05.904Z,delete,common.variants.tau.name,ATrwynrL85JmIH7bDlAnTv,__
+2022-07-26T16:26:05.904Z,delete,common.variants.theta.country_of_origin,ATrwynrL85JmIH7bDlAnrn,__
+2022-07-26T16:26:05.904Z,delete,common.variants.theta.name,YtCS7EIPEP7gjS5dKmhkvu,__
+2022-07-26T16:26:05.904Z,delete,common.variants.upsilon.country_of_origin,ATrwynrL85JmIH7bDlAoFf,__
+2022-07-26T16:26:05.904Z,delete,common.variants.upsilon.name,ivi6qq7M7M0wYBxAz9VpK4,__
+2022-07-26T16:26:05.904Z,delete,common.variants.xi.country_of_origin,YtCS7EIPEP7gjS5dKmhm3A,__
+2022-07-26T16:26:05.904Z,delete,common.variants.xi.name,YtCS7EIPEP7gjS5dKmhloa,__
+2022-07-26T16:26:05.904Z,delete,common.variants.zeta.country_of_origin,ATrwynrL85JmIH7bDlApdb,__
+2022-07-26T16:26:05.904Z,delete,common.variants.zeta.name,YtCS7EIPEP7gjS5dKmhmP2,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.alpha,4AqTI8FFRhehh0HHQRJSGQ,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.beta,JtApmkyAs5Fi3aTDSrqC7n,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.chi,rViLqMuzbcTEh1HjyOOWqN,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.delta,0Fi2ZNty1p5jcXUiTknl9l,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.epsilon,0Fi2ZNty1p5jcXUiTknlxf,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.eta,JtApmkyAs5Fi3aTDSrqDP3,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.gamma,0Fi2ZNty1p5jcXUiTknkmH,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.iota,nVS0jBgQO2RxeLdgIEg5zl,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.kappa,JtApmkyAs5Fi3aTDSrqEOh,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.lambda,xuaFrGuzjgsa9lG6nk9BzP,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.mu,IdUyaapVWcyKHaD1kklm9F,__
+2022-07-26T16:26:05.904Z,delete,pages.variants_page.nl.landen_van_herkomst.nu,xeeXS0RPNTOe6jONllReRr,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.omega,xeeXS0RPNTOe6jONllRjJe,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.omicron,IdUyaapVWcyKHaD1kklnOF,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.other,4AqTI8FFRhehh0HHQRJXM9,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.other_table,CsaEnMMYj9MSwroN4KqjFB,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.phi,IdUyaapVWcyKHaD1kklpVt,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.pi,IdUyaapVWcyKHaD1kklnfd,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.psi,IdUyaapVWcyKHaD1kklq79,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.rho,xeeXS0RPNTOe6jONllRgE2,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.sigma,IdUyaapVWcyKHaD1kkloLr,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.tau,xeeXS0RPNTOe6jONllRh4j,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.theta,4AqTI8FFRhehh0HHQRJVnK,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.upsilon,IdUyaapVWcyKHaD1kklp73,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.xi,xeeXS0RPNTOe6jONllRegE,__
+2022-07-26T16:26:05.905Z,delete,pages.variants_page.nl.landen_van_herkomst.zeta,RFfM2pjXR16T7FSUC5W4YF,__
+2022-07-27T10:43:34.698Z,delete,pages.variantsPage.nl.landen_van_herkomst.alpha,4AqTI8FFRhehh0HHQRJSGQ,__
+2022-07-27T10:43:34.699Z,delete,pages.variantsPage.nl.landen_van_herkomst.beta,JtApmkyAs5Fi3aTDSrqC7n,__
+2022-07-27T10:43:34.699Z,delete,pages.variantsPage.nl.landen_van_herkomst.chi,rViLqMuzbcTEh1HjyOOWqN,__
+2022-07-27T10:43:34.699Z,delete,pages.variantsPage.nl.landen_van_herkomst.delta,0Fi2ZNty1p5jcXUiTknl9l,__
+2022-07-27T10:43:34.699Z,delete,pages.variantsPage.nl.landen_van_herkomst.epsilon,0Fi2ZNty1p5jcXUiTknlxf,__
+2022-07-27T10:43:34.700Z,delete,pages.variantsPage.nl.landen_van_herkomst.eta,JtApmkyAs5Fi3aTDSrqDP3,__
+2022-07-27T10:43:34.700Z,delete,pages.variantsPage.nl.landen_van_herkomst.gamma,0Fi2ZNty1p5jcXUiTknkmH,__
+2022-07-27T10:43:34.700Z,delete,pages.variantsPage.nl.landen_van_herkomst.iota,nVS0jBgQO2RxeLdgIEg5zl,__
+2022-07-27T10:43:34.700Z,delete,pages.variantsPage.nl.landen_van_herkomst.kappa,JtApmkyAs5Fi3aTDSrqEOh,__
+2022-07-27T10:43:34.700Z,delete,pages.variantsPage.nl.landen_van_herkomst.lambda,xuaFrGuzjgsa9lG6nk9BzP,__
+2022-07-27T10:43:34.700Z,delete,pages.variantsPage.nl.landen_van_herkomst.mu,IdUyaapVWcyKHaD1kklm9F,__
+2022-07-27T10:43:34.700Z,delete,pages.variantsPage.nl.landen_van_herkomst.nu,xeeXS0RPNTOe6jONllReRr,__
+2022-07-27T10:43:34.700Z,delete,pages.variantsPage.nl.landen_van_herkomst.omega,xeeXS0RPNTOe6jONllRjJe,__
+2022-07-27T10:43:34.700Z,delete,pages.variantsPage.nl.landen_van_herkomst.omicron,IdUyaapVWcyKHaD1kklnOF,__
+2022-07-27T10:43:34.701Z,delete,pages.variantsPage.nl.landen_van_herkomst.other,4AqTI8FFRhehh0HHQRJXM9,__
+2022-07-27T10:43:34.701Z,delete,pages.variantsPage.nl.landen_van_herkomst.other_table,CsaEnMMYj9MSwroN4KqjFB,__
+2022-07-27T10:43:34.701Z,delete,pages.variantsPage.nl.landen_van_herkomst.phi,IdUyaapVWcyKHaD1kklpVt,__
+2022-07-27T10:43:34.701Z,delete,pages.variantsPage.nl.landen_van_herkomst.pi,IdUyaapVWcyKHaD1kklnfd,__
+2022-07-27T10:43:34.702Z,delete,pages.variantsPage.nl.landen_van_herkomst.psi,IdUyaapVWcyKHaD1kklq79,__
+2022-07-27T10:43:34.702Z,delete,pages.variantsPage.nl.landen_van_herkomst.rho,xeeXS0RPNTOe6jONllRgE2,__
+2022-07-27T10:43:34.702Z,delete,pages.variantsPage.nl.landen_van_herkomst.sigma,IdUyaapVWcyKHaD1kkloLr,__
+2022-07-27T10:43:34.702Z,delete,pages.variantsPage.nl.landen_van_herkomst.tau,xeeXS0RPNTOe6jONllRh4j,__
+2022-07-27T10:43:34.702Z,delete,pages.variantsPage.nl.landen_van_herkomst.theta,4AqTI8FFRhehh0HHQRJVnK,__
+2022-07-27T10:43:34.702Z,delete,pages.variantsPage.nl.landen_van_herkomst.upsilon,IdUyaapVWcyKHaD1kklp73,__
+2022-07-27T10:43:34.702Z,delete,pages.variantsPage.nl.landen_van_herkomst.xi,xeeXS0RPNTOe6jONllRegE,__
+2022-07-27T10:43:34.702Z,delete,pages.variantsPage.nl.landen_van_herkomst.zeta,RFfM2pjXR16T7FSUC5W4YF,__
+2022-07-28T08:06:02.560Z,add,common.variant_codes.BA_1,An4w9epLkFHDxSkpYv8kWJ,__
+2022-07-28T08:06:03.568Z,add,common.variant_codes.BA_2,An4w9epLkFHDxSkpYv8kf1,__
+2022-07-28T08:06:04.583Z,add,common.variant_codes.BA_2+S:L452X,0c2rQsUsOYxNZXCMnuytQ0,__
+2022-07-28T08:06:05.600Z,add,common.variant_codes.BA_2_12_1,0c2rQsUsOYxNZXCMnuytWq,__
+2022-07-28T08:06:06.612Z,add,common.variant_codes.BA_2_75,0c2rQsUsOYxNZXCMnuytby,__
+2022-07-28T08:06:07.622Z,add,common.variant_codes.BA_3,0c2rQsUsOYxNZXCMnuyteX,__
+2022-07-28T08:06:08.638Z,add,common.variant_codes.BA_4,An4w9epLkFHDxSkpYv8lAx,__
+2022-07-28T08:06:09.652Z,add,common.variant_codes.BA_5,An4w9epLkFHDxSkpYv8lPT,__
+2022-07-28T08:06:10.667Z,add,common.variant_codes.B_1_1_529,An4w9epLkFHDxSkpYv8lmh,__
+2022-07-28T08:06:11.675Z,add,common.variant_codes.B_1_1_7,0c2rQsUsOYxNZXCMnuythx,__
+2022-07-28T08:06:12.687Z,add,common.variant_codes.B_1_351,0c2rQsUsOYxNZXCMnuytt4,__
+2022-07-28T08:06:13.699Z,add,common.variant_codes.B_1_617_2,0c2rQsUsOYxNZXCMnuytz3,__
+2022-07-28T08:06:14.709Z,add,common.variant_codes.B_1_621,0c2rQsUsOYxNZXCMnuyu3K,__
+2022-07-28T08:06:15.718Z,add,common.variant_codes.C_37,60cpu3ttRIYKBCP3mTDrWD,__
+2022-07-28T08:06:16.735Z,add,common.variant_codes.P_1,60cpu3ttRIYKBCP3mTDrbm,__
+2022-07-28T08:06:17.750Z,add,common.variant_codes.other_graph,An4w9epLkFHDxSkpYv8m71,__
+2022-07-28T08:06:18.751Z,add,common.variant_codes.other_table,60cpu3ttRIYKBCP3mTDrhL,__
\ No newline at end of file
diff --git a/packages/common/src/theme/colors.ts b/packages/common/src/theme/colors.ts
index ec8ea1a393..2ddc516f72 100644
--- a/packages/common/src/theme/colors.ts
+++ b/packages/common/src/theme/colors.ts
@@ -155,6 +155,7 @@ export const colors = {
       ],
       other_table: '#808080',
       other_graph: '#808080',
+      fallbackColor: '#808080',
     },
 
     vaccines: {
diff --git a/packages/common/src/types/data.ts b/packages/common/src/types/data.ts
index 4a81aed931..fedf149579 100644
--- a/packages/common/src/types/data.ts
+++ b/packages/common/src/types/data.ts
@@ -292,7 +292,24 @@ export interface NlNamedDifference {
   variants__percentage: NamedDifferenceDecimal[];
 }
 export interface NamedDifferenceDecimal {
-  name: string;
+  variant_code:
+    | "B_1_1_529"
+    | "BA_1"
+    | "BA_2"
+    | "BA_4"
+    | "BA_5"
+    | "BA_2+S:L452X"
+    | "BA_2_12_1"
+    | "BA_3"
+    | "B_1_617_2"
+    | "B_1_351"
+    | "P_1"
+    | "B_1_1_7"
+    | "B_1_621"
+    | "C_37"
+    | "BA_2_75"
+    | "other_table"
+    | "other_graph";
   old_value: number;
   difference: number;
   old_date_unix: number;
@@ -965,11 +982,29 @@ export interface NlVariants {
   values: NlVariantsVariant[];
 }
 export interface NlVariantsVariant {
-  name: string;
+  variant_code:
+    | "B_1_1_529"
+    | "BA_1"
+    | "BA_2"
+    | "BA_4"
+    | "BA_5"
+    | "BA_2+S:L452X"
+    | "BA_2_12_1"
+    | "BA_3"
+    | "B_1_617_2"
+    | "B_1_351"
+    | "P_1"
+    | "B_1_1_7"
+    | "B_1_621"
+    | "C_37"
+    | "BA_2_75"
+    | "other_table"
+    | "other_graph";
   values: NlVariantsVariantValue[];
   last_value: NlVariantsVariantValue;
 }
 export interface NlVariantsVariantValue {
+  order: number;
   occurrence: number;
   percentage: number;
   is_variant_of_concern: boolean;
@@ -978,6 +1013,7 @@ export interface NlVariantsVariantValue {
   date_start_unix: number;
   date_end_unix: number;
   date_of_insertion_unix: number;
+  date_of_report_unix: number;
 }
 
 export type VrCode = string;