diff --git a/injectLatestProps.js b/injectLatestProps.js
index 669d1e0..5998f19 100644
--- a/injectLatestProps.js
+++ b/injectLatestProps.js
@@ -36,6 +36,19 @@ try {
   );
   console.log("✔️ Cloned react-native-elements");
 
+  execSync(
+    "sed -i '/## Props/,$!d' ./react-native-elements/website/docs/main/*.mdx",
+    (err, stdout, stderr) => {
+      if (err) {
+        // node couldn't execute the command
+        return;
+      }
+      // the *entire* stdout and stderr (buffered)
+      console.log(`stdout: ${stdout}`);
+      console.log(`stderr: ${stderr}`);
+    }
+  );
+  
   // Point 4
   cpDir.sync(
     "./react-native-elements/website/docs/main",
@@ -45,4 +58,4 @@ try {
 } catch (err) {
   console.error(err);
   return;
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 3a4ad19..6e0d326 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "react-dom": "^16.13.0",
     "react-helmet": "^6.1.0",
     "react-lottie": "^1.2.3",
-    "react-native-elements": "https://github.com/react-native-elements/react-native-elements#dist",
+    "react-native-elements": "*",
     "react-native-safe-area-context": "^3.2.0",
     "react-native-vector-icons": "^6.7.0",
     "react-native-web": "^0.12.0",
@@ -47,11 +47,7 @@
     "extends": "react-app"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
@@ -81,9 +77,6 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx,css,md,json}": [
-      "npm run validate",
-      "git add"
-    ]
+    "*.{js,jsx,css,md,json}": ["npm run validate", "git add"]
   }
 }
