diff --git a/public/assets/projects/NeteaseMCAddOn_SecretWar_banner.png b/public/assets/projects/NeteaseMCAddOn_SecretWar_banner.png
index 1e8376a..0ab4c94 100644
Binary files a/public/assets/projects/NeteaseMCAddOn_SecretWar_banner.png and b/public/assets/projects/NeteaseMCAddOn_SecretWar_banner.png differ
diff --git a/public/index.html b/public/index.html
index 7ccda98..a97695b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>ALPHAAE 个人项目</title>
     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
     <link rel="stylesheet" href="./libs/font-awesome/css/font-awesome.min.css">
     <link href="./css/bootstrap.min.css" rel="stylesheet">
diff --git a/src/App.vue b/src/App.vue
index c26c384..79ba116 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,8 @@
     </div>
 
     <public-footer></public-footer>
+
+    <!-- <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> -->
   </div>
 </template>
 
@@ -33,5 +35,4 @@ body {
   text-align: center;
   color: #2c3e50;
 } */
-
 </style>
diff --git a/src/components/ProjectGame.vue b/src/components/ProjectGame.vue
index 08eb1db..c093e00 100644
--- a/src/components/ProjectGame.vue
+++ b/src/components/ProjectGame.vue
@@ -1,45 +1,27 @@
 <template>
-    <div class="project-game shadow-large" style="height: 225px;">
-        <div class="project-image" style="height: 225px; width: 400px;">
-            <el-carousel height="225px" v-if="data.img.length > 1">
-                <el-carousel-item v-for="(item, i) in data.img" :key="i">
-                    <img :src="item" />
-                </el-carousel-item>
-            </el-carousel>
-            <img v-else :src="data.img[0]" />
+    <div class="project shadow-large">
+        <div class="look-detail"></div>
+        <div class="project-image" style="height: 168px; width: 300px;">
+            <img height="168px" :src="data.img[0]" />
         </div>
         <div class="project-info">
             <h3 style="margin: 0 0 12px 0;"> {{ data.name }}</h3>
             <p class="project-tags">
-                <span v-for="(item, i) in data.tag" :key="i">
-                    {{ item }}
-                </span>
+                <span v-for="(item, i) in data.tag" :key="i" :style="'background-color: ' + color.tags[item] + ';'">{{
+                        item
+                }}</span>
             </p>
 
             <p>
-                {{ data.description }}
-            </p>
-            <p class="project-link">
-                <span v-if="data.repository">
-                    <i class="fa fa-github-alt fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
-                    <a :href="data.repository" target="_blank">仓库地址</a>
-                </span>
-
-                <span v-if="data.playUrl">
-                    <i class="fa fa-gamepad fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
-                    <a :href="data.playUrl" target="_blank">在线演示</a>
-                </span>
-
-                <span v-if="data.videoUrl">
-                    <i class="fa fa-youtube-play fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
-                    <a :href="data.videoUrl" target="_blank">在线观看</a>
-                </span>
+                {{ data.descriptionMini }}
             </p>
         </div>
     </div>
+
 </template>
 
 <script>
