diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..3331d70
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
\ No newline at end of file
diff --git a/app/songs/actions.tsx b/app/songs/actions.tsx
index d76d9bf..aa54888 100644
--- a/app/songs/actions.tsx
+++ b/app/songs/actions.tsx
@@ -57,6 +57,20 @@ export async function addSong(
   return result?.data;
 }
 
-export async function listSongs() {
-
-}
\ No newline at end of file
+export async function listSongs(): Promise<any[]> {
+  const token = cookies().get("token");
+  const params = new URLSearchParams();
+  params.append('pageSize', '99999');
+  params.append('filter', JSON.stringify({"$and":[{"createdBy":{"id":{"$eq":"{{$user.id}}"}}}]}))
+  const songs = await fetch("https://tachy.daoyoucloud.com/api/songs:list?" + params.toString(), {
+    method: "GET",
+    headers: {
+      "X-App": "danmu-sim",
+      "X-Authenticator": "basic",
+      authorization: "Bearer " + token?.value,
+      "content-type": "application/json",
+    },
+  });
+  const result = await songs.json();
+  return result?.data ?? [];
+}
diff --git a/app/songs/page.tsx b/app/songs/page.tsx
index 839defe..e8e8463 100644
--- a/app/songs/page.tsx
+++ b/app/songs/page.tsx
@@ -1,6 +1,8 @@
+import { listSongs } from "./actions";
 import SearchForm from "./search-form";
 
-export default function Page() {
+export default async function Page() {
+  const songs = await listSongs();
   return (
     <section className="bg-gray-100">
       <div className="container mx-auto px-4 py-8">
@@ -8,38 +10,25 @@ export default function Page() {
           <div>
             <h2 className="text-xl font-bold mb-4">已收藏</h2>
             <ul className="bg-white rounded shadow-md p-4">
-              <li className="flex justify-between items-center py-2 border-b">
-                <span>冬天的秘密 - 周传雄</span>
-                <button className="text-red-500 hover:text-red-700">
+              {songs.map((song, i) => (
+                <li
+                  className="flex justify-between items-center py-2 border-b"
+                  key={i}
+                >
+                  <span>
+                    {song.name} - {song.artist}
+                  </span>
+                  <button className="text-red-500 hover:text-red-700">
                     删除
-                </button>
-              </li>
-              <li className="flex justify-between items-center py-2 border-b">
-                <span>其实都没有 - 张盼盼</span>
-                <button className="text-red-500 hover:text-red-700">
-                    删除
-                </button>
-              </li>
+                  </button>
+                </li>
+              ))}
             </ul>
           </div>
 
           <div>
             <h2 className="text-xl font-bold mb-4">搜索</h2>
             <SearchForm className="mb-4" />
-            {/* <div className="bg-white rounded shadow-md p-4">
-              <div className="flex justify-between items-center py-2 border-b">
-                <span>Song 3</span>
-                <button className="text-green-500 hover:text-green-700">
-                  Add
-                </button>
-              </div>
-              <div className="flex justify-between items-center py-2 border-b">
-                <span>Song 4</span>
-                <button className="text-green-500 hover:text-green-700">
-                  Add
-                </button>
-              </div>
-            </div> */}
           </div>
         </div>
       </div>