diff --git a/src/content/AirbnbRating/index.jsx b/src/content/AirbnbRating/index.jsx
index 72673d4..409ad70 100644
--- a/src/content/AirbnbRating/index.jsx
+++ b/src/content/AirbnbRating/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./airbnbrating.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/rating.md"));
+const Content = lazy(() => importMDX("../Props/Rating.mdx"));
 
 export default function AirbnbPlayground() {
   return (
diff --git a/src/content/Avatar/index.jsx b/src/content/Avatar/index.jsx
index e49bc33..6ccf7f9 100644
--- a/src/content/Avatar/index.jsx
+++ b/src/content/Avatar/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./avatar.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/avatar.md"));
+const Content = lazy(() => importMDX("../Props/Avatar.mdx"));
 
 export default function Avatar() {
   return (
diff --git a/src/content/Badge/index.jsx b/src/content/Badge/index.jsx
index 31964d3..42b6728 100644
--- a/src/content/Badge/index.jsx
+++ b/src/content/Badge/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./badge.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/badge.md"));
+const Content = lazy(() => importMDX("../Props/Badge.mdx"));
 
 export default function TilePlayground() {
   return (
diff --git a/src/content/BottomSheet/index.jsx b/src/content/BottomSheet/index.jsx
index b7bc587..2d89f11 100644
--- a/src/content/BottomSheet/index.jsx
+++ b/src/content/BottomSheet/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./bottomsheet.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/bottomsheet.md"));
+const Content = lazy(() => importMDX("../Props/BottomSheet.mdx"));
 export default function BottomSheetPlayground() {
   return (
     <div>
diff --git a/src/content/Button/index.jsx b/src/content/Button/index.jsx
index 618e954..7cfc965 100644
--- a/src/content/Button/index.jsx
+++ b/src/content/Button/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./button.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/button.md"));
+const Content = lazy(() => importMDX("../Props/Button.mdx"));
 
 class App extends Component {
   render() {
diff --git a/src/content/ButtonGroup/index.jsx b/src/content/ButtonGroup/index.jsx
index ccffa50..de31ff8 100644
--- a/src/content/ButtonGroup/index.jsx
+++ b/src/content/ButtonGroup/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./buttongroup.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/button_group.md"));
+const Content = lazy(() => importMDX("../Props/ButtonGroup.mdx"));
 
 export default function ButtonGroupPlayground() {
   return (
diff --git a/src/content/Card/index.jsx b/src/content/Card/index.jsx
index 8a3c3be..90ae1af 100644
--- a/src/content/Card/index.jsx
+++ b/src/content/Card/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./card.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/card.md"));
+const Content = lazy(() => importMDX("../Props/Card.mdx"));
 
 export default function CardPlayground() {
   return (
diff --git a/src/content/CheckBox/index.jsx b/src/content/CheckBox/index.jsx
index 22a831e..6d142b0 100644
--- a/src/content/CheckBox/index.jsx
+++ b/src/content/CheckBox/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./checkbox.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/checkbox.md"));
+const Content = lazy(() => importMDX("../Props/CheckBox.mdx"));
 
 export default function CheckBoxPlayground() {
   return (
diff --git a/src/content/Divider/index.jsx b/src/content/Divider/index.jsx
index d09220d..43a8da1 100644
--- a/src/content/Divider/index.jsx
+++ b/src/content/Divider/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./divider.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/divider.md"));
+const Content = lazy(() => importMDX("../Props/Divider.mdx"));
 
 export default function DividerPlayground() {
   return (
diff --git a/src/content/FAB/index.jsx b/src/content/FAB/index.jsx
index cfb1a80..f68acd7 100644
--- a/src/content/FAB/index.jsx
+++ b/src/content/FAB/index.jsx
@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 import Playground from "./fab.playground";
 
-const Content = lazy(() => importMDX("../Props/fab.md"));
+const Content = lazy(() => importMDX("../Props/FAB.mdx"));
 
 export default function FabPlayground() {
   return (
diff --git a/src/content/Header/index.jsx b/src/content/Header/index.jsx
index 44953a7..87f9477 100644
--- a/src/content/Header/index.jsx
+++ b/src/content/Header/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./header.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/header.md"));
+const Content = lazy(() => importMDX("../Props/Header.mdx"));
 
 export default function HeaderPlayground() {
   return (
diff --git a/src/content/Icon/index.jsx b/src/content/Icon/index.jsx
index 106160f..a48dc8c 100644
--- a/src/content/Icon/index.jsx
+++ b/src/content/Icon/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./icon.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/icon.md"));
+const Content = lazy(() => importMDX("../Props/Icon.mdx"));
 
 export default function IconPlayground() {
   return (
diff --git a/src/content/Image/index.jsx b/src/content/Image/index.jsx
index d19fe42..afc5fe0 100644
--- a/src/content/Image/index.jsx
+++ b/src/content/Image/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./input.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/image.md"));
+const Content = lazy(() => importMDX("../Props/Image.mdx"));
 
 export default function ImagePlayground() {
   return (
diff --git a/src/content/Input/index.jsx b/src/content/Input/index.jsx
index 62a3b67..d5b337d 100644
--- a/src/content/Input/index.jsx
+++ b/src/content/Input/index.jsx
@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./input.playground.jsx";
-const Content = lazy(() => importMDX("../Props/input.md"));
+const Content = lazy(() => importMDX("../Props/Input.mdx"));
 
 export default function InputPlayground() {
   return (
diff --git a/src/content/LinearProgress/index.jsx b/src/content/LinearProgress/index.jsx
index da343c9..6403378 100644
--- a/src/content/LinearProgress/index.jsx
+++ b/src/content/LinearProgress/index.jsx
@@ -3,7 +3,7 @@ import { importMDX } from "mdx.macro";
 
 import PropDrawer from "../../components/PropDrawer";
 import Playground from "./linearprogress.playground";
-const Content = lazy(() => importMDX("../Props/linearProgress.md"));
+const Content = lazy(() => importMDX("../Props/LinearProgress.mdx"));
 
 export default function LinearProgressPlayground() {
   return (
diff --git a/src/content/ListItem/index.jsx b/src/content/ListItem/index.jsx
index e11afec..c6d8a26 100644
--- a/src/content/ListItem/index.jsx
+++ b/src/content/ListItem/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Playground from "./listitem.playground.jsx";
 import Spinner from "../../containers/Spinner";
 
-const Content = lazy(() => importMDX("../Props/listitem.md"));
+const Content = lazy(() => importMDX("../Props/ListItem.mdx"));
 
 export default function ListItemPlayground() {
   return (
diff --git a/src/content/Overlay/index.jsx b/src/content/Overlay/index.jsx
index 9c992ba..22cb498 100644
--- a/src/content/Overlay/index.jsx
+++ b/src/content/Overlay/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./overlay.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/overlay.md"));
+const Content = lazy(() => importMDX("../Props/Overlay.mdx"));
 
 export default function OverlayPlayground() {
   return (
diff --git a/src/content/Pricing/index.jsx b/src/content/Pricing/index.jsx
index 3bdb401..d2e86e3 100644
--- a/src/content/Pricing/index.jsx
+++ b/src/content/Pricing/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./pricing.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/pricing.md"));
+const Content = lazy(() => importMDX("../Props/PricingCard.mdx"));
 
 export default function PricingPlayground() {
   return (
diff --git a/src/content/Rating/index.jsx b/src/content/Rating/index.jsx
index d7462e5..b944955 100644
--- a/src/content/Rating/index.jsx
+++ b/src/content/Rating/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Playground from "./rating.playground.jsx";
 import Spinner from "../../containers/Spinner";
 
-const Content = lazy(() => importMDX("../Props/rating.md"));
+const Content = lazy(() => importMDX("../Props/Rating.mdx"));
 
 export default function RatingPlayground() {
   return (
diff --git a/src/content/SearchBar/index.jsx b/src/content/SearchBar/index.jsx
index b2b6205..3f82354 100644
--- a/src/content/SearchBar/index.jsx
+++ b/src/content/SearchBar/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./searchbar.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/searchbar.md"));
+const Content = lazy(() => importMDX("../Props/SearchBar.mdx"));
 
 export default function SearchBarPlayground() {
   return (
diff --git a/src/content/Slider/index.jsx b/src/content/Slider/index.jsx
index 59a66ba..d0c6ef5 100644
--- a/src/content/Slider/index.jsx
+++ b/src/content/Slider/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./slider.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/slider.md"));
+const Content = lazy(() => importMDX("../Props/Slider.mdx"));
 
 export default function SliderPlayground() {
   return (
diff --git a/src/content/SocialIcon/index.jsx b/src/content/SocialIcon/index.jsx
index 24efa1b..89749f9 100644
--- a/src/content/SocialIcon/index.jsx
+++ b/src/content/SocialIcon/index.jsx
@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./socialicon.playground.jsx";
-const Content = lazy(() => importMDX("../Props/social_icons.md"));
+const Content = lazy(() => importMDX("../Props/SocialIcon.mdx"));
 
 export default function SocialIconPlayground() {
   return (
diff --git a/src/content/SpeedDial/index.jsx b/src/content/SpeedDial/index.jsx
index 341214b..c46f331 100644
--- a/src/content/SpeedDial/index.jsx
+++ b/src/content/SpeedDial/index.jsx
@@ -4,7 +4,7 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 import Playground from "./speeddial.playground";
 
-const Content = lazy(() => importMDX("../Props/speeddial.md"));
+const Content = lazy(() => importMDX("../Props/SpeedDial.mdx"));
 
 export default function SpeedDialPlayground() {
   return (
diff --git a/src/content/Switch/index.jsx b/src/content/Switch/index.jsx
index 30b9c0f..d1a2012 100644
--- a/src/content/Switch/index.jsx
+++ b/src/content/Switch/index.jsx
@@ -3,7 +3,7 @@ import { importMDX } from "mdx.macro";
 
 import PropDrawer from "../../components/PropDrawer";
 import Playground from "./switch.playground.jsx";
-const Content = lazy(() => importMDX("../Props/switch.md"));
+const Content = lazy(() => importMDX("../Props/Switch.mdx"));
 
 export default function SwitchPlayground() {
   return (
diff --git a/src/content/Tab/index.jsx b/src/content/Tab/index.jsx
index 856a263..f072677 100644
--- a/src/content/Tab/index.jsx
+++ b/src/content/Tab/index.jsx
@@ -3,7 +3,7 @@ import { importMDX } from "mdx.macro";
 
 import PropDrawer from "../../components/PropDrawer";
 import Playground from "./tab.playground.jsx";
-const Content = lazy(() => importMDX("../Props/tab.md"));
+const Content = lazy(() => importMDX("../Props/Tab.mdx"));
 
 export default function TabPlayground() {
   return (
diff --git a/src/content/Text/index.jsx b/src/content/Text/index.jsx
index c8ffe94..4ba26a3 100644
--- a/src/content/Text/index.jsx
+++ b/src/content/Text/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./text.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/text.md"));
+const Content = lazy(() => importMDX("../Props/Text.mdx"));
 
 export default function TextPlayground() {
   return (
diff --git a/src/content/Tile/index.jsx b/src/content/Tile/index.jsx
index 38b97b8..9343a4f 100644
--- a/src/content/Tile/index.jsx
+++ b/src/content/Tile/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./tile.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/tile.md"));
+const Content = lazy(() => importMDX("../Props/Tile.mdx"));
 
 export default function TilePlayground() {
   return (
diff --git a/src/content/ToolTip/index.jsx b/src/content/ToolTip/index.jsx
index a248cc0..319881d 100644
--- a/src/content/ToolTip/index.jsx
+++ b/src/content/ToolTip/index.jsx
@@ -5,7 +5,7 @@ import PropDrawer from "../../components/PropDrawer";
 import Spinner from "../../containers/Spinner";
 import Playground from "./tooltip.playground.jsx";
 
-const Content = lazy(() => importMDX("../Props/tooltip.md"));
+const Content = lazy(() => importMDX("../Props/Tooltip.mdx"));
 
 export default function ToolTipPlayground() {
   return (