diff --git a/content/_index.md b/content/_index.md
index 7d7f045..e4b7b92 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -10,4 +10,4 @@ framed = true
 
 Welcome to my blog🎩 Check these
 
-[💻 技术文章](/categories/%E6%8A%80%E6%9C%AF/) | [📖 My Readings](https://reading.colinx.one) | [💡 My Github](https://github.com/Colin-XKL/) | [💎 公开服务](/services/) 
+[💻 技术文章](/categories/%E6%8A%80%E6%9C%AF/) | [💡 My Github](https://github.com/Colin-XKL/) | [💎 公开服务&个人作品](/services/) 
diff --git a/layouts/shortcodes/service_list.html b/layouts/shortcodes/service_list.html
index d27520f..26464fe 100644
--- a/layouts/shortcodes/service_list.html
+++ b/layouts/shortcodes/service_list.html
@@ -8,23 +8,71 @@ Params:
     {{ with $.Get "name" }}
         {{ $name := . }}
         {{ $data := getJSON $url }}
-        {{ range $data.data }}
-            {{ $item := . }}
-            
-            <h3 id="{{$item.name}}">{{$item.name}}</h3>
-            {{ $link := urls.Parse $item.link }}
-            <p>{{$item.type}} - {{$item.subtitle}}</p>
-            <p>地址：
+       
+    {{ range $data.data }}
+        {{ $item := . }}
+        <div class="card">
+            <h3 id="{{$item.name}}">{{$item.name}} <span class="badge">{{$item.type}}</span></h3>
+            <p>{{$item.subtitle}}</p>
+            <p><strong>地址：</strong>
+                {{ $link := urls.Parse $item.link }}
                 {{ if (gt (len $link.Host) 1) }}
-                    <a href="{{$item.link}}" >{{$link.Host}}</a> 
+                    <a href="{{$item.link}}">{{$link.Host}}</a>
                 {{ else }}
                     {{$item.link}}
                 {{ end }}
-               </p>
-            {{ if (gt (len $item.StartServingAt) 1) }}
-                <p>上线于{{$item.StartServingAt}}</p>
-            {{ end }}
-
-        {{ end }}
+            </p>
+            <p><strong>上线时间：</strong>
+                {{ if (gt (len $item.StartServingAt) 1) }}
+                    {{$item.StartServingAt}}
+                {{ else }}
+                    无
+                {{ end }}
+            </p>
+        </div>
+        {{ end }}   
     {{ end }}
+    <style>
+        :root {
+            --card-border: #cccccc51;
+         --badge-background: #9dd5c0;
+            --badge-color: white;
+        }
+
+        [data-theme='dark'] {
+            --card-border: #44444451;
+            --badge-background: #9dd5c0;
+            --badge-color: white;
+        }
+        .card {
+            border: 1px solid var(--card-border);
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            margin: 1rem;
+            padding: 2rem;
+            transition: transform 0.2s ease-in-out;
+        }
+        .card:hover {
+            transform: scale(1.02);
+        }
+        .card h3 {
+            margin: 0;
+            display: inline-flex;
+            align-items: center;
+        }
+        .card p {
+            margin: 5px 0;
+        }
+        .card a {
+            text-decoration: none;
+        }
+        .badge {
+            background-color: #9dd5c0;
+            color: white;
+            border-radius: 12px;
+            padding: 4px 8px;
+            font-size: 0.6em;
+            margin-left: 8px;
+        }
+    </style>
 {{ end }}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 9b76c77..56581dc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -39,7 +39,7 @@
   padding: 1rem 0rem;
 }
 
-ol.toc-list > li > a:hover {
+ol.toc-list>li>a:hover {
   text-underline-position: under;
   font-weight: bolder;
 }
@@ -57,45 +57,47 @@ ol.toc-list > li > a:hover {
 }
 
 .is-active-link::before {
-  background-color: #d71a1b !important;
+  background-color: #9dd5c0 !important;
 }
 
 .logo__cursor {
-  background: #d71a1b;
+  background: #9dd5c0;
 }
 
 /* 超链接样式  */
 
 .post-tags a,
-.post-content a {
+.post-content a,
+.index-content a {
   text-decoration: none;
-  border-bottom: 1px dashed #d71a1b;
+  border-bottom: 1px dashed #9dd5c0;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
 }
 
 .post-tags a:hover,
 .post-content a:hover,
+.index-content a:hover,
 nav a:hover {
   text-decoration: none;
-  border-bottom: 2px solid #d71a1b;
+  border-bottom: 2px solid #9dd5c0;
   -webkit-transition: all 0.1s ease;
   transition: all 0.1s ease;
 }
 
 /* custom ::selection */
 ::selection {
-  background: #b5b5b5;
+  background: #9dd5c0;
   color: #fff;
 }
 
 ::-moz-selection {
-  background: #b5b5b5;
+  background: #9dd5c0;
   color: #fff;
 }
 
 ::-webkit-selection {
-  background: #b5b5b5;
+  background: #9dd5c0;
   color: #fff;
 }
 
@@ -116,3 +118,33 @@ nav a:hover {
 .post-content a:active {
     background-size: 80% 100%;
 } */
+
+.logo__cursor {
+  background-color: #9dd5c0 !important;
+}
+
+.on-list .post-title:hover {
+  transform: translateY(-0.1rem);
+  -webkit-transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out;
+}
+
+.read-more:hover {
+  transform: translateX(0.1rem);
+  -webkit-transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out;
+}
+
+span.button.next:hover {
+  display: block;
+  transform: translateX(0.2rem);
+  -webkit-transition: all 0.1s ease-in-out;
+  transition: all 0.21s ease-in-out;
+}
+
+span.button.previous:hover {
+  display: block;
+  transform: translateX(-0.2rem);
+  -webkit-transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out;
+}
\ No newline at end of file