diff --git a/components/Colors.tsx b/components/Colors.tsx
new file mode 100644
index 0000000..8fd1e1a
--- /dev/null
+++ b/components/Colors.tsx
@@ -0,0 +1,45 @@
+import React, {useState} from 'react'
+import {RadioGroup} from '@headlessui/react'
+import {COLORS, rgbToHex} from "../src/colors";
+
+interface ColorsProps {
+    initialValue: COLORS,
+    onChange(value: COLORS): void;
+}
+
+function Colors(props: ColorsProps): JSX.Element {
+    let [color, setColor] = useState(props.initialValue)
+
+    return (
+        <RadioGroup<"div", COLORS> 
+            className="flex flex-wrap" value={color}
+            onChange={function (value) {
+                setColor(value);
+                props.onChange(value);
+            }
+        }>
+            {Object.values(COLORS).map((color) => {
+                return (
+                    <RadioGroup.Option value={color} key={color} className="outline-none">
+                        {({checked}) => (
+                            <div
+                                key={color}
+                                className={`${color !== COLORS.WHITE ? 'ring-white' : 'ring-black'} ring-2 shadow-xl cursor-pointer rounded-md w-10 h-10 flex items-center justify-center m-2`}
+                                style={{backgroundColor: rgbToHex(color), WebkitAppearance: 'none'}}
+                            >
+                                {checked &&
+                                    <svg className={`${color !== COLORS.WHITE ? 'text-white' : 'text-black'} h-6 w-6`} fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7"/>
+                                    </svg>
+                                }
+                            </div>
+                        )}
+                    </RadioGroup.Option>
+                )
+            })}
+        </RadioGroup>
+    )
+}
+
+export default Colors;
\ No newline at end of file
diff --git a/components/Form.tsx b/components/Form.tsx
index 7cf46e7..be9206b 100644
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -1,6 +1,6 @@
 import {saveAs} from 'file-saver';
 import React, {FormEvent, useEffect, useRef, useState} from "react";
-import {BrowserQRCodeReader} from "@zxing/browser";
+import {BrowserQRCodeReader, IScannerControls} from "@zxing/browser";
 import {Result} from "@zxing/library";
 import {useTranslation} from 'next-i18next';
 import Link from 'next/link';
@@ -11,15 +11,20 @@ import Check from './Check';
 import {PayloadBody} from "../src/payload";
 import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process";
 import {PassData} from "../src/pass";
