diff --git a/.prettierrc b/.prettierrc
index 4e6236837..1bf6f85af 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,7 +3,13 @@
   "tabWidth": 2,
   "singleQuote": true,
   "quoteProps": "consistent",
-  "importOrder": ["^react$", "^@testing-library/(.*)$", "<THIRD_PARTY_MODULES>", "^[./]"],
+  "importOrder": [
+    "^react$",
+    "^@testing-library/(.*)$",
+    "<THIRD_PARTY_MODULES>",
+    "^[./]"
+  ],
   "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
-}
\ No newline at end of file
+  "importOrderSortSpecifiers": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+}
diff --git a/__tests__/components/DateSelectField.test.tsx b/__tests__/components/DateSelectField.test.tsx
index afd1cb5cd..e46fc6de7 100644
--- a/__tests__/components/DateSelectField.test.tsx
+++ b/__tests__/components/DateSelectField.test.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import '@testing-library/jest-dom/extend-expect'
 import { render, screen } from '@testing-library/react'
 
@@ -10,7 +8,7 @@ import DateSelectField from '../../src/components/DateSelectField'
 
 expect.extend(toHaveNoViolations)
 
-const DateSelectMock: FC<DateSelectProps> = ({ label }: DateSelectProps) => {
+const DateSelectMock = ({ label }: DateSelectProps) => {
   return <div data-testid="date-selector">{label}</div>
 }
 
diff --git a/__tests__/components/IdleTimeout.test.tsx b/__tests__/components/IdleTimeout.test.tsx
index fe8e5991e..813e76fc8 100644
--- a/__tests__/components/IdleTimeout.test.tsx
+++ b/__tests__/components/IdleTimeout.test.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react'
-
 import '@testing-library/jest-dom/extend-expect'
 import { render, screen, waitFor } from '@testing-library/react'
 
 import IdleTimeout from '../../src/components/IdleTimeout'
 import { ModalProps } from '../../src/components/Modal'
 
-const ModalMock: FC<ModalProps> = ({ open }: ModalProps) => {
+const ModalMock = ({ open }: ModalProps) => {
   return <div data-testid="modal">{open ? 'modal-opened' : 'modal-closed'}</div>
 }
 
@@ -31,7 +29,7 @@ describe('IdleTimeout', () => {
         expect(modal).toBeInTheDocument()
         expect(modal.textContent).toMatch('modal-opened')
       },
-      { timeout: 3000 }
+      { timeout: 3000 },
     )
   })
 })
diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index fb051cbfb..102cdedf6 100644
--- a/src/components/ActionButton.tsx
+++ b/src/components/ActionButton.tsx
@@ -1,4 +1,4 @@
-import { FC, MouseEventHandler } from 'react'
+import { MouseEventHandler } from 'react'
 
 export type ActionButtonSize = 'xs' | 'sm' | 'md' | 'lg'
 
@@ -29,7 +29,7 @@ const styles = {
     'border-blue-dark bg-blue-dark text-basic-white hover:bg-blue-normal active:bg-blue-active focus:bg-blue-normal focus:text-basic-white',
 }
 
-const ActionButton: FC<ActionButtonProps> = ({
+const ActionButton = ({
   disabled,
   fullWidth,
   id,
@@ -38,7 +38,7 @@ const ActionButton: FC<ActionButtonProps> = ({
   style,
   text,
   type,
-}) => {
+}: ActionButtonProps) => {
   const baseClasses =
     'align-middle border font-display inline-flex items-center justify-center shadow-sm disabled:cursor-not-allowed disabled:opacity-70 disabled:pointer-events-none disabled:shadow-none focus:ring-1 focus:ring-black focus:ring-offset-2'
   const fullWidthClasses = fullWidth ? 'w-full' : undefined
diff --git a/src/components/AlertBlock.tsx b/src/components/AlertBlock.tsx
index 4c474ba95..c2cad9380 100644
--- a/src/components/AlertBlock.tsx
+++ b/src/components/AlertBlock.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import { useTranslation } from 'next-i18next'
 
 import { AlertPage } from '../lib/types'
@@ -12,7 +10,7 @@ export interface AlertBlockProps {
   className?: string
 }
 
-const AlertBlock: FC<AlertBlockProps> = ({ page, className }) => {
+const AlertBlock = ({ page, className }: AlertBlockProps) => {
   const { data } = useAlerts({ page })
   const { i18n } = useTranslation()
 
diff --git a/src/components/AlertSection.tsx b/src/components/AlertSection.tsx
index 6d01051c4..cbd6284bf 100644
--- a/src/components/AlertSection.tsx
+++ b/src/components/AlertSection.tsx
@@ -1,8 +1,8 @@
-import { FC, PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 
 import { AlertType } from '../lib/types'
 
-export interface AlertSectionProps {
+export interface AlertSectionProps extends PropsWithChildren {
   type: AlertType
   className?: string
 }
@@ -72,11 +72,7 @@ const svg = (type: AlertType) => {
   }
 }
 
-const AlertSection: FC<PropsWithChildren<AlertSectionProps>> = ({
-  children,
-  type,
-  className,
-}) => {
+const AlertSection = ({ children, type, className }: AlertSectionProps) => {
   const borderColor = borderColors[type]
 
   return (
diff --git a/src/components/ApplicationNameBar.tsx b/src/components/ApplicationNameBar.tsx
index 6976b704f..401faf691 100644
--- a/src/components/ApplicationNameBar.tsx
+++ b/src/components/ApplicationNameBar.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import Link from 'next/link'
 
 export interface ApplicationNameBarProps {
@@ -7,7 +5,7 @@ export interface ApplicationNameBarProps {
   href: string
 }
 
-const ApplicationNameBar: FC<ApplicationNameBarProps> = ({ text, href }) => {
+const ApplicationNameBar = ({ text, href }: ApplicationNameBarProps) => {
   return (
     <div id="app-bar" className="bg-blue-dark">
       <section className="container mx-auto p-4">
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 5826f6e6b..44c6cd018 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -1,11 +1,9 @@
-import { FC } from 'react'
-
 export interface BannerProps {
   alert: string
   description: string
 }
 
-const Banner: FC<BannerProps> = ({ alert, description }) => {
+const Banner = ({ alert, description }: BannerProps) => {
   return (
     <div className="bg-blue-normal font-body text-white">
       <div className="container mx-auto flex flex-col space-y-2 p-4 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0">
diff --git a/src/components/CheckStatusInfo.tsx b/src/components/CheckStatusInfo.tsx
index 0d5a204d4..9fbcc18ee 100644
--- a/src/components/CheckStatusInfo.tsx
+++ b/src/components/CheckStatusInfo.tsx
@@ -1,7 +1,6 @@
-import { FC, MouseEventHandler } from 'react'
+import { MouseEventHandler } from 'react'
 
-import { CheckStatusApiResponse } from '../lib/types'
-import { StatusCode } from '../lib/types'
+import { CheckStatusApiResponse, StatusCode } from '../lib/types'
 import ActionButton, { ActionButtonStyle } from './ActionButton'
 import CheckStatusFileBeingProcessed from './check-status-responses/CheckStatusFileBeingProcessed'
 import CheckStatusNoRecord from './check-status-responses/CheckStatusNoRecord'
@@ -18,13 +17,13 @@ export interface CheckStatusInfoProps {
   checkStatusResponse?: CheckStatusApiResponse | null
 }
 
-export const CheckStatusInfo: FC<CheckStatusInfoProps> = ({
+export const CheckStatusInfo = ({
   goBackText,
   id,
   onGoBackClick,
   goBackStyle,
   checkStatusResponse,
-}) => {
+}: CheckStatusInfoProps) => {
   //Determine which status response to render
   let statusComponent
   switch (checkStatusResponse?.status) {
diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index 3c755102b..d8391121b 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -1,11 +1,11 @@
-import { FC, useId } from 'react'
+import { useId } from 'react'
 
 export interface CollapseProps {
   title: string
   children?: React.ReactNode
 }
 
-const Collapse: FC<CollapseProps> = ({ title, children }) => {
+const Collapse = ({ title, children }: CollapseProps) => {
   const id = useId()
   return (
     <details
diff --git a/src/components/DateModified.tsx b/src/components/DateModified.tsx
index 09ae254d7..23cdc29cc 100644
--- a/src/components/DateModified.tsx
+++ b/src/components/DateModified.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 export interface DateModifiedProps {
   // text to be displayed
   text?: string
@@ -11,7 +9,7 @@ export interface DateModifiedProps {
 /**
  * Contains build time stamp
  */
-const DateModified: FC<DateModifiedProps> = ({ id, text }) => {
+const DateModified = ({ id, text }: DateModifiedProps) => {
   return (
     <dl id={id} className="container mx-auto py-8 px-4">
       <dt className="inline">{text}</dt>
diff --git a/src/components/DateSelect.tsx b/src/components/DateSelect.tsx
index e7842c86c..adc22f5ac 100644
--- a/src/components/DateSelect.tsx
+++ b/src/components/DateSelect.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 export interface DateSelectOption {
   value: string
   label: string
@@ -9,7 +7,7 @@ export type DateSelectType = 'year' | 'month' | 'day'
 
 export type DateSelectOnChangeEvent = (
   e: React.ChangeEvent<HTMLSelectElement>,
-  type: DateSelectType
+  type: DateSelectType,
 ) => void
 
 export interface DateSelectProps {
@@ -25,7 +23,7 @@ export interface DateSelectProps {
   value: string
 }
 
-const DateSelect: FC<DateSelectProps> = ({
+const DateSelect = ({
   ariaDescribedby,
   dateSelectLabelId,
   error,
@@ -36,9 +34,9 @@ const DateSelect: FC<DateSelectProps> = ({
   required,
   type,
   value,
-}) => {
+}: DateSelectProps) => {
   const handleOnSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (
-    e
+    e,
   ) => onChange(e, type)
 
   return (
diff --git a/src/components/DateSelectField.tsx b/src/components/DateSelectField.tsx
index 719fa980c..6e06877f7 100644
--- a/src/components/DateSelectField.tsx
+++ b/src/components/DateSelectField.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { getDaysInMonth, isExists } from 'date-fns'
 import { useTranslation } from 'next-i18next'
@@ -32,7 +32,7 @@ interface DateSelectState {
   yearValue: string
 }
 
-const DateSelectField: FC<DateSelectFieldProps> = ({
+const DateSelectField = ({
   errorMessage,
   firstYear,
   helpMessage,
@@ -43,7 +43,7 @@ const DateSelectField: FC<DateSelectFieldProps> = ({
   required,
   textRequired,
   value,
-}) => {
+}: DateSelectFieldProps) => {
   const { t } = useTranslation()
 
   const [state, setState] = useState<DateSelectState & { changeCount: number }>(
@@ -53,7 +53,7 @@ const DateSelectField: FC<DateSelectFieldProps> = ({
       monthValue: '',
       yearValue: '',
       changeCount: 0, // HACK: Use this state as a dependency of the `useEffect` below so that `onChange` is called only when it should be.
-    }
+    },
   )
 
   const dateSelectErrorMessageId = `date-select-${id}-error`
@@ -126,7 +126,7 @@ const DateSelectField: FC<DateSelectFieldProps> = ({
         }
       })
     },
-    []
+    [],
   )
 
   // Sync from the state to the upper component through onChange when necessary.
@@ -239,7 +239,7 @@ const padZero = (value: number, maxLength: number): string => {
 }
 
 const parseDateString = (
-  dateString: string
+  dateString: string,
 ): {
   year: string
   month: string
diff --git a/src/components/ErrorLayout.tsx b/src/components/ErrorLayout.tsx
index 21573c113..f9c03ebdd 100644
--- a/src/components/ErrorLayout.tsx
+++ b/src/components/ErrorLayout.tsx
@@ -1,12 +1,10 @@
-import { FC } from 'react'
+import { PropsWithChildren } from 'react'
 
 import Image from 'next/image'
 
-export interface ErrorLayoutProps {
-  children?: React.ReactNode
-}
+export interface ErrorLayoutProps extends PropsWithChildren {}
 
-const ErrorLayout: FC<ErrorLayoutProps> = ({ children }) => {
+const ErrorLayout = ({ children }: ErrorLayoutProps) => {
   return (
     <div className="flex min-h-screen flex-col">
       <header className="container mx-auto my-6 px-4">
diff --git a/src/components/ErrorSummary.tsx b/src/components/ErrorSummary.tsx
index 17066d1d3..df7c8d764 100644
--- a/src/components/ErrorSummary.tsx
+++ b/src/components/ErrorSummary.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react'
+import { useEffect } from 'react'
 
 import { FormikErrors, FormikValues } from 'formik'
 import { Namespace, TFunction } from 'i18next'
@@ -16,7 +16,7 @@ export interface ErrorSummaryProps {
 
 export const getErrorSummaryItem = (
   feildId: string,
-  errorMessage: string
+  errorMessage: string,
 ): ErrorSummaryItem => ({
   feildId,
   errorMessage,
@@ -24,7 +24,7 @@ export const getErrorSummaryItem = (
 
 export const getErrorSummaryItems = <T extends FormikValues>(
   formErrors: FormikErrors<T>,
-  t: TFunction<Namespace, undefined>
+  t: TFunction<Namespace, undefined>,
 ) => {
   return Object.keys(formErrors)
     .filter((key) => !!formErrors[key])
@@ -33,13 +33,13 @@ export const getErrorSummaryItems = <T extends FormikValues>(
 
 export const goToErrorSummary = (errorSummaryId: string) => {
   const errorSummaryEl = document.querySelector<HTMLElement>(
-    `#${errorSummaryId}`
+    `#${errorSummaryId}`,
   )
   errorSummaryEl?.scrollIntoView({ behavior: 'smooth', block: 'center' })
   errorSummaryEl?.focus()
 }
 
-const ErrorSummary: FC<ErrorSummaryProps> = ({ id, errors, summary }) => {
+const ErrorSummary = ({ id, errors, summary }: ErrorSummaryProps) => {
   useEffect(() => {
     goToErrorSummary(id)
   }, [id])
diff --git a/src/components/ExampleImage.tsx b/src/components/ExampleImage.tsx
index 2730f5832..6fea22ee1 100644
--- a/src/components/ExampleImage.tsx
+++ b/src/components/ExampleImage.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 
 import Image from 'next/image'
 
@@ -14,11 +14,7 @@ export interface ExampleImageProps extends PropsWithChildren {
   imageProps: ImageProps
 }
 
-const ExampleImage: FC<ExampleImageProps> = ({
-  children,
-  title,
-  imageProps,
-}) => {
+const ExampleImage = ({ children, title, imageProps }: ExampleImageProps) => {
   return (
     <>
       {title && (
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
index eb819ef66..a5aae6cbb 100644
--- a/src/components/ExternalLink.tsx
+++ b/src/components/ExternalLink.tsx
@@ -1,7 +1,6 @@
 import {
   AnchorHTMLAttributes,
   DetailedHTMLProps,
-  FC,
   PropsWithChildren,
 } from 'react'
 
@@ -16,11 +15,11 @@ export interface ExternalLinkProps
   href: string
 }
 
-export const ExternalLink: FC<ExternalLinkProps> = ({
+export const ExternalLink = ({
   children,
   href,
   ...rest
-}) => {
+}: ExternalLinkProps) => {
   const { t } = useTranslation(['common'])
   return (
     <a {...rest} href={href} target="_blank" rel="noopener noreferrer">
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 4694cea84..920411824 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import Image from 'next/image'
 
 import DateModified from './DateModified'
@@ -43,7 +41,7 @@ export interface FooterProps {
 /**
  * footer element for all pages
  */
-const Footer: FC<FooterProps> = ({
+const Footer = ({
   dateModifiedText,
   footerHeader,
   footerLogo,
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 639835f5d..8b8bf0129 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,3 @@
-import React, { FC } from 'react'
-
 import { useTranslation } from 'next-i18next'
 import getConfig from 'next/config'
 import Image from 'next/image'
@@ -14,7 +12,7 @@ export interface HeaderProps {
   skipToMainText: string
 }
 
-const Header: FC<HeaderProps> = ({ gocLink, skipToMainText }) => {
+const Header = ({ gocLink, skipToMainText }: HeaderProps) => {
   const config = getConfig()
   const { locale, asPath } = useRouter()
   const { t } = useTranslation('common')
diff --git a/src/components/IdleTimeout.tsx b/src/components/IdleTimeout.tsx
index 522764b06..b9230c477 100644
--- a/src/components/IdleTimeout.tsx
+++ b/src/components/IdleTimeout.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { deleteCookie } from 'cookies-next'
 import { useTranslation } from 'next-i18next'
@@ -11,7 +11,7 @@ export interface IdleTimeoutProps
   extends Pick<IIdleTimerProps, 'promptBeforeIdle'>,
     Pick<IIdleTimerProps, 'timeout'> {}
 
-const IdleTimeout: FC<IdleTimeoutProps> = ({ promptBeforeIdle, timeout }) => {
+const IdleTimeout = ({ promptBeforeIdle, timeout }: IdleTimeoutProps) => {
   const { t } = useTranslation('common')
   const router = useRouter()
   const [modalOpen, setModalOpen] = useState(false)
@@ -38,7 +38,7 @@ const IdleTimeout: FC<IdleTimeoutProps> = ({ promptBeforeIdle, timeout }) => {
     const minutes = Math.floor(getRemainingTime() / 60000)
     const seconds = Math.floor((getRemainingTime() / 1000) % 60).toFixed(0)
     setTimeRemaining(
-      minutes + ':' + (parseInt(seconds) < 10 ? '0' : '') + seconds
+      minutes + ':' + (parseInt(seconds) < 10 ? '0' : '') + seconds,
     )
   }, [getRemainingTime])
 
diff --git a/src/components/InputErrorMessage.tsx b/src/components/InputErrorMessage.tsx
index 1501c07af..9ae70337a 100644
--- a/src/components/InputErrorMessage.tsx
+++ b/src/components/InputErrorMessage.tsx
@@ -1,11 +1,9 @@
-import { FC } from 'react'
-
 export interface InputErrorMessageProps {
   id?: string
   message: string
 }
 
-const InputErrorMessage: FC<InputErrorMessageProps> = ({ id, message }) => {
+const InputErrorMessage = ({ id, message }: InputErrorMessageProps) => {
   return (
     <div
       id={id}
diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
index 02a15084a..8b8db8bf2 100644
--- a/src/components/InputField.tsx
+++ b/src/components/InputField.tsx
@@ -1,5 +1,3 @@
-import React, { FC } from 'react'
-
 import InputErrorMessage from './InputErrorMessage'
 import InputLabel from './InputLabel'
 
@@ -17,7 +15,7 @@ export interface InputFieldProps {
   onChange?: React.ChangeEventHandler<HTMLInputElement>
 }
 
-const InputField: FC<InputFieldProps> = ({
+const InputField = ({
   id,
   label,
   name,
@@ -29,7 +27,7 @@ const InputField: FC<InputFieldProps> = ({
   value,
   max,
   helpMessage,
-}) => {
+}: InputFieldProps) => {
   const inputErrorMessageId = `input-${id}-error`
   const inputHelpMessageId = `input-${id}-help`
   const inputWrapperId = `input-${id}`
diff --git a/src/components/InputLabel.tsx b/src/components/InputLabel.tsx
index 31577191b..674b99312 100644
--- a/src/components/InputLabel.tsx
+++ b/src/components/InputLabel.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 export interface InputLabelProps {
   htmlFor?: string
   id: string
@@ -8,13 +6,13 @@ export interface InputLabelProps {
   textRequired?: string
 }
 
-const InputLabel: FC<InputLabelProps> = ({
+const InputLabel = ({
   htmlFor,
   id,
   label,
   required,
   textRequired,
-}) => {
+}: InputLabelProps) => {
   return (
     <label id={id} htmlFor={htmlFor} className="mb-2 block font-bold">
       {required && (
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 07d658dc5..3b4ccff04 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react'
+import { PropsWithChildren } from 'react'
 
 import { useTranslation } from 'next-i18next'
 
@@ -6,11 +6,9 @@ import AlertBlock from './AlertBlock'
 import Footer from './Footer'
 import Header from './Header'
 
-export interface LayoutProps {
-  children: ReactNode
-}
+export interface LayoutProps extends PropsWithChildren {}
 
-const Layout: FC<LayoutProps> = ({ children }) => {
+const Layout = ({ children }: LayoutProps) => {
   const { t } = useTranslation('common')
 
   return (
diff --git a/src/components/LinkButton.tsx b/src/components/LinkButton.tsx
index 2fb659507..d0d09de74 100644
--- a/src/components/LinkButton.tsx
+++ b/src/components/LinkButton.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { PropsWithChildren } from 'react'
 
 import Link, { LinkProps } from 'next/link'
 
@@ -6,8 +6,7 @@ export type LinkButtonSize = 'xs' | 'sm' | 'md' | 'lg'
 
 export type LinkButtonStyle = 'default' | 'primary'
 
-export interface LinkButtonProps extends LinkProps {
-  children?: React.ReactNode
+export interface LinkButtonProps extends LinkProps, PropsWithChildren {
   external?: boolean
   fullWidth?: boolean
   id?: string
@@ -28,7 +27,7 @@ const styles = {
   primary: `bg-blue-dark border-blue-dark text-basic-white active:bg-blue-active focus:bg-blue-normal focus:text-basic-white hover:bg-blue-normal hover:text-basic-white visited:text-basic-white`,
 }
 
-const LinkButton: FC<LinkButtonProps> = ({
+const LinkButton = ({
   children,
   external,
   fullWidth,
@@ -38,7 +37,7 @@ const LinkButton: FC<LinkButtonProps> = ({
   lang,
   size,
   style,
-}) => {
+}: LinkButtonProps) => {
   const baseClasses =
     'align-middle border font-display inline-flex items-center justify-center no-underline shadow-sm text-center focus:ring-1 focus:ring-black focus:ring-offset-2'
   const fullWidthClasses = fullWidth ? 'w-full' : undefined
diff --git a/src/components/MarkdownContent.tsx b/src/components/MarkdownContent.tsx
index c64f56c53..84b0e376e 100644
--- a/src/components/MarkdownContent.tsx
+++ b/src/components/MarkdownContent.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import Markdown from 'markdown-to-jsx'
 
 import ExternalLink from './ExternalLink'
@@ -9,7 +7,7 @@ export type MarkdownContentProps = {
   header: boolean
 }
 
-const MarkdownContent: FC<MarkdownContentProps> = ({ markdown, header }) => (
+const MarkdownContent = ({ markdown, header }: MarkdownContentProps) => (
   <Markdown
     options={{
       overrides: {
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index a2f9daf49..15071c7ab 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,24 +1,23 @@
-import { FC, ReactNode, useEffect, useId, useRef } from 'react'
+import { PropsWithChildren, useEffect, useId, useRef } from 'react'
 
 import { FocusOn } from 'react-focus-on'
 
 import ActionButton, { ActionButtonProps } from './ActionButton'
 
-export interface ModalProps {
+export interface ModalProps extends PropsWithChildren {
   actionButtons: ActionButtonProps[]
-  children: ReactNode
   header: string
   onClose: EventListener
   open: boolean
 }
 
-const Modal: FC<ModalProps> = ({
+const Modal = ({
   actionButtons,
   children,
   header,
   onClose,
   open,
-}) => {
+}: ModalProps) => {
   const dialogRef = useRef<HTMLDialogElement>(null)
   const id = useId()
 
diff --git a/src/components/__mocks__/Layout.tsx b/src/components/__mocks__/Layout.tsx
index 86df232f0..056d7f07d 100644
--- a/src/components/__mocks__/Layout.tsx
+++ b/src/components/__mocks__/Layout.tsx
@@ -1,5 +1,7 @@
-import { FC, PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 
-const Layout: FC<PropsWithChildren> = ({ children }) => <>{children}</>
+export interface LayoutProps extends PropsWithChildren {}
+
+const Layout = ({ children }: LayoutProps) => <>{children}</>
 
 export default Layout
diff --git a/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx b/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx
index 0dce2c95f..238b8d11e 100644
--- a/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx
+++ b/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx
@@ -1,11 +1,9 @@
-import { FC } from 'react'
-
 import { Trans, useTranslation } from 'next-i18next'
 
 import AlertBlock from '../AlertBlock'
 import ExternalLink from '../ExternalLink'
 
-export const CheckStatusFileBeingProcessed: FC<{}> = () => {
+export const CheckStatusFileBeingProcessed = () => {
   const { t } = useTranslation(['status', 'common'])
   return (
     <>
diff --git a/src/components/check-status-responses/CheckStatusNoRecord.tsx b/src/components/check-status-responses/CheckStatusNoRecord.tsx
index a6775576f..ccc3ed357 100644
--- a/src/components/check-status-responses/CheckStatusNoRecord.tsx
+++ b/src/components/check-status-responses/CheckStatusNoRecord.tsx
@@ -1,11 +1,9 @@
-import { FC } from 'react'
-
 import { Trans, useTranslation } from 'next-i18next'
 
 import AlertBlock from '../AlertBlock'
 import ExternalLink from '../ExternalLink'
 
-export const CheckStatusNoRecord: FC<{}> = () => {
+export const CheckStatusNoRecord = () => {
   const { t } = useTranslation(['status', 'common'])
   return (
     <>
diff --git a/src/components/check-status-responses/CheckStatusNotAcceptable.tsx b/src/components/check-status-responses/CheckStatusNotAcceptable.tsx
index c4ac1a510..22f443d95 100644
--- a/src/components/check-status-responses/CheckStatusNotAcceptable.tsx
+++ b/src/components/check-status-responses/CheckStatusNotAcceptable.tsx
@@ -1,11 +1,9 @@
-import { FC } from 'react'
-
 import { Trans, useTranslation } from 'next-i18next'
 
 import AlertBlock from '../AlertBlock'
 import ExternalLink from '../ExternalLink'
 
-export const CheckStatusNotAcceptable: FC<{}> = () => {
+export const CheckStatusNotAcceptable = () => {
   const { t } = useTranslation(['status', 'common'])
   return (
     <>
diff --git a/src/components/check-status-responses/CheckStatusReadyForPickup.tsx b/src/components/check-status-responses/CheckStatusReadyForPickup.tsx
index 987244000..0e0e2883f 100644
--- a/src/components/check-status-responses/CheckStatusReadyForPickup.tsx
+++ b/src/components/check-status-responses/CheckStatusReadyForPickup.tsx
@@ -1,11 +1,9 @@
-import { FC } from 'react'
-
 import { useTranslation } from 'next-i18next'
 
 import AlertBlock from '../AlertBlock'
 import AlertSection from '../AlertSection'
 
-export const CheckStatusReadyForPickup: FC<{}> = () => {
+export const CheckStatusReadyForPickup = () => {
   const { t } = useTranslation('status')
   return (
     <>
diff --git a/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx b/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx
index baa56bbba..62deea246 100644
--- a/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx
+++ b/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import { Trans, useTranslation } from 'next-i18next'
 
 import AlertBlock from '../AlertBlock'
@@ -10,9 +8,9 @@ export interface CheckStatusShippingCanadaPostProps {
   trackingNumber?: string
 }
 
-export const CheckStatusShippingCanadaPost: FC<
-  CheckStatusShippingCanadaPostProps
-> = ({ trackingNumber }) => {
+export const CheckStatusShippingCanadaPost = ({
+  trackingNumber,
+}: CheckStatusShippingCanadaPostProps) => {
   const { t } = useTranslation(['status', 'common'])
 
   return (
diff --git a/src/components/check-status-responses/CheckStatusShippingFedex.tsx b/src/components/check-status-responses/CheckStatusShippingFedex.tsx
index 588b08e59..b9f6d9cc1 100644
--- a/src/components/check-status-responses/CheckStatusShippingFedex.tsx
+++ b/src/components/check-status-responses/CheckStatusShippingFedex.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import { Trans, useTranslation } from 'next-i18next'
 
 import AlertBlock from '../AlertBlock'
@@ -10,9 +8,9 @@ export interface CheckStatusShippingFedexProps {
   trackingNumber?: string
 }
 
-export const CheckStatusShippingFedex: FC<CheckStatusShippingFedexProps> = ({
+export const CheckStatusShippingFedex = ({
   trackingNumber,
-}) => {
+}: CheckStatusShippingFedexProps) => {
   const { t } = useTranslation(['status', 'common'])
   return (
     <>
diff --git a/src/components/error-pages/Error404Page.tsx b/src/components/error-pages/Error404Page.tsx
index 819b456f8..65f229e50 100644
--- a/src/components/error-pages/Error404Page.tsx
+++ b/src/components/error-pages/Error404Page.tsx
@@ -1,11 +1,9 @@
-import { FC } from 'react'
-
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
 
 import ErrorLayout from '../ErrorLayout'
 
-const Error404Page: FC = () => {
+const Error404Page = () => {
   return (
     <ErrorLayout>
       <NextSeo
diff --git a/src/components/error-pages/ErrorPage.tsx b/src/components/error-pages/ErrorPage.tsx
index 2ec85a01a..32cc742a3 100644
--- a/src/components/error-pages/ErrorPage.tsx
+++ b/src/components/error-pages/ErrorPage.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
 
@@ -9,7 +7,7 @@ export interface ErrorPageProps {
   statusCode?: number
 }
 
-const ErrorPage: FC<ErrorPageProps> = ({ statusCode }) => {
+const ErrorPage = ({ statusCode }: ErrorPageProps) => {
   return (
     <ErrorLayout>
       <NextSeo
diff --git a/src/lib/logger.js b/src/lib/logger.js
index 1fbd00cb1..50eb9623c 100644
--- a/src/lib/logger.js
+++ b/src/lib/logger.js
@@ -6,14 +6,14 @@ const logger = (() => {
         console.error(
           '%c Error:',
           'background: red; color: white;',
-          ...messages
+          ...messages,
         )
         break
       case 'warn':
         console.warn(
           '%c Warning:',
           'background: orange; color: white;',
-          ...messages
+          ...messages,
         )
         break
       case 'info':
diff --git a/src/lib/mappers/checkStatusApiResponseMapper.ts b/src/lib/mappers/checkStatusApiResponseMapper.ts
index 01d37b58b..3ec40898c 100644
--- a/src/lib/mappers/checkStatusApiResponseMapper.ts
+++ b/src/lib/mappers/checkStatusApiResponseMapper.ts
@@ -11,11 +11,11 @@ import {
  * @returns Frontend check status object
  */
 export const mapToCheckStatusApiResponse = (
-  getCertificateApplicationResponse: PassportStatusesGetCertificateApplicationResponse
+  getCertificateApplicationResponse: PassportStatusesGetCertificateApplicationResponse,
 ): CheckStatusApiResponse => ({
   manifestNumber: getManifestNumber(
     getCertificateApplicationResponse.CertificateApplication
-      .CertificateApplicationIdentification
+      .CertificateApplicationIdentification,
   ),
   status:
     getCertificateApplicationResponse.CertificateApplication
@@ -27,11 +27,11 @@ export const mapToCheckStatusApiResponse = (
  * where category text is equals to "Manifest Number", and undefined otherwise
  */
 export const getManifestNumber = (
-  identifications?: PassportStatusesCertificateApplicationIdentification[]
+  identifications?: PassportStatusesCertificateApplicationIdentification[],
 ): string | undefined => {
   return identifications?.find(
     (x) =>
       x.IdentificationCategoryText.toLowerCase() ===
-      'Manifest Number'.toLowerCase()
+      'Manifest Number'.toLowerCase(),
   )?.IdentificationID
 }
diff --git a/src/lib/useAlerts.ts b/src/lib/useAlerts.ts
index 073768fbd..d496b2be7 100644
--- a/src/lib/useAlerts.ts
+++ b/src/lib/useAlerts.ts
@@ -4,7 +4,7 @@ import { ApiError } from 'next/dist/server/api-utils'
 import { Alert, AlertApiRequestQuery } from './types'
 
 export const fetchAlerts = async (
-  alertQuery: AlertApiRequestQuery
+  alertQuery: AlertApiRequestQuery,
 ): Promise<Alert[] | null> => {
   const query = new URLSearchParams({
     ...alertQuery,
@@ -23,7 +23,7 @@ export const fetchAlerts = async (
 export const useAlerts = (alertQuery: AlertApiRequestQuery) => {
   const query = useQuery<Alert[] | null, ApiError, Alert[] | null>(
     ['ps:api:alerts', alertQuery],
-    async () => await fetchAlerts(alertQuery)
+    async () => await fetchAlerts(alertQuery),
   )
 
   return {
diff --git a/src/lib/useCheckStatus.ts b/src/lib/useCheckStatus.ts
index 4fb54cdbf..13087aa47 100644
--- a/src/lib/useCheckStatus.ts
+++ b/src/lib/useCheckStatus.ts
@@ -5,7 +5,7 @@ import { CheckStatusApiRequestQuery, CheckStatusApiResponse } from './types'
 
 export const fetchCheckStatus = async (
   checkStatusApiRequestQuery: CheckStatusApiRequestQuery,
-  init?: RequestInit
+  init?: RequestInit,
 ): Promise<CheckStatusApiResponse | null> => {
   const query = new URLSearchParams({
     ...checkStatusApiRequestQuery,
@@ -22,7 +22,7 @@ export const useCheckStatus = (
     CheckStatusApiResponse | null,
     ApiError,
     CheckStatusApiResponse | null
-  >
+  >,
 ) => {
   const query = useQuery<
     CheckStatusApiResponse | null,
@@ -31,7 +31,7 @@ export const useCheckStatus = (
   >(
     ['ps:api:check-status', checkStatusApiRequestQuery],
     ({ signal }) => fetchCheckStatus(checkStatusApiRequestQuery, { signal }),
-    { ...(queryOptions ?? {}) }
+    { ...(queryOptions ?? {}) },
   )
 
   // fix isLoading with disabled: false
diff --git a/src/lib/useEmailEsrf.ts b/src/lib/useEmailEsrf.ts
index 54878d0d3..beee9d0b8 100644
--- a/src/lib/useEmailEsrf.ts
+++ b/src/lib/useEmailEsrf.ts
@@ -4,7 +4,7 @@ import { ApiError } from 'next/dist/server/api-utils'
 import { EmailEsrfApiRequestBody } from './types'
 
 const useEmailEsrf = (
-  options?: UseMutationOptions<void, ApiError, EmailEsrfApiRequestBody>
+  options?: UseMutationOptions<void, ApiError, EmailEsrfApiRequestBody>,
 ) => {
   return useMutation<void, ApiError, EmailEsrfApiRequestBody>(async (body) => {
     const response = await fetch('/api/email-esrf', {
diff --git a/src/lib/utils/next-i18next-utils.ts b/src/lib/utils/next-i18next-utils.ts
index 77116c9d9..b4a4daae7 100644
--- a/src/lib/utils/next-i18next-utils.ts
+++ b/src/lib/utils/next-i18next-utils.ts
@@ -18,7 +18,7 @@ export const getNamespaces = (
   namespacesRequired:
     | Readonly<FlatNamespace>
     | ReadonlyArray<FlatNamespace>
-    | undefined = undefined
+    | undefined = undefined,
 ) => {
   // default with namespaces to always needed
   const namespaces: Array<FlatNamespace> = defaultNamespaces
@@ -46,11 +46,11 @@ export const pageWithServerSideTranslations = async (
   namespacesRequired:
     | FlatNamespace
     | Array<FlatNamespace>
-    | undefined = undefined
+    | undefined = undefined,
 ) => {
   return serverSideTranslations(
     locale ?? nextI18nextConfig.i18n.defaultLocale,
     getNamespaces(namespacesRequired),
-    nextI18nextConfig
+    nextI18nextConfig,
   )
 }
diff --git a/src/logging/log-util.tsx b/src/logging/log-util.tsx
index 2b37a6c52..06b67e39b 100644
--- a/src/logging/log-util.tsx
+++ b/src/logging/log-util.tsx
@@ -3,7 +3,7 @@ import pino, { Logger, stdTimeFunctions } from 'pino'
 import logLevelData from './log-level'
 
 const logLevels = new Map<string, string | undefined>(
-  Object.entries(logLevelData)
+  Object.entries(logLevelData),
 )
 
 export function getLogLevel(logger: string): string {
diff --git a/src/next-seo.config.ts b/src/next-seo.config.ts
index 6baab53a4..b121fd5ce 100644
--- a/src/next-seo.config.ts
+++ b/src/next-seo.config.ts
@@ -11,7 +11,7 @@ export interface LanguageAlternate {
 
 export const getLanguageAlternates = (
   appBaseUri: string,
-  router: NextSEORouter
+  router: NextSEORouter,
 ): ReadonlyArray<LanguageAlternate> | undefined => {
   if (!appBaseUri) return
   return [
@@ -27,7 +27,7 @@ export const getLanguageAlternates = (
 }
 
 export const getOpenGraphImages = (
-  appBaseUri: string
+  appBaseUri: string,
 ): ReadonlyArray<OpenGraphMedia> | undefined => {
   if (!appBaseUri) return
   return [
@@ -41,7 +41,7 @@ export const getOpenGraphImages = (
 
 export type GetNextSEOConfig = (
   appBaseUri: string,
-  router: NextSEORouter
+  router: NextSEORouter,
 ) => DefaultSeoProps
 
 export const getDefaultConfig: GetNextSEOConfig = (appBaseUri, router) => ({
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index d5e78ecdc..5c13adfb2 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -9,7 +9,7 @@ import Document, {
 
 class MyDocument extends Document {
   static async getInitialProps(
-    ctx: DocumentContext
+    ctx: DocumentContext,
   ): Promise<DocumentInitialProps> {
     const initialProps = await Document.getInitialProps(ctx)
 
diff --git a/src/pages/api/alerts.ts b/src/pages/api/alerts.ts
index f36fa4e01..885206fdf 100644
--- a/src/pages/api/alerts.ts
+++ b/src/pages/api/alerts.ts
@@ -7,13 +7,13 @@ const logger = getLogger('get-alerts')
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<Alert[] | string>
+  res: NextApiResponse<Alert[] | string>,
 ) {
   try {
     if (!process.env.ALERT_JSON_URI) {
       logger.error('ALERT_JSON_URI must not be undefined, null or empty')
       throw Error(
-        'process.env.ALERT_JSON_URI must not be undefined, null or empty'
+        'process.env.ALERT_JSON_URI must not be undefined, null or empty',
       )
     }
 
@@ -34,15 +34,15 @@ export default async function handler(
 
     const validAlerts = alertData?.jsonAlerts.filter(
       (alert) =>
-        new Date(alert.validFrom) <= now && new Date(alert.validTo) >= now
+        new Date(alert.validFrom) <= now && new Date(alert.validTo) >= now,
     )
 
     const pageAlerts = page
-      ? validAlerts.filter((alert) =>
-          alert.pages?.find((alertPage) => alertPage === page)
+      ? validAlerts.filter(
+          (alert) => alert.pages?.find((alertPage) => alertPage === page),
         )
       : validAlerts.filter(
-          (alert) => alert.pages === undefined || alert.pages?.length === 0
+          (alert) => alert.pages === undefined || alert.pages?.length === 0,
         )
 
     const alerts: Alert[] = pageAlerts.map((alert) => ({
diff --git a/src/pages/api/check-status.ts b/src/pages/api/check-status.ts
index 3b997aa4a..2b62162b6 100644
--- a/src/pages/api/check-status.ts
+++ b/src/pages/api/check-status.ts
@@ -12,7 +12,7 @@ const logger = getLogger('check-status')
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<CheckStatusApiResponse | string>
+  res: NextApiResponse<CheckStatusApiResponse | string>,
 ) {
   if (req.method !== 'GET') {
     logger.debug(`error 405: Invalid request method ${req.method}`)
@@ -43,14 +43,14 @@ export default async function handler(
  */
 export const searchPassportStatusApi = async (
   res: NextApiResponse<CheckStatusApiResponse | string>,
-  checkStatusApiRequestQuery: CheckStatusApiRequestQuery
+  checkStatusApiRequestQuery: CheckStatusApiRequestQuery,
 ) => {
   if (!process.env.PASSPORT_STATUS_API_BASE_URI) {
     logger.error(
-      'PASSPORT_STATUS_API_BASE_URI must not be undefined, null or empty'
+      'PASSPORT_STATUS_API_BASE_URI must not be undefined, null or empty',
     )
     throw Error(
-      'process.env.PASSPORT_STATUS_API_BASE_URI must not be undefined, null or empty'
+      'process.env.PASSPORT_STATUS_API_BASE_URI must not be undefined, null or empty',
     )
   }
 
@@ -72,19 +72,19 @@ export const searchPassportStatusApi = async (
 
     if (GetCertificateApplicationResponse.length === 0) {
       logger.debug(
-        'error 404: searchResult._embedded is empty, passport status not found'
+        'error 404: searchResult._embedded is empty, passport status not found',
       )
       return res.status(404).send('Passport Status Not Found')
     }
 
     return res.send(
-      mapToCheckStatusApiResponse(GetCertificateApplicationResponse[0])
+      mapToCheckStatusApiResponse(GetCertificateApplicationResponse[0]),
     )
   }
 
   if (response.status === 404 || response.status === 422) {
     logger.debug(
-      `Check status returned not OK - error ${response.status}: ${response.body}`
+      `Check status returned not OK - error ${response.status}: ${response.body}`,
     )
     // 404 and 422 responses should both be handled as
     // `not found` results to mitigate data probing attacks
diff --git a/src/pages/api/email-esrf.ts b/src/pages/api/email-esrf.ts
index 3bb4afb1a..4906259f0 100644
--- a/src/pages/api/email-esrf.ts
+++ b/src/pages/api/email-esrf.ts
@@ -7,7 +7,7 @@ const logger = getLogger('email-esrf')
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<string>
+  res: NextApiResponse<string>,
 ) {
   if (req.method !== 'POST') {
     logger.debug(`Status 405: Invalid request method ${req.method}`)
@@ -16,7 +16,7 @@ export default async function handler(
 
   if (req.headers['content-type'] !== 'application/json') {
     logger.debug(
-      `Status 415: Invalid media type ${req.headers['content-type']}`
+      `Status 415: Invalid media type ${req.headers['content-type']}`,
     )
     return res
       .status(415)
@@ -35,11 +35,11 @@ export default async function handler(
 
 const emailEsrfApi = async (
   res: NextApiResponse<string>,
-  emailEsrfApiRequestBody: EmailEsrfApiRequestBody
+  emailEsrfApiRequestBody: EmailEsrfApiRequestBody,
 ) => {
   if (!process.env.PASSPORT_STATUS_API_BASE_URI) {
     throw Error(
-      'process.env.PASSPORT_STATUS_API_BASE_URI must not be undefined, null or empty'
+      'process.env.PASSPORT_STATUS_API_BASE_URI must not be undefined, null or empty',
     )
   }
 
@@ -70,7 +70,7 @@ const emailEsrfApi = async (
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(body),
-    }
+    },
   )
   logger.debug(`Status ${response.status}: ${response.statusText}`)
   res.status(response.status).send(response.statusText)
diff --git a/src/pages/api/health.ts b/src/pages/api/health.ts
index 599473b63..51d99ad43 100644
--- a/src/pages/api/health.ts
+++ b/src/pages/api/health.ts
@@ -4,7 +4,7 @@ import { HealthApiResponse } from '../../lib/types'
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse<HealthApiResponse | string>
+  res: NextApiResponse<HealthApiResponse | string>,
 ) {
   if (req.method !== 'GET') {
     res.status(405).send(`Invalid request method ${req.method}`)
diff --git a/src/pages/email.tsx b/src/pages/email.tsx
index 4cdd125a0..f015ba3c8 100644
--- a/src/pages/email.tsx
+++ b/src/pages/email.tsx
@@ -1,5 +1,4 @@
 import {
-  FC,
   MouseEventHandler,
   useCallback,
   useMemo,
@@ -54,7 +53,7 @@ const validationSchema = Yup.object({
     .max(new Date(), 'date-of-birth.error.current'),
 })
 
-const Email: FC = () => {
+const Email = () => {
   const { t } = useTranslation(['email', 'common'])
 
   const router = useRouter()
@@ -108,14 +107,14 @@ const Email: FC = () => {
         // field id should target the year select input
         return { ...item, feildId: 'dateOfBirth-year' }
       }),
-    [formikErrors, t]
+    [formikErrors, t],
   )
 
   const handleOnDateOfBirthChange: DateSelectFieldOnChangeEvent = useCallback(
     (dateString) => {
       setFormikFieldValue('dateOfBirth', dateString)
     },
-    [setFormikFieldValue]
+    [setFormikFieldValue],
   )
 
   const handleOnCancelClick = useCallback(() => setModalOpen(true), [])
@@ -134,7 +133,7 @@ const Email: FC = () => {
         resetEmailEsrf()
         scrollToHeading()
       },
-      [resetEmailEsrf, resetFormik, scrollToHeading]
+      [resetEmailEsrf, resetFormik, scrollToHeading],
     )
 
   //if the api failed, fail hard to show error page
diff --git a/src/pages/expectations.tsx b/src/pages/expectations.tsx
index 748b22ba9..b4ea774a3 100644
--- a/src/pages/expectations.tsx
+++ b/src/pages/expectations.tsx
@@ -1,4 +1,4 @@
-import { FC, MouseEventHandler, useCallback } from 'react'
+import { MouseEventHandler, useCallback } from 'react'
 
 import { setCookie } from 'cookies-next'
 import { GetServerSideProps } from 'next'
@@ -14,7 +14,7 @@ import Layout from '../components/Layout'
 import { pageWithServerSideTranslations } from '../lib/utils/next-i18next-utils'
 import { getDCTermsTitle } from '../lib/utils/seo-utils'
 
-const Expectations: FC = () => {
+const Expectations = () => {
   const { t } = useTranslation('expectations')
 
   const handleOnAgreeClick: MouseEventHandler<HTMLButtonElement> = useCallback(
@@ -23,7 +23,7 @@ const Expectations: FC = () => {
       setCookie('agreed-to-email-esrf-terms', 'true', { sameSite: true })
       Router.push('/landing')
     },
-    []
+    [],
   )
 
   return (
@@ -117,7 +117,7 @@ export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
   props: {
     ...(await pageWithServerSideTranslations(
       locale ?? 'default',
-      'expectations'
+      'expectations',
     )),
   },
 })
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d6c09582b..13361d535 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -13,7 +13,7 @@ const Index = () => {
         titleTemplate="%s - Canada.ca"
         additionalMetaTags={[
           getDCTermsTitle(
-            "Passport Application Status Checker - Vérificateur de l'état d'une demande de passeport"
+            "Passport Application Status Checker - Vérificateur de l'état d'une demande de passeport",
           ),
         ]}
       />
diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx
index 42174f6ef..da57e2076 100644
--- a/src/pages/landing.tsx
+++ b/src/pages/landing.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 import { GetServerSideProps } from 'next'
 import { Trans, useTranslation } from 'next-i18next'
 import { NextSeo } from 'next-seo'
@@ -13,7 +11,7 @@ import LinkButton from '../components/LinkButton'
 import { pageWithServerSideTranslations } from '../lib/utils/next-i18next-utils'
 import { getDCTermsTitle } from '../lib/utils/seo-utils'
 
-const Landing: FC = () => {
+const Landing = () => {
   const { t } = useTranslation('landing')
 
   return (
diff --git a/src/pages/status.tsx b/src/pages/status.tsx
index 2c8b909ae..aa459d7e8 100644
--- a/src/pages/status.tsx
+++ b/src/pages/status.tsx
@@ -1,6 +1,5 @@
 import {
   ChangeEventHandler,
-  FC,
   MouseEventHandler,
   useCallback,
   useMemo,
@@ -53,7 +52,7 @@ const validationSchema = Yup.object({
     .max(new Date(), 'date-of-birth.error.current'),
 })
 
-const Status: FC = () => {
+const Status = () => {
   const { t } = useTranslation(['status', 'common'])
 
   const router = useRouter()
@@ -104,7 +103,7 @@ const Status: FC = () => {
     {
       enabled: formikStatus === 'submitted',
       onSuccess: () => scrollToHeading(),
-    }
+    },
   )
 
   const errorSummaryItems = useMemo<ErrorSummaryItem[]>(
@@ -114,7 +113,7 @@ const Status: FC = () => {
         // field id should target the year select input
         return { ...item, feildId: 'dateOfBirth-year' }
       }),
-    [formikErrors, t]
+    [formikErrors, t],
   )
 
   const handleOnGoBackClick: MouseEventHandler<HTMLButtonElement> = useCallback(
@@ -134,21 +133,21 @@ const Status: FC = () => {
       removeCheckStatusResponse,
       scrollToHeading,
       router,
-    ]
+    ],
   )
 
   const handleOnESRFChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     ({ target }) => {
       setFormikFieldValue(target.name, target.value.replace(/[^a-z0-9]/gi, ''))
     },
-    [setFormikFieldValue]
+    [setFormikFieldValue],
   )
 
   const handleOnDateOfBirthChange: DateSelectFieldOnChangeEvent = useCallback(
     (dateString) => {
       setFormikFieldValue('dateOfBirth', dateString)
     },
-    [setFormikFieldValue]
+    [setFormikFieldValue],
   )
 
   const handleOnCancelClick = useCallback(() => setModalOpen(true), [])