diff --git a/core/settings.py b/core/settings.py
index e9c405b..350c052 100644
--- a/core/settings.py
+++ b/core/settings.py
@@ -68,10 +68,11 @@ DATABASES = {
 }
 
 # 静态文件设置
+STATIC_EXTRA_DIR = 'static'
 STATIC_URL = '/static/'
 STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 STATICFILES_DIRS = [
-    os.path.join(BASE_DIR, 'static'),
+    os.path.join(BASE_DIR, STATIC_EXTRA_DIR),
 ]
 
 # 默认自动字段类型
diff --git a/docker.sh b/docker.sh
index 6ca6af8..31bbde6 100755
--- a/docker.sh
+++ b/docker.sh
@@ -32,7 +32,7 @@ case "$1" in
         docker-compose exec web bash
         ;;
     "static")
-        docker-compose exec web uv run manage.py makemigrations
+        docker-compose exec web uv run manage.py collectstatic
         ;;
     "migrate")
         docker-compose exec web uv run manage.py makemigrations
diff --git a/links/api_urls.py b/links/api_urls.py
index d41a928..4be69cf 100644
--- a/links/api_urls.py
+++ b/links/api_urls.py
@@ -2,11 +2,13 @@ from django.urls import path, include
 from rest_framework.routers import DefaultRouter
 from . import page_views
 from . import newsletter_views
+from . import api_views
 
 # Create a router and register our viewsets with it
 router = DefaultRouter(trailing_slash=False)
 router.register('pages', page_views.PageViewSet, basename='api-pages')
 router.register('newsletters', newsletter_views.NewsletterViewSet, basename='api-newsletters')
+router.register('music', api_views.MusicViewSet, basename='api-music')
 
 # The API URLs are determined automatically by the router
 urlpatterns = [
diff --git a/links/api_views.py b/links/api_views.py
index 9a36f8c..96379e6 100644
--- a/links/api_views.py
+++ b/links/api_views.py
@@ -7,6 +7,9 @@ from .serializers import ImageCollectionSerializer, ImageSerializer
 from .storage import R2Storage
 import uuid
 import logging
+from django.conf import settings
+import os
+
 
 logger = logging.getLogger(__name__)
 
@@ -138,3 +141,13 @@ class ImageViewSet(viewsets.ModelViewSet):
         except Exception as e:
             logger.error(f"Failed to delete from storage: {e}")
         instance.delete()
+
+class MusicViewSet(viewsets.ViewSet):
+    def list(self, request):
+        
+        return Response([
+            {'title': 'Purple Planet', 'src': '/static/music/Purple-Planet.mp3'},
+            {'title': 'Just Kidding', 'src': '/static/music/mixkit-just-kidding.mp3'},
+            {'title': 'Thomas', 'src': '/static/music/Thomas-the-Tank-Engine.mp3'}
+        ])
+        
\ No newline at end of file
diff --git a/links/templates/links/collection_slideshow.html b/links/templates/links/collection_slideshow.html
index a395bff..d63611f 100644
--- a/links/templates/links/collection_slideshow.html
+++ b/links/templates/links/collection_slideshow.html
@@ -76,12 +76,16 @@
     }
     .progress-circle {
         position: fixed;
-        bottom: 1rem;
+        top: 1rem;
         right: 1rem;
         width: 24px;
         height: 24px;
         z-index: 50;
         opacity: 0.8;
+        transition: opacity 0.3s;
+    }
+    .slideshow-container:hover .progress-circle {
+        opacity: 1;
     }
     .progress-circle-bg {
         fill: none;
@@ -127,6 +131,7 @@
         min-height: 44px;
         display: flex;
         align-items: center;
+        gap: 0.5rem;
     }
     .playlist-item:hover {
         background-color: rgba(255, 255, 255, 0.1);
@@ -135,6 +140,31 @@
         background-color: rgba(59, 130, 246, 0.5);
         font-weight: 500;
     }
