diff --git a/apps/expo/app.json b/apps/expo/app.json
index 118051cef..f0628c0e4 100644
--- a/apps/expo/app.json
+++ b/apps/expo/app.json
@@ -4,7 +4,7 @@
     "slug": "packrat",
     "version": "1.1.0",
     "orientation": "portrait",
-    "icon": "./assets/packrat-app-icon.png",
+    "icon": "./assets/packrat-app-icon-gradient.png",
     "userInterfaceStyle": "automatic",
     "scheme": "packrat",
     "splash": {
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx
index 089f4515d..6d0ed4904 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx
@@ -1,110 +1,17 @@
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
-import { View, Text, SafeAreaView, TouchableOpacity } from 'react-native';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useIsMobileView } from 'app/hooks/common';
-import { useNavigate } from 'app/hooks/navigation';
-import { useAuthUser } from 'app/modules/auth';
-import { Button } from 'tamagui';
-import { EvilIcons } from '@expo/vector-icons';
-import SVGLogoComponent from 'app/components/logo';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerActions } from '@react-navigation/native';
-import { Slot } from 'expo-router';
-import { DrawerToggleButton } from '@react-navigation/drawer';
 
 export default function StackLayout() {
-  const user = useAuthUser();
-  const isMobileView = useIsMobileView();
-  const { currentTheme } = useTheme();
-  const styles = useCustomStyles(loadStyles);
-  const navigate = useNavigate();
-
+  const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
   return (
     <Stack
       screenOptions={{
         headerRight: () => <DrawerToggleButton />,
-        headerTitleStyle: {
-          fontSize: 24,
-        },
-        headerStyle: {
-          backgroundColor: currentTheme.colors.secondaryBlue,
-        },
-        headerTintColor: currentTheme.colors.text,
+        ...layoutStackScreenOptionsHeaderSettings,
+        headerBlurEffect: 'systemChromeMaterial',
       }}
     />
   );
 }
-
-const loadStyles = (theme) => {
-  const { currentTheme } = theme;
-
-  return {
-    drawerStyles: {
-      backgroundColor: currentTheme.colors.background,
-    },
-    safeArea: {
-      backgroundColor: currentTheme.colors.background,
-    },
-    container: {
-      width: '100%',
-      backgroundColor: currentTheme.colors.background,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    },
-    header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: 16,
-      width: '100%',
-    },
-    logoContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    logoWrapper: {
-      marginHorizontal: 10,
-    },
-    logoText: {
-      color: currentTheme.colors.text,
-      fontSize: 38,
-      fontWeight: '900',
-    },
-    menuBar: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      paddingHorizontal: 16,
-      height: 60,
-    },
-    menuBarItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-      paddingHorizontal: 12,
-    },
-    menuBarItemText: {
-      color: currentTheme.colors.text,
-      fontSize: 18,
-    },
-    drawerTrigger: {},
-    menuBarItemActive: {
-      // Apply styles for the active item
-      // ...
-    },
-    menuBarItemTextActive: {
-      // Apply styles for the active item's text
-      // ...
-    },
-    menuBarItemSelected: {
-      // Apply styles for the selected item
-      // ...
-    },
-    menuBarItemTextSelected: {
-      // Apply styles for the selected item's text
-      // ...
-    },
-  };
-};
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
index d143a9eae..ce9ae34b1 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import About from 'app/screens/about';
-import { Platform, ScrollView, StyleSheet } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform, StyleSheet } from 'react-native';
 
 /**
  * Renders the AboutRoute component.
@@ -26,8 +26,8 @@ export default function AboutRoute() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'About',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/chat.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/chat.tsx
index 234e6ce7c..86705adaf 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/chat.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/chat.tsx
@@ -1,10 +1,10 @@
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import ChatNative from 'app/components/chat/ChatNative';
+import useTheme from 'app/hooks/useTheme';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 import React from 'react';
 import { Platform } from 'react-native';
-import ChatNative from 'app/components/chat/ChatNative';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
 
 export default function Chat() {
   const { currentTheme } = useTheme();
@@ -19,8 +19,8 @@ export default function Chat() {
       <Stack.Screen
         options={{
           title: 'Chat',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx
index 331ecaeea..8d398d6dc 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/items/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { ItemsScreen } from 'app/modules/item';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function ItemsPage() {
   const { currentTheme } = useTheme();
@@ -20,8 +20,8 @@ export default function ItemsPage() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Items',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/map/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/map/index.tsx
index 412f41647..5a5a9f521 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/map/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/map/index.tsx
@@ -3,6 +3,7 @@ import Map from 'app/screens/map';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import { OfflineMapsScreen } from 'app/modules/map/screens/OfflineMapsScreen';
 
 export default function FeedNav() {
   return (
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
index c632702eb..fc393001f 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { OfflineMapsScreen } from 'app/modules/map/screens/OfflineMapsScreen';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function MapsScreen() {
   const { currentTheme } = useTheme();
@@ -20,8 +20,8 @@ export default function MapsScreen() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Maps',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/[id].tsx
index 141dd5bd6..00d654db9 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/[id].tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import { Stack } from 'expo-router';
-import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
 import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { PackTemplateDetailsScreen } from 'app/modules/pack-templates';
+import { Stack } from 'expo-router';
+import Head from 'expo-router/head';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function Pack() {
   const { currentTheme } = useTheme();
@@ -21,8 +21,8 @@ export default function Pack() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Pack Template',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/index.tsx
index 84a589d3e..70f29d112 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack-templates/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { FeedScreen } from 'app/modules/feed';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function PackTemplates() {
   const { currentTheme } = useTheme();
@@ -20,8 +20,8 @@ export default function PackTemplates() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Pack Templates',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
index 66f6b1d6d..d94c6f8ae 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/pack/[id].tsx
@@ -1,12 +1,10 @@
-import React from 'react';
-import PackContainer from 'app/components/pack/PackContainer';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { PackDetailsScreen } from 'app/modules/pack';
-import { DetailsComponent } from 'app/components/details';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function Pack() {
   const { currentTheme } = useTheme();
@@ -23,23 +21,11 @@ export default function Pack() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Pack',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
-
-          headerStyle: {
-            backgroundColor: currentTheme.colors.background,
-          },
-          headerTitleStyle: {
-            fontSize: 24,
-          },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
-          // https://reactnavigation.org/docs/headers#adjusting-header-styles
-
-          // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
         }}
       />
-      {/* <DetailsComponent type='pack'/> */}
       <PackDetailsScreen />
     </>
   );
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx
index de317698b..9f2446cd5 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { ProductsScreen } from 'app/modules/item';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function ProductsPage() {
   const { currentTheme } = useTheme();
@@ -20,8 +20,8 @@ export default function ProductsPage() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Products',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
           headerStyle: {
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/feed/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/feed/_layout.tsx
new file mode 100644
index 000000000..6d0ed4904
--- /dev/null
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/feed/_layout.tsx
@@ -0,0 +1,17 @@
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useRouterSettings } from 'app/hooks/router';
+import { Stack } from 'expo-router';
+import React from 'react';
+
+export default function StackLayout() {
+  const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
+  return (
+    <Stack
+      screenOptions={{
+        headerRight: () => <DrawerToggleButton />,
+        ...layoutStackScreenOptionsHeaderSettings,
+        headerBlurEffect: 'systemChromeMaterial',
+      }}
+    />
+  );
+}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/feed/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
similarity index 53%
rename from apps/expo/app/(app)/(drawer)/(tabs)/(stack)/feed/index.tsx
rename to apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
index 40e866944..a34fc0520 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/feed/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
@@ -1,13 +1,19 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useRouterSettings } from 'app/hooks/router';
+import useTheme from 'app/hooks/useTheme';
 import { FeedScreen } from 'app/modules/feed';
-import { Platform } from 'react-native';
+import { searchQueryAtom } from 'app/modules/feed/atoms';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useSetAtom } from 'jotai';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function FeedNav() {
   const { currentTheme } = useTheme();
+  const { stackScreenOptionsHeaderSettings } = useRouterSettings();
+  const setSearchQuery = useSetAtom(searchQueryAtom);
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -15,24 +21,22 @@ export default function FeedNav() {
           <title>Feed</title>
         </Head>
       )}
+
       <Stack.Screen
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Feed',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
-
-          headerStyle: {
-            backgroundColor: currentTheme.colors.background,
-          },
-          headerTitleStyle: {
-            fontSize: 24,
+          headerSearchBarOptions: {
+            placeholder: 'Search',
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
-          // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
-          // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
+          ...stackScreenOptionsHeaderSettings,
         }}
       />
       <FeedScreen />
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx
new file mode 100644
index 000000000..6d0ed4904
--- /dev/null
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx
@@ -0,0 +1,17 @@
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useRouterSettings } from 'app/hooks/router';
+import { Stack } from 'expo-router';
+import React from 'react';
+
+export default function StackLayout() {
+  const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
+  return (
+    <Stack
+      screenOptions={{
+        headerRight: () => <DrawerToggleButton />,
+        ...layoutStackScreenOptionsHeaderSettings,
+        headerBlurEffect: 'systemChromeMaterial',
+      }}
+    />
+  );
+}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx
similarity index 51%
rename from apps/expo/app/(app)/(drawer)/(tabs)/index.tsx
rename to apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx
index baa0735da..fbce2dcaa 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx
@@ -1,21 +1,20 @@
-import React from 'react';
-import { Platform, View } from 'react-native';
-import { Redirect, Stack } from 'expo-router';
-import { theme } from 'app/theme';
-import { DashboardScreen } from 'app/modules/dashboard';
+import { useOfflineStore } from 'app/atoms';
 import useTheme from 'app/hooks/useTheme';
