diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 4c2ab711ff2501d634315c3041da3394a142b2eb..1b77253ef3b6b418738a351db53e1d800f514bda 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -17,5 +17,10 @@
   "staging": "Staging",
   "firstName": "First name",
   "lastName": "Last name",
-  "dateOfBirth": "Date of birth"
+  "dateOfBirth": "Date of birth",
+  "nationalIdNumber": "Fødselsnummer",
+  "validation": {
+    "invalidIdNumber": "Invalid national ID number",
+    "nationalIdNumberRequired": "National ID number required"
+  }
 }
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 11a25642f5fb9b4214464761810703467700b845..9222ecb889d176c93927dbc65258347c7e5216e4 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -17,5 +17,10 @@
   "staging": "Staging",
   "firstName": "Fornavn",
   "lastName": "Etternavn",
-  "dateOfBirth": "Fødselsdato"
+  "dateOfBirth": "Fødselsdato",
+  "nationalIdNumber": "Fødselsnummer",
+  "validation": {
+    "invalidIdNumber": "Ugyldig fødselsnummer",
+    "nationalIdNumberRequired": "Fødselsnummer er påkrevd"
+  }
 }
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 21039b90560962d4338ef53f60348eb0d8edba48..35f9fbc39df980a6273ccdf3581b4f66139ffc08 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -18,5 +18,9 @@
   "staging": "Staging",
   "firstName": "Fornamn",
   "lastName": "Etternamn",
-  "dateOfBirth": "Fødselsdato"
+  "dateOfBirth": "Fødselsdato",
+  "validation": {
+    "invalidIdNumber": "Ugyldig fødselsnummer",
+    "nationalIdNumberRequired": "Fødselsnummer er påkrevd"
+  }
 }
diff --git a/frontend/src/components/form/error.tsx b/frontend/src/components/form/error.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9e9d4a96c15b8500509dbbaff55ee9eafcee3c1a
--- /dev/null
+++ b/frontend/src/components/form/error.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components/macro'
+
+
+const StyledValidationError = styled.span`
+  color: ${({ theme }) => theme.colors.errorMessage};
+`
+
+export default StyledValidationError
\ No newline at end of file
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 629080bdea3a7580c42a5e41c25f53a569aa1c94..57d0e3cee163ddd76b3a0f02dcafa4d5f2885713 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -7,12 +7,14 @@ import Button from 'components/button'
 import Page from 'components/page'
 import { useForm, Controller, SubmitHandler } from 'react-hook-form'
 import format from 'date-fns/format'
-import { postJsonOpts } from 'utils'
+import { isValidFnr, postJsonOpts } from 'utils'
+import StyledValidationError from '../../components/form/error'
 
 type RegisterFormData = {
   first_name: string
   last_name: string
   date_of_birth: Date
+  national_id_number: string
 }
 
 export default function Register() {
@@ -23,6 +25,7 @@ export default function Register() {
       first_name: data.first_name,
       last_name: data.last_name,
       date_of_birth: format(data.date_of_birth, 'yyyy-MM-dd'),
+      national_id_number: data.national_id_number
     }
     console.log('submitting', JSON.stringify(payload))
     fetch('http://localhost:3000/api/ui/v1/register/', postJsonOpts(payload))
@@ -40,7 +43,7 @@ export default function Register() {
     control,
     handleSubmit,
     // setValue,
-    // formState: { errors },
+    formState : {errors}
   } = useForm<RegisterFormData>()
   const onSubmit = handleSubmit(submit)
 
@@ -55,6 +58,14 @@ export default function Register() {
           {...register(`last_name`)}
           placeholder={t('common:lastName')}
         />
+        <StyledInput
+          {...register("national_id_number", {
+            required: t('validation:nationalIdNumberRequired').toString(),
+            validate: isValidFnr
+          })}
+          placeholder={t('nationalIdNumber')}
+        />
+        {errors.national_id_number && <StyledValidationError>{errors.national_id_number.message}</StyledValidationError>}
         <Controller
           name="date_of_birth"
           control={control}
@@ -72,6 +83,7 @@ export default function Register() {
         <Button as="button" type="submit">
           Submit
         </Button>
+
       </form>
     </Page>
   )
diff --git a/frontend/src/styled.d.ts b/frontend/src/styled.d.ts
index 7031296ac88d87b9ff9da09ddd7a0c4d7bfcc3f4..48495b580e0716d6d2d60d2ddc909a28bc6c856d 100644
--- a/frontend/src/styled.d.ts
+++ b/frontend/src/styled.d.ts
@@ -8,6 +8,7 @@ declare module 'styled-components' {
       main: string
       secondary: string
       dropDownMenuBackground: string
+      errorMessage: string
     }
     footer: {
       backgroundColor: string
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index 8af960ea1c0c06ecbcf1b84c2efd321980353f78..a825157f358144b69ff494c1e2d6b26e20490bea 100644
--- a/frontend/src/themes/main.ts
+++ b/frontend/src/themes/main.ts
@@ -6,7 +6,8 @@ const mainTheme: DefaultTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'white',
-    dropDownMenuBackground: 'grey'
+    dropDownMenuBackground: 'grey',
+    errorMessage: 'red'
   },
   footer: {
     backgroundColor: 'black',
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index 2d272789dcaba43a0569514d6d72041c38f75a25..d65b7e9793238aaa769139be6c07b5779f42b499 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -2,7 +2,8 @@ const uibTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'black',
-    dropDownMenuBackground: 'grey'
+    dropDownMenuBackground: 'grey',
+    errorMessage: 'red'
   },
 }
 
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index 6f0f9a1c4c4893660ae49153eda119c888d684cf..8b1543faf7429d98b6bbfd3fabe98f7762c9d1be 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -2,7 +2,8 @@ const uioTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'white',
-    dropDownMenuBackground: 'grey'
+    dropDownMenuBackground: 'grey',
+    errorMessage: 'red'
   },
 }
 
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 80e6cd182ccc39586653a9f3200ba64bcd862505..b7dbae6b71d92ec4feec0e61765c2be7360106bf 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -1,4 +1,5 @@
 import validator from '@navikt/fnrvalidator'
+import i18n from 'i18next'
 
 export function getCookie(name: string) {
   if (!document.cookie) {
@@ -38,6 +39,11 @@ export function postJsonOpts(data: object): RequestInit {
   }
 }
 
-export function isValidFnr(data: string): boolean {
-  return validator.idnr(data).status === 'valid'
+export function isValidFnr(data: string): boolean | string {
+  const valid = validator.idnr(data).status === 'valid'
+  if (valid) {
+    return true
+  }
+  // TypeScript complains if toString is not used on the function result
+  return i18n.t('common:validation.invalidIdNumber').toString()
 }