+import {COLORS} from "../src/colors";
+import Colors from './Colors';
 
 function Form(): JSX.Element {
-    const { t } = useTranslation(['index', 'errors', 'common']);
+    const {t} = useTranslation(['index', 'errors', 'common']);
 
     // Whether camera is open or not
     const [isCameraOpen, setIsCameraOpen] = useState<boolean>(false);
 
+    // Currently selected color
+    const [selectedColor, setSelectedColor] = useState<COLORS>(COLORS.WHITE);
+
     // Global camera controls
-    const [globalControls, setGlobalControls] = useState(undefined);
+    const [globalControls, setGlobalControls] = useState<IScannerControls>(undefined);
 
     // Currently selected QR Code / File. Only one of them is set.
     const [qrCode, setQrCode] = useState<Result>(undefined);
@@ -82,7 +87,7 @@ function Form(): JSX.Element {
             setErrorMessage('noCameraAccess');
             return;
         }
-        
+
         // Check if camera device is present
         if (deviceList.length == 0) {
             setErrorMessage("noCameraFound");
@@ -123,7 +128,7 @@ function Form(): JSX.Element {
         event.preventDefault();
         setLoading(true);
 
-        if(navigator.userAgent.match('CriOS')) {
+        if (navigator.userAgent.match('CriOS')) {
             setErrorMessage('safariSupportOnly');
             setLoading(false);
             return;
@@ -135,7 +140,7 @@ function Form(): JSX.Element {
             return;
         }
 
-        const color = (document.getElementById('color') as HTMLSelectElement).value;
+        const color = selectedColor;
         let payloadBody: PayloadBody;
 
         try {
@@ -208,24 +213,7 @@ function Form(): JSX.Element {
                     <div className="space-y-5">
                         <p>{t('index:pickColorDescription')}</p>
                         <div className="relative inline-block w-full">
-                            <select name="color" id="color"
-                                    className="bg-gray-200 dark:bg-gray-900 focus:outline-none w-full h-10 pl-3 pr-6 text-base rounded-md appearance-none cursor-pointer">
-                                <option value="white">{t('index:colorWhite')}</option>
-                                <option value="black">{t('index:colorBlack')}</option>
-                                <option value="grey">{t('index:colorGrey')}</option>
-                                <option value="green">{t('index:colorGreen')}</option>
-                                <option value="indigo">{t('index:colorIndigo')}</option>
-                                <option value="blue">{t('index:colorBlue')}</option>
-                                <option value="purple">{t('index:colorPurple')}</option>
-                                <option value="teal">{t('index:colorTeal')}</option>
-                            </select>
-                            <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
-                                <svg className="w-5 h-5 fill-current" viewBox="0 0 20 20">
-                                    <path
-                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                                        clipRule="evenodd" fillRule="evenodd"/>
-                                </svg>
-                            </div>
+                            <Colors onChange={setSelectedColor} initialValue={selectedColor}/>
                         </div>
                     </div>
                 }/>
@@ -241,13 +229,13 @@ function Form(): JSX.Element {
                         </p>
                         <div>
                             <ul className="list-none">
-                                <Check text={t('createdOnDevice')}></Check>
-                                <Check text={t('openSourceTransparent')}></Check>
-                                <Check text={t('hostedInEU')}></Check>
+                                <Check text={t('createdOnDevice')}/>
+                                <Check text={t('openSourceTransparent')}/>
+                                <Check text={t('hostedInEU')}/>
                             </ul>
                         </div>
-                        <label htmlFor="privacy" className="flex flex-row space-x-4 items-center">
-                            <input type="checkbox" id="privacy" value="privacy" required className="h-4 w-4"/>
+                        <label htmlFor="privacy" className="flex flex-row space-x-4 items-center pb-2">
+                            <input type="checkbox" id="privacy" value="privacy" required className="h-5 w-5 outline-none"/>
                             <p>
                                 {t('index:iAcceptThe')}&nbsp;
                                 <Link href="/privacy">
@@ -263,7 +251,7 @@ function Form(): JSX.Element {
                                 {t('index:addToWallet')}
                             </button>
                             <div id="spin" className={loading ? undefined : "hidden"}>
-                                <svg className="animate-spin h-5 w-5 ml-3" viewBox="0 0 24 24">
+                                <svg className="animate-spin h-5 w-5 ml-4" viewBox="0 0 24 24">
                                     <circle className="opacity-0" cx="12" cy="12" r="10" stroke="currentColor"
                                             strokeWidth="4"/>
                                     <path className="opacity-75" fill="currentColor"
diff --git a/next-i18next.config.js b/next-i18next.config.js
index 42e5ade..7415191 100644
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@@ -9,7 +9,9 @@ module.exports = {
       'fi', 'fi-FI',
       'el', 'el-GR', 'el-CY',
       'it', 'it-IT', 'it-CH',
-      'es', 'es-ES'
+      'es', 'es-ES',
+      'no', 'no-NO',
+      'nb', 'nb-NO'
     ],
     localeExtension: 'yml',
   },
diff --git a/package.json b/package.json
index 77ca482..bed0ad3 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@headlessui/react": "^1.3.0",
     "@zxing/browser": "^0.0.9",
     "@zxing/library": "^0.18.6",
     "base45": "^3.0.0",
diff --git a/public/locales/nb-NO b/public/locales/nb-NO
new file mode 120000
index 0000000..6c2c32f
--- /dev/null
+++ b/public/locales/nb-NO
@@ -0,0 +1 @@
+nb
\ No newline at end of file
diff --git a/public/locales/nb/common.yml b/public/locales/nb/common.yml
new file mode 100644
index 0000000..45b4a35
--- /dev/null
+++ b/public/locales/nb/common.yml
@@ -0,0 +1,6 @@
+title: CovidPass
+subtitle: Legg til EUs digitale COVID -sertifikater i favorittlommebokappene dine.
+privacyPolicy: Privacy Policy
+donate: Sponsor
+gitHub: GitHub
+imprint: Avtrykk
diff --git a/public/locales/nb/errors.yml b/public/locales/nb/errors.yml
new file mode 100644
index 0000000..1a4c90d
--- /dev/null
+++ b/public/locales/nb/errors.yml
@@ -0,0 +1,20 @@
+noFileOrQrCode: Vennligst skann en QR-kode, eller velg en fil
+signatureFailed: Feil under signering av pass på server
+decodingFailed: Kunne ikke dekode nyttelast for QR-kode
+invalidColor: Ugyldig farge
+certificateData: Kunne ikke lese sertifikatdata
+nameMissing: Kunne ikke lese navnet
+dobMissing: Kunne ikke lese fødselsdatoen
+invalidMedicalProduct: Ugyldig medisinsk produkt
+invalidCountryCode: Ugyldig landskode
+invalidManufacturer: Ugyldig produsent
+invalidFileType: Ugyldig filtype
+couldNotDecode: Kunne ikke dekode QR-koden fra filen
+couldNotFindQrCode: Kunne ikke finne QR-koden i den medfølgende filen
+invalidQrCode: Ugyldig QR-kode
+certificateType: Fant ingen gyldig sertifikattype
+invalidTestResult: Ugyldig testresultat
+invalidTestType: Ugyldig testtype
+noCameraAccess: Fikk ikke tilgang til kameraet. Kontroller tillatelser under Innstillinger > Safari > Kamera.
+noCameraFound: Fant ikke kamera.
+safariSupportOnly: På iOS, vennligst bruk Safari nettleseren.
diff --git a/public/locales/nb/imprint.yml b/public/locales/nb/imprint.yml
new file mode 100644
index 0000000..473bc17
--- /dev/null
+++ b/public/locales/nb/imprint.yml
@@ -0,0 +1,27 @@
+heading: Informasjon i henhold til § 5 TMG
+contact: Kontakt
+euDisputeResolution: EU Konfliktløsning
+euDisputeResolutionParagraph: |
+  Europakommisjonen tilbyr en plattform for online konfliktløsning (OS) https://ec.europa.eu/consumers/odr.
+  Du finner e-postadressen vår i avtrykket ovenfor.
+consumerDisputeResolution: Forbrukerkonfliktløsning
+consumerDisputeResolutionParagraph: Vi er ikke villige eller forpliktet til å delta i konfliktløsningssaker for et forbrukernemnd.
+liabilityForContents: Ansvar for innholdet
+liabilityForContentsParagraph: |
+  Som tjenesteleverandør er vi ansvarlig for vårt eget innhold på disse sidene i henhold til § 7 avsnitt 1 TMG under de generelle lovene.
+  I henhold til §§ 8 til 10 TMG er vi ikke forpliktet til å overvåke overført eller lagret informasjon eller å undersøke omstendigheter som indikerer ulovlig aktivitet.
+  Forpliktelser til å fjerne eller blokkere bruk av informasjon i henhold til de generelle lovene forblir upåvirket.
+  Ansvar i denne forbindelse er imidlertid bare mulig fra det tidspunkt et konkret brudd på loven blir kjent.
+  Hvis vi blir klar over slike overtredelser, fjerner vi det relevante innholdet umiddelbart.
+liabilityForLinks: Ansvar for lenker
+liabilityForLinksParagraph: |
+  Vårt tilbud inneholder lenker til eksterne nettsteder til tredjeparter, hvis innhold vi ikke har innflytelse på.
+  Derfor kan vi ikke påta oss noe ansvar for dette eksterne innholdet.
+  Den respektive leverandøren eller operatøren av nettstedene er alltid ansvarlig for innholdet på de koblede nettstedene.
+  De koblede sidene ble sjekket for mulige lovbrudd på tidspunktet for koblingen.
+  Ulovlig innhold var ikke gjenkjennelig på tidspunktet for koblingen.
+  En permanent kontroll av innholdet på de lenkete sidene er imidlertid ikke rimelig uten konkrete bevis på brudd på loven.
+  Hvis vi blir klar over brudd, vil vi fjerne slike lenker umiddelbart.
+credits: Kreditere
+creditsSource: Med utdrag fra https://www.e-recht24.de/impressum-generator.html
+creditsTranslation: Oversatt med https://www.DeepL.com/Translator (free version)
diff --git a/public/locales/nb/index.yml b/public/locales/nb/index.yml
new file mode 100644
index 0000000..b0245c3
--- /dev/null
+++ b/public/locales/nb/index.yml
@@ -0,0 +1,29 @@
+iosHint: På iOS, vennligst bruk Safari nettleseren.
+errorClose: Lukk
+selectCertificate: Velg Sertifikat
+selectCertificateDescription: |
+  Skann QR-koden på sertifikatet ditt, eller velg et skjermbilde eller en PDF med QR-koden.
+  Vær oppmerksom på at det ikke støttes å velge en fil direkte fra kameraet.
+stopCamera: Stopp Kamera
+startCamera: Start Kamera
+openFile: Velg Fil
+foundQrCode: Fant QR-kode!
+pickColor: Velg en farge
+pickColorDescription: Velg en bakgrunnsfarge for passet ditt.
+colorWhite: hvit
+colorBlack: svart
+colorGrey: grå
+colorGreen: grønn
+colorIndigo: mørkeblå
+colorBlue: blå
+colorPurple: lilla
+colorTeal: blågrønn
+addToWallet: Legg til i Lommebok
+dataPrivacyDescription: |
+  Personvern er av spesiell betydning ved behandling av helserelaterte data.
+  For å ta en informert beslutning, vennligst les
+iAcceptThe: Jeg godtar
+privacyPolicy: Personvernerklæring
+createdOnDevice: Laget på enheten din
+openSourceTransparent: Åpen kildekode og gjennomsiktig
+hostedInEU: Driftet i EU
diff --git a/public/locales/nb/privacy.yml b/public/locales/nb/privacy.yml
new file mode 100644
index 0000000..244370b
--- /dev/null
+++ b/public/locales/nb/privacy.yml
@@ -0,0 +1,57 @@
+gdprNotice: |
+  Personvernerklæringen vår er basert på vilkårene som brukes av den europeiske lovgiveren
+  for vedtakelsen av General Data Protection Regulation (GDPR).
+generalInfo: Generell informasjon
+generalInfoProcess: |
+  Hele prosessen med å generere passfilen skjer lokalt i nettleseren din.
+  For signeringstrinnet sendes bare en hash representasjon av dataene dine til serveren.
+generalInfoStoring: Dine data lagres ikke utover den aktive nettlesersessionen, og nettsten bruker ikke informasjonskapsler.
+generalInfoThirdParties: Ingen data blir sendt til tredjeparter.
+generalInfoHttps: Vi overfører dataene dine sikkert over https.
+generalInfoLocation: Serveren vår ligger i Nuremberg, Germany.
+generalInfoGitHub: Kildekoden til dette nettstedet er tilgjengelig på
+generalInfoLockScreen: Som standard er Apple Wallet pass tilgjengelig fra låseskjermen. Dette kan endres i
+settings: innstillinger
+generalInfoProvider: |
+  Serverleverandøren behandler data for å tilby dette nettstedet.
+  For å bedre forstå hvilke tiltak de tar for å beskytte dataene dine, vennligst les også deres
+privacyPolicy: personvernerklæring
+andThe: og
+dataPrivacyFaq: vanlige spørsmål om personvern
+contact: Kontakt
+email: Epost
+website: Webside
+process: Forenklet forklaring av prosessen
+processFirst: Først skjer følgende trinn lokalt i nettleseren din
+processSecond: Så skjer følgende trinn på serveren vår
+processThird: Til slutt skjer følgende trinn lokalt i nettleseren din
+processRecognizing: Gjenkjenne og trekke ut QR-kodedataene fra det valgte sertifikatet
+processDecoding: Dekoding av dine personlige og helserelaterte data fra QR-kode
+processAssembling: Montering av en ufullstendig pass-fil ut av dataene dine
+processGenerating: Generere en fil som inneholder hashes av dataene som er lagret i passfilen
+processSending: Sender bare filen som inneholder hasjene til serveren vår
+processReceiving: Motta og sjekke hashene som ble generert lokalt
+processSigning: Signerer filen som inneholder hasjene
+processSendingBack: Sender signaturen tilbake
+processCompleting: Montering av den signerte passfilen fra den ufullstendige filen generert lokalt og signaturen
+processSaving: Lagrer filen på enheten din
+locallyProcessedData: Lokalt behandlede data
+the:
+schema: Skjema for digitalt Covid -sertifikat
+specification: inneholder en detaljert spesifikasjon av hvilke data som kan finnes i QR -koden og vil bli behandlet i nettleseren din.
+serverProvider: Serverleverandør
+serverProviderIs: Serverleverandøren vår er
+logFiles: Følgende data kan samles inn og lagres i serverloggfilene
+logFilesBrowser: Nettlesertypene og versjonene som brukes
+logFilesOs: Operativsystemet som brukes av tilgangssystemet
+logFilesReferrer: Nettstedet som et tilgangssystem kommer til nettstedet vårt fra (såkalte henvisninger)
+logFilesTime: Dato og klokkeslett for tilgang
+logFilesIpAddress: De pseudonymiserte IP-adressene
+rights: Dine rettigheter
+rightsGranted: I samsvar med GDPR har du følgende rettigheter
+rightsAccess: Rett til tilgang til dataene dine; Du har rett til å vite hvilke data som er samlet om deg og hvordan de ble behandlet.
+rightsErasure:  Rett til å bli glemt; Sletting av dine personlige data.
+rightsRectification: Rett til å rette opp; Du har rett til å korrigere unøyaktige data.
+rightsPortability:  Rett til dataportabilitet; Du har rett til å overføre dataene dine fra et behandlingssystem til et annet.
+thirdParties: Tredjeparter knyttet til
+appleSync: Apple kan synkronisere passene dine via iCloud
diff --git a/public/locales/no b/public/locales/no
new file mode 120000
index 0000000..6c2c32f
--- /dev/null
+++ b/public/locales/no
@@ -0,0 +1 @@
+nb
\ No newline at end of file
diff --git a/public/locales/no-NO b/public/locales/no-NO
new file mode 120000
index 0000000..54299a4
--- /dev/null
+++ b/public/locales/no-NO
@@ -0,0 +1 @@
+no
\ No newline at end of file
diff --git a/src/colors.ts b/src/colors.ts
new file mode 100644
index 0000000..27cd13a
--- /dev/null
+++ b/src/colors.ts
@@ -0,0 +1,31 @@
+// Accessible colors from https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color
+
+export enum COLORS {
+    WHITE = 'rgb(255, 255, 255)',
+    BLACK = 'rgb(0, 0, 0)',
+    GREY = 'rgb(36, 36, 38)',
+    BLUE = 'rgb(0, 64, 221)',
+    BROWN = 'rgb(127, 101, 69)',
+    CYAN = 'rgb(0, 113, 164)',
+    GREEN = 'rgb(36, 138, 61)',
+    INDIGO = 'rgb(54, 52, 163)',
+    MINT = 'rgb(12, 129, 123)',
+    ORANGE = 'rgb(201, 52, 0)',
+    PINK = 'rgb(211, 15, 69)',
+    PURPLE = 'rgb(137, 68, 171)',
+    RED = 'rgb(215, 0, 21)',
+    TEAL = 'rgb(0, 130, 153)',
+    YELLOW = 'rgb(178, 80, 0)'
+}
+
+export function rgbToHex(rgbString: string) {
+    let a = rgbString.split("(")[1].split(")")[0];
+    let values = a.split(",");
+
+    let b = values.map(function (value) {
+        let x = parseInt(value).toString(16);
+        return (x.length == 1) ? "0" + x : x;
+    })
+
+    return "#" + b.join("");
+}
\ No newline at end of file
diff --git a/src/constants.ts b/src/constants.ts
index 87fc425..1883630 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -3,17 +3,6 @@ export class Constants {
     public static PASS_IDENTIFIER = 'pass.de.marvinsextro.covidpass'
     public static TEAM_IDENTIFIER = 'X8Q7Q2RLTD'
 
-    public static COLORS = {
-        white: 'rgb(255, 255, 255)',
-        black: 'rgb(0, 0, 0)',
-        grey: 'rgb(33, 33, 33)',
-        green: 'rgb(27, 94, 32)',
-        indigo: 'rgb(26, 35, 126)',
-        blue: 'rgb(1, 87, 155)',
-        purple: 'rgb(74, 20, 140)',
-        teal: 'rgb(0, 77, 64)',
-    }
-
     public static img1xBlack: Buffer = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAABU0lEQVR4AWIYaWAUiAExoB06gGggDOMwripJthAgGwBoCGYDBIDIgAFBwDAABoJjhBgEAEChBBBaAA0JyeKAqR0hmnWx3p5o8MHdvfd9Z7SHH8Dr723iCpdoYBOZtoJ9XOALYghxjj0sw1k7OEEAiekVxyjBShto4h6SUg8N5KGqhCHEshdsI3FdiCM3SNwnxA1uKxKXZm3QfJCPQ3RmYVAfW5j2YH+QfkweQ1uDviEmdNHBR8SYddxCDOC2ojeI4RlL+K2Kd8UYcFvRE8TQxyKmVdFLOAbcVnQNMeEUCzCKPQbcVnQEiRilGQNuK9qFRI1SjAG3Fa0iiDh8hgPcQWIKwG1dHsQyD+qKCCGWhCgiVZ7T7yhagw9JyQe37FTGCKI0QhlWq2GiGDNBDU6qYwyJaYw6nFbBABJhgAoyKYc2QoghRBs5ZF4BLTz+aaGAef+nHwt5/579e2c2AAAAAElFTkSuQmCC', 'base64');
     public static img2xBlack: Buffer = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAACZ0lEQVR4Ae3TA8xcURRF4dq2ozqqbRtxUjeq7Zi127C2bXvSsLZtu/PP6ardjs577765K/li7mQnizGbzWaz2Wx50BXjMRYdkR0JXRq0xVq8g/ziDZaiGVIiYSqLybgPCdMtjEZpP1+oP45CYnQYPZDd7xeKnPMX1L+QAoULmnUhX12wVrwupHjBKnC8tFgEMcRcpIFjrYQYZhkcqQXEUM2h3haIoTZDvRsQQ92AeiGIoUJQTwxnB7ID2YHsQHYgO5B7zmMlztiBfhbCCKQAJUuOYbADIYRe+FP7TB1IfxyiUaYOpD8O0TJzB9IfpyqCZg6kP05ZPIBESL0gJAIBVENONMRJF8cJQr1nkDBdRWb8WBYEHB8HeAb1bkPCNB5E/xlJfRzgNtQ7CQnTWNB/R9IfBzgJ9TZCwnQJGcMYSX8cYCPUmw6JwCqkwt9K5cg4wHSo1x0SoZX/GUJ/HKA71KsAURhJdxygAtRLg1cKI2mP8wpp4EibIQoj6YwDbIZj9YIojKQzDtALjlUESZAYrEN2fK2u4jhJKAJH2wmJ0UOsRQBJECU74XjtIYZoD8dLi1sQj7uFtHClIRCPGwLXyox7EI+6h8xwtR4Qj+oB10uFExCPOYFU8ERVEIR4RBBV4KlGQTxiFDxXWgQgLgsgLTxZQdyBuOQOCsLTVcELiMNeoAqMqBHeQhzyFo1gVC3wCqLsFVrAyGrgMUTJY9SA0RXDMYVxjqEYfFEGzITEyUxkgO9qhEuQKF1CI/i69BiCB5AwPcAQpEfClBUDcR7yF+cxEFmR0NXDVFz5YirqwWaz2Ww2W9R9AE/cBAw+cEeMAAAAAElFTkSuQmCC', 'base64')
     public static img1xWhite: Buffer = Buffer.from('iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABUUlEQVRIx+XWP0tCURjH8cf+IBLaELSEvoIcWkRHX0AQbm4tbQ7uTi4XhIbAxfdQQ9HqkK05RINIgZtUgoOQ6A3026Sc9D73jzblb73P/XAOnPM8R2RTwyFF7rmjwMGqxC5n3PLNLDY3nLITDDnhih5O+eCSpB9inyLPeKVJgZgbk+QTv3nnWIcaBMmDDo0DQWMdCpj/A3W4oLo+9MqRiAgv60EzJmaeNB2aGr82qPK1wOzxaFRMdag/L3pjW4QMA5WBvg61ja1siYiQoakw0NahulFWI2R8WWagrkPlX4VzypGBsg5lF0prhFQGsjoUXmpn15zz5Mj0CLt1JMv3/bDcO2QC2xdjk/BqttYfrEdEhAgdT6ZDxM8ASDF0ZYak/I6jHBOVmZALMtnyjByZEfmgkzZNd4npkl5laEepGIfBpkJ09UdEnBItWpSIb+xL6gcK3j+JspcAUAAAAABJRU5ErkJggg==', 'base64')
diff --git a/src/payload.ts b/src/payload.ts
index e697a0f..a86f586 100644
--- a/src/payload.ts
+++ b/src/payload.ts
@@ -1,10 +1,11 @@
 import {ValueSets} from "./value_sets";
 import {Constants} from "./constants";
+import {COLORS} from "./colors";
 
 enum CertificateType {
-    Vaccine = 'Vaccine',
-    Test = 'Test',
-    Recovery = 'Recovery',
+    Vaccination = 'Vaccination Card',
+    Test = 'Test Certificate',
+    Recovery = 'Recovery Certificate',
 }
 
 enum TextAlignment {
@@ -27,7 +28,7 @@ export interface PassDictionary {
 }
 
 export interface PayloadBody {
-    color: string;
+    color: COLORS;
     rawData: string;
     decodedData: Uint8Array;
 }
@@ -48,13 +49,7 @@ export class Payload {
 
     constructor(body: PayloadBody, valueSets: ValueSets) {
 
-        let colors = Constants.COLORS;
-
-        if (!(body.color in colors)) {
-            throw new Error('invalidColor');
-        }
-
-        const dark = body.color != 'white'
+        const dark = body.color != COLORS.WHITE;
 
         const healthCertificate = body.decodedData['-260'];
         const covidCertificate = healthCertificate['1']; // Version number subject to change
@@ -76,13 +71,13 @@ export class Payload {
 
         const firstName = nameInformation['gn'];
         const lastName = nameInformation['fn'];
-        
+
         const transliteratedFirstName = nameInformation['gnt'].replaceAll('<', ' ');
         const transliteratedLastName = nameInformation['fnt'].replaceAll('<', ' ');
 
         // Check if name contains non-latin characters
         const nameRegex = new RegExp('^[\\p{Script=Latin}\\p{P}\\p{M}\\p{Z}]+$', 'u');
-        
+
         let name: string;
 
         if (nameRegex.test(firstName) && nameRegex.test(lastName)) {
@@ -95,7 +90,7 @@ export class Payload {
 
         // Set certificate type and properties
         if (covidCertificate['v'] !== undefined) {
-            this.certificateType = CertificateType.Vaccine;
+            this.certificateType = CertificateType.Vaccination;
             properties = covidCertificate['v'][0];
         }
         if (covidCertificate['t'] !== undefined) {
@@ -126,7 +121,7 @@ export class Payload {
                 {
                     key: "type",
                     label: "EU Digital COVID",
-                    value: this.certificateType + " Certificate"
+                    value: this.certificateType
                 }
             ],
             primaryFields: [
@@ -155,9 +150,9 @@ export class Payload {
         // Set Values
         this.rawData = body.rawData;
 
-        this.backgroundColor = dark ? colors[body.color] : colors.white
-        this.labelColor = dark ? colors.white : colors.grey
-        this.foregroundColor = dark ? colors.white : colors.black
+        this.backgroundColor = dark ? body.color : COLORS.WHITE
+        this.labelColor = dark ? COLORS.WHITE : COLORS.GREY
+        this.foregroundColor = dark ? COLORS.WHITE : COLORS.BLACK
         this.img1x = dark ? Constants.img1xWhite : Constants.img1xBlack
         this.img2x = dark ? Constants.img2xWhite : Constants.img2xBlack
         this.dark = dark;
@@ -167,7 +162,7 @@ export class Payload {
 
     static fillPassData(type: CertificateType, data: PassDictionary, properties: Object, valueSets: ValueSets, country: string, dateOfBirth: string): PassDictionary {
         switch (type) {
-            case CertificateType.Vaccine:
+            case CertificateType.Vaccination:
                 const dose = `${properties['dn']}/${properties['sd']}`;
                 const dateOfVaccination = properties['dt'];
                 const medialProductKey = properties['mp'];
@@ -188,7 +183,7 @@ export class Payload {
                         key: "dose",
                         label: "Dose",
                         value: dose
-                    }, 
+                    },
                     {
                         key: "dov",
                         label: "Date of Vaccination",
@@ -232,7 +227,7 @@ export class Payload {
                 const testDateTimeString = properties['sc'];
                 const testResultKey = properties['tr'];
                 const testingCentre = properties['tc'];
-                
+
                 if (!(testResultKey in valueSets.testResults)) {
                     throw new Error('invalidTestResult');
                 }
@@ -244,7 +239,7 @@ export class Payload {
                 const testType = valueSets.testTypes[testTypeKey].display;
 
                 const testTime = testDateTimeString.replace(/.*T/, '').replace('Z', ' ') + 'UTC';
-                const testDate = testDateTimeString.replace(/T.*/,'');
+                const testDate = testDateTimeString.replace(/T.*/, '');
 
                 data.secondaryFields.push(...[
                     {
@@ -343,7 +338,7 @@ export class Payload {
             default:
                 throw new Error('certificateType');
         }
-        
+
         return data;
     }
 }
\ No newline at end of file
diff --git a/src/process.ts b/src/process.ts
index e08d6e1..b2a253d 100644
--- a/src/process.ts
+++ b/src/process.ts
@@ -4,10 +4,11 @@ import * as PdfJS from 'pdfjs-dist'
 import jsQR, {QRCode} from "jsqr";
 import {decodeData} from "./decode";
 import {Result} from "@zxing/library";
+import {COLORS} from "./colors";
 
 PdfJS.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PdfJS.version}/pdf.worker.js`
 
-export async function getPayloadBodyFromFile(file: File, color: string): Promise<PayloadBody> {
+export async function getPayloadBodyFromFile(file: File, color: COLORS): Promise<PayloadBody> {
     // Read file
     const fileBuffer = await file.arrayBuffer();
 
@@ -59,7 +60,7 @@ export async function getPayloadBodyFromFile(file: File, color: string): Promise
     }
 }
 
-export async function getPayloadBodyFromQR(qrCodeResult: Result, color: string): Promise<PayloadBody> {
+export async function getPayloadBodyFromQR(qrCodeResult: Result, color: COLORS): Promise<PayloadBody> {
 
     // Get raw data
     let rawData = qrCodeResult.getText();
diff --git a/tailwind.config.js b/tailwind.config.js
index 23ee1c9..c5d3518 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,12 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: 'media',
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
+    mode: 'jit',
+    purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+    darkMode: 'media',
+    theme: {
+        extend: {},
+    },
+    variants: {
+        extend: {},
+    },
+    plugins: [],
 }
diff --git a/yarn.lock b/yarn.lock
index c22cbf8..c6814c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -80,6 +80,11 @@
   resolved "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.0.tgz"
   integrity sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug==
 
+"@headlessui/react@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.3.0.tgz#62287c92604923e5dfb394483e5ec2463e1baea6"
+  integrity sha512-2gqTO6BQ3Jr8vDX1B67n1gl6MGKTt6DBmR+H0qxwj0gTMnR2+Qpktj8alRWxsZBODyOiBb77QSQpE/6gG3MX4Q==
+
 "@next/env@11.0.1":
   version "11.0.1"
   resolved "https://registry.npmjs.org/@next/env/-/env-11.0.1.tgz"