-import { useAuthUser, LoginScreen } from 'app/modules/auth';
+import { useAuthUser } from 'app/modules/auth';
+import { theme } from 'app/theme';
+import { Redirect, Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import { useOfflineStore } from 'app/atoms';
+import { useAtom } from 'jotai';
+import React from 'react';
+import { Platform } from 'react-native';
+
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { LoginScreen } from 'app/modules/auth';
+import { DashboardScreen } from 'app/modules/dashboard';
+import { View } from 'tamagui';
 
 export default function HomeScreen() {
-  const {
-    enableDarkMode,
-    enableLightMode,
-    isDark,
-    isLight,
-    currentTheme = theme,
-  } = useTheme();
+  const { currentTheme = theme } = useTheme();
 
   const user = useAuthUser();
   const { connectionStatus } = useOfflineStore();
@@ -25,6 +24,8 @@ export default function HomeScreen() {
     flex: 1,
   };
 
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -35,11 +36,24 @@ export default function HomeScreen() {
       <Stack.Screen
         options={{
           title: 'Home',
+          headerSearchBarOptions: {
+            placeholder: 'Search by park, city, or trail',
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
         }}
       />
       {connectionStatus === 'connected' && (
         <View style={mutualStyles}>
-          {!user ? <LoginScreen /> : <DashboardScreen />}
+          {!user ? (
+            <LoginScreen />
+          ) : (
+            <>
+              {/* Dashboard or Search Results */}
+              <DashboardScreen />
+            </>
+          )}
         </View>
       )}
       {connectionStatus === 'offline' && <Redirect href="offline/maps" />}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx
new file mode 100644
index 000000000..6d0ed4904
--- /dev/null
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx
@@ -0,0 +1,17 @@
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useRouterSettings } from 'app/hooks/router';
+import { Stack } from 'expo-router';
+import React from 'react';
+
+export default function StackLayout() {
+  const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
+  return (
+    <Stack
+      screenOptions={{
+        headerRight: () => <DrawerToggleButton />,
+        ...layoutStackScreenOptionsHeaderSettings,
+        headerBlurEffect: 'systemChromeMaterial',
+      }}
+    />
+  );
+}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx
similarity index 72%
rename from apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
rename to apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx
index 7c5961bae..00798bb3b 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/packs/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import useTheme from 'app/hooks/useTheme';
 import { FeedScreen } from 'app/modules/feed';
-import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-import useTheme from 'app/hooks/useTheme';
-import { DrawerToggleButton } from '@react-navigation/drawer';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function Packs() {
   const { currentTheme } = useTheme();
@@ -20,17 +20,17 @@ export default function Packs() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Packs',
-          headerRight: () => (
-            <DrawerToggleButton tintColor={currentTheme.colors.tertiaryBlue} />
+          headerRight: ({ tintColor }) => (
+            <DrawerToggleButton tintColor={tintColor} />
           ),
 
-          headerStyle: {
-            backgroundColor: currentTheme.colors.background,
-          },
-          headerTitleStyle: {
-            fontSize: 24,
-          },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          // headerStyle: {
+          //   backgroundColor: currentTheme.colors.background,
+          // },
+          // headerTitleStyle: {
+          //   fontSize: 24,
+          // },
+          // headerTintColor: currentTheme.colors.tertiaryBlue,
 
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx
new file mode 100644
index 000000000..98e8146c9
--- /dev/null
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx
@@ -0,0 +1,16 @@
+import { DrawerToggleButton } from '@react-navigation/drawer';
+import { useRouterSettings } from 'app/hooks/router';
+import { Stack } from 'expo-router';
+import React from 'react';
+
+export default function StackLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerRight: () => <DrawerToggleButton />,
+        headerBlurEffect: 'systemChromeMaterial',
+        title: 'Profile',
+      }}
+    />
+  );
+}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx
index 658d8774b..341ba75fd 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/profile/index.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
 import { ProfileScreen } from 'app/modules/user';
-import { Platform, ScrollView } from 'react-native';
-import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import React from 'react';
+import { Platform } from 'react-native';
 
 export default function Profile() {
   return (
@@ -12,15 +11,6 @@ export default function Profile() {
           <title>Profile</title>
         </Head>
       )}
-      <Stack.Screen
-        options={{
-          // https://reactnavigation.org/docs/headers#setting-the-header-title
-          title: 'Profile',
-          // http://reactnavigation.org/docs/headers#adjusting-header-styles
-
-          // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
-        }}
-      />
       <ProfileScreen />
     </>
   );
diff --git a/apps/expo/assets/packrat-app-icon-gradient.png b/apps/expo/assets/packrat-app-icon-gradient.png
new file mode 100644
index 000000000..4649d8d2a
Binary files /dev/null and b/apps/expo/assets/packrat-app-icon-gradient.png differ
diff --git a/apps/vite/package.json b/apps/vite/package.json
index 2c7e85138..b08645edd 100644
--- a/apps/vite/package.json
+++ b/apps/vite/package.json
@@ -2,6 +2,7 @@
   "name": "vite-app",
   "private": true,
   "version": "1.1.1",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "yarn run build:tsc && yarn run build:vite",
diff --git a/packages/app/components/ErrorCard/ErrorCard.tsx b/packages/app/components/ErrorCard/ErrorCard.tsx
index 36252594a..16b388ed0 100644
--- a/packages/app/components/ErrorCard/ErrorCard.tsx
+++ b/packages/app/components/ErrorCard/ErrorCard.tsx
@@ -30,10 +30,7 @@ export const ErrorCard: FC<ErrorCardProps> = ({
       }}
     >
       <XStack gap={8} style={{ alignItems: 'flex-start', width: 320 }}>
-        <XCircle
-          size={20}
-          style={{ color: currentTheme.colors.error, marginTop: 4 }}
-        />
+        <XCircle size={20} color={currentTheme.colors.error} mt={4} />
         <View style={{ flex: 1 }}>
           <RText style={{ color: currentTheme.colors.error, fontWeight: 600 }}>
             {title}
diff --git a/packages/app/components/FilterBadge.tsx b/packages/app/components/FilterBadge.tsx
index 846c3102b..89117dc06 100644
--- a/packages/app/components/FilterBadge.tsx
+++ b/packages/app/components/FilterBadge.tsx
@@ -1,24 +1,34 @@
-import { RDropdownMenu, RStack } from '@packrat/ui';
+import { Chip, RDropdownMenu } from '@packrat/ui';
+import { ChevronDown } from '@tamagui/lucide-icons';
 import React from 'react';
 
-const FilterBadge = ({ menuItems, selectedValue, onSelect }) => {
+interface FilterBadgeProps {
+  menuItems: string[];
+  selectedValue: string;
+  onSelect: (value: string) => void;
+}
+
+const FilterBadge = ({
+  menuItems = [],
+  selectedValue = '',
+  onSelect = () => {},
+}: FilterBadgeProps) => {
   return (
-    <RStack
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        margin: 5,
-        borderRadius: 20,
-      }}
-    >
-      <RDropdownMenu
-        menuItems={menuItems.map((item) => ({
-          label: item,
-          onSelect: () => onSelect(item),
-        }))}
-        menuName={selectedValue}
-      />
-    </RStack>
+    <RDropdownMenu
+      menuItems={menuItems.map((item) => ({
+        label: item,
+        onSelect: () => onSelect(item),
+      }))}
+      menuName={selectedValue}
+      trigger={
+        <Chip rounded theme="primary" size="small" key={selectedValue}>
+          <Chip.Text>{selectedValue}</Chip.Text>
+          <Chip.Icon>
+            <ChevronDown size={14} />
+          </Chip.Icon>
+        </Chip>
+      }
+    />
   );
 };
 
diff --git a/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx b/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
index 8d011a19b..4a090b71b 100644
--- a/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
+++ b/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx
@@ -1,14 +1,10 @@
+import { Chip } from '@packrat/ui';
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { type TextInput } from 'react-native';
+import { Text, XStack } from 'tamagui'; // Ensure proper imports based on imports.md
 import { SearchInput } from '../SearchInput';
-import { RStack as OriginalRStack, RText as OriginalRText } from '@packrat/ui';
-import useTheme from 'app/hooks/useTheme';
-
 import { usePlacesAutoComplete } from './usePlacesAutoComplete';
 
-const RStack: any = OriginalRStack;
-const RText: any = OriginalRText;
-
 interface PlacesAutocompleteProps {
   onSelect?: (geoJSON: any) => void;
   placeholder?: string;
@@ -31,6 +27,7 @@ export const PlacesAutocomplete = forwardRef<any, PlacesAutocompleteProps>(
 
     return (
       <SearchInput
+        onCreate={() => {}}
         onSelect={handleSelect}
         placeholder={placeholder}
         results={data}
@@ -43,28 +40,27 @@ export const PlacesAutocomplete = forwardRef<any, PlacesAutocompleteProps>(
   },
 );
 
-const PlaceItem = ({ item }: any) => {
-  const { currentTheme } = useTheme();
+export const PlaceItem = ({ item, onPress = () => {} }: any) => {
   return (
-    <RStack style={{ flexDirection: 'row' }}>
-      <RText fontWeight="400" color="red">
+    <XStack
+      ai="center"
+      p="$3"
+      br="$4"
+      bg="$background"
+      hoverStyle={{
+        bg: '$gray2',
+      }}
+      pressStyle={{
+        bg: '$gray3',
+      }}
+      onPress={onPress}
+    >
+      <Text color="$color" fontSize="$4" flex={1}>
         {item.properties.name}
-      </RText>
-      <RText
-        style={{
-          backgroundColor: '#e6e6e6',
-          fontWeight: 600,
-          color: '#000000',
-          borderRadius: 8,
-          paddingLeft: 10,
-          paddingRight: 10,
-          width: 'auto',
-          fontSize: 12,
-          textAlign: 'center',
-        }}
-      >
-        {item.properties.osm_value}
-      </RText>
-    </RStack>
+      </Text>
+      <Chip rounded theme="blue" size="small" key="blue">
+        <Chip.Text>{item.properties.osm_value}</Chip.Text>
+      </Chip>
+    </XStack>
   );
 };
diff --git a/packages/app/components/PlacesAutocomplete/usePlacesAutoComplete.ts b/packages/app/components/PlacesAutocomplete/usePlacesAutoComplete.ts
index 7707bf7e4..ea0c58f4b 100644
--- a/packages/app/components/PlacesAutocomplete/usePlacesAutoComplete.ts
+++ b/packages/app/components/PlacesAutocomplete/usePlacesAutoComplete.ts
@@ -1,9 +1,11 @@
-import { usePhotonDetail } from 'app/hooks/photonDetail';
-import { useState } from 'react';
 import { useDebouncedValue } from 'app/hooks/common';
+import { usePhotonDetail } from 'app/hooks/photonDetail';
+import { atom, useAtom } from 'jotai';
+
+export const placesAutocompleteSearchAtom = atom('');
 
 export const usePlacesAutoComplete = (onSelect) => {
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useAtom(placesAutocompleteSearchAtom);
   const debouncedSearch = useDebouncedValue(search, 200);
   const { data } = usePhotonDetail(debouncedSearch, !!debouncedSearch);
 
diff --git a/packages/app/components/SearchInput/SearchInput.tsx b/packages/app/components/SearchInput/SearchInput.tsx
index 12b0b9f84..c0b714c0c 100644
--- a/packages/app/components/SearchInput/SearchInput.tsx
+++ b/packages/app/components/SearchInput/SearchInput.tsx
@@ -19,6 +19,7 @@ import {
 } from '@packrat/ui';
 import { View, Pressable as OriginalPressable } from 'react-native';
 import { Adapt, Popover as OriginalPopover, Button } from 'tamagui';
+import { SearchResults } from './SearchResults';
 
 const Popover = OriginalPopover;
 const RStack = OriginalRStack;
@@ -217,30 +218,12 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
               </RIconButton>
             )}
           </RStack>
-          <RStack
-            style={{
-              position: 'relative',
-              display: isVisible ? 'block' : 'none',
-            }}
-          >
-            {showSearchResults && (
-              <RScrollView keyboardShouldPersistTaps="handled">
-                <View role="list" style={{ width: '100%' }}>
-                  {options.map((result, i) => (
-                    <Pressable
-                      key={`result + ${i}`}
-                      role="listitem"
-                      onPress={() => handleSearchResultClick(result)}
-                      paddingHorizontal={16}
-                      paddingVertical={8}
-                    >
-                      {cloneElement(ResultItemComponent, { item: result })}
-                    </Pressable>
-                  ))}
-                </View>
-              </RScrollView>
-            )}
-          </RStack>
+          <SearchResults
+            results={options}
+            onResultClick={handleSearchResultClick}
+            resultItemComponent={ResultItemComponent}
+            isVisible={isVisible}
+          />
         </RStack>
       );
     }
diff --git a/packages/app/components/SearchInput/SearchResults.tsx b/packages/app/components/SearchInput/SearchResults.tsx
new file mode 100644
index 000000000..f532de62a
--- /dev/null
+++ b/packages/app/components/SearchInput/SearchResults.tsx
@@ -0,0 +1,74 @@
+// SearchResults.tsx
+import { RScrollView, RStack, YStack } from '@packrat/ui';
+import useTheme from 'app/hooks/useTheme';
+import React, { cloneElement } from 'react';
+import { Platform, Pressable, SafeAreaView } from 'react-native';
+
+interface SearchResultsProps {
+  results: any[];
+  onResultClick: (result: any, index: number) => void;
+  resultItemComponent: React.ReactElement;
+  isVisible: boolean;
+  containerWidth?: number; // For web width adjustments
+}
+
+export const SearchResults: React.FC<SearchResultsProps> = ({
+  results,
+  onResultClick,
+  resultItemComponent: ResultItemComponent,
+  isVisible,
+  containerWidth,
+}) => {
+  const { isDark, currentTheme } = useTheme();
+
+  if (!isVisible) return null;
+
+  const content = (
+    <YStack
+      role="list"
+      style={{
+        width: containerWidth || '100%',
+        maxHeight: Platform.OS === 'web' ? 200 : undefined,
+        overflow: Platform.OS === 'web' ? 'scroll' : 'hidden',
+      }}
+      gap="$2"
+      pt="$2"
+    >
+      {results &&
+        Array.isArray(results) &&
+        results.map((result, index) => (
+          <Pressable
+            key={`result-${index}`}
+            role="listitem"
+            onPress={() => onResultClick(result, index)}
+          >
+            {cloneElement(ResultItemComponent, {
+              item: result,
+              key: `item-${index}`,
+              onPress: () => onResultClick(result, index),
+            })}
+          </Pressable>
+        ))}
+    </YStack>
+  );
+
+  return Platform.OS === 'web' ? (
+    <RStack
+      style={{
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 8,
+        backgroundColor: isDark
+          ? currentTheme.colors.black
+          : currentTheme.colors.white,
+        width: containerWidth,
+      }}
+    >
+      {content}
+    </RStack>
+  ) : (
+    <SafeAreaView style={{ flex: 1 }}>
+      <RScrollView keyboardShouldPersistTaps="handled">{content}</RScrollView>
+    </SafeAreaView>
+  );
+};
diff --git a/packages/app/components/chat/ChatNative.tsx b/packages/app/components/chat/ChatNative.tsx
index d584730bf..adff6dd4a 100644
--- a/packages/app/components/chat/ChatNative.tsx
+++ b/packages/app/components/chat/ChatNative.tsx
@@ -40,7 +40,7 @@ export default function ChatNative() {
         style={{ width: 370, position: 'absolute', bottom: 90, left: 5 }}
       >
         <RButton
-          backgroundColor="$background"
+          bg="$background"
           color="$color"
           size="$4"
           circular
diff --git a/packages/app/components/chat/SuggestionComponent.tsx b/packages/app/components/chat/SuggestionComponent.tsx
index cfaeb0293..3706edc8d 100644
--- a/packages/app/components/chat/SuggestionComponent.tsx
+++ b/packages/app/components/chat/SuggestionComponent.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Text, ScrollView } from 'react-native';
+import { View, Text, type ScrollView } from 'react-native';
 import { RButton, RStack } from '@packrat/ui';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 import { loadStyles } from './chat.style';
diff --git a/packages/app/components/details/index.tsx b/packages/app/components/details/index.tsx
index 66bf351f8..e4e50cc0b 100644
--- a/packages/app/components/details/index.tsx
+++ b/packages/app/components/details/index.tsx
@@ -3,7 +3,7 @@ import { Text } from 'react-native';
 import { CustomCard } from '../card';
 import { RStack } from '@packrat/ui';
 
