diff --git a/README.md b/README.md
index 3d58a2f07..eb3398286 100755
--- a/README.md
+++ b/README.md
@@ -89,13 +89,13 @@ This boilerplate is made for creating chrome extensions using React and Typescri
### Chakra UI
-**First, install the library:**
+**1. Install the library:**
```bash
$ pnpm install @chakra-ui/react @emotion/cache @emotion/react
```
-**Then, you should add the code to `vite.config.ts` for [Ignore unnecessary warnings](https://github.com/TanStack/query/pull/5161#issuecomment-1506683450)**
+**2. You should add the code to `vite.config.ts` for [Ignore unnecessary warnings](https://github.com/TanStack/query/pull/5161#issuecomment-1506683450)**
vite.config.ts
@@ -122,7 +122,7 @@ export default defineConfig({
-**Now, you can use Chakra UI in your project:**
+**3. You can use Chakra UI in your project:**
src/pages/popup/Popup.tsx
@@ -137,7 +137,11 @@ export default function Popup() {
-**If you want to use Chakra UI in the content script, you need to add the following code:**
+---
+
+> if you don't want to use Chakra UI in the content script, you can skip 4,5 step.
+
+**4. If you want to use Chakra UI in the content script, you need to add the following code:**
src/pages/content/ui/CustomChakraProvider.tsx
@@ -233,7 +237,7 @@ export default function EmotionCacheProvider({ children, rootId }: { rootId: str
-**And, fix the `src/pages/content/index.tsx` file:**
+**5. Fix the `src/pages/content/index.tsx` file:**
src/pages/content/index.tsx