diff --git a/apps/frontend/components/useColorScheme.ts b/apps/frontend/components/useColorScheme.ts
deleted file mode 100644
index 17e3c63..0000000
--- a/apps/frontend/components/useColorScheme.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useColorScheme } from 'react-native';
diff --git a/apps/frontend/components/useColorScheme.web.ts b/apps/frontend/components/useColorScheme.web.ts
new file mode 100644
index 0000000..6dcd80d
--- /dev/null
+++ b/apps/frontend/components/useColorScheme.web.ts
@@ -0,0 +1,8 @@
+// NOTE: The default React Native styling doesn't support server rendering.
+// Server rendered styles should not change between the first render of the HTML
+// and the first render on the client. Typically, web developers will use CSS media queries
+// to render different styles on the client and server, these aren't directly supported in React Native
+// but can be achieved using a styling library like Nativewind.
+export function useColorScheme() {
+  return 'light';
+}