diff --git a/src/content/Avatar/index.jsx b/src/content/Avatar/index.jsx
index 21c5c66..ffa2b7a 100644
--- a/src/content/Avatar/index.jsx
+++ b/src/content/Avatar/index.jsx
@@ -4,9 +4,9 @@ import { importMDX } from "mdx.macro";
 import PropDrawer from "../../components/PropDrawer";
 
 const Content = lazy(() => importMDX("./avatar.mdx"));
-class App extends Component {
-  render() {
-    return (
+
+export default function Avatar(){
+  return (
       <div>
         <Playground />
         <Suspense fallback={<div>Loading...</div>}>
@@ -16,6 +16,4 @@ class App extends Component {
         </Suspense>
       </div>
     );
-  }
 }
-export default App;
diff --git a/src/content/Button/index.jsx b/src/content/Button/index.jsx
index 19575fb..42f1a80 100644
--- a/src/content/Button/index.jsx
+++ b/src/content/Button/index.jsx
@@ -5,8 +5,7 @@ import Playground from "./button.playground.jsx";
 import PropDrawer from "../../components/PropDrawer";
 
 const Content = lazy(() => importMDX("./button.mdx"));
-class App extends Component {
-  render() {
+export default function Button() {
     return (
       <div>
         <Playground />
@@ -17,6 +16,4 @@ class App extends Component {
         </Suspense>
       </div>
     );
-  }
 }
-export default App;