diff --git a/src/room/LayoutSwitch.tsx b/src/room/LayoutSwitch.tsx
index 80995a35c..91ba0654f 100644
--- a/src/room/LayoutSwitch.tsx
+++ b/src/room/LayoutSwitch.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC } from "react";
+import { useId, type FC } from "react";
 import {
   SpotlightViewIcon,
   GridIcon,
@@ -24,10 +24,11 @@ interface Props {
 export const LayoutSwitch: FC<Props> = ({ vm, className }) => {
   const { t } = useTranslation();
   const layout = useBehavior(vm.layout$);
+  const name = useId();
 
   return (
     <Switch<"spotlight", "grid">
-      name="layout"
+      name={name}
       aria-label={t("layout_switch_label")}
       leftLabel={t("layout_spotlight_label")}
       leftValue="spotlight"
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index 8a805668d..984e2b12e 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -432,8 +432,8 @@ exports[`InCallView > rendering > renders 1`] = `
         data-size="lg"
       >
         <input
-          aria-labelledby="_r_19_"
-          name="layout"
+          aria-labelledby="_r_1a_"
+          name="_r_19_"
           type="radio"
           value="spotlight"
         />
@@ -452,9 +452,9 @@ exports[`InCallView > rendering > renders 1`] = `
           />
         </svg>
         <input
-          aria-labelledby="_r_1e_"
+          aria-labelledby="_r_1f_"
           checked=""
-          name="layout"
+          name="_r_19_"
           type="radio"
           value="grid"
         />