diff --git a/src/components/common/ActionButton.tsx b/src/components/common/ActionButton.tsx
index 837762a..16818ab 100644
--- a/src/components/common/ActionButton.tsx
+++ b/src/components/common/ActionButton.tsx
@@ -41,6 +41,8 @@ const ActionButton: React.FC<ActionButtonProps> = ({
     }
   };
 
+  const isIconOnly = icon && iconSlot === ActionButtonIconSlot.ICON_ONLY && !children;
+  
   return (
     <IonButton
       onClick={onClick}
@@ -50,11 +52,14 @@ const ActionButton: React.FC<ActionButtonProps> = ({
       size={getSize()}
       className={className}
       style={{
-        minWidth: '40px',
+        minWidth: isIconOnly ? '40px' : '40px',
         minHeight: '40px',
+        width: isIconOnly ? '40px' : 'auto',
+        height: isIconOnly ? '40px' : 'auto',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        padding: isIconOnly ? '0' : undefined
       }}
     >
       {icon && <IonIcon 
diff --git a/src/features/Artists/Artists.tsx b/src/features/Artists/Artists.tsx
index cee00d6..a8f8beb 100644
--- a/src/features/Artists/Artists.tsx
+++ b/src/features/Artists/Artists.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
-import { IonSearchbar, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonContent, IonItem } from '@ionic/react';
-import { close, list } from 'ionicons/icons';
-import { InfiniteScrollList, SongItem, ListItem, NumberDisplay, SongInfo } from '../../components/common';
+import { IonSearchbar, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonItem } from '@ionic/react';
+import { list } from 'ionicons/icons';
+import { InfiniteScrollList, SongItem, ListItem, NumberDisplay, SongInfo, ActionButton } from '../../components/common';
+import { ActionButtonVariant, ActionButtonSize, ActionButtonIconSlot } from '../../types';
+import { Icons } from '../../constants';
 import { useArtists } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectSongs } from '../../redux';
@@ -97,9 +99,16 @@ const Artists: React.FC = () => {
           <IonHeader>
             <IonToolbar>
               <IonTitle>Songs by {selectedArtist}</IonTitle>
-              <IonButton slot="end" fill="clear" onClick={handleCloseArtistSongs}>
-                <IonIcon icon={close} />
-              </IonButton>
+              <div slot="end">
+                <ActionButton
+                  onClick={handleCloseArtistSongs}
+                  variant={ActionButtonVariant.SECONDARY}
+                  size={ActionButtonSize.SMALL}
+                  icon={Icons.CLOSE}
+                  iconSlot={ActionButtonIconSlot.ICON_ONLY}
+                  fill="clear"
+                />
+              </div>
             </IonToolbar>
           </IonHeader>
           
diff --git a/src/features/Queue/Queue.tsx b/src/features/Queue/Queue.tsx
index 186c0cc..29ccf06 100644
--- a/src/features/Queue/Queue.tsx
+++ b/src/features/Queue/Queue.tsx
@@ -234,20 +234,20 @@ const Queue: React.FC = () => {
 
   return (
     <>
-      <div className="ion-padding ion-text-end">
-        {isAdmin && (
-          <ActionButton
-            onClick={toggleQueueMode}
-            variant={ActionButtonVariant.SECONDARY}
-            size={ActionButtonSize.SMALL}
-            icon={queueMode === 'delete' ? reorderThreeOutline : Icons.TRASH}
-            iconSlot={ActionButtonIconSlot.ICON_ONLY}
-            fill="outline"
-          />
-        )}
-      </div>
-
       <div className="ion-padding">
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
+          {isAdmin && (
+            <ActionButton
+              onClick={toggleQueueMode}
+              variant={ActionButtonVariant.SECONDARY}
+              size={ActionButtonSize.SMALL}
+              icon={queueMode === 'delete' ? reorderThreeOutline : Icons.TRASH}
+              iconSlot={ActionButtonIconSlot.ICON_ONLY}
+              fill="outline"
+            />
+          )}
+        </div>
+
         {/* First Item (Currently Playing) */}
         {renderFirstItem()}
 
diff --git a/src/features/Settings/Settings.tsx b/src/features/Settings/Settings.tsx
index 9bf3a11..8a62aaa 100644
--- a/src/features/Settings/Settings.tsx
+++ b/src/features/Settings/Settings.tsx
@@ -134,13 +134,16 @@ const Settings: React.FC = () => {
           <IonHeader>
             <IonToolbar>
               <IonTitle>Disabled Songs ({filteredDisabledSongs.length})</IonTitle>
-              <IonButton 
-                slot="end" 
-                fill="clear" 
-                onClick={() => setShowDisabledSongsModal(false)}
-              >
-                Close
-              </IonButton>
+              <div slot="end">
+                <ActionButton
+                  onClick={() => setShowDisabledSongsModal(false)}
+                  variant={ActionButtonVariant.SECONDARY}
+                  size={ActionButtonSize.SMALL}
+                  icon={Icons.CLOSE}
+                  iconSlot={ActionButtonIconSlot.ICON_ONLY}
+                  fill="clear"
+                />
+              </div>
             </IonToolbar>
           </IonHeader>
           
diff --git a/src/features/Singers/Singers.tsx b/src/features/Singers/Singers.tsx
index baebff4..bee0923 100644
--- a/src/features/Singers/Singers.tsx
+++ b/src/features/Singers/Singers.tsx
@@ -74,20 +74,20 @@ const Singers: React.FC = () => {
 
   return (
     <>
-      <div className="ion-padding ion-text-end">
-        {isAdmin && (
-          <ActionButton
-            onClick={handleOpenAddModal}
-            variant={ActionButtonVariant.PRIMARY}
-            size={ActionButtonSize.SMALL}
-            icon={Icons.ADD}
-            iconSlot={ActionButtonIconSlot.ICON_ONLY}
-            fill="clear"
-          />
-        )}
-      </div>
-
       <div className="ion-padding">
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
+          {isAdmin && (
+            <ActionButton
+              onClick={handleOpenAddModal}
+              variant={ActionButtonVariant.PRIMARY}
+              size={ActionButtonSize.SMALL}
+              icon={Icons.ADD}
+              iconSlot={ActionButtonIconSlot.ICON_ONLY}
+              fill="solid"
+            />
+          )}
+        </div>
+
         <InfiniteScrollList<Singer>
           items={singers}
           isLoading={singersCount === 0}
@@ -112,13 +112,16 @@ const Singers: React.FC = () => {
         <IonHeader>
           <IonToolbar>
             <IonTitle>Add New Singer</IonTitle>
-            <ActionButton
-              onClick={handleCloseAddModal}
-              variant={ActionButtonVariant.SECONDARY}
-              size={ActionButtonSize.SMALL}
-              icon={Icons.CLOSE}
-              iconSlot={ActionButtonIconSlot.ICON_ONLY}
-            />
+            <div slot="end">
+              <ActionButton
+                onClick={handleCloseAddModal}
+                variant={ActionButtonVariant.SECONDARY}
+                size={ActionButtonSize.SMALL}
+                icon={Icons.CLOSE}
+                iconSlot={ActionButtonIconSlot.ICON_ONLY}
+                fill="clear"
+              />
+            </div>
           </IonToolbar>
         </IonHeader>
         
diff --git a/src/features/SongLists/SongLists.tsx b/src/features/SongLists/SongLists.tsx
index 690bef8..f859d82 100644
--- a/src/features/SongLists/SongLists.tsx
+++ b/src/features/SongLists/SongLists.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { IonItem, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonChip, IonContent, IonList, IonAccordionGroup, IonAccordion } from '@ionic/react';
-import { close, list } from 'ionicons/icons';
-import { InfiniteScrollList, SongItem, ListItem, TwoLineDisplay, NumberDisplay, SongInfo } from '../../components/common';
+import { IonItem, IonModal, IonHeader, IonToolbar, IonTitle, IonChip, IonContent, IonList, IonAccordionGroup, IonAccordion } from '@ionic/react';
+import { list } from 'ionicons/icons';
+import { InfiniteScrollList, SongItem, ListItem, TwoLineDisplay, NumberDisplay, SongInfo, ActionButton } from '../../components/common';
+import { ActionButtonVariant, ActionButtonSize, ActionButtonIconSlot } from '../../types';
+import { Icons } from '../../constants';
 import { useSongLists } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectSongList } from '../../redux';
@@ -101,9 +103,16 @@ const SongLists: React.FC = () => {
           <IonHeader>
             <IonToolbar>
               <IonTitle>{finalSelectedList?.title}</IonTitle>
-              <IonButton slot="end" fill="clear" onClick={handleCloseSongList}>
-                <IonIcon icon={close} />
-              </IonButton>
+              <div slot="end">
+                <ActionButton
+                  onClick={handleCloseSongList}
+                  variant={ActionButtonVariant.SECONDARY}
+                  size={ActionButtonSize.SMALL}
+                  icon={Icons.CLOSE}
+                  iconSlot={ActionButtonIconSlot.ICON_ONLY}
+                  fill="clear"
+                />
+              </div>
             </IonToolbar>
           </IonHeader>
           
diff --git a/src/features/TopPlayed/Top100.tsx b/src/features/TopPlayed/Top100.tsx
index 978291d..8fed00b 100644
--- a/src/features/TopPlayed/Top100.tsx
+++ b/src/features/TopPlayed/Top100.tsx
@@ -141,13 +141,16 @@ const Top100: React.FC = () => {
         <IonHeader>
           <IonToolbar>
             <IonTitle>{selectedTopPlayed?.artist}</IonTitle>
-                    <ActionButton
-          onClick={handleCloseModal}
-          variant={ActionButtonVariant.SECONDARY}
-          size={ActionButtonSize.SMALL}
-          icon={Icons.CLOSE}
-          iconSlot={ActionButtonIconSlot.ICON_ONLY}
-        />
+            <div slot="end">
+              <ActionButton
+                onClick={handleCloseModal}
+                variant={ActionButtonVariant.SECONDARY}
+                size={ActionButtonSize.SMALL}
+                icon={Icons.CLOSE}
+                iconSlot={ActionButtonIconSlot.ICON_ONLY}
+                fill="clear"
+              />
+            </div>
           </IonToolbar>
         </IonHeader>