diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx
index 6d0ed4904..50febd669 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/_layout.tsx
@@ -2,13 +2,16 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
-
+import useTheme from 'app/hooks/useTheme';
 export default function StackLayout() {
   const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
+  const { currentTheme } = useTheme();
   return (
     <Stack
       screenOptions={{
-        headerRight: () => <DrawerToggleButton />,
+        headerRight: () => (
+          <DrawerToggleButton tintColor={currentTheme.colors.text} />
+        ),
         ...layoutStackScreenOptionsHeaderSettings,
         headerBlurEffect: 'systemChromeMaterial',
       }}
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 ce9ae34b1..f1f859c49 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/about/index.tsx
@@ -34,9 +34,9 @@ export default function AboutRoute() {
             backgroundColor: currentTheme.colors.background,
           },
           headerTitleStyle: {
-            fontSize: 24,
+            fontSize: 20,
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          headerTintColor: currentTheme.colors.text,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
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 fc393001f..2130f4f28 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx
@@ -2,13 +2,15 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import useTheme from 'app/hooks/useTheme';
 import { OfflineMapsScreen } from 'app/modules/map/screens/OfflineMapsScreen';
 import { Stack } from 'expo-router';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { useAtom } from 'jotai';
 import Head from 'expo-router/head';
 import React from 'react';
 import { Platform } from 'react-native';
 
 export default function MapsScreen() {
   const { currentTheme } = useTheme();
-
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
   return (
     <>
       {Platform.OS === 'web' && (
@@ -23,14 +25,20 @@ export default function MapsScreen() {
           headerRight: ({ tintColor }) => (
             <DrawerToggleButton tintColor={tintColor} />
           ),
-
+          headerSearchBarOptions: {
+            placeholder: 'Search maps',
+            hideWhenScrolling: false,
+            headerIconColor: currentTheme.colors.text,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
           headerStyle: {
             backgroundColor: currentTheme.colors.background,
           },
           headerTitleStyle: {
-            fontSize: 24,
+            fontSize: 20,
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          headerTintColor: currentTheme.colors.text,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
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 9f2446cd5..d4ebfa05f 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx
@@ -1,6 +1,8 @@
 import { DrawerToggleButton } from '@react-navigation/drawer';
 import useTheme from 'app/hooks/useTheme';
 import { ProductsScreen } from 'app/modules/item';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { useAtom } from 'jotai';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 import React from 'react';
@@ -8,7 +10,7 @@ import { Platform } from 'react-native';
 
 export default function ProductsPage() {
   const { currentTheme } = useTheme();
-
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
   return (
     <>
       {Platform.OS === 'web' && (
@@ -23,14 +25,21 @@ export default function ProductsPage() {
           headerRight: ({ tintColor }) => (
             <DrawerToggleButton tintColor={tintColor} />
           ),
+          headerSearchBarOptions: {
+            placeholder: 'Search products',
+            headerIconColor: currentTheme.colors.text,
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
 
           headerStyle: {
             backgroundColor: currentTheme.colors.background,
           },
           headerTitleStyle: {
-            fontSize: 24,
+            fontSize: 20,
           },
-          headerTintColor: currentTheme.colors.tertiaryBlue,
+          headerTintColor: currentTheme.colors.text,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
index 019a04ab6..8794344d0 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
 import { FeedScreen } from 'app/modules/feed';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
+import { useAtom } from 'jotai';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
-
+import useTheme from 'app/hooks/useTheme';
 export default function FeedNav() {
+  const { currentTheme } = useTheme();
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -16,6 +21,13 @@ export default function FeedNav() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Trips',
+          headerSearchBarOptions: {
+            placeholder: 'Search trips',
+            headerIconColor: currentTheme.colors.text,
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
index a34fc0520..256b23528 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx
@@ -26,11 +26,13 @@ export default function FeedNav() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Feed',
-          headerRight: ({ tintColor }) => (
-            <DrawerToggleButton tintColor={tintColor} />
+          headerRight: () => (
+            <DrawerToggleButton tintColor={currentTheme.colors.text} />
           ),
           headerSearchBarOptions: {
             placeholder: 'Search',
+            headerIconColor: currentTheme.colors.text,
+
             hideWhenScrolling: false,
             inputType: 'text',
             onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx
index 6d0ed4904..50febd669 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/index/_layout.tsx
@@ -2,13 +2,16 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
-
+import useTheme from 'app/hooks/useTheme';
 export default function StackLayout() {
   const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
+  const { currentTheme } = useTheme();
   return (
     <Stack
       screenOptions={{
-        headerRight: () => <DrawerToggleButton />,
+        headerRight: () => (
+          <DrawerToggleButton tintColor={currentTheme.colors.text} />
+        ),
         ...layoutStackScreenOptionsHeaderSettings,
         headerBlurEffect: 'systemChromeMaterial',
       }}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx
index fbce2dcaa..73f9352e1 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/index/index.tsx
@@ -36,12 +36,6 @@ 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' && (
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx
index 6d0ed4904..868fd46f9 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/packs/_layout.tsx
@@ -2,13 +2,16 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
-
+import useTheme from 'app/hooks/useTheme';
 export default function StackLayout() {
+  const { currentTheme } = useTheme();
   const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
   return (
     <Stack
       screenOptions={{
-        headerRight: () => <DrawerToggleButton />,
+        headerRight: () => (
+          <DrawerToggleButton tintColor={currentTheme.colors.text} />
+        ),
         ...layoutStackScreenOptionsHeaderSettings,
         headerBlurEffect: 'systemChromeMaterial',
       }}
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx
index 00798bb3b..e00f6b1ae 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx
@@ -1,13 +1,16 @@
 import { DrawerToggleButton } from '@react-navigation/drawer';
+import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
 import useTheme from 'app/hooks/useTheme';
 import { FeedScreen } from 'app/modules/feed';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
+import { useAtom } from 'jotai';
 import React from 'react';
 import { Platform } from 'react-native';
 
 export default function Packs() {
   const { currentTheme } = useTheme();
+  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
 
   return (
     <>
@@ -20,6 +23,14 @@ export default function Packs() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Packs',
+          headerSearchBarOptions: {
+            placeholder: 'Search packs',
+            headerIconColor: currentTheme.colors.text,
+            hideWhenScrolling: false,
+            inputType: 'text',
+            onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
+          },
+
           headerRight: ({ tintColor }) => (
             <DrawerToggleButton tintColor={tintColor} />
           ),
diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx
index 98e8146c9..600fe01ed 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx
@@ -2,12 +2,16 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import { useRouterSettings } from 'app/hooks/router';
 import { Stack } from 'expo-router';
 import React from 'react';
+import useTheme from 'app/hooks/useTheme';
 
 export default function StackLayout() {
+  const { currentTheme } = useTheme();
   return (
     <Stack
       screenOptions={{
-        headerRight: () => <DrawerToggleButton />,
+        headerRight: () => (
+          <DrawerToggleButton tintColor={currentTheme.colors.text} />
+        ),
         headerBlurEffect: 'systemChromeMaterial',
         title: 'Profile',
       }}
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 4b0e3c218..f9020fcbb 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import { Platform, SafeAreaView } from 'react-native';
 import { ScrollView, Stack, YStack } from 'tamagui';
 
-type LayoutProps = {
+interface LayoutProps {
   children: React.ReactNode;
   customStyle?: Record<string, any>;
-};
+}
 
 const Layout: React.FC<LayoutProps> = ({ children, customStyle = {} }) => {
   const { currentTheme } = useTheme();
@@ -16,14 +16,14 @@ const Layout: React.FC<LayoutProps> = ({ children, customStyle = {} }) => {
       <YStack
         flex={1}
         backgroundColor={currentTheme.colors.background}
-        maxWidth={1440}
+        maxWidth={Platform.OS === 'web' ? 1440 : 400}
         margin="auto"
         alignItems="center"
         justifyContent="flex-start"
-        paddingTop={Platform.OS === 'web' ? 20 : '$2'}
+        paddingTop={Platform.OS === 'web' ? 20 : '$1'}
         paddingBottom={Platform.OS !== 'web' ? 44 : undefined}
         paddingHorizontal="$4"
-        marginBottom={Platform.OS === 'web' ? 20 : '$2'}
+        marginBottom={Platform.OS === 'web' ? 20 : '$1'}
         width="100%"
         {...customStyle}
       >
diff --git a/packages/app/screens/about/about.style.tsx b/packages/app/screens/about/about.style.tsx
index ca59f4895..5e488804b 100644
--- a/packages/app/screens/about/about.style.tsx
+++ b/packages/app/screens/about/about.style.tsx
@@ -20,7 +20,7 @@ const loadStyles = (theme: any) => {
     header: {
       fontSize: 24,
       fontWeight: 'bold',
-      color: currentTheme.colors.tertiaryBlue,
+      color: currentTheme.colors.text,
       marginRight: 10,
     },
     headerDark: {
@@ -83,7 +83,7 @@ const loadStyles = (theme: any) => {
       lineHeight: 28,
       letterSpacing: 1,
       // fontFamily: "sans-serif",
-      color: currentTheme.colors.tertiaryBlue,
+      color: currentTheme.colors.text,
       marginBottom: 20,
     },
     tertiaryBlue: {