diff --git a/src/components/ReactPlayground/CodeEditor/Editor/ata.ts b/src/components/Playground/CodeEditor/Editor/ata.ts
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/Editor/ata.ts
rename to src/components/Playground/CodeEditor/Editor/ata.ts
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/editor.scss b/src/components/Playground/CodeEditor/Editor/editor.scss
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/Editor/editor.scss
rename to src/components/Playground/CodeEditor/Editor/editor.scss
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts b/src/components/Playground/CodeEditor/Editor/hooks.ts
similarity index 97%
rename from src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
rename to src/components/Playground/CodeEditor/Editor/hooks.ts
index 7535cc7..b1f591f 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/hooks.ts
+++ b/src/components/Playground/CodeEditor/Editor/hooks.ts
@@ -2,7 +2,7 @@ import { editor, IPosition, Selection } from 'monaco-editor'
 import ScrollType = editor.ScrollType
 import { Monaco } from '@monaco-editor/react'
 import { getWorker, MonacoJsxSyntaxHighlight } from 'monaco-jsx-syntax-highlight'
-import { createATA, TypeHelper } from '@/components/ReactPlayground/CodeEditor/Editor/ata'
+import { createATA, TypeHelper } from '@/components/Playground/CodeEditor/Editor/ata'
 
 export const useEditor = () => {
     const doOpenEditor = (
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx
similarity index 88%
rename from src/components/ReactPlayground/CodeEditor/Editor/index.tsx
rename to src/components/Playground/CodeEditor/Editor/index.tsx
index 6eb1a40..aef15e8 100644
--- a/src/components/ReactPlayground/CodeEditor/Editor/index.tsx
+++ b/src/components/Playground/CodeEditor/Editor/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { editor, Selection } from 'monaco-editor'
 import MonacoEditor, { Monaco } from '@monaco-editor/react'
-import '@/components/ReactPlayground/CodeEditor/Editor/editor.scss'
-import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared'
-import { fileNameToLanguage } from '@/components/ReactPlayground/files'
-import { useEditor, useTypesProgress } from '@/components/ReactPlayground/CodeEditor/Editor/hooks'
-import { MonacoEditorConfig } from '@/components/ReactPlayground/CodeEditor/Editor/monacoConfig'
+import '@/components/Playground/CodeEditor/Editor/editor.scss'
+import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
+import { fileNameToLanguage } from '@/components/Playground/files'
+import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
+import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
 
 interface EditorProps {
     files?: IFiles
diff --git a/src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts b/src/components/Playground/CodeEditor/Editor/monacoConfig.ts
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/Editor/monacoConfig.ts
rename to src/components/Playground/CodeEditor/Editor/monacoConfig.ts
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx b/src/components/Playground/CodeEditor/FileSelector/Item.tsx
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/FileSelector/Item.tsx
rename to src/components/Playground/CodeEditor/FileSelector/Item.tsx
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss b/src/components/Playground/CodeEditor/FileSelector/file-selector.scss
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss
rename to src/components/Playground/CodeEditor/FileSelector/file-selector.scss
diff --git a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
similarity index 96%
rename from src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
rename to src/components/Playground/CodeEditor/FileSelector/index.tsx
index fd90ed9..5dc817e 100644
--- a/src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import '@/components/ReactPlayground/CodeEditor/FileSelector/file-selector.scss'
-import { IFiles } from '@/components/ReactPlayground/shared'
-import { ENTRY_FILE_NAME, IMPORT_MAP_FILE_NAME } from '@/components/ReactPlayground/files'
-import Item from '@/components/ReactPlayground/CodeEditor/FileSelector/Item'
+import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
+import { IFiles } from '@/components/Playground/shared'
+import { ENTRY_FILE_NAME, IMPORT_MAP_FILE_NAME } from '@/components/Playground/files'
+import Item from '@/components/Playground/CodeEditor/FileSelector/Item'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import FlexBox from '@/components/common/FlexBox'
 
diff --git a/src/components/ReactPlayground/CodeEditor/code-editor.scss b/src/components/Playground/CodeEditor/code-editor.scss
similarity index 100%
rename from src/components/ReactPlayground/CodeEditor/code-editor.scss
rename to src/components/Playground/CodeEditor/code-editor.scss
diff --git a/src/components/ReactPlayground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
similarity index 92%
rename from src/components/ReactPlayground/CodeEditor/index.tsx
rename to src/components/Playground/CodeEditor/index.tsx
index 41c7d74..8e7b635 100644
--- a/src/components/ReactPlayground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import _ from 'lodash'
-import '@/components/ReactPlayground/CodeEditor/code-editor.scss'
-import { IEditorOptions, IFiles, ITheme } from '@/components/ReactPlayground/shared'
-import { fileNameToLanguage } from '@/components/ReactPlayground/files'
-import FileSelector from '@/components/ReactPlayground/CodeEditor/FileSelector'
-import Editor from '@/components/ReactPlayground/CodeEditor/Editor'
+import '@/components/Playground/CodeEditor/code-editor.scss'
+import { IEditorOptions, IFiles, ITheme } from '@/components/Playground/shared'
+import { fileNameToLanguage } from '@/components/Playground/files'
+import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
+import Editor from '@/components/Playground/CodeEditor/Editor'
 import FitFullscreen from '@/components/common/FitFullscreen'
 import FlexBox from '@/components/common/FlexBox'
 
diff --git a/src/components/ReactPlayground/files.ts b/src/components/Playground/files.ts
similarity index 90%
rename from src/components/ReactPlayground/files.ts
rename to src/components/Playground/files.ts
index c3d37c3..0f90245 100644
--- a/src/components/ReactPlayground/files.ts
+++ b/src/components/Playground/files.ts
@@ -1,9 +1,9 @@
 import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
-import importMap from '@/components/ReactPlayground/template/import-map.json?raw'
-import AppCss from '@/components/ReactPlayground/template/src/App.css?raw'
-import App from '@/components/ReactPlayground/template/src/App.tsx?raw'
-import main from '@/components/ReactPlayground/template/src/main.tsx?raw'
-import { ICustomFiles, IFiles, IImportMap } from '@/components/ReactPlayground/shared'
+import importMap from '@/components/Playground/template/import-map.json?raw'
+import AppCss from '@/components/Playground/template/src/App.css?raw'
+import App from '@/components/Playground/template/src/App.tsx?raw'
+import main from '@/components/Playground/template/src/main.tsx?raw'
+import { ICustomFiles, IFiles, IImportMap } from '@/components/Playground/shared'
 
 export const MAIN_FILE_NAME = 'App.tsx'
 export const IMPORT_MAP_FILE_NAME = 'import-map.json'
diff --git a/src/components/ReactPlayground/index.tsx b/src/components/Playground/index.tsx
similarity index 66%
rename from src/components/ReactPlayground/index.tsx
rename to src/components/Playground/index.tsx
index 853cfea..7e7694c 100644
--- a/src/components/ReactPlayground/index.tsx
+++ b/src/components/Playground/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { IPlayground } from '@/components/ReactPlayground/shared'
+import { IPlayground } from '@/components/Playground/shared'
 
 const ReactPlayground: React.FC<IPlayground> = () => {
     return <></>
diff --git a/src/components/ReactPlayground/shared.ts b/src/components/Playground/shared.ts
similarity index 100%
rename from src/components/ReactPlayground/shared.ts
rename to src/components/Playground/shared.ts
diff --git a/src/components/ReactPlayground/template/.eslintrc.cjs b/src/components/Playground/template/.eslintrc.cjs
similarity index 100%
rename from src/components/ReactPlayground/template/.eslintrc.cjs
rename to src/components/Playground/template/.eslintrc.cjs
diff --git a/src/components/ReactPlayground/template/.gitignore b/src/components/Playground/template/.gitignore
similarity index 100%
rename from src/components/ReactPlayground/template/.gitignore
rename to src/components/Playground/template/.gitignore
diff --git a/src/components/ReactPlayground/template/README.md b/src/components/Playground/template/README.md
similarity index 100%
rename from src/components/ReactPlayground/template/README.md
rename to src/components/Playground/template/README.md
diff --git a/src/components/ReactPlayground/template/import-map.json b/src/components/Playground/template/import-map.json
similarity index 100%
rename from src/components/ReactPlayground/template/import-map.json
rename to src/components/Playground/template/import-map.json
diff --git a/src/components/ReactPlayground/template/index.html b/src/components/Playground/template/index.html
similarity index 100%
rename from src/components/ReactPlayground/template/index.html
rename to src/components/Playground/template/index.html
diff --git a/src/components/ReactPlayground/template/package.json b/src/components/Playground/template/package.json
similarity index 100%
rename from src/components/ReactPlayground/template/package.json
rename to src/components/Playground/template/package.json
diff --git a/src/components/ReactPlayground/template/public/vite.svg b/src/components/Playground/template/public/vite.svg
similarity index 100%
rename from src/components/ReactPlayground/template/public/vite.svg
rename to src/components/Playground/template/public/vite.svg
diff --git a/src/components/ReactPlayground/template/src/App.css b/src/components/Playground/template/src/App.css
similarity index 100%
rename from src/components/ReactPlayground/template/src/App.css
rename to src/components/Playground/template/src/App.css
diff --git a/src/components/ReactPlayground/template/src/App.tsx b/src/components/Playground/template/src/App.tsx
similarity index 100%
rename from src/components/ReactPlayground/template/src/App.tsx
rename to src/components/Playground/template/src/App.tsx
diff --git a/src/components/ReactPlayground/template/src/main.tsx b/src/components/Playground/template/src/main.tsx
similarity index 100%
rename from src/components/ReactPlayground/template/src/main.tsx
rename to src/components/Playground/template/src/main.tsx
diff --git a/src/components/ReactPlayground/template/tsconfig.json b/src/components/Playground/template/tsconfig.json
similarity index 100%
rename from src/components/ReactPlayground/template/tsconfig.json
rename to src/components/Playground/template/tsconfig.json
diff --git a/src/components/ReactPlayground/template/tsconfig.node.json b/src/components/Playground/template/tsconfig.node.json
similarity index 100%
rename from src/components/ReactPlayground/template/tsconfig.node.json
rename to src/components/Playground/template/tsconfig.node.json
diff --git a/src/components/ReactPlayground/template/vite.config.js b/src/components/Playground/template/vite.config.js
similarity index 100%
rename from src/components/ReactPlayground/template/vite.config.js
rename to src/components/Playground/template/vite.config.js
diff --git a/src/components/ReactPlayground/utils.ts b/src/components/Playground/utils.ts
similarity index 89%
rename from src/components/ReactPlayground/utils.ts
rename to src/components/Playground/utils.ts
index fc87e25..5cfabc2 100644
--- a/src/components/ReactPlayground/utils.ts
+++ b/src/components/Playground/utils.ts
@@ -1,4 +1,4 @@
-import { ITheme } from '@/components/ReactPlayground/shared'
+import { ITheme } from '@/components/Playground/shared'
 
 const STORAGE_DARK_THEME = 'react-playground-prefer-dark'
 
diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx
index b90d258..e4c44d4 100644
--- a/src/pages/OnlineEditor.tsx
+++ b/src/pages/OnlineEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import CodeEditor from '@/components/ReactPlayground/CodeEditor'
-import { initFiles } from '@/components/ReactPlayground/files'
-import { IFiles } from '@/components/ReactPlayground/shared'
+import CodeEditor from '@/components/Playground/CodeEditor'
+import { initFiles } from '@/components/Playground/files'
+import { IFiles } from '@/components/Playground/shared'
 
 const OnlineEditor: React.FC = () => {
     const [files, setFiles] = useState<IFiles>(initFiles)