+import colorJson from '@/data/color.json'
 export default {
     props: {
         data: {
@@ -52,12 +34,19 @@ export default {
             repository: String,
             playUrl: String
         }
+    },
+    data() {
+        return {
+            color: colorJson,
+        }
     }
 }
 </script>
 
-<style>
-.project-tags {}
+<style scoped>
+img {
+    width: 100%;
+}
 
 .project-tags>span {
     margin: 0 4px;
@@ -68,7 +57,14 @@ export default {
     border-radius: 4px;
 }
 
-.project-link>span {
-    margin: 0 10px;
+.project {
+    transition-duration: 0.2s;
+    cursor: pointer;
+}
+
+.project:hover {
+    color: #3498db;
+    transform: scale(1.1);
+    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.02), 0 3px 15px rgba(0, 0, 0, 0.07);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/ProjectGameStar.vue b/src/components/ProjectGameStar.vue
new file mode 100644
index 0000000..fdfcecd
--- /dev/null
+++ b/src/components/ProjectGameStar.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="project-game shadow-large" style="height: 225px;">
+        <div class="project-image" style="height: 225px; width: 400px;">
+            <el-carousel height="225px" trigger="click" v-if="data.img.length > 1">
+                <el-carousel-item v-for="(item, i) in data.img" :key="i">
+                    <img :src="item" />
+                </el-carousel-item>
+            </el-carousel>
+            <img v-else :src="data.img[0]" />
+        </div>
+        <div class="project-info">
+            <h3 style="margin: 0 0 12px 0;"> {{ data.name }}</h3>
+            <p class="project-tags">
+                <span v-for="(item, i) in data.tag" :key="i" :style="'background-color: ' + color.tags[item] + ';'">{{
+                        item
+                }}</span>
+            </p>
+
+            <p>
+                {{ data.description }}
+            </p>
+            <p class="project-link">
+                <span v-if="data.repository">
+                    <i class="fa fa-github-alt fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
+                    <a :href="data.repository" target="_blank">仓库地址</a>
+                </span>
+
+                <span v-if="data.playUrl">
+                    <i class="fa fa-gamepad fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
+                    <a :href="data.playUrl" target="_blank">在线演示</a>
+                </span>
+
+                <span v-if="data.videoUrl">
+                    <i class="fa fa-youtube-play fa-fw" aria-hidden="true" style="margin-right: 10px;"></i>
+                    <a :href="data.videoUrl" target="_blank">在线观看</a>
+                </span>
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import colorJson from '@/data/color.json'
+export default {
+    props: {
+        data: {
+            id: Intl,
+            name: String,
+            tag: Array,
+            description: String,
+            img: Array,
+            createTime: String,
+            repository: String,
+            playUrl: String
+        }
+    },
+    data() {
+        return {
+            color: colorJson,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.project-tags {}
+
+.project-tags>span {
+    margin: 0 4px;
+    padding: 4px;
+    color: white;
+    font-size: 0.4em;
+    background: rgb(131, 131, 131);
+    border-radius: 4px;
+}
+
+.project-link>span {
+    margin: 0 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ProjectInfoDialog.vue b/src/components/ProjectInfoDialog.vue
new file mode 100644
index 0000000..911f3ff
--- /dev/null
+++ b/src/components/ProjectInfoDialog.vue
@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <el-carousel :autoplay="false" type="card" :loop="false" trigger="click" height="300px">
+            <el-carousel-item v-if="data.videoUrl" :key="-1">
+                <iframe width="100%" height="100%" :src="data.videoUrl" scrolling="no" border="0" frameborder="no"
+                    framespacing="0" allowfullscreen="true"> </iframe>
+            </el-carousel-item>
+            <el-carousel-item v-for="(item, i) in data.img" :key="i">
+                <img :src="item" width="100%" />
+            </el-carousel-item>
+        </el-carousel>
+
+        <div class="project-info">
+            <el-row>
+                <el-col :span="18">
+                    <h1> {{ data.name }}</h1>
+                    <p class="project-tags">
+                        <span v-for="(item, i) in data.tag" :key="i"
+                            :style="'background-color: ' + color.tags[item] + ';'">{{ item }}</span>
+                    </p>
+
+                    <p style="font-size: 1.1em;">
+                        {{ data.description }}
+                    </p>
+                </el-col>
+                <el-col :span="6">
+                    <div style="position:absolute;  bottom:0; right:0;">
+                        <p style="margin: 15px 0 0 0;" v-if="data.repository">
+                            <a :href="data.repository" target="_blank">
+                                <el-button type="primary">
+                                    <i class="fa fa-github-alt fa-fw fa-lg" aria-hidden="true"
+                                        style="margin-right: 10px;"></i>
+                                    仓库地址
+                                </el-button>
+                            </a>
+                        </p>
+                        <p style="margin: 15px 0 0 0;" v-if="data.playUrl">
+                            <a :href="data.playUrl" target="_blank">
+                                <el-button type="warning">
+                                    <i class="fa fa-gamepad fa-fw fa-lg" aria-hidden="true"
+                                        style="margin-right: 10px;"></i>
+                                    在线演示
+                                </el-button>
+                            </a>
+                        </p>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+import colorJson from '@/data/color.json'
+export default {
+    props: {
+        data: Object
+    },
+    data() {
+        return {
+            color: colorJson,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.project-tags>span {
+    margin: 0 4px;
+    padding: 4px;
+    color: white;
+    font-size: 1.2em;
+    background: rgb(131, 131, 131);
+    border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/PublicFooter.vue b/src/components/PublicFooter.vue
index f6ba936..9d0dce8 100644
--- a/src/components/PublicFooter.vue
+++ b/src/components/PublicFooter.vue
@@ -7,11 +7,7 @@
                         © <span id="current-year"> 2022 </span> AlphaAE.
                     </p>
                 </div>
-                <div class="col-sm-2 top">
-                    <span id="to-top">
-                        <i class="fa fa-chevron-up" aria-hidden="true"></i>
-                    </span>
-                </div>
+                <div class="col-sm-2 top"></div>
                 <div class="col-sm-5 social">
                     <ul>
                         <li>
diff --git a/src/data/color.json b/src/data/color.json
new file mode 100644
index 0000000..66fc871
--- /dev/null
+++ b/src/data/color.json
@@ -0,0 +1,14 @@
+{
+  "tags": {
+    "default": "#74808a",
+    "Minecraft": "#6a9039",
+    "Mod": "#976327",
+    "Addon": "#ea427b",
+    "ModPE": "#323e85",
+    "JavaScript": "#ff9b2b",
+    "React": "#1c79c2",
+    "Python": "#3c78aa",
+    "Scrapy": "#448f3d",
+    "Java": "#d9292a"
+  }
+}
diff --git a/src/data/projects.json b/src/data/projects.json
index ce18c28..962fb3e 100644
--- a/src/data/projects.json
+++ b/src/data/projects.json
@@ -2,10 +2,12 @@
   "projects": [
     {
       "id": 1,
+      "isStar": true,
       "type": "Mod",
       "name": "秘密战争",
       "tag": ["Minecraft", "Mod", "Python"],
       "description": "网易我的世界 API 制作的 Roguelike 类游戏模组 & 地图",
+      "descriptionMini": "我的世界 Roguelike 类游戏拓展",
       "img": [
         "./assets/projects/NeteaseMCAddOn_SecretWar_banner.png",
         "./assets/projects/NeteaseMCAddOn_SecretWar_inGame_1.jpg",
@@ -19,10 +21,12 @@
     },
     {
       "id": 2,
+      "isStar": false,
       "type": "游戏",
       "name": "[Demo]打飞机",
       "tag": ["Java", "JOGL"],
       "description": "使用 JOGL 包开发的雷电玩法小游戏",
+      "descriptionMini": "使用 JOGL 包开发的雷电玩法小游戏",
       "img": [
         "./assets/projects/FightingDemo_1.jpg",
         "./assets/projects/FightingDemo_2.jpg"
@@ -33,10 +37,12 @@
     },
     {
       "id": 3,
+      "isStar": true,
       "type": "Mod",
       "name": "萌化怪物模组",
       "tag": ["Minecraft", "Mod", "Addon"],
       "description": "适用于国际版与网易版我的世界基岩的怪物拓展模组",
+      "descriptionMini": "我的世界基岩版怪物拓展模组",
       "img": [
         "./assets/projects/CutMobAddon_banner.jpg",
         "./assets/projects/CutMobAddon_inGame_1.jpg",
@@ -49,10 +55,12 @@
     },
     {
       "id": 3,
+      "isStar": true,
       "type": "Mod",
       "name": "文字冒险框架模组",
       "tag": ["Minecraft", "ModPE", "JavaScript"],
       "description": "适用于国际版我的世界中的 GalGame 游戏框架模组",
+      "descriptionMini": "我的世界 GalGame 游戏框架模组",
       "img": [
         "./assets/projects/McGalgame_1.jpg",
         "./assets/projects/McGalgame_2.jpg"
@@ -63,22 +71,26 @@
     },
     {
       "id": 4,
+      "isStar": false,
       "type": "动画",
       "name": "史丹利的寓言",
       "tag": ["Minecraft"],
       "description": "Cinema 4D 制作的我的世界风格原创 3D 动画",
+      "descriptionMini": "我的世界风格原创 3D 动画",
       "img": ["./assets/projects/Video_Stanley's_Fable.jpg"],
       "createTime": "2016.01.17",
       "repository": "",
       "playUrl": "",
-      "videoUrl": "https://www.bilibili.com/video/BV1hs411R7S4"
+      "videoUrl": "//player.bilibili.com/player.html?aid=3603745&bvid=BV1hs411R7S4&cid=5754859&page=1"
     },
     {
       "id": 4,
+      "isStar": false,
       "type": "网站",
-      "name": "任天堂游戏多区域价格比价平台",
+      "name": "Eshop多区价格比价平台",
       "tag": ["React", "Python", "Scrapy"],
       "description": "Python 后端、React 前端开发的可视化游戏比价网站",
+      "descriptionMini": "可视化游戏比价网站",
       "img": [
         "./assets/projects/EshopPriceComparison_1.jpg",
         "./assets/projects/EshopPriceComparison_2.jpg"
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 66161ca..e7e8b14 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -1,59 +1,63 @@
 <template>
     <div class="projects-view">
         <div id="projects" class="background-alt-nth">
-            <h2 class="heading">项目</h2>
+            <h2 class="heading">精选</h2>
             <div class="container-game">
-                <project-game v-for="(data, i) in projectData" :data="data" :key="i"></project-game>
+                <project-game-star v-for="(data, i) in starData" :data="data" :key="i"></project-game-star>
             </div>
 
         </div>
 
-
         <div id="projects" class="background-alt-nth">
-            <h2 class="heading">3D Models</h2>
+            <h2 class="heading">Other</h2>
             <div class="container">
-
-                <!-- One Project 3DModel Block -->
-                <div class="project shadow-large">
-                    <div class="project-glb">
-                        <img class="image" src="assets/thumbs/model03-thumb.jpg" alt="assets/fulls/model03-full.glb" />
-                    </div>
-                </div>
-                <!-- End of One Project 3DModel Block -->
-
-
-                <div class="project shadow-large">
-                    <div class="project-glb">
-                        <img class="image" src="assets/thumbs/model04-thumb.jpg" alt="assets/fulls/model04-full.glb" />
-                    </div>
-                </div>
-
+                <project-game v-for="(data, i) in otherData" :data="data" :key="i" @click.native="openDialog(data)">
+                </project-game>
             </div>
         </div>
 
+        <el-dialog :visible.sync="dialogVisible" @closed="closeDialog">
+            <project-info-dialog :data="selectProject"></project-info-dialog>
+        </el-dialog>
+
     </div>
 </template>
 
 <script>
+import ProjectGameStar from '@/components/ProjectGameStar.vue'
 import ProjectGame from '@/components/ProjectGame.vue'
 import ProjectData from "@/data/projects.json"
+import ProjectInfoDialog from '@/components/ProjectInfoDialog.vue'
 export default {
+    components: { ProjectGameStar, ProjectGame, ProjectInfoDialog },
     data() {
         return {
+            dialogVisible: false,
+            selectProject: {},
             projectData: ProjectData.projects,
-            data: {
-                id: 1,
-                name: "Flappy bird demo",
-                tag: ["Unity", "Unity", "Unity"],
-                description: "描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述",
-                img: ["./assets/thumbs/project02-thumb.jpg"],
-                createTime: "2020-01-01",
-                repository: "https://www.thinkcmf.com/font/font_awesome/icon/steam-square",
-                playUrl: ""
-            }
+            starData: [],
+            otherData: []
         }
     },
-    components: { ProjectGame },
+    created() {
+        this.projectData.forEach((item) => {
+            if (item.isStar) {
+                this.starData.push(item);
+            } else {
+                this.otherData.push(item);
+            }
+
+        })
+    },
+    methods: {
+        openDialog(data) {
+            this.selectProject = data;
+            this.dialogVisible = true;
+        },
+        closeDialog() {
+            this.selectProject = {};
+        }
+    }
 }
 </script>