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 {