diff --git a/src/pages/SeedList/Recommend/PlaylistDetailPage.css b/src/pages/SeedList/Recommend/PlaylistDetailPage.css
index 78e7068..f9c09e6 100644
--- a/src/pages/SeedList/Recommend/PlaylistDetailPage.css
+++ b/src/pages/SeedList/Recommend/PlaylistDetailPage.css
@@ -12,7 +12,7 @@
   font-weight: 700;
 }
 
-.cover-image {
+.cover-img {
   width: 100%;
   max-height: 400px;
   object-fit: cover;
diff --git a/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx b/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx
index 07558d6..54380e1 100644
--- a/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx
+++ b/src/pages/SeedList/Recommend/PlaylistDetailPage.jsx
@@ -72,7 +72,7 @@
       src={detail.coverUrl || '/default-cover.jpg'}
       alt={detail.title}
       onError={e => { e.target.src = '/default-cover.jpg'; }}
-      className="cover-image"
+      className="cover-img"
     />
     <p>{detail.description}</p>
 
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
index f58c73d..2229bb1 100644
--- a/src/pages/SeedList/Recommend/Recommend.jsx
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -7,6 +7,7 @@
 import CreatePlaylistModal from './CreatePlaylistModal';
 import { confirmAlert } from 'react-confirm-alert';
 import 'react-confirm-alert/src/react-confirm-alert.css';
+import AuthButton from '../../../components/AuthButton';
 
 const Recommend = () => {
   const { user } = useUser();
@@ -160,15 +161,18 @@
             />
             <div className="paid-title">{list.title}</div>
 
-            {user && user.role === 'admin' ? (
-              <div className="admin-actions">
-                <button onClick={() => handleDelete(list.id)}>删除</button>
-              </div>
-            ) : list.isPaid ? (
-              <button onClick={() => navigate(`/playlist/${list.id}`)}>详情</button>
-            ) : (
-              <button onClick={() => handlePurchase(list.id)}>购买</button>
-            )}
+          {user && user.role === 'admin' ? (
+            <div className="admin-actions">
+              <button onClick={() => handleDelete(list.id)}>删除</button>
+            </div>
+          ) : list.isPaid ? (
+            <button onClick={() => navigate(`/playlist/${list.id}`)}>详情</button>
+          ) : (
+            <AuthButton roles={['chocolate', 'ice-cream']} onClick={() => handlePurchase(list.id)}>
+              购买
+            </AuthButton>
+          )}
+
           </div>
         ))}
       </div>