diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
index e63bf7dd0..47dc6ba82 100644
--- a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
+++ b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
-import { Platform, type TextInput } from 'react-native';
-import { useCallback, useRef } from 'react';
-import { Stack, useFocusEffect } from 'expo-router';
-import Head from 'expo-router/head';
-import { useRouter } from 'app/hooks/router';
+import { RStack, View } from '@packrat/ui';
 import { PlacesAutocomplete } from 'app/components/PlacesAutocomplete';
-import { RStack } from '@packrat/ui';
+import { useRouter } from 'app/hooks/router';
 import useTheme from 'app/hooks/useTheme';
-import { View } from 'native-base';
+import { Stack, useFocusEffect } from 'expo-router';
+import Head from 'expo-router/head';
+import React, { useCallback, useRef } from 'react';
+import { Platform, type TextInput } from 'react-native';
 
 interface SearchResult {
   properties: {
diff --git a/packages/app/components/carousel/index.tsx b/packages/app/components/carousel/index.tsx
index 49ede65bd..099405f72 100644
--- a/packages/app/components/carousel/index.tsx
+++ b/packages/app/components/carousel/index.tsx
@@ -15,7 +15,7 @@ interface CarouselProps {
   iconColor?: string;
 }
 
-const { height, width } = Dimensions.get('window');
+const { width: screenWidth } = Dimensions.get('window');
 
 const Carousel: React.FC<CarouselProps> = ({
   children = [],
@@ -37,7 +37,7 @@ const Carousel: React.FC<CarouselProps> = ({
   const scrollToIndex = (index: number) => {
     if (index >= 0 && index < children.length && scrollViewRef.current) {
       scrollViewRef.current.scrollTo({
-        x: index * 220,
+        x: index * (itemWidth || 220), // Use itemWidth if passed
         y: 0,
         animated: true,
       });
@@ -49,13 +49,14 @@ const Carousel: React.FC<CarouselProps> = ({
     <RStack
       style={{
         alignSelf: 'center',
-        width: '90%',
+        width: Platform.OS === 'web' ? '90%' : screenWidth, // Full width on native
         justifyContent: 'center',
         alignItems: 'center',
         flexDirection: 'row',
         flex: 1,
       }}
     >
+      {/* Show buttons only on web */}
       {Platform.OS === 'web' && (
         <ScrollButton
           direction="left"
@@ -70,7 +71,6 @@ const Carousel: React.FC<CarouselProps> = ({
         ref={scrollViewRef}
         horizontal
         scrollEnabled
-        // gestureEnabled={false} // Add this prop
         style={styles.carousel}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{ flexDirection: 'row' }}
@@ -82,6 +82,7 @@ const Carousel: React.FC<CarouselProps> = ({
             <RStack
               key={index}
               style={{
+                ...(index === 0 ? { marginLeft: 10 } : { marginLeft: 0 }),
                 marginRight: 10,
                 marginTop: 10,
                 flexDirection: 'row',
@@ -92,6 +93,7 @@ const Carousel: React.FC<CarouselProps> = ({
           ))}
       </ScrollView>
 
+      {/* Show buttons only on web */}
       {Platform.OS === 'web' && (
         <ScrollButton
           direction="right"
diff --git a/packages/app/components/chat/index.tsx b/packages/app/components/chat/index.tsx
index fe18c7e51..cccdf031e 100644
--- a/packages/app/components/chat/index.tsx
+++ b/packages/app/components/chat/index.tsx
@@ -21,7 +21,6 @@ import {
   SuggestionList,
 } from '../../components/Suggestion';
 import useTheme from 'app/hooks/useTheme';
-import colors from 'native-base/lib/typescript/theme/base/colors';
 
 interface ChatComponentProps {
   showChatSelector?: boolean;
diff --git a/packages/app/components/layout/Layout.tsx b/packages/app/components/layout/Layout.tsx
index 2a2a89f28..bbe93b348 100644
--- a/packages/app/components/layout/Layout.tsx
+++ b/packages/app/components/layout/Layout.tsx
@@ -16,6 +16,7 @@ const Layout = ({
           flex: 1,
           justifyContent: 'center',
           marginTop: 20,
+          marginBottom: 20,
           alignItems: 'center',
           backgroundColor: 'transparent',
           width: '100%',
diff --git a/packages/app/components/progress/index.tsx b/packages/app/components/progress/index.tsx
index e4990eb08..4e57e1072 100644
--- a/packages/app/components/progress/index.tsx
+++ b/packages/app/components/progress/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Progress } from 'native-base';
 import useTheme from 'app/hooks/useTheme';
 import { useProgressStore } from 'app/atoms/progressStore';
+import { View } from '@packrat/ui';
 
 const ProgressBarComponent = () => {
   const { currentTheme } = useTheme();
@@ -35,14 +35,23 @@ const ProgressBarComponent = () => {
   }, [localCurrentValue, targetValue, operationId]);
 
   return (
-    <Progress
-      value={localCurrentValue}
-      colorScheme="success"
-      size="sm"
-      w="100%"
-      borderRadius={0}
-      bg={currentTheme.colors.background}
-    />
+    <View
+      style={{
+        width: '100%',
+        height: 4,
+        backgroundColor: currentTheme.colors.background,
+        borderRadius: 2,
+        overflow: 'hidden',
+      }}
+    >
+      <View
+        style={{
+          width: `${(localCurrentValue / targetValue) * 100}%`,
+          height: '100%',
+          backgroundColor: currentTheme.colors.primary,
+        }}
+      />
+    </View>
   );
 };
 
diff --git a/packages/app/config/axios.ts b/packages/app/config/axios.ts
index 340e9becc..efadbd78a 100644
--- a/packages/app/config/axios.ts
+++ b/packages/app/config/axios.ts
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { api } from 'app/constants/api';
 // import { store } from '../store/store';
-import { InformUser } from 'app/utils/ToastUtils';
+import { toast } from 'app/utils/ToastUtils';
 import { dispatchProgress, progressActions } from '../atoms/progressStore';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
@@ -70,11 +70,10 @@ const responseInterceptor = (response) => {
   const responseMessage = response.headers['x-response-message'];
 
   if (responseMessage) {
-    InformUser({
+    toast({
       title: responseMessage,
-      placement: 'bottom',
-      duration: 3000,
-      style: { backgroundColor: response.status === 200 ? 'green' : 'red' },
+      duration: 3,
+      preset: response.status === 200 ? 'done' : 'error',
     });
   }
 
@@ -86,11 +85,10 @@ const responseInterceptor2 = (response) => {
   const responseMessage = response.headers['x-response-message'];
 
   if (responseMessage) {
-    InformUser({
+    toast({
       title: responseMessage,
-      placement: 'bottom',
-      duration: 3000,
-      style: { backgroundColor: response.status === 200 ? 'green' : 'red' },
+      duration: 3,
+      preset: response.status === 200 ? 'done' : 'error',
     });
   }
 
@@ -116,11 +114,11 @@ const responseErrorInterceptor = (error) => {
 
   const errorMessage =
     'message' in error ? error.message : 'Something went wrong';
-  InformUser({
+
+  toast({
     title: errorMessage,
-    placement: 'bottom',
-    duration: 3000,
-    style: { backgroundColor: 'red' },
+    duration: 3,
+    preset: 'error',
   });
 
   return Promise.reject(error);
@@ -133,11 +131,10 @@ const responseErrorInterceptor2 = (error) => {
 
   const errorMessage =
     'message' in error ? error.message : 'Something went wrong';
-  InformUser({
+  toast({
     title: errorMessage,
-    placement: 'bottom',
-    duration: 3000,
-    style: { backgroundColor: 'red' },
+    duration: 3,
+    preset: 'error',
   });
 
   setTimeout(() => {
diff --git a/packages/app/config/trpcAxiosClient.ts b/packages/app/config/trpcAxiosClient.ts
index 6eed78e04..cd690c149 100644
--- a/packages/app/config/trpcAxiosClient.ts
+++ b/packages/app/config/trpcAxiosClient.ts
@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from 'axios';
-import { InformUser } from 'app/utils/ToastUtils';
+import { toast } from 'app/utils/ToastUtils';
 import { logoutAuthUser } from 'app/utils/userUtils';
 import { getErrorMessageFromError } from 'app/utils/apiUtils';
 
@@ -25,11 +25,10 @@ const responseInterceptor = (response: AxiosResponse) => {
     return response;
   }
 
-  InformUser({
+  toast({
     title: 'Confirmed! Your submission was successful.',
-    placement: 'bottom',
-    duration: 3000,
-    style: { backgroundColor: 'green' },
+    duration: 3,
+    preset: 'done',
   });
 
   return response;
@@ -52,11 +51,10 @@ const responseErrorInterceptor = (response: AxiosResponse) => {
   const responseMessage = getErrorMessageFromError(response);
 
   if (responseMessage) {
-    InformUser({
+    toast({
       title: responseMessage,
-      placement: 'bottom',
-      duration: 3000,
-      style: { backgroundColor: 'red' },
+      duration: 3,
+      preset: 'error',
     });
   }
 
diff --git a/packages/app/context/ThirdPartyThemeProviders.tsx b/packages/app/context/ThirdPartyThemeProviders.tsx
index e26f75fb1..3e0eb739d 100644
--- a/packages/app/context/ThirdPartyThemeProviders.tsx
+++ b/packages/app/context/ThirdPartyThemeProviders.tsx
@@ -3,7 +3,6 @@ import { TamaguiProvider, Theme as TamaguiTheme } from 'tamagui';
 import { ToastProvider } from '@tamagui/toast';
 import config from '../theme/tamagui.config';
 import { ThemeProvider as RNPaperThemeProvider } from 'react-native-paper';
-import { NativeBaseProvider } from 'native-base';
 import {
   darkPaperTheme,
   lightThemePaper,
@@ -12,6 +11,7 @@ import {
 } from '../theme';
 import FontLoader from './FontLoader';
 import { setupDev } from 'tamagui';
+import { Toaster } from 'burnt/web';
 
 const ThirdPartyProviders = ({ children, isDark = false }) => {
   setupDev({
@@ -26,19 +26,16 @@ const ThirdPartyProviders = ({ children, isDark = false }) => {
 
   return (
     <FontLoader>
-      <NativeBaseProvider
-        theme={isDark ? nativeBaseDarkTheme : nativeBaseLightTheme}
-      >
-        <TamaguiProvider config={config} disableRootThemeClass={false}>
-          <TamaguiTheme name={isDark ? 'dark' : 'light'}>
-            <ToastProvider>
-              <RNPaperThemeProvider theme={darkPaperTheme}>
-                {children}
-              </RNPaperThemeProvider>
-            </ToastProvider>
-          </TamaguiTheme>
-        </TamaguiProvider>
-      </NativeBaseProvider>
+      <TamaguiProvider config={config} disableRootThemeClass={false}>
+        <TamaguiTheme name={isDark ? 'dark' : 'light'}>
+          <ToastProvider>
+            <RNPaperThemeProvider theme={darkPaperTheme}>
+              {children}
+              <Toaster />
+            </RNPaperThemeProvider>
+          </ToastProvider>
+        </TamaguiTheme>
+      </TamaguiProvider>
     </FontLoader>
   );
 };
diff --git a/packages/app/hooks/password-reset/useRequestEmailModal.ts b/packages/app/hooks/password-reset/useRequestEmailModal.ts
index c066663c3..3843019ec 100644
--- a/packages/app/hooks/password-reset/useRequestEmailModal.ts
+++ b/packages/app/hooks/password-reset/useRequestEmailModal.ts
@@ -1,5 +1,5 @@
 import useTheme from 'app/hooks/useTheme';
-import { InformUser } from 'app/utils/ToastUtils';
+import { toast } from 'app/utils/ToastUtils';
 import { queryTrpc } from 'app/trpc';
 
 export const useRequestEmailModal = () => {
@@ -21,11 +21,11 @@ export const useRequestEmailModal = () => {
       // TODO - switch to RTK query
       // await axios.post(`${api}/password-reset`, { email });
       closeModal();
-      InformUser({
+
+      toast({
         title: 'Password reset email sent',
-        style: { backgroundColor: currentTheme.colors.text },
-        placement: 'bottom',
-        duration: 5000,
+        duration: 3,
+        preset: 'done',
       });
     } catch (error) {}
   };
diff --git a/packages/app/modules/item/components/ItemRow/ItemRow.tsx b/packages/app/modules/item/components/ItemRow/ItemRow.tsx
index 53e50afbd..6f1b60e6b 100644
--- a/packages/app/modules/item/components/ItemRow/ItemRow.tsx
+++ b/packages/app/modules/item/components/ItemRow/ItemRow.tsx
@@ -1,9 +1,8 @@
-import { Container } from 'native-base';
 import { RText, RStack } from '@packrat/ui';
 import Checkbox from 'expo-checkbox';
 import { FontAwesome } from '@expo/vector-icons';
 import useCustomStyles from 'app/hooks/useCustomStyles';
-import { useItemRow } from 'app/hooks/itemrow';
+import { useItemRow } from 'app/modules/item';
 
 interface ItemRowProps {
   packName: string;
@@ -14,7 +13,7 @@ export const ItemRow: React.FC<ItemRowProps> = ({ packName }) => {
   const styles = useCustomStyles(loadStyles);
 
   return (
-    <Container style={styles.mainContainer}>
+    <RStack style={styles.mainContainer}>
       <Checkbox
         style={styles.checkbox}
         value={isChecked}
@@ -34,7 +33,7 @@ export const ItemRow: React.FC<ItemRowProps> = ({ packName }) => {
         <FontAwesome name="pencil" size={24} color="black" />
         <FontAwesome name="trash" size={24} color="black" />
       </RStack>
-    </Container>
+    </RStack>
   );
 };
 
diff --git a/packages/app/modules/pack/components/PackCard/PackImage.tsx b/packages/app/modules/pack/components/PackCard/PackImage.tsx
index 868841090..18e6cec94 100644
--- a/packages/app/modules/pack/components/PackCard/PackImage.tsx
+++ b/packages/app/modules/pack/components/PackCard/PackImage.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react';
 import { View } from '@packrat/ui';
-import { Package } from '@tamagui/lucide-icons';
+import { Backpack } from '@tamagui/lucide-icons';
 import { type ViewProps } from 'tamagui';
 
 interface PackImageProps {
@@ -22,7 +22,7 @@ export const PackImage: FC<PackImageProps> = ({ style = {} }) => {
       ]}
     >
       <View>
-        <Package />
+        <Backpack />
       </View>
     </View>
   );
diff --git a/packages/app/modules/pack/screens/PackDetailsScreen.tsx b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
index a64752568..e0e5def68 100644
--- a/packages/app/modules/pack/screens/PackDetailsScreen.tsx
+++ b/packages/app/modules/pack/screens/PackDetailsScreen.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { CLIENT_URL } from '@packrat/config';
-import { RH3, RText } from '@packrat/ui';
+import { RH3, RSpinner, RText } from '@packrat/ui';
 import { useAuthUser } from 'app/modules/auth';
 import Layout from 'app/components/layout/Layout';
 import {
@@ -57,7 +57,12 @@ export function PackDetailsScreen() {
 
   const isError = error !== null;
 
-  if (isLoading) return <RText>Loading...</RText>;
+  if (isLoading)
+    return (
+      <Layout>
+        <RSpinner />
+      </Layout>
+    );
 
   return (
     <Layout customStyle={{ alignItems: 'stretch' }}>
diff --git a/packages/app/modules/user/screens/SettingsScreen.tsx b/packages/app/modules/user/screens/SettingsScreen.tsx
index 719ef9e58..82c096ca3 100644
--- a/packages/app/modules/user/screens/SettingsScreen.tsx
+++ b/packages/app/modules/user/screens/SettingsScreen.tsx
@@ -50,8 +50,12 @@ export function SettingsScreen() {
         gap={8}
         width="fit-content"
         maw="100%"
-        paddingVertical={20}
-        paddingHorizontal={8}
+        style={{
+          paddingTop: 20,
+          paddingBottom: 100,
+          paddingLeft: 20,
+          paddingRight: 20,
+        }}
         marginHorizontal="auto"
         marginVertical={40}
       >
diff --git a/packages/app/modules/user/widgets/ProfileContainer.tsx b/packages/app/modules/user/widgets/ProfileContainer.tsx
index 725ae076e..58201ceb0 100644
--- a/packages/app/modules/user/widgets/ProfileContainer.tsx
+++ b/packages/app/modules/user/widgets/ProfileContainer.tsx
@@ -210,7 +210,7 @@ export function ProfileContainer({ id = null }) {
             styles.mainContainer,
             Platform.OS == 'web'
               ? { minHeight: '100vh' }
-              : { minHeight: '100%', paddingBottom: 40 },
+              : { minHeight: '100%', paddingBottom: 100 },
           ]}
         >
           <Header
diff --git a/packages/app/package.json b/packages/app/package.json
index 4e1b34761..ed82bad5b 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -70,7 +70,7 @@
     "@trpc/server": "^10.45.1",
     "axios": "^1.4.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "burnt": "^0.12.1",
+    "burnt": "^0.12.2",
     "date-fns": "^2.29.3",
     "dotenv": "^16.0.3",
     "eslint-plugin-react-native": "^4.0.0",
diff --git a/packages/app/utils/ToastUtils.ts b/packages/app/utils/ToastUtils.ts
index f72203797..d4a9c859a 100644
--- a/packages/app/utils/ToastUtils.ts
+++ b/packages/app/utils/ToastUtils.ts
@@ -1,28 +1,3 @@
-import { Toast } from 'native-base';
+import { toast } from 'burnt';
 
-/**
- * Show a toast message to inform the user.
- *
- * @function InformUser
- * @param {Object} options - The options object for the toast message.
- * @param {string} options.title - The title of the toast message.
- * @param {string} [options.placement="top"] - The placement of the toast message. Possible values are "top", "bottom", "left", or "right".
- * @param {number} [options.duration=2000] - The duration in milliseconds for which the toast message should be displayed.
- * @param {Object} [options.style={backgroundColor: 'green'}] - The style object for the toast message.
- * @returns {void}
- *
- * @example
- * // Show a toast message with default options
- * InformUser({ title: "Hello, world!" });
- *
- * // Show a toast message with custom options
- * InformUser({ title: "Custom Toast", placement: "bottom", duration: 3000 });
- */
-export const InformUser = ({ title, placement, duration, style }) => {
-  Toast.show({
-    title,
-    placement,
-    duration,
-    style,
-  });
-};
+export { toast };
diff --git a/yarn.lock b/yarn.lock
index 9ccf90679..88f32c3fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13641,7 +13641,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^6.21.0"
     axios: "npm:^1.4.0"
     babel-plugin-transform-inline-environment-variables: "npm:^0.4.4"
-    burnt: "npm:^0.12.1"
+    burnt: "npm:^0.12.2"
     date-fns: "npm:^2.29.3"
     dotenv: "npm:^16.0.3"
     eslint: "npm:^8.56.0"
@@ -15640,7 +15640,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"burnt@npm:^0.12.1":
+"burnt@npm:^0.12.1, burnt@npm:^0.12.2":
   version: 0.12.2
   resolution: "burnt@npm:0.12.2"
   dependencies: