diff --git a/docs/pages/configuration/basic-configuration.md b/docs/pages/configuration/basic-configuration.mdx
similarity index 95%
rename from docs/pages/configuration/basic-configuration.md
rename to docs/pages/configuration/basic-configuration.mdx
index 5a0f776d..8c5d10b8 100644
--- a/docs/pages/configuration/basic-configuration.md
+++ b/docs/pages/configuration/basic-configuration.mdx
@@ -1,3 +1,5 @@
+import { Callout } from 'nextra/components'
+
 # Basic Configuration
 
 ## Configuration
@@ -69,12 +71,13 @@ Transformer configurations.
 - `transformer.jsc`: [jsc](https://swc.rs/docs/configuration/compilation) config in swc.
 - `transformer.stripFlowPackageNames`: Package names to strip flow syntax from (Defaults to `['react-native']`)
 - `transformer.fullyTransformPackageNames`: Package names to fully transform with [metro-react-native-babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset) from
-  :::warning
-  This may slow down code transformation
-  :::
 - `transformer.additionalTransformRules`: Additional transform rules. This rules will be applied before phase of transform to es5
   - For more details, go to [Custom Transformation](/configuration/custom-transformation)
 
+<Callout type="warning">
+  `transformer.fullyTransformPackageNames` may slow down code transformation
+</Callout>
+
 ### web
 
 Web configurations.
@@ -89,7 +92,8 @@ For more details, go to [Custom Plugins](/configuration/custom-plugins)
 
 ## Types
 
-<details><summary>Config</summary>
+<details>
+<summary>Config</summary>
 
 ```ts
 interface Config {
@@ -214,7 +218,8 @@ interface Config {
 
 </details>
 
-<details><summary>Custom Transform Rules</summary>
+<details>
+<summary>Custom Transform Rules</summary>
 
 
 ```ts
@@ -235,7 +240,8 @@ type BabelTransformRule = TransformRuleBase<import('@babel/core').Options>;
 
 </details>
 
-<details><summary>ReportableEvent</summary>
+<details>
+<summary>ReportableEvent</summary>
 
 ```ts
 type ReportableEvent = ClientLogEvent;
diff --git a/docs/pages/troubleshooting/new-architecture.md b/docs/pages/troubleshooting/new-architecture.mdx
similarity index 95%
rename from docs/pages/troubleshooting/new-architecture.md
rename to docs/pages/troubleshooting/new-architecture.mdx
index 03eae47c..29ea8ba6 100644
--- a/docs/pages/troubleshooting/new-architecture.md
+++ b/docs/pages/troubleshooting/new-architecture.mdx
@@ -1,8 +1,10 @@
+import { Callout } from 'nextra/components'
+
 # New Architecture
 
-:::warning
+<Callout type="warning">
 [New Architecture](https://reactnative.dev/docs/the-new-architecture/landing-page) is experimental.
-:::
+</Callout>
 
 ## react-native-reanimated
 
diff --git a/docs/pages/web/web-support.md b/docs/pages/web/web-support.mdx
similarity index 92%
rename from docs/pages/web/web-support.md
rename to docs/pages/web/web-support.mdx
index 4f7d8ff5..0f036d51 100644
--- a/docs/pages/web/web-support.md
+++ b/docs/pages/web/web-support.mdx
@@ -1,3 +1,7 @@
+import { Callout } from 'nextra/components'
+
+# Web Support
+
 React Native Esbuild supports all platforms, including Web.
 
 See a demo application built with a web target [here](https://rne-web-demo.vercel.app).
@@ -12,9 +16,9 @@ Install [react-native-web](https://necolas.github.io/react-native-web) and [reac
 yarn add react-native-web react-dom
 ```
 
-:::warning
-`react-dom` version must match the `react` version in your package.json
-:::
+<Callout type="warning">
+`react-dom` version must match with the `react` version in your package.json
+</Callout>
 
 ### Create Web Entry
 
@@ -125,11 +129,11 @@ exports.default{
 
 You can replace the `{{name}}` format strings in template through the `web.placeholders` configuration.
 
-:::info
+<Callout type="info">
 The reserved placeholder names are `_` prefixed name. It will be overridden your placeholders.
 
 - `_bundle`: the bundle file path
-:::
+</Callout>
 
 ```js
 // react-native-esbuild.config.js
@@ -138,7 +142,7 @@ exports.default = {
     placeholders: {
       placeholder_name: 'Hello, world!'
       // reserved placeholder name.
-      // it will be overridden by Esbuild.
+      // It will be overridden by bundler.
       _bundle: 'custom value',
     },
   },
diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx
index c14dba79..fae33d98 100644
--- a/docs/theme.config.tsx
+++ b/docs/theme.config.tsx
@@ -28,7 +28,7 @@ const config: DocsThemeConfig = {
   },
   head: () => {
     const { asPath, defaultLocale, locale } = useRouter()
-    const { frontMatter } = useConfig()
+    const { frontMatter, title } = useConfig()
     const url =
       'https://react-native-esbuild.vercel.app' +
       (defaultLocale === locale ? asPath : `/${locale}${asPath}`)
@@ -42,6 +42,7 @@ const config: DocsThemeConfig = {
           property="og:description"
           content={frontMatter.description || 'Document'}
         />
+        <title>{`${title} - RNE`}</title>
       </>
     )
   }