diff --git a/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx
index 38d2a3e00e..7122d2ad83 100644
--- a/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx
@@ -25,9 +25,11 @@ import {
   AccordionContentText,
   ChevronDownIcon,
   ChevronUpIcon,
+} from '../../core-components/themed';
+import {
   PlusIcon,
   MinusIcon,
-} from '../../core-components/themed';
+} from 'lucide-react-native';
 import {
   AppProvider,
   CodePreview,
@@ -240,7 +242,7 @@ The borderRadius prop can be used to create rounded corners for both the Accordi
       code: `
 function App(){
     return (
-          <Accordion m="$5" width="80%" maxWidth={640} shadowColor="transparent">
+          <Accordion m="$5" width="80%" maxWidth={640} shadowColor="transparent" bg="$white" $dark-bg="$black" borderRadius='$lg'>
       <AccordionItem value="item-1" borderRadius="$lg">
         <AccordionHeader>
           <AccordionTrigger sx={{
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
index 81913bab11..db0fb89985 100644
--- a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
@@ -193,7 +193,7 @@ This section provides a comprehensive reference list for the component props, de
 
 It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -414,7 +414,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 #### ActionsheetBackdrop
 
@@ -427,7 +427,7 @@ It inherits all the properties of [@legendapp/motion's](https://legendapp.com/op
 **Descendants Styling Props**
 Props to style child components.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -454,7 +454,7 @@ Props to style child components.
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 #### ActionsheetDragIndicatorWrapper
 
@@ -471,7 +471,7 @@ It inherits all the properties of React Native's [Pressable](https://reactnative
 **Descendants Styling Props**
 Props to style child components.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -508,7 +508,7 @@ Props to style child components.
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 #### ActionsheetItemText
 
diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
index 05961e2c49..5a2df24473 100644
--- a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
@@ -30,9 +30,13 @@ import {
   ButtonGroup,
   Center,
   HStack,
-  AlertTriangleIcon,
-  Text, CheckCircleIcon,Heading, Icon, AlertCircleIcon
+  Text,
+  CheckCircleIcon,
+  Heading, 
+  Icon, 
+  AlertCircleIcon
 } from '../../core-components/themed';
+import {AlertTriangleIcon} from 'lucide-react-native';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
diff --git a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx
index 7a6ac491fe..1dcfaa8905 100644
--- a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx
@@ -27,7 +27,6 @@ import {
   Text,
   Icon,
   Heading,
-  User,
 } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
@@ -38,6 +37,7 @@ import {
   InlineCode,
   CollapsibleCode
 } from '@gluestack/design-system';
+import { User } from 'lucide-react-native';
 import Wrapper from '../../core-components/themed/Wrapper';
 
 This is an illustration of **Avatar** component.
diff --git a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx
index 92552fd270..d7df0507d7 100644
--- a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx
@@ -37,6 +37,7 @@ import {
   Button,
   ButtonText,
   Badge,
+  Text,
 } from '../../core-components/themed';
 import {
   PaintBucket,
@@ -48,7 +49,6 @@ import {
 import {
   AppProvider,
   CodePreview,
-  Text,
   Table,
   TableContainer,
   InlineCode,
@@ -336,7 +336,6 @@ A Badge component used with a menu adds a visual indicator, such as a badge, to
               </Button>
             );
           }}
-          bg='$white'
         >
           <MenuItem key="Community" textValue="Community">
             <HStack space="sm" alignItems="center">
diff --git a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx
index d6b2448ed2..8a066a0259 100644
--- a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx
@@ -22,7 +22,6 @@ import {
   CheckboxIcon,
   CheckboxLabel,
   Text,
-  RemoveIcon,
   FormControl,
   Icon,
   CheckIcon,
@@ -34,7 +33,6 @@ import {
 } from '../../core-components/themed';
 import { useState, useRef } from 'react';
 import { transformedCode } from '../../utils';
-
 import {
   AppProvider,
   CodePreview,
@@ -54,7 +52,7 @@ This is an illustration of **Checkbox** component.
     metaData={{
       code: `
           <Checkbox   {...props}  >
-            <CheckboxIndicator mr="$2">
+            <CheckboxIndicator >
               <CheckboxIcon as={CheckIcon}/>
             </CheckboxIndicator>
             <CheckboxLabel>Label</CheckboxLabel>
@@ -144,7 +142,7 @@ This section provides a comprehensive reference list for the component props, de
 
 Contains all Checkbox related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -331,12 +329,12 @@ Contains all Checkbox related layout style props and actions. It inherits all th
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 **Descendants Styling Props**
 Props to style child components.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -383,7 +381,7 @@ Props to style child components.
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 #### CheckboxIndicator
 
@@ -401,7 +399,7 @@ Contains all Label related layout style props and actions. It inherits all the p
 
 Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -504,7 +502,7 @@ Contains all Group related layout style props and actions. It inherits all the p
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 ### Features
 
@@ -541,7 +539,7 @@ Checkbox component is created using Pressable component from react-native. It ex
 
 #### Checkbox
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -574,7 +572,7 @@ Checkbox component is created using Pressable component from react-native. It ex
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 ### Examples
 
@@ -598,19 +596,19 @@ Checkbox provide a mutually exclusive selection mechanism, allowing users to cho
       }}>
                 <VStack space="3xl">
                   <Checkbox   value="Eng">
