diff --git a/assets/icons/books.svg b/assets/icons/books.svg
new file mode 100644
index 0000000..837ecc2
--- /dev/null
+++ b/assets/icons/books.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-books"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M9 4m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M5 8h4" /><path d="M9 16h4" /><path d="M13.803 4.56l2.184 -.53c.562 -.135 1.133 .19 1.282 .732l3.695 13.418a1.02 1.02 0 0 1 -.634 1.219l-.133 .041l-2.184 .53c-.562 .135 -1.133 -.19 -1.282 -.732l-3.695 -13.418a1.02 1.02 0 0 1 .634 -1.219l.133 -.041z" /><path d="M14 9l4 -1" /><path d="M16 16l3.923 -.98" /></svg>
\ No newline at end of file
diff --git a/assets/icons/friends.svg b/assets/icons/friends.svg
new file mode 100644
index 0000000..9bc8121
--- /dev/null
+++ b/assets/icons/friends.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-heart-handshake"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /><path d="M12 6l-3.293 3.293a1 1 0 0 0 0 1.414l.543 .543c.69 .69 1.81 .69 2.5 0l1 -1a3.182 3.182 0 0 1 4.5 0l2.25 2.25" /><path d="M12.5 15.5l2 2" /><path d="M15 13l2 2" /></svg>
\ No newline at end of file
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index d9932fd..17de5ca 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -139,4 +139,22 @@
         img {
             margin: 0 !important;
         }
-    }
\ No newline at end of file
+    }
+
+    .work-list {
+        position:relative;
+        overflow: hidden;
+        text-align: center;
+        width: 100%;
+      }
+       
+      .work-list-item {
+        padding: 0px;
+        border-radius: var(--card-border-radius);
+      }
+       
+      .work-list-item img {
+        width:100%;
+        height: 100%;
+        object-fit: cover;
+      }
\ No newline at end of file
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 2225fb9..eb845ba 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -59,9 +59,10 @@
     margin: 0;
     color: var(--card-text-color-main);
     font-size: 2.2rem;
+    line-height: 1.2;
 
     @include respond(xl) {
-        font-size: 2.4rem;
+        font-size: 2.2rem;
     }
 
     a {
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 9830646..cfd1ee7 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -23,7 +23,7 @@
 
     @include respond(md) {
         width: auto;
-        padding-top: var(--main-top-padding);
+        padding-top: calc(var(--main-top-padding)*1.5);
         padding-bottom: var(--main-top-padding);
         max-height: 100vh;
     }
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 41d0231..eaa86f4 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -11,12 +11,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
         --main-top-padding: 50px;
     }
 
-    --body-background: #EAE0DA;
+    --body-background: #F1F1F1;
 
     --accent-color: #352F44;
     --accent-color-darker: #5C5470;
     --accent-color-text: #fff;
-    --body-text-color: #5C5470;
+    --body-text-color: #737373;
 
     --tag-border-radius: 4px;
 
