diff --git a/README.md b/README.md
index 6357097e..0c260ddb 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 ![release](https://github.com/Linkontoask/radishes/workflows/release/badge.svg)
 
+<img src="./snapshots/home.jpg" />
+
 `Radishes`是这个项目的名称，它是由`萝卜`翻译而来。可以在这里试听和下载“灰色”歌曲哟
 
 界面表现和功能参考 windows 网易云音乐界面和 ios 的网易云音乐，会对一些功能进行移动端支持。希望能找到合适的基于 vue3 的移动端打包工具（非套壳）。
diff --git a/snapshots/home.jpg b/snapshots/home.jpg
new file mode 100644
index 00000000..7ab8d0a8
Binary files /dev/null and b/snapshots/home.jpg differ
diff --git a/src/components-business/secondary-bar/index.tsx b/src/components-business/secondary-bar/index.tsx
index c88c0d24..49551ceb 100644
--- a/src/components-business/secondary-bar/index.tsx
+++ b/src/components-business/secondary-bar/index.tsx
@@ -45,7 +45,7 @@ export const SecondaryBar = defineComponent({
     }
 
     return () => (
-      <div class={`${prefix}-bar`}>
+      <div class={`${prefix}-bar mx-4`}>
         <ul>
           {nav.value?.map(link => (
             <RouterLink
diff --git a/src/components-business/song-list/index.less b/src/components-business/song-list/index.less
index 3fc89ac7..12332296 100644
--- a/src/components-business/song-list/index.less
+++ b/src/components-business/song-list/index.less
@@ -5,20 +5,29 @@
 
   > ul {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-gap: 20px;
     height: 100%;
   }
   &-container {
-    display: flex;
-    flex-direction: column;
-    min-height: 220px;
+    position: relative;
+    // min-height: 220px;
     cursor: pointer;
     user-select: none;
     .song-pic {
       position: relative;
-      flex: 1;
+      width: 0;
       height: 0;
+      padding-left: 100%;
+      padding-bottom: 100%;
+      .daily-img,
+      .bg-img {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
       &-count {
         position: absolute;
         top: 2px;
diff --git a/src/pages/auth/component/sidebar-auth/index.tsx b/src/pages/auth/component/sidebar-auth/index.tsx
index 4dcfd87e..1657b800 100644
--- a/src/pages/auth/component/sidebar-auth/index.tsx
+++ b/src/pages/auth/component/sidebar-auth/index.tsx
@@ -53,7 +53,7 @@ export const SidebarAuth = defineComponent({
       const text = isLogin.value ? profile.value.nickname : '未登录'
       const head = isLogin.value ? profile.value.avatarUrl : DEFAULT_AVATAR
       return (
-        <div class="sidebar-nav-login" onClick={unLoginClick}>
+        <div class="sidebar-nav-login m-4" onClick={unLoginClick}>
           <div class="sidebar-nav-loginbox">
             <Image
               width="40"
diff --git a/src/pages/auth/component/sidebar-auth/style.less b/src/pages/auth/component/sidebar-auth/style.less
index c45bee49..b14eabf4 100644
--- a/src/pages/auth/component/sidebar-auth/style.less
+++ b/src/pages/auth/component/sidebar-auth/style.less
@@ -13,7 +13,7 @@
 
 .sidebar-nav {
   &-login {
-    padding: 10px 0;
+    // padding: 10px 0;
   }
   &-loginbox {
     position: relative;
diff --git a/src/pages/news/view/index.less b/src/pages/news/view/index.less
index c7361be9..3f0e909c 100644
--- a/src/pages/news/view/index.less
+++ b/src/pages/news/view/index.less
@@ -1,5 +1,5 @@
 .news {
   display: flex;
   flex-direction: column;
-  padding: 20px;
+  // padding: 20px;
 }
diff --git a/src/pages/news/view/index.tsx b/src/pages/news/view/index.tsx
index bbf80802..805cb271 100644
--- a/src/pages/news/view/index.tsx
+++ b/src/pages/news/view/index.tsx
@@ -30,7 +30,7 @@ export const News = defineComponent({
       <div class="news">
         <SecondaryBar nav={nav}></SecondaryBar>
         {/* See https://github.com/vuejs/jsx-next/issues/161 */}
-        <RouterView v-slots={Slots}></RouterView>
+        <RouterView class="px-4" v-slots={Slots}></RouterView>
       </div>
     )
   }
diff --git a/src/pages/sidebar/view/index.less b/src/pages/sidebar/view/index.less
index 46f7c498..6595b205 100644
--- a/src/pages/sidebar/view/index.less
+++ b/src/pages/sidebar/view/index.less
@@ -1,11 +1,11 @@
 @import '~@/theme/index.less';
 
 .sidebar {
-  padding: 10px;
   border-right: @base-border;
   &-nav {
     &-contanier {
       height: calc(100% - 72px);
+      padding: 16px;
       overflow-x: hidden;
       overflow-y: auto;
     }
@@ -17,6 +17,7 @@
       font-size: 15px;
       line-height: 40px;
       color: var(--secondary-text);
+      transition: all 0.3s;
       &:hover {
         color: var(--secondary-text-hover);
         background-color: #f3f3f3;
diff --git a/src/theme/color.less b/src/theme/color.less
index 8e9c56cc..3d74bd88 100644
--- a/src/theme/color.less
+++ b/src/theme/color.less
@@ -34,4 +34,4 @@
 @success-color: #31da36;
 @success-hover-color: darken(@success-color, 20%);
 
-@sidebar-width: 180px;
+@sidebar-width: 208px;
diff --git a/src/theme/index.css b/src/theme/index.css
index 5dca49b2..ad95b4b1 100644
--- a/src/theme/index.css
+++ b/src/theme/index.css
@@ -25,5 +25,5 @@
   --gay-hover-color: #6c6c6c;
   --success-color: #31da36;
   --success-hover-color: #198c1d;
-  --sidebar-width: 180px;
+  --sidebar-width: 208px;
 }