diff --git a/frontend/docs/react.md b/frontend/docs/react.md
deleted file mode 100644
index 182422e..0000000
--- a/frontend/docs/react.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-id: react
-title: React
-hide_title: false
-hide_table_of_contents: false
-keywords:
-  - final space
-  - finalspace
-  - finalspaceapi
-  - final space wiki
-  - api
-  - restapi
-  - rest api
-  - example
-  - react
-description: A live example of the Final Space API using React.
----
-
-You can play around with this live example and add new features, styles and so much more.
-
-
-:::tip Hint 
-Uncomment the following line:
- ```jsx
- <div className="card--text">{character.species}</div>
- ```
-
- PS: remove `{/* */}`
-:::
-
-
-```jsx live
-function App() {
-  const [data, setData] = useState([]);
-
-  const cardStyle = {
-    boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)",
-    padding: "12px",
-    marginBottom: "10px",
-    textAlign: "center",
-    backgroundColor: "#fafafa",
-  };
-  const rootStyle = {
-    margin: "0 auto",
-    width: "max-content",
-    padding: "0 10px",
-  };
-  useEffect(() => {
-    fetch("https://finalspaceapi.com/api/v0/character")
-      .then((res) => res.json())
-      .then((data) => setData(data));
-  }, []);
-
-  return (
-    <div className="root" style={rootStyle}>
-      {data.slice(0, 5).map((character) => (
-        <div className="card" style={cardStyle} key={character.id}>
-          <div className="card--image">
-            <img src={character.img_url} alt={character.name} />{" "}
-          </div>
-          <div className="card--title">{character.name}</div>
-         {/* <div className="card--text">{character.species}</div>*/}
-        </div>
-      ))}
-    </div>
-  );
-}
-```
diff --git a/frontend/docs/react.mdx b/frontend/docs/react.mdx
new file mode 100644
index 0000000..babddb1
--- /dev/null
+++ b/frontend/docs/react.mdx
@@ -0,0 +1,123 @@
+---
+id: react
+title: React
+hide_title: false
+hide_table_of_contents: false
+keywords:
+  - final space
+  - finalspace
+  - finalspaceapi
+  - final space wiki
+  - api
+  - restapi
+  - rest api
+  - example
+  - react
+description: A live example of the Final Space API using React.
+---
+
+You can play around with this live example and add new features, styles and so much more.
+
+:::tip Hint 
+Uncomment the following line:
+ ```jsx
+ <div className="card--text">{character.species}</div>
+ ```
+
+ PS: remove `{/* */}`
+:::
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+  defaultValue="react"
+  values={[
+    {label: 'React', value: 'react'},
+    {label: 'Axios', value: 'axios'},
+  ]}>
+  <TabItem value="react">
+
+```jsx live
+function App() {
+  const [data, setData] = useState([]);
+
+  const cardStyle = {
+    boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)",
+    padding: "12px",
+    marginBottom: "10px",
+    textAlign: "center",
+    backgroundColor: "#fafafa",
+  };
+  const rootStyle = {
+    margin: "0 auto",
+    width: "max-content",
+    padding: "0 10px",
+  };
+  useEffect(() => {
+    fetch("https://finalspaceapi.com/api/v0/character")
+      .then((res) => res.json())
+      .then((data) => setData(data));
+  }, []);
+
+  return (
+    <div clasName="root" style={rootStyle}>
+      {data.slice(0, 5).map((character) => (
+        <div className="card" style={cardStyle} key={character.id}>
+          <div className="card--image">
+            <img src={character.img_url} alt={character.name} />{" "}
+          </div>
+          <div className="card--title">{character.name}</div>
+        {/* <div className="card--text">{character.species}</div>*/}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+  </TabItem>
+  <TabItem value="axios">
+
+```jsx
+import axios from 'axios'
+
+function App() {
+  const [data, setData] = useState([]);
+
+  const cardStyle = {
+    boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)",
+    padding: "12px",
+    marginBottom: "10px",
+    textAlign: "center",
+    backgroundColor: "#fafafa",
+  };
+  const rootStyle = {
+    margin: "0 auto",
+    width: "max-content",
+    padding: "0 10px",
+  };
+  useEffect(() => {
+    axios.get("https://finalspaceapi.com/api/v0/character")
+      .then((res) => res.json())
+      .then((data) => setData(data));
+  }, []);
+
+  return (
+    <div clasName="root" style={rootStyle}>
+      {data.slice(0, 5).map((character) => (
+        <div className="card" style={cardStyle} key={character.id}>
+          <div className="card--image">
+            <img src={character.img_url} alt={character.name} />{" "}
+          </div>
+          <div className="card--title">{character.name}</div>
+        {/* <div className="card--text">{character.species}</div>*/}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+  </TabItem>
+</Tabs>
diff --git a/frontend/package.json b/frontend/package.json
index 1c958a5..0f139c0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
         "@docusaurus/preset-classic": "2.0.0-alpha.65",
         "@docusaurus/theme-live-codeblock": "2.0.0-alpha.39",
         "@mdx-js/react": "^1.5.8",
+        "axios": "^0.20.0",
         "clsx": "^1.1.1",
         "react": "^16.8.4",
         "react-dom": "^16.8.4"