diff --git a/packages/ui/lib/components/Button/styles.scss b/packages/ui/lib/components/Button/styles.scss
index 54144613cc..31bba140ef 100644
--- a/packages/ui/lib/components/Button/styles.scss
+++ b/packages/ui/lib/components/Button/styles.scss
@@ -1,12 +1,12 @@
-
 @import "../../common.scss";
 
 button.nuclear.ui.button {
   position: relative;
-  
+
   background: $bglight;
   color: $white;
   white-space: nowrap;
+  margin: 0;
 
   &:hover {
     background: mix($bglight, $bgdark, 90%);
@@ -53,7 +53,7 @@ button.nuclear.ui.button {
     "purple": $purple,
     "pink": $pink,
     "orange": $orange,
-    "red": $red,
+    "red": $red
   );
   @each $color in $colors {
     $button-color: map-get($colorvars, $color);
@@ -88,7 +88,9 @@ button.nuclear.ui.button {
     padding: 0;
     margin: 0 0.5em;
 
-    &:hover, &:focus, &:active {
+    &:hover,
+    &:focus,
+    &:active {
       background: transparent;
     }
 
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx
new file mode 100644
index 0000000000..afc01ad097
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/DeleteCell.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { CellProps } from 'react-table';
+import cx from 'classnames';
+
+import styles from '../styles.scss';
+import { Track } from '../../../types';
+import { TrackTableExtraProps } from '../../TrackTable/types';
+import Button from '../../Button';
+
+export const DeleteCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
+  cell,
+  row,
+  onDelete
+}) => <div
+  {...cell.getCellProps()}
+  className={cx(styles.delete_cell)}
+  data-testid='delete-cell'>
+  <Button
+    data-testid='delete-button'
+    basic
+    borderless
+    circular
+    size='tiny' 
+    icon='times'
+    onClick={() => onDelete(row.original, row.index)}
+  />
+</div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx
new file mode 100644
index 0000000000..4d4f3ebd71
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/FavoriteCell.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { CellProps } from 'react-table';
+import cx from 'classnames';
+
+import { TrackTableExtraProps } from '../../TrackTable/types';
+import { Track } from '../../../types';
+import Button from '../../Button';
+import styles from '../styles.scss';
+
+export const FavoriteCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
+  cell,
+  row,
+  value,
+  onAddToFavorites,
+  onRemoveFromFavorites
+}) => <div
+  {...cell.getCellProps()}
+  className={cx(styles.grid_track_table_cell, styles.favorite_cell)}
+  data-testid='favorite-cell'>
+  <Button
+    data-testid='favorite-button'
+    basic
+    borderless
+    circular
+    size='tiny' icon={value ? 'heart' : 'heart outline'}
+    onClick={() =>  value ? onRemoveFromFavorites(row.original) : onAddToFavorites(row.original)}
+  />
+</div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
index be2d8a0401..00aca6f452 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/PositionCell.tsx
@@ -14,7 +14,7 @@ export const PositionCell: React.FC<CellProps<Track> & TrackTableExtraProps<Trac
   onPlay
 }) => <div
   {...cell.getCellProps()}
-  className={cx(styles.position_cell, styles.narrow)}
+  className={cx(styles.grid_track_table_cell, styles.position_cell)}
   data-testid='position-cell'
 >
   <Button
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
index d5a8c23b41..a3b62e5426 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TextCell.tsx
@@ -13,7 +13,7 @@ export const TextCell: React.FC<CellProps<Track>> = ({
   value
 }) => <div
   {...cell.getCellProps()}
-  className={cx(styles.track_table_cell, styles.text_cell)}
+  className={cx(styles.grid_track_table_cell, styles.text_cell)}
 >
   {value}
 </div>;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
index ae78144228..da4385493a 100644
--- a/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Cells/ThumbnailCell.tsx
@@ -9,7 +9,7 @@ export const ThumbnailCell: React.FC<CellProps<Track>> = ({
   cell,
   value
 }) => <div
