diff --git a/docs/interaction-styles.mdx b/docs/interaction-styles.mdx
index 434d9aa04..47d76f137 100644
--- a/docs/interaction-styles.mdx
+++ b/docs/interaction-styles.mdx
@@ -1,6 +1,6 @@
 ---
 id: interaction-styles
-title: Pseudo props
+title: Pseudo props in Detail
 ---
 
 import {
diff --git a/docs/psuedoProps.md b/docs/psuedoProps.md
new file mode 100644
index 000000000..0a7d6a905
--- /dev/null
+++ b/docs/psuedoProps.md
@@ -0,0 +1,63 @@
+---
+id: psuedo-props
+title: Psuedo Props 101
+---
+
+Before getting into details of all the common Psuedo Props NativeBase has to offer let's check some key points that these psuedo props follow.
+
+## Nesting psuedo props:
+
+In versions before 3.2.0 there was a set order in which psuedo props can be nested, but it had a steep learning curve therefore we decided to remove it now. Any psuedo prop can be now nested to any level. With one small thing to keep in mind.
+
+Example: So assume you want to change the text color of a button on its hover state.
+
+### Do's
+
+```jsx
+<Button
+  _hover={{
+    _text: { color: 'secondary.400' },
+  }}
+>
+  Change My Color
+</Button>
+```
+
+### Dont's
+
+```jsx
+<Button
+  _text={{
+    _hover: { color: 'secondary.400' },
+  }}
+>
+  Change My Color
+</Button>
+```
+
+The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` .
+
+## Precedence Order for Psuedo Props:
+
+Now all the psuedo props follows a specific order that defines which psuedo prop can override the other psuedo prop. You can find the precedence values associated with each psuedo prop.
+
+```jsx
+_disabled(100);
+
+_pressed(70);
+_hover(60);
+_focus(50);
+_focusVisible(55);
+
+_active(30);
+_checked(30);
+_readOnly(40);
+_invalid(40);
+
+_web(10);
+_android(10);
+_ios(10);
+
+_light(10);
+_dark(10);
+```
diff --git a/sidebars.js b/sidebars.js
index fcf8f82d9..8a6ea1169 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -14,6 +14,7 @@ module.exports = {
         'utility-first',
         'utility-props-specificity',
         'design-tokens',
+        'psuedo-props',
         'interaction-styles',
         'responsive-style',
       ],
diff --git a/src/css/custom.css b/src/css/custom.css
index 0ec46adff..3d70403d5 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -472,6 +472,7 @@ html[data-theme='dark'] .navbar-small {
 .menu__link[href*='/utility-props']:after,
 .menu__link[href*='/utility-props-specificity']:after,
 .menu__link[href*='/color-mode']:after,
+.menu__link[href*='/psuedo-props']:after,
 .menu__link[href*='/strict-mode']:after,
 .menu__link[href*='/default-theme']:after {
   content: 'New';
diff --git a/versioned_docs/version-3.2.0/interaction-styles.mdx b/versioned_docs/version-3.2.0/interaction-styles.mdx
index 434d9aa04..47d76f137 100644
--- a/versioned_docs/version-3.2.0/interaction-styles.mdx
+++ b/versioned_docs/version-3.2.0/interaction-styles.mdx
@@ -1,6 +1,6 @@
 ---
 id: interaction-styles
-title: Pseudo props
+title: Pseudo props in Detail
 ---
 
 import {
diff --git a/versioned_docs/version-3.2.0/psuedoProps.md b/versioned_docs/version-3.2.0/psuedoProps.md
new file mode 100644
index 000000000..0a7d6a905
--- /dev/null
+++ b/versioned_docs/version-3.2.0/psuedoProps.md
@@ -0,0 +1,63 @@
+---
+id: psuedo-props
+title: Psuedo Props 101
+---
+
+Before getting into details of all the common Psuedo Props NativeBase has to offer let's check some key points that these psuedo props follow.
+
+## Nesting psuedo props:
+
+In versions before 3.2.0 there was a set order in which psuedo props can be nested, but it had a steep learning curve therefore we decided to remove it now. Any psuedo prop can be now nested to any level. With one small thing to keep in mind.
+
+Example: So assume you want to change the text color of a button on its hover state.
+
+### Do's
+
+```jsx
+<Button
+  _hover={{
+    _text: { color: 'secondary.400' },
+  }}
+>
+  Change My Color
+</Button>
+```
+
+### Dont's
+
+```jsx
+<Button
+  _text={{
+    _hover: { color: 'secondary.400' },
+  }}
+>
+  Change My Color
+</Button>
+```
+
+The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` .
+
+## Precedence Order for Psuedo Props:
+
+Now all the psuedo props follows a specific order that defines which psuedo prop can override the other psuedo prop. You can find the precedence values associated with each psuedo prop.
+
+```jsx
+_disabled(100);
+
+_pressed(70);
+_hover(60);
+_focus(50);
+_focusVisible(55);
+
+_active(30);
+_checked(30);
+_readOnly(40);
+_invalid(40);
+
+_web(10);
+_android(10);
+_ios(10);
+
+_light(10);
+_dark(10);
+```
diff --git a/versioned_sidebars/version-3.2.0-sidebars.json b/versioned_sidebars/version-3.2.0-sidebars.json
index 10efadef5..de631cbd1 100644
--- a/versioned_sidebars/version-3.2.0-sidebars.json
+++ b/versioned_sidebars/version-3.2.0-sidebars.json
@@ -36,6 +36,10 @@
           "type": "doc",
           "id": "version-3.2.0/design-tokens"
         },
+        {
+          "type": "doc",
+          "id": "version-3.2.0/psuedo-props"
+        },
         {
           "type": "doc",
           "id": "version-3.2.0/interaction-styles"