diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index e49b5fe0ea0bd4da15d70f1991193f5d108ad691..3e446301e09b80fec0560fad31d727e4f0e7d106 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -8,7 +8,7 @@
   },
   "header": {
     "applicationTitleShort": "GREG",
-    "applicationTitleLong": "Gjesteregistrering",
+    "applicationTitleLong": "Guest Registration",
     "selectLanguage": "Select language"
   },
   "loading": "Loading...",
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 30a0598a3ae496e0fd17e7b9679203b2b8b9298c..92c11d0febbfabda6240752d39f1573cbd218a8e 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -4,6 +4,7 @@
     "test": "Dette er ein 'nested' verdi"
   },
   "language": {
+    "languageName": "Språk",
     "change": "Bytt språk til {{lang}}"
   },
   "header":{
diff --git a/frontend/src/components/dropdownmenu/index.tsx b/frontend/src/components/dropdownmenu/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9feb7fed666edb2c09b7a1a1d8581f09572afbdb
--- /dev/null
+++ b/frontend/src/components/dropdownmenu/index.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react'
+import styled from 'styled-components/macro'
+
+
+const DropDownMenu = styled.div`
+  position: relative;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  width: fit-content;
+  display: inline-block;
+`
+
+const DropDownList = styled.ul`
+  position: absolute;
+  right: 1rem;
+  top: 2rem;
+  border-radius: 1rem;
+  list-style-type: none;
+  min-width: 10rem;
+  max-height: 50rem;
+  z-index: 100;
+  background: ${({ theme }) => theme.colors.dropDownMenuBackground};
+`
+
+interface IDropDownOption {
+  name: string;
+  value: any;
+}
+
+const getValueName = (value: any, options: Array<IDropDownOption>): string => {
+  for (let i = 0; i < options.length; i += 1) {
+    if (options[i].value === value) {
+      return options[i].name
+    }
+  }
+  return ''
+}
+
+interface IProps {
+  options: any[];
+  placeholder?: string;
+  value: any;
+  onChange: (event: any) => void;
+}
+
+
+function DropDown(props: IProps) {
+  const [open, setOpen] = useState(false)
+
+  const {
+    options,
+    placeholder,
+    value,
+    onChange,
+  } = props
+
+  function handleClick(option: any) {
+    setOpen(!open)
+    onChange(option.value)
+  }
+
+  function openMenu() {
+    if (!open) {
+      setOpen(true)
+    }
+  }
+
+  return (
+    <DropDownMenu
+      aria-haspopup='true'
+      aria-expanded={open}
+      onFocus={openMenu}
+      tabIndex={0}
+    >
+      <div>
+        <div onClick={openMenu}>
+          {placeholder
+            ? placeholder
+            : getValueName(value, options).toLowerCase()}
+        </div>
+      </div>
+      <div>
+        {open && (
+          <DropDownList>
+            {options.map((option, index) => {
+              return (
+                <li
+                  onClick={(
+                    event: React.MouseEvent<HTMLElement, MouseEvent>,
+                  ) => {
+                    handleClick(option)
+                  }}
+                >
+                  <p>{option.name}</p>
+                </li>
+              )
+            })}
+          </DropDownList>
+        )}
+      </div>
+    </DropDownMenu>
+  )
+}
+
+export default DropDown
diff --git a/frontend/src/components/languageselector/index.tsx b/frontend/src/components/languageselector/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..575b56d7904b1558c685b9b4556a29b1c76b65e8
--- /dev/null
+++ b/frontend/src/components/languageselector/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import DropDown from '../dropdownmenu'
+
+
+function LanguageSelector() {
+  const { i18n, t } = useTranslation('common')
+
+  const options = [
+    {
+      name: 'English',
+      value: 'en',
+    },
+    {
+      name: 'Norsk nynorsk',
+      value: 'nn',
+    },
+    {
+      name: 'Norsk bokmål',
+      value: 'nb',
+    },
+  ]
+
+
+  return (
+    <DropDown options={options}
+              placeholder={t('header.selectLanguage')}
+              value={options[2]}
+              onChange={newValue => {
+                i18n.changeLanguage(newValue)
+              }
+              }
+    />
+  )
+}
+
+
+export default LanguageSelector
diff --git a/frontend/src/routes/components/header.tsx b/frontend/src/routes/components/header.tsx
index 0038b8a7ac403c8abb1529180be84a6441ae6a90..0a4f62cbdfa3e2ff31d8a8d7a05155ed1abf5361 100644
--- a/frontend/src/routes/components/header.tsx
+++ b/frontend/src/routes/components/header.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components/macro'
 import { useTranslation } from 'react-i18next'
 import LogoBar from '../../components/logobars/LogoBar'
+import LanguageSelector from '../../components/languageselector'
 
 
 const MainWrapper = styled.div`
@@ -54,7 +55,7 @@ function Header() {
           </TitleBox>
           <Menu>
             <MenuItem>
-              TODO Language
+              <LanguageSelector/>
             </MenuItem>
           </Menu>
         </Main>
diff --git a/frontend/src/styled.d.ts b/frontend/src/styled.d.ts
index 38f57535f6770e81e58a27a52fdcaca397e333fe..7031296ac88d87b9ff9da09ddd7a0c4d7bfcc3f4 100644
--- a/frontend/src/styled.d.ts
+++ b/frontend/src/styled.d.ts
@@ -7,6 +7,7 @@ declare module 'styled-components' {
     colors: {
       main: string
       secondary: string
+      dropDownMenuBackground: string
     }
     footer: {
       backgroundColor: string
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index d3eb364f0676e2257bc33308e42eee8903c76f4f..8af960ea1c0c06ecbcf1b84c2efd321980353f78 100644
--- a/frontend/src/themes/main.ts
+++ b/frontend/src/themes/main.ts
@@ -6,6 +6,7 @@ const mainTheme: DefaultTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'white',
+    dropDownMenuBackground: 'grey'
   },
   footer: {
     backgroundColor: 'black',
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index 0cd69cd5732a76e9f1a4873916a17536c4de9c51..2d272789dcaba43a0569514d6d72041c38f75a25 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -2,6 +2,7 @@ const uibTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'black',
+    dropDownMenuBackground: 'grey'
   },
 }
 
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index 6481aeb85e9e5a362322625834cdcabf836b9c06..6f0f9a1c4c4893660ae49153eda119c888d684cf 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -2,6 +2,7 @@ const uioTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'white',
+    dropDownMenuBackground: 'grey'
   },
 }