diff --git a/client/components/EditableText/index.tsx b/client/components/EditableText/index.tsx
index e20ae8677..23f866240 100644
--- a/client/components/EditableText/index.tsx
+++ b/client/components/EditableText/index.tsx
@@ -28,7 +28,7 @@ export const EditableInput = ({
       {loading && <LoadingPlaceholder color="#e2e1eb" />}
       <TextInput
         style={{
-          fontSize: '20px',
+          fontSize: 20,
           fontWeight: 'bold',
           color: theme.colors.textPrimary,
         }}
diff --git a/client/components/GearList/GearList.tsx b/client/components/GearList/GearList.tsx
index c519a77df..af702d860 100644
--- a/client/components/GearList/GearList.tsx
+++ b/client/components/GearList/GearList.tsx
@@ -10,11 +10,11 @@ export const GearList = () => {
     <RStack
       alignSelf="center"
       $sm={{
-        borderRadius: '6px',
+        borderRadius: 6,
         width: '100%',
       }}
       $gtSm={{
-        borderRadius: '12px',
+        borderRadius: 12,
         width: '90%',
       }}
       style={{
diff --git a/client/components/Loader.tsx b/client/components/Loader.tsx
index 2d7320c00..f884e2900 100644
--- a/client/components/Loader.tsx
+++ b/client/components/Loader.tsx
@@ -7,7 +7,7 @@ const Loader = () => {
         flexDirection: 'row',
         marginTop: 20,
         justifyContent: 'center',
-        gap: '8px',
+        gap: 8,
       }}
     >
       <RSpinner color="#0a84ff" />
diff --git a/client/components/MultistepForm/MultistepForm.tsx b/client/components/MultistepForm/MultistepForm.tsx
index bdf973104..8321becdc 100644
--- a/client/components/MultistepForm/MultistepForm.tsx
+++ b/client/components/MultistepForm/MultistepForm.tsx
@@ -45,7 +45,7 @@ const loadStyles = (theme) => {
 
   return {
     container: {
-      height: '800px',
+      height: 800,
       backgroundColor: currentTheme.colors.white,
       alignItems: 'center',
       justifyContent: 'center',
diff --git a/client/components/SearchInput.tsx b/client/components/SearchInput.tsx
index 18aeb7e25..5e27b603d 100644
--- a/client/components/SearchInput.tsx
+++ b/client/components/SearchInput.tsx
@@ -4,7 +4,7 @@ import { MaterialIcons } from '@expo/vector-icons';
 import useSearchInput from '~/hooks/search/useSearchInput';
 import useTheme from '~/hooks/useTheme';
 import useCustomStyles from '~/hooks/useCustomStyles';
-import { RStack, RInput, RButton, RText, RScrollView } from '@packrat/ui';
+import { RStack, RInput, RButton, RText, RScrollView, RIconButton } from '@packrat/ui';
 import { View, Pressable } from 'react-native';
 
 export const SearchInput = ({ onSelect, placeholder }) => {
@@ -35,8 +35,8 @@ export const SearchInput = ({ onSelect, placeholder }) => {
         >
           <RInput
             style={{
-              paddingLeft: '35px',
-              paddingRight: '55px',
+              paddingLeft: 35,
+              paddingRight: 55,
             }}
             placeholder={placeholder ?? 'Search'}
             onChangeText={(text) => {
@@ -53,7 +53,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              width: '40px',
+              width: 40,
               fontSize: 20,
             }}
           />
@@ -90,7 +90,7 @@ export const SearchInput = ({ onSelect, placeholder }) => {
             >
               <View
                 role="list"
-                style={{ width: '100%', gap: '8px', padding: '8px' }}
+                style={{ width: '100%', gap: 8, padding: 8 }}
               >
                 {data.map((result, i) => (
                   <RStack
@@ -106,11 +106,9 @@ export const SearchInput = ({ onSelect, placeholder }) => {
                     <RStack style={{ flexDirection: 'row' }}>
                       <RText fontWeight="400">{result.properties.name}</RText>
                       <RText
-                        style={{
-                          color: 'gray',
-                          opacity: '100',
-                          textTransform: 'capitalize',
-                        }}
+                        color={'gray'}
+                        opacity={100}
+                        textTransform={'capitalize'}
                       >
                         {result.properties.osm_value}
                       </RText>
@@ -132,14 +130,12 @@ export const SearchInput = ({ onSelect, placeholder }) => {
           setSearchString(text);
         }}
         placeholder="Search"
-        style={{
-          width: '100%',
-          borderRadius: '4',
-          padding: '16px 8px',
-          backgroundColor: 'white',
-        }}
         value={searchString}
         fontSize={14}
+        width={'100%'}
+        borderRadius={4}
+        paddingVertical={16}
+        backgroundColor="white"
       />
       <RIconButton
         backgroundColor="transparent"
@@ -188,6 +184,6 @@ const loadStyles = () => ({
   container: {
     marginTop: 20,
     marginBottom: 15,
-    maxWidth: '400px',
+    maxWidth: 400,
   },
 });
diff --git a/client/components/TripCard.tsx b/client/components/TripCard.tsx
index b9442e479..4b715bd4e 100644
--- a/client/components/TripCard.tsx
+++ b/client/components/TripCard.tsx
@@ -146,7 +146,7 @@ const loadStyles = (theme) => {
       flex: 1,
       paddingHorizontal: 60,
       paddingVertical: 70,
-      height: Platform.OS === 'web' ? '450px' : '100%',
+      height: Platform.OS === 'web' ? 450 : '100%',
       alignSelf: 'center',
     },
     mapCard: {
@@ -157,7 +157,7 @@ const loadStyles = (theme) => {
       padding: currentTheme.size.cardPadding,
       paddingHorizontal: currentTheme.padding.paddingInside,
       marginBottom: 20,
-      height: Platform.OS === 'web' ? '650px' : '100%',
+      height: Platform.OS === 'web' ? 650 : '100%',
       overflow: 'hidden',
       alignSelf: 'center',
     },
diff --git a/client/components/card/LargeCard.tsx b/client/components/card/LargeCard.tsx
index d5cd82c95..d145948b6 100644
--- a/client/components/card/LargeCard.tsx
+++ b/client/components/card/LargeCard.tsx
@@ -77,7 +77,7 @@ export default function LargeCard({
           style={{
             color: currentTheme.colors.textPrimary,
             fontSize: currentTheme.font.size,
-            fontWeight: 600,
+            fontWeight: "600",
           }}
         >
           {title && <RText>{title}</RText>}
@@ -120,7 +120,7 @@ const loadStyles = (theme) => {
       flex: 1,
       paddingHorizontal: 60,
       paddingVertical: 70,
-      height: Platform.OS === 'web' ? '450px' : '100%',
+      height: Platform.OS === 'web' ? 450 : '100%',
     },
     mapCard: {
       backgroundColor: currentTheme.colors.card,
@@ -130,7 +130,7 @@ const loadStyles = (theme) => {
       padding: currentTheme.size.cardPadding,
       paddingHorizontal: currentTheme.padding.paddingInside,
       marginBottom: 20,
-      height: Platform.OS === 'web' ? '650px' : '100%',
+      height: Platform.OS === 'web' ? 650 : '100%',
       overflow: 'hidden',
     },
   };
diff --git a/client/components/card/index.tsx b/client/components/card/index.tsx
index 132abf991..518c14b96 100644
--- a/client/components/card/index.tsx
+++ b/client/components/card/index.tsx
@@ -78,15 +78,15 @@ export const CustomCard = ({
       <View
         style={{
           alignSelf: 'center',
-          borderRadius: '10px',
+          borderRadius: 10,
           ...styles.mainContainer,
         }}
       >
-        <RStack style={{ width: '100%', gap: '30px' }}>
+        <RStack style={{ width: '100%', gap: 30 }}>
           <View
             style={{
-              padding: '15px',
-              paddingBottom: '0px',
+              padding: 15,
+              paddingBottom: 0,
               flexDirection: 'row',
               justifyContent: 'space-between',
               alignItems: 'center',
@@ -103,7 +103,7 @@ export const CustomCard = ({
               />
             </View>
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <View style={{ marginRight: '20px', marginLeft: '20px' }}>
+              <View style={{ marginRight: 20, marginLeft: 20 }}>
                 <Link href={`/profile/${data.owner_id}`}>
                   <RText>
                     {user._id === data.owner_id
@@ -159,8 +159,8 @@ export const CustomCard = ({
             style={{
               alignItems: 'center',
               justifyContent: 'center',
-              paddingRight: '16px',
-              paddingLeft: '16px',
+              paddingRight: 16,
+              paddingLeft: 16,
             }}
           >
             <SearchItem placeholder={'Search Item'} />
@@ -170,14 +170,14 @@ export const CustomCard = ({
             style={{
               alignItems: 'center',
               justifyContent: 'center',
-              paddingRight: '16px',
-              paddingLeft: '16px',
+              paddingRight: 16,
+              paddingLeft: 16,
             }}
           >
             {content}
           </View>
           <RSeparator />
-          <View style={{ padding: '16px', paddingTop: '0' }}>{footer}</View>
+          <View style={{ padding: 16, paddingTop: 0 }}>{footer}</View>
         </RStack>
         {/*         <ToastViewport multipleToasts />
         <NativeToast /> */}
@@ -190,15 +190,15 @@ export const CustomCard = ({
       <View
         style={{
           alignSelf: 'center',
-          borderRadius: '10px',
+          borderRadius: 10,
           ...styles.mainContainer,
         }}
       >
-        <RStack style={{ width: '100%', gap: '30px' }}>
+        <RStack style={{ width: '100%', gap: 30 }}>
           <View
             style={{
-              padding: '15px',
-              paddingBottom: '0px',
+              padding: 15,
+              paddingBottom: 0,
               flexDirection: 'row',
               justifyContent: 'space-between',
               alignItems: 'center',
@@ -206,7 +206,7 @@ export const CustomCard = ({
           >
             <View>{title}</View>
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <View style={{ marginRight: '20px', marginLeft: '20px' }}>
+              <View style={{ marginRight: 20, marginLeft: 20 }}>
                 <Link href={`/profile/${data.owner_id && data.owner_id._id}`}>
                   <RText>
                     {user._id === data.owner_id
@@ -255,14 +255,14 @@ export const CustomCard = ({
             style={{
               alignItems: 'center',
               justifyContent: 'center',
-              paddingRight: '16px',
-              paddingLeft: '16px',
+              paddingRight: 16,
+              paddingLeft: 16,
             }}
           >
             {content}
           </View>
           <RSeparator />
-          <View style={{ padding: '16px', paddingTop: '0' }}>{footer}</View>
+          <View style={{ padding: 16, paddingTop: 0 }}>{footer}</View>
         </RStack>
       </View>
     );
diff --git a/client/components/dashboard/FeedPreview.tsx b/client/components/dashboard/FeedPreview.tsx
index cf6a0e43b..3eaf5a892 100644
--- a/client/components/dashboard/FeedPreview.tsx
+++ b/client/components/dashboard/FeedPreview.tsx
@@ -41,9 +41,10 @@ const FeedPreviewScroll = () => {
                   style={{
                     backgroundColor: '#F2F1EB',
                     textTransform: 'capitalize',
-                    padding: '4px 8px',
+                    paddingVertical: 4,
+                    paddingHorizontal: 8,
                     alignSelf: 'center',
-                    borderRadius: '2px',
+                    borderRadius: 2,
                   }}
                 >
                   {item.type}
diff --git a/client/components/dashboard/Section.tsx b/client/components/dashboard/Section.tsx
index a4fa8e9c4..14029eff2 100644
--- a/client/components/dashboard/Section.tsx
+++ b/client/components/dashboard/Section.tsx
@@ -9,7 +9,7 @@ const Section = ({ children, onPress }) => {
   const styles = useCustomStyles(loadStyles);
   return (
     <View style={styles.section} onPress={onPress}>
-      <RCard style={{ borderRadius: '8px' }}>
+      <RCard style={{ borderRadius: 8 }}>
         <RCard.Header style={styles.card}>{children}</RCard.Header>
       </RCard>
     </View>
@@ -29,7 +29,7 @@ const loadStyles = (theme) => {
       paddingHorizontal: 10,
       paddingVertical: 20,
       backgroundColor: currentTheme.colors.secondaryBlue,
-      borderRadius: '8px',
+      borderRadius: 8,
     },
   };
 };
diff --git a/client/components/feed/FeedCard.tsx b/client/components/feed/FeedCard.tsx
index afb6a8134..113446665 100644
--- a/client/components/feed/FeedCard.tsx
+++ b/client/components/feed/FeedCard.tsx
@@ -83,21 +83,21 @@ export default function Card({
   if (duration) numberOfNights = JSON.parse(duration).numberOfNights;
 
   return (
-    <View style={{ alignItems: 'center', padding: '16px' }}>
+    <View style={{ alignItems: 'center', padding: 16 }}>
       <View
         style={{
-          minHeight: '150px',
-          minWidth: '300px',
+          minHeight: 150,
+          minWidth: 300,
           marginVertical: 'auto',
-          borderRadius: '15px',
+          borderRadius: 15,
           overflow: 'hidden',
           borderColor: 'lightgray',
           borderWidth: '1',
           backgroundColor: `${currentTheme.colors.card}`,
         }}
       >
-        <RStack style={{ padding: '16px', gap: '50px' }}>
-          <RStack style={{ gap: '10px' }}>
+        <RStack style={{ padding: 16, gap: 50 }}>
+          <RStack style={{ gap: 10 }}>
             <RHeading>
               <View
                 style={{
@@ -117,7 +117,7 @@ export default function Card({
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'center',
-                    gap: '10px',
+                    gap: 10,
                   }}
                 >
                   {type === 'pack' && (
@@ -126,7 +126,7 @@ export default function Card({
                         flexDirection: 'row',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                        gap: '8px',
+                        gap: 8,
                         // border: '1px solid #ccc',
                       }}
                     >
@@ -189,7 +189,7 @@ export default function Card({
                 style={{
                   flexDirection: 'column',
                   alignItems: 'flex-start',
-                  gap: '8px',
+                  gap: 8,
                 }}
               >
                 <Link href={`/profile/${owner_id}`}>
@@ -201,7 +201,7 @@ export default function Card({
                   style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: '100px',
+                    gap: 100,
                   }}
                 >
                   <RText fontSize="$1" color="gray" fontWeight="400" flex={1}>
@@ -234,7 +234,7 @@ export default function Card({
                       style={{
                         flexDirection: 'row',
                         alignItems: 'center',
-                        gap: '8px',
+                        gap: 8,
                       }}
                     >
                       {user?._id === owner_id ? null : (
diff --git a/client/components/feed/FeedSearchFilter.tsx b/client/components/feed/FeedSearchFilter.tsx
index ee8f2a876..4679da0bb 100644
--- a/client/components/feed/FeedSearchFilter.tsx
+++ b/client/components/feed/FeedSearchFilter.tsx
@@ -76,7 +76,7 @@ const FeedSearchFilter = ({
       >
         {feedType === 'public' && (
           <RStack
-            style={{ flexDirection: 'row', gap: '10px', alignItems: 'center' }}
+            style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}
           >
             <RText
               fontSize={18}
@@ -114,7 +114,7 @@ const FeedSearchFilter = ({
           </RStack>
         )}
         <RStack
-          style={{ flexDirection: 'row', gap: '10px', alignItems: 'center' }}
+          style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}
         >
           <RText
             fontSize={17}
diff --git a/client/components/hero/index.tsx b/client/components/hero/index.tsx
index 4c4d393fa..e56fb6f34 100644
--- a/client/components/hero/index.tsx
+++ b/client/components/hero/index.tsx
@@ -22,7 +22,7 @@ const Hero = ({ children, imageDetails }) => {
     <View
       style={[
         styles.heroContainer,
-        Platform.OS === 'web' ? { height: '310px' } : null,
+        Platform.OS === 'web' ? { height: 310 } : null,
       ]}
     >
       <RImage source={source} alt={alt} style={styles.heroImage} />
diff --git a/client/components/item/ItemForm.tsx b/client/components/item/ItemForm.tsx
index 95311938e..55c60c040 100644
--- a/client/components/item/ItemForm.tsx
+++ b/client/components/item/ItemForm.tsx
@@ -42,7 +42,7 @@ export const ItemForm = ({
 
   return (
     <View>
-      <RStack style={{ gap: '8px' }}>
+      <RStack style={{ gap: 8 }}>
         <RInput
           value={name}
           placeholder="Item Name"
diff --git a/client/components/item/searchItem.tsx b/client/components/item/searchItem.tsx
index 1753c201b..ca5155ba1 100644
--- a/client/components/item/searchItem.tsx
+++ b/client/components/item/searchItem.tsx
@@ -45,7 +45,7 @@ export const SearchItem: React.FC<Props> = ({ onSelect, placeholder }) => {
   const dispatch = useDispatch();
 
   return Platform.OS === 'web' ? (
-    <RStack style={{ width: '100%', maxWidth: '300px' }}>
+    <RStack style={{ width: '100%', maxWidth: 300 }}>
       {/* ... */}
       <RStack style={{ width: '100%', alignItems: 'center' }}>
         <View
@@ -59,14 +59,13 @@ export const SearchItem: React.FC<Props> = ({ onSelect, placeholder }) => {
               setShowSearchResults(true);
             }}
             placeholder={placeholder ?? 'Type here to search'}
-            style={{
-              width: '100%',
-              borderRadius: '4',
-              padding: '16px 8px',
-              backgroundColor: 'white',
-            }}
             value={searchString}
             fontSize={14}
+            width={'100%'}
+            borderRadius={4}
+            paddingVertical={16}
+            paddingHorizontal={8}
+            backgroundColor="white"
           />
           <RIconButton
             backgroundColor="transparent"
@@ -138,14 +137,13 @@ export const SearchItem: React.FC<Props> = ({ onSelect, placeholder }) => {
       <RInput
         onChangeText={(text) => setSearchString(text)}
         placeholder="Search"
-        style={{
-          width: '100%',
-          borderRadius: '4',
-          padding: '16px 8px',
-          backgroundColor: 'white',
-        }}
         value={searchString}
         fontSize={14}
+        width={'100%'}
+        borderRadius={4}
+        paddingVertical={16}
+        paddingHorizontal={8}
+        backgroundColor="white"
       />
       <RIconButton
         backgroundColor="transparent"
@@ -168,14 +166,13 @@ export const SearchItem: React.FC<Props> = ({ onSelect, placeholder }) => {
         >
           <View
             role="list"
-            style={{ width: '100%', gap: '8px', padding: '8px' }}
+            style={{ width: '100%', gap: 8, padding: 8 }}
           >
             {searchResults.map((result, i) => (
               <Pressable
                 key={`result + ${i}`}
                 role="listitem"
                 onPress={() => handleSearchResultClick(result, i)}
-                // @ts-expect-error
               >
                 <RStack style={{ flexDirection: 'row' }}>
                   <RText fontWeight="400"></RText>
diff --git a/client/components/itemtable/itemTable.tsx b/client/components/itemtable/itemTable.tsx
index 9eac12131..43ee41ec0 100644
--- a/client/components/itemtable/itemTable.tsx
+++ b/client/components/itemtable/itemTable.tsx
@@ -98,7 +98,7 @@ export const ItemsTable = ({
         />
         <View
           style={{
-            height: '400px',
+            height: 400,
             overflowY: 'scroll',
           }}
         >
@@ -115,12 +115,12 @@ export const ItemsTable = ({
       <View style={{ display: 'flex', flexDirection: 'row', margin: 'auto' }}>
         <RButton
           style={{
-            marginRight: '10px',
-            width: '4px',
+            marginRight: 10,
+            width: 4,
             backgroundColor: 'transparent',
-            borderRadius: '5px',
+            borderRadius: 5,
             borderColor: page < 2 ? 'gray' : '#0284c7',
-            borderWidth: '1px',
+            borderWidth: 1,
             borderStyle: 'solid',
           }}
           disabled={page < 2}
@@ -130,12 +130,12 @@ export const ItemsTable = ({
         </RButton>
         <RButton
           style={{
-            marginRight: '10px',
-            width: '4px',
+            marginRight: 10,
+            width: 4,
             backgroundColor: 'transparent',
-            borderRadius: '5px',
+            borderRadius: 5,
             borderColor: page === totalPages ? 'gray' : '#0284c7',
-            borderWidth: '1px',
+            borderWidth: 1,
             borderStyle: 'solid',
           }}
           disabled={page === totalPages}
diff --git a/client/components/landing_page/index.tsx b/client/components/landing_page/index.tsx
index e997cd8a8..16e5d129f 100644
--- a/client/components/landing_page/index.tsx
+++ b/client/components/landing_page/index.tsx
@@ -141,13 +141,13 @@ const LandingPage = () => {
               >
                 <RButton
                   title="App Store"
-                  style={{ margin: 10, padding: '32px' }}
+                  style={{ margin: 10, padding: 32 }}
                 >
                   <RStack
                     style={{
                       flexDirection: 'row',
                       alignItems: 'center',
-                      gap: '8px',
+                      gap: 8,
                     }}
                   >
                     <MaterialCommunityIcons
@@ -162,13 +162,13 @@ const LandingPage = () => {
                 </RButton>
                 <RButton
                   title="Google Play"
-                  style={{ margin: 10, padding: '32px' }}
+                  style={{ margin: 10, padding: 32 }}
                 >
                   <RStack
                     style={{
                       flexDirection: 'row',
                       alignItems: 'center',
-                      gap: '8px',
+                      gap: 8,
                     }}
                   >
                     <MaterialCommunityIcons
@@ -184,13 +184,13 @@ const LandingPage = () => {
               </View>
               <RButton
                 title="Web"
-                style={{ margin: 10, padding: '32px', width: '100%' }}
+                style={{ margin: 10, padding: 32, width: '100%' }}
               >
                 <RStack
                   style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: '8px',
+                    gap: 8,
                   }}
                 >
                   <MaterialCommunityIcons name="web" size={44} color="white" />
diff --git a/client/components/map/MapButtonsOverlay.tsx b/client/components/map/MapButtonsOverlay.tsx
index 7c9929a85..f26cd13f6 100644
--- a/client/components/map/MapButtonsOverlay.tsx
+++ b/client/components/map/MapButtonsOverlay.tsx
@@ -227,9 +227,9 @@ const loadStyles = (theme) => {
     container: {
       alignItems: 'center',
       justifyContent: 'center',
-      height: '400px',
+      height: 400,
       width: '100%',
-      borderRadius: '10px',
+      borderRadius: 10,
     },
     map: {
       width: '100%',
diff --git a/client/components/map/MapContainer.web.tsx b/client/components/map/MapContainer.web.tsx
index 69d0cf956..0a35dd14f 100644
--- a/client/components/map/MapContainer.web.tsx
+++ b/client/components/map/MapContainer.web.tsx
@@ -29,9 +29,9 @@ const loadStyles = () => ({
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',
-    marginVertical: '10px',
+    marginVertical: 10,
     width: '100%',
-    height: '400px',
-    borderRadius: '10px',
+    height: 400,
+    borderRadius: 10,
   },
 });
diff --git a/client/components/map/WebMap.web.tsx b/client/components/map/WebMap.web.tsx
index 265ca6251..4f8b500be 100644
--- a/client/components/map/WebMap.web.tsx
+++ b/client/components/map/WebMap.web.tsx
@@ -37,7 +37,7 @@ const WebMap = ({ shape: shapeProp }) => {
   } = useWebMap({ shape: shapeProp });
 
   const element = (
-    <View style={[styles.container, { height: showModal ? '100%' : '400px' }]}>
+    <View style={[styles.container, { height: showModal ? '100%' : 400 }]}>
       {showModal || isPolygonOrMultiPolygon(shape) ? (
         <View
           key="map"
@@ -98,7 +98,7 @@ const loadStyles = () => ({
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
-    borderRadius: '10px',
+    borderRadius: 10,
   },
   map: {
     width: '100%',
diff --git a/client/components/modal/index.tsx b/client/components/modal/index.tsx
index 3417385a7..14e91093a 100644
--- a/client/components/modal/index.tsx
+++ b/client/components/modal/index.tsx
@@ -81,7 +81,7 @@ export const CustomModal = ({
             opacity={0.5}
             enterStyle={{ opacity: 0 }}
             exitStyle={{ opacity: 0 }}
-            minWidth={'400px'}
+            minWidth={400}
           />
 
           <Dialog.Content
diff --git a/client/components/pack_table/Table.tsx b/client/components/pack_table/Table.tsx
index f94c5476a..9b07134d3 100644
--- a/client/components/pack_table/Table.tsx
+++ b/client/components/pack_table/Table.tsx
@@ -165,7 +165,7 @@ const CategoryRow = ({ category }) => {
   const styles = useCustomStyles(loadStyles);
 
   const rowData = [
-    <RStack style={{ flexDirection: 'row', gap: '8px', ...styles.categoryRow }}>
+    <RStack style={{ flexDirection: 'row', gap: 8, ...styles.categoryRow }}>
       <Feather
         name={categoryIcons[category]}
         size={16}
@@ -296,7 +296,7 @@ export const TableContainer = ({
           {copy ? (
             <RButton
               style={{
-                width: '300px',
+                width: 300,
                 marginHorizontal: 'auto',
                 marginTop: 10,
               }}
diff --git a/client/components/paginationChooseLimit/index.tsx b/client/components/paginationChooseLimit/index.tsx
index c2f9ce48d..9e079ae0b 100644
--- a/client/components/paginationChooseLimit/index.tsx
+++ b/client/components/paginationChooseLimit/index.tsx
@@ -10,7 +10,7 @@ export const PaginationLimit = ({ limit, setLimit, setPage }) => {
 
   return (
     <View style={styles.selectContainer}>
-      <RLabel style={{ alignSelf: 'center', paddingBottom: '8px' }}>
+      <RLabel style={{ alignSelf: 'center', paddingBottom: 8 }}>
         Choose a value:
       </RLabel>
       <DropdownComponent
diff --git a/client/components/trip/TripDateRange.tsx b/client/components/trip/TripDateRange.tsx
index aa1fc6904..2b56cd2aa 100644
--- a/client/components/trip/TripDateRange.tsx
+++ b/client/components/trip/TripDateRange.tsx
@@ -35,11 +35,11 @@ const TripDateRange = ({ dateRange, setDateRange }) => {
     <RStack
       alignSelf="center"
       $sm={{
-        borderRadius: '6px',
+        borderRadius: 6,
         width: '100%',
       }}
       $gtSm={{
-        borderRadius: '12px',
+        borderRadius: 12,
         width: '90%',
       }}
       style={{
diff --git a/client/components/user/UserDataCard.tsx b/client/components/user/UserDataCard.tsx
index 857160083..20f2889bc 100644
--- a/client/components/user/UserDataCard.tsx
+++ b/client/components/user/UserDataCard.tsx
@@ -58,20 +58,20 @@ const UserDataCard = ({
   const truncatedDestination = truncateString(destination, 25);
 
   return (
-    <View style={{ alignItems: 'center', padding: '16px' }}>
+    <View style={{ alignItems: 'center', padding: 16 }}>
       <View
         style={{
-          minHeight: '150px',
-          minWidth: '300px',
+          minHeight: 150,
+          minWidth: 300,
           border: '1px solid gray',
           borderLeft: `10px solid ${is_public ? 'green' : 'red'}`,
-          borderRadius: '8px',
+          borderRadius: 8,
           overflow: 'hidden',
           backgroundColor: '#EBEBEB',
         }}
       >
-        <RStack style={{ padding: '16px', gap: '16px' }}>
-          <RStack style={{ gap: '8px' }}>
+        <RStack style={{ padding: 16, gap: 16 }}>
+          <RStack style={{ gap: 8 }}>
             <RH2>
               <View
                 style={{
@@ -80,13 +80,13 @@ const UserDataCard = ({
                   justifyContent: 'space-between',
                   width: '100%',
                   gap: 10,
-                  fontSize: '16px',
+                  fontSize: 16,
                   fontWeight: 'bold',
                 }}
               >
-                <RText style={{ fontSize: '16px' }}>{truncatedName}</RText>
+                <RText style={{ fontSize: 16 }}>{truncatedName}</RText>
                 {state[index] ? (
-                  <RText style={{ fontSize: '16px' }}>Loading....</RText>
+                  <RText style={{ fontSize: 16 }}>Loading....</RText>
                 ) : (
                   <>
                     {!differentUser && (
@@ -105,7 +105,7 @@ const UserDataCard = ({
             {type === 'pack' ? (
               <RText
                 style={{
-                  fontSize: '12px',
+                  fontSize: 12,
                   color: 'mediumpurple',
                   marginLeft: '-0.5px',
                   marginTop: '-3px',
@@ -116,7 +116,7 @@ const UserDataCard = ({
             ) : (
               <RText
                 style={{
-                  fontSize: '12px',
+                  fontSize: 12,
                   color: 'mediumpurple',
                   marginLeft: '-0.5px',
                   marginTop: '-3px',
@@ -131,7 +131,7 @@ const UserDataCard = ({
             style={{
               flexDirection: 'row',
               alignItems: 'center',
-              gap: '16px',
+              gap: 16,
               justifyContent: 'space-between',
             }}
           >
@@ -145,7 +145,7 @@ const UserDataCard = ({
               <RText
                 style={{
                   color: 'gray',
-                  fontSize: '12px',
+                  fontSize: 12,
                   fontWeight: '400',
                   flex: 1,
                 }}
diff --git a/client/components/user/UserDataContainer.tsx b/client/components/user/UserDataContainer.tsx
index c81cb43f9..f18f5f569 100644
--- a/client/components/user/UserDataContainer.tsx
+++ b/client/components/user/UserDataContainer.tsx
@@ -17,8 +17,8 @@ const SkeletonUserDataCard = () => {
     <View style={{ alignItems: 'center', padding: '5' }}>
       <RSkeleton
         style={{
-          minHeight: '150px',
-          minWidth: '300px',
+          minHeight: 150,
+          minWidth: 300,
         }}
       ></RSkeleton>
     </View>
@@ -81,18 +81,18 @@ export default function UserDataContainer({
     >
       <RStack
         style={{
-          gap: '16px',
+          gap: 16,
           alignItems: 'center',
           flex: 1,
           width: '100%',
-          padding: '24px',
+          padding: 24,
         }}
       >
         <RText
           color={currentTheme.colors.textColor}
           style={{
             textTransform: 'capitalize',
-            fontSize: '24px',
+            fontSize: 24,
             fontWeight: 'bold',
           }}
         >
diff --git a/client/components/weather/WeatherCard.tsx b/client/components/weather/WeatherCard.tsx
index 1e9f2b82d..6e4617a93 100644
--- a/client/components/weather/WeatherCard.tsx
+++ b/client/components/weather/WeatherCard.tsx
@@ -27,12 +27,12 @@ export default function WeatherCard({
   return (
     <RStack
       $sm={{
-        borderRadius: '6px',
+        borderRadius: 6,
         flexDirection: 'column',
         width: '100%',
       }}
       $gtSm={{
-        borderRadius: '12px',
+        borderRadius: 12,
         flexDirection: 'row',
         width: '90%',
       }}
@@ -73,7 +73,7 @@ export default function WeatherCard({
           justifyContent: 'space-between',
         }}
         $gtSm={{
-          paddingRight: '0px',
+          paddingRight: 0,
         }}
         flex={0.5}
         style={styles.card}
@@ -128,7 +128,7 @@ export default function WeatherCard({
 
       <RStack
         flex={1}
-        style={{ gap: 10, padding: '0px' }}
+        style={{ gap: 10, padding: 0 }}
         $sm={{
           width: '100%',
         }}
diff --git a/client/screens/LoginScreen.tsx b/client/screens/LoginScreen.tsx
index 5059200cc..67a067056 100644
--- a/client/screens/LoginScreen.tsx
+++ b/client/screens/LoginScreen.tsx
@@ -39,7 +39,7 @@ export default function Login() {
   return (
     <RStack>
       <View style={{ width: '100%', alignItems: 'center' }}>
-        <View style={{ paddingTop: '32px', width: '90%', maxWidth: '290px' }}>
+        <View style={{ paddingTop: 32, width: '90%', maxWidth: 290 }}>
           <RHeading fontSize={32} color="#212121" fontWeight="semibold">
             Welcome
           </RHeading>
@@ -47,12 +47,12 @@ export default function Login() {
             color="grey"
             fontWeight="medium"
             fontSize={14}
-            style={{ marginTop: '8px' }}
+            style={{ marginTop: 8 }}
           >
             Sign in to continue!
           </RHeading>
 
-          <RStack style={{ marginTop: '16px', gap: '8px' }}>
+          <RStack style={{ marginTop: 16, gap: 8 }}>
             <InputText
               label="Email ID"
               keyboardType="email-address"
@@ -71,17 +71,17 @@ export default function Login() {
             <RButton
               disabled={!isValid}
               onPress={handleSubmit(handleLogin)}
-              style={{ marginTop: '16px' }}
+              style={{ marginTop: 16 }}
               backgroundColor="mediumpurple"
             >
               Sign in
             </RButton>
             <RStack
               style={{
-                marginTop: '16px',
+                marginTop: 16,
                 flexDirection: 'row',
                 justifyContent: 'center',
-                gap: '4px',
+                gap: 4,
               }}
             >
               <RText fontSize={14} color="grey">
@@ -116,7 +116,7 @@ export default function Login() {
             {/* Google Login starts */}
             <RStack
               style={{
-                marginTop: '8px',
+                marginTop: 8,
                 flexDirection: 'row',
                 justifyContent: 'center',
               }}
@@ -130,7 +130,7 @@ export default function Login() {
             {enableGoogleLogin && (
               <RStack
                 style={{
-                  marginTop: '8px',
+                  marginTop: 8,
                   flexDirection: 'row',
                   justifyContent: 'center',
                   alignItems: 'center',
@@ -158,7 +158,7 @@ export default function Login() {
             {NODE_ENV !== 'production' && (
               <RStack
                 style={{
-                  marginTop: '8px',
+                  marginTop: 8,
                   justifyContent: 'center',
                   alignItems: 'center',
                 }}
diff --git a/client/screens/RegisterScreen.tsx b/client/screens/RegisterScreen.tsx
index 919217aa1..a6366e7c7 100644
--- a/client/screens/RegisterScreen.tsx
+++ b/client/screens/RegisterScreen.tsx
@@ -29,7 +29,7 @@ export default function Register() {
 
   return (
     <View style={{ width: '100%', alignItems: 'center' }}>
-      <View style={{ paddingTop: '32px', width: '90%', maxWidth: '290px' }}>
+      <View style={{ paddingTop: 32, width: '90%', maxWidth: 290 }}>
         <RHeading fontSize={32} color="#212121" fontWeight="semibold">
           Welcome
         </RHeading>
@@ -37,11 +37,11 @@ export default function Register() {
           color="grey"
           fontWeight="medium"
           fontSize={14}
-          style={{ marginTop: '8px' }}
+          style={{ marginTop: 8 }}
         >
           Sign up to continue!
         </RHeading>
-        <RStack style={{ marginTop: '16px', gap: '8px' }}>
+        <RStack style={{ marginTop: 16, gap: 8 }}>
           <InputText
             label="Name"
             control={control}
@@ -76,17 +76,17 @@ export default function Register() {
             disabled={!isValid}
             onPress={handleSubmit(registerUser)}
             // onPress={() => registerUser()}
-            style={{ marginTop: '16px' }}
+            style={{ marginTop: 16 }}
             backgroundColor="mediumpurple"
           >
             {'Sign up'}
           </RButton>
           <RStack
             style={{
-              marginTop: '16px',
+              marginTop: 16,
               flexDirection: 'row',
               justifyContent: 'center',
-              gap: '4px',
+              gap: 4,
             }}
           >
             <RText fontSize={14} color="grey">
@@ -107,7 +107,7 @@ export default function Register() {
           {/* Google register */}
           <RStack
             style={{
-              marginTop: '8px',
+              marginTop: 8,
               flexDirection: 'row',
               justifyContent: 'center',
             }}
@@ -119,7 +119,7 @@ export default function Register() {
           {/* Google register */}
           <RStack
             style={{
-              marginTop: '8px',
+              marginTop: 8,
               flexDirection: 'row',
               justifyContent: 'center',
               alignItems: 'center',
diff --git a/client/screens/user/ProfileContainer.tsx b/client/screens/user/ProfileContainer.tsx
index 836c11017..33d3413a5 100644
--- a/client/screens/user/ProfileContainer.tsx
+++ b/client/screens/user/ProfileContainer.tsx
@@ -23,10 +23,10 @@ const SettingsButton = () => {
       onPress={onSettingsClick}
       style={{
         backgroundColor: 'transparent',
-        marginBottom: '16px',
+        marginBottom: 16,
         justifyContent: 'center',
         border: '1px solid lightgray',
-        borderRadius: '8px',
+        borderRadius: 8,
       }}
       icon={
         <MaterialCommunityIcons name="cog-outline" size={24} color={'grey'} />
@@ -72,15 +72,15 @@ const Header = ({
                 <RSkeleton
                   style={{
                     borderRadius: '100%',
-                    height: '100px',
-                    width: '100px',
+                    height: 100,
+                    width: 100,
                   }}
                 />
                 <RSkeleton
                   style={{
-                    height: '100px',
+                    height: 100,
                     width: '100%',
-                    marginTop: '8px',
+                    marginTop: 8,
                     alignItems: 'center',
                   }}
                 />
@@ -88,7 +88,7 @@ const Header = ({
             ) : (
               <>
                 <Avatar src={user?.profileImage} />
-                <RText style={{ marginTop: '16px', ...styles.userName }}>
+                <RText style={{ marginTop: 16, ...styles.userName }}>
                   {userRealName}
                 </RText>
                 <RText style={styles.userEmail}>{username}</RText>
@@ -102,16 +102,16 @@ const Header = ({
         {isLoading ? (
           <>
             <RSkeleton
-              style={{ borderRadius: '100%', width: '50px', height: '50px' }}
+              style={{ borderRadius: '100%', width: 50, height: 50 }}
             />
             <RSkeleton
-              style={{ borderRadius: '100%', width: '50px', height: '50px' }}
+              style={{ borderRadius: '100%', width: 50, height: 50 }}
             />
             <RSkeleton
-              style={{ borderRadius: '100%', width: '50px', height: '50px' }}
+              style={{ borderRadius: '100%', width: 50, height: 50 }}
             />
             <RSkeleton
-              style={{ borderRadius: '100%', width: '50px', height: '50px' }}
+              style={{ borderRadius: '100%', width: 50, height: 50 }}
             />
           </>
         ) : (
@@ -164,12 +164,12 @@ const SkeletonUserDataCard = () => {
       }}
     >
       <RSkeleton
-        style={{ marginBottom: '8px', height: '50px', width: '70%' }}
+        style={{ marginBottom: 8, height: 50, width: '70%' }}
       />
       <RSkeleton
-        style={{ marginBottom: '8px', height: '50px', width: '50%' }}
+        style={{ marginBottom: 8, height: 50, width: '50%' }}
       />
-      <RSkeleton style={{ height: '50px', width: '30%' }} />
+      <RSkeleton style={{ height: 50, width: '30%' }} />
     </View>
   );
 };