diff --git a/ui/src/App/Team/Archives/ActionItemArchives/DeleteMultipleActionItemsConfirmation/DeleteMultipleActionItemsConfirmation.tsx b/ui/src/App/Team/Archives/ActionItemArchives/DeleteMultipleActionItemsConfirmation/DeleteMultipleActionItemsConfirmation.tsx
index 5060e3387..9557bf871 100644
--- a/ui/src/App/Team/Archives/ActionItemArchives/DeleteMultipleActionItemsConfirmation/DeleteMultipleActionItemsConfirmation.tsx
+++ b/ui/src/App/Team/Archives/ActionItemArchives/DeleteMultipleActionItemsConfirmation/DeleteMultipleActionItemsConfirmation.tsx
@@ -26,7 +26,7 @@ interface Props {
 	onActionItemDeletion(): void;
 }
 
-function DeleteMultipleActionItemsConfirmation(props: Props) {
+function DeleteMultipleActionItemsConfirmation(props: Readonly<Props>) {
 	const { actionItemIds, onActionItemDeletion } = props;
 
 	const team = useRecoilValue(TeamState);
diff --git a/ui/src/App/Team/Archives/ActionItemArchives/DeleteSingleActionItemConfirmation/DeleteSingleActionItemConfirmation.tsx b/ui/src/App/Team/Archives/ActionItemArchives/DeleteSingleActionItemConfirmation/DeleteSingleActionItemConfirmation.tsx
index 734f6f306..878c8d677 100644
--- a/ui/src/App/Team/Archives/ActionItemArchives/DeleteSingleActionItemConfirmation/DeleteSingleActionItemConfirmation.tsx
+++ b/ui/src/App/Team/Archives/ActionItemArchives/DeleteSingleActionItemConfirmation/DeleteSingleActionItemConfirmation.tsx
@@ -26,7 +26,7 @@ interface Props {
 	onActionItemDeletion(): void;
 }
 
-function DeleteSingleActionItemConfirmation(props: Props) {
+function DeleteSingleActionItemConfirmation(props: Readonly<Props>) {
 	const { actionItemId, onActionItemDeletion } = props;
 
 	const team = useRecoilValue(TeamState);
diff --git a/ui/src/App/Team/Archives/Pagination/Pagination.tsx b/ui/src/App/Team/Archives/Pagination/Pagination.tsx
index 7da6ed913..f3742e2dc 100644
--- a/ui/src/App/Team/Archives/Pagination/Pagination.tsx
+++ b/ui/src/App/Team/Archives/Pagination/Pagination.tsx
@@ -25,7 +25,7 @@ interface Props {
 	onPageChange(pageIndex: number): void;
 }
 
-function Pagination(props: Props) {
+function Pagination(props: Readonly<Props>) {
 	const { pageCount, onPageChange } = props;
 
 	return pageCount > 1 ? (
diff --git a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.tsx b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.tsx
index d687b1552..f63a45c62 100644
--- a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.tsx
+++ b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardTile/ArchivedBoardTile.tsx
@@ -34,7 +34,7 @@ interface Props {
 	isSelected: boolean;
 }
 
-function ArchivedBoardTile(props: Props): React.ReactElement {
+function ArchivedBoardTile(props: Readonly<Props>): React.ReactElement {
 	const { board, onBoardDeletion, onBoardCheckboxClick, isSelected } = props;
 
 	const setModalContents = useSetRecoilState(ModalContentsState);
diff --git a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsListHeader/ArchivedBoardListHeader.tsx b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsListHeader/ArchivedBoardListHeader.tsx
index 6232d02a8..15c702365 100644
--- a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsListHeader/ArchivedBoardListHeader.tsx
+++ b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/ArchivedBoardsListHeader/ArchivedBoardListHeader.tsx
@@ -31,7 +31,7 @@ interface Props {
 	areAllSelected?: boolean;
 }
 
-function ArchivedBoardListHeader(props: Props) {
+function ArchivedBoardListHeader(props: Readonly<Props>) {
 	const { onDateClick, onSelectAllClick, areAllSelected = false } = props;
 
 	const [sortOrder, setSortOrder] = useState<SortOrder>(SortOrder.DESC);
diff --git a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardConfirmation/DeleteBoardConfirmation.tsx b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardConfirmation/DeleteBoardConfirmation.tsx
index 8af17f874..a4564c86b 100644
--- a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardConfirmation/DeleteBoardConfirmation.tsx
+++ b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardConfirmation/DeleteBoardConfirmation.tsx
@@ -26,7 +26,7 @@ interface Props {
 	onBoardDeletion(): void;
 }
 
-function DeleteBoardConfirmation(props: Props) {
+function DeleteBoardConfirmation(props: Readonly<Props>) {
 	const { boardId, onBoardDeletion } = props;
 
 	const team = useRecoilValue(TeamState);
diff --git a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardsConfirmation/DeleteBoardsConfirmation.tsx b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardsConfirmation/DeleteBoardsConfirmation.tsx
index 663815b5f..e5c7e4be7 100644
--- a/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardsConfirmation/DeleteBoardsConfirmation.tsx
+++ b/ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoardsList/DeleteBoardsConfirmation/DeleteBoardsConfirmation.tsx
@@ -26,7 +26,7 @@ interface Props {
 	onBoardDeletion(): void;
 }
 
-function DeleteBoardsConfirmation(props: Props) {
+function DeleteBoardsConfirmation(props: Readonly<Props>) {
 	const { boardIds, onBoardDeletion } = props;
 
 	const team = useRecoilValue(TeamState);
diff --git a/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/ActionItem.tsx b/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/ActionItem.tsx
index a05b8ef12..c3cb47d84 100644
--- a/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/ActionItem.tsx
+++ b/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/ActionItem.tsx
@@ -34,7 +34,7 @@ interface Props {
 	actionItemId: number;
 }
 
-function ActionItem(props: Props) {
+function ActionItem(props: Readonly<Props>) {
 	const { actionItemId } = props;
 
 	const actionItem = useRecoilValue(ActionItemByIdState(actionItemId));
diff --git a/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DefaultActionItemView/DefaultActionItemView.tsx b/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DefaultActionItemView/DefaultActionItemView.tsx
index 8bb41d134..ae1a625bb 100644
--- a/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DefaultActionItemView/DefaultActionItemView.tsx
+++ b/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DefaultActionItemView/DefaultActionItemView.tsx
@@ -42,7 +42,7 @@ interface Props {
 	setActionItemMinHeight: (height: number | undefined) => void;
 }
 
-function DefaultActionItemView(props: Props) {
+function DefaultActionItemView(props: Readonly<Props>) {
 	const { actionItem, setViewState, setActionItemMinHeight } = props;
 
 	const team = useRecoilValue(TeamState);
diff --git a/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DeleteActionItemView/DeleteActionItemView.tsx b/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DeleteActionItemView/DeleteActionItemView.tsx
index 56a79f6c6..b63b3cfc3 100644
--- a/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DeleteActionItemView/DeleteActionItemView.tsx
+++ b/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/DeleteActionItemView/DeleteActionItemView.tsx
@@ -30,7 +30,7 @@ interface Props {
 	height: number | undefined;
 }
 
-function DeleteActionItemView(props: Props) {
+function DeleteActionItemView(props: Readonly<Props>) {
 	const { actionItemId, setViewState, height } = props;
 
 	const setModalContents = useSetRecoilState(ModalContentsState);
diff --git a/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/EditActionItemView/EditActionItemView.tsx b/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/EditActionItemView/EditActionItemView.tsx
index 48449263e..5e17e0579 100644
--- a/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/EditActionItemView/EditActionItemView.tsx
+++ b/ui/src/App/Team/Retro/ActionItemsColumn/ActionItem/EditActionItemView/EditActionItemView.tsx
@@ -30,7 +30,7 @@ interface Props {
 	setViewState: (viewState: ActionItemViewState) => void;
 }
 
-function EditActionItemView(props: Props) {
+function EditActionItemView(props: Readonly<Props>) {
 	const { actionItem, setViewState } = props;
 
 	const team = useRecoilValue(TeamState);
diff --git a/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.tsx b/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.tsx
index e37429bb0..cb841371e 100644
--- a/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.tsx
+++ b/ui/src/App/Team/Retro/MobileColumnNav/MobileColumnNav.tsx
@@ -28,7 +28,7 @@ interface Props {
 	setSelectedIndex(index: number): void;
 }
 
-function MobileColumnNav(props: Props): React.ReactElement {
+function MobileColumnNav(props: Readonly<Props>): React.ReactElement {
 	const { columns = [], selectedIndex, setSelectedIndex } = props;
 
 	const isSelectedIndex = (index: number): boolean => index === selectedIndex;
diff --git a/ui/src/App/Team/Retro/RetroSubheader/SubheaderButton/SubheaderButton.tsx b/ui/src/App/Team/Retro/RetroSubheader/SubheaderButton/SubheaderButton.tsx
index 5bad8a50d..d7cf82263 100644
--- a/ui/src/App/Team/Retro/RetroSubheader/SubheaderButton/SubheaderButton.tsx
+++ b/ui/src/App/Team/Retro/RetroSubheader/SubheaderButton/SubheaderButton.tsx
@@ -24,7 +24,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 	fontAwesomeIconClasses?: string;
 }
 
-function SubheaderButton(props: Props) {
+function SubheaderButton(props: Readonly<Props>) {
 	const { fontAwesomeIconClasses, className, children, ...buttonProps } = props;
 
 	return (
diff --git a/ui/src/App/Team/Retro/ThoughtsColumn/DraggableThoughtItem/DraggableRetroItem.tsx b/ui/src/App/Team/Retro/ThoughtsColumn/DraggableThoughtItem/DraggableRetroItem.tsx
index e39475bbd..c85e7befb 100644
--- a/ui/src/App/Team/Retro/ThoughtsColumn/DraggableThoughtItem/DraggableRetroItem.tsx
+++ b/ui/src/App/Team/Retro/ThoughtsColumn/DraggableThoughtItem/DraggableRetroItem.tsx
@@ -33,7 +33,7 @@ interface Props {
 	index: number;
 }
 
-const DraggableRetroItem = (props: Props): React.ReactElement => {
+const DraggableRetroItem = (props: Readonly<Props>): React.ReactElement => {
 	const { thought, topic, index } = props;
 	const disableDraggable = useRecoilValue(DisableDraggableState);
 
diff --git a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DefaultThoughtItemView/DefaultThoughtItemView.tsx b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DefaultThoughtItemView/DefaultThoughtItemView.tsx
index 58a5b3a5f..3b74333b0 100644
--- a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DefaultThoughtItemView/DefaultThoughtItemView.tsx
+++ b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DefaultThoughtItemView/DefaultThoughtItemView.tsx
@@ -44,7 +44,7 @@ interface Props {
 	setThoughtItemHeight: (height: number | undefined) => void;
 }
 
-function DefaultThoughtItemView(props: Props) {
+function DefaultThoughtItemView(props: Readonly<Props>) {
 	const {
 		thought,
 		type,
diff --git a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DeleteThoughtView/DeleteThoughtView.tsx b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DeleteThoughtView/DeleteThoughtView.tsx
index 13bf59f50..2d1072553 100644
--- a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DeleteThoughtView/DeleteThoughtView.tsx
+++ b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/DeleteThoughtView/DeleteThoughtView.tsx
@@ -30,7 +30,7 @@ interface Props {
 	thoughtId: number;
 }
 
-function DeleteThoughtView(props: Props) {
+function DeleteThoughtView(props: Readonly<Props>) {
 	const { setViewState, height, thoughtId } = props;
 	const team = useRecoilValue(TeamState);
 	const setModalContents = useSetRecoilState(ModalContentsState);
diff --git a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/EditThoughtView/EditThoughtView.tsx b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/EditThoughtView/EditThoughtView.tsx
index bf89a5b9b..98371c287 100644
--- a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/EditThoughtView/EditThoughtView.tsx
+++ b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/EditThoughtView/EditThoughtView.tsx
@@ -29,7 +29,7 @@ interface Props {
 	setViewState: (viewState: ThoughtItemViewState) => void;
 }
 
-function EditThoughtView(props: Props) {
+function EditThoughtView(props: Readonly<Props>) {
 	const { thought, setViewState } = props;
 	const team = useRecoilValue(TeamState);
 
diff --git a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/ThoughtItem.tsx b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/ThoughtItem.tsx
index 0517eefce..265834410 100644
--- a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/ThoughtItem.tsx
+++ b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItem/ThoughtItem.tsx
@@ -37,7 +37,7 @@ interface Props {
 	disableButtons?: boolean;
 }
 
-function ThoughtItem(props: Props) {
+function ThoughtItem(props: Readonly<Props>) {
 	const { thoughtId, type, disableButtons = false } = props;
 
 	const thought = useRecoilValue(ThoughtByIdState(thoughtId));
diff --git a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.tsx b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.tsx
index 748223745..c8255535d 100644
--- a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.tsx
+++ b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/ThoughtItemWithAddAction.tsx
@@ -29,7 +29,7 @@ interface Props {
 	thoughtId: number;
 }
 
-function ThoughtItemWithAddAction(props: Props) {
+function ThoughtItemWithAddAction(props: Readonly<Props>) {
 	const { type, thoughtId } = props;
 
 	const [showAddActionItemCard, setShowAddActionItemCard] = useState(false);
diff --git a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtsColumn.tsx b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtsColumn.tsx
index 1e78d6425..da4c191b4 100644
--- a/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtsColumn.tsx
+++ b/ui/src/App/Team/Retro/ThoughtsColumn/ThoughtsColumn.tsx
@@ -41,7 +41,7 @@ interface Props {
 	column: Column;
 }
 
-function ThoughtsColumn(props: Props) {
+function ThoughtsColumn(props: Readonly<Props>) {
 	const { column } = props;
 
 	const team = useRecoilValue(TeamState);
diff --git a/ui/src/App/Team/TeamHeader/Settings/AccountTab/AccountTab.tsx b/ui/src/App/Team/TeamHeader/Settings/AccountTab/AccountTab.tsx
index 9c17dbc8b..b94ab2a7b 100644
--- a/ui/src/App/Team/TeamHeader/Settings/AccountTab/AccountTab.tsx
+++ b/ui/src/App/Team/TeamHeader/Settings/AccountTab/AccountTab.tsx
@@ -30,7 +30,7 @@ interface Props {
 	accountTabData?: AddBoardOwnersFormProps;
 }
 
-function AccountTab(props: Props): React.ReactElement {
+function AccountTab(props: Readonly<Props>): React.ReactElement {
 	const { accountTabData } = props;
 
 	const team = useRecoilValue(TeamState);
diff --git a/ui/src/App/Team/TeamHeader/Settings/AccountTab/AddBoardOwnersForm/AddBoardOwnersConfirmationForm/AddBoardOwnersConfirmationForm.tsx b/ui/src/App/Team/TeamHeader/Settings/AccountTab/AddBoardOwnersForm/AddBoardOwnersConfirmationForm/AddBoardOwnersConfirmationForm.tsx
index 570122fdd..189756295 100644
--- a/ui/src/App/Team/TeamHeader/Settings/AccountTab/AddBoardOwnersForm/AddBoardOwnersConfirmationForm/AddBoardOwnersConfirmationForm.tsx
+++ b/ui/src/App/Team/TeamHeader/Settings/AccountTab/AddBoardOwnersForm/AddBoardOwnersConfirmationForm/AddBoardOwnersConfirmationForm.tsx
@@ -31,7 +31,7 @@ interface Props {
 	email2?: string;
 }
 
-function AddBoardOwnersConfirmationForm(props: Props) {
+function AddBoardOwnersConfirmationForm(props: Readonly<Props>) {
 	const { email1, email2 = '' } = props;
 
 	const team = useRecoilValue(TeamState);
diff --git a/ui/src/App/Team/TeamHeader/Settings/AccountTab/BoardOwnersForm/EmailSentConfirmation/EmailSentConfirmation.tsx b/ui/src/App/Team/TeamHeader/Settings/AccountTab/BoardOwnersForm/EmailSentConfirmation/EmailSentConfirmation.tsx
index a7b4854a4..c868707d8 100644
--- a/ui/src/App/Team/TeamHeader/Settings/AccountTab/BoardOwnersForm/EmailSentConfirmation/EmailSentConfirmation.tsx
+++ b/ui/src/App/Team/TeamHeader/Settings/AccountTab/BoardOwnersForm/EmailSentConfirmation/EmailSentConfirmation.tsx
@@ -29,7 +29,7 @@ interface Props {
 	paragraph1: string;
 }
 
-function EmailSentConfirmation(props: Props) {
+function EmailSentConfirmation(props: Readonly<Props>) {
 	const { paragraph1 } = props;
 
 	const setModalContents = useSetRecoilState(ModalContentsState);
diff --git a/ui/src/App/Team/TeamHeader/Settings/Settings.tsx b/ui/src/App/Team/TeamHeader/Settings/Settings.tsx
index de1f8b431..7356b4f86 100644
--- a/ui/src/App/Team/TeamHeader/Settings/Settings.tsx
+++ b/ui/src/App/Team/TeamHeader/Settings/Settings.tsx
@@ -38,7 +38,7 @@ interface Props {
 	accountTabData?: AddBoardOwnersFormProps;
 }
 
-export function Settings(props: Props) {
+export function Settings(props: Readonly<Props>) {
 	const { activeTab = SettingsTabs.STYLES, accountTabData } = props;
 
 	const environmentConfig = useRecoilValue(EnvironmentConfigState);
diff --git a/ui/src/App/Team/TeamHeader/TeamHeaderNavLink/TeamHeaderNavLink.tsx b/ui/src/App/Team/TeamHeader/TeamHeaderNavLink/TeamHeaderNavLink.tsx
index e67889532..a0a610b5d 100644
--- a/ui/src/App/Team/TeamHeader/TeamHeaderNavLink/TeamHeaderNavLink.tsx
+++ b/ui/src/App/Team/TeamHeader/TeamHeaderNavLink/TeamHeaderNavLink.tsx
@@ -28,7 +28,7 @@ interface Props {
 	end?: boolean;
 }
 
-function TeamHeaderNavLink(props: Props) {
+function TeamHeaderNavLink(props: Readonly<Props>) {
 	const { to, children, end } = props;
 
 	return (
diff --git a/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.tsx b/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.tsx
index 4b6123d6a..128543ef1 100644
--- a/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.tsx
+++ b/ui/src/Common/ActionItemDisplayOnly/ActionItemDisplayOnly.tsx
@@ -27,7 +27,7 @@ interface Props {
 	actionItem: Action;
 }
 
-function ActionItemDisplayOnly(props: Props) {
+function ActionItemDisplayOnly(props: Readonly<Props>) {
 	const { actionItem } = props;
 
 	return (
diff --git a/ui/src/Common/ArchivedActionItem/ArchivedActionItem.tsx b/ui/src/Common/ArchivedActionItem/ArchivedActionItem.tsx
index c7bf2dd5f..6c289b85c 100644
--- a/ui/src/Common/ArchivedActionItem/ArchivedActionItem.tsx
+++ b/ui/src/Common/ArchivedActionItem/ArchivedActionItem.tsx
@@ -38,7 +38,7 @@ interface Props {
 	onActionItemCheckboxClick?(actionItemId: number, isChecked: boolean): void;
 }
 
-function ArchivedActionItem(props: Props) {
+function ArchivedActionItem(props: Readonly<Props>) {
 	const {
 		actionItem,
 		isSelected = false,
diff --git a/ui/src/Common/AssigneeInput/AssigneeInput.tsx b/ui/src/Common/AssigneeInput/AssigneeInput.tsx
index 0f98c1328..702c427f7 100644
--- a/ui/src/Common/AssigneeInput/AssigneeInput.tsx
+++ b/ui/src/Common/AssigneeInput/AssigneeInput.tsx
@@ -32,7 +32,7 @@ interface Props {
 	readOnly?: boolean;
 }
 
-function AssigneeInput(props: Props) {
+function AssigneeInput(props: Readonly<Props>) {
 	const { assignee = '', onAssign, disabled, readOnly } = props;
 	const assigneeInputRef = useRef<HTMLInputElement>(null);
 
diff --git a/ui/src/Common/CheckYourMailConfirmationPage/CheckYourMailConfirmationPage.tsx b/ui/src/Common/CheckYourMailConfirmationPage/CheckYourMailConfirmationPage.tsx
index 62bdaddb7..d497a8189 100644
--- a/ui/src/Common/CheckYourMailConfirmationPage/CheckYourMailConfirmationPage.tsx
+++ b/ui/src/Common/CheckYourMailConfirmationPage/CheckYourMailConfirmationPage.tsx
@@ -28,7 +28,7 @@ interface Props {
 	paragraph2: string;
 }
 
-function CheckYourMailConfirmationPage(props: Props) {
+function CheckYourMailConfirmationPage(props: Readonly<Props>) {
 	const { paragraph1, paragraph2 } = props;
 
 	return (
diff --git a/ui/src/Common/Checkbox/Checkbox.tsx b/ui/src/Common/Checkbox/Checkbox.tsx
index f17d6fd17..d368f5cf2 100644
--- a/ui/src/Common/Checkbox/Checkbox.tsx
+++ b/ui/src/Common/Checkbox/Checkbox.tsx
@@ -28,7 +28,7 @@ interface Props {
 	onChange(checked: boolean): void;
 }
 
-function Checkbox(props: Props) {
+function Checkbox(props: Readonly<Props>) {
 	const { id, label, value, className, onChange } = props;
 	const [isChecked, setIsChecked] = useState<boolean>(false);
 
diff --git a/ui/src/Common/ColumnHeader/ColumnHeaderInput/ColumnHeaderInput.tsx b/ui/src/Common/ColumnHeader/ColumnHeaderInput/ColumnHeaderInput.tsx
index 305d988fa..9147e0d18 100644
--- a/ui/src/Common/ColumnHeader/ColumnHeaderInput/ColumnHeaderInput.tsx
+++ b/ui/src/Common/ColumnHeader/ColumnHeaderInput/ColumnHeaderInput.tsx
@@ -30,7 +30,7 @@ interface Props {
 	setEditing(editing: boolean): void;
 }
 
-function ColumnHeaderInput(props: Props) {
+function ColumnHeaderInput(props: Readonly<Props>) {
 	const { initialTitle, updateTitle, setEditing } = props;
 
 	const [value, setValue] = useState(initialTitle);
diff --git a/ui/src/Common/ColumnHeader/EditColumnButton/EditColumnButton.tsx b/ui/src/Common/ColumnHeader/EditColumnButton/EditColumnButton.tsx
index 9b8bd2e30..5e75998b8 100644
--- a/ui/src/Common/ColumnHeader/EditColumnButton/EditColumnButton.tsx
+++ b/ui/src/Common/ColumnHeader/EditColumnButton/EditColumnButton.tsx
@@ -25,7 +25,7 @@ interface Props {
 	onClick(): void;
 }
 
-function EditColumnButton(props: Props) {
+function EditColumnButton(props: Readonly<Props>) {
 	const { title, onClick } = props;
 
 	return (
diff --git a/ui/src/Common/ColumnHeader/SortColumnButton/SortColumnButton.tsx b/ui/src/Common/ColumnHeader/SortColumnButton/SortColumnButton.tsx
index 2831d7155..8353d563d 100644
--- a/ui/src/Common/ColumnHeader/SortColumnButton/SortColumnButton.tsx
+++ b/ui/src/Common/ColumnHeader/SortColumnButton/SortColumnButton.tsx
@@ -26,7 +26,7 @@ interface Props {
 	onClick?(sortedState: boolean): void;
 }
 
-function SortColumnButton(props: Props) {
+function SortColumnButton(props: Readonly<Props>) {
 	const { title, onClick } = props;
 	const [sorted, setSorted] = useState(false);
 
diff --git a/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.tsx b/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.tsx
index 1a6783f6e..8e4ea016b 100644
--- a/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.tsx
+++ b/ui/src/Common/ColumnItem/EditColumnItem/EditColumnItem.tsx
@@ -38,7 +38,7 @@ interface Props {
 	className?: string;
 }
 
-function EditColumnItem(props: Props) {
+function EditColumnItem(props: Readonly<Props>) {
 	const {
 		onConfirm,
 		onCancel,
diff --git a/ui/src/Common/ConfirmationModal/ConfirmationModal.tsx b/ui/src/Common/ConfirmationModal/ConfirmationModal.tsx
index 7fec47c2a..45a4f1a67 100644
--- a/ui/src/Common/ConfirmationModal/ConfirmationModal.tsx
+++ b/ui/src/Common/ConfirmationModal/ConfirmationModal.tsx
@@ -35,7 +35,7 @@ interface Props {
 	submitButtonText: string;
 }
 
-function ConfirmationModal(props: Props) {
+function ConfirmationModal(props: Readonly<Props>) {
 	const {
 		testId,
 		className,
diff --git a/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.tsx b/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.tsx
index 1f47a82d7..12e63228f 100644
--- a/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.tsx
+++ b/ui/src/Common/CreateColumnItemInput/CreateColumnItemInput.tsx
@@ -32,7 +32,7 @@ interface Props {
 
 const MAX_CHARACTER_COUNT = 255;
 
-function CreateColumnItemInput(props: Props): React.ReactElement {
+function CreateColumnItemInput(props: Readonly<Props>): React.ReactElement {
 	const { placeholder, type, handleSubmission, ...labelProps } = props;
 
 	const [value, setValue] = useState('');
diff --git a/ui/src/Common/Dropdown/Dropdown.tsx b/ui/src/Common/Dropdown/Dropdown.tsx
index 45d5fc334..d6bd5bbbe 100644
--- a/ui/src/Common/Dropdown/Dropdown.tsx
+++ b/ui/src/Common/Dropdown/Dropdown.tsx
@@ -29,7 +29,7 @@ interface Props {
 	onChange: (value: string) => void;
 }
 
-function Dropdown(props: Props) {
+function Dropdown(props: Readonly<Props>) {
 	const { label, options, defaultValue, onChange } = props;
 
 	return (
diff --git a/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.tsx b/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.tsx
index 63b96d2b0..ca86bbac3 100644
--- a/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.tsx
+++ b/ui/src/Common/FloatingCharacterCountdown/FloatingCharacterCountdown.tsx
@@ -26,7 +26,9 @@ interface Props {
 	charsAreRunningOutThreshold?: number;
 }
 
-export default function FloatingCharacterCountdown(props: Props): ReactElement {
+export default function FloatingCharacterCountdown(
+	props: Readonly<Props>
+): ReactElement {
 	const {
 		maxCharacterCount = 255,
 		charsAreRunningOutThreshold = 20,
diff --git a/ui/src/Common/Header/Header.tsx b/ui/src/Common/Header/Header.tsx
index c45302079..647b6769e 100644
--- a/ui/src/Common/Header/Header.tsx
+++ b/ui/src/Common/Header/Header.tsx
@@ -28,7 +28,7 @@ interface Props {
 	children?: ReactNode;
 }
 
-function Header(props: Props) {
+function Header(props: Readonly<Props>) {
 	const { name, children } = props;
 
 	const retroquestLogo =
diff --git a/ui/src/Common/Input/Input.tsx b/ui/src/Common/Input/Input.tsx
index 246c43c12..de35d6510 100644
--- a/ui/src/Common/Input/Input.tsx
+++ b/ui/src/Common/Input/Input.tsx
@@ -28,7 +28,7 @@ type Props = ComponentPropsWithoutRef<'input'> & {
 	validationMessage?: string;
 };
 
-export default function Input(props: Props): React.ReactElement {
+export default function Input(props: Readonly<Props>): React.ReactElement {
 	const {
 		id,
 		label,
diff --git a/ui/src/Common/InputEmail/InputEmail.tsx b/ui/src/Common/InputEmail/InputEmail.tsx
index 7e1a615c7..07e023c67 100644
--- a/ui/src/Common/InputEmail/InputEmail.tsx
+++ b/ui/src/Common/InputEmail/InputEmail.tsx
@@ -31,7 +31,7 @@ interface Props {
 
 const EMAIL_REGEX = /^.+@[^@]+$/;
 
-function InputEmail(props: Props) {
+function InputEmail(props: Readonly<Props>) {
 	const {
 		value = '',
 		required = true,
diff --git a/ui/src/Common/InputPassword/InputPassword.tsx b/ui/src/Common/InputPassword/InputPassword.tsx
index a847bccf2..3cc022625 100644
--- a/ui/src/Common/InputPassword/InputPassword.tsx
+++ b/ui/src/Common/InputPassword/InputPassword.tsx
@@ -42,7 +42,7 @@ export function validatePasswordString(password: string): boolean {
 	);
 }
 
-function InputPassword(props: Props) {
+function InputPassword(props: Readonly<Props>) {
 	const {
 		label = 'Password',
 		password,
diff --git a/ui/src/Common/InputTeamName/InputTeamName.tsx b/ui/src/Common/InputTeamName/InputTeamName.tsx
index dbd5fba17..660488b8b 100644
--- a/ui/src/Common/InputTeamName/InputTeamName.tsx
+++ b/ui/src/Common/InputTeamName/InputTeamName.tsx
@@ -29,7 +29,7 @@ interface Props {
 
 const TEAM_NAME_REGEX = /^[\w\s]+$/;
 
-function InputTeamName(props: Props) {
+function InputTeamName(props: Readonly<Props>) {
 	const {
 		value = '',
 		required,
diff --git a/ui/src/Common/NotFoundSection/NotFoundSection.tsx b/ui/src/Common/NotFoundSection/NotFoundSection.tsx
index 6e444f4de..58eccf500 100644
--- a/ui/src/Common/NotFoundSection/NotFoundSection.tsx
+++ b/ui/src/Common/NotFoundSection/NotFoundSection.tsx
@@ -23,7 +23,7 @@ interface Props {
 	paragraph: ReactElement;
 }
 
-function NotFoundSection(props: Props): React.ReactElement {
+function NotFoundSection(props: Readonly<Props>): React.ReactElement {
 	const { paragraph, subHeader = 'No archives were found.' } = props;
 
 	return (
diff --git a/ui/src/Common/Textarea/Textarea.tsx b/ui/src/Common/Textarea/Textarea.tsx
index a1f439d8b..e84baa45b 100644
--- a/ui/src/Common/Textarea/Textarea.tsx
+++ b/ui/src/Common/Textarea/Textarea.tsx
@@ -32,7 +32,7 @@ interface Props {
 	className?: string;
 }
 
-function Textarea(props: Props) {
+function Textarea(props: Readonly<Props>) {
 	const {
 		initialValue,
 		onEnter = () => undefined,
diff --git a/ui/src/Common/Timer/TimesUpDialog/TimesUpDialog.tsx b/ui/src/Common/Timer/TimesUpDialog/TimesUpDialog.tsx
index 778fb118b..d5c2698ac 100644
--- a/ui/src/Common/Timer/TimesUpDialog/TimesUpDialog.tsx
+++ b/ui/src/Common/Timer/TimesUpDialog/TimesUpDialog.tsx
@@ -24,7 +24,7 @@ interface Props {
 	onAddTime(): void;
 }
 
-function TimesUpDialog(props: Props) {
+function TimesUpDialog(props: Readonly<Props>) {
 	const { onConfirm, onAddTime } = props;
 	return (
 		<ConfirmationModal
diff --git a/ui/src/Common/Tooltip/Tooltip.tsx b/ui/src/Common/Tooltip/Tooltip.tsx
index ae7021e1c..36ad6ed71 100644
--- a/ui/src/Common/Tooltip/Tooltip.tsx
+++ b/ui/src/Common/Tooltip/Tooltip.tsx
@@ -21,7 +21,7 @@ import './Tooltip.scss';
 
 export type Props = PropsWithChildren<unknown>;
 
-export default function Tooltip(props: Props): React.ReactElement {
+export default function Tooltip(props: Readonly<Props>): React.ReactElement {
 	const { children } = props;
 	const ref = useRef<HTMLElement>(null);