diff --git a/config/webpack.config.js b/config/webpack.config.js
index a7c0929ebd94c50ccfd34dcec85ff1c5ba6f80b5..039fd880bd9cc9c3feec46abd7b93fe654b3fc06 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -338,6 +338,7 @@ module.exports = function (webpackEnv) {
         '@': paths.appSrc,
         '@img': `${paths.appSrc}/public/img`,
         '@utils': `${paths.appSrc}/common/utils`,
+        '@apps': `${paths.appSrc}/pages/apps`
       },
       plugins: [
         // Prevents users from importing files from outside of src/ (or node_modules/).
diff --git a/mock/date/index.js b/mock/date/index.js
index 966fcb6df67df51cf8c7a4940c75a9aece7f394e..5bc2dcd0c37610e585866ee3bf4d8fed99c9d708 100644
--- a/mock/date/index.js
+++ b/mock/date/index.js
@@ -8,6 +8,10 @@ const userInfo = Mock.mock({
       "image": {
         type: 0,
         src: 'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png'
+      },
+      openWith: {
+        type: 0,
+        path: 'https://www.ynedu.plus'
       }
     }
   ],
@@ -18,6 +22,10 @@ const userInfo = Mock.mock({
       "image": {
         type: 0,
         src: 'https://react-desktop.oss-cn-shenzhen.aliyuncs.com/images/logo/file/file.png'
+      },
+      openWith: {
+        type: 1,
+        name: 'userinfo'
       }
     }
   ],
diff --git a/src/App.tsx b/src/App.tsx
index 98898069eda278ad3005467a40f98abd5caaade0..411f21f1d345975344b3a0e331a7fa7461fe45ee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,10 +2,10 @@ import React from 'react'
 import { Spin } from 'antd'
 import styles from './App.module.scss'
 import { Routes, Route } from 'react-router-dom'
-import Desktop from './pages/Desktop'
-import Apps from './pages/Apps'
+import Desktop from './pages/desktop'
+import Apps from './pages/apps'
 import getToken from '@utils/getToken'
-import Login from './pages/Login'
+import Login from './pages/login'
 
 function App() {
   const [isLoad, setIsLoad] = React.useState<boolean>(false)
@@ -19,7 +19,7 @@ function App() {
       {isLoad ? (
         <Routes>
           <Route path="/" element={<Desktop />} />
-          <Route path="/apps" element={<Apps />} />
+          <Route path="/apps/*" element={<Apps />} />
           <Route path="/login" element={<Login />} />
         </Routes>
       ) : (
diff --git a/src/common/constants/index.ts b/src/common/constants/index.ts
index 4eb19e442b63ae3c554f8f843f584586b417dd0c..07ad684da96b1f8a1906b7ffe422878cf7ca11d3 100644
--- a/src/common/constants/index.ts
+++ b/src/common/constants/index.ts
@@ -9,12 +9,21 @@ const WINDOW_STATUS = {
 const WINDOW_DRAG = {
   RIGHT: 1,
   BOTTOM: 2,
-  RIGHT_BOTTOM: 3
+  RIGHT_BOTTOM: 3,
+  TITLE: 4
 }
 
 // 窗口最小宽高
 const WINDOW_MIN = 300
 
+// 窗口打开方式
+const WINDOW_OPEN_WITH = {
+  IFRAME: 0, // iframe打开
+  COMPONENT: 1, // 组件引用
+  BLANK: 2, // 新标签
+  INLINE: 3 // 内部跳转
+}
+
 // 图标类型
 const IMAGE_TYPE = {
   IMG: 0, // 图片
@@ -35,4 +44,11 @@ const GENDER = {
   SECRECY: 2 // 保密
 }
 
-export { WINDOW_STATUS, IMAGE_TYPE, RESPONSE_CODE, WINDOW_DRAG, WINDOW_MIN }
+export {
+  WINDOW_STATUS,
+  IMAGE_TYPE,
+  RESPONSE_CODE,
+  WINDOW_DRAG,
+  WINDOW_MIN,
+  WINDOW_OPEN_WITH
+}
diff --git a/src/pages/Apps/index.tsx b/src/pages/Apps/index.tsx
deleted file mode 100644
index 26b1a2af5ec0c544127cdfb025decdcd47dac29a..0000000000000000000000000000000000000000
--- a/src/pages/Apps/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-
-const Apps: React.FC = () => {
-  return <div>apps</div>
-}
-
-export default Apps
diff --git a/src/pages/apps/index.tsx b/src/pages/apps/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..37047113eeee59a537c338ebd073f771a104d56f
--- /dev/null
+++ b/src/pages/apps/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Routes, Route } from 'react-router-dom'
+import Management from './management'
+
+const Apps: React.FC = () => {
+  return (
+    <Routes>
+      asd
+      <Route path="/manage/*" element={<Management />} />
+    </Routes>
+  )
+}
+
+export default Apps
diff --git a/src/pages/apps/management/index.tsx b/src/pages/apps/management/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dda32313050977d7da1b09080b4d722bdeec4ad1
--- /dev/null
+++ b/src/pages/apps/management/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Routes, Route } from 'react-router-dom'
+import Userinfo from './user/userinfo'
+
+const Management: React.FC = () => {
+  return (
+    <Routes>
+      <Route path="/userinfo" element={<Userinfo />} />
+    </Routes>
+  )
+}
+
+export default Management
diff --git a/src/pages/apps/management/user/userinfo/index.tsx b/src/pages/apps/management/user/userinfo/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..28288636177f8200323d55f6c9b372ca6e9ebc23
--- /dev/null
+++ b/src/pages/apps/management/user/userinfo/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Userinfo: React.FC = () => {
+  return (
+    <div>
+      <div>asd</div>
+      <div>content</div>
+    </div>
+  )
+}
+
+export default Userinfo
diff --git a/src/pages/Desktop/Desk/Apps/index.module.scss b/src/pages/desktop/Desk/Apps/index.module.scss
similarity index 100%
rename from src/pages/Desktop/Desk/Apps/index.module.scss
rename to src/pages/desktop/Desk/Apps/index.module.scss
diff --git a/src/pages/Desktop/Desk/Apps/index.tsx b/src/pages/desktop/Desk/Apps/index.tsx
similarity index 100%
rename from src/pages/Desktop/Desk/Apps/index.tsx
rename to src/pages/desktop/Desk/Apps/index.tsx
diff --git a/src/pages/Desktop/Desk/index.module.scss b/src/pages/desktop/Desk/index.module.scss
similarity index 100%
rename from src/pages/Desktop/Desk/index.module.scss
rename to src/pages/desktop/Desk/index.module.scss
diff --git a/src/pages/Desktop/Desk/index.tsx b/src/pages/desktop/Desk/index.tsx
similarity index 100%
rename from src/pages/Desktop/Desk/index.tsx
rename to src/pages/desktop/Desk/index.tsx
diff --git a/src/pages/Desktop/Mask/index.module.scss b/src/pages/desktop/Mask/index.module.scss
similarity index 100%
rename from src/pages/Desktop/Mask/index.module.scss
rename to src/pages/desktop/Mask/index.module.scss
diff --git a/src/pages/Desktop/Mask/index.tsx b/src/pages/desktop/Mask/index.tsx
similarity index 100%
rename from src/pages/Desktop/Mask/index.tsx
rename to src/pages/desktop/Mask/index.tsx
diff --git a/src/pages/Desktop/StartMenu/Application/index.module.scss b/src/pages/desktop/StartMenu/Application/index.module.scss
similarity index 100%
rename from src/pages/Desktop/StartMenu/Application/index.module.scss
rename to src/pages/desktop/StartMenu/Application/index.module.scss
diff --git a/src/pages/Desktop/StartMenu/Application/index.tsx b/src/pages/desktop/StartMenu/Application/index.tsx
similarity index 100%
rename from src/pages/Desktop/StartMenu/Application/index.tsx
rename to src/pages/desktop/StartMenu/Application/index.tsx
diff --git a/src/pages/Desktop/StartMenu/Control/index.module.scss b/src/pages/desktop/StartMenu/Control/index.module.scss
similarity index 100%
rename from src/pages/Desktop/StartMenu/Control/index.module.scss
rename to src/pages/desktop/StartMenu/Control/index.module.scss
diff --git a/src/pages/Desktop/StartMenu/Control/index.tsx b/src/pages/desktop/StartMenu/Control/index.tsx
similarity index 100%
rename from src/pages/Desktop/StartMenu/Control/index.tsx
rename to src/pages/desktop/StartMenu/Control/index.tsx
diff --git a/src/pages/Desktop/StartMenu/index.module.scss b/src/pages/desktop/StartMenu/index.module.scss
similarity index 100%
rename from src/pages/Desktop/StartMenu/index.module.scss
rename to src/pages/desktop/StartMenu/index.module.scss
diff --git a/src/pages/Desktop/StartMenu/index.tsx b/src/pages/desktop/StartMenu/index.tsx
similarity index 100%
rename from src/pages/Desktop/StartMenu/index.tsx
rename to src/pages/desktop/StartMenu/index.tsx
diff --git a/src/pages/Desktop/StartToolsBar/DateTime/index.module.scss b/src/pages/desktop/StartToolsBar/DateTime/index.module.scss
similarity index 100%
rename from src/pages/Desktop/StartToolsBar/DateTime/index.module.scss
rename to src/pages/desktop/StartToolsBar/DateTime/index.module.scss
diff --git a/src/pages/Desktop/StartToolsBar/DateTime/index.tsx b/src/pages/desktop/StartToolsBar/DateTime/index.tsx
similarity index 100%
rename from src/pages/Desktop/StartToolsBar/DateTime/index.tsx
rename to src/pages/desktop/StartToolsBar/DateTime/index.tsx
diff --git a/src/pages/Desktop/StartToolsBar/WindonBar/index.module.scss b/src/pages/desktop/StartToolsBar/WindonBar/index.module.scss
similarity index 100%
rename from src/pages/Desktop/StartToolsBar/WindonBar/index.module.scss
rename to src/pages/desktop/StartToolsBar/WindonBar/index.module.scss
diff --git a/src/pages/Desktop/StartToolsBar/WindonBar/index.tsx b/src/pages/desktop/StartToolsBar/WindonBar/index.tsx
similarity index 100%
rename from src/pages/Desktop/StartToolsBar/WindonBar/index.tsx
rename to src/pages/desktop/StartToolsBar/WindonBar/index.tsx
diff --git a/src/pages/Desktop/StartToolsBar/index.module.scss b/src/pages/desktop/StartToolsBar/index.module.scss
similarity index 100%
rename from src/pages/Desktop/StartToolsBar/index.module.scss
rename to src/pages/desktop/StartToolsBar/index.module.scss
diff --git a/src/pages/Desktop/StartToolsBar/index.tsx b/src/pages/desktop/StartToolsBar/index.tsx
similarity index 93%
rename from src/pages/Desktop/StartToolsBar/index.tsx
rename to src/pages/desktop/StartToolsBar/index.tsx
index 78c0d28579b05c099317cf8550359e4a7a72228c..71a189735b667c72ff202b04ec5a53e44f1c6ac2 100644
--- a/src/pages/Desktop/StartToolsBar/index.tsx
+++ b/src/pages/desktop/StartToolsBar/index.tsx
@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 import startImg from '@img/icon/start/home.png'
 import useStore, { MyState } from '@/store'
 import WindowBar from './WindonBar'
-import DateTime from '@/pages/Desktop/StartToolsBar/DateTime'
+import DateTime from './DateTime'
 
 const StartToolsBar: React.FC = () => {
   const setShowStartMenu = useStore((state: MyState) => state.setShowStartMenu)
diff --git a/src/pages/desktop/Window/Open/ComponentsWith/PageComponents.tsx b/src/pages/desktop/Window/Open/ComponentsWith/PageComponents.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e92468abc80f522483ed8c2166d24134741de223
--- /dev/null
+++ b/src/pages/desktop/Window/Open/ComponentsWith/PageComponents.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import Userinfo from '@apps/management/user/userinfo'
+
+export type PageComponentName = 'userinfo'
+
+const PageComponents: Record<PageComponentName, React.ComponentType> = {
+  userinfo: Userinfo
+}
+
+export default PageComponents
diff --git a/src/pages/desktop/Window/Open/ComponentsWith/index.module.scss b/src/pages/desktop/Window/Open/ComponentsWith/index.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2384501f88121c9b4db00afa684bed7d5fa9e1cd
--- /dev/null
+++ b/src/pages/desktop/Window/Open/ComponentsWith/index.module.scss
@@ -0,0 +1,4 @@
+.page {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/pages/desktop/Window/Open/ComponentsWith/index.tsx b/src/pages/desktop/Window/Open/ComponentsWith/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dc35592dbdd18991d320eacd4f017f3369da17b1
--- /dev/null
+++ b/src/pages/desktop/Window/Open/ComponentsWith/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from './index.module.scss'
+import PageComponents, { PageComponentName } from './PageComponents'
+
+interface Props {
+  name: PageComponentName
+  windowId: string
+}
+
+const ComponentsWith: React.FC<Props> = ({ name }) => {
+  const PageComponent = PageComponents[name]
+  return (
+    <div className={styles.page}>
+      <PageComponent />
+    </div>
+  )
+}
+
+export default ComponentsWith
diff --git a/src/pages/desktop/Window/Open/IframeWith/index.module.scss b/src/pages/desktop/Window/Open/IframeWith/index.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d4b6594858d4d797f0f0d0e97dfd4df364e62986
--- /dev/null
+++ b/src/pages/desktop/Window/Open/IframeWith/index.module.scss
@@ -0,0 +1,21 @@
+.iframeBox {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/pages/desktop/Window/Open/IframeWith/index.tsx b/src/pages/desktop/Window/Open/IframeWith/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4a5d37cb03ea63ad092fc88efc9254c1eac8193e
--- /dev/null
+++ b/src/pages/desktop/Window/Open/IframeWith/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { Spin } from 'antd'
+
+interface Props {
+  path: string
+  windowId: string
+}
+
+const IframeWith: React.FC<Props> = ({ path, windowId }) => {
+  const [isLoad, setIsLoad] = React.useState<boolean>(false)
+  return (
+    <div className={styles.iframeBox}>
+      <iframe
+        className={styles.iframe}
+        title={`iframe_${windowId}`}
+        id={`window_iframe_${windowId}`}
+        src={path}
+        frameBorder="0"
+        onLoad={() => setIsLoad(true)}
+      />
+      {!isLoad && (
+        <div className={styles.loading}>
+          <Spin size="large" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default IframeWith
diff --git a/src/pages/desktop/Window/Open/index.tsx b/src/pages/desktop/Window/Open/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..45cc104de8c70c3c9df5bb6f20951c211cffdacb
--- /dev/null
+++ b/src/pages/desktop/Window/Open/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { OpenWith } from '@/store/deskSlice'
+import IframeWith from './IframeWith'
+import { WINDOW_OPEN_WITH } from '@/common/constants'
+import ComponentsWith from './ComponentsWith'
+import { PageComponentName } from './ComponentsWith/PageComponents'
+
+interface Props {
+  openWith: OpenWith
+  windowId: string
+}
+
+const Open: React.FC<Props> = ({ openWith, windowId }) => {
+  let content = <></>
+  if (openWith.type === WINDOW_OPEN_WITH.IFRAME) {
+    content = <IframeWith path={openWith.path as string} windowId={windowId} />
+  }
+  if (openWith.type === WINDOW_OPEN_WITH.COMPONENT) {
+    content = (
+      <ComponentsWith
+        name={openWith.name as PageComponentName}
+        windowId={windowId}
+      />
+    )
+  }
+  return content
+}
+
+export default Open
diff --git a/src/pages/Desktop/Window/WindowBox/Content/index.module.scss b/src/pages/desktop/Window/WindowBox/Content/index.module.scss
similarity index 73%
rename from src/pages/Desktop/Window/WindowBox/Content/index.module.scss
rename to src/pages/desktop/Window/WindowBox/Content/index.module.scss
index f48db137f88369321bed12145c9d00fd1239cc0d..102d90875454662e81cbac6cde96eb41481611f3 100644
--- a/src/pages/Desktop/Window/WindowBox/Content/index.module.scss
+++ b/src/pages/desktop/Window/WindowBox/Content/index.module.scss
@@ -1,6 +1,6 @@
 .content {
   width: 100%;
-  height: calc( 100% - #{$window-header-height} );
+  height: calc(100% - #{$window-header-height});
 }
 
 .loading {
diff --git a/src/pages/Desktop/Window/WindowBox/Content/index.tsx b/src/pages/desktop/Window/WindowBox/Content/index.tsx
similarity index 77%
rename from src/pages/Desktop/Window/WindowBox/Content/index.tsx
rename to src/pages/desktop/Window/WindowBox/Content/index.tsx
index 7b30cd47ddf341e96c813a932347c71c46d70121..73263320d53a76745d332f5bccc6e32377b58dfc 100644
--- a/src/pages/Desktop/Window/WindowBox/Content/index.tsx
+++ b/src/pages/desktop/Window/WindowBox/Content/index.tsx
@@ -5,10 +5,10 @@ import { Loading3QuartersOutlined } from '@ant-design/icons'
 
 interface Props {
   loading: boolean
-  children: React.ReactNode
+  windowChildren: React.ReactNode
 }
 
-const Content: React.FC<Props> = ({ loading, children }) => {
+const Content: React.FC<Props> = ({ loading, windowChildren }) => {
   return (
     <div className={styles.content}>
       {loading ? (
@@ -16,7 +16,7 @@ const Content: React.FC<Props> = ({ loading, children }) => {
           <Spin size="large" spinning={loading} />
         </div>
       ) : (
-        children
+        windowChildren
       )}
     </div>
   )
diff --git a/src/pages/Desktop/Window/WindowBox/Header/index.module.scss b/src/pages/desktop/Window/WindowBox/Header/index.module.scss
similarity index 100%
rename from src/pages/Desktop/Window/WindowBox/Header/index.module.scss
rename to src/pages/desktop/Window/WindowBox/Header/index.module.scss
diff --git a/src/pages/Desktop/Window/WindowBox/Header/index.tsx b/src/pages/desktop/Window/WindowBox/Header/index.tsx
similarity index 86%
rename from src/pages/Desktop/Window/WindowBox/Header/index.tsx
rename to src/pages/desktop/Window/WindowBox/Header/index.tsx
index 26b900ec8a36bba19f8afe3d805198d16511c303..ac04e2029c70a6c0d54cec55fc36ae264d99dbd6 100644
--- a/src/pages/Desktop/Window/WindowBox/Header/index.tsx
+++ b/src/pages/desktop/Window/WindowBox/Header/index.tsx
@@ -8,30 +8,25 @@ import {
 } from '@ant-design/icons'
 import classnames from 'classnames'
 import styles from './index.module.scss'
-import WindowContext from '@/pages/Desktop/Window/WindowContext'
+import WindowContext from '../../WindowContext'
 import useStore, { MyState } from '@/store'
-import { WINDOW_STATUS, WINDOW_MIN } from '@/common/constants'
+import { WINDOW_STATUS, WINDOW_MIN, WINDOW_DRAG } from '@/common/constants'
 import useMethods from '@utils/useMethods'
 import vars from '@/common/style/vars.scss'
+import { Drag } from '../index'
 
 interface Props {
   windowRef: RefObject<HTMLDivElement>
   setLoading: { (value: boolean): void }
+  drag: Drag
+  setDrag: { (value: Drag): void }
 }
 
-interface Drag {
-  startX: number
-  startY: number
-}
-
-const Header: React.FC<Props> = ({ windowRef, setLoading }) => {
+const Header: React.FC<Props> = ({ windowRef, setLoading, drag, setDrag }) => {
   const { window: windowObj, id: windowId } = React.useContext(WindowContext)
+  const editWindow = useStore((state: MyState) => state.editWindow)
   const editWindowStatus = useStore((state: MyState) => state.setWindowStatus)
   const closeWindow = useStore((state: MyState) => state.closeWindow)
-  const [drag, setDrag] = React.useState<Drag>({
-    startX: 0,
-    startY: 0
-  })
   const { mouseDown, mouseMove, mouseUp } = useMethods({
     mouseMove(event) {
       event.stopPropagation()
@@ -70,7 +65,8 @@ const Header: React.FC<Props> = ({ windowRef, setLoading }) => {
       const startY = event.clientY
       setDrag({
         startX,
-        startY
+        startY,
+        type: WINDOW_DRAG.TITLE
       })
       window.addEventListener('mousemove', mouseMove)
       window.onmouseup = mouseUp
@@ -83,12 +79,19 @@ const Header: React.FC<Props> = ({ windowRef, setLoading }) => {
       if (!windowRef.current) {
         setDrag({
           startX: 0,
-          startY: 0
+          startY: 0,
+          type: 0
         })
         return
       }
       windowObj.style.top = parseInt(windowRef.current.style.top)
       windowObj.style.left = parseInt(windowRef.current.style.left)
+      setDrag({
+        startX: 0,
+        startY: 0,
+        type: 0
+      })
+      editWindow(windowObj)
     }
   })
   return (
diff --git a/src/pages/Desktop/Window/WindowBox/index.module.scss b/src/pages/desktop/Window/WindowBox/index.module.scss
similarity index 100%
rename from src/pages/Desktop/Window/WindowBox/index.module.scss
rename to src/pages/desktop/Window/WindowBox/index.module.scss
diff --git a/src/pages/Desktop/Window/WindowBox/index.tsx b/src/pages/desktop/Window/WindowBox/index.tsx
similarity index 94%
rename from src/pages/Desktop/Window/WindowBox/index.tsx
rename to src/pages/desktop/Window/WindowBox/index.tsx
index 6b7ed75fe5fb9703ff42279bc928a4c169f6f54e..a887b6d805e4b8ba7415694982c0fcc176de4d61 100644
--- a/src/pages/Desktop/Window/WindowBox/index.tsx
+++ b/src/pages/desktop/Window/WindowBox/index.tsx
@@ -6,13 +6,13 @@ import { WINDOW_STATUS, WINDOW_DRAG, WINDOW_MIN } from '@/common/constants'
 import vars from '@/common/style/vars.scss'
 import useMethods from '@utils/useMethods'
 import useStore, { MyState } from '@/store'
-import Content from '@/pages/Desktop/Window/WindowBox/Content'
+import Content from './Content'
 
 interface Props {
   children: React.ReactNode
 }
 
-interface Drag {
+export interface Drag {
   startX: number
   startY: number
   type: number
@@ -133,9 +133,13 @@ const WindowBox: React.FC<Props> = props => {
   return (
     <div className={styles.windowBox} ref={windowRef} style={windowStyle}>
       <div className={styles.main} style={{ zIndex: windowStyle.zIndex + 1 }}>
-        <Header setLoading={setLoading} windowRef={windowRef} />
-        {/* eslint-disable-next-line react/no-children-prop */}
-        <Content loading={loading} children={props.children} />
+        <Header
+          setLoading={setLoading}
+          drag={drag}
+          setDrag={setDrag}
+          windowRef={windowRef}
+        />
+        <Content loading={loading} windowChildren={props.children} />
         {windowObj.status === WINDOW_STATUS.NORMAL && (
           <>
             <div
diff --git a/src/pages/Desktop/Window/WindowContext.ts b/src/pages/desktop/Window/WindowContext.ts
similarity index 100%
rename from src/pages/Desktop/Window/WindowContext.ts
rename to src/pages/desktop/Window/WindowContext.ts
diff --git a/src/pages/Desktop/Window/index.module.scss b/src/pages/desktop/Window/index.module.scss
similarity index 100%
rename from src/pages/Desktop/Window/index.module.scss
rename to src/pages/desktop/Window/index.module.scss
diff --git a/src/pages/Desktop/Window/index.tsx b/src/pages/desktop/Window/index.tsx
similarity index 88%
rename from src/pages/Desktop/Window/index.tsx
rename to src/pages/desktop/Window/index.tsx
index f06fa56655fcd09c4179ca55db5a5b250086adfe..bd62c9e4691c066cb4a7d1d047f2bb8c4df65723 100644
--- a/src/pages/Desktop/Window/index.tsx
+++ b/src/pages/desktop/Window/index.tsx
@@ -3,6 +3,7 @@ import styles from './index.module.scss'
 import WindowContext from './WindowContext'
 import type { Window as WindowType } from '@/store/windowSlice'
 import WindowBox from './WindowBox'
+import Open from './Open'
 
 interface Props {
   window: WindowType
@@ -13,7 +14,7 @@ const Window: React.FC = () => {
   const { window } = React.useContext(WindowContext)
   return (
     <WindowBox>
-      <div>asd</div>
+      <Open openWith={window.openWith} windowId={window.id} />
     </WindowBox>
   )
 }
diff --git a/src/pages/Desktop/index.module.scss b/src/pages/desktop/index.module.scss
similarity index 100%
rename from src/pages/Desktop/index.module.scss
rename to src/pages/desktop/index.module.scss
diff --git a/src/pages/Desktop/index.tsx b/src/pages/desktop/index.tsx
similarity index 94%
rename from src/pages/Desktop/index.tsx
rename to src/pages/desktop/index.tsx
index a5ded9cda9f6e9d7c45c2f8a626a8d5a20ee98c3..91c1cfa1ba63d804742f435c04ef78e05d8e7ae6 100644
--- a/src/pages/Desktop/index.tsx
+++ b/src/pages/desktop/index.tsx
@@ -5,7 +5,7 @@ import StartToolsBar from './StartToolsBar'
 import styles from './index.module.scss'
 import StartMenu from './StartMenu'
 import Mask from './Mask'
-import Window from '@/pages/Desktop/Window'
+import Window from './Window'
 
 const Desktop: React.FC = () => {
   const showStartMenu = useStore((state: MyState) => state.showStartMenu)
diff --git a/src/pages/Login/index.module.scss b/src/pages/login/index.module.scss
similarity index 100%
rename from src/pages/Login/index.module.scss
rename to src/pages/login/index.module.scss
diff --git a/src/pages/Login/index.tsx b/src/pages/login/index.tsx
similarity index 100%
rename from src/pages/Login/index.tsx
rename to src/pages/login/index.tsx
diff --git a/src/store/deskSlice.ts b/src/store/deskSlice.ts
index dff21391d7de497b209c70765bbd83b146ed523f..73fc88364aa5b5ac2f0612f0897e004c84ce2238 100644
--- a/src/store/deskSlice.ts
+++ b/src/store/deskSlice.ts
@@ -6,6 +6,13 @@ export interface App {
   id: number
   image: Image
   title: string
+  openWith: OpenWith
+}
+
+export interface OpenWith {
+  type: number
+  path?: string
+  name?: string
 }
 
 export interface DeskSlice {
diff --git a/src/store/startMenuSlice.ts b/src/store/startMenuSlice.ts
index 06d2f79198490ae02927a6b2cd036fd6a4400c34..9e339acf13f54b71997fd22d4771149c2afd069d 100644
--- a/src/store/startMenuSlice.ts
+++ b/src/store/startMenuSlice.ts
@@ -1,11 +1,13 @@
 import { StoreApi } from 'zustand'
 import { MyState } from './index'
 import { Image } from '@/components/ImageComponent'
+import { OpenWith } from '@/store/deskSlice'
 
 export interface StartMenu {
   id: number
   title: string
   image: Image
+  openWith: OpenWith
 }
 
 export interface StartMenuSlice {
diff --git a/src/store/windowSlice.ts b/src/store/windowSlice.ts
index 1a6c381e1225c222489927faf3f78bd14269db37..3671234320cf1fcd9a59c9c61486f08a3b9552ff 100644
--- a/src/store/windowSlice.ts
+++ b/src/store/windowSlice.ts
@@ -3,7 +3,7 @@ import { MyState } from './index'
 import _ from 'lodash'
 import getId from '@utils/getId'
 import type { Image } from '@/components/ImageComponent'
-import { App } from '@/store/deskSlice'
+import { App, OpenWith } from '@/store/deskSlice'
 import { WINDOW_STATUS } from '@/common/constants'
 
 const defaultWindowStyle = {
@@ -22,6 +22,7 @@ export interface Window {
   status: number
   style: WindowStyle
   image: Image
+  openWith: OpenWith
 }
 
 export interface WindowStyle {
@@ -92,7 +93,8 @@ const windowListSlice = (
             left: defaultWindowStyle.left + 20 * windowNum,
             top: defaultWindowStyle.top + 20 * windowNum,
             zIndex: defaultWindowStyle.zIndex + 100 * windowNum
-          }
+          },
+          openWith: app.openWith
         }
         newWindowList.push(window)
         windowId = window.id
diff --git a/tsconfig.json b/tsconfig.json
index b38c45684284f2c83dcc1f90b11b515263beb334..f3fc92f3616135b9fdd288d18d2e64f36584346d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,8 @@
     "paths": {
       "@/*": ["src/*"],
       "@img/*": ["src/public/img/*"],
-      "@utils/*": ["src/common/utils/*"]
+      "@utils/*": ["src/common/utils/*"],
+      "@apps/*": ["src/pages/apps/*"]
 },
     "allowJs": true,
     "skipLibCheck": true,