diff --git a/public/resources/instruments/speaker.png b/public/resources/instruments/speaker.png
new file mode 100644
index 0000000..6dafe66
Binary files /dev/null and b/public/resources/instruments/speaker.png differ
diff --git a/src/components/InstrumentSelection.tsx b/src/components/InstrumentSelection.tsx
index b923e5e..8602c53 100644
--- a/src/components/InstrumentSelection.tsx
+++ b/src/components/InstrumentSelection.tsx
@@ -3,6 +3,7 @@ import './InstrumentSelection.css';
 import { useProjectStore } from '../stores/projectStore';
 import { INSTRUMENT_GROUPS, FLUIDR3_INSTRUMENT_MAP } from '../constants/generalMidiConstants';
 import { KGMidiTrack, type InstrumentType } from '../core/track/KGMidiTrack';
+import { KGAudioTrack } from '../core/track/KGAudioTrack';
 
 const InstrumentSelection: React.FC = () => {
   const {
@@ -53,14 +54,15 @@ const InstrumentSelection: React.FC = () => {
     }
   };
 
-  const previewImage = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.image || 'piano.png';
-  const previewAlt = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.displayName || currentInstrumentKey;
+  const isAudioTrack = targetTrack instanceof KGAudioTrack;
+  const previewImage = isAudioTrack ? 'speaker.png' : (FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.image || 'piano.png');
+  const previewAlt = isAudioTrack ? 'Audio Track' : (FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.displayName || currentInstrumentKey);
   const hasTargetTrack = !!targetTrack;
 
   return (
       <div className="instrument-selection">
       <div className="instrument-selection-header">
-        <h3>{hasTargetTrack ? `${previewAlt.toString()}` : ''}</h3>
+        <h3>{hasTargetTrack ? previewAlt : ''}</h3>
         <button className="instrument-selection-close-btn" onClick={closeInstrumentSelection}>✕</button>
       </div>
       <div className="instrument-selection-top">
@@ -76,6 +78,7 @@ const InstrumentSelection: React.FC = () => {
           )}
           <div className="instrument-name-overlay">{hasTargetTrack ? targetTrack.getName() : ''}</div>
       </div>
+      {!isAudioTrack && (
       <div className="instrument-selection-bottom">
         <div className="instrument-groups">
           <div className="instrument-groups-list">
@@ -104,6 +107,7 @@ const InstrumentSelection: React.FC = () => {
           </div>
         </div>
       </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/track/TrackInfoItem.tsx b/src/components/track/TrackInfoItem.tsx
index b97a603..f6d3e8d 100644
--- a/src/components/track/TrackInfoItem.tsx
+++ b/src/components/track/TrackInfoItem.tsx
@@ -273,9 +273,12 @@ const TrackInfoItem: React.FC<TrackInfoItemProps> = ({
         <div className="track-name-and-volume">
           <div className="instrument-image">
             {isAudioTrack ? (
-              <div style={{ width: 64, height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '28px', color: 'var(--text-secondary, #999)' }}>
-                <FaFileAudio />
-              </div>
+              <img
+                src={`${import.meta.env.BASE_URL}resources/instruments/speaker.png`}
+                alt="Audio Track"
+                width="64"
+                height="64"
+              />
             ) : (
               <img
                 src={`${import.meta.env.BASE_URL}resources/instruments/${String(FLUIDR3_INSTRUMENT_MAP[currentInstrument as keyof typeof FLUIDR3_INSTRUMENT_MAP]?.image || 'piano.png')}`}