-  className={cx(styles.track_table_cell, styles.thumbnail_cell)}
+  className={cx(styles.grid_track_table_cell, styles.thumbnail_cell)}
   {...cell.getCellProps()}
 >
   <img className={styles.thumbnail_cell_thumbnail} src={value} />
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
new file mode 100644
index 0000000000..6d3dcb768d
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/TitleCell.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { CellProps } from 'react-table';
+import cx from 'classnames';
+
+import { TrackTableColumn, TrackTableExtraProps } from '../../TrackTable/types';
+import { Track } from '../../../types';
+import Button from '../../Button';
+import TrackPopup from '../../TrackPopup';
+import styles from '../styles.scss';
+
+export const TitleCell: React.FC<CellProps<Track> & TrackTableExtraProps<Track>> = ({
+  cell, 
+  row,
+  value,
+
+  onPlay,
+  onPlayNext,
+  onAddToQueue,
+  onAddToFavorites,
+  onAddToPlaylist,
+  onCreatePlaylist,
+  onAddToDownloads,
+  playlists,
+  popupActionStrings
+}) => <div
+  {...cell.getCellProps()}
+  data-testid='title-cell'
+  className={cx(styles.grid_track_table_cell, styles.text_cell, styles.title_cell)}
+>
+  <span className={styles.title_cell_content}>
+    <span className={styles.title_cell_value}>
+      {value}
+    </span>
+    <span className={styles.title_cell_buttons}>
+      <Button
+        className={styles.title_cell_button}
+        basic
+        borderless
+        circular
+        size='tiny'
+        icon='plus'
+        onClick={() => onAddToQueue(row.original)}
+        data-testid='add-to-queue'
+      />
+
+      <TrackPopup
+        trigger={
+          <Button
+            className={styles.title_cell_button}
+            basic
+            borderless
+            circular
+            size='tiny'
+            icon='ellipsis horizontal'
+            data-testid='track-popup-trigger'
+          />
+        }
+        thumb={row.values[TrackTableColumn.Thumbnail]}
+        title={row.values[TrackTableColumn.Title]}
+        artist={row.values[TrackTableColumn.Artist]}
+        playlists={playlists}
+
+        onPlayNow={() => onPlay(row.original)}
+        onPlayNext={() => onPlayNext(row.original)}
+        onAddToQueue={() => onAddToQueue(row.original)}
+        onAddToFavorites={() => onAddToFavorites(row.original)}
+        onAddToPlaylist={(playlist: { name: string }) => onAddToPlaylist(row.original, playlist)}
+        onCreatePlaylist={(options: { name: string }) => onCreatePlaylist(row.original, options)}
+        onAddToDownloads={() => onAddToDownloads(row.original)}
+
+        withPlayNow={Boolean(onPlay)}
+        withPlayNext={Boolean(onPlayNext)}
+        withAddToQueue={Boolean(onAddToQueue)}
+        withAddToFavorites={Boolean(onAddToFavorites)}
+        withAddToPlaylist={Boolean(onAddToFavorites)}
+        withAddToDownloads={Boolean(onAddToDownloads) && !row.original.local}
+
+        strings={popupActionStrings}
+      />
+    </span>
+  </span>
+</div>;
diff --git a/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
index 523eda9298..e0b2860693 100644
--- a/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
+++ b/packages/ui/lib/components/GridTrackTable/GridTrackTableRow.tsx
@@ -33,7 +33,7 @@ export const GridTrackTableRow = memo(<T extends Track>({ index, style, data }:
         <div
           data-test-id='track-table-row'
           className={cx(
-            styles.track_table_row,
+            styles.grid_track_table_row,
             { [styles.is_dragging]: draggableSnapshot.isDragging }
           )}
           ref={draggableProvided.innerRef}
diff --git a/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx b/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
index 93b7c056c0..306aab2086 100644
--- a/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
+++ b/packages/ui/lib/components/GridTrackTable/GridTrackTableRowClone.tsx
@@ -22,7 +22,7 @@ export const GridTrackTableRowClone: <T extends Track>(props: GridTrackTableRowC
   return <div
     ref={provided.innerRef}
     className={cx(
-      styles.track_table_row,
+      styles.grid_track_table_row,
       styles.is_dragging
     )}
     {...row.getRowProps()}
diff --git a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
index 08a26d721c..3fda494394 100644
--- a/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
+++ b/packages/ui/lib/components/GridTrackTable/Headers/TextHeader.tsx
@@ -6,15 +6,15 @@ import cx from 'classnames';
 import { Track } from '../../../types';
 import styles from '../styles.scss';
 
-type TextHeaderProps = {
+type TextHeaderProps<T extends Track> = {
   className?: string;
-  column: ColumnInstance<Track> & UseSortByColumnProps<Track>;
+  column: ColumnInstance<T> & UseSortByColumnProps<T>;
   header: string | React.ReactNode;
   isCentered?: boolean;
   'data-testid'?: string;
 };
 
-export const TextHeader: React.FC<TextHeaderProps> = ({ 
+export const TextHeader: <T extends Track>(props: TextHeaderProps<T>) => React.ReactElement<TextHeaderProps<T>> = ({
   className,
   column, 
   header,
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index 19b003d48c..6701f23dea 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -1,5 +1,5 @@
-import { Column, Row, TableInstance, TableOptions, TableState, UseSortByInstanceProps, UseSortByState, useRowSelect, useSortBy, useTable } from 'react-table';
-import React, { useMemo, memo } from 'react';
+import { Column, Row, TableInstance, TableOptions, TableState, UseGlobalFiltersInstanceProps, UseSortByInstanceProps, UseSortByState, useGlobalFilter, useRowSelect, useSortBy, useTable } from 'react-table';
+import React, { useMemo, memo, useState } from 'react';
 import { DragDropContext, DragDropContextProps, Draggable, Droppable } from 'react-beautiful-dnd';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -20,6 +20,11 @@ import { SelectionHeader } from './Headers/SelectionHeader';
 import { formatDuration } from '../../utils';
 import { PositionCell } from './Cells/PositionCell';
 import { GridTrackTableRowClone } from './GridTrackTableRowClone';
+import { DeleteCell } from './Cells/DeleteCell';
+import { FavoriteCell } from './Cells/FavoriteCell';
+import { TitleCell } from './Cells/TitleCell';
+import { Input } from 'semantic-ui-react';
+import Button from '../Button';
 
 export type GridTrackTableProps<T extends Track> = {
   className?: string;
@@ -32,6 +37,8 @@ export type GridTrackTableProps<T extends Track> = {
   & TrackTableSettings 
   & TrackTableExtraProps<T>;
 
+  type ColumnWithWidth<T extends Track> = Column<T> & { columnWidth: string; };
+
 export const GridTrackTable = <T extends Track>({ 
   className,
   tracks, 
@@ -62,6 +69,11 @@ export const GridTrackTable = <T extends Track>({
 }: GridTrackTableProps<T>) => {
   const shouldDisplayDuration = displayDuration && tracks.every(track => Boolean(track.duration));
   const columns = useMemo(() => [
+    displayDeleteButton && {
+      id: TrackTableColumn.Delete,
+      Cell: DeleteCell,
+      columnWidth: '3em'
+    },
     displayPosition && {
       id: TrackTableColumn.Position,
       Header: ({ column }) => <TextHeader
@@ -73,7 +85,7 @@ export const GridTrackTable = <T extends Track>({
       Cell: PositionCell,
       enableSorting: true,
       columnWidth: '4em'
-    },
+    } as Column<T>,
     displayThumbnail && {
       id: TrackTableColumn.Thumbnail,
       Header: ({ column }) => <TextHeader column={column} header={thumbnailHeader} />,
@@ -81,13 +93,19 @@ export const GridTrackTable = <T extends Track>({
       Cell: ThumbnailCell,
       columnWidth: '3em'
     },
+    displayFavorite && {
+      id: TrackTableColumn.Favorite,
+      accessor: isTrackFavorite,
+      Cell: FavoriteCell,
+      columnWidth: '3em'
+    },
     {
       id: TrackTableColumn.Title,
       Header: ({ column }) => <TextHeader column={column} header={titleHeader} />,
       accessor: (track: T) => track.title ?? track.name,
-      Cell: TextCell,
+      Cell: TitleCell,
       enableSorting: true,
-      columnWidth: '1fr'
+      columnWidth: 'minmax(8em, 1fr)'
     },
     displayArtist && {
       id: TrackTableColumn.Artist,
@@ -106,7 +124,7 @@ export const GridTrackTable = <T extends Track>({
       enableSorting: true,
       Cell: TextCell,
       columnWidth: '1fr'
-    },
+    } as Column<T>,
     shouldDisplayDuration && {
       id: TrackTableColumn.Duration,
       Header: ({ column }) => <TextHeader column={column} header={durationHeader} />,
@@ -135,18 +153,54 @@ export const GridTrackTable = <T extends Track>({
   const initialState: Partial<TableState<T> & UseSortByState<T>> = {
     sortBy: [{ id: TrackTableColumn.Title, desc: false }]
   };
-  const table = useTable<T>({ columns, data, initialState }, useSortBy, useRowSelect) as (TableInstance<T> & UseSortByInstanceProps<T>);
+  const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect) as (TableInstance<T> & UseSortByInstanceProps<T> & UseGlobalFiltersInstanceProps<T>);
+  const [globalFilter, setGlobalFilterState] = useState(''); // Required, because useGlobalFilter does not provide a way to get the current filter value
 
-  const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} = table;
+  const {
+    getTableProps, 
+    getTableBodyProps, 
+    headerGroups, 
+    rows, 
+    prepareRow,
+    setGlobalFilter
+  } = table;
+
+  const onFilterClick = () => {
+    setGlobalFilter('');
+    setGlobalFilterState('');
+  };
 
-  const gridTemplateColumns = columns.map(column => column.columnWidth ?? '1fr').join(' ');
+  const gridTemplateColumns = columns.map((column: ColumnWithWidth<T>) => column.columnWidth ?? '1fr').join(' ');
 
   // Disabled when there are selected rows, or when sorted by anything other than position
   const isDragDisabled = !onDragEnd || table.selectedFlatRows.length > 0 || table.state.sortBy[0]?.id !== TrackTableColumn.Position;
 
   return <div className={styles.track_table_wrapper}>
+    {
+      searchable && 
+      <div className={styles.track_table_filter_row}>
+        <Input
+          data-testid='track-table-filter-input'
+          type='text'
+          placeholder={extraProps.strings.filterInputPlaceholder}
+          className={styles.track_table_filter_input} 
+          onChange={(e) => {
+            setGlobalFilter(e.target.value);
+            setGlobalFilterState(e.target.value);
+          }}
+          value={globalFilter}
+        />
+        <Button 
+          className={styles.track_table_filter_button}
+          onClick={onFilterClick}
+          borderless
+          color={'blue'}
+          icon='filter' 
+        />
+      </div>
+    }
     <div 
-      className={styles.track_table}
+      className={styles.grid_track_table}
       {...getTableProps()}
     >
       <div className={styles.track_table_head}>
diff --git a/packages/ui/lib/components/GridTrackTable/styles.scss b/packages/ui/lib/components/GridTrackTable/styles.scss
index 0e33b3c14d..1e0cff0bf5 100644
--- a/packages/ui/lib/components/GridTrackTable/styles.scss
+++ b/packages/ui/lib/components/GridTrackTable/styles.scss
@@ -8,7 +8,46 @@
     height: 100%;
 }
 
-.track_table {
+.track_table_wrapper .track_table_filter_row {
+    display: flex;
+    flex-flow: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 0.5em;
+
+    .track_table_filter_input {
+        input {
+            background: rgba($bglighter, 0.25);
+            color: $white;
+            border: 1px solid transparent;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+
+            &::placeholder {
+                color: rgba($white, 0.5);
+            }
+
+            &::selection {
+                background-color: $blue;
+                color: $white;
+            }
+
+            &:active,
+            &:focus {
+                &::placeholder {
+                    color: rgba($white, 0.2);
+                }
+            }
+        }
+    }
+
+    .track_table_filter_button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.grid_track_table {
     position: relative;
     display: flex;
     flex-flow: column;
@@ -59,7 +98,7 @@
     overflow-x: visible !important;
 }
 
-.track_table_row {
+.grid_track_table_row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
@@ -77,11 +116,15 @@
         .play_button {
             display: inline-flex;
         }
+
+        .title_cell {
+            .title_cell_buttons {
+                display: inline-flex;
+            }
+        }
     }
 
-    &.is_dragging,
-    &:active,
-    &:focus {
+    &.is_dragging {
         background: darken($bgdefault, 5%);
         border: 1px solid rgba($pink, 0.8);
         border-radius: 4px;
@@ -92,9 +135,14 @@
     }
 }
 
-.track_table_cell {
+.grid_track_table_cell {
     display: flex;
     align-items: center;
+
+    button.nuclear.button {
+        width: 2.5em;
+        height: 2.5em;
+    }
 }
 
 .text_header {
@@ -110,6 +158,8 @@
 }
 
 .text_cell {
+    @include ellipsis;
+    white-space: nowrap;
     padding: 0 1em;
 }
 
@@ -155,22 +205,61 @@
 
     .play_button {
         display: none;
-        margin: 0;
-        width: 32px;
-        height: 32px;
 
-        i.play.icon {
-            width: 1em !important;
-            height: 1em !important;
+        // Manual adjustments to center the icon
+        padding-top: 0.75em !important;
 
+        i.play.icon {
             // Manual adjustments to center the icon
-            margin-left: 0.125em !important;
-            margin-top: 0.0625em !important;
+            margin-left: 0.06em !important;
+        }
+    }
+}
 
-            &::before {
-                width: 1em !important;
-                height: 1em !important;
-            }
+.delete_cell {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.favorite_cell {
+    justify-content: center;
+    padding-left: 1em;
+}
+
+.grid_track_table_cell.title_cell {
+    .title_cell_content {
+        display: inline-flex;
+        flex-flow: row;
+        align-items: center;
+        width: 100%;
+    }
+
+    .title_cell_value {
+        @include ellipsis;
+        white-space: nowrap;
+        flex: 1 1 auto;
+    }
+
+    .title_cell_buttons {
+        display: none;
+        flex-flow: row;
+        flex: 0 0 auto;
+    }
+    .title_cell_button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        width: 2.5em;
+        height: 2.5em;
+        margin: 0;
+        border: none;
+        background: none;
+
+        i.icon {
+            margin: 0 0 0.5px 0 !important;
         }
     }
 }
diff --git a/packages/ui/stories/components/GridTrackTable.stories.tsx b/packages/ui/stories/components/GridTrackTable.stories.tsx
index 6a3cbbdf3c..6693fefcce 100644
--- a/packages/ui/stories/components/GridTrackTable.stories.tsx
+++ b/packages/ui/stories/components/GridTrackTable.stories.tsx
@@ -5,6 +5,7 @@ import { GridTrackTableProps } from '../../lib/components/GridTrackTable';
 import { Track } from '../../lib/types';
 import { swap } from '../storyUtils';
 import { Icon } from 'semantic-ui-react';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Components/GridTrackTable',
@@ -37,6 +38,17 @@ const tracks = [
     } as Track
 ];
 
+const callbacks = {
+  onPlay: action('Started playing'),
+  onPlayAll: action('Started playing all'),
+  onAddToQueue: action('Added to queue'),
+  onAddToFavorites: action('Added to favorites'),
+  onRemoveFromFavorites: action('Removed from favorites'),
+  onAddToDownloads: action('Added to downloads'),
+  onAddToPlaylist: action('Added to playlist'),
+  onDelete: action('Deleted')
+};
+
 const gridTrackTableStrings = {
   addSelectedTracksToQueue: 'Add selected to queue',
   addSelectedTracksToDownloads: 'Add selected to downloads',
@@ -57,6 +69,7 @@ const TrackTableTemplate = <T extends Track>(args: Partial<GridTrackTableProps<T
   durationHeader='Length'
   isTrackFavorite={() => false}
   strings={gridTrackTableStrings}
+  {...callbacks}
   {...args} 
 />;
 
@@ -83,3 +96,10 @@ export const DragAndDropVirtualized = () => {
     />
   </div>;
 };
+
+export const Searchable = () => <div className='bg'>
+  <TrackTableTemplate 
+    tracks={tracks}
+    searchable
+  />
+</div>;