diff --git a/04-details/details.css b/04-details/details.css
index c93a547..1c65b1b 100644
--- a/04-details/details.css
+++ b/04-details/details.css
@@ -582,6 +582,7 @@ body {
 .main .content .details-box .link.brochure .img {
   width: 70px;
   height: 70px;
+  margin-right: 8px;
 }
 .main .content .details-box .link.brochure .title {
   font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
@@ -712,60 +713,227 @@ body {
 }
 .main .else {
   width: 290px;
-  height: 20px;
+  height: 2000px;
+  background: -webkit-linear-gradient(270.00883066deg, #f7fbf7 0%, #eaf6ea 100%);
+  background: -moz-linear-gradient(179.99116934deg, #f7fbf7 0%, #eaf6ea 100%);
+  background: linear-gradient(179.99116934deg, #f7fbf7 0%, #eaf6ea 100%);
+  border: none;
+  border-radius: 12px;
+  padding: 20px 10px 0;
+}
+.main .else .school {
+  margin-bottom: 20px;
+}
+.main .else .school .logo {
+  width: 50px;
+  height: 50px;
+  background-color: #ffffff;
+  border: 1px solid #f6f6f6;
+  border-radius: 8px;
+  margin-right: 10px;
+}
+.main .else .school .logo .img {
+  height: 30px;
+}
+.main .else .school .info .name {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 18px;
+  color: #000000;
+  margin-bottom: 5px;
+}
+.main .else .school .info .name-en {
+  font-size: 13px;
+  color: #555555;
+}
+.main .else .case {
+  width: 270px;
+  background-color: #ffffff;
+  border-radius: 8px;
+}
+.main .else .case .head {
+  width: 270px;
+  height: 45px;
+  border-bottom: 1px dotted #ebebeb;
+  padding: 0 10px;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.501961), #d8f1d8);
+  overflow: hidden;
+}
+.main .else .case .head .dot {
+  width: 14px;
+  height: 14px;
+  background-color: #e7f7ee;
+  border: 1px solid #b7c4bd;
+  border-radius: 39px;
+  position: relative;
+  margin-right: 10px;
+}
+.main .else .case .head .dot::after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  display: block;
+  background-color: #72db86;
+  border: 1px solid #57a869;
+  border-radius: 39px;
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.main .else .case .head .text {
+  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+  font-weight: 650;
+  font-style: normal;
+  font-size: 16px;
+  color: #000000;
+}
+.main .else .case .head .img {
+  width: 14px;
+  height: 14px;
 }
 .main .base {
   width: 640px;
   height: 60px;
-  background-color: #7b8cd3;
   border-radius: 153px;
   position: fixed;
-  bottom: 15px;
+  bottom: 30px;
   left: 50%;
   transform: translateX(-50%);
+  z-index: 2;
 }
-.main .base .left {
-  width: 450px;
+.main .base .type1 {
+  width: 100%;
+  height: 100%;
+  border-radius: 153px;
+  border: 1px solid #dbe0f2;
+  background: linear-gradient(to right, #eef7f5, #dbe3fd);
+  font-size: 15px;
+  color: #000000;
+}
+.main .base .type1 .btn {
+  line-height: 50px;
+  margin: 0 24px;
+}
+.main .base .type1 .btn .img {
+  height: 20px;
+  margin-right: 6px;
+}
+.main .base .type1 .line {
+  width: 1px;
+  height: 20px;
+  background-color: #d7d7d7;
+}
+.main .base .type1 .add {
   height: 50px;
-  background-color: #fff;
-  border-radius: 153px 15px 15px 153px;
-  margin-right: 5px;
-  padding: 0 20px;
-}
-.main .base .left .text {
-  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+  line-height: 50px;
+  text-align: center;
+  background-color: #7b8cd3;
+  border-radius: 158px;
   font-weight: 400;
   font-style: normal;
-  font-size: 16px;
-  color: rgba(170, 170, 170, 0.90196078);
-}
-.main .base .left .img {
-  width: 20px;
-  height: 20px;
-}
-.main .base .rigth {
-  width: 175px;
-  height: 50px;
-  background-color: #fff;
-  border-radius: 15px 153px 153px 15px;
-  padding-left: 19px;
-}
-.main .base .rigth .img {
-  width: 25px;
-  height: 22px;
+  font-size: 15px;
+  color: #ffffff;
   margin-right: 5px;
 }
-.main .base .rigth .text {
-  font-size: 16px;
-  color: #333333;
-  margin-right: 9px;
+.main .base .type1 .add .img {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
 }
-.main .base .rigth .number {
-  height: 20px;
-  line-height: 20px;
+.main .base .type2 {
+  width: 100%;
+  height: 100%;
   background-color: #f2f2f2;
-  border-radius: 150px;
-  font-size: 13px;
-  color: #f95d5d;
-  padding: 0 8px;
+  border: 1px solid #d7d7d7;
+  border-radius: 153px;
+}
+.main .base .type2 .btn {
+  padding: 0 20px;
+  height: 100%;
+  margin-right: 20px;
+  border-right: 1px solid #d7d7d7;
+  cursor: pointer;
+  font-size: 15px;
+  color: #000000;
+}
+.main .base .type2 .btn .img {
+  width: 16px;
+  height: 16px;
+  margin-left: 7px;
+}
+.main .base .type2 .input-box {
+  width: 370px;
+  height: 40px;
+  margin-right: 10px;
+  background-color: #ffffff;
+  border-radius: 158px;
+  overflow: hidden;
+}
+.main .base .type2 .input-box .img {
+  width: 20px;
+  height: 20px;
+  margin-left: 12px;
+  margin-right: 6px;
+}
+.main .base .type2 .input-box .input {
+  height: 100%;
+  padding-right: 20px;
+  border: none;
+  outline: none;
+}
+.main .base .type2 .state-box .state-btn {
+  width: 100px;
+  height: 40px;
+  background-color: #f95d5d;
+  border-radius: 158px;
+  font-size: 15px;
+  color: #ffffff;
+  cursor: pointer;
+}
+.main .base .type2 .state-box .state-btn .img {
+  width: 11px;
+  height: 6px;
+  margin-left: 8px;
+}
+.main .base .type3 {
+  width: 100%;
+  height: 100%;
+  background-color: #f2f2f2;
+  border: 1px solid #d7d7d7;
+  border-radius: 153px;
+}
+.main .base .type3 .btn {
+  padding: 0 20px;
+  height: 100%;
+  margin-right: 20px;
+  border-right: 1px solid #d7d7d7;
+  cursor: pointer;
+  font-size: 15px;
+  color: #000000;
+}
+.main .base .type3 .btn .img {
+  width: 16px;
+  height: 16px;
+  margin-left: 7px;
+}
+.main .base .type3 .add-btn {
+  width: 235px;
+  height: 40px;
+  background-color: #7b8cd3;
+  font-size: 15px;
+  color: #ffffff;
+  border-radius: 158px;
+}
+.main .base .type3 .add-btn.already {
+  background-color: #fbfbfb;
+  font-size: 16px;
+  color: #aaaaaa;
+}
+.main .base .type3 .add-btn .img {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
 }
diff --git a/04-details/details.html b/04-details/details.html
index 36a2581..9bb2600 100644
--- a/04-details/details.html
+++ b/04-details/details.html
@@ -358,19 +358,65 @@
                     </div>
                 </div>
 
-                <div class="else"></div>
+                <div class="else">
+                    <div class="school flexacenter">
+                        <div class="logo flexcenter">
+                            <img class="img" src="http://127.0.0.1:5500/images/%E9%A6%96%E9%A1%B5/u74.png" />
+                        </div>
+                        <div class="info">
+                            <div class="name">香港大学</div>
+                            <div class="name-en">The University of Hong Kong</div>
+                        </div>
+                    </div>
+
+                    <div class="case">
+                        <div class="head flexacenter">
+                            <div class="dot"></div>
+                            <div class="text flex1">Offer</div>
+                            <img class="img" src="/img/arrows-icon.png" />
+                        </div>
+                        <div class="list offer">
+                            <div class="item">
+                                <div class="name">Asian Studies</div>
+                                <div class="brief flexacenter">MPhil | 24Fall | offer</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
 
             <!-- 底部 -->
             <div class="base flexcenter">
-                <div class="left flexacenter">
-                    <div class="text flex1">搜索项目</div>
-                    <img class="img" src="/img/search-black-icon.svg" />
+                <div style="display: none;" class="type1 flexacenter">
+                    <div class="btn flexacenter"><img class="img" src="/img/contrast-icon.png" />项目对比</div>
+                    <div class="line"></div>
+                    <div class="btn flexacenter"><img class="img" src="/img/manage-icon.png" />项目管理</div>
+
+                    <div class="add flex1"><img class="img" src="" />加入对比单</div>
                 </div>
-                <div class="rigth flexacenter">
-                    <img class="img" src="/img/contrast-icon.png" />
-                    <div class="text">项目对比</div>
-                    <div class="number">16</div>
+
+                <div style="display: none;" class="type2 flexacenter">
+                    <div class="btn flexacenter">我的项目 <img class="img" src="/img/arrows-circle-green.svg" /></div>
+                    <div class="input-box flexacenter">
+                        <img class="img" src="/img/edit-icon.png" />
+                        <input class="input flex1" placeholder="添加备注" />
+                    </div>
+
+                    <div class="state-box">
+                        <div class="state-btn flexcenter">待定<img class="img" src="/img/arrows-triangle-white.svg" /></div>
+                    </div>
+                </div>
+
+                <div class="type3 flexacenter">
+                    <div class="btn flexacenter">我的项目 <img class="img" src="/img/arrows-circle-green.svg" /></div>
+                    <div class="add-btn flexcenter already" style="margin-right: 10px;">
+                        <img class="img" src="/img/arrows-circle-gray.svg" />
+                        已加入对比单
+                    </div>
+                    <div class="add-btn flexcenter">
+                        <img class="img" src="/img/add-circle-white.svg" />
+                        加入对比单
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/04-details/details.less b/04-details/details.less
index 6fd593a..e8fcd29 100644
--- a/04-details/details.less
+++ b/04-details/details.less
@@ -680,6 +680,7 @@ body {
                     .img {
                         width: 70px;
                         height: 70px;
+                        margin-right: 8px;
                     }
                     .title {
                         font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
@@ -824,66 +825,253 @@ body {
 
     .else {
         width: 290px;
-        height: 20px;
+        height: 2000px;
+
+        background: -webkit-linear-gradient(270.008830663227deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%);
+        background: -moz-linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%);
+        background: linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%);
+        border: none;
+        border-radius: 12px;
+        padding: 20px 10px 0;
+
+        .school {
+            margin-bottom: 20px;
+
+            .logo {
+                width: 50px;
+                height: 50px;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(246, 246, 246, 1);
+                border-radius: 8px;
+                margin-right: 10px;
+                .img {
+                    height: 30px;
+                }
+            }
+            .info {
+                .name {
+                    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                    font-weight: 650;
+                    font-style: normal;
+                    font-size: 18px;
+                    color: #000000;
+                    margin-bottom: 5px;
+                }
+
+                .name-en {
+                    font-size: 13px;
+                    color: #555555;
+                }
+            }
+        }
+
+        .case {
+            width: 270px;
+            background-color: #ffffff;
+            border-radius: 8px;
+            .head {
+                width: 270px;
+                height: 45px;
+                border-bottom: 1px dotted rgb(235, 235, 235);
+                padding: 0 10px;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0.501961), #d8f1d8);
+                overflow: hidden;
+                .dot {
+                    width: 14px;
+                    height: 14px;
+                    background-color: rgba(231, 247, 238, 1);
+                    border: 1px solid rgba(183, 196, 189, 1);
+                    border-radius: 39px;
+                    position: relative;
+                    margin-right: 10px;
+                    &::after {
+                        content: "";
+                        width: 6px;
+                        height: 6px;
+                        display: block;
+                        background-color: rgba(114, 219, 134, 1);
+                        border: 1px solid rgba(87, 168, 105, 1);
+                        border-radius: 39px;
+                        box-sizing: border-box;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+                }
+
+                .text {
+                    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+                    font-weight: 650;
+                    font-style: normal;
+                    font-size: 16px;
+                    color: #000000;
+                }
+
+                .img {
+                    width: 14px;
+                    height: 14px;
+                }
+            }
+        }
     }
 
     .base {
         width: 640px;
         height: 60px;
-        background-color: rgba(123, 140, 211, 1);
+        // background-color: rgba(123, 140, 211, 1);
         border-radius: 153px;
         position: fixed;
-        bottom: 15px;
+        bottom: 30px;
         left: 50%;
         transform: translateX(-50%);
-        .left {
-            width: 450px;
-            height: 50px;
-            background-color: #fff;
-            border-radius: 153px 15px 15px 153px;
-            margin-right: 5px;
-            padding: 0 20px;
-            .text {
-                font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
-                font-weight: 400;
-                font-style: normal;
-                font-size: 16px;
-                color: rgba(170, 170, 170, 0.901960784313726);
+        z-index: 2;
+
+        .type1 {
+            width: 100%;
+            height: 100%;
+            border-radius: 153px;
+            border: 1px solid rgb(219, 224, 242);
+            background: linear-gradient(to right, rgb(238, 247, 245), rgb(219, 227, 253));
+            font-size: 15px;
+            color: #000000;
+
+            .btn {
+                line-height: 50px;
+                margin: 0 24px;
+
+                .img {
+                    height: 20px;
+                    margin-right: 6px;
+                }
             }
 
-            .img {
-                width: 20px;
+            .line {
+                width: 1px;
                 height: 20px;
+                background-color: rgb(215, 215, 215);
+            }
+
+            .add {
+                height: 50px;
+                line-height: 50px;
+                text-align: center;
+                background-color: rgba(123, 140, 211, 1);
+                border-radius: 158px;
+                font-weight: 400;
+                font-style: normal;
+                font-size: 15px;
+                color: #ffffff;
+                margin-right: 5px;
+                .img {
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 10px;
+                }
             }
         }
 
-        .rigth {
-            width: 175px;
-            height: 50px;
-            background-color: #fff;
-            border-radius: 15px 153px 153px 15px;
-            padding-left: 19px;
+        .type2 {
+            width: 100%;
+            height: 100%;
+            background-color: rgba(242, 242, 242, 1);
+            border: 1px solid rgba(215, 215, 215, 1);
+            border-radius: 153px;
 
-            .img {
-                width: 25px;
-                height: 22px;
-                margin-right: 5px;
+            .btn {
+                padding: 0 20px;
+                height: 100%;
+                margin-right: 20px;
+                border-right: 1px solid rgb(215, 215, 215);
+                cursor: pointer;
+                font-size: 15px;
+                color: #000000;
+                .img {
+                    width: 16px;
+                    height: 16px;
+                    margin-left: 7px;
+                }
             }
 
-            .text {
-                font-size: 16px;
-                color: #333333;
-                margin-right: 9px;
+            .input-box {
+                width: 370px;
+                height: 40px;
+                margin-right: 10px;
+                background-color: rgba(255, 255, 255, 1);
+                border-radius: 158px;
+                overflow: hidden;
+                .img {
+                    width: 20px;
+                    height: 20px;
+                    margin-left: 12px;
+                    margin-right: 6px;
+                }
+                .input {
+                    height: 100%;
+                    padding-right: 20px;
+                    border: none;
+                    outline: none;
+                }
             }
 
-            .number {
-                height: 20px;
-                line-height: 20px;
-                background-color: rgba(242, 242, 242, 1);
-                border-radius: 150px;
-                font-size: 13px;
-                color: #f95d5d;
-                padding: 0 8px;
+            .state-box {
+                .state-btn {
+                    width: 100px;
+                    height: 40px;
+                    background-color: rgba(249, 93, 93, 1);
+                    border-radius: 158px;
+                    font-size: 15px;
+                    color: #ffffff;
+                    cursor: pointer;
+                    .img {
+                        width: 11px;
+                        height: 6px;
+                        margin-left: 8px;
+                    }
+                }
+            }
+        }
+
+        .type3 {
+            width: 100%;
+            height: 100%;
+            background-color: rgba(242, 242, 242, 1);
+            border: 1px solid rgba(215, 215, 215, 1);
+            border-radius: 153px;
+
+            .btn {
+                padding: 0 20px;
+                height: 100%;
+                margin-right: 20px;
+                border-right: 1px solid rgb(215, 215, 215);
+                cursor: pointer;
+                font-size: 15px;
+                color: #000000;
+
+                .img {
+                    width: 16px;
+                    height: 16px;
+                    margin-left: 7px;
+                }
+            }
+
+            .add-btn {
+                width: 235px;
+                height: 40px;
+                background-color: rgba(123, 140, 211, 1);
+                font-size: 15px;
+                color: #ffffff;
+                border-radius: 158px;
+                &.already {
+                    background-color: rgba(251, 251, 251, 1);
+                    font-size: 16px;
+                    color: #aaaaaa;
+                }
+                .img {
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 10px;
+                }
             }
         }
     }
diff --git a/img/add-circle-white.svg b/img/add-circle-white.svg
new file mode 100644
index 0000000..3c701ea
--- /dev/null
+++ b/img/add-circle-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="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -404 -22 )">
+    <path d="M 12.46875 9.13541666666667  C 12.6006944444444 9.00347222222222  12.6666666666667 8.84722222222222  12.6666666666667 8.66666666666667  L 12.6666666666667 7.33333333333333  C 12.6666666666667 7.15277777777778  12.6006944444444 6.99652777777778  12.46875 6.86458333333333  C 12.3368055555556 6.73263888888889  12.1805555555556 6.66666666666667  12 6.66666666666667  L 9.33333333333333 6.66666666666667  L 9.33333333333333 4  C 9.33333333333333 3.81944444444444  9.26736111111111 3.66319444444444  9.13541666666667 3.53125  C 9.00347222222222 3.39930555555556  8.84722222222222 3.33333333333333  8.66666666666667 3.33333333333333  L 7.33333333333333 3.33333333333333  C 7.15277777777778 3.33333333333333  6.99652777777778 3.39930555555556  6.86458333333333 3.53125  C 6.73263888888889 3.66319444444444  6.66666666666667 3.81944444444444  6.66666666666667 4  L 6.66666666666667 6.66666666666667  L 4 6.66666666666667  C 3.81944444444444 6.66666666666667  3.66319444444444 6.73263888888889  3.53125 6.86458333333333  C 3.39930555555556 6.99652777777778  3.33333333333333 7.15277777777778  3.33333333333333 7.33333333333333  L 3.33333333333333 8.66666666666667  C 3.33333333333333 8.84722222222222  3.39930555555556 9.00347222222222  3.53125 9.13541666666667  C 3.66319444444444 9.26736111111111  3.81944444444444 9.33333333333333  4 9.33333333333333  L 6.66666666666667 9.33333333333333  L 6.66666666666667 12  C 6.66666666666667 12.1805555555556  6.73263888888889 12.3368055555556  6.86458333333333 12.46875  C 6.99652777777778 12.6006944444444  7.15277777777778 12.6666666666667  7.33333333333333 12.6666666666667  L 8.66666666666667 12.6666666666667  C 8.84722222222222 12.6666666666667  9.00347222222222 12.6006944444444  9.13541666666667 12.46875  C 9.26736111111111 12.3368055555556  9.33333333333333 12.1805555555556  9.33333333333333 12  L 9.33333333333333 9.33333333333333  L 12 9.33333333333333  C 12.1805555555556 9.33333333333333  12.3368055555556 9.26736111111111  12.46875 9.13541666666667  Z M 14.9270833333333 3.984375  C 15.6423611111111 5.21006944444444  16 6.54861111111111  16 8  C 16 9.45138888888889  15.6423611111111 10.7899305555556  14.9270833333333 12.015625  C 14.2118055555556 13.2413194444444  13.2413194444444 14.2118055555556  12.015625 14.9270833333333  C 10.7899305555556 15.6423611111111  9.45138888888889 16  8 16  C 6.54861111111111 16  5.21006944444444 15.6423611111111  3.984375 14.9270833333333  C 2.75868055555556 14.2118055555556  1.78819444444444 13.2413194444444  1.07291666666667 12.015625  C 0.357638888888889 10.7899305555556  0 9.45138888888889  0 8  C 0 6.54861111111111  0.357638888888889 5.21006944444444  1.07291666666667 3.984375  C 1.78819444444444 2.75868055555556  2.75868055555556 1.78819444444444  3.984375 1.07291666666667  C 5.21006944444444 0.357638888888888  6.54861111111111 0  8 0  C 9.45138888888889 0  10.7899305555556 0.357638888888888  12.015625 1.07291666666667  C 13.2413194444444 1.78819444444444  14.2118055555556 2.75868055555556  14.9270833333333 3.984375  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 404 22 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/arrows-circle-gray.svg b/img/arrows-circle-gray.svg
new file mode 100644
index 0000000..1091432
--- /dev/null
+++ b/img/arrows-circle-gray.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="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1077 -11872 )">
+    <path d="M 13.1875 6.78125  C 13.3125 6.65625  13.375 6.5  13.375 6.3125  C 13.375 6.11805555555556  13.3125 5.95833333333333  13.1875 5.83333333333333  L 12.2395833333333 4.89583333333333  C 12.1076388888889 4.76388888888889  11.9513888888889 4.69791666666667  11.7708333333333 4.69791666666667  C 11.5902777777778 4.69791666666667  11.4340277777778 4.76388888888889  11.3020833333333 4.89583333333333  L 7.05208333333333 9.13541666666667  L 4.69791666666667 6.78125  C 4.56597222222222 6.64930555555556  4.40972222222222 6.58333333333333  4.22916666666667 6.58333333333333  C 4.04861111111111 6.58333333333333  3.89236111111111 6.64930555555556  3.76041666666667 6.78125  L 2.8125 7.71875  C 2.6875 7.84375  2.625 8.00347222222222  2.625 8.19791666666667  C 2.625 8.38541666666667  2.6875 8.54166666666667  2.8125 8.66666666666667  L 6.58333333333333 12.4375  C 6.71527777777778 12.5694444444444  6.87152777777778 12.6354166666667  7.05208333333333 12.6354166666667  C 7.23958333333333 12.6354166666667  7.39930555555556 12.5694444444444  7.53125 12.4375  L 13.1875 6.78125  Z M 14.9270833333333 3.984375  C 15.6423611111111 5.21006944444444  16 6.54861111111111  16 8  C 16 9.45138888888889  15.6423611111111 10.7899305555556  14.9270833333333 12.015625  C 14.2118055555556 13.2413194444444  13.2413194444444 14.2118055555556  12.015625 14.9270833333333  C 10.7899305555556 15.6423611111111  9.45138888888889 16  8 16  C 6.54861111111111 16  5.21006944444444 15.6423611111111  3.984375 14.9270833333333  C 2.75868055555556 14.2118055555556  1.78819444444444 13.2413194444444  1.07291666666667 12.015625  C 0.357638888888889 10.7899305555556  0 9.45138888888889  0 8  C 0 6.54861111111111  0.357638888888889 5.21006944444444  1.07291666666667 3.984375  C 1.78819444444444 2.75868055555556  2.75868055555556 1.78819444444444  3.984375 1.07291666666667  C 5.21006944444444 0.357638888888888  6.54861111111111 0  8 0  C 9.45138888888889 0  10.7899305555556 0.357638888888888  12.015625 1.07291666666667  C 13.2413194444444 1.78819444444444  14.2118055555556 2.75868055555556  14.9270833333333 3.984375  Z " fill-rule="nonzero" fill="#aaaaaa" stroke="none" transform="matrix(1 0 0 1 1077 11872 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/arrows-circle-green.svg b/img/arrows-circle-green.svg
new file mode 100644
index 0000000..6db532f
--- /dev/null
+++ b/img/arrows-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="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -725 -11284 )">
+    <path d="M 7 13.3958333333333  C 7.18055555555556 13.3958333333333  7.33680555555556 13.3298611111111  7.46875 13.1979166666667  L 12.1979166666667 8.46875  C 12.3298611111111 8.33680555555555  12.3958333333333 8.18055555555555  12.3958333333333 8  C 12.3958333333333 7.81944444444444  12.3298611111111 7.66319444444444  12.1979166666667 7.53125  L 7.46875 2.80208333333333  C 7.33680555555556 2.67013888888889  7.18055555555556 2.60416666666667  7 2.60416666666667  C 6.81944444444445 2.60416666666667  6.66319444444445 2.67013888888889  6.53125 2.80208333333333  L 5.46875 3.86458333333333  C 5.33680555555556 3.99652777777778  5.27083333333333 4.15277777777778  5.27083333333333 4.33333333333333  C 5.27083333333333 4.51388888888889  5.33680555555556 4.67013888888889  5.46875 4.80208333333333  L 8.66666666666667 8  L 5.46875 11.1979166666667  C 5.33680555555556 11.3298611111111  5.27083333333333 11.4861111111111  5.27083333333333 11.6666666666667  C 5.27083333333333 11.8472222222222  5.33680555555556 12.0034722222222  5.46875 12.1354166666667  L 6.53125 13.1979166666667  C 6.66319444444445 13.3298611111111  6.81944444444445 13.3958333333333  7 13.3958333333333  Z M 14.9270833333333 3.984375  C 15.6423611111111 5.21006944444444  16 6.54861111111111  16 8  C 16 9.45138888888889  15.6423611111111 10.7899305555556  14.9270833333333 12.015625  C 14.2118055555556 13.2413194444444  13.2413194444444 14.2118055555556  12.015625 14.9270833333333  C 10.7899305555556 15.6423611111111  9.45138888888889 16  8 16  C 6.54861111111111 16  5.21006944444444 15.6423611111111  3.984375 14.9270833333333  C 2.75868055555556 14.2118055555556  1.78819444444444 13.2413194444444  1.07291666666667 12.015625  C 0.357638888888889 10.7899305555556  0 9.45138888888889  0 8  C 0 6.54861111111111  0.357638888888889 5.21006944444444  1.07291666666667 3.984375  C 1.78819444444444 2.75868055555556  2.75868055555556 1.78819444444444  3.984375 1.07291666666667  C 5.21006944444444 0.357638888888888  6.54861111111111 0  8 0  C 9.45138888888889 0  10.7899305555556 0.357638888888888  12.015625 1.07291666666667  C 13.2413194444444 1.78819444444444  14.2118055555556 2.75868055555556  14.9270833333333 3.984375  Z " fill-rule="nonzero" fill="#6fc16d" stroke="none" transform="matrix(1 0 0 1 725 11284 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/arrows-triangle-white.svg b/img/arrows-triangle-white.svg
new file mode 100644
index 0000000..f4d9982
--- /dev/null
+++ b/img/arrows-triangle-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="11px" height="6px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1227 -11288 )">
+    <path d="M 10.7958984375 0.197916666666667  C 10.9319661458333 0.32986111111111  11 0.48611111111111  11 0.666666666666667  C 11 0.847222222222222  10.9319661458333 1.00347222222222  10.7958984375 1.13541666666667  L 5.9833984375 5.80208333333333  C 5.84733072916667 5.93402777777778  5.68619791666667 6  5.5 6  C 5.31380208333333 6  5.15266927083333 5.93402777777778  5.0166015625 5.80208333333333  L 0.2041015625 1.13541666666667  C 0.0680338541666667 1.00347222222222  0 0.847222222222222  0 0.666666666666667  C 0 0.48611111111111  0.0680338541666667 0.32986111111111  0.2041015625 0.197916666666667  C 0.340169270833333 0.0659722222222214  0.501302083333333 0  0.6875 0  L 10.3125 0  C 10.4986979166667 0  10.6598307291667 0.0659722222222214  10.7958984375 0.197916666666667  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1227 11288 )" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/img/edit-icon.png b/img/edit-icon.png
new file mode 100644
index 0000000..af69726
Binary files /dev/null and b/img/edit-icon.png differ
diff --git a/img/manage-icon.png b/img/manage-icon.png
new file mode 100644
index 0000000..342258a
Binary files /dev/null and b/img/manage-icon.png differ