+    .playlist-item input[type="checkbox"] {
+        width: 18px;
+        height: 18px;
+        margin: 0;
+    }
+    .playlist-controls {
+        display: flex;
+        justify-content: center;
+        margin-top: 1rem;
+        padding-top: 1rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .playlist-controls button {
+        background: rgba(59, 130, 246, 0.5);
+        color: white;
+        border: none;
+        padding: 0.5rem 1rem;
+        border-radius: 0.375rem;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        font-size: 0.9rem;
+    }
+    .playlist-controls button:hover {
+        background: rgba(59, 130, 246, 0.7);
+    }
     .playlist-content h3 {
         color: #fff;
         margin: 0;
@@ -244,7 +274,7 @@
     </div>
 </div>
 
-<audio id="backgroundMusic" loop>
+<audio id="backgroundMusic">
     <source src="" type="audio/mpeg">
     Your browser does not support the audio element.
 </audio>
@@ -254,17 +284,18 @@
         <h3>{% trans "Music Playlist" %}</h3>
         <div class="playlist-items" id="playlistItems">
         </div>
+        <div class="playlist-controls">
+            <button onclick="updatePlaylist()">{% trans "Update" %}</button>
+        </div>
     </div>
 </div>
 {% endblock %}
 
 {% block extra_js %}
 <script>
-const playlist = [
-    { title: 'Purple Planet', src: '{% static "music/Purple-Planet.mp3" %}' },
-    { title: 'Gentle Rain', src: '{% static "music/mixkit-just-kidding.mp3" %}' },
-    { title: 'Ocean Waves', src: '{% static "music/Thomas-the-Tank-Engine.mp3" %}' }
-];
+let playlist = [];
+let selectedSongs = new Set();
+let activePlaylist = [];
 let currentSlide = 0;
 let currentSongIndex = 0;
 const slides = document.querySelectorAll('.slide');
@@ -278,12 +309,60 @@ let animationFrame = null;
 const backgroundMusic = document.getElementById('backgroundMusic');
 let isMusicPlaying = true;
 
+async function fetchPlaylist() {
+    try {
+        const response = await fetch('{% url "api-music-list" %}');
+        if (!response.ok) {
+            throw new Error('Failed to fetch playlist');
+        }
+        const data = await response.json();
+        if (!Array.isArray(data)) {
+            throw new Error('Invalid playlist format');
+        }
+        playlist = data;
+        if (playlist.length > 0) {
+            // Select all songs by default
+            selectedSongs = new Set(playlist.map((_, index) => index));
+            // Set active playlist to all songs
+            activePlaylist = [...playlist];
+            populatePlaylist();
+            loadSong(0);
+            isMusicPlaying = true;
+        } else {
+            console.log('No music files available');
+            isMusicPlaying = false;
+            updateMusicDisplay();
+        }
+    } catch (error) {
+        console.error('Error fetching playlist:', error);
+        playlist = [];
+        selectedSongs = new Set();
+        activePlaylist = [];
+        isMusicPlaying = false;
+        updateMusicDisplay();
+    }
+}
+
 function loadSong(index) {
-    currentSongIndex = (index + playlist.length) % playlist.length;
-    const song = playlist[currentSongIndex];
+    if (!activePlaylist || activePlaylist.length === 0) {
+        console.log('No songs in active playlist');
+        isMusicPlaying = false;
+        updateMusicDisplay();
+        return;
+    }
+    currentSongIndex = (index + activePlaylist.length) % activePlaylist.length;
+    const song = activePlaylist[currentSongIndex];
+    if (!song || !song.src) {
+        console.error('Invalid song data:', song);
+        return;
+    }
     backgroundMusic.src = song.src;
     if (isMusicPlaying && isPlaying) {
-        backgroundMusic.play();
+        backgroundMusic.play().catch(error => {
+            console.error('Error playing music:', error);
+            isMusicPlaying = false;
+            updateMusicDisplay();
+        });
     }
     updateMusicDisplay();
     populatePlaylist();
@@ -299,10 +378,65 @@ function previousSong() {
 
 function updateMusicDisplay() {
     const musicText = document.getElementById('musicText');
-    const currentSong = playlist[currentSongIndex];
+    if (!activePlaylist || activePlaylist.length === 0) {
+        musicText.textContent = 'No music selected';
+        return;
+    }
+    const currentSong = activePlaylist[currentSongIndex];
     musicText.textContent = isMusicPlaying ? `${currentSong.title} (Playing)` : `${currentSong.title} (Muted)`;
 }
 
+function toggleSongSelection(index) {
+    if (selectedSongs.has(index)) {
+        selectedSongs.delete(index);
+    } else {
+        selectedSongs.add(index);
+    }
+    populatePlaylist();
+}
+
+function updatePlaylist() {
+    if (selectedSongs.size === 0) {
+        activePlaylist = [];
+        isMusicPlaying = false;
+        updateMusicDisplay();
+    } else {
+        activePlaylist = Array.from(selectedSongs).map(index => playlist[index]);
+        loadSong(0);
+        isMusicPlaying = true;
+    }
+    togglePlaylist();
+}
+
+function populatePlaylist() {
+    const playlistItems = document.getElementById('playlistItems');
+    playlistItems.innerHTML = playlist.map((song, index) => `
+        <div class="playlist-item ${activePlaylist.includes(song) ? 'active' : ''}" onclick="toggleSongSelection(${index})">
+            <input type="checkbox" 
+                   ${selectedSongs.has(index) ? 'checked' : ''} 
+                   onchange="toggleSongSelection(${index})"
+                   onclick="event.stopPropagation()">
+            ${song.title}
+            ${activePlaylist.includes(song) && activePlaylist[currentSongIndex] === song ? ' (Playing)' : ''}
+        </div>
+    `).join('');
+}
+
+// Add event listener for when a song ends
+backgroundMusic.addEventListener('ended', () => {
+    if (activePlaylist && activePlaylist.length > 0) {
+        // Move to next song in playlist
+        currentSongIndex = (currentSongIndex + 1) % activePlaylist.length;
+        console.log('play Next song:', activePlaylist[currentSongIndex]);
+        loadSong(currentSongIndex);
+        if (isMusicPlaying && isPlaying) {
+            backgroundMusic.play().catch(error => {
+                console.error('Error playing next song:', error);
+            });
+        }
+    }
+});
+
 function toggleMusic() {
     isMusicPlaying = !isMusicPlaying;
     const icon = document.getElementById('musicIcon');
@@ -419,15 +553,6 @@ function resetProgress() {
     }
 }
 
-function populatePlaylist() {
-    const playlistItems = document.getElementById('playlistItems');
-    playlistItems.innerHTML = playlist.map((song, index) => `
-        <div class="playlist-item ${index === currentSongIndex ? 'active' : ''}" onclick="selectSong(${index})">
-            ${song.title} ${index === currentSongIndex ? '(Current)' : ''}
-        </div>
-    `).join('');
-}
-
 // Keyboard controls
 document.addEventListener('keydown', (e) => {
     switch(e.key) {
@@ -459,9 +584,8 @@ document.addEventListener('keydown', (e) => {
 });
 
 // Start slideshow when page loads
-document.addEventListener('DOMContentLoaded', () => {
-    populatePlaylist();
-    loadSong(0);
+document.addEventListener('DOMContentLoaded', async () => {
+    await fetchPlaylist();
     startSlideshow();
 });
 </script>