diff --git a/README.md b/README.md
index 982a457..f44403f 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # Next.js + Tailwind CSS + Capacitor for mobile app development
 
+*Note: this repo is in active development and not quite ready for production use!*
+
 This repo is a starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, Next.js, and Capacitor. It comes with some pre-built components that can be customized using Tailwind classes, and provides the most important UI controls needed to build native mobile experiences (tabs, nav bars, modals, menus, etc).
 
 These components are baked into the starter and will be adopted into your project. This way you gain full control over the experience and can easily modify the look and feel of the components to match your design.
diff --git a/components/ui/App.jsx b/components/ui/App.jsx
index 49b455f..118c1b7 100644
--- a/components/ui/App.jsx
+++ b/components/ui/App.jsx
@@ -7,23 +7,26 @@ const { DarkMode } = Plugins;
 const App = ({ children, className, ...props }) => {
   const [darkMode, setDarkMode] = useState(false);
 
-  useEffect(async() => {
-    let darkmodeConfig = await DarkMode.isDarkModeOn();
-    setDarkMode(darkmodeConfig.isDarkModeOn);
-    DarkMode.addListener("darkModeStateChanged", (state) => {
-      setDarkMode(state.isDarkModeOn);
-    });
+  useEffect(async () => {
+    try {
+      let darkmodeConfig = await DarkMode.isDarkModeOn();
+      setDarkMode(darkmodeConfig.isDarkModeOn);
+      DarkMode.addListener('darkModeStateChanged', state => {
+        setDarkMode(state.isDarkModeOn);
+      });
+    } catch (e) {}
   }, []);
 
-  return (<div {...props} className={classNames(
-    'flex h-screen flex-col', 
-    className,
-    {
-      'dark': darkMode
-    }
-    )}>
-    {children}
-  </div>);
-}
+  return (
+    <div
+      {...props}
+      className={classNames('flex h-screen flex-col', className, {
+        dark: darkMode,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
 
 export default App;
diff --git a/components/ui/Menu.jsx b/components/ui/Menu.jsx
index dea1af5..64a9251 100644
--- a/components/ui/Menu.jsx
+++ b/components/ui/Menu.jsx
@@ -1,6 +1,6 @@
 import { Plugins } from '@capacitor/core';
 import classNames from 'classnames';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useDrag } from 'react-use-gesture';
 
@@ -13,20 +13,22 @@ const Menu = ({ open, onClose, children, className, ...props }) => {
   const [dragging, setDragging] = useState(false);
 
   useEffect(async () => {
-    let darkmodeConfig = await DarkMode.isDarkModeOn();
-    console.log({open, darkMode: darkmodeConfig.isDarkModeOn})
-    Plugins.StatusBar.setStyle({
-      style: open && !darkmodeConfig.isDarkModeOn ? 'LIGHT' : 'DARK',
-    }).catch(() => {});
+    try {
+      let darkmodeConfig = await DarkMode.isDarkModeOn();
+      console.log({ open, darkMode: darkmodeConfig.isDarkModeOn });
+      Plugins.StatusBar.setStyle({
+        style: open && !darkmodeConfig.isDarkModeOn ? 'LIGHT' : 'DARK',
+      }).catch(() => {});
+    } catch (e) {}
   }, [open]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const rect = ref.current?.getBoundingClientRect();
     setRect(rect);
     setX(-rect.width);
   }, []);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (open) {
       setX(0);
     } else if (rect) {
diff --git a/components/ui/Modal.jsx b/components/ui/Modal.jsx
index 2fa20ec..ebb2741 100644
--- a/components/ui/Modal.jsx
+++ b/components/ui/Modal.jsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-use-gesture';
 import Store from '../../store';
 import { SafeAreaContext } from './SafeArea';
@@ -26,14 +26,14 @@ const Modal = ({ open, onClose, children }) => {
   }, [safeAreaTop, rect]);
 
   // Get the layout rectangle for the modal
-  useLayoutEffect(() => {
+  useEffect(() => {
     const rect = ref.current?.getBoundingClientRect();
     setRect(rect);
     _close();
   }, [safeAreaTop]);
 
   // If open changes, open/close the modal
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (open) {
       _open();
     } else {