diff --git a/index.html b/index.html
index 0690418..0777111 100644
--- a/index.html
+++ b/index.html
@@ -250,13 +250,10 @@
 
             <div id="page-library" class="page">
                 <section class="content-section">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
-                        <h2 class="section-title" style="margin-bottom: 0;">My Playlists</h2>
-                        <div style="display: flex; gap: 0.5rem;">
-
-                            <button id="create-playlist-btn" class="btn-secondary">Create Playlist</button>
-                        </div>
-                    </div>
+            <div class="library-header">
+                <h2>My Playlists</h2>
+                <button id="create-playlist-btn" class="btn-primary">Create Playlist</button>
+            </div>
                     <div class="card-grid" id="my-playlists-container"></div>
                 </section>
 
diff --git a/styles.css b/styles.css
index dc192bb..37c853e 100644
--- a/styles.css
+++ b/styles.css
@@ -3850,3 +3850,10 @@ img:not([src]), img[src=''] {
     }
 }
 
+
+.library-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-md);
+}