diff --git a/src/components/SongInfo.svelte b/src/components/SongInfo.svelte
deleted file mode 100644
index 89b8c16..0000000
--- a/src/components/SongInfo.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-  import type { NeteaseSongBrief } from "../shared/types";
-
-  let { info }: { info: NeteaseSongBrief } = $props();
-</script>
-
-<div class="hbox gap-16px">
-  <img class="rounded-16px size-68px" src={info.albumPic} alt="Album Art" />
-  <div class="vbox flex-1 min-w-0">
-    <div class="m3-font-title-large truncate">{info.name}</div>
-    <div class="hbox w-full">
-      <div class="m3-font-body-medium m3-color-on-surface-variant truncate">{info.artists.map(a => a.name).join(", ")} - {info.album}</div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/components/listitem/ImageListItem.svelte b/src/components/listitem/ImageListItem.svelte
new file mode 100644
index 0000000..6513526
--- /dev/null
+++ b/src/components/listitem/ImageListItem.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  let { photoUrl, title, text }: { photoUrl: string; title: string; text: string } = $props();
+</script>
+
+<div class="hbox gap-16px">
+  <img class="rounded-16px size-68px" src={photoUrl} alt={title} />
+  <div class="vbox flex-1 min-w-0">
+    <div class="m3-font-title-large truncate">{title}</div>
+    <div class="hbox w-full">
+      <div class="m3-font-body-medium m3-color-on-surface-variant truncate">{text}</div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/components/listitem/SongInfo.svelte b/src/components/listitem/SongInfo.svelte
new file mode 100644
index 0000000..0ee4a61
--- /dev/null
+++ b/src/components/listitem/SongInfo.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { NeteaseSongBrief } from "../../shared/types.ts";
+  import ImageListItem from "./ImageListItem.svelte";
+
+  let { info }: { info: NeteaseSongBrief } = $props();
+</script>
+
+<ImageListItem photoUrl={info.albumPic} title={info.name} text={`${info.artists.map(a => a.name).join(", ")} - ${info.album}`} />
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1fd8d81..0a6e1a6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import AppBar from "../components/appbar/AppBar.svelte";
   import TitleHeader from "../components/TitleHeader.svelte";
-  import SongInfo from "../components/SongInfo.svelte";
+  import SongInfo from "../components/listitem/SongInfo.svelte";
   import type { PageProps } from "./$types";
   import Button from "../components/Button.svelte";
 
diff --git a/src/routes/playlist/[slug]/+page.svelte b/src/routes/playlist/[slug]/+page.svelte
index 95b7ae1..645ac92 100644
--- a/src/routes/playlist/[slug]/+page.svelte
+++ b/src/routes/playlist/[slug]/+page.svelte
@@ -2,7 +2,7 @@
 import type { PageProps } from "./$types"
 import AppBar from "../../../components/appbar/AppBar.svelte";
 import Button from "../../../components/Button.svelte";
-  import SongInfo from "../../../components/SongInfo.svelte";
+  import SongInfo from "../../../components/listitem/SongInfo.svelte";
 
 let { data }: PageProps = $props()