diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx
index 52795ea9..69e44e1c 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 45f65de4..2eac2bb1 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;