@@ -26,9 +26,9 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --scrollbar-track: var(--body-background);
 
     &[data-scheme="dark"] {
-        --body-background: #393646;
-        --accent-color: #F4EEE0;
-        --accent-color-darker: #F4EEE0;
+        --body-background: #303030;
+        --accent-color: #ecf0f1;
+        --accent-color-darker: #bdc3c7;
         --accent-color-text: #000;
         --body-text-color: rgba(255, 255, 255, 0.7);
         --scrollbar-thumb: hsl(0, 0%, 40%);
@@ -51,11 +51,11 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 *   Card style
 */
 :root {
-    --card-background: #f7f5eb;
+--card-background: #F7F8F8;
     --card-background-selected: #eaeaea;
 
-    --card-text-color-main: #352F44;
-    --card-text-color-secondary: #5C5470;
+    --card-text-color-main: #2c3e50;
+    --card-text-color-secondary: #737373;
     --card-text-color-tertiary: #5C5470;
     --card-separator-color: rgba(218, 218, 218, 0.5);
 
@@ -78,9 +78,9 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     }
 
     &[data-scheme="dark"] {
-        --card-background: #4F4557;
-        --card-background-selected: #9DB2BF;
-        --card-text-color-main: #F4EEE0;
+        --card-background: #424242;
+        --card-background-selected: rgba(255, 255, 255, 0.16);
+        --card-text-color-main: rgba(255, 255, 255, 0.9);
         --card-text-color-secondary: rgba(255, 255, 255, 0.7);
         --card-text-color-tertiary: rgba(255, 255, 255, 0.5);
         --card-separator-color: #6D5D6E;
@@ -110,7 +110,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
     --heading-border-size: 3px;
 
-    --link-background-color: 189, 195, 199;
+    --link-background-color: 170,170,170;
     --link-background-opacity: 0.5;
     --link-background-opacity-hover: 0.7;
 
@@ -126,7 +126,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --kbd-border-color: #dadada;
 
     &[data-scheme="dark"] {
-        --code-background-color: #272822;
+        --code-background-color: #5A5A5A;
         --code-text-color: rgba(255, 255, 255, 0.9);
 
         --table-border-color: #717171;
diff --git a/layouts/shortcodes/music.html b/layouts/shortcodes/music.html
index 13a9f6c..62088f3 100644
--- a/layouts/shortcodes/music.html
+++ b/layouts/shortcodes/music.html
@@ -1,6 +1,5 @@
 <!-- require APlayer -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
-<style type="text/css">.dark-theme .aplayer{background:#212121}.dark-theme .aplayer.aplayer-withlist .aplayer-info{border-bottom-color:#5c5c5c}.dark-theme .aplayer.aplayer-fixed .aplayer-list{border-color:#5c5c5c}.dark-theme .aplayer .aplayer-body{background-color:#212121}.dark-theme .aplayer .aplayer-info{border-top-color:#212121}.dark-theme .aplayer .aplayer-info .aplayer-music .aplayer-title{color:#fff}.dark-theme .aplayer .aplayer-info .aplayer-music .aplayer-author{color:#fff}.dark-theme .aplayer .aplayer-info .aplayer-controller .aplayer-time{color:#eee}.dark-theme .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path{fill:#eee}.dark-theme .aplayer .aplayer-list{background-color:#212121}.dark-theme .aplayer .aplayer-list::-webkit-scrollbar-thumb{background-color:#999}.dark-theme .aplayer .aplayer-list::-webkit-scrollbar-thumb:hover{background-color:#bbb}.dark-theme .aplayer .aplayer-list li{color:#fff;border-top-color:#666}.dark-theme .aplayer .aplayer-list li:hover{background:#4e4e4e}.dark-theme .aplayer .aplayer-list li.aplayer-list-light{background:#6c6c6c}.dark-theme .aplayer .aplayer-list li .aplayer-list-index{color:#ddd}.dark-theme .aplayer .aplayer-list li .aplayer-list-author{color:#ddd}.dark-theme .aplayer .aplayer-lrc{text-shadow:-1px -1px 0 #666}.dark-theme .aplayer .aplayer-lrc:before{background:-moz-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:-webkit-linear-gradient(top, #212121 0%, rgba(33,33,33,0) 100%);background:linear-gradient(to bottom, #212121 0%, rgba(33,33,33,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#00212121',GradientType=0 )}.dark-theme .aplayer .aplayer-lrc:after{background:-moz-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:-webkit-linear-gradient(top, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);background:linear-gradient(to bottom, rgba(33,33,33,0) 0%, rgba(33,33,33,0.8) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00212121', endColorstr='#cc212121',GradientType=0 )}.dark-theme .aplayer .aplayer-lrc p{color:#fff}.dark-theme .aplayer .aplayer-miniswitcher{background:#484848}.dark-theme .aplayer .aplayer-miniswitcher .aplayer-icon path{fill:#eee}</style>
 <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
 <!-- require MetingJS -->
 <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
@@ -18,6 +17,8 @@
       volume="{{ if .Get "volume" }}{{ .Get "volume" }}{{ else }}0.6{{ end }}"
       prelosd="{{ if .Get "prelosd" }}{{ .Get "prelosd" }}{{ else }}auto{{ end }}"
       mutex="{{ if .Get "mutex" }}{{ .Get "mutex" }}{{ else }}true{{ end }}"
-      list-folded="{{ if .Get "list-folded" }}{{ .Get "list-folded" }}{{ else }}true{{ end }}">
+      list-folded="{{ if .Get "list-folded" }}{{ .Get "list-folded" }}{{ else }}false{{ end }}"
+      listMaxHeight=5
+      >
     </meting-js>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/work-list.html b/layouts/shortcodes/work-list.html
new file mode 100644
index 0000000..c7e416d
--- /dev/null
+++ b/layouts/shortcodes/work-list.html
@@ -0,0 +1,15 @@
+{{ $file := .Get 0 }}
+{{ $num := 4 }}
+{{ if .Get 1 }} 
+    {{ $num = .Get 1 }}
+{{ end }}
+{{ $width := div 90 $num }}
+{{$items := getJSON $file }}
+
+<div class="work-list">
+    {{range $item := $items}}
+        <a href="{{ $item.url }}">
+            <img class="work-list-item" src="{{ $item.image }}" loading="lazy" title="{{ $item.title }}" width="{{ $width }}%">
+        </a>
+    {{end}}
+</div>
\ No newline at end of file