diff --git a/src/components/InCallFooter.module.css b/src/components/InCallFooter.module.css
new file mode 100644
index 00000000..4db31f2a
--- /dev/null
+++ b/src/components/InCallFooter.module.css
@@ -0,0 +1,158 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+.footer {
+  position: sticky;
+  inset-block-end: 0;
+  z-index: var(--call-view-header-footer-layer);
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-areas: ". buttons layout";
+  align-items: center;
+  gap: var(--cpd-space-3x);
+  padding: var(--cpd-space-10x) var(--cpd-space-6x);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    var(--cpd-color-bg-canvas-default) 100%
+  );
+}
+
+.footer.hidden {
+  display: none;
+}
+
+.footer.overlay {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
+
+.footer.overlay.hidden {
+  display: grid;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.footer.overlay:has(:focus-visible) {
+  opacity: 1;
+  pointer-events: initial;
+}
+
+.settingsLogoContainer {
+  display: flex;
+  gap: var(--cpd-space-4x);
+  flex-direction: row;
+}
+
+.logo {
+  justify-self: start;
+  display: flex;
+  align-items: center;
+  gap: var(--cpd-space-2x);
+  padding-inline-start: var(--cpd-space-1x);
+}
+
+.buttons {
+  grid-area: buttons;
+  justify-self: center;
+  display: flex;
+  gap: var(--cpd-space-3x);
+}
+
+.layout {
+  grid-area: layout;
+  justify-self: end;
+}
+
+/*First hide the logo*/
+@media (max-width: 660px) {
+  .logo {
+    display: none;
+  }
+}
+
+.settingForButtonsBar {
+  /*
+  never show the settings button for the buttons bar
+  show the settings button in the Buttons bar on width < 500px
+  */
+  display: none;
+}
+.settingForBottomLeftCorner {
+  /*
+  show the left corener by default (will be hidden on width < 500px)
+  */
+  display: inherit;
+}
+
+/*
+With the logo hidden >500px is enough space to show overflow, buttons, layout.
+Once we exceed 500 we hide everything except the buttons.
+*/
+@media (max-width: 500px) {
+  .footer {
+    grid-template-areas: "buttons buttons buttons";
+  }
+
+  .settingForButtonsBar {
+    display: inherit;
+  }
+  .settingForBottomLeftCorner {
+    display: none;
+  }
+  .settingsLogoContainer {
+    display: none;
+  }
+
+  .layout {
+    display: none !important;
+  }
+}
+
+@media (max-height: 800px) {
+  .footer {
+    padding-block: var(--cpd-space-8x);
+  }
+}
+
+@media (max-height: 400px) {
+  .footer {
+    padding-block: var(--cpd-space-4x);
+  }
+}
+
+@media (max-width: 370px) {
+  .shareScreen {
+    display: none;
+  }
+
+  /* PIP custom css */
+  @media (max-height: 400px) {
+    .shareScreen {
+      display: flex;
+    }
+    .footer {
+      padding-block-start: var(--cpd-space-3x);
+      padding-block-end: var(--cpd-space-2x);
+    }
+  }
+}
+
+@media (max-width: 320px) {
+  .raiseHand {
+    display: none;
+  }
+}
+
+@media (min-width: 800px) {
+  .buttons {
+    gap: var(--cpd-space-4x);
+  }
+}
diff --git a/src/components/InCallFooter.stories.tsx b/src/components/InCallFooter.stories.tsx
index fb7b5ba5..3599a459 100644
--- a/src/components/InCallFooter.stories.tsx
+++ b/src/components/InCallFooter.stories.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2025 New Vector Ltd.
+Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
diff --git a/src/components/InCallFooter.tsx b/src/components/InCallFooter.tsx
index 49293b46..88c3d78a 100644
--- a/src/components/InCallFooter.tsx
+++ b/src/components/InCallFooter.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2025 New Vector Ltd.
+Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -19,7 +19,7 @@ import {
   ReactionToggleButton,
   LoudspeakerButton,
 } from "../button";
-import styles from "../room/InCallView.module.css";
+import styles from "./InCallFooter.module.css";
 import { LayoutToggle } from "../room/LayoutToggle";
 import {
   type CallViewModel,
diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 4eaa09ad..390d6058 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -31,153 +31,12 @@ Please see LICENSE in the repository root for full details.
   background: none;
 }
 
-.footer {
-  position: sticky;
-  inset-block-end: 0;
-  z-index: var(--call-view-header-footer-layer);
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  grid-template-areas: ". buttons layout";
-  align-items: center;
-  gap: var(--cpd-space-3x);
-  padding: var(--cpd-space-10x) var(--cpd-space-6x);
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    var(--cpd-color-bg-canvas-default) 100%
-  );
-}
-
-.footer.hidden {
-  display: none;
-}
-
-.footer.overlay {
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
-  opacity: 1;
-  transition: opacity 0.15s;
-}
-
-.footer.overlay.hidden {
-  display: grid;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.footer.overlay:has(:focus-visible) {
-  opacity: 1;
-  pointer-events: initial;
-}
-
-.settingsLogoContainer {
-  display: flex;
-  gap: var(--cpd-space-4x);
-  flex-direction: row;
-}
-
-.logo {
-  justify-self: start;
-  display: flex;
-  align-items: center;
-  gap: var(--cpd-space-2x);
-  padding-inline-start: var(--cpd-space-1x);
-}
-
-.buttons {
-  grid-area: buttons;
-  justify-self: center;
-  display: flex;
-  gap: var(--cpd-space-3x);
-}
-
-.layout {
-  grid-area: layout;
-  justify-self: end;
-}
-
-/*First hide the logo*/
-@media (max-width: 660px) {
-  .logo {
-    display: none;
-  }
-}
-
-.settingForButtonsBar {
-  /*
-  never show the settings button for the buttons bar
-  show the settings button in the Buttons bar on width < 500px
-  */
-  display: none;
-}
-.settingForBottomLeftCorner {
-  /*
-  show the left corener by default (will be hidden on width < 500px)
-  */
-  display: inherit;
-}
-
-/*
-With the logo hidden >500px is enough space to show overflow, buttons, layout.
-Once we exceed 500 we hide everything except the buttons.
-*/
-@media (max-width: 500px) {
-  .footer {
-    grid-template-areas: "buttons buttons buttons";
-  }
-
-  /*.settingsLogoContainer {
-    display: none;
-  }*/
-
-  .layout {
-    display: none !important;
-  }
-}
-
-@media (max-height: 800px) {
-  .footer {
-    padding-block: var(--cpd-space-8x);
-  }
-}
-
-@media (max-height: 400px) {
-  .footer {
-    padding-block: var(--cpd-space-4x);
-  }
-}
-
-@media (max-width: 370px) {
-  .shareScreen {
-    display: none;
-  }
-
-  /* PIP custom css */
-  @media (max-height: 400px) {
-    .shareScreen {
-      display: flex;
-    }
-    .footer {
-      padding-block-start: var(--cpd-space-3x);
-      padding-block-end: var(--cpd-space-2x);
-    }
-  }
-}
-
 @media (max-width: 320px) {
-  .invite,
-  .raiseHand {
+  .invite {
     display: none;
   }
 }
 
-@media (min-width: 800px) {
-  .buttons {
-    gap: var(--cpd-space-4x);
-  }
-}
-
 .fixedGrid {
   position: absolute;
   inline-size: 100%;