diff --git a/docs/builldingCard.md b/docs/builldingCard.md
index aab840b4b..fa2ed75aa 100644
--- a/docs/builldingCard.md
+++ b/docs/builldingCard.md
@@ -34,7 +34,6 @@ function CardComponent(){
     <Box
       rounded="lg"
       overflow="hidden"
-      width="72"
       shadow={1}
       _light={{ backgroundColor: 'gray.50' }}
       _dark={{ backgroundColor: 'gray.700' }}
diff --git a/docs/hidden.md b/docs/hidden.md
index 2a8b0b906..7c8e5bd0d 100644
--- a/docs/hidden.md
+++ b/docs/hidden.md
@@ -120,6 +120,6 @@ export default function () {
 
 ## Props
 
-```ComponentPropTable path=composites,Fab,Fab.tsx
+```ComponentPropTable path=primitives,Hidden,index.tsx
 
 ```
diff --git a/docs/icon.md b/docs/icon.md
index 4b19156e5..adb66fc9d 100644
--- a/docs/icon.md
+++ b/docs/icon.md
@@ -39,6 +39,12 @@ We provides a set of commonly used interface icons. So you can directly use them
 
 ```
 
+<!-- ### Integration with Third Party Icons
+
+```ComponentSnackPlayer path=primitives,Icon,ThirdPartyIcons.tsx
+
+``` -->
+
 ## Props
 
 ### Icon
diff --git a/docs/popOver.md b/docs/popOver.md
index 4ee92bdd4..bd1df8684 100644
--- a/docs/popOver.md
+++ b/docs/popOver.md
@@ -41,6 +41,8 @@ import { Popover } from 'native-base';
 
 ```
 
+<br/>
+
 :::tip Development Tip
 You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content.
 :::
diff --git a/docs/select.md b/docs/select.md
index aceb730d5..d5aef6f9d 100644
--- a/docs/select.md
+++ b/docs/select.md
@@ -45,39 +45,6 @@ import { Select } from 'native-base';
 
 ```
 
-<!--
-| Name                             | Type                         | Description                                                                                                                          | Default    |
-| -------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
-| variant                          | `native`, `styled`           | The variant of the select style to use.                                                                                              | `native`   |
-| placeholder                      | string                       | The placeholder attribute specifies a short hint that describes the expected value of a selected field (only for styled variant).    | -          |
-| \_placeholder                    | [`TextProps`](text.md#props) | Text props to be applied to placeholder (only for styled variant).                                                                   | -          |
-| selectedValue                    | string                       | The default value which is selected.                                                                                                 | -          |
-| onValueChange                    | function                     | Callback for on change on the input value.                                                                                           | -          |
-| selectedItemBg                   | string                       | Background color for the selected item (only for styled variant).                                                                    | `blue.500` |
-| \_selectedItem                   | [`TextProps`](text.md#props) | Text prop for selected item (only for styled variant).                                                                               | -          |
-| isDisabled                       | boolean                      | If true, the button will be disabled (not supported on ios for native variant).                                                      | -          |
-| dropdownIcon                     | JSX.Element                  | If given, updates the dropdown Icon (only for styled variant).                                                                       | -          |
-| dropdownOpenIcon                 | JSX.Element                  | If given, updates the dropdown Icon when opened (only for styled variant).                                                           | -          |
-| dropdownCloseIcon                | JSX.Element                  | If given, updates the dropdown Icon when closed (only for styled variant).                                                           | -          |
-| \_ios                            | _StyleProps_                 | Props which you only want to pass to ios device.                                                                                     | -          |
-| \_android                        | _StyleProps_                 | Props which you only want to pass to android device.                                                                                 | -          |
-| \_web                            | _StyleProps_                 | Props which you only want to pass to web device.                                                                                     | -          |
-| \_item                           | [`TextProps`](text.md#props) | TextProps to be applied to the label (only for styled variant).                                                                      | -          |
-| androidMode <AndroidBadge/>      | `dialog`, `dropdown`         | On Android, specifies how to display the selection items when the user taps on the picker (only for native variant).                 | `dialog`   |
-| androidIconColor <AndroidBadge/> | string                       | On Android, specifies color of dropdown triangle. Input value can any color from theme like `default.300` (only for native variant). | -          |
-| androidPrompt <AndroidBadge/>    | string                       | On Android, prompt string for this picker, used on Android in dialog mode as the title of the dialog (only for native variant).      | -          |
-
-**Select** can be styled using pseudo style props like `_isInvalid`, `_isDisabled` and `_hover`. -->
-
-<!-- ### Select Item
-
-| Name       | Type                         | Description                                                                                    | Default |
-| ---------- | ---------------------------- | ---------------------------------------------------------------------------------------------- | ------- |
-| label      | string                       | The label which will be displayed.                                                             | -       |
-| value      | string                       | The value to be used for the item. This is the value that will be returned on form submission. | -       |
-| isDisabled | boolean                      | If true, the item will be disabled (only for `styled` variant).                                | -       |
-| \_label    | [`TextProps`](text.md#props) | TextProps to be applied to label (only for `styled` variant).                                  | -       | -->
-
 ## Styling
 
 <ComponentTheme name="select" />
diff --git a/docs/useColorMode.md b/docs/useColorMode.md
index adb23b90d..9783748b9 100644
--- a/docs/useColorMode.md
+++ b/docs/useColorMode.md
@@ -16,22 +16,28 @@ import { useColorMode } from 'native-base';
 ```SnackPlayer name=useColorMode
 import React from 'react';
 import {
-  NativeBaseProvider,
-  VStack,
+  Heading,
   useColorMode,
-  Text,
   Button,
+  HStack,
+  Avatar,
   Center,
+  useColorModeValue,
+  Text,
+  NativeBaseProvider,
 } from 'native-base';
 
-function UseColorMode() {
+function ColorModeExample() {
   const { colorMode, toggleColorMode } = useColorMode();
   return (
-    <Center flex={1} bg={colorMode === 'dark' ? 'black' : 'white'}>
-      <Text fontSize="lg" display="flex">
-        The active color mode is <Text bold>{colorMode}</Text>
+    <Center flex={1} bg={useColorModeValue('warmGray.50', 'coolGray.800')}>
+      <Text fontSize="lg" display="flex" mb="20">
+        The active color mode is{' '}
+        <Text bold fontSize="18px">
+          {useColorModeValue('Light', 'Dark')}
+        </Text>
       </Text>
-      <Button m="2" onPress={toggleColorMode}>Toggle</Button>
+      <Button onPress={toggleColorMode}>Toggle</Button>
     </Center>
   );
 }
@@ -39,7 +45,7 @@ function UseColorMode() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <UseColorMode />
+      <ColorModeExample />
     </NativeBaseProvider>
   );
 }
diff --git a/docs/useDisclosure.md b/docs/useDisclosure.md
index 4e5cd4cdd..651c09642 100644
--- a/docs/useDisclosure.md
+++ b/docs/useDisclosure.md
@@ -36,13 +36,12 @@ function UseDiscloseExample() {
           </Modal.Header>
           <Modal.Body>
            This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered.
-            <Input mt="4" placeholder="Lorem ipsum dolor sit" />
           </Modal.Body>
           <Modal.Footer>
-            <Button colorScheme="blue" mr="1">
-              Save
+           <Button variant="unstyled" mr="1">
+              Cancel
             </Button>
-            <Button onPress={onClose}>Close</Button>
+            <Button colorScheme="error" onPress={onClose}>Delete</Button>
           </Modal.Footer>
         </Modal.Content>
       </Modal>
diff --git a/docs/useMediaQuery.md b/docs/useMediaQuery.md
index 7edf8d5fb..6e3063ebf 100644
--- a/docs/useMediaQuery.md
+++ b/docs/useMediaQuery.md
@@ -17,7 +17,7 @@ import { useMediaQuery } from 'native-base';
 
 ```SnackPlayer name=useMediaQuery%20Usage(max-height)
 import React from "react";
-import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base";
+import { Text, useMediaQuery, NativeBaseProvider, Box, HStack, AspectRatio, Stack, Heading, Image, Center } from "native-base";
 
 function UseMediaQueryExample() {
   const [isSmallScreen] = useMediaQuery({ minHeight: 280, maxHeight: 480 });
@@ -27,7 +27,6 @@ function UseMediaQueryExample() {
         <Box
           rounded="lg"
           overflow="hidden"
-          width="72"
           borderWidth="1"
           shadow={1}
           _light={{ backgroundColor: 'gray.50', borderColor: 'coolGray.200' }}
@@ -142,7 +141,7 @@ function UseMediaQueryExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex={1} px="3">
         <UseMediaQueryExample />
       </Center>
     </NativeBaseProvider>
@@ -154,7 +153,7 @@ export default function () {
 
 ```SnackPlayer name=useMediaQuery%20Usage(min-width)
 import React from "react";
-import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base";
+import { Text, useMediaQuery, NativeBaseProvider, Box, HStack, Stack, AspectRatio, Heading, Image, Center } from "native-base";
 
 function UseMediaQueryExample() {
   const [isSmallScreen] = useMediaQuery({ minWidth: 280 });
@@ -164,7 +163,6 @@ function UseMediaQueryExample() {
         <Box
           rounded="lg"
           overflow="hidden"
-          width="72"
           borderColor="coolGray.200"
           borderWidth="1"
           _dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}
@@ -280,7 +278,7 @@ function UseMediaQueryExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex={1} px="3">
         <UseMediaQueryExample />
       </Center>
     </NativeBaseProvider>
@@ -292,25 +290,23 @@ export default function () {
 
 ```SnackPlayer name=useMediaQuery%20Usage(orientation)
 import React from "react";
-import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base";
+import { Text, useMediaQuery, NativeBaseProvider, Box, HStack, Stack, AspectRatio, Heading, Image, Center } from "native-base";
 
 function UseMediaQueryExample() {
  const [isLandScape, isPortrait] = useMediaQuery([
     { orientation: 'landscape' },
     { orientation: 'portrait' },
   ]);
-  return (
+  return  (
     <Box>
       {isPortrait ? (
         <Box
           rounded="lg"
           overflow="hidden"
-          width="72"
           shadow={1}
           borderWidth="1"
           _light={{ backgroundColor: 'gray.50', borderColor: 'coolGray.200' }}
-          _dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}
-        >
+          _dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}>
           <Box>
             <AspectRatio ratio={16 / 9}>
               <Image
@@ -327,8 +323,7 @@ function UseMediaQueryExample() {
               position="absolute"
               bottom={0}
               px="3"
-              py="1.5"
-            >
+              py="1.5">
               PHOTOS
             </Center>
           </Box>
@@ -343,8 +338,7 @@ function UseMediaQueryExample() {
                 _dark={{ color: 'violet.300' }}
                 fontWeight="500"
                 ml="-0.5"
-                mt="-1"
-              >
+                mt="-1">
                 The Silicon Valley of India.
               </Text>
             </Stack>
@@ -356,8 +350,7 @@ function UseMediaQueryExample() {
             <HStack
               alignItems="center"
               space={4}
-              justifyContent="space-between"
-            >
+              justifyContent="space-between">
               <HStack alignItems="center">
                 <Text color="gray.500" fontWeight="400">
                   6 mins ago
@@ -375,8 +368,7 @@ function UseMediaQueryExample() {
           overflow="hidden"
           shadow={1}
           _light={{ backgroundColor: 'gray.50' }}
-          _dark={{ backgroundColor: 'gray.700' }}
-        >
+          _dark={{ backgroundColor: 'gray.700' }}>
           <Stack p="2" pt="3" flex="2" space={1}>
             <Stack space={2}>
               <Heading size="md" ml="-1">
@@ -388,8 +380,7 @@ function UseMediaQueryExample() {
                 _dark={{ color: 'violet.300' }}
                 fontWeight="500"
                 ml="-0.5"
-                mt="-1"
-              >
+                mt="-1">
                 The Silicon Valley of India.
               </Text>
             </Stack>
@@ -401,15 +392,13 @@ function UseMediaQueryExample() {
             <HStack
               alignItems="center"
               space={4}
-              justifyContent="space-between"
-            >
+              justifyContent="space-between">
               <HStack alignItems="center">
                 <Text
                   _dark={{ color: 'warmGray.200' }}
                   fontSize="xs"
                   color="gray.500"
-                  fontWeight="400"
-                >
+                  fontWeight="400">
                   6 mins ago
                 </Text>
               </HStack>
@@ -425,7 +414,7 @@ function UseMediaQueryExample() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex={1} px="3">
         <UseMediaQueryExample />
       </Center>
     </NativeBaseProvider>
diff --git a/src/css/custom.css b/src/css/custom.css
index 8b7974f78..a65c611cb 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -476,7 +476,8 @@ html[data-theme='dark'] .navbar-small {
 .menu__link[href*='/pseudo-props']:after,
 .menu__link[href*='/migration/v3.1.0-to-3.2.0']:after,
 .menu__link[href*='/strict-mode']:after,
-.menu__link[href*='/default-theme']:after {
+.menu__link[href*='/default-theme']:after,
+.menu__link[href*='/hidden']:after {
   content: 'New';
   display: inline-block;
   position: relative;
diff --git a/versioned_docs/version-3.2.0/select.md b/versioned_docs/version-3.2.0/select.md
index 9711f99a3..2e335fbb9 100644
--- a/versioned_docs/version-3.2.0/select.md
+++ b/versioned_docs/version-3.2.0/select.md
@@ -45,39 +45,6 @@ import { Select } from 'native-base';
 
 ```
 
-<!--
-| Name                             | Type                         | Description                                                                                                                          | Default    |
-| -------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
-| variant                          | `native`, `styled`           | The variant of the select style to use.                                                                                              | `native`   |
-| placeholder                      | string                       | The placeholder attribute specifies a short hint that describes the expected value of a selected field (only for styled variant).    | -          |
-| \_placeholder                    | [`TextProps`](text.md#props) | Text props to be applied to placeholder (only for styled variant).                                                                   | -          |
-| selectedValue                    | string                       | The default value which is selected.                                                                                                 | -          |
-| onValueChange                    | function                     | Callback for on change on the input value.                                                                                           | -          |
-| selectedItemBg                   | string                       | Background color for the selected item (only for styled variant).                                                                    | `blue.500` |
-| \_selectedItem                   | [`TextProps`](text.md#props) | Text prop for selected item (only for styled variant).                                                                               | -          |
-| isDisabled                       | boolean                      | If true, the button will be disabled (not supported on ios for native variant).                                                      | -          |
-| dropdownIcon                     | JSX.Element                  | If given, updates the dropdown Icon (only for styled variant).                                                                       | -          |
-| dropdownOpenIcon                 | JSX.Element                  | If given, updates the dropdown Icon when opened (only for styled variant).                                                           | -          |
-| dropdownCloseIcon                | JSX.Element                  | If given, updates the dropdown Icon when closed (only for styled variant).                                                           | -          |
-| \_ios                            | _StyleProps_                 | Props which you only want to pass to ios device.                                                                                     | -          |
-| \_android                        | _StyleProps_                 | Props which you only want to pass to android device.                                                                                 | -          |
-| \_web                            | _StyleProps_                 | Props which you only want to pass to web device.                                                                                     | -          |
-| \_item                           | [`TextProps`](text.md#props) | TextProps to be applied to the label (only for styled variant).                                                                      | -          |
-| androidMode <AndroidBadge/>      | `dialog`, `dropdown`         | On Android, specifies how to display the selection items when the user taps on the picker (only for native variant).                 | `dialog`   |
-| androidIconColor <AndroidBadge/> | string                       | On Android, specifies color of dropdown triangle. Input value can any color from theme like `default.300` (only for native variant). | -          |
-| androidPrompt <AndroidBadge/>    | string                       | On Android, prompt string for this picker, used on Android in dialog mode as the title of the dialog (only for native variant).      | -          |
-
-**Select** can be styled using pseudo style props like `_isInvalid`, `_isDisabled` and `_hover`. -->
-
-<!-- ### Select Item
-
-| Name       | Type                         | Description                                                                                    | Default |
-| ---------- | ---------------------------- | ---------------------------------------------------------------------------------------------- | ------- |
-| label      | string                       | The label which will be displayed.                                                             | -       |
-| value      | string                       | The value to be used for the item. This is the value that will be returned on form submission. | -       |
-| isDisabled | boolean                      | If true, the item will be disabled (only for `styled` variant).                                | -       |
-| \_label    | [`TextProps`](text.md#props) | TextProps to be applied to label (only for `styled` variant).                                  | -       | --> |
-
 ## Styling
 
 <ComponentTheme name="select" />