diff --git a/main.js b/main.js
index 1d83ad5..b5bf5af 100644
--- a/main.js
+++ b/main.js
@@ -210,7 +210,7 @@ if (argv.bsmode) {
         if(args.useGlass) {
             myBrowserWindow = blurBrowserWindow;
             addtionalArgs ={
-                vibrancy :  "dark",
+                vibrancy :  "light",
                 backgroundColor: "#00000000"
             }
         }
diff --git a/mainview/framework.html b/mainview/framework.html
index 5541926..3145a40 100644
--- a/mainview/framework.html
+++ b/mainview/framework.html
@@ -78,7 +78,7 @@
                 >
                     <i
                         class="mdui-icon material-icons"
-                        onclick="maximizeBtn()"
+                        onclick="window.maximizeBtn()"
                         style="font-size: 20px; margin-top: 0"
                         >fullscreen</i
                     >
@@ -186,14 +186,14 @@
                     ></div> -->
                     <button
                         v-bind:class="tab=='model'?'mdui-btn select mdui-color-theme':'mdui-btn'"
-                        onclick="app.tab='model'"
+                        onclick="sysmocapApp.tab='model'"
                     >
                         <i class="mdui-icon material-icons">folder_open</i
                         >{{language.titlebar.modelLib}}
                     </button>
                     <button
                         v-bind:class="tab=='render'?'mdui-btn select mdui-color-theme':'mdui-btn'"
-                        onclick="app.tab='render'"
+                        onclick="sysmocapApp.tab='render'"
                     >
                         <i class="mdui-icon material-icons"
                             >filter_center_focus</i
@@ -201,7 +201,7 @@
                     </button>
                     <button
                         v-bind:class="tab=='settings'?'mdui-btn select mdui-color-theme':'mdui-btn'"
-                        onclick="app.tab='settings'"
+                        onclick="sysmocapApp.tab='settings'"
                     >
                         <i class="mdui-icon material-icons">settings</i
                         >{{language.titlebar.settings}}
@@ -230,6 +230,21 @@ <h1 class="mdui-text-color-theme">
                     </h1>
                     <div class="flex-container" id="userModels">
                         <div
+                            v-if="settings.ui.useNewModelUI"
+                            class="model-item-new"
+                            v-for="model in builtIn"
+                            v-on:click="require('electron').ipcRenderer.send('openModelViewer', {model:model,backgroundColor:$event.currentTarget.style.getPropertyValue('--md-sys-color-primary-container'),color:$event.currentTarget.style.getPropertyValue('--md-sys-color-primary'),textColor:$event.currentTarget.style.getPropertyValue('--md-sys-color-on-primary-container'),useGlass:settings.ui.useGlass});"
+                        >
+                            <img class="my-img" v-bind:src="model.picBg" />
+                            <div class="desc">
+                                <h2>{{model.name}}</h2>
+                                <div class="type">
+                                    {{model.type.toUpperCase()}}
+                                </div>
+                            </div>
+                        </div>
+                        <div
+                            v-if="!settings.ui.useNewModelUI"
                             v-for="model in builtIn"
                             class="mdui-ripple model-item"
                             v-on:click="require('electron').ipcRenderer.send('openModelViewer', {model:model,backgroundColor:bg,color:'#fff',useGlass:settings.ui.useGlass});"
@@ -262,7 +277,12 @@ <h1>{{model.name}}</h1>
                             </div>
                         </div>
                         <div
-                            v-for="i in [1,2,3,4,5]"
+                            v-for="i in [1,2,3,4,5,6]"
+                            class="model-item-new"
+                            style="visibility: hidden; height: 1px"
+                        ></div>
+                        <div
+                            v-for="i in [1,2,3,4,5,6]"
                             class="model-item"
                             style="visibility: hidden; height: 1px"
                         ></div>
@@ -314,7 +334,7 @@ <h1>{{model.name}}</h1>
                         <span style="margin-left: 60px"></span>
                         <button
                             class="mdui-btn mdui-color-theme"
-                            onclick="startMocap(this)"
+                            onclick="window.startMocap(this)"
                         >
                             <i class="mdui-icon material-icons">play_arrow</i
                             >{{language.tabMocap.start}}
@@ -406,16 +426,6 @@ <h1 class="mdui-text-color-theme">
                             <div></div>
                         </div>
                     </div>
-                    <div class="settings-item" v-show="platform!=='web'">
-                        <label class="mdui-switch">
-                            <span>{{language.tabSettings.ui.useGlass}}</span>
-                            <input
-                                type="checkbox"
-                                v-model="settings.ui.useGlass"
-                            />
-                            <i class="mdui-switch-icon"></i>
-                        </label>
-                    </div>
                     <div class="settings-item">
                         <span>{{language.tabSettings.ui.language}}</span>
                         <select
@@ -428,6 +438,26 @@ <h1 class="mdui-text-color-theme">
                             <option value="en">English</option>
                         </select>
                     </div>
+                    <div class="settings-item" v-show="platform!=='web'">
+                        <label class="mdui-switch">
+                            <span>{{language.tabSettings.ui.useGlass}}</span>
+                            <input
+                                type="checkbox"
+                                v-model="settings.ui.useGlass"
+                            />
+                            <i class="mdui-switch-icon"></i>
+                        </label>
+                    </div>
+                    <div class="settings-item" v-show="platform!=='web'">
+                        <label class="mdui-switch">
+                            <span>使用新版模型库UI (beta)</span>
+                            <input
+                                type="checkbox"
+                                v-model="settings.ui.useNewModelUI"
+                            />
+                            <i class="mdui-switch-icon"></i>
+                        </label>
+                    </div>
                     <!-- Setting Tab: Preview -->
                     <h1 class="mdui-text-color-theme">
                         {{language.tabSettings.preview.name}}
@@ -487,7 +517,7 @@ <h1 class="mdui-text-color-theme" v-show="platform!=='web'">
                     <div
                         class="settings-item"
                         v-show="settings.forward.enableForwarding"
-                        onclick="mdui.prompt('','修改端口号',(s)=>{app.settings.forward.port = parseInt(s)},()=>{},{defaultValue:app.settings.forward.port})"
+                        onclick="mdui.prompt('','修改端口号',(s)=>{window.sysmocapApp.settings.forward.port = parseInt(s)},()=>{},{defaultValue:window.sysmocapApp.settings.forward.port})"
                     >
                         <span>{{language.tabSettings.forward.port}}</span>
                         <span
@@ -552,7 +582,7 @@ <h1 class="mdui-text-color-theme">
                             <span>Show FPS</span>
                             <input
                                 type="checkbox"
-                                v-model="settings.output.antialias"
+                                v-model="settings.output.showFPS"
                             />
                             <i class="mdui-switch-icon"></i>
                         </label>
@@ -803,6 +833,15 @@ <h1 class="mdui-text-color-theme" v-show="platform!=='web'">
             </div>
         </div>
 
-        <script src="framework.js"></script>
+        <script src="framework.js" type="module" async></script>
+
+        <script>
+            if (typeof require != "undefined") {
+                // import electron remote
+                remote = require("@electron/remote");
+
+                ipcRenderer = require("electron").ipcRenderer;
+            }
+        </script>
     </body>
 </html>
diff --git a/mainview/framework.js b/mainview/framework.js
index 28168e4..e523923 100644
--- a/mainview/framework.js
+++ b/mainview/framework.js
@@ -12,6 +12,14 @@ var ipcRenderer = null;
 var remote = null;
 var platform = "web";
 
+import {
+    argbFromHex,
+    themeFromSourceColor,
+    themeFromImage,
+    sourceColorFromImage,
+    applyTheme,
+} from "../utils/material-color-utilities/dist/index.js";
+
 if (typeof require != "undefined") {
     // import electron remote
     remote = require("@electron/remote");
@@ -72,6 +80,16 @@ if (typeof require != "undefined") {
                 ).color;
             },
         },
