diff --git a/frontend/web/assets/css/popo.css b/frontend/web/assets/css/popo.css
new file mode 100644
index 0000000..4d1c9e2
--- /dev/null
+++ b/frontend/web/assets/css/popo.css
@@ -0,0 +1,96 @@
+.model_wrap{
+    width: 100%;
+    height: 100vh;
+    background-color: #000;
+    opacity: 0.5;
+    position: fixed;
+    top: 0;
+    display:none;
+    z-index:2001;
+}
+.unchoose{
+    display: none;
+}
+.model-bg{
+    width: 560px;
+    position: absolute;
+    top: 30%;
+    left: 60%;
+    color:#fff;
+    margin-left: -600px;
+    z-index:2002 ;
+}
+.content{
+    font-size:20px;
+}
+.jump{
+    cursor: pointer;
+    position:absolute;
+    width:80px;
+    font-size:16px;
+    color:coral;
+    padding: 10px 20px;
+    border-radius: 40px;
+    top:22%;
+    left:53%;
+    z-index: 2002;
+    text-align: center;
+    border: 2px solid coral;
+    transition: background-color .3s
+}
+.jump:hover{
+    background-color: coral;
+    color:#fff;
+}
+.Previous{
+    cursor: pointer;
+    width:100px;
+    text-align: center;
+    font-size:16px;
+    color:#1ecd97;
+    padding: 10px 20px;
+    border-radius: 40px;
+    margin-top: 20px;
+    border: 2px solid #1ecd97;
+    transition: background-color .3s
+}
+.Previous:hover{
+    background-color: #1ecd97;
+    color:#fff;
+}
+.nextPage{
+    cursor: pointer;
+    width: 100px;
+    font-size:16px;
+    color:#1ecd97;
+    padding: 10px 20px;
+    border-radius: 40px;
+    text-align: center;
+    margin-top:-46px;
+    margin-left:150px;
+    border: 2px solid #1ecd97;
+    transition: background-color .3s
+}
+.nextPage:hover{
+    background-color: #1ecd97;
+    color:#fff;
+}
+.point1{
+    width: 525px;
+    height:174px;
+    background:url("../img/prompt.png") no-repeat center/cover;
+    position:absolute;
+    left:-548px;
+    top:-110px;
+}
+.point2{
+    width: 529px;
+    height:170px;
+    background:url("../img/prompt3.png") no-repeat center/cover;
+    position:absolute;
+    left:-548px;
+    top:17px;
+}
+.boo{
+    border:2px solid #fff;
+}
\ No newline at end of file
diff --git a/frontend/web/assets/js/model.js b/frontend/web/assets/js/model.js
new file mode 100644
index 0000000..011e042
--- /dev/null
+++ b/frontend/web/assets/js/model.js
@@ -0,0 +1,41 @@
+$(function(){
+    var arr=[0,1,3,5,6,7,8,12];
+    $(".prompt").click(function(){
+        $(".model_wrap").show();
+        $(".model-bg").eq(0).removeClass("unchoose");
+        $('.jump').removeClass('unchoose');
+        $('#side-menu .av').eq(arr[0]).click().addClass('boo');
+    });
+
+    $(".model-bg").each(function (i) {
+        let _that=$(this);
+        _that.find(".nextPage").click(function () {
+            console.log(i);
+            _that.addClass("unchoose");
+            $(".model-bg").eq(i+1).removeClass("unchoose");
+            $('#side-menu .av').eq(arr[i+1]).addClass('boo');
+            $('#side-menu .av').eq(arr[i]).removeClass('boo');
+        });
+        _that.find(".Previous").click(function () {
+            console.log(i);
+            _that.addClass("unchoose");
+            $(".model-bg").eq(i-1).removeClass("unchoose");
+            $('#side-menu .av').eq(arr[i-1]).addClass('boo');
+            $('#side-menu .av').eq(arr[i]).removeClass('boo');
+        });
+    });
+
+    $(".perfection").click(function () {
+        $(".jump").addClass('unchoose');
+        $(".model_wrap").hide();
+    });
+
+    $(".jump").click(function () {
+        $(this).addClass('unchoose');
+        $(".model_wrap").hide();
+        $(".model-bg").addClass("unchoose");
+        $("#side-menu .av").each(function (i) {
+            console.log(i);
+        })
+    });
+});
\ No newline at end of file