diff --git a/injectLatestProps.js b/injectLatestProps.js
index 669d1e0..3db1aa9 100644
--- a/injectLatestProps.js
+++ b/injectLatestProps.js
@@ -38,11 +38,10 @@ try {
 
   // Point 4
   cpDir.sync(
-    "./react-native-elements/website/docs/main",
+    "./react-native-elements/website/docs/main/props",
     "./src/content/Props"
   );
   console.log("✔️ Copied Props to src/content/Props");
 } catch (err) {
   console.error(err);
-  return;
-}
\ No newline at end of file
+}
diff --git a/src/content/AirbnbRating/index.jsx b/src/content/AirbnbRating/index.jsx
index 72673d4..542f844 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/AirbnbRating.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 (