+        mounted() {
+            var modelOnload = async function () {
+                for (var e of document.querySelectorAll(".my-img")) {
+                    var theme = await themeFromImage(e);
+
+                    applyTheme(theme, { target: e.parentElement, dark: false });
+                }
+            };
+            if (this.settings.ui.useNewModelUI) modelOnload();
+        },
         watch: {
             settings: {
                 handler(newVal, oldVal) {
@@ -92,6 +110,8 @@ if (typeof require != "undefined") {
         },
     });
 
+    window.sysmocapApp = app;
+
     remote.app.getGPUInfo("complete").then((info) => {
         app.glRenderer = info.auxAttributes.glRenderer;
     });
@@ -144,15 +164,15 @@ if (typeof require != "undefined") {
 
     var isMax = false;
 
-    function maximizeBtn() {
+    window.maximizeBtn = function () {
         if (isMax) {
             remote.getCurrentWindow().restore();
             document.getElementById("maxbtn").innerHTML =
-                '<i onclick="maximizeBtn()" class="mdui-icon material-icons" style="font-size: 20px; margin-top:0;">fullscreen</i>';
+                '<i onclick="window.maximizeBtn()" class="mdui-icon material-icons" style="font-size: 20px; margin-top:0;">fullscreen</i>';
         } else {
             remote.getCurrentWindow().maximize();
             document.getElementById("maxbtn").innerHTML =
-                '<i onclick="maximizeBtn()" class="mdui-icon material-icons" style="font-size: 20px; margin-top:0;">fullscreen_exit</i>';
+                '<i onclick="window.maximizeBtn()" class="mdui-icon material-icons" style="font-size: 20px; margin-top:0;">fullscreen_exit</i>';
         }
         isMax = !isMax;
     }
@@ -402,6 +422,8 @@ if (typeof require != "undefined") {
         },
     });
 
+    window.sysmocapApp = app;
+
     fetch("../models/models.json")
         .then((e) => {
             return e.json();
@@ -412,7 +434,7 @@ if (typeof require != "undefined") {
         });
 }
 
-function startMocap(e) {
+window.startMocap = function(e) {
     if (e.innerHTML.indexOf(app.language.tabMocap.start) != -1) {
         localStorage.setItem("modelInfo", app.selectModel);
         localStorage.setItem("useCamera", app.videoSource);
diff --git a/mainview/style.css b/mainview/style.css
index 490a045..f6f104b 100644
--- a/mainview/style.css
+++ b/mainview/style.css
@@ -143,3 +143,68 @@ button {
     background-color: #ff6060;
     color: #fff;
 }
+
+
+.model-item-new {
+    position: relative;
+    display: inline-block;
+    min-width: 240px;
+    max-width: 360px;
+    flex: 1;
+    height: 100px;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: var(--md-sys-color-primary-container) 0px 0px 5px;
+    /* border: solid #ccc 0.1px; */
+    margin: 8px;
+}
+.model-item-new:hover {
+    outline: solid var(--md-sys-color-primary) 2px;
+    outline-offset:3px;
+}
+
+.model-item-new img {
+    position: absolute;
+    height: 100%;
+    margin-left: -20px;
+}
+
+.model-item-new .desc {
+    position: absolute;
+    z-index: 10;
+    background: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        var(--md-sys-color-primary-container),
+        var(--md-sys-color-primary-container),
+        var(--md-sys-color-primary-container),
+        var(--md-sys-color-primary-container)
+    );
+    color: var(--md-sys-color-on-primary-container);
+    height: 100%;
+    left: 60px;
+    width: calc(100% - 60px);
+    padding-left: 100px;
+    text-align: right;
+}
+
+.model-item-new .desc h2 {
+    margin-top: 21px;
+    margin-left: -50px;
+    width: calc(100% - 70px);
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.model-item-new .type {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    width: 40px;
+    height: 18px;
+    text-align: center;
+    border-radius: 5px;
+    font-size: 10px;
+    line-height: 18px;
+    margin-left: calc(100% - 162px);
+    font-weight: 200;
+}
\ No newline at end of file
diff --git a/models/img/Amaris.png b/models/img/Amaris.png
new file mode 100644
index 0000000..7f90b46
Binary files /dev/null and b/models/img/Amaris.png differ
diff --git a/models/img/Ashtra.png b/models/img/Ashtra.png
new file mode 100644
index 0000000..604f0fc
Binary files /dev/null and b/models/img/Ashtra.png differ
diff --git a/models/img/Fox.png b/models/img/Fox.png
new file mode 100644
index 0000000..1d308ad
Binary files /dev/null and b/models/img/Fox.png differ
diff --git a/models/img/Hanako.png b/models/img/Hanako.png
new file mode 100644
index 0000000..54332be
Binary files /dev/null and b/models/img/Hanako.png differ
diff --git a/models/img/IceDwen.png b/models/img/IceDwen.png
new file mode 100644
index 0000000..648d55f
Binary files /dev/null and b/models/img/IceDwen.png differ
diff --git a/models/img/Natsuki.png b/models/img/Natsuki.png
new file mode 100644
index 0000000..fec9da7
Binary files /dev/null and b/models/img/Natsuki.png differ
diff --git a/models/img/Sendagaya.png b/models/img/Sendagaya.png
new file mode 100644
index 0000000..ebd309c
Binary files /dev/null and b/models/img/Sendagaya.png differ
diff --git a/models/img/VAL.png b/models/img/VAL.png
new file mode 100644
index 0000000..2e7ce70
Binary files /dev/null and b/models/img/VAL.png differ
diff --git a/models/img/sample-model-2.png b/models/img/sample-model-2.png
new file mode 100644
index 0000000..3691226
Binary files /dev/null and b/models/img/sample-model-2.png differ
diff --git a/models/models.json b/models/models.json
index 41e4ae6..047cbc3 100644
--- a/models/models.json
+++ b/models/models.json
@@ -4,6 +4,7 @@
         "path": "../models/test.vrm",
         "type": "vrm",
         "pic": "../models/3.jpg",
+        "picBg": "../models/img/Ashtra.png",
         "accessories":{
             "Shoes":"Bodybaked_4",
             "Coats":"Bodybaked_5"
@@ -14,6 +15,7 @@
         "path": "../models/three-vrm-girl.vrm",
         "type": "vrm",
         "pic": "../models/1.jpg",
+        "picBg": "../models/img/Hanako.png",
         "accessories":{
             "Shoes":"Shoes",
             "Pants":"Bottoms"
@@ -24,6 +26,7 @@
         "path": "../models/VAL.vrm",
         "type": "vrm",
         "pic": "../models/4.jpg",
+        "picBg": "../models/img/VAL.png",
         "accessories":{
             "Ponytail":"Ponytail",
             "Tail":"Tail",
@@ -38,6 +41,7 @@
         "path": "../models/shibu_sendagaya.vrm",
         "type": "vrm",
         "pic": "../models/5.jpg",
+        "picBg": "../models/img/Sendagaya.png",
         "accessories":{
             "Shoes":"Bodybaked_3",
             "Bow tie":"Bodybaked_2",
@@ -49,6 +53,7 @@
         "path": "../models/SampleA.vrm",
         "type": "vrm",
         "pic": "../models/6.jpg",
+        "picBg": "../models/img/Amaris.png",
         "accessories":{
             "Shoes":"Bodybaked_6",
             "Coats":"Bodybaked_5",
@@ -60,6 +65,7 @@
         "path": "../models/SampleB.vrm",
         "type": "vrm",
         "pic": "../models/2.jpg",
+        "picBg": "../models/img/Natsuki.png",
         "accessories":{
             "Shoes":"Bodybaked_6",
             "Pants":"Bodybaked_5"
@@ -70,6 +76,7 @@
         "path": "../models/bdd.glb",
         "type": "glb",
         "pic": "../models/8.jpg",
+        "picBg": "../models/img/IceDwen.png",
         "binding":{
             "Hips":"Hips",
             "Neck":"Neck",
diff --git a/modelview/modelview.html b/modelview/modelview.html
index 8cd96a3..295dea8 100644
--- a/modelview/modelview.html
+++ b/modelview/modelview.html
@@ -60,9 +60,10 @@
                     cursor: pointer;
                     -webkit-app-region: no-drag;
                 "
+                mdui-tooltip="{content: 'Open DevTools'}"
                 v-bind:style="{ color: color}"
                 onclick="require('@electron/remote').getCurrentWebContents().toggleDevTools()"
-                >extension</i
+                >code</i
             >
             <div
                 id="model"
@@ -87,11 +88,11 @@
             >
                 <div
                     style="width: calc(100% - 50px); margin: 25px"
-                    v-bind:style="{ color: color}"
+                    v-bind:style="{ color: textColor}"
                 >
                     <div v-show="!showOpts">
                         <h1
-                            v-bind:style="{ color: color, margin:'40px 0 0 0',fontSize:'32px',fontWeight:'600'}"
+                            v-bind:style="{ color: textColor, margin:'40px 0 0 0',fontSize:'32px',fontWeight:'600'}"
                         >
                             {{model.name}}
                         </h1>
@@ -111,7 +112,7 @@
                         >
                             {{model.type.toUpperCase()}}
                         </div>
-                        <div style="display: inline; margin-left: 10px">
+                        <div style="display: inline; margin-left: 10px" v-bind:style="{ color: color}">
                             <i class="mdui-icon material-icons"
                                 >{{model.type=='vrm'?'done_all':'done'}}</i
                             ><span style="margin-left: 4px; font-size: 13px"
@@ -255,6 +256,7 @@
                     model: args.model,
                     color: args.color,
                     bgcolor: args.backgroundColor,
+                    textColor: args.textColor?args.textColor:args.color,
                     showSketelon: false,
                     bones: [],
                     showOpts: false,
diff --git a/package.json b/package.json
index ca8f84c..f84d2aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sysmocap",
-  "version": "0.1.1",
+  "version": "0.3",
   "description": "Video-based motion capture system.",
   "main": "main.js",
   "scripts": {
diff --git a/render/script.js b/render/script.js
index 5d47472..2598704 100644
--- a/render/script.js
+++ b/render/script.js
@@ -9,7 +9,7 @@
  */
 
 // import setting utils
-const globalSettings = window.parent.app.settings;
+const globalSettings = window.parent.window.sysmocapApp.settings;
 
 // set theme
 document.body.setAttribute(
@@ -78,6 +78,10 @@ const scene = new THREE.Scene();
 
 const statsContainer = document.getElementById('status')
 
+if(!globalSettings.output.showFPS) {
+    statsContainer.style.display = "none";
+}
+
 const stats = new Stats();
 stats.domElement.style.position = "absolute";
 stats.domElement.style.top = '26px';
@@ -480,7 +484,7 @@ let videoElement = document.querySelector(".input_video"),
 const onResults = (results) => {
     stats2.update();
     // Draw landmark guides
-    drawResults(results);
+    if(globalSettings.preview.showSketelonOnInput)drawResults(results);
     // Animate model
     animateVRM(currentVrm, results);
     if (!started) {
diff --git a/utils/setting.js b/utils/setting.js
index 1813bf4..a02a0a3 100644
--- a/utils/setting.js
+++ b/utils/setting.js
@@ -33,6 +33,7 @@ function getSettings() {
             },
             output: {
                 antialias: true,
+                showFPS: true,
                 usePicInsteadOfColor: false,
                 bgColor: "#ffffff",
                 bgPicPath: "",
@@ -57,7 +58,7 @@ function getSettings() {
                 GPUs:0
             },
             valued: true,
-            ver: 0.2,
+            ver: 0.3,
         };
     return settings;
 }