-                        <CheckboxIndicator mr="$2">
+                        <CheckboxIndicator >
                           <CheckboxIcon as={CheckIcon}/>
                         </CheckboxIndicator>
                         <CheckboxLabel>Framer</CheckboxLabel>
                   </Checkbox>
                   <Checkbox value="invison">
-                      <CheckboxIndicator mr="$2">
+                      <CheckboxIndicator >
                         <CheckboxIcon as={CheckIcon}/>
                       </CheckboxIndicator>
                       <CheckboxLabel>Invision Studio</CheckboxLabel>
                   </Checkbox>
                   <Checkbox  value="adobe">
-                    <CheckboxIndicator mr="$2">
+                    <CheckboxIndicator >
                       <CheckboxIcon as={CheckIcon}/>
                     </CheckboxIndicator>
                     <CheckboxLabel>Adobe XD</CheckboxLabel>
@@ -659,19 +657,19 @@ A horizontal component incorporating a checkbox allows for intuitive and space-e
       }}>
                 <HStack space="2xl">
                   <Checkbox value="Illustration">
-                    <CheckboxIndicator mr="$2">
+                    <CheckboxIndicator >
                       <CheckboxIcon as={CheckIcon}/>
                     </CheckboxIndicator>
                     <CheckboxLabel>Illustration</CheckboxLabel>
                   </Checkbox>
                   <Checkbox value="Animation">
-                    <CheckboxIndicator  mr="$2">
+                    <CheckboxIndicator  >
                       <CheckboxIcon as={CheckIcon}/>
                     </CheckboxIndicator>
                     <CheckboxLabel>Animation</CheckboxLabel>
                   </Checkbox>
                   <Checkbox value="Typography">
-                    <CheckboxIndicator mr="$2">
+                    <CheckboxIndicator >
                       <CheckboxIcon as={CheckIcon}/>
                     </CheckboxIndicator>
                     <CheckboxLabel>Typography</CheckboxLabel>
@@ -720,7 +718,7 @@ A checkbox component with help text provides informative guidance alongside sele
                <VStack space="2xl">
             <Box>
               <Checkbox value="Design">
-                <CheckboxIndicator mr="$2">
+                <CheckboxIndicator >
                    <CheckboxIcon as={CheckIcon}/>
                 </CheckboxIndicator>
                 <CheckboxLabel >Design</CheckboxLabel>
@@ -729,7 +727,7 @@ A checkbox component with help text provides informative guidance alongside sele
             </Box>
             <Box>
               <Checkbox value="Marketing">
-                <CheckboxIndicator mr="$2">
+                <CheckboxIndicator >
                   <CheckboxIcon as={CheckIcon}/>
                 </CheckboxIndicator>
                 <CheckboxLabel>Marketing</CheckboxLabel>
@@ -778,19 +776,19 @@ A checkbox component integrated with form control enhances the user experience b
            <VStack space="sm">
               <Heading size="sm" >Sign up for newsletters</Heading>
               <Checkbox >
-                  <CheckboxIndicator mr="$2">
+                  <CheckboxIndicator >
                      <CheckboxIcon as={CheckIcon}/>
                   </CheckboxIndicator>
                 <CheckboxLabel>Daily Bits</CheckboxLabel>
               </Checkbox>
               <Checkbox >
