diff --git a/src/components/controls.tsx b/src/components/controls.tsx
index 406fbb4..653bc11 100644
--- a/src/components/controls.tsx
+++ b/src/components/controls.tsx
@@ -1,10 +1,11 @@
 import React, { useCallback, useRef, useEffect, useState } from 'react';
+import clsx from 'clsx';
 
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import StopIcon from '@material-ui/icons/Stop';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
-import PauseIcon from '@material-ui/icons/Pause'
+import PauseIcon from '@material-ui/icons/Pause';
 
 import IconButton from '@material-ui/core/IconButton';
 import Box from '@material-ui/core/Box';
@@ -94,11 +95,11 @@ const useStyles = makeStyles(theme => ({
         top: 15,
         left: 1,
     },
-    lcdBlink:{
+    lcdBlink: {
         animationName: '$blink',
         animationTimingFunction: 'step-end',
         animationDuration: '1s',
-        animationIterationCount: 'infinite'
+        animationIterationCount: 'infinite',
     },
     button: {
         // padding: 8,
@@ -132,7 +133,7 @@ export const Controls = () => {
     let trackIndex = deviceStatus?.track ?? null;
     let deviceState = deviceStatus?.state ?? null;
     let discPresent = deviceStatus?.discPresent ?? false;
-    let paused = deviceStatus?.state === "paused";
+    let paused = deviceStatus?.state === 'paused';
     const tracks = getSortedTracks(disc);
     if (!discPresent) {
         message = ``;
@@ -141,7 +142,9 @@ export const Controls = () => {
     } else if (tracks.length === 0) {
         message = `BLANKDISC`;
     } else if (deviceStatus && deviceStatus.track !== null && tracks[deviceStatus.track]) {
-        message = (deviceStatus.track + 1).toString().padStart(3, '0') + (tracks[deviceStatus.track].title ? ' - ' + tracks[deviceStatus.track].title : '');
+        message =
+            (deviceStatus.track + 1).toString().padStart(3, '0') +
+            (tracks[deviceStatus.track].title ? ' - ' + tracks[deviceStatus.track].title : '');
     }
 
     const [lcdScroll, setLcdScroll] = useState(0);
@@ -248,7 +251,9 @@ export const Controls = () => {
                         {message}
                     </span>
                 </div>
-                <div className={classes.lcdDisc}>{discPresent && <DiscFrame className={classes.lcdDiscIcon + (paused ? ' ' + classes.lcdBlink : '')} />}</div>
+                <div className={classes.lcdDisc}>
+                    {discPresent && <DiscFrame className={clsx(classes.lcdDiscIcon, { [classes.lcdBlink]: paused })} />}
+                </div>
             </div>
         </Box>
     );
diff --git a/src/components/main.tsx b/src/components/main.tsx
index f7360ca..ec749ad 100644
--- a/src/components/main.tsx
+++ b/src/components/main.tsx
@@ -21,7 +21,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
 import Backdrop from '@material-ui/core/Backdrop';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
-import PauseIcon from '@material-ui/icons/Pause'
+import PauseIcon from '@material-ui/icons/Pause';
 
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -137,8 +137,9 @@ const useStyles = makeStyles(theme => ({
         textDecorationStyle: 'dotted',
     },
     controlButtonInTrackCommon: {
-        width: '.5em',
+        width: `16px`,
         verticalAlign: 'middle',
+        marginLeft: theme.spacing(-0.5),
     },
     playButtonInTrackListPlaying: {
         color: theme.palette.primary.main,
@@ -157,25 +158,25 @@ const useStyles = makeStyles(theme => ({
     trackRow: {
         '&:hover': {
             /* For the tracks that aren't currently playing */
-            "& $playButtonInTrackListNotPlaying":{
+            '& $playButtonInTrackListNotPlaying': {
                 visibility: 'visible',
             },
-            "& $trackIndex":{
+            '& $trackIndex': {
                 display: 'none',
             },
 
             /* For the current track */
-            "& svg:not($currentControlButton)": {
+            '& svg:not($currentControlButton)': {
                 display: 'inline-block',
             },
-            "& $currentControlButton": {
+            '& $currentControlButton': {
                 display: 'none',
-            }
+            },
         },
     },
-    trackIndex:{
+    trackIndex: {
         display: 'inline-block',
-    }
+    },
 }));
 
 export const Main = (props: {}) => {
@@ -274,18 +275,19 @@ export const Main = (props: {}) => {
     };
 
     const handlePlayTrack = async (event: React.MouseEvent, track: number) => {
-        if(deviceStatus?.track !== track)
+        if (deviceStatus?.track !== track) {
             dispatch(control('goto', track));
-        if(deviceStatus?.state !== 'playing')
+        }
+        if (deviceStatus?.state !== 'playing') {
             dispatch(control('play'));
+        }
     };
 
     const handleCurrentClick = async (event: React.MouseEvent) => {
-        if(deviceStatus?.state === 'playing')
+        if (deviceStatus?.state === 'playing') {
             dispatch(control('pause'));
-        else
-            dispatch(control('play'));
-    }
+        } else dispatch(control('play'));
+    };
 
     if (vintageMode) {
         const p = {
@@ -451,23 +453,43 @@ export const Main = (props: {}) => {
                                 className={classes.trackRow}
                             >
                                 <TableCell className={classes.indexCell}>
-                                    {track.index === deviceStatus?.track && (["playing", "paused"].includes(deviceStatus?.state)) ?
+                                    {track.index === deviceStatus?.track && ['playing', 'paused'].includes(deviceStatus?.state) ? (
                                         <span>
                                             <PlayArrowIcon
-                                                className={`${classes.controlButtonInTrackCommon} ${classes.playButtonInTrackListPlaying} ${deviceStatus?.state === 'playing' ? classes.currentControlButton : ''}`}
-                                                onClick={event => {handleCurrentClick(event); event.stopPropagation();}} />
+                                                className={clsx(classes.controlButtonInTrackCommon, classes.playButtonInTrackListPlaying, {
+                                                    [classes.currentControlButton]: deviceStatus?.state === 'playing',
+                                                })}
+                                                onClick={event => {
+                                                    handleCurrentClick(event);
+                                                    event.stopPropagation();
+                                                }}
+                                            />
                                             <PauseIcon
-                                                className={`${classes.controlButtonInTrackCommon} ${classes.pauseButtonInTrackListPlaying} ${deviceStatus?.state === 'paused' ? classes.currentControlButton : ''}`}
-                                                onClick={event => {handleCurrentClick(event); event.stopPropagation()}} />
-                                        </span> :
+                                                className={clsx(classes.controlButtonInTrackCommon, classes.pauseButtonInTrackListPlaying, {
+                                                    [classes.currentControlButton]: deviceStatus?.state === 'paused',
+                                                })}
+                                                onClick={event => {
+                                                    handleCurrentClick(event);
+                                                    event.stopPropagation();
+                                                }}
+                                            />
+                                        </span>
+                                    ) : (
                                         <span>
                                             <span className={classes.trackIndex}>{track.index + 1}</span>
                                             <PlayArrowIcon
-                                                className={`${classes.controlButtonInTrackCommon} ${classes.playButtonInTrackListNotPlaying}`}
-                                                onClick={event => {handlePlayTrack(event, track.index); event.stopPropagation();}}
+                                                className={clsx(
+                                                    classes.controlButtonInTrackCommon,
+                                                    classes.playButtonInTrackListNotPlaying
+                                                )}
+                                                onClick={event => {
+                                                    handlePlayTrack(event, track.index);
+                                                    event.stopPropagation();
+                                                }}
                                             />
-                                        </span>}
-                                    </TableCell>
+                                        </span>
+                                    )}
+                                </TableCell>
                                 <TableCell className={classes.titleCell} title={track.title}>
                                     {track.title || `No Title`}
                                 </TableCell>
diff --git a/src/redux/actions.ts b/src/redux/actions.ts
index 3874009..24f083c 100644
--- a/src/redux/actions.ts
+++ b/src/redux/actions.ts
@@ -13,6 +13,7 @@ import { getAvailableCharsForTrackTitle, framesToSec, sleepWithProgressCallback,
 import * as mm from 'music-metadata-browser';
 import { TitleFormatType, UploadFormat } from './convert-dialog-feature';
 import NotificationCompleteIconUrl from '../images/record-complete-notification-icon.png';
+import { assertNumber } from 'netmd-js/dist/utils';
 
 export function control(action: 'play' | 'stop' | 'next' | 'prev' | 'goto' | 'pause', params?: unknown) {
     return async function(dispatch: AppDispatch, getState: () => RootState) {
@@ -33,9 +34,8 @@ export function control(action: 'play' | 'stop' | 'next' | 'prev' | 'goto' | 'pa
                 await serviceRegistry.netmdService!.pause();
                 break;
             case 'goto':
-                if (params !== null && params !== undefined && typeof params === 'number' && params >= 0) {
-                    await serviceRegistry.netmdService!.gotoTrack(params);
-                }
+                const trackNumber = assertNumber(params, 'Invalid track number for "goto" command');
+                await serviceRegistry.netmdService!.gotoTrack(trackNumber);
                 break;
         }
         // CAVEAT: change-track might take a up to a few seconds to complete.