diff --git a/docs/appDrawer.md b/docs/appDrawer.md
index 7e0afecbd..3fa173b72 100644
--- a/docs/appDrawer.md
+++ b/docs/appDrawer.md
@@ -6,52 +6,65 @@ title: App drawer
 Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it.
 
 ```SnackPlayer name=AppDrawer
-import React from "react";
-import { IconButton, SimpleGrid, Icon, NativeBaseProvider } from "native-base";
-import {MaterialIcons} from '@expo/vector-icons';
+import React from 'react';
+import {
+  IconButton,
+  SimpleGrid,
+  Icon,
+  NativeBaseProvider,
+  Box,
+} from 'native-base';
+import { MaterialIcons } from '@expo/vector-icons';
 
-function AppDrawer(){
+function AppDrawer() {
   const icons = [
-    "bolt",
-    "build",
-    "cloud",
-    "delivery-dining",
-    "favorite",
-    "music-note",
-    "invert-colors-on",
-    "navigation",
-    "settings",
-    "sports-esports",
-    "shield",
-    "photo-camera",
-    "network-wifi",
-    "nightlight-round",
-    "flight",
-    "extension",
-    "duo",
-    "album",
-    "access-alarm",
-    "forum",
+    { name: 'bolt', bg: 'amber.600' },
+    { name: 'build', bg: 'emerald.600' },
+    { name: 'cloud', bg: 'blue.600' },
+    { name: 'delivery-dining', bg: 'orange.600' },
+    { name: 'favorite', bg: 'rose.600' },
+    { name: 'music-note', bg: 'violet.600' },
+    { name: 'invert-colors-on', bg: 'lime.600' },
+    { name: 'navigation', bg: 'indigo.600' },
+    { name: 'settings', bg: 'pink.600' },
+    { name: 'sports-esports', bg: 'coolGray.600' },
+    { name: 'shield', bg: 'darkBlue.600' },
+    { name: 'photo-camera', bg: 'fuchsia.600' },
+    { name: 'network-wifi', bg: 'amber.500' },
+    { name: 'nightlight-round', bg: 'violet.800' },
+    { name: 'flight', bg: 'blue.800' },
+    { name: 'extension', bg: 'indigo.600' },
+    { name: 'duo', bg: 'orange.600' },
+    { name: 'album', bg: 'rose.600' },
+    { name: 'access-alarm', bg: 'emerald.600' },
+    { name: 'forum', bg: 'indigo.600' },
   ];
 
-  return <SimpleGrid columns="5" spacingY="4" spacingX="4">
+  return (
+    <SimpleGrid columns={4} spacingY={8} spacingX={4}>
       {icons.map((icon) => (
         <IconButton
           borderRadius="full"
-          colorScheme="indigo"
+          bg={icon.bg}
           variant="solid"
-          p="4"
-          icon={<Icon name={icon} as={MaterialIcons} size='sm' />}
+          p="3"
+          icon={
+            <Icon color="white" name={icon.name} as={MaterialIcons} size="sm" />
+          }
         />
       ))}
     </SimpleGrid>
+  );
 }
 
 export default function () {
   return (
-  <NativeBaseProvider>
-    <AppDrawer/>
-  </NativeBaseProvider>
+    <NativeBaseProvider>
+      <Box alignItems="center" pt="8" flex={1}>
+        <AppDrawer />
+      </Box>
+    </NativeBaseProvider>
   );
 }
+
 ```
