diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx
index 52795ea959d9eb6650d6d4a057c3b09552e4e110..69e44e1cf26c96f8ab97eb01cce639c5ede3f3f0 100644
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/src/pages/channels/ChannelHeader.tsx
@@ -1,6 +1,7 @@
 import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
 import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { observable } from "mobx";
+import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js";
 import styled from "styled-components";
 
@@ -69,7 +70,7 @@ const Info = styled.div`
     }
 `;
 
-export default observable(({ channel, toggleSidebar }: ChannelHeaderProps) => {
+export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
     const { openScreen } = useIntermediate();
     const client = useClient();
     const state = useData();
diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx
index 45f65de444f55f1abdcf69bd185dfa6d094f19fb..2eac2bb18fa64075f933765bf7b5a8dbb09c1c2a 100644
--- a/src/pages/channels/voice/VoiceHeader.tsx
+++ b/src/pages/channels/voice/VoiceHeader.tsx
@@ -1,5 +1,6 @@
 import { BarChart } from "@styled-icons/boxicons-regular";
 import { observable } from "mobx";
+import { observer } from "mobx-react-lite";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
@@ -69,7 +70,7 @@ const VoiceBase = styled.div`
     }
 `;
 
-export default observable(({ id }: Props) => {
+export default observer(({ id }: Props) => {
     const { status, participants, roomId } = useContext(VoiceContext);
     if (roomId !== id) return null;