-interface DetailsComponent {
+interface DetailsComponentProps {
   type: string;
   data: any; // Need type for this
   isLoading: boolean;
@@ -19,7 +19,7 @@ export const DetailsComponent = ({
   error,
   additionalComps,
   link,
-}: DetailsComponent) => {
+}: DetailsComponentProps) => {
   const renderDetails = () => {
     switch (type) {
       case 'pack':
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 2587d8f4e..4b0e3c218 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -1,47 +1,39 @@
 import useTheme from 'app/hooks/useTheme';
 import React from 'react';
-import {
-  Platform,
-  ScrollView,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
+import { Platform, SafeAreaView } from 'react-native';
+import { ScrollView, Stack, YStack } from 'tamagui';
 
-const Layout = ({
-  children,
-  customStyle = {},
-}: {
+type LayoutProps = {
   children: React.ReactNode;
-  customStyle?: StyleProp<ViewStyle>;
-}) => {
+  customStyle?: Record<string, any>;
+};
+
+const Layout: React.FC<LayoutProps> = ({ children, customStyle = {} }) => {
   const { currentTheme } = useTheme();
+
   return (
-    <View
-      style={[
-        {
-          display: 'flex',
-          backgroundColor: currentTheme.colors.background,
-          flex: 1,
-          maxWidth: 1440,
-          margin: 'auto',
-          justifyContent: Platform.OS === 'web' ? 'center' : 'flex-start',
-          paddingTop: 20,
-          paddingBottom: Platform.OS !== 'web' ? 44 : undefined,
-          paddingHorizontal: 16,
-          marginBottom: 20,
-          alignItems: 'center',
-          width: '100%',
-        },
-        customStyle,
-      ]}
-    >
-      <View style={{ width: '100%' }}>
-        <ScrollView contentContainerStyle={{ width: '100%' }}>
-          {children}
-        </ScrollView>
-      </View>
-    </View>
+    <SafeAreaView style={{ flex: 1 }}>
+      <YStack
+        flex={1}
+        backgroundColor={currentTheme.colors.background}
+        maxWidth={1440}
+        margin="auto"
+        alignItems="center"
+        justifyContent="flex-start"
+        paddingTop={Platform.OS === 'web' ? 20 : '$2'}
+        paddingBottom={Platform.OS !== 'web' ? 44 : undefined}
+        paddingHorizontal="$4"
+        marginBottom={Platform.OS === 'web' ? 20 : '$2'}
+        width="100%"
+        {...customStyle}
+      >
+        <Stack width="100%">
+          <ScrollView contentContainerStyle={{ width: '100%' }}>
+            {children}
+          </ScrollView>
+        </Stack>
+      </YStack>
+    </SafeAreaView>
   );
 };
 
diff --git a/packages/app/components/navigation/Tabs.tsx b/packages/app/components/navigation/Tabs.tsx
index c2c53bed8..1334794e5 100644
--- a/packages/app/components/navigation/Tabs.tsx
+++ b/packages/app/components/navigation/Tabs.tsx
@@ -1,16 +1,21 @@
-import React, { useContext } from 'react';
-import { Tabs as ExpoTabs } from 'expo-router/tabs';
-import { TabList } from './TabList';
+import { Feather } from '@expo/vector-icons';
+import { RIconButton } from '@packrat/ui';
 import { DrawerToggleButton } from '@react-navigation/drawer';
-import { Stack, usePathname } from 'expo-router';
-import { Feather, MaterialCommunityIcons } from '@expo/vector-icons';
-import { BlurView } from 'expo-blur';
 import useTheme from 'app/hooks/useTheme';
+import { usePathname } from 'expo-router';
+import { Tabs as ExpoTabs } from 'expo-router/tabs';
 import { StatusBar } from 'expo-status-bar';
-import { RIconButton } from '@packrat/ui';
-import ThemeContext from '../../context/theme';
+import {
+  BackpackIcon,
+  HomeIcon,
+  NewspaperIcon,
+  SearchIcon,
+  UserRoundIcon,
+} from 'lucide-react-native';
+import React, { useContext } from 'react';
 import { View } from 'react-native';
 import FAB from '../../components/Fab/Fab';
+import ThemeContext from '../../context/theme';
 
 export const Tabs = () => {
   const formatHeaderTitle = () => {
@@ -40,11 +45,6 @@ export const Tabs = () => {
     <>
       <ExpoTabs
         screenOptions={{
-          tabBarStyle: {
-            position: 'absolute',
-            backgroundColor: currentTheme.colors.background,
-            borderTopWidth: 0,
-          },
           headerShown: false,
           headerRight: () => (
             <View
@@ -62,51 +62,47 @@ export const Tabs = () => {
               <DrawerToggleButton tintColor={currentTheme.colors.text} />
             </View>
           ),
-          headerTitleStyle: {
-            fontSize: 24,
-          },
-          headerStyle: {
-            backgroundColor: currentTheme.colors.background,
-          },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
         }}
       >
         <ExpoTabs.Screen
           name="index"
           options={{
-            headerShown: true,
+            headerShown: false,
             tabBarLabel: 'Dashboard',
             tabBarIcon: ({ color, size }) => (
-              <MaterialCommunityIcons name="home" size={size} color={color} />
+              <HomeIcon size={size} color={color} />
             ),
           }}
         />
         <ExpoTabs.Screen
-          name="feed/index"
+          name="feed"
           options={{
-            href: null,
-            headerShown: true,
+            href: 'feed',
+            headerShown: false,
             tabBarLabel: 'Feed',
+            tabBarIcon: ({ color, size, focused }) => (
+              <NewspaperIcon size={size} color={color} />
+            ),
+          }}
+        />
+        <ExpoTabs.Screen
+          name="packs"
+          options={{
+            href: 'packs',
+            headerShown: false,
+            tabBarLabel: 'Packs',
             tabBarIcon: ({ color, size }) => (
-              <MaterialCommunityIcons
-                name="newspaper"
-                size={size}
-                color={color}
-              />
+              <BackpackIcon size={size} color={color} />
             ),
           }}
         />
         <ExpoTabs.Screen
-          name="profile/index"
+          name="profile"
           options={{
-            headerShown: true,
+            headerShown: false,
             tabBarLabel: 'Profile',
             tabBarIcon: ({ color, size }) => (
-              <MaterialCommunityIcons
-                name="account"
-                size={size}
-                color={color}
-              />
+              <UserRoundIcon size={size} color={color} />
             ),
           }}
         />
@@ -125,11 +121,7 @@ export const Tabs = () => {
             headerShown: false,
             tabBarLabel: 'Search',
             tabBarIcon: ({ color, size }) => (
-              <MaterialCommunityIcons
-                name="magnify"
-                size={size}
-                color={color}
-              />
+              <SearchIcon size={size} color={color} />
             ),
           }}
         />
diff --git a/packages/app/context/ThirdPartyThemeProviders.tsx b/packages/app/context/ThirdPartyThemeProviders.tsx
index 3e0eb739d..0c51ca7a4 100644
--- a/packages/app/context/ThirdPartyThemeProviders.tsx
+++ b/packages/app/context/ThirdPartyThemeProviders.tsx
@@ -12,6 +12,12 @@ import {
 import FontLoader from './FontLoader';
 import { setupDev } from 'tamagui';
 import { Toaster } from 'burnt/web';
+import {
+  ThemeProvider as NavigationThemeProvider,
+  DarkTheme as NavigationDarkTheme,
+  DefaultTheme as NavigationDefaultTheme,
+  useTheme as useNavigationTheme,
+} from '@react-navigation/native';
 
 const ThirdPartyProviders = ({ children, isDark = false }) => {
   setupDev({
@@ -26,16 +32,20 @@ const ThirdPartyProviders = ({ children, isDark = false }) => {
 
   return (
     <FontLoader>
-      <TamaguiProvider config={config} disableRootThemeClass={false}>
-        <TamaguiTheme name={isDark ? 'dark' : 'light'}>
-          <ToastProvider>
-            <RNPaperThemeProvider theme={darkPaperTheme}>
-              {children}
-              <Toaster />
-            </RNPaperThemeProvider>
-          </ToastProvider>
-        </TamaguiTheme>
-      </TamaguiProvider>
+      <NavigationThemeProvider
+        value={isDark ? NavigationDarkTheme : NavigationDefaultTheme}
+      >
+        <TamaguiProvider config={config} disableRootThemeClass={false}>
+          <TamaguiTheme name={isDark ? 'dark' : 'light'}>
+            <ToastProvider>
+              <RNPaperThemeProvider theme={darkPaperTheme}>
+                {children}
+                <Toaster richColors />
+              </RNPaperThemeProvider>
+            </ToastProvider>
+          </TamaguiTheme>
+        </TamaguiProvider>
+      </NavigationThemeProvider>
     </FontLoader>
   );
 };
diff --git a/packages/app/hooks/router/index.ts b/packages/app/hooks/router/index.ts
index 92efe42b7..4927b1eb0 100644
--- a/packages/app/hooks/router/index.ts
+++ b/packages/app/hooks/router/index.ts
@@ -1 +1,2 @@
 export { useRouter } from './useRouter';
+export { useRouterSettings } from './useRouterSettings';
diff --git a/packages/app/hooks/router/useRouterSettings.ts b/packages/app/hooks/router/useRouterSettings.ts
new file mode 100644
index 000000000..229d641aa
--- /dev/null
+++ b/packages/app/hooks/router/useRouterSettings.ts
@@ -0,0 +1,32 @@
+import useTheme from 'app/hooks/useTheme';
+import { Platform } from 'react-native';
+
+export function useRouterSettings() {
+  const { currentTheme } = useTheme();
+
+  const stackScreenOptionsHeaderSettings = {
+    headerStyle: {
+      // Hack to ensure the collapsed small header shows the shadow / border.
+      backgroundColor: 'rgba(255,255,255,0.01)',
+    },
+    headerTransparent: Platform.OS === 'ios',
+  };
+
+  const layoutStackScreenOptionsHeaderSettings = {
+    headerTransparent: Platform.OS === 'ios',
+    headerBlurEffect: 'systemChromeMaterial',
+    headerShadowVisible: true,
+    headerLargeTitleShadowVisible: false,
+    headerStyle: {
+      // Hack to ensure the collapsed small header shows the shadow / border.
+      backgroundColor: 'rgba(255,255,255,0.01)',
+    },
+    headerLargeTitle: true,
+    title: 'Packrat',
+  };
+
+  return {
+    stackScreenOptionsHeaderSettings,
+    layoutStackScreenOptionsHeaderSettings,
+  };
+}
diff --git a/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx b/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx
index 419d16ffd..6d31e14fd 100644
--- a/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx
+++ b/packages/app/modules/dashboard/components/HeroSection/HeroSection.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import { RStack, RText as OriginalRText, RButton } from '@packrat/ui';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Platform, View } from 'react-native';
+import { RText as OriginalRText, RButton, RStack, XStack } from '@packrat/ui';
+import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete/PlacesAutocomplete';
+import { useRouter } from 'app/hooks/router';
+import useCustomStyles from 'app/hooks/useCustomStyles';
 import useTheme from 'app/hooks/useTheme';
 import { useAuthUser } from 'app/modules/auth';
-import { useRouter } from 'app/hooks/router';
 import { first } from 'lodash';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete/PlacesAutocomplete';
+import React from 'react';
+import { Platform, View } from 'react-native';
 
 const RText: any = OriginalRText;
 
@@ -59,7 +59,7 @@ export const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
   const firstNameOrUser = first(user?.name?.split(' ')) ?? 'User';
   const bannerText =
     firstNameOrUser !== 'User'
-      ? `Let's find a new trail, ${firstNameOrUser}`
+      ? `Let's find a new trail, ${String(firstNameOrUser)}`
       : "Let's find a new trail";
 
   return (
@@ -74,19 +74,14 @@ export const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
               style={styles.searchBar}
             />
           </View>
-        ) : (
+        ) : Platform.OS === 'android' ? (
           <RButton
             style={styles.searchButton}
             onPress={() => {
               router.push('/search');
             }}
           >
-            <RStack
-              style={{
-                alignItems: 'center',
-                flexDirection: 'row',
-              }}
-            >
+            <XStack ai="center" jc="flex-start" f={1} gap="$2">
               <MaterialCommunityIcons
                 name="magnify"
                 size={24}
@@ -95,9 +90,9 @@ export const HeroSection: React.FC<HeroSectionProps> = ({ onSelect }) => {
               <RText color={currentTheme.colors.text} opacity={0.6}>
                 Search by park, city, or trail
               </RText>
-            </RStack>
+            </XStack>
           </RButton>
-        )}
+        ) : null}
       </RStack>
     </View>
   );
@@ -145,7 +140,8 @@ const loadStyles = (theme: any) => {
       minWidth: '100%',
       flexDirection: 'row',
       justifyContent: 'flex-start',
-      padding: 10,
+      padding: 0,
+      paddingHorizontal: 10,
       borderRadius: 5,
     },
   };
diff --git a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
index 03b3c7382..ef09816a1 100644
--- a/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
+++ b/packages/app/modules/dashboard/screens/DashboardScreen/DashboardScreen.tsx
@@ -1,16 +1,91 @@
-import React from 'react';
-import { Platform, View } from 'react-native';
-import { RStack, RScrollView } from '@packrat/ui';
-import { HeroSection, Section, SectionHeader } from '../../components';
-import useCustomStyles from 'app/hooks/useCustomStyles';
+import { useRouter } from '@packrat/crosspath';
+import { RScrollView, RStack } from '@packrat/ui';
+import FAB from 'app/components/Fab/Fab';
 import Layout from 'app/components/layout/Layout';
+import { SearchResults } from 'app/components/SearchInput/SearchResults';
 import { useScreenWidth } from 'app/hooks/common';
-import FAB from 'app/components/Fab/Fab';
+import useCustomStyles from 'app/hooks/useCustomStyles';
 import { FeedPreview } from 'app/modules/feed';
-import { Button, Stack } from 'tamagui';
-import { useRouter } from '@packrat/crosspath';
+import { useAtom } from 'jotai';
+import React from 'react';
+import { Platform, View } from 'react-native';
+import { Stack } from 'tamagui';
+import { HeroSection, Section, SectionHeader } from '../../components';
 
-export const DashboardScreen = () => {
+import { PlaceItem } from 'app/components/PlacesAutocomplete/PlacesAutocomplete';
+import {
+  placesAutocompleteSearchAtom,
+  usePlacesAutoComplete,
+} from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+
+interface SearchResult {
+  properties: {
+    osm_id: number;
+    osm_type: string;
+    name: string;
+  };
+  geometry: {
+    coordinates: [number, number];
+  };
+}
+
+function NativeDashboardScreen() {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
+
+  const handleSearchSelect = async (selectedResult: SearchResult) => {
+    try {
+      const { osm_id, osm_type, name } = selectedResult.properties;
+
+      const coordinates = selectedResult.geometry.coordinates;
+
+      if (!osm_id || !osm_type) {
+        console.error(
+          'No OSM ID or OSM type found in the selected search result',
+        );
+      } else {
+        router.push({
+          pathname: '/destination/query',
+          query: {
+            osmType: osm_type,
+            osmId: osm_id,
+            name,
+          },
+        });
+      }
+    } catch (error) {
+      console.error('errorrrrrr', error);
+    }
+  };
+
+  const {
+    data: searchResults,
+    handleSelect,
+    search,
+    setSearch,
+  } = usePlacesAutoComplete(handleSearchSelect);
+
+  const DashboardWithNativeSearch = () => {
+    if (searchQuery) {
+      return (
+        <SearchResults
+          results={searchResults}
+          onResultClick={(result) => {
+            handleSelect(result); // Handle the selection logic
+            setSearchQuery(''); // Clear search query
+          }}
+          resultItemComponent={<PlaceItem />} // Custom item rendering
+          isVisible={true}
+        />
+      );
+    }
+    return <DashboardScreenInner />;
+  };
+
+  return <DashboardWithNativeSearch />;
+}
+
+const DashboardScreenInner = () => {
   const styles = useCustomStyles(loadStyles);
   const router = useRouter();
 
@@ -61,6 +136,13 @@ export const DashboardScreen = () => {
   );
 };
 
+export const DashboardScreen = () => {
+  if (Platform.OS === 'web') {
+    return <DashboardScreenInner />;
+  }
+  return <NativeDashboardScreen />;
+};
+
 const loadStyles = (theme) => {
   const { currentTheme } = theme;
   const { screenWidth } = useScreenWidth();
diff --git a/packages/app/modules/feed/atoms/index.ts b/packages/app/modules/feed/atoms/index.ts
new file mode 100644
index 000000000..66b75c867
--- /dev/null
+++ b/packages/app/modules/feed/atoms/index.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const searchQueryAtom = atom('');
diff --git a/packages/app/modules/feed/components/FeedSearchFilter.tsx b/packages/app/modules/feed/components/FeedSearchFilter.tsx
index 6857b4d19..2e6ab87c0 100644
--- a/packages/app/modules/feed/components/FeedSearchFilter.tsx
+++ b/packages/app/modules/feed/components/FeedSearchFilter.tsx
@@ -1,19 +1,19 @@
-import React, { useRef, useEffect, useState } from 'react';
-import useTheme from 'app/hooks/useTheme';
-import useCustomStyles from 'app/hooks/useCustomStyles';
-import { View } from 'react-native';
 import {
-  RText as OriginalRText,
-  RStack as OriginalRStack,
-  RSeparator as OriginalRSeparator,
-  RButton,
   Form,
   InputWithIcon,
+  RSeparator as OriginalRSeparator,
+  RStack as OriginalRStack,
+  RText as OriginalRText,
+  XStack,
 } from '@packrat/ui';
 import { Plus, Search, X } from '@tamagui/lucide-icons';
-import { useFeedSortOptions } from '../hooks';
 import FilterBadge from 'app/components/FilterBadge';
 import RSecondaryButton from 'app/components/RSecondaryButton';
+import useCustomStyles from 'app/hooks/useCustomStyles';
+import useTheme from 'app/hooks/useTheme';
+import React, { useEffect, useRef, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { useFeedSortOptions } from '../hooks';
 
 const RStack = OriginalRStack;
 const RText = OriginalRText;
@@ -42,7 +42,7 @@ export const FeedSearchFilter = ({
 }: FeedSearchFilterProps) => {
   const { currentTheme } = useTheme();
   const styles = useCustomStyles(loadStyles);
-  const [searchValue, setSearchValue] = useState();
+  const [searchValue, setSearchValue] = useState('');
   const debounceTimerRef = useRef(null);
   const sortOptions = useFeedSortOptions(
     feedType,
@@ -73,64 +73,73 @@ export const FeedSearchFilter = ({
     }
   }, [sortOptions, queryString]);
 
-  return (
-    <View style={styles.filterContainer}>
-      <View style={styles.searchContainer}>
-        <Form>
-          <RStack
-            style={{
-              flexDirection: 'row',
-              margin: 0,
-              padding: 0,
-              width: '100%',
-            }}
-          >
-            <InputWithIcon
-              LeftIcon={<Search />}
-              RightIcon={<X />}
-              onChange={handleSetSearchValue}
-              placeholder={`Search ${feedType || 'Feed'}`}
-              value={searchValue}
-            />
-          </RStack>
-        </Form>
-      </View>
-      <RSeparator />
+  // Filters Component
+  const Filters = () => (
+    <XStack ai="center" jc="flex-start" gap={'$2'} mb={'$2'}>
+      {feedType === 'public' && (
+        <FilterBadge
+          menuItems={['Packs', 'Trips']}
+          selectedValue={selectedTypes?.pack ? 'Packs' : 'Trips'}
+          onSelect={(value) => handleTypeChange?.(value)}
+        />
+      )}
 
-      {!isSortHidden && (
-        <RStack style={{ flexDirection: 'row' }}>
-          {feedType === 'public' && (
-            <FilterBadge
-              menuItems={['Packs', 'Trips']}
-              selectedValue={selectedTypes?.pack ? 'Packs' : 'Trips'}
-              onSelect={(value) => handleTypeChange?.(value)}
-            />
-          )}
+      <FilterBadge
+        menuItems={sortOptions}
+        selectedValue={queryString}
+        onSelect={handleSortChange}
+      />
 
-          <FilterBadge
-            menuItems={sortOptions}
-            selectedValue={queryString}
-            onSelect={handleSortChange}
-          />
+      {(feedType === 'userPacks' || feedType === 'userTrips') && (
+        <RSecondaryButton
+          style={{ marginLeft: 'auto', marginTop: 8 }}
+          label="Add new"
+          icon={<Plus />}
+          onPress={handleCreateClick}
+        />
+      )}
+    </XStack>
+  );
 
-          {(feedType === 'userPacks' || feedType === 'userTrips') && (
-            <RSecondaryButton
-              style={{ marginLeft: 'auto', marginTop: 8 }}
-              label="Add new"
-              icon={<Plus />}
-              onPress={handleCreateClick}
-            />
+  return (
+    <>
+      {/* Render Filters Outside Container on Native */}
+      {Platform.OS !== 'web' ? (
+        <Filters />
+      ) : (
+        <View style={styles.filterContainer}>
+          {/* Render Search Container Only on Web */}
+          {Platform.OS === 'web' && (
+            <View style={styles.searchContainer}>
+              <Form>
+                <RStack
+                  style={{
+                    flexDirection: 'row',
+                    margin: 0,
+                    padding: 0,
+                    width: '100%',
+                  }}
+                >
+                  <InputWithIcon
+                    LeftIcon={<Search />}
+                    RightIcon={<X />}
+                    onChange={handleSetSearchValue}
+                    placeholder={`Search ${feedType || 'Feed'}`}
+                    value={searchValue}
+                  />
+                </RStack>
+              </Form>
+            </View>
           )}
-        </RStack>
-      )}
+          <RSeparator />
 
-      <RSeparator
-        marginTop={10}
-        marginBottom={10}
-        marginRight={0}
-        marginLeft={0}
-      />
-    </View>
+          {/* Render Filters Inside Container on Web */}
+          {Platform.OS === 'web' && !isSortHidden && <Filters />}
+
+          <RSeparator mt={10} mb={10} mr={0} ml={0} />
+        </View>
+      )}
+    </>
   );
 };
 
diff --git a/packages/app/modules/feed/components/SearchProvider.tsx b/packages/app/modules/feed/components/SearchProvider.tsx
index e654d80b7..403fbcb3a 100644
--- a/packages/app/modules/feed/components/SearchProvider.tsx
+++ b/packages/app/modules/feed/components/SearchProvider.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, createContext, useState } from 'react';
+import React, { ReactNode, createContext, useContext, useState } from 'react';
 
 // Define the context type
 interface SearchContextType {
@@ -23,4 +23,12 @@ const SearchProvider: React.FC<SearchProviderProps> = ({ children }) => {
   );
 };
 
-export { SearchContext, SearchProvider };
+const useSearchContext = () => {
+  const context = useContext(SearchContext);
+  if (!context) {
+    throw new Error('useSearchContext must be used within a SearchProvider');
+  }
+  return context;
+};
+
+export { SearchContext, SearchProvider, useSearchContext };
diff --git a/packages/app/modules/feed/screens/FeedScreen.tsx b/packages/app/modules/feed/screens/FeedScreen.tsx
index 30021073e..0942fd367 100644
--- a/packages/app/modules/feed/screens/FeedScreen.tsx
+++ b/packages/app/modules/feed/screens/FeedScreen.tsx
@@ -1,18 +1,15 @@
-import React, { useMemo, useState, useEffect, memo } from 'react';
-import { View, type ViewProps } from 'react-native';
-import {
-  FeedCard,
-  FeedList,
-  FeedSearchFilter,
-  SearchProvider,
-} from '../components';
-import { useRouter } from 'app/hooks/router';
-import { useFeed } from 'app/modules/feed';
 import { Pagination } from '@packrat/ui';
-import { useAuthUser } from 'app/modules/auth';
-import { type FeedType } from '../model';
 import { ConnectionGate } from 'app/components/ConnectionGate';
 import Layout from 'app/components/layout/Layout';
+import { useRouter } from 'app/hooks/router';
+import { useAuthUser } from 'app/modules/auth';
+import { useFeed } from 'app/modules/feed';
+import { searchQueryAtom } from 'app/modules/feed/atoms';
+import { useAtom } from 'jotai';
+import React, { memo, useState } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { FeedCard, FeedList, FeedSearchFilter } from '../components';
+import { type FeedType } from '../model';
 
 const URL_PATHS = {
   userPacks: '/pack/',
@@ -39,7 +36,8 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
     pack: true,
     trip: false,
   });
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom);
+
   const [refreshing, setRefreshing] = useState(false);
 
   const user = useAuthUser();
@@ -87,46 +85,44 @@ const Feed = memo(function Feed({ feedType = 'public', listStyle }: FeedProps) {
 
   return (
     <Layout>
-      <SearchProvider>
-        <View style={{ width: '100%', backgroundColor: 'transparent' }}>
-          <ConnectionGate mode="connected">
-            <FeedSearchFilter
-              feedType={feedType}
-              handleSortChange={handleSortChange}
-              handleTypeChange={handleTypeChange}
-              selectedTypes={selectedTypes}
-              queryString={queryString}
-              setSearchQuery={setSearchQuery}
-              handleCreateClick={handleCreateClick}
-            />
-          </ConnectionGate>
-          <FeedList
-            data={data}
-            style={listStyle}
-            CardComponent={({ item }) => (
-              <FeedCard
-                key={item?.id}
-                item={item}
-                cardType="primary"
-                feedType={item.type}
-              />
-            )}
-            isLoading={isLoading}
-            isError={isError}
-            separatorHeight={12}
+      <View style={{ width: '100%', backgroundColor: 'transparent' }}>
+        <ConnectionGate mode="connected">
+          <FeedSearchFilter
+            feedType={feedType}
+            handleSortChange={handleSortChange}
+            handleTypeChange={handleTypeChange}
+            selectedTypes={selectedTypes}
+            queryString={queryString}
+            setSearchQuery={setSearchQuery}
+            handleCreateClick={handleCreateClick}
           />
-          {totalPages > 1 ? (
-            <Pagination
-              isPrevBtnDisabled={!hasPrevPage}
-              isNextBtnDisabled={!hasNextPage}
-              onPressPrevBtn={fetchPrevPage}
-              onPressNextBtn={fetchNextPage}
-              currentPage={currentPage}
-              totalPages={totalPages}
+        </ConnectionGate>
+        <FeedList
+          data={data}
+          style={listStyle}
+          CardComponent={({ item }) => (
+            <FeedCard
+              key={item?.id}
+              item={item}
+              cardType="primary"
+              feedType={item.type}
             />
-          ) : null}
-        </View>
-      </SearchProvider>
+          )}
+          isLoading={isLoading}
+          isError={isError}
+          separatorHeight={12}
+        />
+        {totalPages > 1 ? (
+          <Pagination
+            isPrevBtnDisabled={!hasPrevPage}
+            isNextBtnDisabled={!hasNextPage}
+            onPressPrevBtn={fetchPrevPage}
+            onPressNextBtn={fetchNextPage}
+            currentPage={currentPage}
+            totalPages={totalPages}
+          />
+        ) : null}
+      </View>
     </Layout>
   );
 });
diff --git a/packages/app/package.json b/packages/app/package.json
index 18f3710fa..00dbc52ac 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
+    "@bugsnag/js": "^8.1.2",
     "@expo/match-media": "^0.4.0",
     "@expo/vector-icons": "^14.0.0",
     "@expo/webpack-config": "^19.0.0",
diff --git a/packages/app/provider/BugsnagProvider/Bugsnag.web.ts b/packages/app/provider/BugsnagProvider/Bugsnag.web.ts
new file mode 100644
index 000000000..8c2ce0cc7
--- /dev/null
+++ b/packages/app/provider/BugsnagProvider/Bugsnag.web.ts
@@ -0,0 +1,12 @@
+import Bugsnag from '@bugsnag/js';
+import BugsnagPluginReact from '@bugsnag/plugin-react';
+import { BUGSNAG_API_KEY } from '@packrat/config';
+
+if (BUGSNAG_API_KEY) {
+  Bugsnag.start({
+    apiKey: BUGSNAG_API_KEY,
+    plugins: [new BugsnagPluginReact()],
+  });
+}
+
+export default Bugsnag;
diff --git a/packages/app/theme/indessx.ts b/packages/app/theme/indessx.ts
deleted file mode 100644
index f64a712db..000000000
--- a/packages/app/theme/indessx.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { extendTheme } from 'native-base';
-import { DefaultTheme } from 'react-native-paper';
-
-export const theme = {
-  colors: {
-    background: Platform.OS === 'web' ? 'hsla(0, 0%, 96%, 1)' : '#fcfcfc',
-    secondaryBlue: Platform.OS === 'web' ?'#0C66A1' : '#cce5ff',
-    tertiaryBlue:  Platform.OS === 'web' ? '#0C66A1' : '#0C66A1',
-    accentPurple: Platform.OS === 'web' ? '#6C63FF' : '#6C63FF',
-    card: Platform.OS === 'web' ? '#f8f8f8' : '#f8f8f8',
-    text: Platform.OS === 'web' ? '#333333' : '#333333',
-    border: Platform.OS === 'web' ? '#f3f3f3' : '#f3f3f3',  
-    notification: Platform.OS === 'web' ? '#0A84FF' : '#0A84FF',
-    error: '#FF453A',
-    textGreen: Platform.OS === 'web' ? undefined : '#22c55e',
-    tertiaryBlueGrey: Platform.OS === 'web' ? undefined : '#3B3B3B',
-    cardIconColor: Platform.OS === 'web' ? '#22c55e' : '#22c55e',
-    iconColor: Platform.OS === 'web' ? '#FFFFFF' : '#003064',
-    weatherIcon: Platform.OS === 'web' ? '#0284c7' : '#0284c7',
-    drawerIconColor: Platform.OS === 'web' ? '#3B3B3B' : '#3B3B3B',
-    white: '#FFFFFF',
-    black: '#000000',
-  },
-  font: {
-    headerFont: 56,
-    size: 18,
-    desktop: 36,
-  },
-  padding: {
-    paddingDesktop: 24,
-    paddingInside: 105,
-    paddingTablet: 80,
-  },
-  size: {
-    cardPadding: 45,
-    mobilePadding: 30,
-  },
-  width: {
-    widthDesktop: '85%',
-  },
-};
-
-export const darkTheme = {
-  colors: {
-    primary: '#0A84FF',
-    background: '#050505',
-    secondaryBlue: '#0C66A1',
-    tertiaryBlue: '#96c7f2',
-    accentPurple: '#6C63FF',
-    card: '#1c1a17',
-    text: '#eaf6ff',
-    border: '#221f1c',
-    notification: '#0A84FF',
-    error: '#FF453A',
-    textGreen: '#22c55e',
-    tertiaryBlueGrey: '#3B3B3B',
-    cardIconColor: '#d6e3ff',
-    iconColor: '#cfe5ff',
-    weatherIcon: '#0A84FF',
-    drawerIconColor: '#3B3B3B',
-    white: '#FFFFFF',
-  },
-  font: {
-    headerFont: 56,
-    size: 18,
-    desktop: 36,
-  },
-  padding: {
-    paddingDesktop: 24,
-    paddingInside: 105,
-    paddingTablet: 80,
-  },
-  size: {
-    cardPadding: 45,
-    mobilePadding: 30,
-  },
-  width: {
-    widthDesktop: '85%',
-  },
-};
-
-export const nativeBaseLightTheme = extendTheme({
-  colors: {
-    primary: {
-      500: theme.colors.background,
-    },
-    amber: {
-      100: theme.colors.white,
-    },
-  },
-});
-export const nativeBaseDarkTheme = extendTheme({
-  colors: {
-    primary: {
-      500: darkTheme.colors.background,
-    },
-    amber: {
-      100: darkTheme.colors.white,
-    },
-  },
-});
-
-export const lightThemePaper = {
-  ...DefaultTheme,
-  colors: {
-    ...DefaultTheme.colors,
-    primary: theme.colors.primary,
-    onSurface: theme.colors.white,
-    elevation: {
-      ...DefaultTheme.colors.elevation,
-      level1: theme.colors.background,
-    },
-  },
-};
-
-export const darkPaperTheme = {
-  ...DefaultTheme,
-  colors: {
-    ...DefaultTheme.colors,
-    primary: darkTheme.colors.primary,
-    onSurface: darkTheme.colors.white,
-    elevation: {
-      ...DefaultTheme.colors.elevation,
-      level1: darkTheme.colors.background,
-    },
-  },
-};
diff --git a/packages/ui/src/Chip/index.tsx b/packages/ui/src/Chip/index.tsx
new file mode 100644
index 000000000..daae83631
--- /dev/null
+++ b/packages/ui/src/Chip/index.tsx
@@ -0,0 +1 @@
+export { Chip } from '../Bento/elements/chips/components/chipsParts';
diff --git a/packages/ui/src/RForm/index.tsx b/packages/ui/src/RForm/index.tsx
index 6312ccaf9..6836fc76a 100644
--- a/packages/ui/src/RForm/index.tsx
+++ b/packages/ui/src/RForm/index.tsx
@@ -1,17 +1,18 @@
-import React, { useRef, forwardRef, useImperativeHandle, FC } from 'react';
-import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { forwardRef, useImperativeHandle, useRef, type FC } from 'react';
+import { Controller, useForm, type SubmitHandler } from 'react-hook-form';
+import React from 'react';
 import {
+  Button,
   Form,
   Input,
-  Text as OriginalText,
-  Button,
-  TextArea,
   Label,
+  Text as OriginalText,
   XStack as OriginalXStack,
+  TextArea,
   YStack,
 } from 'tamagui';
-import * as z from 'zod';
+import { type z } from 'zod';
 
 const Text: any = OriginalText;
 const XStack: any = OriginalXStack;
@@ -107,37 +108,39 @@ const ReusableForm = forwardRef<any, ReusableFormProps>((props, ref) => {
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
-      {fields.map((field) => (
-        <XStack
-          overflow="hidden"
-          space="$2"
-          margin="$3"
-          padding="$2"
-          key={field.name}
-        >
-          {field.label && <Label htmlFor={field.name}>{field.label}</Label>}
-          <YStack space="$1">
-            <Controller
-              name={field.name}
-              control={control}
-              render={({ field: fieldProps }) => (
-                <RenderInput
-                  field={field}
-                  fieldProps={{
-                    ...fieldProps,
-                    ref: (el) => (inputRefs.current[field.name] = el),
-                  }}
-                />
-              )}
-            />
-            <RenderError
-              error={field.errorMessage}
-              fieldError={errors[field.name]?.message as string | undefined}
-            />
-            <RenderHelperText text={field.helperText} />
-          </YStack>
-        </XStack>
-      ))}
+      {fields &&
+        Array.isArray(fields) &&
+        fields.map((field) => (
+          <XStack
+            overflow="hidden"
+            space="$2"
+            margin="$3"
+            padding="$2"
+            key={field.name}
+          >
+            {field.label && <Label htmlFor={field.name}>{field.label}</Label>}
+            <YStack space="$1">
+              <Controller
+                name={field.name}
+                control={control}
+                render={({ field: fieldProps }) => (
+                  <RenderInput
+                    field={field}
+                    fieldProps={{
+                      ...fieldProps,
+                      ref: (el) => (inputRefs.current[field.name] = el),
+                    }}
+                  />
+                )}
+              />
+              <RenderError
+                error={field.errorMessage}
+                fieldError={errors[field.name]?.message as string | undefined}
+              />
+              <RenderHelperText text={field.helperText} />
+            </YStack>
+          </XStack>
+        ))}
       <Form.Trigger asChild>
         <Button>Submit</Button>
       </Form.Trigger>
@@ -145,4 +148,6 @@ const ReusableForm = forwardRef<any, ReusableFormProps>((props, ref) => {
   );
 });
 
+ReusableForm.displayName = 'ReusableForm';
+
 export default ReusableForm;
diff --git a/packages/ui/src/ZDropdown/index.tsx b/packages/ui/src/ZDropdown/index.tsx
index d8c425e8a..7b800a0c1 100644
--- a/packages/ui/src/ZDropdown/index.tsx
+++ b/packages/ui/src/ZDropdown/index.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
-import { ComponentProps } from 'react';
-import * as ZeegoDropdownMenu from 'zeego/dropdown-menu';
 import { ChevronDown } from '@tamagui/lucide-icons';
+import React from 'react';
+import { Platform } from 'react-native';
 import { Button } from 'tamagui';
-
-type ContentProps = ComponentProps<typeof ZeegoDropdownMenu.Content>;
-type ItemProps = ComponentProps<typeof ZeegoDropdownMenu.Item>;
+import * as ZeegoDropdownMenu from 'zeego/dropdown-menu';
+type ContentProps = React.ComponentProps<typeof ZeegoDropdownMenu.Content>;
+type ItemProps = React.ComponentProps<typeof ZeegoDropdownMenu.Item>;
 
 const DropdownMenu = {
   ...ZeegoDropdownMenu,
@@ -32,9 +31,14 @@ const DropdownMenu = {
           backgroundColor: 'white',
           flexDirection: 'row',
           alignItems: 'center',
-          hoverStyle: {
-            backgroundColor: 'gray',
-          },
+          ...Platform.select({
+            web: {
+              cursor: 'pointer',
+              hoverStyle: {
+                backgroundColor: 'gray',
+              },
+            },
+          }),
         }}
       />
     ),
@@ -42,21 +46,40 @@ const DropdownMenu = {
   ),
 };
 
-const RDropdownMenu = ({ menuItems = [], menuName }) => {
+interface RDropdownMenuItem {
+  label: string;
+  onSelect?: () => void;
+}
+
+interface RDropdownMenuProps {
+  menuItems: RDropdownMenuItem[];
+  menuName: string;
+  trigger?: React.ReactNode;
+}
+
+const RDropdownMenu = ({
+  menuItems = [],
+  menuName,
+  trigger = null,
+}: RDropdownMenuProps) => {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <Button
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            paddingRight: 10,
-            borderRadius: 40,
-          }}
-        >
-          {menuName}
-          <ChevronDown size={14} />
-        </Button>
+      <DropdownMenu.Trigger asChild>
+        {React.isValidElement(trigger) ? (
+          trigger
+        ) : (
+          <Button
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingRight: 10,
+              borderRadius: 40,
+            }}
+          >
+            {menuName}
+            <ChevronDown size={14} />
+          </Button>
+        )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {menuItems.map(({ label, onSelect = () => {} }) => (
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 75af69e4a..3ea1860db 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -1,3 +1,5 @@
+// Component Imports
+// - Basic components and UI elements
 import RButton from './RButton';
 import RCard from './RCard';
 import RCheckbox from './RCheckbox';
@@ -14,9 +16,9 @@ import RImage from './RImage';
 import RInput from './RInput';
 import RLabel from './RLabel';
 import RLink from './RLink';
+import RParagraph from './Rparagraph';
 import RRadio from './RRadio';
 import RScrollView from './RScrollview';
-
 import RSelect from './RSelect';
 import RSeparator from './RSeparator';
 import RSpinner from './RSpinner';
@@ -25,27 +27,31 @@ import RSwitch from './RSwitch';
 import RTabs from './RTabs';
 import RText from './RText';
 import RTooltip from './RTooltip';
-import RParagraph from './Rparagraph';
 import SizableText from './SizableText';
 import XStack from './XStack';
 import YStack from './YStack';
-export { DropdownMenu, RDropdownMenu } from './ZDropdown';
-export { Container } from './Container';
-export { MainContentWeb } from './MainContentWeb';
-export { ContextMenu, RContextMenu } from './RContextMenu';
-export { DropdownComponent } from './Dropdown';
+
+// Dropdown and Menu Components
+// - Specific dropdown and context menu utilities
 export {
-  CascadedDropdownComponent,
   ActionsDropdownComponent,
+  CascadedDropdownComponent,
 } from './CascadedDropdown';
-// export { DropdownMenu, ExampleDropdown } from './RDropdown/DropdownBase';
-export { RSkeleton } from './RSkeleton';
-
-export { LoadingPlaceholder } from './LoadingPlaceholder';
+export { DropdownComponent } from './Dropdown';
+export { ContextMenu, RContextMenu } from './RContextMenu';
+export { DropdownMenu, RDropdownMenu } from './ZDropdown';
 
+// Specialized Components
+// - Custom or more complex UI components
+export { Container } from './Container';
 export { EditableText } from './EditableText';
+export { LoadingPlaceholder } from './LoadingPlaceholder';
+export { MainContentWeb } from './MainContentWeb';
+export { RSkeleton } from './RSkeleton';
 export { ThreeDotsMenu } from './ThreeDotsMenu';
 
+// Re-Exports
+// - Components re-exported for organization or external access
 export {
   RButton,
   RCard,
@@ -77,48 +83,43 @@ export {
   SizableText,
   XStack,
   YStack,
-  // ZDropdown,
 };
 
-export * from './InputText';
-export * from './form';
-export * from './card';
-export * from './Details';
-export { View } from 'tamagui';
+// External Packages and Libraries
+// - Third-party or framework-specific imports
+export * from '@tamagui/toast';
+export { ListItem as RListItem, View } from 'tamagui';
 export { config } from './tamagui.config';
-// export * from 'tamagui';
 
-export { ListItem as RListItem } from 'tamagui';
-export * from '@tamagui/toast';
-export * from './EmptyState';
+// Utility Modules
+// - Shared utilities and helper modules
+export * from './alert';
 export * from './Bento';
+export * from './card';
+export * from './Chip';
 export * from './DateRangePicker';
+export * from './Details';
 export * from './dialog';
-export * from './ImageGallery';
+export * from './EmptyState';
+export * from './ErrorBoundary';
+export * from './form';
+export * from './FullScreen';
 export * from './Image';
+export * from './ImageGallery';
+export * from './InputText';
+export * from './ItemPickerOverlay';
 export * from './list';
 export * from './modal';
-export * from './toast';
-export * from './alert';
+export * from './Pagination';
 export * from './RCard';
-export * from './ItemPickerOverlay';
 export * from './RImage';
 export * from './RInput';
+export * from './Rparagraph';
 export * from './RScrollview';
 export * from './RStack';
 export * from './RTabs';
 export * from './RText';
-export * from './Rparagraph';
-export * from './FullScreen';
 export * from './SizableText';
+export * from './toast';
 export * from './XStack';
 export * from './YStack';
-export * from './Pagination';
-// Future components
-// export * from './RCheckbox';
-// export * from './RSelect';
-// export * from './RSlider';
-// export * from './RToast';
-// export * from './RTooltip';
-
-export * from './ErrorBoundary';
diff --git a/packages/ui/src/tamagui.config.ts b/packages/ui/src/tamagui.config.ts
index 435fb6eae..eccb72264 100644
--- a/packages/ui/src/tamagui.config.ts
+++ b/packages/ui/src/tamagui.config.ts
@@ -1,10 +1,13 @@
 import { createAnimations } from '@tamagui/animations-react-native';
+import { config as defaultTamaguiConfig } from '@tamagui/config/v3';
 import { createInterFont } from '@tamagui/font-inter';
 import { createMedia } from '@tamagui/react-native-media-driver';
 import { shorthands } from '@tamagui/shorthands';
 import { themes, tokens } from '@tamagui/themes/v2';
 import { createTamagui } from 'tamagui';
 
+// CUSTOM CONFIG
+
 // Define fonts using createInterFont
 const headingFont = createInterFont({
   size: {
@@ -72,7 +75,7 @@ const animations = createAnimations({
 });
 
 // Create Tamagui config
-export const config = createTamagui({
+export const customConfig = createTamagui({
   defaultTheme: 'dark',
   defaultFont: 'body',
   shouldAddPrefersColorThemes: true,
@@ -109,5 +112,13 @@ export const config = createTamagui({
   animations,
 });
 
+// DEFAULT CONFIG
+export const defaultConfig = createTamagui(defaultTamaguiConfig);
+
+// Handle export for either config
+const effectiveConfig = defaultConfig;
+
+export const config = effectiveConfig;
+
 // for the compiler to find it
 export default config;
diff --git a/packages/validations/src/validations/itemRoutesValidator.ts b/packages/validations/src/validations/itemRoutesValidator.ts
index 95eb2bb6f..e26ae9a8e 100644
--- a/packages/validations/src/validations/itemRoutesValidator.ts
+++ b/packages/validations/src/validations/itemRoutesValidator.ts
@@ -13,7 +13,7 @@ export const getItemById = z.object({
 });
 
 export const addItem = z.object({
-  name: z.string(),
+  name: z.string().min(3).max(40),
   weight: z.number(),
   quantity: z.number().int().positive(),
   unit: z.string(),
@@ -33,7 +33,7 @@ export type Item = z.infer<typeof addItem>;
 
 export const editItem = z.object({
   id: z.string(),
-  name: z.string().nonempty(),
+  name: z.string().min(3).max(40),
   weight: z.number(),
   quantity: z.number(),
   unit: z.string(),
diff --git a/packages/validations/src/validations/packRoutesValidator.ts b/packages/validations/src/validations/packRoutesValidator.ts
index 8739ba230..92380ae67 100644
--- a/packages/validations/src/validations/packRoutesValidator.ts
+++ b/packages/validations/src/validations/packRoutesValidator.ts
@@ -10,14 +10,14 @@ export const getPackById = z.object({
 });
 
 export const addPack = z.object({
-  name: z.string(),
+  name: z.string().min(3).max(40),
   owner_id: z.string(),
   is_public: z.boolean(),
 });
 
 export const editPack = z.object({
   id: z.string(),
-  name: z.string(),
+  name: z.string().min(3).max(40),
   is_public: z.boolean(),
 });
 
diff --git "a/server/src/testing/PackRat \360\237\216\222.postman_collection.json" b/server/src/testing/PackRat.postman_collection.json
similarity index 100%
rename from "server/src/testing/PackRat \360\237\216\222.postman_collection.json"
rename to server/src/testing/PackRat.postman_collection.json
diff --git a/yarn.lock b/yarn.lock
index 9c0a2e1ca..3244d7a0b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -117,6 +117,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2":
+  version: 7.26.2
+  resolution: "@babel/code-frame@npm:7.26.2"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/db2c2122af79d31ca916755331bb4bac96feb2b334cdaca5097a6b467fdd41963b89b14b6836a14f083de7ff887fc78fa1b3c10b14e743d33e12dbfe5ee3d223
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.25.2, @babel/compat-data@npm:^7.25.4":
   version: 7.25.4
   resolution: "@babel/compat-data@npm:7.25.4"
@@ -124,7 +135,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.20.0, @babel/core@npm:^7.20.2, @babel/core@npm:^7.21.0, @babel/core@npm:^7.23.3, @babel/core@npm:^7.23.7, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.5, @babel/core@npm:^7.25.2":
+"@babel/compat-data@npm:^7.25.9":
+  version: 7.26.3
+  resolution: "@babel/compat-data@npm:7.26.3"
+  checksum: 10/0bf4e491680722aa0eac26f770f2fae059f92e2ac083900b241c90a2c10f0fc80e448b1feccc2b332687fab4c3e33e9f83dee9ef56badca1fb9f3f71266d9ebf
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.20.0, @babel/core@npm:^7.20.2, @babel/core@npm:^7.21.0, @babel/core@npm:^7.23.7, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.5, @babel/core@npm:^7.25.2":
   version: 7.25.2
   resolution: "@babel/core@npm:7.25.2"
   dependencies:
@@ -147,7 +165,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.20.0, @babel/generator@npm:^7.20.5, @babel/generator@npm:^7.22.7, @babel/generator@npm:^7.23.3, @babel/generator@npm:^7.25.0, @babel/generator@npm:^7.25.6, @babel/generator@npm:^7.7.2":
+"@babel/core@npm:^7.23.3":
+  version: 7.26.0
+  resolution: "@babel/core@npm:7.26.0"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.26.0"
+    "@babel/generator": "npm:^7.26.0"
+    "@babel/helper-compilation-targets": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.26.0"
+    "@babel/helpers": "npm:^7.26.0"
+    "@babel/parser": "npm:^7.26.0"
+    "@babel/template": "npm:^7.25.9"
+    "@babel/traverse": "npm:^7.25.9"
+    "@babel/types": "npm:^7.26.0"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/65767bfdb1f02e80d3af4f138066670ef8fdd12293de85ef151758a901c191c797e86d2e99b11c4cdfca33c72385ecaf38bbd7fa692791ec44c77763496b9b93
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.20.0, @babel/generator@npm:^7.20.5, @babel/generator@npm:^7.22.7, @babel/generator@npm:^7.25.0, @babel/generator@npm:^7.25.6, @babel/generator@npm:^7.7.2":
   version: 7.25.6
   resolution: "@babel/generator@npm:7.25.6"
   dependencies:
@@ -159,6 +200,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.23.3, @babel/generator@npm:^7.26.0, @babel/generator@npm:^7.26.3":
+  version: 7.26.3
+  resolution: "@babel/generator@npm:7.26.3"
+  dependencies:
+    "@babel/parser": "npm:^7.26.3"
+    "@babel/types": "npm:^7.26.3"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^3.0.2"
+  checksum: 10/c1d8710cc1c52af9d8d67f7d8ea775578aa500887b327d2a81e27494764a6ef99e438dd7e14cf7cd3153656492ee27a8362980dc438087c0ca39d4e75532c638
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-annotate-as-pure@npm:7.24.7"
@@ -168,6 +222,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-annotate-as-pure@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-annotate-as-pure@npm:7.25.9"
+  dependencies:
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10/41edda10df1ae106a9b4fe617bf7c6df77db992992afd46192534f5cff29f9e49a303231733782dd65c5f9409714a529f215325569f14282046e9d3b7a1ffb6c
+  languageName: node
+  linkType: hard
+
 "@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.24.7"
@@ -191,6 +254,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-compilation-targets@npm:7.25.9"
+  dependencies:
+    "@babel/compat-data": "npm:^7.25.9"
+    "@babel/helper-validator-option": "npm:^7.25.9"
+    browserslist: "npm:^4.24.0"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: 10/8053fbfc21e8297ab55c8e7f9f119e4809fa7e505268691e1bedc2cf5e7a5a7de8c60ad13da2515378621b7601c42e101d2d679904da395fa3806a1edef6b92e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.24.7, @babel/helper-create-class-features-plugin@npm:^7.25.0, @babel/helper-create-class-features-plugin@npm:^7.25.4":
   version: 7.25.4
   resolution: "@babel/helper-create-class-features-plugin@npm:7.25.4"
@@ -265,6 +341,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-module-imports@npm:7.25.9"
+  dependencies:
+    "@babel/traverse": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10/e090be5dee94dda6cd769972231b21ddfae988acd76b703a480ac0c96f3334557d70a965bf41245d6ee43891e7571a8b400ccf2b2be5803351375d0f4e5bcf08
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-transforms@npm:^7.24.7, @babel/helper-module-transforms@npm:^7.24.8, @babel/helper-module-transforms@npm:^7.25.0, @babel/helper-module-transforms@npm:^7.25.2":
   version: 7.25.2
   resolution: "@babel/helper-module-transforms@npm:7.25.2"
@@ -279,6 +365,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.26.0":
+  version: 7.26.0
+  resolution: "@babel/helper-module-transforms@npm:7.26.0"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+    "@babel/traverse": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/9841d2a62f61ad52b66a72d08264f23052d533afc4ce07aec2a6202adac0bfe43014c312f94feacb3291f4c5aafe681955610041ece2c276271adce3f570f2f5
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-optimise-call-expression@npm:7.24.7"
@@ -295,6 +394,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-plugin-utils@npm:7.25.9"
+  checksum: 10/e347d87728b1ab10b6976d46403941c8f9008c045ea6d99997a7ffca7b852dc34b6171380f7b17edf94410e0857ff26f3a53d8618f11d73744db86e8ca9b8c64
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.18.9, @babel/helper-remap-async-to-generator@npm:^7.24.7, @babel/helper-remap-async-to-generator@npm:^7.25.0":
   version: 7.25.0
   resolution: "@babel/helper-remap-async-to-generator@npm:7.25.0"
@@ -348,6 +454,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-string-parser@npm:7.25.9"
+  checksum: 10/c28656c52bd48e8c1d9f3e8e68ecafd09d949c57755b0d353739eb4eae7ba4f7e67e92e4036f1cd43378cc1397a2c943ed7bcaf5949b04ab48607def0258b775
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-validator-identifier@npm:7.24.7"
@@ -355,6 +468,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-validator-identifier@npm:7.25.9"
+  checksum: 10/3f9b649be0c2fd457fa1957b694b4e69532a668866b8a0d81eabfa34ba16dbf3107b39e0e7144c55c3c652bf773ec816af8df4a61273a2bb4eb3145ca9cf478e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.24.7, @babel/helper-validator-option@npm:^7.24.8":
   version: 7.24.8
   resolution: "@babel/helper-validator-option@npm:7.24.8"
@@ -362,6 +482,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-validator-option@npm:7.25.9"
+  checksum: 10/9491b2755948ebbdd68f87da907283698e663b5af2d2b1b02a2765761974b1120d5d8d49e9175b167f16f72748ffceec8c9cf62acfbee73f4904507b246e2b3d
+  languageName: node
+  linkType: hard
+
 "@babel/helper-wrap-function@npm:^7.25.0":
   version: 7.25.0
   resolution: "@babel/helper-wrap-function@npm:7.25.0"
@@ -383,6 +510,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.26.0":
+  version: 7.26.0
+  resolution: "@babel/helpers@npm:7.26.0"
+  dependencies:
+    "@babel/template": "npm:^7.25.9"
+    "@babel/types": "npm:^7.26.0"
+  checksum: 10/fd4757f65d10b64cfdbf4b3adb7ea6ffff9497c53e0786452f495d1f7794da7e0898261b4db65e1c62bbb9a360d7d78a1085635c23dfc3af2ab6dcba06585f86
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.10.4, @babel/highlight@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/highlight@npm:7.24.7"
@@ -395,7 +532,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.1.6, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.0, @babel/parser@npm:^7.20.15, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.6":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.1.6, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.0, @babel/parser@npm:^7.20.15, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.6":
   version: 7.25.6
   resolution: "@babel/parser@npm:7.25.6"
   dependencies:
@@ -406,6 +543,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.23.3, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.3":
+  version: 7.26.3
+  resolution: "@babel/parser@npm:7.26.3"
+  dependencies:
+    "@babel/types": "npm:^7.26.3"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/e7e3814b2dc9ee3ed605d38223471fa7d3a84cbe9474d2b5fa7ac57dc1ddf75577b1fd3a93bf7db8f41f28869bda795cddd80223f980be23623b6434bf4c88a8
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.25.3":
   version: 7.25.3
   resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.25.3"
@@ -769,6 +917,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-jsx@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-syntax-jsx@npm:7.25.9"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/bb609d1ffb50b58f0c1bac8810d0e46a4f6c922aa171c458f3a19d66ee545d36e782d3bffbbc1fed0dc65a558bdce1caf5279316583c0fff5a2c1658982a8563
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
@@ -1377,6 +1536,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-display-name@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-display-name@npm:7.25.9"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/dc7affde0ed98e40f629ee92a2fc44fbd8008aabda1ddb3f5bd2632699d3289b08dff65b26cf3b89dab46397ec440f453d19856bbb3a9a83df5b4ac6157c5c39
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx-development@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/plugin-transform-react-jsx-development@npm:7.24.7"
@@ -1388,6 +1558,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx-development@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-jsx-development@npm:7.25.9"
+  dependencies:
+    "@babel/plugin-transform-react-jsx": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/537d38369537f1eb56041c4b770bc0733fde1801a7f5ffef40a1217ea448f33ee2fa8e6098a58a82fd00e432c1b9426a66849496da419020c9eca3b1b1a23779
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx-self@npm:^7.0.0, @babel/plugin-transform-react-jsx-self@npm:^7.24.5":
   version: 7.24.7
   resolution: "@babel/plugin-transform-react-jsx-self@npm:7.24.7"
@@ -1410,7 +1591,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.23.4, @babel/plugin-transform-react-jsx@npm:^7.24.7":
+"@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.23.4, @babel/plugin-transform-react-jsx@npm:^7.24.7":
   version: 7.25.2
   resolution: "@babel/plugin-transform-react-jsx@npm:7.25.2"
   dependencies:
@@ -1425,6 +1606,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
+    "@babel/helper-module-imports": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/plugin-syntax-jsx": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/eb179ecdf0ae19aed254105cf78fbac35f9983f51ed04b7b67c863a4820a70a879bd5da250ac518321f86df20eac010e53e3411c8750c386d51da30e4814bfb6
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-pure-annotations@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.7"
@@ -1437,6 +1633,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-pure-annotations@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.25.9"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/9995c0fc7c25d3aaaa0ce84233de02eab2564ea111d0813ec5baa538eb21520402879cc787ad1ad4c2061b99cebc3beb09910e64c9592e8ccb42ae62d9e4fd9a
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-regenerator@npm:^7.20.0, @babel/plugin-transform-regenerator@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/plugin-transform-regenerator@npm:7.24.7"
@@ -1713,7 +1921,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.22.15, @babel/preset-react@npm:^7.23.3":
+"@babel/preset-react@npm:^7.22.15":
   version: 7.24.7
   resolution: "@babel/preset-react@npm:7.24.7"
   dependencies:
@@ -1729,6 +1937,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-react@npm:^7.23.3":
+  version: 7.26.3
+  resolution: "@babel/preset-react@npm:7.26.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-validator-option": "npm:^7.25.9"
+    "@babel/plugin-transform-react-display-name": "npm:^7.25.9"
+    "@babel/plugin-transform-react-jsx": "npm:^7.25.9"
+    "@babel/plugin-transform-react-jsx-development": "npm:^7.25.9"
+    "@babel/plugin-transform-react-pure-annotations": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/88cb78c402b79f32389ee06451da51698d5b1da7641d9a47482883f537fe5441a138bd4c077d8533fd6d557406b08911c47b94402cea843db598e020bdd9a373
+  languageName: node
+  linkType: hard
+
 "@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.22.5":
   version: 7.24.7
   resolution: "@babel/preset-typescript@npm:7.24.7"
@@ -1766,7 +1990,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.18.6, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.25.6
   resolution: "@babel/runtime@npm:7.25.6"
   dependencies:
@@ -1775,7 +1999,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.0.0, @babel/template@npm:^7.22.15, @babel/template@npm:^7.24.7, @babel/template@npm:^7.25.0, @babel/template@npm:^7.3.3":
+"@babel/runtime@npm:^7.23.2":
+  version: 7.26.0
+  resolution: "@babel/runtime@npm:7.26.0"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10/9f4ea1c1d566c497c052d505587554e782e021e6ccd302c2ad7ae8291c8e16e3f19d4a7726fb64469e057779ea2081c28b7dbefec6d813a22f08a35712c0f699
+  languageName: node
+  linkType: hard
+
+"@babel/template@npm:^7.0.0, @babel/template@npm:^7.24.7, @babel/template@npm:^7.25.0, @babel/template@npm:^7.3.3":
   version: 7.25.0
   resolution: "@babel/template@npm:7.25.0"
   dependencies:
@@ -1786,7 +2019,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.20.0, @babel/traverse@npm:^7.23.3, @babel/traverse@npm:^7.23.7, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.24.8, @babel/traverse@npm:^7.25.0, @babel/traverse@npm:^7.25.1, @babel/traverse@npm:^7.25.2, @babel/traverse@npm:^7.25.3, @babel/traverse@npm:^7.25.4, @babel/traverse@npm:^7.25.6":
+"@babel/template@npm:^7.22.15, @babel/template@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/template@npm:7.25.9"
+  dependencies:
+    "@babel/code-frame": "npm:^7.25.9"
+    "@babel/parser": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10/e861180881507210150c1335ad94aff80fd9e9be6202e1efa752059c93224e2d5310186ddcdd4c0f0b0fc658ce48cb47823f15142b5c00c8456dde54f5de80b2
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.20.0, @babel/traverse@npm:^7.23.7, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.24.8, @babel/traverse@npm:^7.25.0, @babel/traverse@npm:^7.25.1, @babel/traverse@npm:^7.25.2, @babel/traverse@npm:^7.25.3, @babel/traverse@npm:^7.25.4, @babel/traverse@npm:^7.25.6":
   version: 7.25.6
   resolution: "@babel/traverse@npm:7.25.6"
   dependencies:
@@ -1801,7 +2045,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.23.3, @babel/types@npm:^7.23.6, @babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2, @babel/types@npm:^7.25.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
+"@babel/traverse@npm:^7.23.3, @babel/traverse@npm:^7.25.9":
+  version: 7.26.4
+  resolution: "@babel/traverse@npm:7.26.4"
+  dependencies:
+    "@babel/code-frame": "npm:^7.26.2"
+    "@babel/generator": "npm:^7.26.3"
+    "@babel/parser": "npm:^7.26.3"
+    "@babel/template": "npm:^7.25.9"
+    "@babel/types": "npm:^7.26.3"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/30c81a80d66fc39842814bc2e847f4705d30f3859156f130d90a0334fe1d53aa81eed877320141a528ecbc36448acc0f14f544a7d410fa319d1c3ab63b50b58f
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.23.6, @babel/types@npm:^7.24.7, @babel/types@npm:^7.24.8, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2, @babel/types@npm:^7.25.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.25.6
   resolution: "@babel/types@npm:7.25.6"
   dependencies:
@@ -1812,6 +2071,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.23.3, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.26.3":
+  version: 7.26.3
+  resolution: "@babel/types@npm:7.26.3"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+  checksum: 10/c31d0549630a89abfa11410bf82a318b0c87aa846fbf5f9905e47ba5e2aa44f41cc746442f105d622c519e4dc532d35a8d8080460ff4692f9fc7485fbf3a00eb
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -1819,6 +2088,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bugsnag/browser@npm:^8.1.2":
+  version: 8.1.2
+  resolution: "@bugsnag/browser@npm:8.1.2"
+  dependencies:
+    "@bugsnag/core": "npm:^8.1.1"
+  checksum: 10/e15189eef5800f1d4c730355d9c097431d3538ce85f1df9eaf16121231a3e35f477695ec2924f2085afa5c25182c51c1f66f120eca7eccf7682d89b16b8ea04d
+  languageName: node
+  linkType: hard
+
 "@bugsnag/core@npm:^7.19.0":
   version: 7.25.0
   resolution: "@bugsnag/core@npm:7.25.0"
@@ -1832,6 +2110,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bugsnag/core@npm:^8.1.1":
+  version: 8.1.1
+  resolution: "@bugsnag/core@npm:8.1.1"
+  dependencies:
+    "@bugsnag/cuid": "npm:^3.0.0"
+    "@bugsnag/safe-json-stringify": "npm:^6.0.0"
+    error-stack-parser: "npm:^2.0.3"
+    iserror: "npm:^0.0.2"
+    stack-generator: "npm:^2.0.3"
+  checksum: 10/07d18d9eddcb975a57f192eebc44d28f7c512b00072930fcd74dd61b3d0b60a164d6e0c3b51fbb031781c9a46bc81b5cc0efb6e1147ea54b0e21d6fdfb6c7181
+  languageName: node
+  linkType: hard
+
 "@bugsnag/cuid@npm:^3.0.0":
   version: 3.1.1
   resolution: "@bugsnag/cuid@npm:3.1.1"
@@ -1879,6 +2170,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bugsnag/js@npm:^8.1.2":
+  version: 8.1.2
+  resolution: "@bugsnag/js@npm:8.1.2"
+  dependencies:
+    "@bugsnag/browser": "npm:^8.1.2"
+    "@bugsnag/node": "npm:^8.1.1"
+  checksum: 10/4885e71768cf5d46ce9996f6e2b991c035dec9ae4946494fb507779c6bdea9c3eff3d4fa657e53bb57abdd26535361c2ac7deacff29c4d2369932b567b1abaf2
+  languageName: node
+  linkType: hard
+
+"@bugsnag/node@npm:^8.1.1":
+  version: 8.1.1
+  resolution: "@bugsnag/node@npm:8.1.1"
+  dependencies:
+    "@bugsnag/core": "npm:^8.1.1"
+    byline: "npm:^5.0.0"
+    error-stack-parser: "npm:^2.0.3"
+    iserror: "npm:^0.0.2"
+    pump: "npm:^3.0.0"
+    stack-generator: "npm:^2.0.3"
+  checksum: 10/877209db102fab59df2c3f77d8dc67e53b456d5c6f752331caf90777bfa09b80384e7972685c2294cde85a26437e839075d821ce6302c787afc402de138c9516
+  languageName: node
+  linkType: hard
+
 "@bugsnag/plugin-browser-session@npm:^7.19.0":
   version: 7.25.0
   resolution: "@bugsnag/plugin-browser-session@npm:7.25.0"
@@ -4668,20 +4983,20 @@ __metadata:
   linkType: hard
 
 "@floating-ui/react-native@npm:^0.10.3":
-  version: 0.10.6
-  resolution: "@floating-ui/react-native@npm:0.10.6"
+  version: 0.10.7
+  resolution: "@floating-ui/react-native@npm:0.10.7"
   dependencies:
     "@floating-ui/core": "npm:^1.0.0"
   peerDependencies:
     react: ">=16.8.0"
     react-native: ">=0.64.0"
-  checksum: 10/e7ee9a2fb93674ad5b690b770de70989bb7dfd2e871ab698ec2259c7fa38047558fc8a21ad9138a16da95408bad9445b3ab7abec1fa54f3ad79a21a1a1ef033b
+  checksum: 10/98f665b8bea1b02f8b8f6488d699716cca8e870bf137ae5e25d287bd7b31bfc9bbc07cfdd3bafc227128d08985af8b4bf985b7a48859a88ef862ff62a4af915b
   languageName: node
   linkType: hard
 
 "@floating-ui/react@npm:^0.26.6":
-  version: 0.26.24
-  resolution: "@floating-ui/react@npm:0.26.24"
+  version: 0.26.28
+  resolution: "@floating-ui/react@npm:0.26.28"
   dependencies:
     "@floating-ui/react-dom": "npm:^2.1.2"
     "@floating-ui/utils": "npm:^0.2.8"
@@ -4689,7 +5004,7 @@ __metadata:
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10/903ffbee2c6726d117086e2a83f43d6ad339970758ce7979fd16cc7cf8dc0f5b869bd72c2c8ee1bcd6c63b190bb0960effd4d403e63685fb5aeed6b185041b08
+  checksum: 10/7f8e6b27db48b68ca94756687af21857be04e7360ac922d7c8e22411f2895df6384af7bd40f4b48663d3cc5809bb5c6574cd9c9ea15543ec747b9a8e1c8c3008
   languageName: node
   linkType: hard
 
@@ -14220,6 +14535,7 @@ __metadata:
     "@babel/core": "npm:^7.23.7"
     "@babel/preset-typescript": "npm:^7.22.5"
     "@babel/runtime": "npm:^7.21.0"
+    "@bugsnag/js": "npm:^8.1.2"
     "@expo/match-media": "npm:^0.4.0"
     "@expo/vector-icons": "npm:^14.0.0"
     "@expo/webpack-config": "npm:^19.0.0"
@@ -16130,6 +16446,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.24.0":
+  version: 4.24.3
+  resolution: "browserslist@npm:4.24.3"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001688"
+    electron-to-chromium: "npm:^1.5.73"
+    node-releases: "npm:^2.0.19"
+    update-browserslist-db: "npm:^1.1.1"
+  bin:
+    browserslist: cli.js
+  checksum: 10/f5b22757302a4c04036c4ed82ef82d8005c15b809fa006132765f306e8d8a5c02703479f6738db6640f27c0935ebecde4fa5ae3457fc7ad4805156430dba6bc7
+  languageName: node
+  linkType: hard
+
 "bs-logger@npm:^0.2.6":
   version: 0.2.6
   resolution: "bs-logger@npm:0.2.6"
@@ -16327,6 +16657,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"byline@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "byline@npm:5.0.0"
+  checksum: 10/737ca83e8eda2976728dae62e68bc733aea095fab08db4c6f12d3cee3cf45b6f97dce45d1f6b6ff9c2c947736d10074985b4425b31ce04afa1985a4ef3d334a7
+  languageName: node
+  linkType: hard
+
 "bytes@npm:3.0.0":
   version: 3.0.0
   resolution: "bytes@npm:3.0.0"
@@ -16555,6 +16892,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001688":
+  version: 1.0.30001690
+  resolution: "caniuse-lite@npm:1.0.30001690"
+  checksum: 10/9fb4659eb09a298601b9593739072c481e2f5cc524bd0530e5e0f002e66246da5e866669854dfc0d53195ee36b201dab02f7933a7cdf60ccba7adb2d4a304caf
+  languageName: node
+  linkType: hard
+
 "capital-case@npm:^1.0.4":
   version: 1.0.4
   resolution: "capital-case@npm:1.0.4"
@@ -19211,6 +19555,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.5.73":
+  version: 1.5.75
+  resolution: "electron-to-chromium@npm:1.5.75"
+  checksum: 10/e80b5dc602227cb527583cfebef84d1fb62a8db44fdd1b516ff5f2d33687a90d221a10ae831a812609963ad138ddc80efa7675fb55b0589a629cd0cf64af5b34
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.3, elliptic@npm:^6.5.5":
   version: 6.5.7
   resolution: "elliptic@npm:6.5.7"
@@ -20806,7 +21157,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escalade@npm:^3.1.1, escalade@npm:^3.1.2":
+"escalade@npm:^3.1.1, escalade@npm:^3.1.2, escalade@npm:^3.2.0":
   version: 3.2.0
   resolution: "escalade@npm:3.2.0"
   checksum: 10/9d7169e3965b2f9ae46971afa392f6e5a25545ea30f2e2dd99c9b0a95a3f52b5653681a84f5b2911a413ddad2d7a93d3514165072f349b5ffc59c75a899970d6
@@ -25469,7 +25820,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iserror@npm:0.0.2":
+"iserror@npm:0.0.2, iserror@npm:^0.0.2":
   version: 0.0.2
   resolution: "iserror@npm:0.0.2"
   checksum: 10/6ca5e50d779471dbb69455ce6853a8284a2a077ff9b7130133a1d09f071830653274884a1e5271b55a422a33e128790a3a7c3e73b2648cf5398d3cbdeb5ca889
@@ -26305,6 +26656,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsesc@npm:^3.0.2":
+  version: 3.1.0
+  resolution: "jsesc@npm:3.1.0"
+  bin:
+    jsesc: bin/jsesc
+  checksum: 10/20bd37a142eca5d1794f354db8f1c9aeb54d85e1f5c247b371de05d23a9751ecd7bd3a9c4fc5298ea6fa09a100dafb4190fa5c98c6610b75952c3487f3ce7967
+  languageName: node
+  linkType: hard
+
 "jsesc@npm:~0.5.0":
   version: 0.5.0
   resolution: "jsesc@npm:0.5.0"
@@ -29795,6 +30155,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.19":
+  version: 2.0.19
+  resolution: "node-releases@npm:2.0.19"
+  checksum: 10/c2b33b4f0c40445aee56141f13ca692fa6805db88510e5bbb3baadb2da13e1293b738e638e15e4a8eb668bb9e97debb08e7a35409b477b5cc18f171d35a83045
+  languageName: node
+  linkType: hard
+
 "node-stdlib-browser@npm:^1.2.0":
   version: 1.2.1
   resolution: "node-stdlib-browser@npm:1.2.1"
@@ -33408,7 +33775,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-remove-scroll-bar@npm:^2.3.3, react-remove-scroll-bar@npm:^2.3.4":
+"react-remove-scroll-bar@npm:^2.3.3":
+  version: 2.3.8
+  resolution: "react-remove-scroll-bar@npm:2.3.8"
+  dependencies:
+    react-style-singleton: "npm:^2.2.2"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/6c0f8cff98b9f49a4ee2263f1eedf12926dced5ce220fbe83bd93544460e2a7ec8ec39b35d1b2a75d2fced0b2d64afeb8e66f830431ca896e05a20585f9fc350
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll-bar@npm:^2.3.4":
   version: 2.3.6
   resolution: "react-remove-scroll-bar@npm:2.3.6"
   dependencies:
@@ -33505,6 +33888,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-style-singleton@npm:^2.2.2":
+  version: 2.2.3
+  resolution: "react-style-singleton@npm:2.2.3"
+  dependencies:
+    get-nonce: "npm:^1.0.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/62498094ff3877a37f351b29e6cad9e38b2eb1ac3c0cb27ebf80aee96554f80b35e17bdb552bcd7ac8b7cb9904fea93ea5668f2057c73d38f90b5d46bb9b27ab
+  languageName: node
+  linkType: hard
+
 "react-transform-hmr@npm:^1.0.4":
   version: 1.0.4
   resolution: "react-transform-hmr@npm:1.0.4"
@@ -34594,7 +34993,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^4.0.0, schema-utils@npm:^4.0.1, schema-utils@npm:^4.2.0":
+"schema-utils@npm:^4.0.0, schema-utils@npm:^4.0.1":
   version: 4.2.0
   resolution: "schema-utils@npm:4.2.0"
   dependencies:
@@ -34606,6 +35005,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"schema-utils@npm:^4.2.0":
+  version: 4.3.0
+  resolution: "schema-utils@npm:4.3.0"
+  dependencies:
+    "@types/json-schema": "npm:^7.0.9"
+    ajv: "npm:^8.9.0"
+    ajv-formats: "npm:^2.1.1"
+    ajv-keywords: "npm:^5.1.0"
+  checksum: 10/86c5a7c72a275c56f140bc3cdd832d56efb11428c88ad588127db12cb9b2c83ccaa9540e115d7baa9c6175b5e360094457e29c44e6fb76787c9498c2eb6df5d6
+  languageName: node
+  linkType: hard
+
 "select-hose@npm:^2.0.0":
   version: 2.0.0
   resolution: "select-hose@npm:2.0.0"
@@ -37396,8 +37807,8 @@ __metadata:
   linkType: hard
 
 "tsconfck@npm:^3.0.3":
-  version: 3.1.3
-  resolution: "tsconfck@npm:3.1.3"
+  version: 3.1.4
+  resolution: "tsconfck@npm:3.1.4"
   peerDependencies:
     typescript: ^5.0.0
   peerDependenciesMeta:
@@ -37405,7 +37816,7 @@ __metadata:
       optional: true
   bin:
     tsconfck: bin/tsconfck.js
-  checksum: 10/bf9b9b72de5b83f833f5dea8b276e77bab08e85751589f36dd23854fa3d5f7955194086fb8424df388bf232f2fc9a067d7913bfa674cb1217be0bba648ec71f2
+  checksum: 10/4fb02e75ff374a82052b4800970bebe4466b5a6e7193d74e7b875cc8225acb5037fb4e7dcd4a5cd751c22129360cb13b4d5536897eae131d69c1a20fb18a99b4
   languageName: node
   linkType: hard
 
@@ -37711,7 +38122,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.0.4, typescript@npm:^5.3.3, typescript@npm:^5.5.3":
+"typescript@npm:^5.0.4, typescript@npm:^5.5.3":
   version: 5.6.2
   resolution: "typescript@npm:5.6.2"
   bin:
@@ -37721,6 +38132,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^5.3.3":
+  version: 5.7.2
+  resolution: "typescript@npm:5.7.2"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/4caa3904df69db9d4a8bedc31bafc1e19ffb7b24fbde2997a1633ae1398d0de5bdbf8daf602ccf3b23faddf1aeeb9b795223a2ed9c9a4fdcaf07bfde114a401a
+  languageName: node
+  linkType: hard
+
 "typescript@npm:~5.4.2":
   version: 5.4.5
   resolution: "typescript@npm:5.4.5"
@@ -37741,7 +38162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.0.4#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.3.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.5.3#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A^5.0.4#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.5.3#optional!builtin<compat/typescript>":
   version: 5.6.2
   resolution: "typescript@patch:typescript@npm%3A5.6.2#optional!builtin<compat/typescript>::version=5.6.2&hash=5adc0c"
   bin:
@@ -37751,6 +38172,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^5.3.3#optional!builtin<compat/typescript>":
+  version: 5.7.2
+  resolution: "typescript@patch:typescript@npm%3A5.7.2#optional!builtin<compat/typescript>::version=5.7.2&hash=5adc0c"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/ff27fc124bceb8969be722baa38af945b2505767cf794de3e2715e58f61b43780284060287d651fcbbdfb6f917f4653b20f4751991f17e0706db389b9bb3f75d
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A~5.4.2#optional!builtin<compat/typescript>":
   version: 5.4.5
   resolution: "typescript@patch:typescript@npm%3A5.4.5#optional!builtin<compat/typescript>::version=5.4.5&hash=5adc0c"
@@ -38093,6 +38524,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"update-browserslist-db@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "update-browserslist-db@npm:1.1.1"
+  dependencies:
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.0"
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: 10/7678dd8609750588d01aa7460e8eddf2ff9d16c2a52fb1811190e0d056390f1fdffd94db3cf8fb209cf634ab4fa9407886338711c71cc6ccade5eeb22b093734
+  languageName: node
+  linkType: hard
+
 "update-check@npm:1.5.3":
   version: 1.5.3
   resolution: "update-check@npm:1.5.3"
@@ -38605,7 +39050,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.0.0, vite@npm:^5.2.6, vite@npm:^5.3.1":
+"vite@npm:^5.0.0, vite@npm:^5.3.1":
   version: 5.4.6
   resolution: "vite@npm:5.4.6"
   dependencies:
@@ -38648,6 +39093,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite@npm:^5.2.6":
+  version: 5.4.11
+  resolution: "vite@npm:5.4.11"
+  dependencies:
+    esbuild: "npm:^0.21.3"
+    fsevents: "npm:~2.3.3"
+    postcss: "npm:^8.4.43"
+    rollup: "npm:^4.20.0"
+  peerDependencies:
+    "@types/node": ^18.0.0 || >=20.0.0
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    sass-embedded: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 10/719c4dea896e9547958643354003c8c9ea98e5367196d98f5f46cffb3ec963fead3ea5853f5af941c79bbfb73583dec19bbb0d28d2f644b95d7f59c55e22919d
+  languageName: node
+  linkType: hard
+
 "vitest@npm:1.3.0":
   version: 1.3.0
   resolution: "vitest@npm:1.3.0"