diff --git a/package-lock.json b/package-lock.json
index c8e738a..074fed4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3312,6 +3312,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
       "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA=="
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
diff --git a/package.json b/package.json
index 5be1064..748525d 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
diff --git a/src/App.css b/src/App.css
index 74b5e05..feb9ed9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  display: flex;
 }
 
 .App-logo {
diff --git a/src/App.js b/src/App.js
index 7bfde41..d598dd5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,28 +1,30 @@
 import { useState } from 'react';
 import './App.css';
 import Pane from './Components/pane';
+import DeviceFrame from './Components/deviceFrame';
+
+var mockProjects = [{"Name":"AN_战斗模拟","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/AN_战斗模拟/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"AN_美女被困","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_美女被困/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"获得钥匙商店|获得鸡腿商店|胜利失败"}},{"Name":"AN_解开锁链","OldSlectType":"1|3|1","HtmlUrl":"PlayableData/AN_解开锁链/index.html","TextObjStr":{"TopText":"引导点击人物|引导下棋|无","MiddText":"无|无|无","CentText":"第一把锁商店|第二把锁商店|全部锁胜利失败"}},{"Name":"GOG_DIY帆船","OldSlectType":"1|2|2","HtmlUrl":"PlayableData/GOG_DIY帆船/index.html","TextObjStr":{"TopText":"黑胡子|女海盗|铁面男","MiddText":"商店|结算|无","CentText":"只选船舵|全部选择|无"}},{"Name":"GOG_DIY飞艇","OldSlectType":"2|2|2","HtmlUrl":"PlayableData/GOG_DIY飞艇/index.html","TextObjStr":{"TopText":"黑胡子|美人鱼|无立绘","MiddText":"商店|结算|无","CentText":"只选飞艇|全部选择|无"}},{"Name":"GOG_抢滩登陆","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_抢滩登陆/index.html","TextObjStr":{"TopText":"有立绘|无立绘|无","MiddText":"胜利失败|跳转商店|无","CentText":"第二关|第一关|无"}},{"Name":"GOG_潜入营救","OldSlectType":"2|1|2","HtmlUrl":"PlayableData/GOG_潜入营救/index.html","TextObjStr":{"TopText":"立辉|无立辉|无","MiddText":"结算|商店|无","CentText":"胜利失败|杀一层|杀二层"}},{"Name":"GOG_船舱杀敌","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/GOG_船舱杀敌/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"KOA_救治组装","OldSlectType":"1|1|1","HtmlUrl":"PlayableData/KOA_救治组装/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}},{"Name":"SS_页游换装备","OldSlectType":"2|1|1","HtmlUrl":"PlayableData/SS_页游换装备/index.html","TextObjStr":{"TopText":"无|无|无","MiddText":"无|无|无","CentText":"无|无|无"}}]
 
 function App() {
   var [mode, setMode] = useState("normal")
   var [projects, setProjects] = useState([])
+  var [selectedProject, setSelectedProject] = useState()
 
-  fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
-    method: 'GET',
-    mode: 'no-cors',
-    cache: 'no-cache',
-    headers: new Headers({'content-type': 'application/json'}),
-  }).then((t) => {
-    console.log(t, t.json())
-    // setProjects(value)
+  Promise.resolve().then(() => {
+    setProjects(mockProjects)
   })
+
   return (
     <div className="App">
       <Pane
         mode={mode}
-        onModeChange={(_mode) => setMode(_mode) }/>
+        onModeChange={(_mode) => setMode(_mode) }
+        projects={projects}
+        onProjectSelect={(project) => setSelectedProject(project)}/>
       {
         mode === "normal"
-        ? <div>media content</div>
+        ? <DeviceFrame
+            htmlUrl={selectedProject ? selectedProject.HtmlUrl : ''}/>
         : <div>setting content</div>
       }
     </div>
diff --git a/src/Components/deviceFrame/index.css b/src/Components/deviceFrame/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js
new file mode 100644
index 0000000..713f0c6
--- /dev/null
+++ b/src/Components/deviceFrame/index.js
@@ -0,0 +1,16 @@
+import './index.css'
+
+var baseUrl = "http://123.56.161.61:1157/"
+
+function DeviceFrame(props) {
+    return (
+        <div>
+            hello, {props.htmlUrl}
+        {
+            props.htmlUrl && <iframe title='preview' src={baseUrl + props.htmlUrl}/>
+        }
+        </div>
+    )
+}
+
+export default DeviceFrame;
\ No newline at end of file
diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js
index ac60855..fc82c1d 100644
--- a/src/Components/pane/index.js
+++ b/src/Components/pane/index.js
@@ -1,7 +1,7 @@
 import './index.css';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem'
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Chip, List, ListItem } from '@mui/material';
 import ipadPng from '../../images/ipad.png'
 import iphonePng from '../../images/iphone.png'
@@ -31,6 +31,7 @@ var deviceConfigs = [
 function Pane(props) {
   var [mode, setMode] = useState(props.mode);
   var [device, setDevice] = useState(props.device)
+  var [project, setProject] = useState(props.project)
   
   var modeChange = (e) => {
     var _mode = e.target.value;
@@ -43,21 +44,32 @@ function Pane(props) {
     props.onDeviceChange(_device)
   };
 
+  var projectSelect = (e) => {
+    var projectName = e.target.value
+    setProject(projectName)
+    var projectObj = props.projects.find((p) => p.Name = projectName)
+    props.onProjectSelect(projectObj)
+  }
+
+  useEffect(() => {
+    props.projects.length && setProject(props.projects[0].Name);
+  }, [props.projects])
+
   return (
     <div className="Pane">
       <Select
-            id="mode-select"
-            value={mode}
-            onChange={(e) => modeChange(e)}
-            sx={{
-              width: '100%',
-              border: 'none',
-              background: 'white'
-            }}
+        id="mode-select"
+        value={mode}
+        onChange={(e) => modeChange(e)}
+        sx={{
+          width: '100%',
+          border: 'none',
+          background: 'white'
+        }}
         >
-            <MenuItem value={'normal'}>Normal Preview</MenuItem>
-            <MenuItem value={'dynamic'}>Dynamic Preview</MenuItem>
-        </Select>
+        <MenuItem value={'normal'}>Normal Preview</MenuItem>
+        <MenuItem value={'dynamic'}>Dynamic Preview</MenuItem>
+      </Select>
         <List>
         {
           deviceConfigs.map(_device =>
@@ -82,7 +94,19 @@ function Pane(props) {
         }
         </List>
         <div>
-
+          {
+            project &&
+            <Select
+              id="project-select"
+              value={project}
+              onChange={(e) => projectSelect(e)}
+              placeholder='选择项目'
+              >
+              {
+                props.projects.map(p => <MenuItem value={p.Name}>{p.Name}</MenuItem>)
+              }
+            </Select>
+          }
         </div>
     </div>
   );
diff --git a/src/images/android-h.png b/src/images/android-h.png
new file mode 100644
index 0000000..180c622
Binary files /dev/null and b/src/images/android-h.png differ
diff --git a/src/images/android-v.png b/src/images/android-v.png
new file mode 100644
index 0000000..f5e29d4
Binary files /dev/null and b/src/images/android-v.png differ
diff --git a/src/images/iPad 横屏.png b/src/images/iPad 横屏.png
new file mode 100644
index 0000000..f7f854a
Binary files /dev/null and b/src/images/iPad 横屏.png differ
diff --git a/src/images/iPad 竖屏.png b/src/images/iPad 竖屏.png
new file mode 100644
index 0000000..7975360
Binary files /dev/null and b/src/images/iPad 竖屏.png differ
diff --git a/src/images/iphone 横屏.png b/src/images/iphone 横屏.png
new file mode 100644
index 0000000..f7d3855
Binary files /dev/null and b/src/images/iphone 横屏.png differ
diff --git a/src/images/iphone 竖屏.png b/src/images/iphone 竖屏.png
new file mode 100644
index 0000000..8e0d6d9
Binary files /dev/null and b/src/images/iphone 竖屏.png differ