diff --git a/.eslintrc.json b/.eslintrc.json
index 547ea1d..f2da764 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -10,6 +10,8 @@
     "react/prop-types": "off",
     "comma-dangle": "off",
     "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"]
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error"]
   }
 }
diff --git a/components/AddRule.js b/components/AddRule.js
index e798abb..932b1a5 100644
--- a/components/AddRule.js
+++ b/components/AddRule.js
@@ -27,7 +27,7 @@ const fields = [
   }
 ]
 
-const AddRule = ({ onAddRule }) => {
+const AddRule = () => {
   const formRef = useRef()
   const [error, setError] = useState(null)
   const router = useRouter()
diff --git a/components/Footer.js b/components/Footer.tsx
similarity index 86%
rename from components/Footer.js
rename to components/Footer.tsx
index 18c52c6..7be882a 100644
--- a/components/Footer.js
+++ b/components/Footer.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { Flex, Box, Link } from 'ooni-components'
 import styled from 'styled-components'
 
@@ -16,7 +17,12 @@ const FooterColumn = styled(Flex).attrs({
   mx: 3
 })``
 
-const FooterItem = ({ label, link }) => (
+type FooterItemProps = {
+  label: React.ReactNode,
+  link: string
+}
+
+const FooterItem: React.FunctionComponent<FooterItemProps> = ({ label, link }) => (
   <Link my={1} mx={3} color='gray2' href={link}>{label}</Link>
 )
 
diff --git a/components/Layout.js b/components/Layout.tsx
similarity index 72%
rename from components/Layout.js
rename to components/Layout.tsx
index 391e873..78231b5 100644
--- a/components/Layout.js
+++ b/components/Layout.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import NextHead from 'next/head'
 import styled from 'styled-components'
 import { Container, Flex } from 'ooni-components'
@@ -11,14 +11,18 @@ const PageWrapper = styled(Flex)`
   min-height: 100vh;
 `
 
-const Layout = ({ title = '', children }) => {
+type LayoutProps = {
+  title: string,
+  children: React.ReactNode
+}
+const Layout: React.FunctionComponent<LayoutProps> = ({ title = '', children }) => {
   return (
     <>
       <NextHead>
         <title>{title}</title>
       </NextHead>
       <PageWrapper>
-        <NavBar title={title} />
+        <NavBar />
         <Container sx={{ flex: 1, width: '100%' }}>
           {children}
         </Container>
diff --git a/components/List.js b/components/List.js
index 99da9c0..149b984 100644
--- a/components/List.js
+++ b/components/List.js
@@ -120,7 +120,7 @@ const Button = styled.button`
 // Dynamic button
 // * Starts editing a row
 // * Switches to a two button component to confirm or cancel a row edit operation.
-const EditButton = ({ resetRow, onRowUpdate, row: { index, values, state: { isEditing, dirty }, setState } }) => {
+const EditButton = ({ resetRow, onRowUpdate, row: { index, values, state: { isEditing, /* dirty */ }, setState } }) => {
   const onEdit = useCallback(() => {
     // TODO: Don't edit if another row is still being edited
     setState(state => ({ ...state, isEditing: true }))
diff --git a/components/Loading.tsx b/components/Loading.tsx
index fda9b19..403fbe5 100644
--- a/components/Loading.tsx
+++ b/components/Loading.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, { keyframes } from 'styled-components'
 
-const rotate = (dir) => keyframes`
+const rotate = (dir: number) => keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -19,12 +19,12 @@ const Spinner = styled.div<SpinnerProps>`
   animation: ${props => rotate(props.$dir)} ${props => 2 / props.speed}s linear infinite;
 `
 
-interface LoadingProps {
-  readonly size?: number;
-  readonly speed?: number;
-  readonly dir?: number;
+type LoadingProps = {
+  size?: number;
+  speed?: number;
+  dir?: number;
 }
-const Loading: React.FC<LoadingProps> = ({ size = 64, speed = 1, dir = 1 }) => (
+const Loading: React.FunctionComponent<LoadingProps> = ({ size = 64, speed = 1, dir = 1 }) => (
   <Spinner speed={speed} $dir={dir}>
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/components/LoginForm.js b/components/LoginForm.tsx
similarity index 80%
rename from components/LoginForm.js
rename to components/LoginForm.tsx
index e025515..d70b3cb 100644
--- a/components/LoginForm.js
+++ b/components/LoginForm.tsx
@@ -22,33 +22,39 @@ const StyledInputContainer = styled(Box).attrs({
   }
 `
 
-export const LoginModal = ({ isShowing, hide, onLogin }) =>
-  <Modal show={isShowing} onHideClick={hide}>
-    <LoginForm onLogin={onLogin} />
-  </Modal>
+type LoginFormData = {
+  email_address: string,
+  nickname: string
+}
 
-export const LoginForm = ({ onLogin }) => {
-  const [submitting, setSubmitting] = useState(false)
-  const [loginError, setError] = useState(null)
+type LoginFormProps = {
+  onLogin: Function
+}
 
-  const { handleSubmit, register, formState, reset } = useForm({
+export const LoginForm: React.FunctionComponent<LoginFormProps> = ({ onLogin }) => {
+  const [submitting, setSubmitting] = useState(false)
+  const [loginError, setError] = useState<string | null>(null)
+  const { handleSubmit, register, formState, reset } = useForm<LoginFormData>({
     mode: 'onTouched',
   })
 
   const { errors, isValid, isDirty } = formState
 
-  const onSubmit = useCallback((data) => {
+  const onSubmit = useCallback((data: LoginFormData) => {
     const { email_address, nickname } = data
-    const registerApi = async (email_address, nickname) => {
+    const registerApi = async (email_address: string, nickname: string) => {
       try {
         await registerUser(email_address, nickname)
         if (typeof onLogin === 'function') {
           onLogin()
         }
       } catch (e) {
-        setError(e.message)
         // Reset form to mark `isDirty` as false
         reset({}, { keepValues: true })
+        console.error(e)
+        if (e instanceof Error) {
+          setError(e.message)
+        }
       } finally {
         setSubmitting(false)
       }
@@ -119,4 +125,14 @@ export const LoginForm = ({ onLogin }) => {
   )
 }
 
+type LoginModalProps = {
+  isShowing: boolean,
+  hide: Function,
+  onLogin: Function
+}
+export const LoginModal: React.FunctionComponent<LoginModalProps> = ({ isShowing, hide, onLogin }) =>
+  <Modal show={isShowing} onHideClick={hide}>
+    <LoginForm onLogin={onLogin} />
+  </Modal>
+
 export default LoginForm
diff --git a/components/lib/api.js b/components/lib/api.js
deleted file mode 100644
index 55ddf33..0000000
--- a/components/lib/api.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import Axios from 'axios'
-
-export const apiEndpoints = {
-  ACCOUNT_METADATA: '/api/_/account_metadata',
-  USER_REGISTER: '/api/v1/user_register',
-  USER_LOGIN: '/api/v1/user_login',
-  RULE_LIST: '/api/_/url-priorities/list',
-  RULE_UPDATE: '/api/_/url-priorities/update',
-  COUNTRIES_LIST: '/api/_/countries',
-  // Submissions
-  SUBMISSION_LIST: '/api/v1/url-submission/test-list',
-  SUBMISSION_ADD: '/api/v1/url-submission/add-url',
-  SUBMISSION_UPDATE: '/api/v1/url-submission/update-url',
-  SUBMISSION_STATE: '/api/v1/url-submission/state',
-  SUBMISSION_DIFF: '/api/v1/url-submission/diff',
-  SUBMISSION_SUBMIT: '/api/v1/url-submission/submit'
-}
-
-const axios = Axios.create({
-  baseURL: process.env.NEXT_PUBLIC_OONI_API,
-  withCredentials: true
-})
-
-export const fetcher = async (url) => {
-  try {
-    const res = await axios.get(url)
-    return res.data.rules ?? res.data
-  } catch (e) {
-    const error = new Error(e?.response?.data?.error ?? e.message)
-    error.info = e?.response?.statusText
-    error.status = e?.response?.status
-    throw error
-  }
-}
-
-export const fetchTestList = async (url, cc) => {
-  try {
-    const res = await axios.get(`${url}/${cc}`)
-    return res.data
-  } catch (e) {
-    const error = new Error(e.response?.data?.error ?? e.message)
-    error.info = e.response.statusText
-    error.status = e.response.status
-    throw error
-  }
-}
-
-export const getAPI = async (endpoint, params = {}, config = {}) => {
-  return await axios.request({
-    method: config.method ?? 'GET',
-    url: endpoint,
-    params: params,
-    ...config
-  })
-    .then(res => res.data)
-    .catch(e => {
-      const error = new Error(e?.response?.data?.error ?? e.message)
-      error.info = e?.response?.statusText
-      error.status = e?.response?.status
-      throw error
-    })
-}
-
-const postAPI = async (endpoint, params, config) => {
-  return await getAPI(endpoint, null, { method: 'POST', data: params })
-}
-
-export const registerUser = async (email, nickname) => {
-  console.debug('Called registerUser with', email, nickname)
-  const data = await postAPI(apiEndpoints.USER_REGISTER, {
-    email_address: email,
-    nickname: nickname
-  })
-  return data
-}
-
-export const loginUser = async (token) => {
-  return await getAPI(apiEndpoints.USER_LOGIN, { k: token })
-}
-
-export const updateRule = (oldEntry, newEntry) => {
-  console.debug('Called updateRule with old_entry', oldEntry, 'new_entry', newEntry)
-  return axios.post(apiEndpoints.RULE_UPDATE, {
-    old_entry: oldEntry,
-    new_entry: newEntry
-  })
-    .then(res => res.data)
-}
-
-export const deleteRule = (oldEntry) => {
-  console.debug('Called deleteRule with old_entry', oldEntry)
-  return updateRule(oldEntry, {})
-}
-
-export const addURL = async (newEntry, cc, comment) => {
-  console.debug('Called addURL with new_entry', newEntry)
-  const data = await postAPI(apiEndpoints.SUBMISSION_UPDATE, {
-    country_code: cc,
-    comment: comment,
-    new_entry: newEntry,
-    old_entry: {}
-  })
-  return data.updated_entry
-}
-
-export const updateURL = async (cc, comment, oldEntry, newEntry) => {
-  console.debug('Called updateURL with old_entry', oldEntry, 'new_entry', newEntry)
-  const data = await postAPI(apiEndpoints.SUBMISSION_UPDATE, {
-    country_code: cc,
-    comment: comment,
-    old_entry: oldEntry,
-    new_entry: newEntry
-  })
-  return data.updated_entry
-}
-
-export const deleteURL = async (cc, comment, oldEntry) => {
-  console.debug('Called deleteURL with oldEntry', oldEntry)
-  const data = await postAPI(apiEndpoints.SUBMISSION_UPDATE, {
-    country_code: cc,
-    comment: comment,
-    old_entry: oldEntry,
-    new_entry: {}
-  })
-  return data.updated_entry
-}
-
-export const submitChanges = async () => {
-  console.debug('Called submitChanges')
-  const data = await postAPI(apiEndpoints.SUBMISSION_SUBMIT)
-  return data.pr_id
-}
-
-export const customErrorRetry = (error, key, config, revalidate, opts) => {
-  // This overrides the default exponential backoff algorithm
-  // Instead it uses the `errorRetryInterval` and `errorRetryCount` configuration to
-  // limit the retries
-  const maxRetryCount = config.errorRetryCount
-  if (maxRetryCount !== undefined && opts.retryCount > maxRetryCount) return
-
-  // Never retry on 4xx errors
-  if (Math.floor(error.status / 100) === 4) return
-
-  setTimeout(revalidate, config.errorRetryInterval, opts)
-}
diff --git a/components/lib/api.ts b/components/lib/api.ts
new file mode 100644
index 0000000..914aa62
--- /dev/null
+++ b/components/lib/api.ts
@@ -0,0 +1,188 @@
+import Axios, { AxiosRequestConfig } from 'axios'
+import { SWRConfiguration } from 'swr'
+import { IApiError, Entry, ListURL, PriorityRuleEntry } from '../types'
+
+export const apiEndpoints = {
+  ACCOUNT_METADATA: '/api/_/account_metadata',
+  USER_REGISTER: '/api/v1/user_register',
+  USER_LOGIN: '/api/v1/user_login',
+  USER_LOGOUT: '/api/v1/user_logout',
+  RULE_LIST: '/api/_/url-priorities/list',
+  RULE_UPDATE: '/api/_/url-priorities/update',
+  COUNTRIES_LIST: '/api/_/countries',
+  // Submissions
+  SUBMISSION_LIST: '/api/v1/url-submission/test-list',
+  SUBMISSION_ADD: '/api/v1/url-submission/add-url',
+  SUBMISSION_UPDATE: '/api/v1/url-submission/update-url',
+  SUBMISSION_STATE: '/api/v1/url-submission/state',
+  SUBMISSION_DIFF: '/api/v1/url-submission/diff',
+  SUBMISSION_SUBMIT: '/api/v1/url-submission/submit'
+}
+
+export enum eApiEndpoints {
+  ACCOUNT_METADATA = '/api/_/account_metadata',
+  USER_REGISTER= '/api/v1/user_register',
+  USER_LOGIN = '/api/v1/user_login',
+  USER_LOGOUT = '/api/v1/user_logout',
+  RULE_LIST = '/api/_/url-priorities/list',
+  RULE_UPDATE = '/api/_/url-priorities/update',
+  COUNTRIES_LIST = '/api/_/countries',
+  // Submissions
+  SUBMISSION_LIST = '/api/v1/url-submission/test-list',
+  SUBMISSION_ADD = '/api/v1/url-submission/add-url',
+  SUBMISSION_UPDATE = '/api/v1/url-submission/update-url',
+  SUBMISSION_STATE = '/api/v1/url-submission/state',
+  SUBMISSION_DIFF = '/api/v1/url-submission/diff',
+  SUBMISSION_SUBMIT = '/api/v1/url-submission/submit'
+}
+
+const axios = Axios.create({
+  baseURL: process.env.NEXT_PUBLIC_OONI_API,
+  withCredentials: true
+})
+
+interface IFetcherError extends Error {
+  info?: string
+  status?: string
+}
+
+export const fetcher = async (url: string) => {
+  try {
+    const res = await axios.get(url)
+    return res.data.rules ?? res.data
+  } catch (e) {
+    let error: IFetcherError
+    if (Axios.isAxiosError(e) && e.response) {
+      error = new Error(e.response?.data?.error)
+      error.info = e.response.statusText
+      error.status = String(e.response.status)
+    } else {
+      error = new Error((e as Error).message)
+      error.info = ''
+      error.status = ''
+    }
+    throw error
+  }
+}
+
+export const fetchTestList = async (url: string, cc: string) => {
+  try {
+    const res = await axios.get<ListURL[]>(`${url}/${cc}`)
+    return res.data
+  } catch (e) {
+    let error: IFetcherError
+    if (Axios.isAxiosError(e) && e.response) {
+      error = new Error(e.response?.data?.error)
+      error.info = e.response.statusText
+      error.status = String(e.response.status)
+    } else {
+      error = new Error((e as Error).message)
+      error.info = ''
+      error.status = ''
+    }
+    throw error
+  }
+}
+
+export const getAPI = async (endpoint: eApiEndpoints, params: any = {}, config: AxiosRequestConfig = {}) => {
+  return await axios.request({
+    method: config.method ?? 'GET',
+    url: endpoint,
+    params: params,
+    ...config
+  })
+    .then(res => res.data)
+    .catch(e => {
+      const error = new Error(e?.response?.data?.error ?? e.message) as IApiError
+      error.info = e?.response?.statusText
+      error.status = e?.response?.status
+      throw error
+    })
+}
+
+const postAPI = async (endpoint: eApiEndpoints, params?: any, config?: AxiosRequestConfig) => {
+  return await getAPI(endpoint, {}, { ...config, method: 'POST', data: params })
+}
+
+export const registerUser = async (email: string, nickname: string) => {
+  console.debug('Called registerUser with', email, nickname)
+  const data = await postAPI(eApiEndpoints.USER_REGISTER, {
+    email_address: email,
+    nickname: nickname
+  })
+  return data
+}
+
+export const loginUser = async (token: string) => {
+  return await getAPI(eApiEndpoints.USER_LOGIN, { k: token })
+}
+
+export const logoutUser = async () => {
+  return await getAPI(eApiEndpoints.ACCOUNT_METADATA)
+}
+
+export const updateRule = (oldEntry: PriorityRuleEntry, newEntry: PriorityRuleEntry | {}) => {
+  console.debug('Called updateRule with old_entry', oldEntry, 'new_entry', newEntry)
+  return axios.post(eApiEndpoints.RULE_UPDATE, {
+    old_entry: oldEntry,
+    new_entry: newEntry
+  })
+    .then(res => res.data)
+}
+
+export const deleteRule = (oldEntry: PriorityRuleEntry) => {
+  console.debug('Called deleteRule with old_entry', oldEntry)
+  return updateRule(oldEntry, {})
+}
+
+export const addURL = async (newEntry: Entry, cc: string, comment: string) => {
+  console.debug('Called addURL with new_entry', newEntry)
+  const data = await postAPI(eApiEndpoints.SUBMISSION_UPDATE, {
+    country_code: cc,
+    comment: comment,
+    new_entry: newEntry,
+    old_entry: {}
+  })
+  return data.updated_entry
+}
+
+export const updateURL = async (cc: string, comment: string, oldEntry: Entry, newEntry: Entry) => {
+  console.debug('Called updateURL with old_entry', oldEntry, 'new_entry', newEntry)
+  const data = await postAPI(eApiEndpoints.SUBMISSION_UPDATE, {
+    country_code: cc,
+    comment: comment,
+    old_entry: oldEntry,
+    new_entry: newEntry
+  })
+  return data.updated_entry
+}
+
+export const deleteURL = async (cc: string, comment: string, oldEntry: Entry) => {
+  console.debug('Called deleteURL with oldEntry', oldEntry)
+  const data = await postAPI(eApiEndpoints.SUBMISSION_UPDATE, {
+    country_code: cc,
+    comment: comment,
+    old_entry: oldEntry,
+    new_entry: {}
+  })
+  return data.updated_entry
+}
+
+export const submitChanges = async () => {
+  console.debug('Called submitChanges')
+  const data = await postAPI(eApiEndpoints.SUBMISSION_SUBMIT)
+  return data.pr_id
+}
+
+export const customErrorRetry: SWRConfiguration['onErrorRetry'] = (error, key, config, revalidate, opts) => {
+  // This overrides the default exponential backoff algorithm
+  // Instead it uses the `errorRetryInterval` and `errorRetryCount` configuration to
+  // limit the retries
+  const maxRetryCount = config.errorRetryCount
+  if (maxRetryCount !== undefined && opts.retryCount > maxRetryCount) return
+
+  // Never retry on 4xx errors
+  if (Math.floor(error.status / 100) === 4) return
+
+  setTimeout(revalidate, config.errorRetryInterval, opts)
+}
diff --git a/components/lib/hooks.js b/components/lib/hooks.tsx
similarity index 100%
rename from components/lib/hooks.js
rename to components/lib/hooks.tsx
diff --git a/components/lib/notifier.js b/components/lib/notifier.tsx
similarity index 89%
rename from components/lib/notifier.js
rename to components/lib/notifier.tsx
index 6c2ae27..7142526 100644
--- a/components/lib/notifier.js
+++ b/components/lib/notifier.tsx
@@ -6,8 +6,8 @@ const NotifyComponent = () => <Toaster position='top-right' />
 
 export const useNotifier = () => {
   const Notification = React.memo(NotifyComponent)
-  const error = (message) => {
-    toast.error((t) => {
+  const error: typeof toast['error'] = (message) => {
+    return toast.error((t) => {
       return (
         <Flex justifyContent='space-between' alignItems='center' sx={{ width: '100%' }}>
           <Box width={4 / 5}>{message}</Box>
diff --git a/components/lib/translateErrors.js b/components/lib/translateErrors.ts
similarity index 50%
rename from components/lib/translateErrors.js
rename to components/lib/translateErrors.ts
index cf97265..e2e2612 100644
--- a/components/lib/translateErrors.js
+++ b/components/lib/translateErrors.ts
@@ -4,12 +4,18 @@
   ]
 */
 
-const commonErrorsMap = [
+type PatternMessagePairs = Array<[RegExp, string]>
+
+const commonErrorsMap: PatternMessagePairs = [
   [/is duplicate$/, 'This URL is already part of this list.'],
   [/Invalid URL$/, 'The URL is not in a valid format. Here is an example of a valid one: http://ooni.org/']
 ]
 
-const errorsMap = {
+type ErrorsMapType = {
+  [key: string]: PatternMessagePairs
+}
+
+const errorsMap: ErrorsMapType = {
   add: [
     ...commonErrorsMap,
   ],
@@ -18,9 +24,9 @@ const errorsMap = {
   ]
 }
 
-export const getPrettyErrorMessage = (rawErrorMessage, context) => {
+export const getPrettyErrorMessage = (rawErrorMessage: string, context: string): string => {
   if (context in errorsMap) {
-    return errorsMap[context].find(([regex, prettyMessage]) => regex.test(rawErrorMessage))?.[1] ?? rawErrorMessage
+    return errorsMap[context].find(([regex]) => regex.test(rawErrorMessage))?.[1] ?? rawErrorMessage
   }
   return rawErrorMessage
 }
diff --git a/components/submit/CategoryList.js b/components/submit/CategoryList.tsx
similarity index 68%
rename from components/submit/CategoryList.js
rename to components/submit/CategoryList.tsx
index 5c31eb3..45e8bd1 100644
--- a/components/submit/CategoryList.js
+++ b/components/submit/CategoryList.tsx
@@ -1,6 +1,9 @@
+import { HTMLAttributes } from 'react'
 import categories from '../lib/category_codes.json'
 
-const CategoryList = ({ name, defaultValue, ...rest }) => (
+type CategoryListProps = HTMLAttributes<HTMLSelectElement> & { name: string, required: boolean }
+
+const CategoryList = ({ name, defaultValue, ...rest }: CategoryListProps) => (
   <select name={name} {...rest}>
     <option value=''>Select a category</option>
     {Object.entries(categories)
diff --git a/components/submit/CountryList.js b/components/submit/CountryList.tsx
similarity index 54%
rename from components/submit/CountryList.js
rename to components/submit/CountryList.tsx
index 55c5827..1226613 100644
--- a/components/submit/CountryList.js
+++ b/components/submit/CountryList.tsx
@@ -1,15 +1,26 @@
 import React from 'react'
 import countryUtil from 'country-util'
 
-const CountryList = ({ defaultValue, ...rest }) => {
+type CountryListProps = {
+  defaultValue: string
+  onChange: React.ChangeEventHandler<HTMLSelectElement>
+}
+
+type CountryEntry = {
+  iso3166_alpha2: string
+  iso3166_name: string
+  name: string
+}
+
+const CountryList = ({ defaultValue, ...rest }: CountryListProps) => {
   return (
     <select {...rest} defaultValue={defaultValue}>
       {/* First option shows up only on home page (when defaultValue is not passed) */}
       <option value=''>Select a country</option>
       <option value='global'>Global</option>
       {countryUtil.countryList
-        .sort((c1, c2) => c1.iso3166_name > c2.iso3166_name ? 1 : -1)
-        .map(({ iso3166_alpha2, name }, index) => (
+        .sort((c1: CountryEntry, c2: CountryEntry) => c1.iso3166_name > c2.iso3166_name ? 1 : -1)
+        .map(({ iso3166_alpha2, name }: CountryEntry, index: number) => (
           <option key={index} value={iso3166_alpha2} selected={defaultValue === iso3166_alpha2}>{name}</option>
         ))
       }
diff --git a/components/submit/DeleteForm.js b/components/submit/DeleteForm.tsx
similarity index 64%
rename from components/submit/DeleteForm.js
rename to components/submit/DeleteForm.tsx
index 363e13d..86fe9bf 100644
--- a/components/submit/DeleteForm.js
+++ b/components/submit/DeleteForm.tsx
@@ -1,11 +1,13 @@
-import { useCallback } from 'react'
+import React, { useCallback } from 'react'
 import { Button, Flex, Heading, Input } from 'ooni-components'
 
-const DeleteForm = ({ oldEntry, onDelete, onCancel, error }) => {
-  const handleSubmit = useCallback((e) => {
+import { DeleteFormProps } from '../types'
+
+const DeleteForm = ({ oldEntry, onDelete, onCancel }: DeleteFormProps) => {
+  const handleSubmit = useCallback((e: React.SyntheticEvent) => {
     e.preventDefault()
-    const formData = new FormData(e.target)
-    const comment = formData.get('comment')
+    const formData = new FormData(e.target as HTMLFormElement)
+    const comment = formData.get('comment') as string
     onDelete(null, comment)
   }, [onDelete])
 
diff --git a/components/submit/EditForm.js b/components/submit/EditForm.tsx
similarity index 77%
rename from components/submit/EditForm.js
rename to components/submit/EditForm.tsx
index 07ad0b1..7cf2afd 100644
--- a/components/submit/EditForm.js
+++ b/components/submit/EditForm.tsx
@@ -1,51 +1,54 @@
-import { useCallback, useState } from 'react'
-import { Button, Flex, Heading, Label as LLabel } from 'ooni-components'
-import { Input } from 'ooni-components/dist/components'
+import React, { SyntheticEvent, useCallback, useState } from 'react'
+import { Button, Flex, Heading, Label as LLabel, Input } from 'ooni-components'
 
 import CategoryList from './CategoryList'
+import { Entry, EditFormProps } from '../types'
 
 // Regular expression to test for valid URLs based on
 // https://github.com/citizenlab/test-lists/blob/master/scripts/lint-lists.py#L18
 // FIX: This regex works at https://regexr.com/629v6 but not here. Using a generic regex in the URL input below
 // const urlRegex = /^(?:http)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.|[A-Z0-9-]{2,}\.?)|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?::\d+)?(?:\/?|[/?]\S+)$/i
 
-const Label = ({ children }) => <LLabel fontWeight='bold' my={2} fontSize={1}>{children}</LLabel>
+type LabelProps = {
+  children: React.ReactNode
+}
+const Label = ({ children }: LabelProps & React.HTMLProps<HTMLLabelElement>) => <LLabel fontWeight='bold' my={2} fontSize={1}>{children}</LLabel>
 
 const defaultSource = 'test-lists.ooni.org contribution'
 
-export const EditForm = ({ oldEntry, error, onSubmit, onCancel, layout = 'column' }) => {
+export const EditForm = ({ oldEntry, onSubmit, onCancel, layout = 'column' }: EditFormProps) => {
   const [submitting, setSubmitting] = useState(false)
   const isEdit = 'url' in oldEntry
 
-  const handleSubmit = useCallback(async (e) => {
+  const handleSubmit = useCallback(async (e: SyntheticEvent) => {
     e.preventDefault()
     setSubmitting(true)
 
-    const formData = new FormData(e.target)
-    const categoryCode = formData.get('category_code')
+    const formElement = e.target as HTMLFormElement
+    const formData = new FormData(formElement)
     const today = new Date().toISOString().split('T')[0]
 
     // Add a trailing slash to the URL
     // * if not already added by user
     // * if the URL doesn't contain a path component (e.g "https://ooni.org/blog/test-lists")
-    let url = formData.get('url')
+    let url = formData.get('url') as string
     if (!url.endsWith('/') && !url.match(/\..+\/.+/)) {
       url = url + '/'
     }
 
-    const newEntry = {
+    const newEntry: Entry = {
       url: url,
-      category_code: categoryCode,
+      category_code: formData.get('category_code') as string,
       date_added: oldEntry.date_added ?? today,
       source: oldEntry.source ?? defaultSource,
-      notes: formData.get('notes')
+      notes: formData.get('notes') as string
     }
 
     const comment = formData.get('comment')
     try {
       await onSubmit(newEntry, comment)
       console.debug('onSubmit succeeded')
-      e.target.reset()
+      formElement.reset()
     } catch (e) {
       // Submit failed, don't change form state yet
       console.debug(`Submit failed: ${e}`)
@@ -85,7 +88,7 @@ export const EditForm = ({ oldEntry, error, onSubmit, onCancel, layout = 'column
 
         <Flex flexDirection='column' my={2} width={width} px={3} flexGrow={'auto'}>
           <Label htmlFor='comment'>Comment</Label>
-          <Input name='comment' type='text' required={true} placeholder="Please share why you are updating this URL" defaultValue={oldEntry.comment} />
+          <Input name='comment' type='text' required={true} placeholder="Please share why you are updating this URL" />
         </Flex>
 
         {isEdit && (
diff --git a/components/submit/Error.js b/components/submit/Error.tsx
similarity index 61%
rename from components/submit/Error.js
rename to components/submit/Error.tsx
index e750458..dedd10e 100644
--- a/components/submit/Error.js
+++ b/components/submit/Error.tsx
@@ -1,6 +1,11 @@
+import * as React from 'react'
 import { Box, Flex, Heading } from 'ooni-components'
 
-const Error = ({ children, ...rest }) => (
+type ErrorProps = {
+  children: React.ReactNode
+}
+
+const Error: React.FunctionComponent<ErrorProps> = ({ children, ...rest }) => (
   <Flex my={2} px={4} pb={3} color='gray6' bg='red1' flexDirection='column' {...rest}>
     <Heading h={5}>Errors</Heading>
     <Box as='pre'>
diff --git a/components/submit/ModalWithEsc.js b/components/submit/ModalWithEsc.tsx
similarity index 51%
rename from components/submit/ModalWithEsc.js
rename to components/submit/ModalWithEsc.tsx
index be5354b..1252e93 100644
--- a/components/submit/ModalWithEsc.js
+++ b/components/submit/ModalWithEsc.tsx
@@ -1,8 +1,15 @@
 import { Modal } from 'ooni-components'
-import { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 
-const ModalWithEsc = ({ onHideClick, onCancel, ...rest }) => {
-  const onKeyPress = useCallback((e) => {
+type ModalWithEscProps = {
+  onCancel: () => void
+  show: boolean
+  onHideClick: () => void
+  children: React.ReactNode
+}
+
+const ModalWithEsc: React.FunctionComponent<ModalWithEscProps> = ({ onCancel, ...rest }) => {
+  const onKeyPress = useCallback((e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       onCancel()
     }
diff --git a/components/submit/QuickStartGuide.js b/components/submit/QuickStartGuide.tsx
similarity index 100%
rename from components/submit/QuickStartGuide.js
rename to components/submit/QuickStartGuide.tsx
diff --git a/components/submit/SubmissionContext.js b/components/submit/SubmissionContext.js
deleted file mode 100644
index b035161..0000000
--- a/components/submit/SubmissionContext.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import useSWR from 'swr'
-import { apiEndpoints, customErrorRetry, fetcher } from '../lib/api'
-
-export const SubmissionContext = React.createContext()
-
-// TOOD: Handle when the API request fails
-export const PageContextProvider = ({ children }) => {
-  const { data, mutate } = useSWR(apiEndpoints.SUBMISSION_STATE, fetcher, {
-    errorRetryCount: 2,
-    onErrorRetry: customErrorRetry
-  })
-
-  const { state, pr_url } = data ?? { state: 'CLEAN', pr_url: undefined }
-
-  return (
-    <SubmissionContext.Provider value={{ submissionState: state, linkToPR: pr_url, mutate }}>
-      {children}
-    </SubmissionContext.Provider>
-  )
-}
diff --git a/components/submit/SubmissionContext.tsx b/components/submit/SubmissionContext.tsx
new file mode 100644
index 0000000..ead03d1
--- /dev/null
+++ b/components/submit/SubmissionContext.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import useSWR from 'swr'
+import { customErrorRetry, eApiEndpoints, fetcher } from '../lib/api'
+import { SubmissionContextType } from '../types'
+
+export const SubmissionContext = React.createContext<SubmissionContextType>({} as SubmissionContextType)
+
+type PageContextProviderProps = {
+  children?: React.ReactNode
+}
+
+// TOOD: Handle when the API request fails
+export const PageContextProvider = ({ children }: PageContextProviderProps) => {
+  const { data, mutate } = useSWR(eApiEndpoints.SUBMISSION_STATE, fetcher, {
+    errorRetryCount: 2,
+    onErrorRetry: customErrorRetry
+  })
+
+  const { state, pr_url } = data ?? { state: 'CLEAN', pr_url: undefined }
+
+  return (
+    <SubmissionContext.Provider value={{ submissionState: state, linkToPR: pr_url, mutate }}>
+      {children}
+    </SubmissionContext.Provider>
+  )
+}
diff --git a/components/submit/SubmitButton.js b/components/submit/SubmitButton.tsx
similarity index 94%
rename from components/submit/SubmitButton.js
rename to components/submit/SubmitButton.tsx
index 1df99d6..cd1ae99 100644
--- a/components/submit/SubmitButton.js
+++ b/components/submit/SubmitButton.tsx
@@ -7,6 +7,7 @@ import { submitChanges } from '../lib/api'
 import reviewAnimation from './review-animation.json'
 import { SubmissionContext } from './SubmissionContext'
 import { useNotifier } from '../lib/notifier'
+import { SubmissionContextType } from '../types'
 
 const FloatingBox = styled(Box)`
   position: fixed;
@@ -22,9 +23,9 @@ const AttributionBox = styled(Box)`
   opacity: 0.5;
 `
 
-const SubmitButton = () => {
+const SubmitButton: React.FunctionComponent = () => {
   const { notify } = useNotifier()
-  const { submissionState, linkToPR, mutate } = useContext(SubmissionContext)
+  const { submissionState, linkToPR, mutate } = useContext(SubmissionContext) as SubmissionContextType
 
   const onSubmit = useCallback(() => {
     const loadingNotification = notify.loading('Submitting...')
diff --git a/components/submit/UrlList.js b/components/submit/UrlList.tsx
similarity index 86%
rename from components/submit/UrlList.js
rename to components/submit/UrlList.tsx
index 57efd2c..2e0e24f 100644
--- a/components/submit/UrlList.js
+++ b/components/submit/UrlList.tsx
@@ -13,24 +13,29 @@ import SubmitButton from './SubmitButton'
 import { getPrettyErrorMessage } from '../lib/translateErrors'
 import { SubmissionContext } from './SubmissionContext'
 import { useNotifier } from '../lib/notifier'
+import { Entry } from '../types'
+
+type UrlListProps = {
+  cc: string
+}
 
 // Does these
 // * Decides what data to pass down to the table
 // * Controls when the table is allowed to reset its state
 //   e.g when editing is going on, no resetting sort order
-const UrlList = ({ cc }) => {
+const UrlList = ({ cc }: UrlListProps) => {
   const { notify } = useNotifier()
   // holds rowIndex of row being edited
-  const [editIndex, setEditIndex] = useState(null)
-  const [deleteIndex, setDeleteIndex] = useState(null)
+  const [editIndex, setEditIndex] = useState<number | null>(null)
+  const [deleteIndex, setDeleteIndex] = useState<number | null>(null)
   // controls when table state can be reset
   const [skipPageReset, setSkipPageResest] = useState(false)
   // error to show when the edit form modal is on
-  const [editFormError, setEditFormError] = useState(null)
+  const [editFormError, setEditFormError] = useState<string | null>(null)
   // error to show when add action fails
-  const [addFormError, setAddFormError] = useState(null)
+  const [addFormError, setAddFormError] = useState<string | null>(null)
 
-  const { data, error, mutate } = useSWR(
+  const { data, error, mutate } = useSWR<Entry []>(
     [apiEndpoints.SUBMISSION_LIST, cc],
     fetchTestList,
     {
@@ -44,8 +49,8 @@ const UrlList = ({ cc }) => {
 
   const { submissionState, mutate: mutateSubmissionState } = useContext(SubmissionContext)
 
-  const entryToEdit = useMemo(() => {
-    let entry = {}
+  const entryToEdit: Entry = useMemo(() => {
+    let entry = {} as Entry
     if (data) {
       if (editIndex !== null && editIndex > -1) {
         entry = data[editIndex]
@@ -54,18 +59,22 @@ const UrlList = ({ cc }) => {
         entry = data[deleteIndex]
       }
     }
-    delete entry.category_description
     return entry
   }, [data, editIndex, deleteIndex])
 
-  const onEdit = useCallback((index) => {
+  const onEdit = useCallback((index: number) => {
     setSkipPageResest(true)
     setEditIndex(index)
     setEditFormError(null)
   }, [])
 
-  const handleSubmit = useCallback((newEntry, comment) => {
-    const actionPromise = new Promise((resolve, reject) => {
+  type HandleSubmitFunction = (newEntry: Entry, comment: string) => void
+
+  const handleSubmit: HandleSubmitFunction = useCallback((newEntry, comment) => {
+    if (!data) {
+      return
+    }
+    const actionPromise = new Promise<void>((resolve, reject) => {
       if (deleteIndex !== null) {
         // Delete
         deleteURL(cc, comment, entryToEdit).then(() => {
@@ -135,7 +144,7 @@ const UrlList = ({ cc }) => {
     setEditFormError(null)
   }
 
-  const onDelete = useCallback((index) => {
+  const onDelete = useCallback((index: number) => {
     setDeleteIndex(index)
   }, [])
 
@@ -158,9 +167,10 @@ const UrlList = ({ cc }) => {
     <Flex flexDirection='column' my={2}>
       {data && !error && (
         <>
+          {/* Form to add a new URL */}
           <Box p={2}>
             {submissionState !== 'PR_OPEN' &&
-              <EditForm layout='row' onSubmit={handleSubmit} oldEntry={{}} error={addFormError} />
+              <EditForm layout='row' onSubmit={handleSubmit} oldEntry={{} as Entry} error={addFormError} />
             }
           </Box>
 
diff --git a/components/types.ts b/components/types.ts
new file mode 100644
index 0000000..1b4fdb8
--- /dev/null
+++ b/components/types.ts
@@ -0,0 +1,65 @@
+import { AxiosError } from 'axios'
+import { SWRResponse } from 'swr'
+
+export interface IApiError extends AxiosError {
+  info?: string
+  status?: string
+}
+
+export type ListURL = {
+  category_code: string
+  date_added: string
+  notes: string
+  source: string
+  url: string
+}
+
+export type Entry = {
+  category_code: string
+  date_added: string
+  notes: string
+  url: string
+  source: string
+}
+
+export type UpdateURLPayload = {
+  comment: string
+  country_code: string
+  new_entry: Entry,
+  old_entry: Entry
+}
+
+export type PriorityRuleEntry = {
+  category_code: string
+  cc: string
+  domain: string
+  priority: number
+  url: string
+}
+
+export enum SubmissiontState {
+  CLEAN = 'CLEAN',
+  IN_PROGRESS = 'IN_PROGRESS',
+  PR_OPEN = 'PR_OPEN',
+}
+
+export type SubmissionContextType = {
+  submissionState: SubmissiontState,
+  linkToPR: string,
+  mutate: SWRResponse<any, Error>['mutate']
+}
+
+type FormProps = {
+  onCancel?: Function,
+  layout?: 'row' | 'column'
+  error: string | null
+  oldEntry: Entry
+}
+
+export type EditFormProps = FormProps & {
+  onSubmit: Function
+}
+
+export type DeleteFormProps = FormProps & {
+  onDelete: Function
+}
diff --git a/country-util.d.ts b/country-util.d.ts
new file mode 100644
index 0000000..e865f8c
--- /dev/null
+++ b/country-util.d.ts
@@ -0,0 +1 @@
+declare module 'country-util'
diff --git a/ooni-components.d.ts b/ooni-components.d.ts
new file mode 100644
index 0000000..2d7af59
--- /dev/null
+++ b/ooni-components.d.ts
@@ -0,0 +1 @@
+declare module 'ooni-components';
diff --git a/pages/[cc].js b/pages/[cc].tsx
similarity index 84%
rename from pages/[cc].js
rename to pages/[cc].tsx
index 7731b0f..51b4b8a 100644
--- a/pages/[cc].js
+++ b/pages/[cc].tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import React, { useCallback } from 'react'
 import { useRouter } from 'next/router'
 import { Heading } from 'ooni-components'
 
@@ -12,9 +12,9 @@ export default function Submit () {
   const router = useRouter()
   const { query: { cc } } = router
 
-  const countryCode = typeof cc === 'string' ? cc.toUpperCase() : cc
+  const countryCode = String(cc).toUpperCase()
 
-  const onCountryChange = useCallback((e) => {
+  const onCountryChange: React.ChangeEventHandler<HTMLSelectElement> = useCallback((e) => {
     const selectedCountry = e.target.value
     router.push(`/${selectedCountry}`, undefined, { shallow: true })
   }, [router])
diff --git a/pages/_app.js b/pages/_app.tsx
similarity index 87%
rename from pages/_app.js
rename to pages/_app.tsx
index 7e5992f..c14712e 100644
--- a/pages/_app.js
+++ b/pages/_app.tsx
@@ -2,6 +2,7 @@
 import { theme } from 'ooni-components'
 import { createGlobalStyle, ThemeProvider } from 'styled-components'
 import 'fontsource-fira-sans/latin.css'
+import { AppProps } from 'next/app'
 
 const GlobalStyle = createGlobalStyle`
   * {
@@ -18,7 +19,7 @@ const GlobalStyle = createGlobalStyle`
   }
 `
 
-function MyApp ({ Component, pageProps }) {
+function MyApp ({ Component, pageProps }: AppProps) {
   return (
     <>
       <GlobalStyle />
diff --git a/pages/_document.js b/pages/_document.tsx
similarity index 50%
rename from pages/_document.js
rename to pages/_document.tsx
index fc6cf47..231bbe8 100644
--- a/pages/_document.js
+++ b/pages/_document.tsx
@@ -1,8 +1,9 @@
-import Document from 'next/document'
+import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
+import React from 'react'
 import { ServerStyleSheet } from 'styled-components'
 
 export default class MyDocument extends Document {
-  static async getInitialProps (ctx) {
+  static async getInitialProps (ctx: DocumentContext) {
     const sheet = new ServerStyleSheet()
     const originalRenderPage = ctx.renderPage
 
@@ -10,18 +11,17 @@ export default class MyDocument extends Document {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
-            sheet.collectStyles(<App {...props} />)
+            sheet.collectStyles(<App {...props} />),
         })
 
-      const initialProps = await Document.getInitialProps(ctx)
+      const initialProps: DocumentInitialProps = await Document.getInitialProps(ctx)
+
       return {
         ...initialProps,
-        styles: (
-          <>
-            {initialProps.styles}
-            {sheet.getStyleElement()}
-          </>
-        )
+        styles: [
+          initialProps.styles,
+          sheet.getStyleElement()
+        ]
       }
     } finally {
       sheet.seal()
diff --git a/pages/index.js b/pages/index.tsx
similarity index 86%
rename from pages/index.js
rename to pages/index.tsx
index 6607fc5..b2986b0 100644
--- a/pages/index.js
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import React, { useCallback } from 'react'
 import { useRouter } from 'next/router'
 import { Flex, Box, Heading } from 'ooni-components'
 
@@ -12,7 +12,7 @@ const Home = () => {
   const router = useRouter()
   const { user, loading } = useUser()
 
-  const onCountryChange = useCallback((e) => {
+  const onCountryChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
     const selectedCountry = e.target.value
     router.push(`/${selectedCountry}`, undefined, { shallow: true })
   }, [router])
@@ -26,7 +26,7 @@ const Home = () => {
           <Flex alignItems='center' justifyContent='center' flexDirection='column' my='auto'>
             <Heading h={4} my={4}>Which country&apos;s test list would you like to contribute to?</Heading>
             <Box my={2}>
-              <CountryList onChange={onCountryChange} />
+              <CountryList defaultValue='' onChange={onCountryChange} />
             </Box>
           </Flex>
         }
diff --git a/pages/login.js b/pages/login.tsx
similarity index 91%
rename from pages/login.js
rename to pages/login.tsx
index 7d727d6..517806e 100644
--- a/pages/login.js
+++ b/pages/login.tsx
@@ -14,9 +14,10 @@ import QuickStartGuide from '../components/submit/QuickStartGuide'
 const Login = () => {
   const [submitted, setSubmitted] = useState(false)
   const [loggedIn, setLoggedIn] = useState(false)
-  const [error, setError] = useState(null)
+  const [error, setError] = useState<string|null>(null)
   const router = useRouter()
-  const { token, returnTo = '/' } = router.query
+  const token = String(router.query.token)
+  const returnTo = String(router.query.returnTo)
 
   const { user, loading } = useUser()
 
@@ -40,14 +41,16 @@ const Login = () => {
   // This fetches and sets the authentication cookie
   useEffect(() => {
     if (token) {
-      const login = async (token) => {
+      const login = async (token: string) => {
         try {
           await loginUser(token)
           setLoggedIn(true)
           afterLogin()
         } catch (e) {
           console.log(e)
-          setError(e.message)
+          if (e instanceof Error) {
+            setError(e.message)
+          }
         }
       }
       login(token)
diff --git a/pages/logout.tsx b/pages/logout.tsx
new file mode 100644
index 0000000..c7e3dbb
--- /dev/null
+++ b/pages/logout.tsx
@@ -0,0 +1,6 @@
+
+export default function Logout () {
+  return (
+    <div> Logout Page </div>
+  )
+}
diff --git a/tsconfig.json b/tsconfig.json
index 6db37c0..c4ab2fb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,7 @@
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "incremental": true,