-                <CheckboxIndicator mr="$2">
+                <CheckboxIndicator >
                   <CheckboxIcon as={CheckIcon}/>
                </CheckboxIndicator>
                  <CheckboxLabel>Event Updates</CheckboxLabel>
               </Checkbox>
               <Checkbox >
-                <CheckboxIndicator mr="$2">
+                <CheckboxIndicator >
                   <CheckboxIcon as={CheckIcon}/>
                 </CheckboxIndicator>
                  <CheckboxLabel>Sponsorship</CheckboxLabel>
@@ -901,13 +899,13 @@ A controlled component architecture incorporates a checkbox component, allowing
           }}>
            <VStack space="md">
                   <Checkbox  value="UX Research">
-                    <CheckboxIndicator mr="$2">
+                    <CheckboxIndicator >
                       <CheckboxIcon as={CheckIcon}/>
                     </CheckboxIndicator>
                   <CheckboxLabel>UX Research</CheckboxLabel>
                 </Checkbox>
                  <Checkbox  value="Software">
-                    <CheckboxIndicator mr="$2">
+                    <CheckboxIndicator >
                       <CheckboxIcon as={CheckIcon}/>
                     </CheckboxIndicator>
                   <CheckboxLabel>Software Development</CheckboxLabel>
@@ -958,13 +956,13 @@ function App() {
           <CheckboxGroup  ref={radioRef} >
           <VStack space="md">
                   <Checkbox   onChange={handleCheckboxChange}  value="Apartments">
-                    <CheckboxIndicator   mr="$2">
+                    <CheckboxIndicator   >
                         <CheckboxIcon as={CheckIcon}/>
                     </CheckboxIndicator>
                      <CheckboxLabel>Apartments</CheckboxLabel>
                   </Checkbox>
                    <Checkbox   onChange={handleCheckboxChange}  value="Residents">
-                    <CheckboxIndicator  mr="$2">
+                    <CheckboxIndicator  >
                         <CheckboxIcon as={CheckIcon}/>
                     </CheckboxIndicator>
                      <CheckboxLabel>Residents</CheckboxLabel>
@@ -1018,7 +1016,7 @@ function CheckboxExample(){
             isDisabled={true}
               value="Label 1"
             >
-              <CheckboxIndicator mr="$2">
+              <CheckboxIndicator >
                 <CheckboxIcon as={CheckIcon}/>
               </CheckboxIndicator>
               <CheckboxLabel>Label 1</CheckboxLabel>
@@ -1026,7 +1024,7 @@ function CheckboxExample(){
             <Checkbox
               value="Label 2"
             >
-              <CheckboxIndicator mr="$2">
+              <CheckboxIndicator >
                 <CheckboxIcon as={CheckIcon}/>
               </CheckboxIndicator>
               <CheckboxLabel>Label 2</CheckboxLabel>
diff --git a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx
index a4efb0c3ed..64c39c642a 100644
--- a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx
@@ -359,20 +359,6 @@ Fab component is created using Pressable component from react-native. It extends
   </TableContainer>
 </Wrapper>
 
-## Spec Doc
-
-Explore the comprehensive details of the Fab in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
-
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5970%253A34594%26type%3Ddesign%26node-id%3D6003-25845%26viewport%3D1146%252C245%252C0.06%26t%3DhEvNAQ5keRN1oIyi-1%26scaling%3Dcontain%26starting-point-node-id%3D6003%253A25845%26mode%3Ddesign"
-  allowFullScreen
-/> 
-
 ### Examples
 
 The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
@@ -492,7 +478,7 @@ A Fab component with an icon and text combines a visual icon with accompanying t
           $dark-bg='$backgroundDark900'
           $dark-borderColor='$borderDark800'
         >
-          <Fab bg="$indigo600" height="$9" top='$4'>
+          <Fab bg="$primary600" height="$9" top='$4'>
             <FabIcon as={SearchIcon}  mr="$1.5"/>
             <FabLabel >Search</FabLabel>
           </Fab>
@@ -694,10 +680,10 @@ A Fab component with custom placement allows for flexible positioning of the but
               h={185}
               w={416}
               source={{
-                uri: 'https://drive.google.com/uc?export=view&id=1h1e89BtQCp6JdGiKo92dlf5bjHC8hLjt',
+                uri: 'https://images.pexels.com/photos/1937743/pexels-photo-1937743.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
               }}
               fallbackSource={{
-                uri: 'https://drive.google.com/uc?export=view&id=1h1e89BtQCp6JdGiKo92dlf5bjHC8hLjt',
+                uri: 'https://images.pexels.com/photos/1937743/pexels-photo-1937743.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
               }}
             />
           </Box>
@@ -720,7 +706,7 @@ A Fab component with custom placement allows for flexible positioning of the but
               </Text>
             </Link>
           </VStack>
-          <Fab bg='$pink600' size='lg' right='$4' bottom='$20'>
+          <Fab bg='$primary600' size='lg' right='$4' bottom='$20'>
             {/* ShoppingCartIcon is imported from 'lucide-react-native' */}
             <FabIcon as={ShoppingCartIcon} h='$4' w='$4'/>
           </Fab>
diff --git a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx
index 1d3c2e9591..4d6895bdde 100644
--- a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx
@@ -688,7 +688,7 @@ The Checkbox Component can be incorporated within the FormControl.
           <CheckboxGroup my='$2'>
             <VStack space="sm">
               <Checkbox size="sm" value="Mango">
-                <CheckboxIndicator mr="$2">
+                <CheckboxIndicator>
                   <CheckboxIcon>
                     <CheckIcon />
                   </CheckboxIcon>
@@ -698,7 +698,7 @@ The Checkbox Component can be incorporated within the FormControl.
                 </CheckboxLabel>
               </Checkbox>
               <Checkbox size="sm" value="Apple">
-                <CheckboxIndicator mr="$2">
+                <CheckboxIndicator>
                   <CheckboxIcon>
                     <CheckIcon />
                   </CheckboxIcon>
@@ -708,7 +708,7 @@ The Checkbox Component can be incorporated within the FormControl.
                 </CheckboxLabel>
               </Checkbox>
               <Checkbox size="sm" value="Orange">
-                <CheckboxIndicator mr="$2">
+                <CheckboxIndicator>
                   <CheckboxIcon>
                     <CheckIcon />
                   </CheckboxIcon>
@@ -845,7 +845,7 @@ Inline forms can utilize FormControl for seamless integration and enhanced funct
             </Select>
           </FormControl>
           <FormControl>
-            <Button bg='$darkBlue600'>
+            <Button bg='$primary600'>
               <ButtonText fontSize='$sm' fontWeight='$medium'>
                 Next
               </ButtonText>
@@ -906,7 +906,7 @@ Modal or other Overlay components can utilize FormControl for state management a
             <Button
               py='$2.5'
               px='$3'
-              bg='$darkBlue600'
+              bg='$primary600'
               onPress={()=>{
                 setShowModal(true);
               }}
diff --git a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx
index edbf6ba8c0..336cd7d2d6 100644
--- a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx
@@ -197,9 +197,9 @@ An HStack component with the reversed prop reverses the order of horizontally st
     metaData={{
       code: `
         <HStack space="md" reversed>
-          <Box w='$20' h='$20' bg='$blue300' />
-          <Box w='$20' h='$20' bg='$blue400' />
-          <Box w='$20' h='$20' bg='$blue500' />
+          <Box w='$20' h='$20' bg='$primary200' />
+          <Box w='$20' h='$20' bg='$primary400' />
+          <Box w='$20' h='$20' bg='$primary600' />
         </HStack>
       `,
       transformCode: (code) => {
diff --git a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
index c22f8bf28d..7c7c30a92f 100644
--- a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
@@ -544,7 +544,7 @@ The Input component integrates with an icon and a button, providing users with a
                     setShowModal(false);
                   }}
                 >
-                  <ButtonText color='$white'>
+                  <ButtonText>
                     Save
                   </ButtonText>
                 </Button>
diff --git a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx
index 5bbca771bf..a7b379db1e 100644
--- a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx
@@ -199,7 +199,7 @@ This section provides a comprehensive reference list for the component props, de
 
 Contains all View related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -382,12 +382,12 @@ Contains all View related layout style props and actions. It inherits all the pr
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 **Descendants Styling Props**
 Props to style child components.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -414,7 +414,7 @@ Props to style child components.
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 #### ModalBackdrop
 
@@ -424,7 +424,7 @@ It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) c
 
 It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. You can use any declarative animation library you prefer.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -463,7 +463,7 @@ It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.V
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 #### ModalHeader
 
@@ -476,7 +476,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
 **Descendants Styling Props**
 Props to style child components.
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -514,7 +514,7 @@ Props to style child components.
     </Table>
 
   </TableContainer>
-</Wrapper>
+</>
 
 #### ModalBody
 
@@ -534,7 +534,7 @@ Modal component is created using View component from react-native. It extends al
 
 #### Modal
 
-<Wrapper>
+<>
   <TableContainer>
     <Table>
       <Table.THead>
@@ -567,7 +567,7 @@ Modal component is created using View component from react-native. It extends al
       </Table.TBody>
     </Table>
   </TableContainer>
-</Wrapper>
+</>
 
 ### Examples
 
@@ -797,11 +797,10 @@ A versatile modal component offering different sizes to accommodate various cont
         return (
             <Center h={400}>
             <VStack space='md'>
-            {sizes.map((currentSize) => {
-                return <Button key={currentSize} onPress={() => handleClick(currentSize)}>
-                  <ButtonText>{currentSize}</ButtonText>
-                </Button>
-            })}
+            {sizes.map((currentSize) =>  (<Button key={currentSize} onPress={() => handleClick(currentSize)} >
+                  <ButtonText textAlign='center'>{currentSize}</ButtonText>
+                </Button>)
+            )}
                 </VStack>
                 <Modal
                   isOpen={showModal}
diff --git a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx
index a48efeedf5..2ffe636394 100644
--- a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx
@@ -952,8 +952,7 @@ A popover component can enhance the avatar by providing additional information a
                       </Text>
                     </HStack>
                   </VStack>
-                  <Button bg='$darkBlue700' 
-                  $dark-bg='$darkBlue500'>
+                  <Button bg='$primary700'>
                     <ButtonText>View Profile</ButtonText>
                   </Button>
                 </VStack>
diff --git a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
index 174f6ff018..4befc38046 100644
--- a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx
@@ -14,8 +14,8 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Forms/Pressable" />
 
-import { Pressable } from '../../core-components/themed';
-import { AppProvider, CodePreview,CollapsibleCode ,Text} from '@gluestack/design-system';
+import { Pressable, Text } from '../../core-components/themed';
+import { AppProvider, CodePreview,CollapsibleCode} from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
 import Wrapper from '../../core-components/themed/Wrapper';
 
@@ -100,7 +100,7 @@ You can change the child elements according to the states of Pressable component
       code: `
  <Pressable p="$16" bg="$primary500"  $hover-bg="$primary400">
    {({ pressed }) => (
-        <Text color={pressed ? 'pink' : 'yellow'}>PRESSABLE</Text>
+        <Text color={pressed ? '$primary200' : '$primary0'}>PRESSABLE</Text>
       )}
 </Pressable>
 `,
diff --git a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx
index f3e4e9a5dd..a7cb2ecffa 100644
--- a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx
@@ -17,7 +17,6 @@ import { Meta } from '@storybook/addon-docs';
 import {
   AppProvider,
   CodePreview,
-  Text,
   Table,
   TableContainer,
   InlineCode,
@@ -29,6 +28,7 @@ import {
   VStack,
   Box,
   Heading,
+  Text
 } from '../../core-components/themed';  
 import { transformedCode } from '../../utils';
 import Wrapper from '../../core-components/themed/Wrapper';
diff --git a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx
index cced321ef1..e37bfdbe87 100644
--- a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx
@@ -21,15 +21,16 @@ import {
   useToast,
   Button,
   ButtonText,
+  Text
 } from '../../core-components/themed';
-import { CheckIcon, MessageCircle } from '@gluestack-ui/themed';
+import { CheckIcon } from '@gluestack-ui/themed';
+import { AlertTriangleIcon,MessageCircle } from 'lucide-react-native';
 import {
   Icon,
   CloseIcon,
   VStack,
-  AlertTriangleIcon,
   Pressable,
-  Center,
+  Center
 } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
@@ -37,7 +38,6 @@ import {
   CodePreview,
   Table,
   TableContainer,
-  Text,
   InlineCode,
   CollapsibleCode
 } from '@gluestack/design-system';
@@ -868,7 +868,7 @@ A Toast component with preserve toast functionality retains the notification on
                     const toastId = "toast-" + id;
                     return (
                       <Toast bg='$error700' nativeID={toastId} p='$3'>
-                        <Icon as={AlertTriangleIcon} color='$white' mt='$1' mr='$3' />
+                        <Icon as={AlertTriangleIcon} color='$white' mt='$1' mr='$3'/>
                         <VStack space='xs'>
                         <ToastTitle color='$textLight50' >Account Security Alert</ToastTitle>
                         <ToastDescription color='$textLight50'>Your account password was recently changed.
diff --git a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
index 5d59c00fd2..0bc514d9da 100644
--- a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx
@@ -26,19 +26,19 @@ import {
   HStack,
   Box, 
   Heading,
-  Edit,
   Center,
   VStack,
   Command, 
-  Icon 
+  Icon,
+  Text
 } from '../../core-components/themed';
+import { Edit } from 'lucide-react-native'
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
   CodePreview,
   Table,
   TableContainer,
-  Text,
   InlineCode,
   CollapsibleCode
 } from '@gluestack/design-system';
diff --git a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx
index 1de652a0ea..6bd84b957a 100644
--- a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx
+++ b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx
@@ -14,14 +14,13 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Layout/VStack" />
 
-import { Box, VStack } from '../../core-components/themed';
+import { Box, VStack, Text } from '../../core-components/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
   CodePreview,
   Table,
   TableContainer,
-  Text,
   InlineCode,
   CollapsibleCode,
 } from '@gluestack/design-system';
@@ -188,9 +187,9 @@ A VStack component with the reversed prop reverses the order of vertically stack
     metaData={{
       code: `
         <VStack space="md">
-          <Box w='$20' h='$20' bg='$blue300' />
-          <Box w='$20' h='$20' bg='$blue400' />
-          <Box w='$20' h='$20' bg='$blue500' />
+          <Box w='$20' h='$20' bg='$primary200' />
+          <Box w='$20' h='$20' bg='$primary400' />
+          <Box w='$20' h='$20' bg='$primary600' />
         </VStack>
       `,
       transformCode: (code) => {
diff --git a/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx b/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
index 83ab1dcd38..9aefa3232a 100644
--- a/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/avatar/index.tsx
@@ -170,12 +170,9 @@ const StyledImage = styled(
   }
 );
 
-const StyledText = styled(
+const StyledFallbackText = styled(
   Text,
   {
-    color: '$text700',
-    // flex: 1,
-    fontWeight: '$normal',
     fontFamily: '$body',
     fontStyle: 'normal',
     letterSpacing: '$md',
@@ -266,17 +263,6 @@ const StyledText = styled(
       },
     },
 
-    defaultProps: {
-      size: 'md',
-    },
-  },
-  {
-    ancestorStyle: ['_text'],
-  }
-);
-const StyledFallbackText = styled(
-  StyledText,
-  {
     color: '$text0',
     fontWeight: '$semibold',
     props: {
diff --git a/example/storybook-nativewind/src/core-components/themed/popover/index.tsx b/example/storybook-nativewind/src/core-components/themed/popover/index.tsx
index b556ae780f..c028680638 100644
--- a/example/storybook-nativewind/src/core-components/themed/popover/index.tsx
+++ b/example/storybook-nativewind/src/core-components/themed/popover/index.tsx
@@ -35,7 +35,28 @@ const StyledRoot = styled(
   }
 );
 
-const StyledArrow = styled(AnimatedView, {});
+const StyledArrow = styled(AnimatedView, {
+  'bg': '$background50',
+  'zIndex': 1,
+  'position': 'absolute',
+  'overflow': 'hidden',
+  'h': '$3.5',
+  'w': '$3.5',
+  ':transition': {
+    type: 'spring',
+    damping: 18,
+    stiffness: 250,
+    mass: 0.9,
+    opacity: {
+      type: 'timing',
+      duration: 50,
+      delay: 50,
+    },
+  },
+  'props': {
+    softShadow: '3',
+  },
+});
 
 const StyledBackdrop = styled(AnimatedPressable, {
   ':initial': {