diff --git a/src/components/main-rows.tsx b/src/components/main-rows.tsx
index 4714165..cd72f4f 100644
--- a/src/components/main-rows.tsx
+++ b/src/components/main-rows.tsx
@@ -12,6 +12,7 @@ import * as BadgeImpl from '@material-ui/core/Badge/Badge';
 
 import DragIndicator from '@material-ui/icons/DragIndicator';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import PauseIcon from '@material-ui/icons/Pause';
 import IconButton from '@material-ui/core/IconButton';
 import FolderIcon from '@material-ui/icons/Folder';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -117,26 +118,36 @@ interface TrackRowProps {
     track: Track;
     inGroup: boolean;
     isSelected: boolean;
-    isCurrentTrack: boolean;
+    trackStatus: 'playing' | 'paused' | 'none';
     draggableProvided: DraggableProvided;
     onSelect: (event: React.MouseEvent, trackIdx: number) => void;
     onRename: (event: React.MouseEvent, trackIdx: number) => void;
-    onPlay: (event: React.MouseEvent, trackIdx: number) => void;
+    onTogglePlayPause: (event: React.MouseEvent, trackIdx: number) => void;
 }
 
-export function TrackRow({ track, inGroup, isSelected, draggableProvided, isCurrentTrack, onSelect, onRename, onPlay }: TrackRowProps) {
+export function TrackRow({
+    track,
+    inGroup,
+    isSelected,
+    draggableProvided,
+    trackStatus,
+    onSelect,
+    onRename,
+    onTogglePlayPause,
+}: TrackRowProps) {
     const classes = useStyles();
 
     const handleRename = useCallback(event => onRename(event, track.index), [track.index, onRename]);
     const handleSelect = useCallback(event => onSelect(event, track.index), [track.index, onSelect]);
-    const handlePlay: React.MouseEventHandler = useCallback(
+    const handlePlayPause: React.MouseEventHandler = useCallback(
         event => {
             event.stopPropagation();
-            onPlay(event, track.index);
+            onTogglePlayPause(event, track.index);
         },
-        [track.index, onPlay]
+        [track.index, onTogglePlayPause]
     );
     const handleDoubleClickOnPlayButton: React.MouseEventHandler = useCallback(event => event.stopPropagation(), []);
+    const isPlayingOrPaused = trackStatus === 'playing' || trackStatus === 'paused';
 
     return (
         <TableRow
@@ -147,7 +158,7 @@ export function TrackRow({ track, inGroup, isSelected, draggableProvided, isCurr
             onDoubleClick={handleRename}
             onClick={handleSelect}
             color="inherit"
-            className={clsx(classes.trackRow, { [classes.inGroupTrackRow]: inGroup, [classes.currentTrackRow]: isCurrentTrack })}
+            className={clsx(classes.trackRow, { [classes.inGroupTrackRow]: inGroup, [classes.currentTrackRow]: isPlayingOrPaused })}
         >
             <TableCell className={classes.dragHandle} {...draggableProvided.dragHandleProps} onClick={event => event.stopPropagation()}>
                 <DragIndicator fontSize="small" color="disabled" />
@@ -158,10 +169,14 @@ export function TrackRow({ track, inGroup, isSelected, draggableProvided, isCurr
                     aria-label="delete"
                     className={clsx(classes.controlButtonInTrackCommon, classes.playButtonInTrackList)}
                     size="small"
-                    onClick={handlePlay}
+                    onClick={handlePlayPause}
                     onDoubleClick={handleDoubleClickOnPlayButton}
                 >
-                    <PlayArrowIcon fontSize="inherit" />
+                    {trackStatus === 'paused' || trackStatus === 'none' ? (
+                        <PlayArrowIcon fontSize="inherit" />
+                    ) : (
+                        <PauseIcon fontSize="inherit" />
+                    )}
                 </IconButton>
             </TableCell>
             <TableCell className={classes.titleCell} title={track.title ?? ''}>
diff --git a/src/components/main.tsx b/src/components/main.tsx
index 6bf781c..794c5a1 100644
--- a/src/components/main.tsx
+++ b/src/components/main.tsx
@@ -131,8 +131,18 @@ const useStyles = makeStyles(theme => ({
     },
 }));
 
-function isCurrentTrack(track: Track, deviceStatus: DeviceStatus | null) {
-    return track.index === deviceStatus?.track && ['playing', 'paused'].includes(deviceStatus?.state);
+function getTrackStatus(track: Track, deviceStatus: DeviceStatus | null): 'playing' | 'paused' | 'none' {
+    if (!deviceStatus || track.index !== deviceStatus.track) {
+        return 'none';
+    }
+
+    if (deviceStatus.state === 'playing') {
+        return 'playing';
+    } else if (deviceStatus.state === 'paused') {
+        return 'paused';
+    } else {
+        return 'none';
+    }
 }
 
 export const Main = (props: {}) => {
@@ -311,13 +321,18 @@ export const Main = (props: {}) => {
         [dispatch]
     );
 
-    const handlePlayTrack = useCallback(
+    const handleTogglePlayPauseTrack = useCallback(
         (event: React.MouseEvent, track: number) => {
-            if (deviceStatus?.track !== track) {
-                dispatch(control('goto', track));
+            if (!deviceStatus) {
+                return;
             }
-            if (deviceStatus?.state !== 'playing') {
-                dispatch(control('play'));
+            if (deviceStatus.track !== track) {
+                dispatch(control('goto', track));
+                if (deviceStatus.state !== 'playing') {
+                    dispatch(control('play'));
+                }
+            } else if (deviceStatus.state === 'playing') {
+                dispatch(control('pause'));
             }
         },
         [dispatch, deviceStatus]
@@ -498,10 +513,10 @@ export const Main = (props: {}) => {
                                                                         draggableProvided={provided}
                                                                         inGroup={group.title !== null}
                                                                         isSelected={selected.includes(t.index)}
-                                                                        isCurrentTrack={isCurrentTrack(t, deviceStatus)}
+                                                                        trackStatus={getTrackStatus(t, deviceStatus)}
                                                                         onSelect={handleSelectTrackClick}
                                                                         onRename={handleRenameTrack}
-                                                                        onPlay={handlePlayTrack}
+                                                                        onTogglePlayPause={handleTogglePlayPauseTrack}
                                                                     />
                                                                 )}
                                                             </Draggable>