diff --git a/src/frontend/src/features/notifications/components/Toast.tsx b/src/frontend/src/features/notifications/components/Toast.tsx
index 3f5876eb..ca695dec 100644
--- a/src/frontend/src/features/notifications/components/Toast.tsx
+++ b/src/frontend/src/features/notifications/components/Toast.tsx
@@ -38,7 +38,7 @@ export interface ToastProps {
   state: ToastState<ToastData>
 }
 
-export function Toast({ state, ...props }: ToastProps) {
+export function Toast({ state, ...props }: Readonly<ToastProps>) {
   const ref = useRef(null)
   const { toastProps, contentProps, closeButtonProps } = useToast(
     props,
diff --git a/src/frontend/src/features/notifications/components/ToastAnyRecording.tsx b/src/frontend/src/features/notifications/components/ToastAnyRecording.tsx
index 817a3bf9..7bcb7242 100644
--- a/src/frontend/src/features/notifications/components/ToastAnyRecording.tsx
+++ b/src/frontend/src/features/notifications/components/ToastAnyRecording.tsx
@@ -6,7 +6,7 @@ import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 import { NotificationType } from '../NotificationType'
 
-export function ToastAnyRecording({ state, ...props }: ToastProps) {
+export function ToastAnyRecording({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)
diff --git a/src/frontend/src/features/notifications/components/ToastJoined.tsx b/src/frontend/src/features/notifications/components/ToastJoined.tsx
index 85c0f849..3eaa854c 100644
--- a/src/frontend/src/features/notifications/components/ToastJoined.tsx
+++ b/src/frontend/src/features/notifications/components/ToastJoined.tsx
@@ -19,7 +19,7 @@ const ClickableToast = styled(RACButton, {
   },
 })
 
-export function ToastJoined({ state, ...props }: ToastProps) {
+export function ToastJoined({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
diff --git a/src/frontend/src/features/notifications/components/ToastLowerHand.tsx b/src/frontend/src/features/notifications/components/ToastLowerHand.tsx
index 4a3687a7..16cf5714 100644
--- a/src/frontend/src/features/notifications/components/ToastLowerHand.tsx
+++ b/src/frontend/src/features/notifications/components/ToastLowerHand.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { Button } from '@/primitives'
 import { css } from '@/styled-system/css'
 
-export function ToastLowerHand({ state, ...props }: ToastProps) {
+export function ToastLowerHand({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications', { keyPrefix: 'lowerHand' })
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)
diff --git a/src/frontend/src/features/notifications/components/ToastMessageReceived.tsx b/src/frontend/src/features/notifications/components/ToastMessageReceived.tsx
index 46000beb..492c182c 100644
--- a/src/frontend/src/features/notifications/components/ToastMessageReceived.tsx
+++ b/src/frontend/src/features/notifications/components/ToastMessageReceived.tsx
@@ -9,7 +9,10 @@ import { Button as RACButton } from 'react-aria-components'
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 
-export function ToastMessageReceived({ state, ...props }: ToastProps) {
+export function ToastMessageReceived({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps } = useToast(props, state, ref)
diff --git a/src/frontend/src/features/notifications/components/ToastMuted.tsx b/src/frontend/src/features/notifications/components/ToastMuted.tsx
index 232d38aa..f63a8b52 100644
--- a/src/frontend/src/features/notifications/components/ToastMuted.tsx
+++ b/src/frontend/src/features/notifications/components/ToastMuted.tsx
@@ -5,7 +5,7 @@ import { StyledToastContainer, ToastProps } from './Toast'
 import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 
-export function ToastMuted({ state, ...props }: ToastProps) {
+export function ToastMuted({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)
diff --git a/src/frontend/src/features/notifications/components/ToastPermissionsRemoved.tsx b/src/frontend/src/features/notifications/components/ToastPermissionsRemoved.tsx
index ac5002d3..a3797081 100644
--- a/src/frontend/src/features/notifications/components/ToastPermissionsRemoved.tsx
+++ b/src/frontend/src/features/notifications/components/ToastPermissionsRemoved.tsx
@@ -5,7 +5,10 @@ import { StyledToastContainer, ToastProps } from './Toast'
 import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 
-export function ToastPermissionsRemoved({ state, ...props }: ToastProps) {
+export function ToastPermissionsRemoved({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications', {
     keyPrefix: 'permissionsRemoved',
   })
diff --git a/src/frontend/src/features/notifications/components/ToastRaised.tsx b/src/frontend/src/features/notifications/components/ToastRaised.tsx
index e778f71a..d5c7ca2d 100644
--- a/src/frontend/src/features/notifications/components/ToastRaised.tsx
+++ b/src/frontend/src/features/notifications/components/ToastRaised.tsx
@@ -9,7 +9,7 @@ import { RiCloseLine, RiHand } from '@remixicon/react'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { css } from '@/styled-system/css'
 
-export function ToastRaised({ state, ...props }: ToastProps) {
+export function ToastRaised({ state, ...props }: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
diff --git a/src/frontend/src/features/notifications/components/ToastRecordingSaving.tsx b/src/frontend/src/features/notifications/components/ToastRecordingSaving.tsx
index b031d92f..96059581 100644
--- a/src/frontend/src/features/notifications/components/ToastRecordingSaving.tsx
+++ b/src/frontend/src/features/notifications/components/ToastRecordingSaving.tsx
@@ -9,7 +9,10 @@ import { useUser } from '@/features/auth'
 import { css } from '@/styled-system/css'
 import { RecordingMode } from '@/features/recording'
 
-export function ToastRecordingSaving({ state, ...props }: ToastProps) {
+export function ToastRecordingSaving({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
   const { t } = useTranslation('notifications', { keyPrefix: 'recordingSave' })
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)