diff --git a/docs/breakpoints.md b/docs/breakpoints.md
index c7ed47991..563075139 100644
--- a/docs/breakpoints.md
+++ b/docs/breakpoints.md
@@ -19,19 +19,113 @@ breakpoints = {
 
 `useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size.
 
-```jsx
+```SnackPlayer name=useBreakpointValue
 import React from 'react';
-import { Box, useBreakpointValue } from 'native-base';
-export default () => {
-  const color = useBreakpointValue({
-    base: 'red.200',
-    sm: 'blue.200',
-    md: 'blue.200',
+import {
+  Factory,
+  Button,
+  Stack,
+  NativeBaseProvider,
+  Center,
+} from 'native-base';
+import { TextInput } from 'react-native';
+
+import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base';
+import { FontAwesome, Foundation, Feather } from '@expo/vector-icons';
+import { View } from 'react-native';
+
+export const UseBreakpointValueExample = () => {
+  const flexDir = useBreakpointValue({
+    base: 'column',
+    lg: 'row',
   });
   return (
-    <Box bg={color} w={'100px'}>
-      This is a box
-    </Box>
+    <VStack space={10} alignItems="center" justifyContent="center">
+      <Heading>Why us?</Heading>
+      <View style={{ flexDirection: flexDir }}>
+        <VStack
+          m="3"
+          w="140"
+          borderRadius="xl"
+          p="3"
+          bg="cyan.200"
+          space={2}
+          alignItems="center"
+          justifyContent="center">
+          <Icon
+            as={Foundation}
+            name="shield"
+            size="sm"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}
+          />
+          <Text
+            fontSize="lg"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}>
+            Secure Checkout
+          </Text>
+        </VStack>
+        <VStack
+          m="3"
+          w="140"
+          borderRadius="xl"
+          p="3"
+          bg="cyan.200"
+          space={2}
+          alignItems="center"
+          justifyContent="center">
+          <Icon
+            as={Foundation}
+            name="shield"
+            size="sm"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}
+          />
+          <Text
+            fontSize="lg"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}>
+            Secure Checkout
+          </Text>
+        </VStack>
+        <VStack
+          m="3"
+          w="140"
+          borderRadius="xl"
+          p="3"
+          bg="cyan.200"
+          space={2}
+          alignItems="center"
+          justifyContent="center">
+          <Icon
+            as={Feather}
+            name="clock"
+            size="sm"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}
+          />
+          <Text
+            fontSize="lg"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}>
+            Fast Turn Around
+          </Text>
+        </VStack>
+      </View>
+    </VStack>
   );
 };
+
+// Example template which wraps component with NativeBaseProvider
+export default function () {
+  return (
+    <NativeBaseProvider>
+      <Center flex="1">
+        <UseBreakpointValueExample />
+      </Center>
+    </NativeBaseProvider>
+  );
+}
+
 ```
diff --git a/docs/buildingFooterTabs.md b/docs/buildingFooterTabs.md
index b696cf4a0..c4ae07db8 100644
--- a/docs/buildingFooterTabs.md
+++ b/docs/buildingFooterTabs.md
@@ -8,8 +8,8 @@ With NativeBase v3 we have removed FooterTab components because as it's very sim
 ## Example
 
 ```SnackPlayer name=Footer dependencies=react-native-linear-gradient
-import React from 'react';
 
+import React from 'react';
 import {
   NativeBaseProvider,
   Box,
@@ -25,50 +25,53 @@ import {
   Center,
   Pressable,
 } from 'native-base';
-import { MaterialCommunityIcons , MaterialIcons} from '@expo/vector-icons';
+import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
 
 export default function App() {
   const [selected, setSelected] = React.useState(1);
   return (
     <NativeBaseProvider>
-       <Box flex="1" bg="white" safeAreaTop>
-        <Center flex="1">
-        </Center>
-        <HStack bg="primary.500" alignItems="center" safeAreaBottom shadow="6">
+      <Box flex="1" bg="white" safeAreaTop>
+        <Center flex="1"></Center>
+        <HStack bg="indigo.600" alignItems="center" safeAreaBottom shadow={6}>
           <Pressable
             cursor="pointer"
             opacity={selected === 0 ? 1 : 0.5}
-            py="2"
+            py="3"
             flex="1"
-            onPress={() => setSelected(0)}
-          >
+            onPress={() => setSelected(0)}>
             <Center>
               <Icon
                 mb="1"
-                as={<MaterialCommunityIcons name="heart" />}
+                as={
+                  <MaterialCommunityIcons
+                    name={selected === 0 ? 'home' : 'home-outline'}
+                  />
+                }
                 color="white"
-                size="xs"
+                size="sm"
               />
-
-              <Text color="white" fontSize="14">Favorites</Text>
+              <Text color="white" fontSize="12">
+                Home
+              </Text>
             </Center>
           </Pressable>
           <Pressable
             cursor="pointer"
             opacity={selected === 1 ? 1 : 0.5}
-            py="2"
-            flex="1"
-            onPress={() => setSelected(1)}
-          >
+            py={2}
+            flex={1}
+            onPress={() => setSelected(1)}>
             <Center>
               <Icon
                 mb="1"
-                as={<MaterialCommunityIcons name="music-note" />}
+                as={<MaterialIcons name="search" />}
                 color="white"
-                size="xs"
+                size="sm"
               />
-
-              <Text color="white" fontSize="14">Music</Text>
+              <Text color="white" fontSize="12">
+                Search
+              </Text>
             </Center>
           </Pressable>
           <Pressable
@@ -76,17 +79,21 @@ export default function App() {
             opacity={selected === 2 ? 1 : 0.6}
             py="2"
             flex="1"
-            onPress={() => setSelected(2)}
-          >
+            onPress={() => setSelected(2)}>
             <Center>
               <Icon
-                mb="1"
-                as={<MaterialIcons name="location-pin" />}
+                mb={1}
+                as={
+                  <MaterialCommunityIcons
+                    name={selected === 2 ? 'cart' : 'cart-outline'}
+                  />
+                }
                 color="white"
-                size="xs"
+                size="sm"
               />
-
-              <Text color="white" fontSize="14">Places</Text>
+              <Text color="white" fontSize={12}>
+                Cart
+              </Text>
             </Center>
           </Pressable>
           <Pressable
@@ -94,16 +101,21 @@ export default function App() {
             opacity={selected === 3 ? 1 : 0.5}
             py="2"
             flex="1"
-            onPress={() => setSelected(3)}
-          >
+            onPress={() => setSelected(3)}>
             <Center>
               <Icon
-                mb="1"
-                as={<MaterialCommunityIcons name="newspaper" />}
+                mb={1}
+                as={
+                  <MaterialCommunityIcons
+                    name={selected === 3 ? 'account' : 'account-outline'}
+                  />
+                }
                 color="white"
-                size="xs"
+                size="sm"
               />
-              <Text color="white" fontSize="14">News</Text>
+              <Text color="white" fontSize="12">
+                Account
+              </Text>
             </Center>
           </Pressable>
         </HStack>
@@ -112,4 +124,5 @@ export default function App() {
   );
 }
 
+
 ```
diff --git a/docs/buildingSearchBar.md b/docs/buildingSearchBar.md
index 3949946af..918ecc8a7 100644
--- a/docs/buildingSearchBar.md
+++ b/docs/buildingSearchBar.md
@@ -13,34 +13,62 @@ Here are some examples to show how easily and quickly we can create so many type
 ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b4c4662d-8a9c-48a2-817d-000ff8f5f6b6/Screenshot_2021-01-18_at_7.51.08_PM.png) -->
 
 ```SnackPlayer name=Search%20Bar
-import React from "react";
-import { VStack, Input, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box } from "native-base";
+import React from 'react';
+import {
+  VStack,
+  Input,
+  Button,
+  IconButton,
+  Icon,
+  Text,
+  NativeBaseProvider,
+  Center,
+  Box,
+  Divider,
+  Heading,
+} from 'native-base';
 import { Ionicons, MaterialIcons } from '@expo/vector-icons';
 import { FontAwesome5 } from '@expo/vector-icons';
 
-
-function SearchBar(){
+function SearchBar() {
   return (
-    <VStack space="8" width="100%">
-      <VStack width="100%" space="2">
-        <Box>Cupertino</Box>
+    <VStack
+      space={5}
+      width="100%"
+      divider={
+        <Box px="2">
+          <Divider />
+        </Box>
+      }>
+      <VStack width="100%" space={5} alignItems="center">
+        <Heading fontSize="lg">Cupertino</Heading>
         <Input
           placeholder="Search"
           variant="filled"
           width="100%"
-          bg="gray.200"
+          bg="gray.100"
           borderRadius="10"
           py="1"
           px="2"
+          placeholderTextColor="gray.500"
+          _hover={{ bg: 'gray.200', borderWidth: 0 }}
+          borderWidth="0"
           _web={{
-            _focus: { borderColor: 'muted.300', style: { boxShadow: 'none' } },
-            }}
-          InputLeftElement={<Icon size='sm' ml="2" size="5" color="gray.400" as={<Ionicons name="ios-search" />} />}
+            _focus: { style: { boxShadow: 'none' } },
+          }}
+          InputLeftElement={
+            <Icon
+              ml="2"
+              size="5"
+              color="gray.500"
+              as={<Ionicons name="ios-search" />}
+            />
+          }
         />
       </VStack>
 
-      <VStack width="100%" space="2">
-        <Box>Material</Box>
+      <VStack width="100%" space={5} alignItems="center">
+        <Heading fontSize="lg">Material</Heading>
         <Input
           placeholder="Search People & Places"
           bg="#fff"
@@ -49,24 +77,41 @@ function SearchBar(){
           py="3"
           px="1"
           fontSize="14"
-           _web={{
+          _web={{
             _focus: { borderColor: 'muted.300', style: { boxShadow: 'none' } },
-            }}
-          InputLeftElement={<Icon size='sm' m="2" size="6" color="gray.400" as={<MaterialIcons name="search" />} />}
-          InputRightElement={<Icon size='sm' m="2" size="6" color="gray.400" as={<MaterialIcons name="mic" />} />}
+          }}
+          InputLeftElement={
+            <Icon
+              m="2"
+              ml="3"
+              size="6"
+              color="gray.400"
+              as={<MaterialIcons name="search" />}
+            />
+          }
+          InputRightElement={
+            <Icon
+              m="2"
+              mr="3"
+              size="6"
+              color="gray.400"
+              as={<MaterialIcons name="mic" />}
+            />
+          }
         />
-        </VStack>
       </VStack>
-  )
+    </VStack>
+  );
 }
 
 export default function () {
   return (
     <NativeBaseProvider>
       <Center flex="1" px="2">
-        <SearchBar/>
+        <SearchBar />
       </Center>
     </NativeBaseProvider>
   );
 }
+
 ```
