diff --git a/css/common.css b/css/common.css
index 20dc84e..dc518bf 100644
--- a/css/common.css
+++ b/css/common.css
@@ -143,7 +143,7 @@ body {
 .my-project {
   width: 100vw;
   height: 100vh;
-  background-color: #000000;
+  background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   top: 0;
   left: 0;
@@ -151,3 +151,526 @@ body {
   display: flex;
   justify-content: center;
 }
+.my-project .my-box .head {
+  height: 54px;
+  background-color: #7b8cd3;
+  border-radius: 10px 10px 0 0;
+  justify-content: space-between;
+}
+.my-project .my-box .head .item {
+  width: 400px;
+  font-size: 16px;
+  color: #ffffff;
+  position: relative;
+  height: 100%;
+  z-index: 1;
+  cursor: pointer;
+}
+.my-project .my-box .head .item.pitch {
+  color: #000000;
+}
+.my-project .my-box .head .item.pitch .bj,
+.my-project .my-box .head .item.pitch .icon {
+  display: block;
+}
+.my-project .my-box .head .item .bj {
+  display: none;
+  width: 474px;
+  height: 61px;
+  position: absolute;
+  bottom: -1px;
+  z-index: -1;
+}
+.my-project .my-box .head .item .bj.bj-left {
+  left: 0;
+}
+.my-project .my-box .head .item .bj.bj-right {
+  right: 0;
+  transform: rotate(180deg) scaleY(-1);
+}
+.my-project .my-box .head .item .icon {
+  display: none;
+  width: 25px;
+  height: 22px;
+  margin-right: 8px;
+}
+.my-project .my-box .contrast-box {
+  background-color: #ffffff;
+  border-radius: 0 0 12px 12px;
+}
+.my-project .my-box .contrast-box .left {
+  width: 580px;
+}
+.my-project .my-box .contrast-box .left.left1 {
+  width: 820px;
+}
+.my-project .my-box .contrast-box .left .hint {
+  height: 65px;
+  color: #333333;
+  padding: 25px 30px 20px;
+  border-bottom: 1px solid #ebebeb;
+  justify-content: space-between;
+}
+.my-project .my-box .contrast-box .left .hint .btn .delete {
+  width: 64px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background-color: rgba(123, 140, 211, 0);
+  border: 1px solid #f2f2f2;
+  border-radius: 32px;
+  margin-right: 10px;
+  font-size: 14px;
+  color: #d7d7d7;
+}
+.my-project .my-box .contrast-box .left .hint .btn .delete.have {
+  border-color: #d7d7d7;
+  color: #333333;
+  cursor: pointer;
+}
+.my-project .my-box .contrast-box .left .hint .btn .delete.have:hover {
+  color: #fff;
+  border: none;
+  background-color: #f95d5d;
+}
+.my-project .my-box .contrast-box .left .hint .btn .begin {
+  width: 130px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background-color: #f2f2f2;
+  border-radius: 32px;
+  font-size: 15px;
+  color: #ffffff;
+}
+.my-project .my-box .contrast-box .left .hint .btn .begin.have {
+  background-color: #6fc16d;
+  cursor: pointer;
+}
+.my-project .my-box .contrast-box .left .hint .btn .begin.have:hover {
+  background-color: #4fa44d;
+}
+.my-project .my-box .contrast-box .left .empty-box {
+  height: 575px;
+}
+.my-project .my-box .contrast-box .left .empty-box .icon {
+  margin-bottom: 18px;
+}
+.my-project .my-box .contrast-box .left .list {
+  height: 575px;
+  overflow: auto;
+  margin-right: 5px;
+}
+.my-project .my-box .contrast-box .left .list::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+.my-project .my-box .contrast-box .left .list::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+  background-color: transparent;
+}
+.my-project .my-box .contrast-box .left .list::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: #ebebeb;
+}
+.my-project .my-box .contrast-box .left .list .item {
+  padding: 15px 0;
+  justify-content: space-between;
+  margin-left: 30px;
+  margin-right: 27px;
+}
+.my-project .my-box .contrast-box .left .list .item:not(:last-of-type) {
+  border-bottom: 1px dotted #d7d7d7;
+}
+.my-project .my-box .contrast-box .left .list .item .left {
+  padding-left: 40px;
+}
+.my-project .my-box .contrast-box .left .list .item .left .name {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 15px;
+  color: #000000;
+  margin-bottom: 5px;
+  position: relative;
+}
+.my-project .my-box .contrast-box .left .list .item .left .name::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -30px;
+  transform: translateY(-50%);
+  width: 7px;
+  height: 7px;
+  box-sizing: border-box;
+  background-color: #fddf6d;
+  border: 1px solid #cab157;
+  border-radius: 50%;
+}
+.my-project .my-box .contrast-box .left .list .item .left .english {
+  color: #7f7f7f;
+  font-size: 13px;
+  margin-bottom: 10px;
+}
+.my-project .my-box .contrast-box .left .list .item .left .message {
+  font-size: 14px;
+  color: #333333;
+}
+.my-project .my-box .contrast-box .left .list .item .left .message .icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 7px;
+}
+.my-project .my-box .contrast-box .left .list .item .left .message .line {
+  color: #d7d7d7;
+  margin: 0 12px;
+}
+.my-project .my-box .contrast-box .left .list .item .left .message .state-text {
+  padding: 0 6px;
+  background-color: #f2f2f2;
+  border: 1px solid #d7d7d7;
+  border-radius: 6px;
+  color: #555555;
+  font-size: 13px;
+}
+.my-project .my-box .contrast-box .left .list .item .btn {
+  padding: 10px;
+  cursor: pointer;
+}
+.my-project .my-box .contrast-box .left .list .item .btn .icon {
+  width: 20px;
+  height: 20px;
+}
+.my-project .my-box .contrast-box .right {
+  width: 420px;
+  height: 640px;
+  background-color: #f6f6f6;
+  border-radius: 0 0 12px 0;
+}
+.my-project .my-box .contrast-box .right .hint {
+  font-size: 14px;
+  color: #000000;
+  padding: 25px 20px 20px;
+}
+.my-project .my-box .contrast-box .right .list {
+  height: 575px;
+  padding-left: 20px;
+  overflow: auto;
+  margin-right: 5px;
+}
+.my-project .my-box .contrast-box .right .list::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+.my-project .my-box .contrast-box .right .list::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+  background-color: transparent;
+}
+.my-project .my-box .contrast-box .right .list::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: #ebebeb;
+}
+.my-project .my-box .contrast-box .right .list .item {
+  width: 370px;
+  background-color: #ffffff;
+  border: 1px solid #f2f2f2;
+  border-radius: 8px;
+  padding: 15px;
+  justify-content: space-between;
+  position: relative;
+  margin-bottom: 10px;
+  overflow: auto;
+}
+.my-project .my-box .contrast-box .right .list .item .project-list .project-item {
+  font-size: 14px;
+  color: #333333;
+}
+.my-project .my-box .contrast-box .right .list .item .project-list .project-item .icon {
+  height: 18px;
+  margin-right: 10px;
+}
+.my-project .my-box .contrast-box .right .list .item .project-list .project-item:not(:last-of-type) {
+  margin-bottom: 10px;
+}
+.my-project .my-box .contrast-box .right .list .item .project-list .project-item .arrows {
+  width: 12px;
+  height: 12px;
+  margin: 0 10px;
+}
+.my-project .my-box .contrast-box .right .list .item .project-list .project-item .text {
+  width: 182px;
+}
+.my-project .my-box .contrast-box .right .list .item .btn {
+  width: 26px;
+  height: 26px;
+  background-color: #6fc16d;
+  border-radius: 32px;
+}
+.my-project .my-box .contrast-box .right .list .item .btn .icon {
+  width: 14px;
+  height: 6px;
+}
+.my-project .my-box .contrast-box .right .list .item:hover .dot {
+  display: block;
+}
+.my-project .my-box .contrast-box .right .list .item .dot {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  top: 4px;
+  right: 10px;
+  display: none;
+  cursor: pointer;
+}
+.my-project .my-box .contrast-box .right .list .item .delete-mask {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: transparent;
+  z-index: 10;
+}
+.my-project .my-box .contrast-box .right .list .item .delete {
+  width: 71px;
+  background-color: #f95d5d;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  color: #ffffff;
+  font-size: 13px;
+  border-radius: 0 8px 8px 0;
+  cursor: pointer;
+  z-index: 11;
+}
+.my-project .my-box .manage-box {
+  width: 920px;
+  height: 640px;
+  background-color: #fff;
+  border-radius: 0 0 12px 12px;
+}
+.my-project .my-box .manage-box .tab-list {
+  font-size: 14px;
+  height: 65px;
+  color: #555555;
+  padding: 25px 30px 20px;
+  margin-bottom: 5px;
+}
+.my-project .my-box .manage-box .tab-list .item {
+  cursor: pointer;
+  margin-right: 36px;
+  font-size: 14px;
+  color: #555555;
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  position: relative;
+}
+.my-project .my-box .manage-box .tab-list .item.pitch {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  color: #000000;
+}
+.my-project .my-box .manage-box .tab-list .item.pitch::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -4px;
+  display: block;
+  width: 100%;
+  height: 3px;
+  background-color: #6fc16d;
+  border-radius: 39px;
+}
+.my-project .my-box .manage-box .empty-box {
+  height: 575px;
+}
+.my-project .my-box .manage-box .empty-box .icon {
+  margin-top: -135px;
+  margin-bottom: 20px;
+}
+.my-project .my-box .manage-box .list {
+  height: 570px;
+  padding-left: 30px;
+  overflow: auto;
+  margin-right: 5px;
+}
+.my-project .my-box .manage-box .list .hint {
+  width: 860px;
+  height: 40px;
+  background-color: #f2f2f2;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #555555;
+  line-height: 24px;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin-bottom: 20px;
+}
+.my-project .my-box .manage-box .list .hint .icon {
+  width: 16px;
+  height: 16px;
+}
+.my-project .my-box .manage-box .list::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+.my-project .my-box .manage-box .list::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+  background-color: transparent;
+}
+.my-project .my-box .manage-box .list::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: #ebebeb;
+}
+.my-project .my-box .manage-box .list .list-box {
+  flex-wrap: wrap;
+  width: 860px;
+  justify-content: space-between;
+}
+.my-project .my-box .manage-box .list .item {
+  width: 420px;
+  background-color: #fbfbfb;
+  border: 1px solid #f2f2f2;
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+.my-project .my-box .manage-box .list .item .top {
+  padding: 16px 10px 14px;
+  border-bottom: 1px solid #f2f2f2;
+}
+.my-project .my-box .manage-box .list .item .top .info .name {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 15px;
+  color: #000000;
+  margin-bottom: 5px;
+}
+.my-project .my-box .manage-box .list .item .top .info .english {
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #7f7f7f;
+  font-size: 13px;
+  margin-bottom: 11px;
+}
+.my-project .my-box .manage-box .list .item .top .info .school {
+  font-size: 14px;
+  color: #333333;
+}
+.my-project .my-box .manage-box .list .item .top .info .school .icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 7px;
+}
+.my-project .my-box .manage-box .list .item .top .state-box {
+  position: relative;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .btn {
+  cursor: pointer;
+  width: 64px;
+  height: 26px;
+  background-color: #f95d5d;
+  border-radius: 32px;
+  font-size: 14px;
+  color: #ffffff;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .btn .icon {
+  width: 9px;
+  height: 5px;
+  margin-left: 9px;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .state-list-box {
+  background-color: #ffffff;
+  border-radius: 12px;
+  width: 300px;
+  height: 47px;
+  position: absolute;
+  right: 0;
+  top: 41px;
+  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.12941176));
+  padding: 0 10px;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .state-list-box::after {
+  content: "";
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  position: absolute;
+  top: -16px;
+  right: 20px;
+  border-bottom-color: #ffffff;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item {
+  width: 60px;
+  height: 26px;
+  background-color: #f2f2f2;
+  font-size: 14px;
+  color: #7f7f7f;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item:not(:last-of-type) {
+  border-right: 1px solid #d7d7d7;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item:first-of-type {
+  border-radius: 4px 0 0 4px;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item:last-of-type {
+  border-radius: 0 4px 4px 0;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .state-item.pitch {
+  background-color: #7b8cd3;
+  color: #ffffff;
+  border-right: none;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .delete {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background-color: #f2f2f2;
+  margin-left: 15px;
+}
+.my-project .my-box .manage-box .list .item .top .state-box .state-list-box .delete .delete-icon {
+  width: 13px;
+  height: 14px;
+}
+.my-project .my-box .manage-box .list .item .bottom {
+  padding: 14px 10px 5px;
+}
+.my-project .my-box .manage-box .list .item .bottom .edit {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #f2f2f2;
+  margin-right: 10px;
+}
+.my-project .my-box .manage-box .list .item .bottom .edit .icon {
+  width: 16px;
+  height: 16px;
+}
+.my-project .my-box .manage-box .list .item .bottom .input {
+  padding-top: 4px;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  resize: none;
+  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+}
+.my-project .my-box .manage-box .list .item .bottom .drag-icon {
+  width: 16px;
+  height: 16px;
+  margin-top: 6px;
+}
+.empty-box {
+  flex-direction: column;
+}
+.empty-box .icon {
+  width: 80px;
+  height: 94px;
+}
+.empty-box .text {
+  font-size: 14px;
+  color: #7f7f7f;
+  text-align: center;
+  line-height: 24px;
+}
diff --git a/css/common.less b/css/common.less
index ebae741..4c27df4 100644
--- a/css/common.less
+++ b/css/common.less
@@ -160,15 +160,609 @@ body {
     transition: left 0.3s linear, top 0.3s cubic-bezier(0.5, -0.5, 1, 1);
 }
 
-
 .my-project {
     width: 100vw;
     height: 100vh;
-    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.5);
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
     display: flex;
     justify-content: center;
-}
\ No newline at end of file
+
+    .my-box {
+        .head {
+            height: 54px;
+            background-color: rgba(123, 140, 211, 1);
+            border-radius: 10px 10px 0 0;
+            justify-content: space-between;
+            .item {
+                width: 400px;
+                font-size: 16px;
+                color: #ffffff;
+                position: relative;
+                height: 100%;
+                z-index: 1;
+                cursor: pointer;
+                &.pitch {
+                    color: #000000;
+                    .bj,
+                    .icon {
+                        display: block;
+                    }
+                }
+                .bj {
+                    display: none;
+                    width: 474px;
+                    height: 61px;
+                    position: absolute;
+                    bottom: -1px;
+                    z-index: -1;
+                    &.bj-left {
+                        left: 0;
+                    }
+                    &.bj-right {
+                        right: 0;
+                        transform: rotate(180deg) scaleY(-1);
+                    }
+                }
+
+                .icon {
+                    display: none;
+                    width: 25px;
+                    height: 22px;
+                    margin-right: 8px;
+                }
+            }
+        }
+
+        .contrast-box {
+            background-color: rgba(255, 255, 255, 1);
+            border-radius: 0 0 12px 12px;
+            .left {
+                width: 580px;
+
+                &.left1 {
+                    width: 820px;
+                }
+
+                .hint {
+                    height: 65px;
+                    color: #333333;
+                    padding: 25px 30px 20px;
+                    border-bottom: 1px solid rgb(235, 235, 235);
+                    justify-content: space-between;
+                    .btn {
+                        .delete {
+                            width: 64px;
+                            height: 32px;
+                            line-height: 32px;
+                            text-align: center;
+                            background-color: rgba(123, 140, 211, 0);
+                            border: 1px solid rgba(242, 242, 242, 1);
+                            border-radius: 32px;
+                            margin-right: 10px;
+                            font-size: 14px;
+                            color: #d7d7d7;
+
+                            &.have {
+                                border-color: rgba(215, 215, 215, 1);
+                                color: #333333;
+                                cursor: pointer;
+                                &:hover {
+                                    color: #fff;
+                                    border: none;
+                                    background-color: rgba(249, 93, 93, 1);
+                                }
+                            }
+                        }
+
+                        .begin {
+                            width: 130px;
+                            height: 32px;
+                            line-height: 32px;
+                            text-align: center;
+                            background-color: rgba(242, 242, 242, 1);
+                            border-radius: 32px;
+                            font-size: 15px;
+                            color: #ffffff;
+
+                            &.have {
+                                background-color: rgba(111, 193, 109, 1);
+                                cursor: pointer;
+
+                                &:hover {
+                                    background-color: rgba(79, 164, 77, 1);
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .empty-box {
+                    height: 575px;
+
+                    .icon {
+                        margin-bottom: 18px;
+                    }
+                }
+
+                .list {
+                    height: 575px;
+                    overflow: auto;
+                    margin-right: 5px;
+
+                    &::-webkit-scrollbar-track-piece {
+                        background-color: transparent;
+                    }
+
+                    &::-webkit-scrollbar {
+                        width: 7px;
+                        height: 7px;
+                        background-color: transparent;
+                    }
+
+                    &::-webkit-scrollbar-thumb {
+                        border-radius: 5px;
+                        background-color: rgba(235, 235, 235, 1);
+                    }
+
+                    .item {
+                        padding: 15px 0;
+                        justify-content: space-between;
+                        margin-left: 30px;
+                        margin-right: 27px;
+
+                        // &:hover {
+                        //     background-color: rgba(246, 246, 246, 1);
+                        // }
+
+                        &:not(:last-of-type) {
+                            border-bottom: 1px dotted rgb(215, 215, 215);
+                        }
+
+                        .left {
+                            padding-left: 40px;
+                            .name {
+                                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                                font-weight: 650;
+                                font-style: normal;
+                                font-size: 15px;
+                                color: #000000;
+                                margin-bottom: 5px;
+                                position: relative;
+                                &::after {
+                                    content: "";
+                                    position: absolute;
+                                    top: 50%;
+                                    left: -30px;
+                                    transform: translateY(-50%);
+                                    width: 7px;
+                                    height: 7px;
+                                    box-sizing: border-box;
+                                    background-color: rgb(253, 223, 109);
+                                    border: 1px solid rgb(202, 177, 87);
+                                    border-radius: 50%;
+                                }
+                            }
+                            .english {
+                                color: #7f7f7f;
+                                font-size: 13px;
+                                margin-bottom: 10px;
+                            }
+
+                            .message {
+                                font-size: 14px;
+                                color: #333333;
+                                .icon {
+                                    width: 18px;
+                                    height: 18px;
+                                    margin-right: 7px;
+                                }
+                                .line {
+                                    color: rgb(215, 215, 215);
+                                    margin: 0 12px;
+                                }
+
+                                .state-text {
+                                    padding: 0 6px;
+                                    background-color: rgba(242, 242, 242, 1);
+                                    border: 1px solid rgba(215, 215, 215, 1);
+                                    border-radius: 6px;
+                                    color: #555555;
+                                    font-size: 13px;
+                                }
+                            }
+                        }
+
+                        .btn {
+                            padding: 10px;
+                            cursor: pointer;
+                            .icon {
+                                width: 20px;
+                                height: 20px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .right {
+                width: 420px;
+                height: 640px;
+                background-color: rgba(246, 246, 246, 1);
+                border-radius: 0 0 12px 0;
+
+                .hint {
+                    font-size: 14px;
+                    color: #000000;
+                    padding: 25px 20px 20px;
+                }
+
+                .list {
+                    height: 575px;
+                    padding-left: 20px;
+                    overflow: auto;
+                    margin-right: 5px;
+                    &::-webkit-scrollbar-track-piece {
+                        background-color: transparent;
+                    }
+
+                    &::-webkit-scrollbar {
+                        width: 7px;
+                        height: 7px;
+                        background-color: transparent;
+                    }
+
+                    &::-webkit-scrollbar-thumb {
+                        border-radius: 5px;
+                        background-color: rgba(235, 235, 235, 1);
+                    }
+
+                    .item {
+                        width: 370px;
+                        background-color: rgba(255, 255, 255, 1);
+                        border: 1px solid rgba(242, 242, 242, 1);
+                        border-radius: 8px;
+                        padding: 15px;
+                        justify-content: space-between;
+                        position: relative;
+                        margin-bottom: 10px;
+                        overflow: auto;
+
+                        .project-list {
+                            .project-item {
+                                .icon {
+                                    height: 18px;
+                                    margin-right: 10px;
+                                }
+                                font-size: 14px;
+                                color: #333333;
+                                &:not(:last-of-type) {
+                                    margin-bottom: 10px;
+                                }
+                                .arrows {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin: 0 10px;
+                                }
+                                .text {
+                                    width: 182px;
+                                }
+                            }
+                        }
+
+                        .btn {
+                            width: 26px;
+                            height: 26px;
+                            background-color: rgba(111, 193, 109, 1);
+                            border-radius: 32px;
+                            .icon {
+                                width: 14px;
+                                height: 6px;
+                            }
+                        }
+
+                        &:hover {
+                            .dot {
+                                display: block;
+                            }
+                        }
+
+                        .dot {
+                            position: absolute;
+                            width: 18px;
+                            height: 18px;
+                            top: 4px;
+                            right: 10px;
+                            display: none;
+                            cursor: pointer;
+                        }
+
+                        .delete-mask {
+                            width: 100vw;
+                            height: 100vh;
+                            position: fixed;
+                            top: 0;
+                            left: 0;
+                            background-color: transparent;
+                            z-index: 10;
+                        }
+
+                        .delete {
+                            width: 71px;
+                            background-color: rgba(249, 93, 93, 1);
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            height: 100%;
+                            color: #ffffff;
+                            font-size: 13px;
+                            border-radius: 0 8px 8px 0;
+                            cursor: pointer;
+                            z-index: 11;
+                        }
+                    }
+                }
+            }
+        }
+
+        .manage-box {
+            width: 920px;
+            height: 640px;
+            background-color: #fff;
+            border-radius: 0 0 12px 12px;
+            .tab-list {
+                font-size: 14px;
+                height: 65px;
+                color: #555555;
+                padding: 25px 30px 20px;
+                margin-bottom: 5px;
+                .item {
+                    cursor: pointer;
+                    margin-right: 36px;
+                    font-size: 14px;
+                    color: #555555;
+                    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+
+                    position: relative;
+                    &.pitch {
+                        font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                        font-weight: 650;
+                        font-style: normal;
+                        color: #000000;
+
+                        &::after {
+                            content: "";
+                            position: absolute;
+                            left: 0;
+                            bottom: -4px;
+                            display: block;
+                            width: 100%;
+                            height: 3px;
+                            background-color: rgba(111, 193, 109, 1);
+                            border-radius: 39px;
+                        }
+                    }
+                }
+            }
+
+            .empty-box {
+                height: 575px;
+                .icon {
+                    margin-top: -135px;
+                    margin-bottom: 20px;
+                }
+            }
+
+            .list {
+                height: 570px;
+                padding-left: 30px;
+                overflow: auto;
+                .hint {
+                    width: 860px;
+                    height: 40px;
+                    background-color: rgba(242, 242, 242, 1);
+                    border-radius: 4px;
+                    font-size: 14px;
+                    color: #555555;
+                    line-height: 24px;
+                    justify-content: space-between;
+                    padding: 0 10px;
+                    margin-bottom: 20px;
+                    .icon {
+                        width: 16px;
+                        height: 16px;
+                    }
+                }
+                margin-right: 5px;
+                &::-webkit-scrollbar-track-piece {
+                    background-color: transparent;
+                }
+
+                &::-webkit-scrollbar {
+                    width: 7px;
+                    height: 7px;
+                    background-color: transparent;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 5px;
+                    background-color: rgba(235, 235, 235, 1);
+                }
+
+                .list-box {
+                    flex-wrap: wrap;
+                    width: 860px;
+                    justify-content: space-between;
+                }
+                .item {
+                    width: 420px;
+                    // height: 158px;
+                    background-color: rgba(251, 251, 251, 1);
+                    border: 1px solid rgba(242, 242, 242, 1);
+                    border-radius: 12px;
+                    margin-bottom: 20px;
+
+                    .top {
+                        padding: 16px 10px 14px;
+                        border-bottom: 1px solid rgba(242, 242, 242, 1);
+
+                        .info {
+                            .name {
+                                font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                                font-weight: 650;
+                                font-style: normal;
+                                font-size: 15px;
+                                color: #000000;
+                                margin-bottom: 5px;
+                            }
+
+                            .english {
+                                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                                font-weight: 400;
+                                font-style: normal;
+                                color: #7f7f7f;
+                                font-size: 13px;
+                                margin-bottom: 11px;
+                            }
+
+                            .school {
+                                .icon {
+                                    width: 18px;
+                                    height: 18px;
+                                    margin-right: 7px;
+                                }
+                                font-size: 14px;
+                                color: #333333;
+                            }
+                        }
+                        .state-box {
+                            .btn {
+                                cursor: pointer;
+                                width: 64px;
+                                height: 26px;
+                                background-color: rgba(249, 93, 93, 1);
+                                border-radius: 32px;
+                                font-size: 14px;
+                                color: #ffffff;
+                                .icon {
+                                    width: 9px;
+                                    height: 5px;
+                                    margin-left: 9px;
+                                }
+                            }
+                            position: relative;
+                            .state-list-box {
+                                background-color: #ffffff;
+                                border-radius: 12px;
+                                width: 300px;
+                                height: 47px;
+                                position: absolute;
+                                right: 0;
+                                top: 41px;
+                                // box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.129411764705882);
+                                filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.129411764705882));
+                                padding: 0 10px;
+
+                                &::after {
+                                    content: "";
+                                    width: 0;
+                                    height: 0;
+                                    border: 10px solid transparent;
+                                    position: absolute;
+                                    top: -16px;
+                                    right: 20px;
+                                    border-bottom-color: #ffffff;
+                                }
+
+                                .state-list {
+                                }
+                                .state-item {
+                                    &:not(:last-of-type) {
+                                        border-right: 1px solid rgb(215, 215, 215);
+                                    }
+                                    &:first-of-type {
+                                        border-radius: 4px 0 0 4px;
+                                    }
+
+                                    &:last-of-type {
+                                        border-radius: 0 4px 4px 0;
+                                    }
+                                    width: 60px;
+                                    height: 26px;
+                                    background-color: rgba(242, 242, 242, 1);
+                                    font-size: 14px;
+                                    color: #7f7f7f;
+                                    &.pitch {
+                                        background-color: rgba(123, 140, 211, 1);
+                                        color: #ffffff;
+                                        border-right: none;
+                                    }
+                                }
+
+                                .delete {
+                                    width: 26px;
+                                    height: 26px;
+                                    border-radius: 50%;
+                                    background-color: rgb(242, 242, 242);
+                                    margin-left: 15px;
+                                    .delete-icon {
+                                        width: 13px;
+                                        height: 14px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    .bottom {
+                        padding: 14px 10px 5px;
+                        .edit {
+                            width: 24px;
+                            height: 24px;
+                            border-radius: 50%;
+                            background-color: rgb(242, 242, 242);
+                            margin-right: 10px;
+                            .icon {
+                                width: 16px;
+                                height: 16px;
+                            }
+                        }
+                        .input {
+                            padding-top: 4px;
+                            border: none;
+                            outline: none;
+                            background-color: transparent;
+                            resize: none;
+                            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+                        }
+
+                        .drag-icon {
+                            width: 16px;
+                            height: 16px;
+                            margin-top: 6px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.empty-box {
+    flex-direction: column;
+
+    .icon {
+        width: 80px;
+        height: 94px;
+    }
+
+    .text {
+        font-size: 14px;
+        color: #7f7f7f;
+        text-align: center;
+        line-height: 24px;
+    }
+}
diff --git a/html/index.html b/html/index.html
index 3cfe8d5..f9f861c 100644
--- a/html/index.html
+++ b/html/index.html
@@ -121,7 +121,7 @@
                                 <div v-else-if="item.contraststatus?.status === 0 || item.contraststatus?.ismanage === 0" class="circle flexcenter" @click="openMoreSelect('admission',index,i)">
                                     <img class="img-dot" src="/img/dot-dot-dot.png" />
                                 </div>
-                                <div v-else class="circle flexcenter" @click="handleClick('admission',item,index,i)" :class="'add' + item.random" >
+                                <div v-else class="circle flexcenter" @click="handleClick('admission',item,index,i)" :class="'add' + item.random">
                                     <img class="img-add" src="/img/add-thick.svg" />
                                 </div>
                                 <div v-if="item.moreState" class="select-mask" @click="closeMoreSelectAll('admission')"></div>
@@ -189,7 +189,7 @@
                         <div v-else-if="item.contraststatus?.status === 0 || item.contraststatus?.ismanage === 0" class="circle flexcenter" @click="openMoreSelect('list',index)">
                             <img class="img-dot" src="/img/dot-dot-dot.png" />
                         </div>
-                        <div v-else class="circle flexcenter" :class="'add' + item.random"  @click="handleClick('list',item,index)">
+                        <div v-else class="circle flexcenter" :class="'add' + item.random" @click="handleClick('list',item,index)">
                             <img class="img-add" src="/img/add-thick.svg" />
                         </div>
                         <div v-if="item.moreState" class="select-mask" @click="closeMoreSelectAll('list')"></div>
@@ -207,18 +207,144 @@
                 </div>
             </div>
 
-       
-
             <!-- 底部 -->
             <base-bottom ref="baseRef"></base-bottom>
 
-            <div class="my-project">
-                dfgfdgdfgdfgfd
-            </div>
+            <div class="my-project flexacenter">
+                <div class="my-box">
+                    <div class="head flexacenter">
+                        <div class="item flexcenter" :class="{'pitch': classify == 'vs'}" @click="cutClassify('vs')">
+                            <img class="icon" src="/img/contrast-icon.png" />
+                            <img class="bj bj-left" src="/img/left-icon.svg" />
+                            项目对比
+                        </div>
+                        <div class="item flexcenter" :class="{'pitch': classify == 'manage'}" @click="cutClassify('manage')">
+                            <img class="icon" src="/img/manage-icon.png" />
+                            <img class="bj bj-right" src="/img/left-icon.svg" />
+                            项目管理
+                        </div>
+                    </div>
+                    <div v-if="classify == 'vs'" class="contrast-box flexflex">
+                        <div class="left" :class="{'left1': quickList.length == 0 }">
+                            <div class="hint flexacenter">
+                                <div class="text">选择2~3个项目开始对比</div>
+                                <div class="btn flexacenter">
+                                    <div class="delete flexcenter" @click="contrastDelete" :class="{'have': isPitchExceedOne}">删除</div>
+                                    <div class="begin flexcenter" :class="{'have': isPitchExceedTwo}">开始对比</div>
+                                </div>
+                            </div>
+                            <div v-if="false" class="empty-box flexcenter">
+                                <img class="icon" src="/img/empty-icon.png" />
+                                <span class="text">把你感兴趣的项目加进来，</span>
+                                <span class="text">可以做项目对比哦！</span>
+                            </div>
+                            <div class="list">
+                                <template v-for="(item, index) in contrastList" :key="item.projectid">
+                                    <div v-if="item.status == 1" class="item flexacenter">
+                                        <div class="left">
+                                            <div class="name">{{ item.name_zh }}</div>
+                                            <div class="english">{{ item.name_en }}</div>
+                                            <div class="message flexacenter">
+                                                <img class="icon" :src="item.schoollogo" />
+                                                {{ item.schoolalias }}
+                                                <template v-if="item.ismanage == 1">
+                                                    <div class="line">|</div>
+                                                    <div class="state-text">{{ stateObj[item.typeid] }}</div>
+                                                </template>
+                                            </div>
+                                        </div>
+                                        <div class="btn flexcenter" @click="cutSelect(index)">
+                                            <img v-if="item.pitch" class="icon" src="/img/tick-circle-green.svg" />
+                                            <img v-else class="icon" src="/img/tick-circle-gray-hollow.svg" />
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
 
+                        <div v-if="quickList.length != 0" class="right">
+                            <div class="hint">快速对比（{{ quickList.length }}）</div>
+                            <div class="list">
+                                <div class="item flexacenter" v-for="(item, index) in quickList">
+                                    <div class="project-list">
+                                        <div class="project-item flexacenter" v-for="item in item.data">
+                                            <img class="icon" mode="widthFix" :src="item.schoollogo" />
+                                            {{ item.schoolalias }}
+                                            <img class="arrows" src="/img/arrows-circle-yellow-green.svg" mode="widthFix" />
+                                            <view class="text one-line-display">{{ item.name_zh }}</view>
+                                        </div>
+                                    </div>
+                                    <div class="btn flexcenter">
+                                        <img class="icon" src="/img/arrows-long-white.svg" />
+                                    </div>
+                                    <img @click="quickShowHideDelete(index)" class="dot" src="/img/dot-dot-dot-gray.png" />
+                                    <div v-if="item.deleteState" @click="quickDelete(index)" class="delete flexcenter">删除</div>
+                                    <div v-if="item.deleteState" @click="quickShowHideDelete(index)" class="delete-mask flexcenter"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-else class="manage-box">
+                        <div class="tab-list flexflex">
+                            <div class="item" :class="{'pitch': index == typeIndex }" v-for="(item,index) in typeList" @click="cutTypeid(index)">{{ item.name }} {{ item.count }}</div>
+                        </div>
+                        <div v-if="manageCount == 0" class="empty-box flexcenter">
+                            <img class="icon" src="/img/empty-icon.png" />
+                            <span class="text">暂无项目</span>
+                        </div>
+
+                        <div v-else class="list">
+                            <div class="hint flexacenter" v-if="!manageHintState">
+                                <div class="text">加入对比单的项目会同步进入项目管理当中；两者独立管理，删除操作互不影响。</div>
+                                <img @click="manageClose()" class="icon" src="/img/close-icon.png" />
+                            </div>
+                            <div class="list-box flexflex" ref="manageListRef">
+                                <template v-for="(item,index) in manageList">
+                                    <div class="item" v-if="item.ismanage == 1" :class="'item' + index">
+                                        <div class="top flexacenter">
+                                            <div class="info flex1">
+                                                <div class="name">{{ item.name_zh }}</div>
+                                                <div class="english">{{ item.name_en }}</div>
+                                                <div class="school flexacenter">
+                                                    <img class="icon" :src="item.schoollogo" />
+                                                    {{ item.schoolalias }}
+                                                </div>
+                                            </div>
+                                            <div class="state-box">
+                                                <div class="btn flexcenter">{{ stateObj[item.typeid] }}<img class="icon" src="/img/arrows-triangle-white.svg" /></div>
+
+                                                <div v-if="false" class="state-list-box flexacenter">
+                                                    <div class="state-list flexacenter">
+                                                        <div class="state-item pitch"></div>
+                                                        <div class="state-item"></div>
+                                                        <div class="state-item"></div>
+                                                        <div class="state-item"></div>
+                                                    </div>
+
+                                                    <div class="delete flexcenter">
+                                                        <img class="delete-icon" src="/img/delete-icon.svg" />
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="bottom flexflex">
+                                            <div class="edit flexcenter">
+                                                <img class="icon" src="/img/u1434.png" />
+                                            </div>
+                                            <textarea class="input flex1" v-model="item.remarks" placeholder="添加备注…" maxlength="100" @blur="inputblur(index)" @input="inputInput(index)"></textarea>
+                                            <img class="drag-icon" src="/img/drag-icon.png" />
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
         <script>
-            const { createApp, ref, onMounted, nextTick, onUnmounted } = Vue
+            const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
             const projectIndex = createApp({
                 setup() {
                     let dataListRef = ref(null)
@@ -251,6 +377,8 @@
                             getFate()
                             getAdmission()
                             getProjectData()
+
+                            getMyInit()
                         })
                     }
 
@@ -380,7 +508,7 @@
                     }
 
                     const baseRef = ref(null)
-                    
+
                     // 点击事件
                     const handleClick = (type, item, index, i) => {
                         const random = item.random
@@ -442,6 +570,209 @@
                         window.removeEventListener("scroll", handleScroll)
                     })
 
+                    let contrastList = ref([])
+
+                    const stateObj = ref({
+                        0: "待定",
+                        1: "主申",
+                        2: "冲刺",
+                        3: "保底",
+                    })
+
+                    let manageHintState = ref(false)
+                    let classify = ref("vs")
+
+                    // 我的项目的初始化
+                    const getMyInit = () => {
+                        console.log(localStorage.getItem("PMState"))
+                        manageHintState.value = localStorage.getItem("PMState") || false
+
+                        getList().then(res => {
+                            const data = res.data || {}
+                            const nums = data.nums || {}
+                            classify.value = "vs"
+                            if (nums["contrast"] == 0 && nums["manage"] != 0) {
+                                classify.value = "manage"
+                                handleUserProjectData(res)
+                            } else {
+                                getQuickList()
+                                handleProjectListData(res)
+                            }
+                        })
+                    }
+
+                    let projectCount = ref(0)
+                    handleProjectListData = res => {
+                        const data = res.data
+                        let list = data.data || []
+                        let count = 0
+                        list.forEach(element => {
+                            if (element.status == 1) count++
+                        })
+                        projectCount.value = count
+                        contrastList.value = list
+                    }
+
+                    let typeid = ref("")
+                    let typeIndex = ref(0)
+                    let typeList = ref([])
+                    // 获取项目管理
+                    const getUserProject = () => {
+                        getList({
+                            page: 1,
+                            typeid: typeid.value,
+                        }).then(res => {
+                            handleUserProjectData(res)
+                        })
+                    }
+
+                    const getProjectList = () => {
+                        getList({
+                            page: 1,
+                        }).then(res => {
+                            handleProjectListData(res)
+                        })
+                    }
+
+                    let manageList = ref([])
+                    let manageCount = ref(0)
+                    const handleUserProjectData = res => {
+                        const data = res.data
+                        let list = data.data || []
+                        list.forEach((element, index) => {
+                            element["sortKey"] = index
+                        })
+                        typeList.value = data.typeList
+                        manageList.value = list
+                        manageCount.value = data.count
+
+                        nextTick(() => {
+                            manageList.value.forEach((element, index) => {
+                                if (element.ismanage == 1) {
+                                    const textarea = manageListRef.value.querySelector(`.item${index} textarea`)
+                                    textarea.style.height = "auto"
+                                    textarea.style.height = textarea.scrollHeight + "px"
+                                }
+                            })
+                        })
+                    }
+
+                    const isPitchExceedOne = computed(() => {
+                        return contrastList.value.filter(item => item.pitch).length >= 1
+                    })
+
+                    const isPitchExceedTwo = computed(() => {
+                        return contrastList.value.filter(item => item.pitch).length >= 2
+                    })
+
+                    // 点击选择项目
+                    const cutSelect = index => {
+                        const item = contrastList.value[index]
+                        const state = item["pitch"] || false
+                        if (!state && contrastList.value.filter(item => item["pitch"]).length >= 3) return
+                        item["pitch"] = !item["pitch"]
+                    }
+
+                    let quickList = ref([])
+                    // 获取快速列表
+                    const getQuickList = () => {
+                        $ajaxget("/api/project.contrast/getQuickList", {}).then(res => {
+                            if (res.code != 200) return
+                            const data = res.data
+                            quickList.value = data || []
+                        })
+                    }
+
+                    // 快速列表点击 显示删除 按钮
+                    const quickShowHideDelete = index => {
+                        quickList.value[index]["deleteState"] = !quickList.value[index]["deleteState"]
+                    }
+
+                    // 点击删除快速对比
+                    const quickDelete = index => {
+                        const data = quickList.value[index]
+                        $ajax("/api/project.contrast/deleteQuick", {
+                            id: data.id,
+                        }).then(res => {
+                            quickList.value.splice(index, 1)
+                        })
+                    }
+
+                    // 点击 删除 我的对比
+                    const contrastDelete = () => {
+                        contrastList.value.forEach((element, index) => {
+                            if (element["pitch"]) {
+                                $ajax("/api/project.contrast/delete", {
+                                    projectid: element.projectid,
+                                }).then(res => {
+                                    contrastList.value[index]["status"] = false
+                                })
+                            }
+                        })
+                    }
+
+                    // 公共的获取列表 方法
+                    const getList = (obj = {}) => {
+                        return new Promise((resolve, reject) => {
+                            $ajax("/api/project.user", {
+                                limit: 2000,
+                                page: obj.page || 1,
+                                typeid: obj.typeid || "",
+                            }).then(res => resolve(res))
+                        })
+                    }
+
+                    // 切换查看类型
+                    const cutClassify = type => {
+                        // const classify = e.currentTarget.dataset.type
+                        if (type == classify.value) return
+                        classify.value = type
+                        if (classify.value == "manage") {
+                            typeid.value = ""
+                            manageList.value = []
+                            getUserProject()
+                        }
+                        if (classify.value == "vs") {
+                            quickList.value = []
+                            contrastList.value = []
+                            getProjectList()
+                            getQuickList()
+                        }
+                    }
+
+                    const manageListRef = ref(null)
+
+                    const inputInput = index => {
+                        const textarea = manageListRef.value.querySelector(`.item${index} textarea`)
+                        textarea.style.height = "auto"
+                        textarea.style.height = textarea.scrollHeight + "px"
+                    }
+
+                    const inputblur = index => {
+                        const target = manageList.value[index]
+
+                        $ajax("/api/project.user/remarks", {
+                            token: target.token,
+                            remarks: target.remarks,
+                        }).then(res => {
+                            console.log("message", res.message)
+                        })
+                    }
+
+                    // 关闭 底部提示框
+                    const manageClose = () => {
+                        manageHintState.value = true
+                        localStorage.setItem("PMState", 1)
+                    }
+
+                    // 点击头部 tab
+                    const cutTypeid = index => {
+                        typeIndex.value = index
+                        typeid.value = typeList.value[index].value
+                        manageList.value = []
+                        getUserProject()
+                    }
+
                     return {
                         user,
                         university,
@@ -463,6 +794,30 @@
                         openMoreSelect,
                         closeMoreSelectAll,
                         baseRef,
+                        stateObj,
+                        contrastList,
+                        projectCount,
+                        cutSelect,
+                        isPitchExceedOne,
+                        isPitchExceedTwo,
+                        quickList,
+                        quickShowHideDelete,
+                        quickDelete,
+                        contrastDelete,
+                        classify,
+
+                        manageList,
+                        manageCount,
+                        cutClassify,
+                        typeList,
+                        typeid,
+                        typeIndex,
+                        inputblur,
+                        inputInput,
+                        manageListRef,
+                        manageHintState,
+                        manageClose,
+                        cutTypeid,
                     }
                 },
             })
diff --git a/img/arrows-circle-yellow-green.svg b/img/arrows-circle-yellow-green.svg
new file mode 100644
index 0000000..7d9ebba
--- /dev/null
+++ b/img/arrows-circle-yellow-green.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M 5.25 10.046875  C 5.38541666666667 10.046875  5.50260416666667 9.99739583333333  5.6015625 9.8984375  L 9.1484375 6.3515625  C 9.24739583333333 6.25260416666667  9.296875 6.13541666666667  9.296875 6  C 9.296875 5.86458333333333  9.24739583333333 5.74739583333333  9.1484375 5.6484375  L 5.6015625 2.1015625  C 5.50260416666667 2.00260416666667  5.38541666666667 1.953125  5.25 1.953125  C 5.11458333333333 1.953125  4.99739583333333 2.00260416666667  4.8984375 2.1015625  L 4.1015625 2.8984375  C 4.00260416666667 2.99739583333333  3.953125 3.11458333333333  3.953125 3.25  C 3.953125 3.38541666666667  4.00260416666667 3.50260416666667  4.1015625 3.6015625  L 6.5 6  L 4.1015625 8.3984375  C 4.00260416666667 8.49739583333333  3.953125 8.61458333333333  3.953125 8.75  C 3.953125 8.88541666666667  4.00260416666667 9.00260416666667  4.1015625 9.1015625  L 4.8984375 9.8984375  C 4.99739583333333 9.99739583333333  5.11458333333333 10.046875  5.25 10.046875  Z M 11.1953125 2.98828125  C 11.7317708333333 3.90755208333333  12 4.91145833333333  12 6  C 12 7.08854166666667  11.7317708333333 8.09244791666666  11.1953125 9.01171875  C 10.6588541666667 9.93098958333333  9.93098958333333 10.6588541666667  9.01171875 11.1953125  C 8.09244791666667 11.7317708333333  7.08854166666667 12  6 12  C 4.91145833333333 12  3.90755208333333 11.7317708333333  2.98828125 11.1953125  C 2.06901041666667 10.6588541666667  1.34114583333333 9.93098958333333  0.8046875 9.01171875  C 0.268229166666667 8.09244791666666  0 7.08854166666667  0 6  C 0 4.91145833333333  0.268229166666667 3.90755208333333  0.8046875 2.98828125  C 1.34114583333333 2.06901041666667  2.06901041666667 1.34114583333333  2.98828125 0.8046875  C 3.90755208333333 0.268229166666666  4.91145833333333 0  6 0  C 7.08854166666667 0  8.09244791666667 0.268229166666666  9.01171875 0.8046875  C 9.93098958333333 1.34114583333333  10.6588541666667 2.06901041666667  11.1953125 2.98828125  Z " fill-rule="nonzero" fill="#9a9d02" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/arrows-long-white.svg b/img/arrows-long-white.svg
new file mode 100644
index 0000000..817d2b5
--- /dev/null
+++ b/img/arrows-long-white.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="6px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -6 -10 )">
+    <path d="M 13.9189814814815 2.80104031209363  C 13.9729938271605 2.85305591677503  14 2.91287386215865  14 2.98049414824447  C 14 3.05331599479844  13.9729938271605 3.11573472041612  13.9189814814815 3.16775032509753  L 10.8078703703704 5.9297789336801  C 10.721450617284 6.00260078023407  10.6269290123457 6.01820546163849  10.5243055555556 5.97659297789337  C 10.4216820987654 5.9297789336801  10.3703703703704 5.85435630689207  10.3703703703704 5.75032509752926  L 10.3703703703704 4  L 0.259259259259259 4  C 0.183641975308642 4.00260078023407  0.121527777777778 3.97919375812744  0.0729166666666667 3.93237971391417  C 0.0243055555555556 3.88556566970091  0 3.82574772431729  0 3.75292587776333  L 0 2.25487646293888  C 0 2.18205461638492  0.0243055555555556 2.1222366710013  0.0729166666666667 2.07542262678804  C 0.121527777777778 2.02860858257477  0.183641975308642 2.00520156046814  0.259259259259259 2  L 10.3703703703704 2  L 10.3703703703704 0.257477243172952  C 10.3703703703704 0.148244473342003  10.4216820987654 0.0728218465539658  10.5243055555556 0.0312093628088428  C 10.6269290123457 -0.0104031209362816  10.721450617284 0.00260078023406973  10.8078703703704 0.0702210663198961  L 13.9189814814815 2.80104031209363  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 6 10 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/close-icon.png b/img/close-icon.png
new file mode 100644
index 0000000..f219b2a
Binary files /dev/null and b/img/close-icon.png differ
diff --git a/img/delete-icon.svg b/img/delete-icon.svg
new file mode 100644
index 0000000..37ccd37
--- /dev/null
+++ b/img/delete-icon.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="13px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1138 -2212 )">
+    <path d="M 4.64417613636364 5.33203125  C 4.69957386363636 5.38671875  4.72727272727273 5.45659722222222  4.72727272727273 5.54166666666667  L 4.72727272727273 10.7916666666667  C 4.72727272727273 10.8767361111111  4.69957386363636 10.9466145833333  4.64417613636364 11.0013020833333  C 4.58877840909091 11.0559895833333  4.51799242424242 11.0833333333333  4.43181818181818 11.0833333333333  L 3.84090909090909 11.0833333333333  C 3.75473484848485 11.0833333333333  3.68394886363636 11.0559895833333  3.62855113636364 11.0013020833333  C 3.57315340909091 10.9466145833333  3.54545454545454 10.8767361111111  3.54545454545454 10.7916666666667  L 3.54545454545454 5.54166666666667  C 3.54545454545454 5.45659722222222  3.57315340909091 5.38671875  3.62855113636364 5.33203125  C 3.68394886363636 5.27734375  3.75473484848485 5.25  3.84090909090909 5.25  L 4.43181818181818 5.25  C 4.51799242424242 5.25  4.58877840909091 5.27734375  4.64417613636364 5.33203125  Z M 7.0078125 5.33203125  C 7.06321022727273 5.38671875  7.09090909090909 5.45659722222222  7.09090909090909 5.54166666666667  L 7.09090909090909 10.7916666666667  C 7.09090909090909 10.8767361111111  7.06321022727273 10.9466145833333  7.0078125 11.0013020833333  C 6.95241477272727 11.0559895833333  6.88162878787879 11.0833333333333  6.79545454545454 11.0833333333333  L 6.20454545454546 11.0833333333333  C 6.11837121212121 11.0833333333333  6.04758522727273 11.0559895833333  5.9921875 11.0013020833333  C 5.93678977272727 10.9466145833333  5.90909090909091 10.8767361111111  5.90909090909091 10.7916666666667  L 5.90909090909091 5.54166666666667  C 5.90909090909091 5.45659722222222  5.93678977272727 5.38671875  5.9921875 5.33203125  C 6.04758522727273 5.27734375  6.11837121212121 5.25  6.20454545454546 5.25  L 6.79545454545454 5.25  C 6.88162878787879 5.25  6.95241477272727 5.27734375  7.0078125 5.33203125  Z M 9.37144886363636 5.33203125  C 9.42684659090909 5.38671875  9.45454545454546 5.45659722222222  9.45454545454546 5.54166666666667  L 9.45454545454546 10.7916666666667  C 9.45454545454546 10.8767361111111  9.42684659090909 10.9466145833333  9.37144886363636 11.0013020833333  C 9.31605113636364 11.0559895833333  9.24526515151515 11.0833333333333  9.15909090909091 11.0833333333333  L 8.56818181818182 11.0833333333333  C 8.48200757575758 11.0833333333333  8.41122159090909 11.0559895833333  8.35582386363636 11.0013020833333  C 8.30042613636364 10.9466145833333  8.27272727272727 10.8767361111111  8.27272727272727 10.7916666666667  L 8.27272727272727 5.54166666666667  C 8.27272727272727 5.45659722222222  8.30042613636364 5.38671875  8.35582386363636 5.33203125  C 8.41122159090909 5.27734375  8.48200757575758 5.25  8.56818181818182 5.25  L 9.15909090909091 5.25  C 9.24526515151515 5.25  9.31605113636364 5.27734375  9.37144886363636 5.33203125  Z M 10.5717329545455 12.509765625  C 10.6148200757576 12.3973524305556  10.6363636363636 12.2743055555556  10.6363636363636 12.140625  L 10.6363636363636 3.5  L 2.36363636363636 3.5  L 2.36363636363636 12.140625  C 2.36363636363636 12.2743055555556  2.38517992424242 12.3973524305556  2.42826704545455 12.509765625  C 2.47135416666667 12.6221788194444  2.51598011363636 12.7042100694444  2.56214488636364 12.755859375  C 2.60830965909091 12.8075086805556  2.640625 12.8333333333333  2.65909090909091 12.8333333333333  L 10.3409090909091 12.8333333333333  C 10.359375 12.8333333333333  10.3916903409091 12.8075086805556  10.4378551136364 12.755859375  C 10.4840198863636 12.7042100694444  10.5286458333333 12.6221788194444  10.5717329545455 12.509765625  Z M 4.88423295454546 1.26692708333333  L 4.43181818181818 2.33333333333333  L 8.56818181818182 2.33333333333333  L 8.125 1.26692708333333  C 8.08191287878788 1.21223958333333  8.0295928030303 1.17881944444444  7.96803977272727 1.16666666666667  L 5.04119318181818 1.16666666666667  C 4.97964015151515 1.17881944444444  4.92732007575758 1.21223958333333  4.88423295454546 1.26692708333333  Z M 12.9169034090909 2.41536458333333  C 12.9723011363636 2.47005208333333  13 2.53993055555555  13 2.625  L 13 3.20833333333333  C 13 3.29340277777778  12.9723011363636 3.36328125  12.9169034090909 3.41796875  C 12.8615056818182 3.47265625  12.7907196969697 3.5  12.7045454545455 3.5  L 11.8181818181818 3.5  L 11.8181818181818 12.140625  C 11.8181818181818 12.6449652777778  11.6735321969697 13.0809461805556  11.3842329545455 13.4485677083333  C 11.0949337121212 13.8161892361111  10.7471590909091 14  10.3409090909091 14  L 2.65909090909091 14  C 2.25284090909091 14  1.90506628787879 13.822265625  1.61576704545455 13.466796875  C 1.3264678030303 13.111328125  1.18181818181818 12.6814236111111  1.18181818181818 12.1770833333333  L 1.18181818181818 3.5  L 0.295454545454545 3.5  C 0.209280303030303 3.5  0.138494318181818 3.47265625  0.0830965909090909 3.41796875  C 0.0276988636363636 3.36328125  0 3.29340277777778  0 3.20833333333333  L 0 2.625  C 0 2.53993055555555  0.0276988636363636 2.47005208333333  0.0830965909090909 2.41536458333333  C 0.138494318181818 2.36067708333333  0.209280303030303 2.33333333333333  0.295454545454545 2.33333333333333  L 3.1484375 2.33333333333333  L 3.79474431818182 0.811197916666667  C 3.88707386363636 0.586371527777777  4.05326704545455 0.394965277777777  4.29332386363636 0.236979166666667  C 4.53338068181818 0.0789930555555547  4.77651515151515 0  5.02272727272727 0  L 7.97727272727273 0  C 8.22348484848485 0  8.46661931818182 0.0789930555555547  8.70667613636364 0.236979166666667  C 8.94673295454546 0.394965277777777  9.11292613636364 0.586371527777777  9.20525568181818 0.811197916666667  L 9.8515625 2.33333333333333  L 12.7045454545455 2.33333333333333  C 12.7907196969697 2.33333333333333  12.8615056818182 2.36067708333333  12.9169034090909 2.41536458333333  Z " fill-rule="nonzero" fill="#7f7f7f" stroke="none" transform="matrix(1 0 0 1 1138 2212 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/dot-dot-dot-gray.png b/img/dot-dot-dot-gray.png
new file mode 100644
index 0000000..d77d217
Binary files /dev/null and b/img/dot-dot-dot-gray.png differ
diff --git a/img/drag-icon.png b/img/drag-icon.png
new file mode 100644
index 0000000..700f255
Binary files /dev/null and b/img/drag-icon.png differ
diff --git a/img/empty-icon.png b/img/empty-icon.png
new file mode 100644
index 0000000..6803200
Binary files /dev/null and b/img/empty-icon.png differ
diff --git a/img/left-icon.svg b/img/left-icon.svg
new file mode 100644
index 0000000..7f485c7
--- /dev/null
+++ b/img/left-icon.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="474px" height="61px" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M 0 60  L 473 60  L 399.418956833633 6.42982302564229  C 392.060852516996 1.07280532820652  385.151335679672 0  363.189169599591 0  L 12.0765957446809 0  C 6.76289361702129 0  0 3.36  0 6  L 0 60  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/tick-circle-gray-hollow.svg b/img/tick-circle-gray-hollow.svg
new file mode 100644
index 0000000..119f51b
--- /dev/null
+++ b/img/tick-circle-gray-hollow.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="M 15.4947916666667 8.33333333333333  C 15.4947916666667 8.55902777777778  15.4123263888889 8.75434027777778  15.2473958333333 8.91927083333333  L 9.75260416666667 14.4140625  C 9.58767361111111 14.5789930555556  9.39236111111111 14.6614583333333  9.16666666666667 14.6614583333333  C 8.94097222222222 14.6614583333333  8.74565972222222 14.5789930555556  8.58072916666667 14.4140625  L 4.75260416666667 10.5859375  C 4.58767361111111 10.4210069444444  4.50520833333333 10.2256944444444  4.50520833333333 10  C 4.50520833333333 9.77430555555556  4.58767361111111 9.57899305555556  4.75260416666667 9.4140625  L 6.08072916666667 8.0859375  C 6.24565972222222 7.92100694444444  6.44097222222222 7.83854166666667  6.66666666666667 7.83854166666667  C 6.89236111111111 7.83854166666667  7.08767361111111 7.92100694444444  7.25260416666667 8.0859375  L 9.16666666666667 10  L 12.7473958333333 6.41927083333333  C 12.9123263888889 6.25434027777778  13.1076388888889 6.171875  13.3333333333333 6.171875  C 13.5590277777778 6.171875  13.7543402777778 6.25434027777778  13.9192708333333 6.41927083333333  L 15.2473958333333 7.74739583333333  C 15.4123263888889 7.91232638888889  15.4947916666667 8.10763888888889  15.4947916666667 8.33333333333333  Z M 16.1328125 13.5546875  C 16.7664930555556 12.4696180555556  17.0833333333333 11.2847222222222  17.0833333333333 10  C 17.0833333333333 8.71527777777778  16.7664930555556 7.53038194444444  16.1328125 6.4453125  C 15.4991319444444 5.36024305555555  14.6397569444444 4.50086805555555  13.5546875 3.8671875  C 12.4696180555556 3.23350694444444  11.2847222222222 2.91666666666667  10 2.91666666666667  C 8.71527777777778 2.91666666666667  7.53038194444445 3.23350694444444  6.4453125 3.8671875  C 5.36024305555556 4.50086805555555  4.50086805555556 5.36024305555555  3.8671875 6.4453125  C 3.23350694444444 7.53038194444444  2.91666666666667 8.71527777777778  2.91666666666667 10  C 2.91666666666667 11.2847222222222  3.23350694444444 12.4696180555556  3.8671875 13.5546875  C 4.50086805555556 14.6397569444444  5.36024305555556 15.4991319444444  6.4453125 16.1328125  C 7.53038194444445 16.7664930555556  8.71527777777778 17.0833333333333  10 17.0833333333333  C 11.2847222222222 17.0833333333333  12.4696180555556 16.7664930555556  13.5546875 16.1328125  C 14.6397569444444 15.4991319444444  15.4991319444444 14.6397569444444  16.1328125 13.5546875  Z M 18.6588541666667 4.98046875  C 19.5529513888889 6.51258680555555  20 8.18576388888889  20 10  C 20 11.8142361111111  19.5529513888889 13.4874131944444  18.6588541666667 15.01953125  C 17.7647569444444 16.5516493055556  16.5516493055556 17.7647569444444  15.01953125 18.6588541666667  C 13.4874131944444 19.5529513888889  11.8142361111111 20  10 20  C 8.18576388888889 20  6.51258680555556 19.5529513888889  4.98046875 18.6588541666667  C 3.44835069444444 17.7647569444444  2.23524305555556 16.5516493055556  1.34114583333333 15.01953125  C 0.447048611111111 13.4874131944444  0 11.8142361111111  0 10  C 0 8.18576388888889  0.447048611111111 6.51258680555555  1.34114583333333 4.98046875  C 2.23524305555556 3.44835069444444  3.44835069444444 2.23524305555555  4.98046875 1.34114583333333  C 6.51258680555556 0.447048611111109  8.18576388888889 0  10 0  C 11.8142361111111 0  13.4874131944444 0.447048611111109  15.01953125 1.34114583333333  C 16.5516493055556 2.23524305555555  17.7647569444444 3.44835069444444  18.6588541666667 4.98046875  Z " fill-rule="nonzero" fill="#bdbaba" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/tick-circle-green.svg b/img/tick-circle-green.svg
new file mode 100644
index 0000000..308bae7
--- /dev/null
+++ b/img/tick-circle-green.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1314 -2317 )">
+    <path d="M 16.484375 8.4765625  C 16.640625 8.3203125  16.71875 8.125  16.71875 7.890625  C 16.71875 7.64756944444444  16.640625 7.44791666666667  16.484375 7.29166666666667  L 15.2994791666667 6.11979166666667  C 15.1345486111111 5.95486111111111  14.9392361111111 5.87239583333333  14.7135416666667 5.87239583333333  C 14.4878472222222 5.87239583333333  14.2925347222222 5.95486111111111  14.1276041666667 6.11979166666667  L 8.81510416666667 11.4192708333333  L 5.87239583333333 8.4765625  C 5.70746527777778 8.31163194444444  5.51215277777778 8.22916666666667  5.28645833333333 8.22916666666667  C 5.06076388888889 8.22916666666667  4.86545138888889 8.31163194444444  4.70052083333333 8.4765625  L 3.515625 9.6484375  C 3.359375 9.8046875  3.28125 10.0043402777778  3.28125 10.2473958333333  C 3.28125 10.4817708333333  3.359375 10.6770833333333  3.515625 10.8333333333333  L 8.22916666666667 15.546875  C 8.39409722222222 15.7118055555556  8.58940972222222 15.7942708333333  8.81510416666667 15.7942708333333  C 9.04947916666667 15.7942708333333  9.24913194444444 15.7118055555556  9.4140625 15.546875  L 16.484375 8.4765625  Z M 18.6588541666667 4.98046875  C 19.5529513888889 6.51258680555555  20 8.18576388888889  20 10  C 20 11.8142361111111  19.5529513888889 13.4874131944444  18.6588541666667 15.01953125  C 17.7647569444444 16.5516493055556  16.5516493055556 17.7647569444444  15.01953125 18.6588541666667  C 13.4874131944444 19.5529513888889  11.8142361111111 20  10 20  C 8.18576388888889 20  6.51258680555556 19.5529513888889  4.98046875 18.6588541666667  C 3.44835069444444 17.7647569444444  2.23524305555556 16.5516493055556  1.34114583333333 15.01953125  C 0.447048611111111 13.4874131944444  0 11.8142361111111  0 10  C 0 8.18576388888889  0.447048611111111 6.51258680555555  1.34114583333333 4.98046875  C 2.23524305555556 3.44835069444444  3.44835069444444 2.23524305555555  4.98046875 1.34114583333333  C 6.51258680555556 0.447048611111109  8.18576388888889 0  10 0  C 11.8142361111111 0  13.4874131944444 0.447048611111109  15.01953125 1.34114583333333  C 16.5516493055556 2.23524305555555  17.7647569444444 3.44835069444444  18.6588541666667 4.98046875  Z " fill-rule="nonzero" fill="#6fc16d" stroke="none" transform="matrix(1 0 0 1 1314 2317 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/u1434.png b/img/u1434.png
new file mode 100644
index 0000000..af69726
Binary files /dev/null and b/img/u1434.png differ
diff --git a/js/common.js b/js/common.js
index a8e2ada..fb2bdeb 100644
--- a/js/common.js
+++ b/js/common.js
@@ -12,7 +12,6 @@ function $ajax(url) {
     data["authorization"] = "i0pmeq8tsx1orf5q8ywr5p0p4nr1j6b4"
 
     return new Promise(function (resolve, reject) {
-        console.log(axios)
         axios
             .post(url, data, {
                 emulateJSON: true,