diff --git a/docs/border/border-color.mdx b/docs/border/border-color.mdx
index d343fb1..1cf6e90 100644
--- a/docs/border/border-color.mdx
+++ b/docs/border/border-color.mdx
@@ -48,6 +48,108 @@ import { bdr } from "nativeflowcss";
               ></div>
             </td>
           </tr>
+          <tr>
+            <td>{`bdr.b_color_${key}`}</td>
+            <td>
+              <code>{`{ borderBottomColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.l_color_${key}`}</td>
+            <td>
+              <code>{`{ borderLeftColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.r_color_${key}`}</td>
+            <td>
+              <code>{`{ borderRightColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.t_color_${key}`}</td>
+            <td>
+              <code>{`{ borderTopColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.s_color_${key}`}</td>
+            <td>
+              <code>{`{ borderStartColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.e_color_${key}`}</td>
+            <td>
+              <code>{`{ borderEndColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
         </React.Fragment>
       ))}
     </tbody>
@@ -61,6 +163,12 @@ Custom properties are usually rendered using `_(customValue)`
 | Object                   | Native Properties              |
 | ------------------------ | ------------------------------ |
 | bdr.color_(customColor) | `{ borderColor: customColor }` |
+| bdr.b_color_(customColor) | `{ borderBottomColor: customColor }` |
+| bdr.l_color_(customColor) | `{ borderLeftColor: customColor }` |
+| bdr.r_color_(customColor) | `{ borderRightColor: customColor }` |
+| bdr.t_color_(customColor) | `{ borderTopColor: customColor }` |
+| bdr.s_color_(customColor) | `{ borderStartColor: customColor }` |
+| bdr.e_color_(customColor) | `{ borderEndColor: customColor }` |
 
 ## Colors
 
diff --git a/docs/border/border-radius.mdx b/docs/border/border-radius.mdx
index 0978978..2411cf3 100644
--- a/docs/border/border-radius.mdx
+++ b/docs/border/border-radius.mdx
@@ -28,7 +28,7 @@ import { bdr } from "nativeflowcss";
 | bdr.rounded_xl      | `{ borderRadius: 12 }`                                                      |
 | bdr.rounded_2xl     | `{ borderRadius: 16 }`                                                      |
 | bdr.rounded_3xl     | `{ borderRadius: 24 }`                                                      |
-| bdr.rounded_ful`    | `{ borderRadius: 9999 }`                                                    |
+| bdr.rounded_full    | `{ borderRadius: 9999 }`                                                    |
 | bdr.rounded_s_none  | `{ borderStartStartRadius: 0` , <br /> `borderEndStartRadius: 0 }`          |
 | bdr.rounded_s_sm    | `{ borderStartStartRadius: 2` , <br /> `borderEndStartRadius: 2 }`          |
 | bdr.rounded_s       | `{ borderStartStartRadius: 4` , <br /> `borderEndStartRadius: 4 }`          |
@@ -62,7 +62,7 @@ import { bdr } from "nativeflowcss";
 | bdr.rounded_r_md    | `{ borderTopRightRadius: 6` , <br /> `borderBottomRightRadius: 6 }`         |
 | bdr.rounded_r_lg    | `{ borderTopRightRadius: 8` , <br /> `borderBottomRightRadius: 8 }`         |
 | bdr.rounded_r_xl    | `{ borderTopRightRadius: 12` , <br /> `borderBottomRightRadius: 12 }`       |
-| bdr.rounded_r_2x    | `{ borderTopRightRadius: 16` , <br /> `borderBottomRightRadius: 16 }`       |
+| bdr.rounded_r_2xl   | `{ borderTopRightRadius: 16` , <br /> `borderBottomRightRadius: 16 }`       |
 | bdr.rounded_r_3xl   | `{ borderTopRightRadius: 24` , <br /> `borderBottomRightRadius: 24 }`       |
 | bdr.rounded_r_full  | `{ borderTopRightRadius: 9999` , <br /> `borderBottomRightRadius: 9999 }`   |
 | bdr.rounded_b_none  | `{ borderBottomRightRadius: 0` , <br /> `borderBottomLeftRadius: 0 }`       |
diff --git a/docs/effects/backface-visibility.mdx b/docs/effects/backface-visibility.mdx
new file mode 100644
index 0000000..5e94ef6
--- /dev/null
+++ b/docs/effects/backface-visibility.mdx
@@ -0,0 +1,22 @@
+---
+id: backface-visibility
+title: Backface Visibility
+description: Control whether the back face of a view is visible.
+slug: /backface-visibility
+sidebar_position: 7
+---
+
+Control whether the back face of a view is visible.
+
+## Import
+
+```js title="src/screens/Component.js"
+import { fx } from "nativeflowcss";
+```
+
+## Properties
+
+| Object           | Native Properties                    |
+| ---------------- | ------------------------------------ |
+| fx.backface      | `{ backfaceVisibility: 'visible' }`  |
+| fx.backface_none | `{ backfaceVisibility: 'hidden' }`   |
diff --git a/docs/effects/elevation.mdx b/docs/effects/elevation.mdx
index 276ab8b..61d6972 100644
--- a/docs/effects/elevation.mdx
+++ b/docs/effects/elevation.mdx
@@ -23,7 +23,6 @@ The [Shadow property](/docs/shadow) works in a similar way, but supports Android
 
 | Object          | Native Properties   |
 | --------------- | ------------------- |
-| fx.elevation_0  | `{ elevation: 0 }`  |
 | fx.elevation_1  | `{ elevation: 1 }`  |
 | fx.elevation_2  | `{ elevation: 2 }`  |
 | fx.elevation_3  | `{ elevation: 3 }`  |
diff --git a/docs/effects/pointer-events.mdx b/docs/effects/pointer-events.mdx
new file mode 100644
index 0000000..5213c79
--- /dev/null
+++ b/docs/effects/pointer-events.mdx
@@ -0,0 +1,22 @@
+---
+id: pointer-events
+title: Pointer Events
+description: Control whether a view receives touch events.
+slug: /pointer-events
+sidebar_position: 6
+---
+
+Control whether a view receives touch events.
+
+## Import
+
+```js title="src/screens/Component.js"
+import { fx } from "nativeflowcss";
+```
+
+## Properties
+
+| Object      | Native Properties            |
+| ----------- | ---------------------------- |
+| fx.box_auto | `{ pointerEvents: 'auto' }`  |
+| fx.box_none | `{ pointerEvents: 'none' }`  |
diff --git a/docs/getting-started/editor-setup.mdx b/docs/getting-started/editor-setup.mdx
index a4c63f4..a369d61 100644
--- a/docs/getting-started/editor-setup.mdx
+++ b/docs/getting-started/editor-setup.mdx
@@ -1,17 +1,15 @@
 ---
 id: editor-setup
 title: Editor Setup
-description: I love my life
+description: Set up the NativeFlow CodeSense extension in VS Code.
 slug: /editor-setup
 sidebar_position: 2
 ---
 
-TODO: Write a VS Code Extension for auto-importing the UI components being used in teh project
-
 ## VS Code Extension
 
-Download the VS Code Extension [NativeFlow Intellisense](https://something.com) or build it from the source from the [GitHub Repository](https://github.com/nativeflowteam/intellisense)
+![NativeFlow CodeSense banner](https://ik.imagekit.io/jayowiee/github/nativeflow/codesense/banner.png?updatedAt=1777886417117)
+
+Install [NativeFlow CodeSense](https://marketplace.visualstudio.com/items?itemName=jayowiee.nativeflowcss-codesense) from the VS Code Marketplace, or build it from source in the [CodeSense GitHub repository](https://github.com/nativeflowteam/codesense).
 
-:::caution
-Owner is a deadass college student so he'll build this later, Thanks for being patient :p
-:::
+It provides NativeFlow utility autocompletion, hover details, diagnostics, quick fixes, and color previews for JSX/TSX workflows.
diff --git a/docs/layout/direction.mdx b/docs/layout/direction.mdx
new file mode 100644
index 0000000..c6b4677
--- /dev/null
+++ b/docs/layout/direction.mdx
@@ -0,0 +1,23 @@
+---
+id: direction
+title: Direction
+description: Set writing direction for layout flow.
+slug: /direction
+sidebar_position: 7
+---
+
+Set writing direction for layout flow.
+
+## Import
+
+```js title="src/screens/Component.js"
+import { direction } from "nativeflowcss";
+```
+
+## Properties
+
+| Object            | Native properties          |
+| ----------------- | -------------------------- |
+| direction.inherit | `{ direction: 'inherit' }` |
+| direction.ltr     | `{ direction: 'ltr' }`     |
+| direction.rtl     | `{ direction: 'rtl' }`     |
diff --git a/docs/layout/object-fit.mdx b/docs/layout/object-fit.mdx
index 0f5d543..9744b6e 100644
--- a/docs/layout/object-fit.mdx
+++ b/docs/layout/object-fit.mdx
@@ -11,7 +11,7 @@ Define how content/images fits within containers.
 ## Import
 
 ```js title="src/screens/Component.js"
-import { aspect } from "nativeflowcss";
+import { object_fit } from "nativeflowcss";
 ```
 
 ## Properties
diff --git a/docs/layout/overflow.mdx b/docs/layout/overflow.mdx
index c16c0ca..a99d90c 100644
--- a/docs/layout/overflow.mdx
+++ b/docs/layout/overflow.mdx
@@ -18,5 +18,5 @@ import { overflow } from "nativeflowcss";
 
 | Object            | Native properties         |
 | ----------------- | ------------------------- |
-| overflow .visible | `{ overflow: 'visible' }` |
-| overflow .visible | `{ overflow: 'visible' }` |
+| overflow.visible | `{ overflow: 'visible' }` |
+| overflow.hidden  | `{ overflow: 'hidden' }`  |
diff --git a/docs/layout/position.mdx b/docs/layout/position.mdx
index e431447..52b2c26 100644
--- a/docs/layout/position.mdx
+++ b/docs/layout/position.mdx
@@ -1,8 +1,8 @@
 ---
-id: postition
+id: position
 title: Position
 description: Set absolute or relative positioning for elements.
-slug: /postition
+slug: /position
 sidebar_position: 5
 ---
 
diff --git a/docs/shadow/shadow-offset.mdx b/docs/shadow/shadow-offset.mdx
index f35f8fd..6624860 100644
--- a/docs/shadow/shadow-offset.mdx
+++ b/docs/shadow/shadow-offset.mdx
@@ -28,12 +28,12 @@ import { shadow } from "nativeflowcss";
       </tr>
     </thead>
     <tbody>
-      {[...Array(25).keys()].map((i) => (
+      {[...Array(5).keys()].map((i) => (
         <React.Fragment key={i + 1}>
           <tr>
-            <td>{`shadow.offset_${i}`}</td>
+            <td>{`shadow.offset_${i + 1}`}</td>
             <td>
-              <code>{`{ shadowOffset: { width: ${i}, height: ${i} } }`}</code>
+              <code>{`{ shadowOffset: { width: ${i + 1}, height: ${i + 1} } }`}</code>
             </td>
           </tr>
         </React.Fragment>
diff --git a/docs/shadow/shadow-opacity.mdx b/docs/shadow/shadow-opacity.mdx
index cc4d5f4..53ba567 100644
--- a/docs/shadow/shadow-opacity.mdx
+++ b/docs/shadow/shadow-opacity.mdx
@@ -28,12 +28,12 @@ import { shadow } from "nativeflowcss";
       </tr>
     </thead>
     <tbody>
-      {[...Array(25).keys()].map((i) => (
+      {[...Array(24).keys()].map((i) => (
         <React.Fragment key={i + 1}>
           <tr>
-            <td>{`shadow.opacity_${i}`}</td>
+            <td>{`shadow.opacity_${i + 1}`}</td>
             <td>
-              <code>{`{ shadowOpacity: ${i} }`}</code>
+              <code>{`{ shadowOpacity: ${i + 1} }`}</code>
             </td>
           </tr>
         </React.Fragment>
diff --git a/docs/shadow/shadow-radius.mdx b/docs/shadow/shadow-radius.mdx
index 9eaa859..2c6746d 100644
--- a/docs/shadow/shadow-radius.mdx
+++ b/docs/shadow/shadow-radius.mdx
@@ -6,8 +6,6 @@ slug: /shadow-radius
 sidebar_position: 2
 ---
 
-import React from "react";
-
 Define the blur radius of the shadow.
 >★ represents it's an iOS-only prop
 
@@ -19,28 +17,18 @@ import { shadow } from "nativeflowcss";
 
 ## Properties
 
-<div class="scrollable-box">
-  <table>
-    <thead>
-      <tr>
-        <th>Object</th>
-        <th>Native Properties</th>
-      </tr>
-    </thead>
-    <tbody>
-      {[...Array(25).keys()].map((i) => (
-        <React.Fragment key={i + 1}>
-          <tr>
-            <td>{`shadow.rounded_${i}`}</td>
-            <td>
-              <code>{`{ shadowRadius: ${i} }`}</code>
-            </td>
-          </tr>
-        </React.Fragment>
-      ))}
-    </tbody>
-  </table>
-</div>
+| Object             | Native Properties         |
+| ------------------ | ------------------------- |
+| shadow.rounded_none | `{ shadowRadius: 0 }`    |
+| shadow.rounded_xs   | `{ shadowRadius: 1 }`    |
+| shadow.rounded_sm   | `{ shadowRadius: 2 }`    |
+| shadow.rounded_md   | `{ shadowRadius: 3 }`    |
+| shadow.rounded_base | `{ shadowRadius: 4 }`    |
+| shadow.rounded_lg   | `{ shadowRadius: 8 }`    |
+| shadow.rounded_xl   | `{ shadowRadius: 12 }`   |
+| shadow.rounded_2xl  | `{ shadowRadius: 16 }`   |
+| shadow.rounded_3xl  | `{ shadowRadius: 24 }`   |
+| shadow.rounded_full | `{ shadowRadius: 9999 }` |
 
 ## Custom Shadow Opacity
 
diff --git a/docs/sizing/height.mdx b/docs/sizing/height.mdx
index 4e9964b..31acfcb 100644
--- a/docs/sizing/height.mdx
+++ b/docs/sizing/height.mdx
@@ -50,4 +50,4 @@ Custom properties are usually rendered using `_(customValue)`
 
 | Object                       | Native Properties              |
 | ---------------------------- | ------------------------------ |
-| h.h_(customValue)  | `{ height: customValue }` |
\ No newline at end of file
+| h.w_(customValue)  | `{ height: customValue }` |
\ No newline at end of file
diff --git a/docs/spacing/margin.mdx b/docs/spacing/margin.mdx
index 6fc42b2..d62d918 100644
--- a/docs/spacing/margin.mdx
+++ b/docs/spacing/margin.mdx
@@ -14,7 +14,7 @@ Spacing outside element's border.
 ## Import
 
 ```js title="src/screens/Component.js"
-import { w } from "nativeflowcss";
+import { m } from "nativeflowcss";
 ```
 
 ## Properties
@@ -90,108 +90,54 @@ import { w } from "nativeflowcss";
               <code>{`{ margin: ${value} }`}</code>
             </td>
           </tr>
-          <tr>
-            <td>{`m.neg_m_${key}`}</td>
-            <td>
-              <code>{`{ margin: -${value} }`}</code>
-            </td>
-          </tr>
           <tr>
             <td>{`m.mx_${key}`}</td>
             <td>
               <code>{`{ marginLeft: ${value}, marginRight: ${value} }`}</code>
             </td>
           </tr>
-          <tr>
-            <td>{`m.neg_mx_${key}`}</td>
-            <td>
-              <code>{`{ marginLeft: -${value}, marginRight: -${value} }`}</code>
-            </td>
-          </tr>
           <tr>
             <td>{`m.my_${key}`}</td>
             <td>
               <code>{`{ marginTop: ${value}, marginBottom: ${value} }`}</code>
             </td>
           </tr>
-          <tr>
-            <td>{`m.neg_my_${key}`}</td>
-            <td>
-              <code>{`{ marginTop: -${value}, marginBottom: -${value} }`}</code>
-            </td>
-          </tr>
           <tr>
             <td>{`m.mt_${key}`}</td>
             <td>
               <code>{`{ marginTop: ${value} }`}</code>
             </td>
           </tr>
-          <tr>
-            <td>{`m.neg_mt_${key}`}</td>
-            <td>
-              <code>{`{ marginTop: -${value} }`}</code>
-            </td>
-          </tr>
           <tr>
             <td>{`m.mb_${key}`}</td>
             <td>
               <code>{`{ marginBottom: ${value} }`}</code>
             </td>
           </tr>
-          <tr>
-            <td>{`m.neg_mb_${key}`}</td>
-            <td>
-              <code>{`{ marginBottom: -${value} }`}</code>
-            </td>
-          </tr>
           <tr>
             <td>{`m.mr_${key}`}</td>
             <td>
               <code>{`{ marginRight: ${value} }`}</code>
             </td>
           </tr>
-          <tr>
-            <td>{`m.neg_mr_${key}`}</td>
-            <td>
-              <code>{`{ marginRight: -${value} }`}</code>
-            </td>
-          </tr>
           <tr>
             <td>{`m.ml_${key}`}</td>
             <td>
               <code>{`{ marginLeft: ${value} }`}</code>
             </td>
           </tr>
-          <tr>
-            <td>{`m.neg_ml_${key}`}</td>
-            <td>
-              <code>{`{ marginLeft: -${value} }`}</code>
-            </td>
-          </tr>
           <tr>
             <td>{`m.ms_${key}`}</td>
             <td>
               <code>{`{ marginStart: ${value} }`}</code>
             </td>
           </tr>
-          <tr>
-            <td>{`m.neg_ms_${key}`}</td>
-            <td>
-              <code>{`{ marginStart: -${value} }`}</code>
-            </td>
-          </tr>
           <tr>
             <td>{`m.me_${key}`}</td>
             <td>
               <code>{`{ marginEnd: ${value} }`}</code>
             </td>
           </tr>
-          <tr>
-            <td>{`m.neg_me_${key}`}</td>
-            <td>
-              <code>{`{ marginEnd: -${value} }`}</code>
-            </td>
-          </tr>
         </React.Fragment>
       ))}
     </tbody>
@@ -200,24 +146,26 @@ import { w } from "nativeflowcss";
 
 ## Custom Margins
 
-Custom properties are usually rendered using `_(customValue)`
+Custom properties are rendered using `_(customValue)`.
+`m.m_(...)` accepts exactly 1, 2, or 4 values.
 
-> Margin in React native only supports the default `unitless` values (<s>auto</s>, <s>fit-content</s>, <s>max-content</s>, <s>full</s>)
-> To use custom negative margins, pass the mas numbers, no specific keys required
+> Margin in React Native only supports the default `unitless` values (<s>auto</s>, <s>fit-content</s>, <s>max-content</s>, <s>full</s>)
+> To use custom negative margins, pass negative numbers directly (for example, `m.m_(-8)`).
 
 <div className="scrollable-box">
 
-| Object             | Native Properties                        |
-| ------------------ | ---------------------------------------- |
-| m.m_(customValue)  | `{ margin: customValue }`                |
-| m.m_(customValue)  | `{ margin: customValue }`                |
-| m.mx_(customValue) | `{ marginLeft: customValue, marginRight: customValue }` |
-| m.my_(customValue) | `{ marginTop: customValue, marginBottom: customValue }` |
-| m.mt_(customValue) | `{ marginTop: customValue }`             |
-| m.mb_(customValue) | `{ marginBottom: customValue }`          |
-| m.mr_(customValue) | `{ marginRight: customValue }`           |
-| m.ml_(customValue) | `{ marginLeft: customValue }`            |
-| m.ms_(customValue) | `{ marginStart: customValue }`           |
-| m.me_(customValue) | `{ marginEnd: customValue }`             |
+| Object                     | Native Properties                                                     |
+| -------------------------- | --------------------------------------------------------------------- |
+| m.m_(customValue)          | `{ margin: customValue }`                                             |
+| m.m_(vertical, horizontal) | `{ marginVertical: vertical, marginHorizontal: horizontal }`          |
+| m.m_(top, right, bottom, left) | `{ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left }` |
+| m.mx_(customValue)         | `{ marginLeft: customValue, marginRight: customValue }`               |
+| m.my_(customValue)         | `{ marginTop: customValue, marginBottom: customValue }`               |
+| m.mt_(customValue)         | `{ marginTop: customValue }`                                          |
+| m.mb_(customValue)         | `{ marginBottom: customValue }`                                       |
+| m.mr_(customValue)         | `{ marginRight: customValue }`                                        |
+| m.ml_(customValue)         | `{ marginLeft: customValue }`                                         |
+| m.ms_(customValue)         | `{ marginStart: customValue }`                                        |
+| m.me_(customValue)         | `{ marginEnd: customValue }`                                          |
 
 </div>
diff --git a/docs/spacing/padding.mdx b/docs/spacing/padding.mdx
index 184ee56..f7f3c54 100644
--- a/docs/spacing/padding.mdx
+++ b/docs/spacing/padding.mdx
@@ -9,12 +9,12 @@ sidebar_position: 1
 import React from "react";
 import valueList from "@site/src/utils/valueList";
 
-Spacing outside element's border.
+Spacing inside element's border.
 
 ## Import
 
 ```js title="src/screens/Component.js"
-import { w } from "nativeflowcss";
+import { p } from "nativeflowcss";
 ```
 
 ## Properties
@@ -146,22 +146,25 @@ import { w } from "nativeflowcss";
 
 ## Custom Padding
 
-Custom properties are usually rendered using `_(customValue)`
+Custom properties are rendered using `_(customValue)`.
+`p.p_(...)` accepts exactly 1, 2, or 4 values.
 
 > Padding in React Native only supports the default `unitless` values (<s>auto</s>, <s>fit-content</s>, <s>max-content</s>, <s>full</s>)
 
 <div className="scrollable-box">
 
-| Object             | Native Properties                        |
-| ------------------ | ---------------------------------------- |
-| p.p_(customValue)  | `{ padding: customValue }`                |
-| p.px_(customValue) | `{ paddingLeft: customValue, paddingRight: customValue }` |
-| p.py_(customValue) | `{ paddingTop: customValue, paddingBottom: customValue }` |
-| p.pt_(customValue) | `{ paddingTop: customValue }`             |
-| p.pb_(customValue) | `{ paddingBottom: customValue }`          |
-| p.pr_(customValue) | `{ paddingRight: customValue }`           |
-| p.pl_(customValue) | `{ paddingLeft: customValue }`            |
-| p.ps_(customValue) | `{ paddingStart: customValue }`           |
-| p.pe_(customValue) | `{ paddingEnd: customValue }`             |
+| Object                     | Native Properties                                                        |
+| -------------------------- | ------------------------------------------------------------------------ |
+| p.p_(customValue)          | `{ padding: customValue }`                                               |
+| p.p_(vertical, horizontal) | `{ paddingVertical: vertical, paddingHorizontal: horizontal }`           |
+| p.p_(top, right, bottom, left) | `{ paddingTop: top, paddingRight: right, paddingBottom: bottom, paddingLeft: left }` |
+| p.px_(customValue)         | `{ paddingLeft: customValue, paddingRight: customValue }`               |
+| p.py_(customValue)         | `{ paddingTop: customValue, paddingBottom: customValue }`               |
+| p.pt_(customValue)         | `{ paddingTop: customValue }`                                            |
+| p.pb_(customValue)         | `{ paddingBottom: customValue }`                                         |
+| p.pr_(customValue)         | `{ paddingRight: customValue }`                                          |
+| p.pl_(customValue)         | `{ paddingLeft: customValue }`                                           |
+| p.ps_(customValue)         | `{ paddingStart: customValue }`                                          |
+| p.pe_(customValue)         | `{ paddingEnd: customValue }`                                            |
 
 </div>
\ No newline at end of file
diff --git a/docs/typography/letter-spacing.mdx b/docs/typography/letter-spacing.mdx
new file mode 100644
index 0000000..fe2c61d
--- /dev/null
+++ b/docs/typography/letter-spacing.mdx
@@ -0,0 +1,26 @@
+---
+id: letter-spacing
+title: Letter Spacing
+description: Adjust spacing between characters in text.
+slug: /letter-spacing
+sidebar_position: 16
+---
+
+Adjust spacing between characters in text.
+
+## Import
+
+```js title="src/screens/Component.js"
+import { text } from "nativeflowcss";
+```
+
+## Properties
+
+| Object                | Native Properties                |
+| --------------------- | -------------------------------- |
+| text.tracking_tighter | `{ letterSpacing: -2 }`          |
+| text.tracking_tight   | `{ letterSpacing: -1 }`          |
+| text.tracking_normal  | `{ letterSpacing: 0 }`           |
+| text.tracking_wide    | `{ letterSpacing: 1 }`           |
+| text.tracking_wider   | `{ letterSpacing: 2 }`           |
+| text.tracking_widest  | `{ letterSpacing: 3 }`           |
diff --git a/docs/typography/text-shadow-color.mdx b/docs/typography/text-shadow-color.mdx
index 2c62fe9..584c794 100644
--- a/docs/typography/text-shadow-color.mdx
+++ b/docs/typography/text-shadow-color.mdx
@@ -59,9 +59,9 @@ import { text } from "nativeflowcss";
 
 Custom properties are usually rendered using `_(customValue)`
 
-| Object                      | Native Properties              |
-| --------------------------- | ------------------------------ |
-| shadow.color\_(customColor) | `{ shadowColor: customColor }` |
+| Object                           | Native Properties                      |
+| -------------------------------- | -------------------------------------- |
+| text.shadow_color_(customColor)  | `{ textShadowColor: customColor }`     |
 
 ## Colors
 
diff --git a/docs/typography/text-shadow-offset.mdx b/docs/typography/text-shadow-offset.mdx
index ea34f18..775b39c 100644
--- a/docs/typography/text-shadow-offset.mdx
+++ b/docs/typography/text-shadow-offset.mdx
@@ -27,12 +27,12 @@ import { text } from "nativeflowcss";
       </tr>
     </thead>
     <tbody>
-      {[...Array(25).keys()].map((i) => (
+      {[...Array(24).keys()].map((i) => (
         <React.Fragment key={i + 1}>
           <tr>
-            <td>{`text.shadow_offset_${i}`}</td>
+            <td>{`text.shadow_offset_${i + 1}`}</td>
             <td>
-              <code>{`{ textShadowOffset: { width: ${i}, height: ${i} } }`}</code>
+              <code>{`{ textShadowOffset: { width: ${i + 1}, height: ${i + 1} } }`}</code>
             </td>
           </tr>
         </React.Fragment>
diff --git a/docs/typography/text-shadow-radius.mdx b/docs/typography/text-shadow-radius.mdx
index 03537b3..2b8e129 100644
--- a/docs/typography/text-shadow-radius.mdx
+++ b/docs/typography/text-shadow-radius.mdx
@@ -27,12 +27,12 @@ import { text } from "nativeflowcss";
       </tr>
     </thead>
     <tbody>
-      {[...Array(25).keys()].map((i) => (
+      {[...Array(24).keys()].map((i) => (
         <React.Fragment key={i + 1}>
           <tr>
-            <td>{`text.shadow_radius_${i}`}</td>
+            <td>{`text.shadow_radius_${i + 1}`}</td>
             <td>
-              <code>{`{ textShadowRadius: ${i} }`}</code>
+              <code>{`{ textShadowRadius: ${i + 1} }`}</code>
             </td>
           </tr>
         </React.Fragment>
diff --git a/src/pages/index.js b/src/pages/index.js
index c6028db..861acce 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -12,9 +12,16 @@ function HomepageHeader() {
   return (
     <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <Heading as="h1" className={clsx("hero__title")}>
-          {siteConfig.title}
-        </Heading>
+        <div className={styles.titleWithLogo}>
+          <img
+            src="https://ik.imagekit.io/jayowiee/github/nativeflow/nativeflow-logo.png"
+            alt="NativeFlow logo"
+            className={styles.titleLogo}
+          />
+          <Heading as="h1" className={clsx("hero__title", styles.titleText)}>
+            {siteConfig.title}
+          </Heading>
+        </div>
         <p className="">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..02cb0d3 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -21,3 +21,20 @@
   align-items: center;
   justify-content: center;
 }
+
+.titleWithLogo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.titleLogo {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+.titleText {
+  margin-bottom: 0;
+}
diff --git a/src/utils/valueList.js b/src/utils/valueList.js
index f63c1f5..2b079a1 100644
--- a/src/utils/valueList.js
+++ b/src/utils/valueList.js
@@ -1,5 +1,6 @@
 const valueList = {
   0: 0,
+  px: 1,
   1: 4,
   2: 8,
   3: 12,