diff --git a/docs/buildingSwipeList.md b/docs/buildingSwipeList.md
index 208a39a7d..95dc270da 100644
--- a/docs/buildingSwipeList.md
+++ b/docs/buildingSwipeList.md
@@ -57,7 +57,7 @@ function Basic() {
     },
     {
       id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-      fullName: 'Sujitha Alexander',
+      fullName: 'Sujita Mathur',
       timeStamp: '11:11 PM',
       recentText: 'Cheer up, there!',
       avatarUrl:
@@ -82,7 +82,7 @@ function Basic() {
       id: '28694a0f-3da1-471f-bd96-142456e29d72',
       fullName: 'Kiara',
       timeStamp: '12:47 PM',
-      recentText: 'I will call him today.',
+      recentText: 'I will call today.',
       avatarUrl:
         'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU',
     },
@@ -116,17 +116,19 @@ function Basic() {
           borderColor="coolGray.200"
           pl="4"
           pr="5"
-          py="2">
+          py="2"
+          _dark={{ borderColor: 'gray.600' }}
+          >
           <HStack alignItems="center" space={3}>
             <Avatar size="48px" source={{ uri: item.avatarUrl }} />
             <VStack>
-              <Text color="coolGray.800" bold>
+              <Text color="coolGray.800"  _dark={{ color: 'warmGray.50' }}  bold>
                 {item.fullName}
               </Text>
-              <Text color="coolGray.500">{item.recentText}</Text>
+              <Text color="coolGray.600" _dark={{ color: 'warmGray.200' }}>{item.recentText}</Text>
             </VStack>
             <Spacer />
-            <Text fontSize="xs" color="coolGray.800" alignSelf="flex-start">
+            <Text fontSize="xs" color="coolGray.800"  _dark={{ color: 'warmGray.50' }} alignSelf="flex-start">
               {item.timeStamp}
             </Text>
           </HStack>
diff --git a/docs/interaction-styles.mdx b/docs/interaction-styles.mdx
index f1e1bb417..8c07bf6a5 100644
--- a/docs/interaction-styles.mdx
+++ b/docs/interaction-styles.mdx
@@ -22,15 +22,15 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on
 <NativeBaseProvider>
   <Box flex={1} mb={16}>
     <Pressable
-      _hover={{ bg: 'primary.400' }}
-      bg="primary.500"
+      _hover={{ bg: 'primary.700' }}
+      bg="primary.600"
       py={2}
       px={3}
-      rounded="md"
+      rounded="sm"
       alignSelf="center"
     >
       <Text textTransform="uppercase" fontWeight="bold" color="white">
-        Hover over me
+        Hover
       </Text>
     </Pressable>
   </Box>
@@ -38,11 +38,11 @@ Using `_hover` pseudo prop, we can customize the style of Pressable component on
 
 ```jsx title="Hover example"
 <Pressable
-  _hover={{ bg: 'primary.400' }}
-  bg="primary.500"
+  _hover={{ bg: 'primary.700' }}
+  bg="primary.600"
   py={2}
   px={3}
-  rounded="md"
+  rounded="sm"
   alignSelf="center"
 >
   <Text textTransform="uppercase" fontWeight="bold" color="white">
@@ -58,15 +58,15 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component
 <NativeBaseProvider>
   <Box flex={1} mb={16}>
     <Pressable
-      _pressed={{ bg: 'primary.700' }}
-      bg="primary.500"
+      _pressed={{ bg: 'primary.800' }}
+      bg="primary.600"
       py={2}
       px={3}
       alignSelf="center"
-      rounded="md"
+      rounded="sm"
     >
       <Text textTransform="uppercase" fontWeight="bold" color="white">
-        Press me
+        Pressed
       </Text>
     </Pressable>
   </Box>
@@ -74,15 +74,15 @@ Using `_pressed` pseudo prop, we can customize the style of Pressable component
 
 ```jsx title="Pressed example"
 <Pressable
-  _pressed={{ bg: 'primary.700' }}
-  bg="primary.500"
+  _pressed={{ bg: 'primary.800' }}
+  bg="primary.600"
   py={2}
-  rounded="md"
+  rounded="sm"
   px={3}
   alignSelf="center"
 >
   <Text textTransform="uppercase" fontWeight="bold" color="white">
-    Hover over me
+    Pressed
   </Text>
 </Pressable>
 ```
@@ -94,15 +94,19 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on
 <NativeBaseProvider>
   <Box flex={1} mb={16}>
     <Pressable
-      _focus={{ bg: 'secondary.500' }}
-      bg="primary.500"
-      rounded="md"
+      _focus={{
+        bg: 'primary.700',
+        borderColor: 'primary.400',
+        borderWidth: '2px',
+      }}
+      bg="primary.600"
+      rounded="sm"
       py={2}
       px={3}
       alignSelf="center"
     >
       <Text textTransform="uppercase" fontWeight="bold" color="white">
-        Try focusing me
+        Focus
       </Text>
     </Pressable>
   </Box>
@@ -110,15 +114,15 @@ Using `_focus` pseudo prop, we can customize the style of Pressable component on
 
 ```jsx title="Focus example"
 <Pressable
-  _focus={{ bg: 'secondary.500' }}
-  bg="primary.500"
-  rounded="md"
+  _focus={{ bg: 'primary.700', borderColor: 'primary.400', borderWidth: '2px' }}
+  bg="primary.600"
+  rounded="sm"
   py={2}
   px={3}
   alignSelf="center"
 >
   <Text textTransform="uppercase" fontWeight="bold" color="white">
-    Hover over me
+    Focus
   </Text>
 </Pressable>
 ```
@@ -131,45 +135,45 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
   <HStack space={4} justifyContent="center" alignItems="center" mb={8}>
     <VStack alignItems="center" space={2}>
       <Box
-        _web={{ bg: 'cyan.500' }}
-        bg="cyan.500"
-        rounded="md"
+        _web={{ bg: 'cyan.600' }}
+        bg="cyan.600"
+        rounded="sm"
         py={2}
         px={3}
         alignSelf="center"
       >
         <Text textTransform="uppercase" fontWeight="bold" color="white">
-          Primary
+          Save
         </Text>
       </Box>
       <Text color="white">Web</Text>
     </VStack>
     <VStack alignItems="center" space={2}>
       <Box
-        _android={{ bg: 'fuchsia.500' }}
-        bg="fuchsia.500"
-        rounded="md"
+        _android={{ bg: 'yellow.400' }}
+        bg="yellow.400"
+        rounded="sm"
         py={2}
         px={3}
         alignSelf="center"
       >
-        <Text textTransform="uppercase" fontWeight="bold" color="white">
-          Primary
+        <Text textTransform="uppercase" fontWeight="bold">
+          Save
         </Text>
       </Box>
       <Text color="white">Android</Text>
     </VStack>
     <VStack alignItems="center" space={2}>
       <Box
-        _ios={{ bg: 'blue.500' }}
-        bg="blue.500"
-        rounded="md"
+        _ios={{ bg: 'violet.500' }}
+        bg="violet.500"
+        rounded="sm"
         py={2}
         px={3}
         alignSelf="center"
       >
         <Text textTransform="uppercase" fontWeight="bold" color="white">
-          Primary
+          Save
         </Text>
       </Box>
       <Text color="white">iOS</Text>
@@ -181,42 +185,42 @@ Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or beh
 <HStack space={4} justifyContent="center" alignItems="center">
   <VStack alignItems="center" space={2}>
     <Box
-      _web={{ bg: 'cyan.500' }}
-      rounded="md"
+      _web={{ bg: 'cyan.600' }}
+      rounded="sm"
       py={2}
       px={3}
       alignSelf="center"
     >
       <Text textTransform="uppercase" fontWeight="bold" color="white">
-        Primary
+        Save
       </Text>
     </Box>
     <Text color="white">Web</Text>
   </VStack>
   <VStack alignItems="center" space={2}>
     <Box
-      _android={{ bg: 'fuchsia.500' }}
-      rounded="md"
+      _android={{ bg: 'yellow.400' }}
+      rounded="sm"
       py={2}
       px={3}
       alignSelf="center"
     >
-      <Text textTransform="uppercase" fontWeight="bold" color="white">
-        Primary
+      <Text textTransform="uppercase" fontWeight="bold">
+        Save
       </Text>
     </Box>
     <Text color="white">Android</Text>
   </VStack>
   <VStack alignItems="center" space={2}>
     <Box
-      _ios={{ bg: 'blue.500' }}
-      rounded="md"
+      _ios={{ bg: 'violet.500' }}
+      rounded="sm"
       py={2}
       px={3}
       alignSelf="center"
     >
       <Text textTransform="uppercase" fontWeight="bold" color="white">
-        Primary
+        Save
       </Text>
     </Box>
     <Text color="white">iOS</Text>
diff --git a/docs/loginsignupforms.md b/docs/loginsignupforms.md
index 75b491f6d..c576656e7 100644
--- a/docs/loginsignupforms.md
+++ b/docs/loginsignupforms.md
@@ -23,88 +23,63 @@ import {
   Icon,
   IconButton,
   HStack,
-  Divider
+  Divider,
 } from 'native-base';
 
 export default function App() {
-
- return (
-      <NativeBaseProvider>
-      <Box
-        safeArea
-        flex="1"
-        p="2"
-        w="90%"
-        mx='auto'
-      >
-        <Heading size="lg" color='primary.500'>
+  return (
+    <NativeBaseProvider>
+      <Box safeArea flex="1" p="2" py="8" w="90%" mx="auto">
+        <Heading size="lg" fontWeight="600" color="coolGray.800">
           Welcome
         </Heading>
-        <Heading color="muted.400" size="xs">
+        <Heading mt="1" color="coolGray.600" fontWeight="medium" size="xs">
           Sign in to continue!
         </Heading>
 
-        <VStack space="2" mt="5">
+        <VStack space={3} mt="5">
           <FormControl>
-            <FormControl.Label _text={{color: 'muted.700', fontSize: 'sm', fontWeight: 600}}>
-                Email ID
+            <FormControl.Label
+              _text={{
+                color: 'coolGray.800',
+                fontSize: 'xs',
+                fontWeight: 500,
+              }}>
+              Email ID
             </FormControl.Label>
             <Input />
           </FormControl>
-          <FormControl mb="5">
-            <FormControl.Label  _text={{color: 'muted.700', fontSize: 'sm', fontWeight: 600}}>
-                Password
+          <FormControl>
+            <FormControl.Label
+              _text={{
+                color: 'coolGray.800',
+                fontSize: 'xs',
+                fontWeight: 500,
+              }}>
+              Password
             </FormControl.Label>
             <Input type="password" />
             <Link
-              _text={{ fontSize: 'xs', fontWeight: '700', color:'cyan.500' }}
+              _text={{ fontSize: 'xs', fontWeight: '500', color: 'indigo.500' }}
               alignSelf="flex-end"
-              mt="1"
-            >
+              mt="1">
               Forget Password?
             </Link>
           </FormControl>
-          <VStack  space="2">
-          <Button colorScheme="cyan" _text={{color: 'white' }}>
-              Login
+          <Button mt="2" colorScheme="indigo" _text={{ color: 'white' }}>
+            Sign in
           </Button>
-
-          <HStack justifyContent="center" alignItems='center'>
-            <IconButton
-              variant='unstyled'
-              startIcon={
-                <Icon
-                  as={< MaterialCommunityIcons name="facebook" />}
-                  color='muted.700'
-                  size='sm'
-                />
-              }
-            />
-            <IconButton
-              variant='unstyled'
-              startIcon={
-                <Icon
-                  as={< MaterialCommunityIcons name="google" />}
-                  color='muted.700'
-                  size="sm"
-                />
-              }
-            />
-            <IconButton
-              variant='unstyled'
-              startIcon={
-                <Icon
-                  as={< MaterialCommunityIcons name="github" />}
-                  color='muted.700'
-                  size="sm"
-                />
-              }
-            />
-          </HStack>
-          </VStack>
-          <HStack justifyContent="center">
-            <Text fontSize='sm' color='muted.700' fontWeight={400}>I'm a new user. </Text>
-            <Link _text={{ color: 'cyan.500', bold: true, fontSize: 'sm' }} href="#">
+          <HStack mt="6" justifyContent="center">
+            <Text fontSize="sm" color="muted.700" fontWeight={400}>
+              I'm a new user.{' '}
+            </Text>
+            <Link
+              _text={{
+                color: 'indigo.500',
+                fontWeight: 'medium',
+                fontSize: 'sm',
+              }}
+              href="#">
               Sign Up
             </Link>
           </HStack>
@@ -113,6 +88,7 @@ export default function App() {
     </NativeBaseProvider>
   );
 }
+
 ```
 
 ### Signup Form
@@ -133,87 +109,49 @@ import {
   Icon,
   IconButton,
   HStack,
-  Divider
+  Divider,
 } from 'native-base';
 
 export default function App() {
-
- return (
-      <NativeBaseProvider>
-      <Box
-        safeArea
-        flex="1"
-        p="2"
-        w="90%"
-        mx='auto'
-      >
-        <Heading size="lg" color='primary.500'>
+  return (
+    <NativeBaseProvider>
+      <Box safeArea flex="1" p="2" w="90%" mx="auto" py="8">
+        <Heading size="lg" color="coolGray.800" fontWeight="600">
           Welcome
         </Heading>
-        <Heading color="muted.400" size="xs">
+        <Heading mt="1" color="coolGray.600" fontWeight="medium" size="xs">
           Sign up to continue!
         </Heading>
 
-        <VStack space="2" mt="5">
+        <VStack space={3} mt="5">
           <FormControl>
-            <FormControl.Label _text={{color: 'muted.700', fontSize: 'sm', fontWeight: 600}}>
-                Email
+            <FormControl.Label
+              _text={{ color: 'muted.700', fontSize: 'xs', fontWeight: 500 }}>
+              Email
             </FormControl.Label>
             <Input />
           </FormControl>
           <FormControl>
-            <FormControl.Label  _text={{color: 'muted.700', fontSize: 'sm', fontWeight: 600}}>
-                Password
+            <FormControl.Label
+              _text={{ color: 'muted.700', fontSize: 'xs', fontWeight: 500 }}>
+              Password
             </FormControl.Label>
             <Input type="password" />
           </FormControl>
           <FormControl>
-            <FormControl.Label  _text={{color: 'muted.700', fontSize: 'sm', fontWeight: 600}}>
-               Confirm Password
+            <FormControl.Label
+              _text={{ color: 'muted.700', fontSize: 'xs', fontWeight: 500 }}>
+              Confirm Password
             </FormControl.Label>
             <Input type="password" />
           </FormControl>
-          <VStack  space="2"  mt="5">
-          <Button colorScheme="cyan" _text={{color: 'white' }}>
-              SignUp
+          <Button mt="2" colorScheme="indigo" _text={{ color: 'white' }}>
+            Sign up
           </Button>
-
-          <HStack justifyContent="center" alignItems='center'>
-            <IconButton
-              variant='unstyled'
-              startIcon={
-                <Icon
-                  as={< MaterialCommunityIcons name="facebook" />}
-                  color='muted.700'
-                  size='sm'
-                />
-              }
-            />
-            <IconButton
-              variant='unstyled'
-              startIcon={
-                <Icon
-                  as={< MaterialCommunityIcons name="google" />}
-                  color='muted.700'
-                  size="sm"
-                />
-              }
-            />
-            <IconButton
-              variant='unstyled'
-              startIcon={
-                <Icon
-                  as={< MaterialCommunityIcons name="github" />}
-                  color='muted.700'
-                  size="sm"
-                />
-              }
-            />
-          </HStack>
-          </VStack>
         </VStack>
       </Box>
     </NativeBaseProvider>
   );
 }
+
 ```
diff --git a/docs/nativebase-factory.md b/docs/nativebase-factory.md
index 56c3a0ed7..d3cbf2589 100644
--- a/docs/nativebase-factory.md
+++ b/docs/nativebase-factory.md
@@ -99,27 +99,35 @@ export default function () {
 
 ```SnackPlayer name=NativeBase%20Factory%20Using%20Ref
 import React from 'react';
-import { Factory, Button, Stack, NativeBaseProvider,Center } from 'native-base';
+import {
+  Factory,
+  Button,
+  Stack,
+  NativeBaseProvider,
+  Center,
+} from 'native-base';
 import { TextInput } from 'react-native';
 
-function FactoryViewRefExample () {
+function FactoryViewRefExample() {
   const NBInput = Factory(TextInput);
   const inputRef = React.useRef(null);
   return (
     <Stack space={4}>
       <NBInput
-        placeholder='Click on the button'
+        w="200"
+        placeholder="Name"
+        fontSize="12px"
         ref={inputRef}
-        p={2}
-        border={1}
-        borderColor='cyan.400'
-        borderRadius='md'/>
+        p="2"
+        borderWidth="1"
+        borderColor="muted.200"
+        borderRadius="md"
+        placeholderTextColor="muted.400"
+      />
       <Button
-        colorScheme='emerald'
         onPress={() => {
           inputRef?.current?.focus();
-        }}
-      >
+        }}>
         Set Focus
       </Button>
     </Stack>
@@ -136,6 +144,7 @@ export default function () {
     </NativeBaseProvider>
   );
 }
+
 ```
 
 ## Params
diff --git a/docs/useBreakPointValue.md b/docs/useBreakPointValue.md
index 525e7ce96..52d1a84a7 100644
--- a/docs/useBreakPointValue.md
+++ b/docs/useBreakPointValue.md
@@ -17,21 +17,106 @@ The `useBreakpointValue` hook returns the value for the current breakpoint.
 
 ## Usage
 
-```SnackPlayer name=useBreakpoint%20Usage
+```SnackPlayer name=useBreakpointValue
+
 import React from 'react';
-import { Box, useBreakpointValue, NativeBaseProvider, Center } from 'native-base';
-function UseBreakpointValueExample () {
-  const color = useBreakpointValue({
-    base: 'red.200',
-    sm: 'blue.200',
-    md: 'blue.200',
+import {
+  Factory,
+  Button,
+  Stack,
+  NativeBaseProvider,
+  Center,
+} from 'native-base';
+import { TextInput } from 'react-native';
+
+import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base';
+import { FontAwesome, Foundation, Feather } from '@expo/vector-icons';
+import { View } from 'react-native';
+
+export const UseBreakpointValueExample = () => {
+  const flexDir = useBreakpointValue({
+    base: 'column',
+    lg: 'row',
   });
   return (
-    <Box bg={color} w='100px'>
-      This is a box
-    </Box>
+    <VStack space={10} alignItems="center" justifyContent="center">
+      <Heading>Why us?</Heading>
+      <View style={{ flexDirection: flexDir }}>
+        <VStack
+          m="3"
+          w="140"
+          borderRadius="xl"
+          p="3"
+          bg="cyan.200"
+          space={2}
+          alignItems="center"
+          justifyContent="center">
+          <Icon
+            as={Foundation}
+            name="shield"
+            size="sm"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}
+          />
+          <Text
+            fontSize="lg"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}>
+            Secure Checkout
+          </Text>
+        </VStack>
+        <VStack
+          m="3"
+          w="140"
+          borderRadius="xl"
+          p="3"
+          bg="cyan.200"
+          space={2}
+          alignItems="center"
+          justifyContent="center">
+          <Icon
+            as={Foundation}
+            name="shield"
+            size="sm"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}
+          />
+          <Text
+            fontSize="lg"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}>
+            Secure Checkout
+          </Text>
+        </VStack>
+        <VStack
+          m="3"
+          w="140"
+          borderRadius="xl"
+          p="3"
+          bg="cyan.200"
+          space={2}
+          alignItems="center"
+          justifyContent="center">
+          <Icon
+            as={Feather}
+            name="clock"
+            size="sm"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}
+          />
+          <Text
+            fontSize="lg"
+            textAlign="center"
+            _dark={{ color: 'coolGray.800' }}>
+            Fast Turn Around
+          </Text>
+        </VStack>
+      </View>
+    </VStack>
   );
 };
+
+// Example template which wraps component with NativeBaseProvider
 export default function () {
   return (
     <NativeBaseProvider>
@@ -41,4 +126,5 @@ export default function () {
     </NativeBaseProvider>
   );
 }
+
 ```
diff --git a/docs/utilityProps.md b/docs/utilityProps.md
index 6eb0b4a94..59df78b21 100644
--- a/docs/utilityProps.md
+++ b/docs/utilityProps.md
@@ -16,7 +16,7 @@ import React from 'react';
 import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
 
 const Box = (props) => {
-  return <NBBox borderRadius='md' bg='primary.200' {...props} />
+  return <NBBox borderRadius='md' bg='primary.600' {...props} />
 }
 
 function Component() {
@@ -117,7 +117,7 @@ export default function () {
 
 :::tip Note
 
-Above props can be written in the format: {color}:alpha-{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity)
+Above props can be written in the format: {color}:alpha.{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity)
 
 :::
 
@@ -131,7 +131,7 @@ export function Example() {
       <HStack space={2} alignItems="center">
         <Center
           size={16}
-          bg="primary.400:alpha-50"
+          bg="primary.400:alpha.30"
           rounded="md"
           _text={{
             color: "white",
@@ -141,8 +141,8 @@ export function Example() {
           Box 1
         </Center>
         <Center
-          bg="primary.400"
           size={16}
+          bg="primary.400:alpha.70"
           rounded="md"
           _text={{
             color: "white",
@@ -151,6 +151,17 @@ export function Example() {
         >
           Box 2
         </Center>
+        <Center
+          bg="primary.400"
+          size={16}
+          rounded="md"
+          _text={{
+            color: "white",
+          }}
+          shadow={3}
+        >
+          Box 3
+        </Center>
       </HStack>
     </Stack>
   )
@@ -226,7 +237,7 @@ import React from 'react';
 import { Box as NBBox, NativeBaseProvider, Center } from 'native-base';
 
 const Box = (props) => {
-  return <NBBox m={2} borderRadius='md' bg='primary.200' {...props} />
+  return <NBBox m={2} borderRadius='md' bg='primary.600' {...props} />
 }
 
 function Component() {
@@ -283,7 +294,7 @@ import React from 'react';
 import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base';
 
 const Box = (props) => {
-  return <NBBox p={5} m={2} borderRadius='md' bg='primary.200' {...props} />
+  return <NBBox p={5} m={2} borderRadius='md' bg='primary.600' {...props} />
 }
 
 function Component() {