diff --git a/packages/app/app/components/PlaylistView/index.tsx b/packages/app/app/components/PlaylistView/index.tsx
index a9d783692d..651fc80497 100644
--- a/packages/app/app/components/PlaylistView/index.tsx
+++ b/packages/app/app/components/PlaylistView/index.tsx
@@ -4,8 +4,15 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
 import { Icon } from 'semantic-ui-react';
 
-import { Playlist } from '@nuclear/core';
-import { Button, ContextPopup, PopupButton, InputDialog, timestampToTimeString, Tooltip } from '@nuclear/ui';
+import { Playlist, PlaylistTrack } from '@nuclear/core';
+import {
+  Button,
+  ContextPopup,
+  PopupButton,
+  InputDialog,
+  timestampToTimeString,
+  Tooltip
+} from '@nuclear/ui';
 import { Track } from '@nuclear/ui/lib/types';
 
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
@@ -26,7 +33,7 @@ export type PlaylistViewProps = {
   onReorderTracks: (isource: number, idest: number) => void;
   isExternal?: boolean;
   externalSourceName?: string;
-}
+};
 
 const PlaylistView: React.FC<PlaylistViewProps> = ({
   playlist,
@@ -45,16 +52,42 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
   const { t, i18n } = useTranslation('playlists');
   const history = useHistory();
 
-  const onRenamePlaylist = useCallback((name: string) => {
-    const updatedPlaylist = {
-      ...playlist,
-      name
-    };
-    updatePlaylist(updatedPlaylist);
-  }, [playlist, updatePlaylist]);
+  const onRenamePlaylist = useCallback(
+    (name: string) => {
+      const updatedPlaylist = {
+        ...playlist,
+        name
+      };
+      updatePlaylist(updatedPlaylist);
+    },
+    [playlist, updatePlaylist]
+  );
+  const onUpdateTrack = useCallback(
+    (index: number, updatedTrack: Track) => {
+      const updatedTracks = playlist.tracks.map((track, i) => {
+        if (i === index) {
+          return {
+            ...updatedTrack,
+            stream: (track as PlaylistTrack).stream
+          } as PlaylistTrack;
+        }
+        return track;
+      });
+
+      const updatedPlaylist = {
+        ...playlist,
+        tracks: updatedTracks
+      } as Playlist;
 
-  const onAddAll = useCallback(() => addTracks(playlist.tracks),
-    [addTracks, playlist]);
+      updatePlaylist(updatedPlaylist);
+    },
+    [playlist, updatePlaylist]
+  );
+
+  const onAddAll = useCallback(
+    () => addTracks(playlist.tracks),
+    [addTracks, playlist]
+  );
 
   const onPlayAll = useCallback(() => {
     clearQueue();
@@ -64,13 +97,16 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
   }, [addTracks, clearQueue, playlist, selectSong, startPlayback]);
 
   const onDeleteTrack = !isExternal
-    ? useCallback((trackToRemove: Track, trackIndex: number) => {
-      const newPlaylist = {
-        ...playlist,
-        tracks: playlist.tracks.filter((_, index) => index !== trackIndex)
-      };
-      updatePlaylist(newPlaylist);
-    }, [playlist, updatePlaylist])
+    ? useCallback(
+      (trackToRemove: Track, trackIndex: number) => {
+        const newPlaylist = {
+          ...playlist,
+          tracks: playlist.tracks.filter((_, index) => index !== trackIndex)
+        };
+        updatePlaylist(newPlaylist);
+      },
+      [playlist, updatePlaylist]
+    )
     : undefined;
 
   const onDeletePlaylist = useCallback(() => {
@@ -94,27 +130,30 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
   }, [exportPlaylist, playlist, t]);
 
   return (
-    <div 
-      data-testid='playlist-view'
-      className={styles.playlist_view_container}
-    >
+    <div data-testid='playlist-view' className={styles.playlist_view_container}>
       <div className={styles.playlist}>
         <div className={styles.playlist_view_info}>
           <div>
             <img
               className={styles.playlist_thumbnail}
-              src={playlist?.tracks?.[0]?.thumbnail ?? artPlaceholder as unknown as string}
+              src={
+                playlist?.tracks?.[0]?.thumbnail ??
+                (artPlaceholder as unknown as string)
+              }
             />
           </div>
           <div className={styles.playlist_header}>
-            {
-              isExternal &&
+            {isExternal && (
               <div className={styles.playlist_header_external_source}>
                 <Tooltip
                   on='hover'
-                  content={t('external-source-tooltip', { source: externalSourceName })}
+                  content={t('external-source-tooltip', {
+                    source: externalSourceName
+                  })}
                   trigger={
-                    <div className={styles.playlist_header_external_source_inner}>
+                    <div
+                      className={styles.playlist_header_external_source_inner}
+                    >
                       <Icon name='external square' />
                       {externalSourceName}
                     </div>
@@ -122,9 +161,11 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
                   position='bottom center'
                 />
               </div>
-            }
+            )}
             <div className={styles.playlist_header_inner}>
-              <label className={styles.playlist_header_label}>{t('playlist')}</label>
+              <label className={styles.playlist_header_label}>
+                {t('playlist')}
+              </label>
               <div className={styles.playlist_name}>
                 {playlist.name}
                 <InputDialog
@@ -135,13 +176,14 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
                   initialString={playlist.name}
                   onAccept={onRenamePlaylist}
                   trigger={
-                    !isExternal &&
-                    <Button
-                      basic
-                      aria-label={t('rename')}
-                      icon='pencil'
-                      data-testid='rename-button'
-                    />
+                    !isExternal && (
+                      <Button
+                        basic
+                        aria-label={t('rename')}
+                        icon='pencil'
+                        data-testid='rename-button'
+                      />
+                    )
                   }
                 />
               </div>
@@ -149,18 +191,18 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
                 <span>
                   {`${playlist.tracks.length} ${t('number-of-tracks')}`}
                 </span>
-                {
-                  playlist.lastModified &&
+                {playlist.lastModified && (
                   <>
-                    <span>
-                      ·
-                    </span>
+                    <span>·</span>
 
                     <span>
-                      {`${t('modified-at')}${timestampToTimeString(playlist.lastModified, i18n.language)}`}
+                      {`${t('modified-at')}${timestampToTimeString(
+                        playlist.lastModified,
+                        i18n.language
+                      )}`}
                     </span>
                   </>
-                }
+                )}
               </div>
               <div className={styles.playlist_buttons}>
                 <Button
@@ -185,7 +227,10 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
                   }
                   artist={null}
                   title={playlist.name}
-                  thumb={playlist?.tracks?.[0]?.thumbnail ?? artPlaceholder as unknown as string}
+                  thumb={
+                    playlist?.tracks?.[0]?.thumbnail ??
+                    (artPlaceholder as unknown as string)
+                  }
                 >
                   <PopupButton
                     onClick={onAddAll}
@@ -193,24 +238,22 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
                     icon='plus'
                     label={t('queue')}
                   />
-                  {
-                    !isExternal &&
+                  {!isExternal && (
                     <PopupButton
                       onClick={onDeletePlaylist}
                       ariaLabel={t('delete')}
                       icon='trash'
                       label={t('delete')}
                     />
-                  }
-                  {
-                    isExternal &&
+                  )}
+                  {isExternal && (
                     <PopupButton
                       onClick={onSaveExternalPlaylist}
                       ariaLabel={t('save-external-playlist')}
                       icon='save'
                       label={t('save-external-playlist')}
                     />
-                  }
+                  )}
                   <PopupButton
                     onClick={onExportPlaylist}
                     ariaLabel={t('export-button')}
@@ -228,6 +271,7 @@ const PlaylistView: React.FC<PlaylistViewProps> = ({
           onReorder={!isExternal && onReorderTracks}
           displayAlbum={false}
           displayDeleteButton={!isExternal}
+          onTrackUpdate={!isExternal ? onUpdateTrack : undefined}
           searchable
         />
       </div>
diff --git a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
index e3d17fecb1..626465eb94 100644
--- a/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/AlbumViewContainer/__snapshots__/AlbumViewContainer.test.tsx.snap
@@ -294,40 +294,44 @@ exports[`Album view container should display an album 1`] = `
                       </div>
                       <div
                         class="grid_track_table_cell text_cell title_cell"
-                        data-testid="title-cell"
-                        role="cell"
                       >
-                        <span
-                          class="title_cell_content"
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
                         >
                           <span
-                            class="title_cell_value"
-                          >
-                            test track 1
-                          </span>
-                          <span
-                            class="title_cell_buttons"
+                            class="title_cell_content"
                           >
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="add-to-queue"
+                            <span
+                              class="title_cell_value"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="plus icon"
-                              />
-                            </button>
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="track-popup-trigger"
+                              test track 1
+                            </span>
+                            <span
+                              class="title_cell_buttons"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="ellipsis horizontal icon"
-                              />
-                            </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
                           </span>
-                        </span>
+                        </div>
                       </div>
                       <div
                         class="grid_track_table_cell text_cell"
@@ -401,40 +405,44 @@ exports[`Album view container should display an album 1`] = `
                       </div>
                       <div
                         class="grid_track_table_cell text_cell title_cell"
-                        data-testid="title-cell"
-                        role="cell"
                       >
-                        <span
-                          class="title_cell_content"
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
                         >
                           <span
-                            class="title_cell_value"
-                          >
-                            test track 2
-                          </span>
-                          <span
-                            class="title_cell_buttons"
+                            class="title_cell_content"
                           >
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="add-to-queue"
+                            <span
+                              class="title_cell_value"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="plus icon"
-                              />
-                            </button>
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="track-popup-trigger"
+                              test track 2
+                            </span>
+                            <span
+                              class="title_cell_buttons"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="ellipsis horizontal icon"
-                              />
-                            </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
                           </span>
-                        </span>
+                        </div>
                       </div>
                       <div
                         class="grid_track_table_cell text_cell"
@@ -508,40 +516,44 @@ exports[`Album view container should display an album 1`] = `
                       </div>
                       <div
                         class="grid_track_table_cell text_cell title_cell"
-                        data-testid="title-cell"
-                        role="cell"
                       >
-                        <span
-                          class="title_cell_content"
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
                         >
                           <span
-                            class="title_cell_value"
-                          >
-                            test track 3
-                          </span>
-                          <span
-                            class="title_cell_buttons"
+                            class="title_cell_content"
                           >
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="add-to-queue"
+                            <span
+                              class="title_cell_value"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="plus icon"
-                              />
-                            </button>
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="track-popup-trigger"
+                              test track 3
+                            </span>
+                            <span
+                              class="title_cell_buttons"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="ellipsis horizontal icon"
-                              />
-                            </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
                           </span>
-                        </span>
+                        </div>
                       </div>
                       <div
                         class="grid_track_table_cell text_cell"
diff --git a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
index 44fb3e8f53..912e08b0a4 100644
--- a/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/ArtistViewContainer/__snapshots__/ArtistViewContainer.test.tsx.snap
@@ -264,40 +264,44 @@ exports[`Artist view container should display an artist 1`] = `
                           </div>
                           <div
                             class="grid_track_table_cell text_cell title_cell"
-                            data-testid="title-cell"
-                            role="cell"
                           >
-                            <span
-                              class="title_cell_content"
+                            <div
+                              class="grid_track_table_cell text_cell title_cell"
+                              data-testid="title-cell"
+                              role="cell"
                             >
                               <span
-                                class="title_cell_value"
-                              >
-                                test artist top track 1
-                              </span>
-                              <span
-                                class="title_cell_buttons"
+                                class="title_cell_content"
                               >
-                                <button
-                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                  data-testid="add-to-queue"
+                                <span
+                                  class="title_cell_value"
                                 >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                </button>
-                                <button
-                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                  data-testid="track-popup-trigger"
+                                  test artist top track 1
+                                </span>
+                                <span
+                                  class="title_cell_buttons"
                                 >
-                                  <i
-                                    aria-hidden="true"
-                                    class="ellipsis horizontal icon"
-                                  />
-                                </button>
+                                  <button
+                                    class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                    data-testid="add-to-queue"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="plus icon"
+                                    />
+                                  </button>
+                                  <button
+                                    class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                    data-testid="track-popup-trigger"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ellipsis horizontal icon"
+                                    />
+                                  </button>
+                                </span>
                               </span>
-                            </span>
+                            </div>
                           </div>
                           <div
                             class="grid_track_table_cell text_cell"
@@ -355,40 +359,44 @@ exports[`Artist view container should display an artist 1`] = `
                           </div>
                           <div
                             class="grid_track_table_cell text_cell title_cell"
-                            data-testid="title-cell"
-                            role="cell"
                           >
-                            <span
-                              class="title_cell_content"
+                            <div
+                              class="grid_track_table_cell text_cell title_cell"
+                              data-testid="title-cell"
+                              role="cell"
                             >
                               <span
-                                class="title_cell_value"
-                              >
-                                test artist top track 2
-                              </span>
-                              <span
-                                class="title_cell_buttons"
+                                class="title_cell_content"
                               >
-                                <button
-                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                  data-testid="add-to-queue"
+                                <span
+                                  class="title_cell_value"
                                 >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                </button>
-                                <button
-                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                  data-testid="track-popup-trigger"
+                                  test artist top track 2
+                                </span>
+                                <span
+                                  class="title_cell_buttons"
                                 >
-                                  <i
-                                    aria-hidden="true"
-                                    class="ellipsis horizontal icon"
-                                  />
-                                </button>
+                                  <button
+                                    class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                    data-testid="add-to-queue"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="plus icon"
+                                    />
+                                  </button>
+                                  <button
+                                    class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                    data-testid="track-popup-trigger"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ellipsis horizontal icon"
+                                    />
+                                  </button>
+                                </span>
                               </span>
-                            </span>
+                            </div>
                           </div>
                           <div
                             class="grid_track_table_cell text_cell"
@@ -446,40 +454,44 @@ exports[`Artist view container should display an artist 1`] = `
                           </div>
                           <div
                             class="grid_track_table_cell text_cell title_cell"
-                            data-testid="title-cell"
-                            role="cell"
                           >
-                            <span
-                              class="title_cell_content"
+                            <div
+                              class="grid_track_table_cell text_cell title_cell"
+                              data-testid="title-cell"
+                              role="cell"
                             >
                               <span
-                                class="title_cell_value"
+                                class="title_cell_content"
                               >
-                                test artist top track 3
-                              </span>
-                              <span
-                                class="title_cell_buttons"
-                              >
-                                <button
-                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                  data-testid="add-to-queue"
+                                <span
+                                  class="title_cell_value"
                                 >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                </button>
-                                <button
-                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                  data-testid="track-popup-trigger"
+                                  test artist top track 3
+                                </span>
+                                <span
+                                  class="title_cell_buttons"
                                 >
-                                  <i
-                                    aria-hidden="true"
-                                    class="ellipsis horizontal icon"
-                                  />
-                                </button>
+                                  <button
+                                    class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                    data-testid="add-to-queue"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="plus icon"
+                                    />
+                                  </button>
+                                  <button
+                                    class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                    data-testid="track-popup-trigger"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ellipsis horizontal icon"
+                                    />
+                                  </button>
+                                </span>
                               </span>
-                            </span>
+                            </div>
                           </div>
                           <div
                             class="grid_track_table_cell text_cell"
diff --git a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
index 2a74d9665a..2f9d1cf1eb 100644
--- a/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
+++ b/packages/app/app/containers/DashboardContainer/__snapshots__/DashboardContainer.test.tsx.snap
@@ -770,44 +770,47 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         </div>
                         <div
                           class="grid_track_table_cell text_cell title_cell"
-                          data-testid="title-cell"
-                          role="cell"
                         >
-                          <span
-                            class="title_cell_content"
+                          <div
+                            class="grid_track_table_cell text_cell title_cell"
+                            data-testid="title-cell"
+                            role="cell"
                           >
                             <span
-                              class="title_cell_value"
+                              class="title_cell_content"
                             >
-                              top track 1
-                            </span>
-                            <span
-                              class="title_cell_buttons"
-                            >
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="add-to-queue"
+                              <span
+                                class="title_cell_value"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="plus icon"
-                                />
-                              </button>
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="track-popup-trigger"
+                                top track 1
+                              </span>
+                              <span
+                                class="title_cell_buttons"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="ellipsis horizontal icon"
-                                />
-                              </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="add-to-queue"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="plus icon"
+                                  />
+                                </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="track-popup-trigger"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="ellipsis horizontal icon"
+                                  />
+                                </button>
+                              </span>
                             </span>
-                          </span>
+                          </div>
                         </div>
                         <div
                           class="grid_track_table_cell text_cell"
-                          role="cell"
                         >
                           top track artist 1
                         </div>
@@ -887,44 +890,47 @@ exports[`Dashboard container should display top tracks after going to top tracks
                         </div>
                         <div
                           class="grid_track_table_cell text_cell title_cell"
-                          data-testid="title-cell"
-                          role="cell"
                         >
-                          <span
-                            class="title_cell_content"
+                          <div
+                            class="grid_track_table_cell text_cell title_cell"
+                            data-testid="title-cell"
+                            role="cell"
                           >
                             <span
-                              class="title_cell_value"
+                              class="title_cell_content"
                             >
-                              top track 2
-                            </span>
-                            <span
-                              class="title_cell_buttons"
-                            >
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="add-to-queue"
+                              <span
+                                class="title_cell_value"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="plus icon"
-                                />
-                              </button>
-                              <button
-                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                                data-testid="track-popup-trigger"
+                                top track 2
+                              </span>
+                              <span
+                                class="title_cell_buttons"
                               >
-                                <i
-                                  aria-hidden="true"
-                                  class="ellipsis horizontal icon"
-                                />
-                              </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="add-to-queue"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="plus icon"
+                                  />
+                                </button>
+                                <button
+                                  class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                  data-testid="track-popup-trigger"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="ellipsis horizontal icon"
+                                  />
+                                </button>
+                              </span>
                             </span>
-                          </span>
+                          </div>
                         </div>
                         <div
                           class="grid_track_table_cell text_cell"
-                          role="cell"
                         >
                           top track artist 2
                         </div>
diff --git a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
index e904158232..853c102b3b 100644
--- a/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/DeezerPlaylistAdapter/__snapshots__/DeezerPlaylistAdapter.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
               />
             </div>
             <button
-              class="ui blue icon button nuclear button borderless track_table_filter_button"
+              class="ui blue icon button track_table_filter_button"
             >
               <i
                 aria-hidden="true"
@@ -300,44 +300,47 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     </div>
                     <div
                       class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          track 1
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            track 1
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       artist 1
                     </div>
@@ -411,44 +414,47 @@ exports[`Deezer playlist adapter should display a Deezer playlist 1`] = `
                     </div>
                     <div
                       class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          track 2
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            track 2
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       artist 2
                     </div>
diff --git a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
index 94f4eefaee..8a43c1d043 100644
--- a/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
+++ b/packages/app/app/containers/FavoritesContainer/__snapshots__/FavoritesContainer.tracks.test.tsx.snap
@@ -211,7 +211,7 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
               />
             </div>
             <button
-              class="ui blue icon button nuclear button borderless track_table_filter_button"
+              class="ui blue icon button track_table_filter_button"
             >
               <i
                 aria-hidden="true"
@@ -395,44 +395,47 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     />
                     <div
                       class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          test track 2
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            test track 2
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       test artist 2
                     </div>
@@ -506,44 +509,47 @@ exports[`Favorite tracks view container should display favorite tracks 1`] = `
                     />
                     <div
                       class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          test track 1
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            test track 1
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       test artist 1
                     </div>
@@ -766,7 +772,7 @@ exports[`Favorite tracks view container should show a popup when a track is clic
               />
             </div>
             <button
-              class="ui blue icon button nuclear button borderless track_table_filter_button"
+              class="ui blue icon button track_table_filter_button"
             >
               <i
                 aria-hidden="true"
@@ -950,44 +956,47 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     />
                     <div
                       class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          test track 2
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            test track 2
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       test artist 2
                     </div>
@@ -1061,44 +1070,47 @@ exports[`Favorite tracks view container should show a popup when a track is clic
                     />
                     <div
                       class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          test track 1
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            test track 1
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       test artist 1
                     </div>
diff --git a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
index 183bfd3c3b..27c8739641 100644
--- a/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap
@@ -1022,44 +1022,47 @@ exports[`Library view container should display local library in simple list mode
                       />
                       <div
                         class="grid_track_table_cell text_cell title_cell"
-                        data-testid="title-cell"
-                        role="cell"
                       >
-                        <span
-                          class="title_cell_content"
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
                         >
                           <span
-                            class="title_cell_value"
+                            class="title_cell_content"
                           >
-                            local track 1
-                          </span>
-                          <span
-                            class="title_cell_buttons"
-                          >
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="add-to-queue"
+                            <span
+                              class="title_cell_value"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="plus icon"
-                              />
-                            </button>
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="track-popup-trigger"
+                              local track 1
+                            </span>
+                            <span
+                              class="title_cell_buttons"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="ellipsis horizontal icon"
-                              />
-                            </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
                           </span>
-                        </span>
+                        </div>
                       </div>
                       <div
                         class="grid_track_table_cell text_cell"
-                        role="cell"
                       >
                         local artist 1
                       </div>
@@ -1130,44 +1133,47 @@ exports[`Library view container should display local library in simple list mode
                       />
                       <div
                         class="grid_track_table_cell text_cell title_cell"
-                        data-testid="title-cell"
-                        role="cell"
                       >
-                        <span
-                          class="title_cell_content"
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
                         >
                           <span
-                            class="title_cell_value"
+                            class="title_cell_content"
                           >
-                            local track 2
-                          </span>
-                          <span
-                            class="title_cell_buttons"
-                          >
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="add-to-queue"
+                            <span
+                              class="title_cell_value"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="plus icon"
-                              />
-                            </button>
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="track-popup-trigger"
+                              local track 2
+                            </span>
+                            <span
+                              class="title_cell_buttons"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="ellipsis horizontal icon"
-                              />
-                            </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
                           </span>
-                        </span>
+                        </div>
                       </div>
                       <div
                         class="grid_track_table_cell text_cell"
-                        role="cell"
                       >
                         local artist 1
                       </div>
@@ -1238,44 +1244,47 @@ exports[`Library view container should display local library in simple list mode
                       />
                       <div
                         class="grid_track_table_cell text_cell title_cell"
-                        data-testid="title-cell"
-                        role="cell"
                       >
-                        <span
-                          class="title_cell_content"
+                        <div
+                          class="grid_track_table_cell text_cell title_cell"
+                          data-testid="title-cell"
+                          role="cell"
                         >
                           <span
-                            class="title_cell_value"
+                            class="title_cell_content"
                           >
-                            local track 3
-                          </span>
-                          <span
-                            class="title_cell_buttons"
-                          >
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="add-to-queue"
+                            <span
+                              class="title_cell_value"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="plus icon"
-                              />
-                            </button>
-                            <button
-                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                              data-testid="track-popup-trigger"
+                              local track 3
+                            </span>
+                            <span
+                              class="title_cell_buttons"
                             >
-                              <i
-                                aria-hidden="true"
-                                class="ellipsis horizontal icon"
-                              />
-                            </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="add-to-queue"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="plus icon"
+                                />
+                              </button>
+                              <button
+                                class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                                data-testid="track-popup-trigger"
+                              >
+                                <i
+                                  aria-hidden="true"
+                                  class="ellipsis horizontal icon"
+                                />
+                              </button>
+                            </span>
                           </span>
-                        </span>
+                        </div>
                       </div>
                       <div
                         class="grid_track_table_cell text_cell"
-                        role="cell"
                       >
                         local artist 2
                       </div>
diff --git a/packages/app/app/containers/PlaylistViewContainer/PlaylistViewContainer.test.tsx b/packages/app/app/containers/PlaylistViewContainer/PlaylistViewContainer.test.tsx
index 47b12774ce..c16b9fd025 100644
--- a/packages/app/app/containers/PlaylistViewContainer/PlaylistViewContainer.test.tsx
+++ b/packages/app/app/containers/PlaylistViewContainer/PlaylistViewContainer.test.tsx
@@ -1,12 +1,27 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { fireEvent, prettyDOM, render, waitFor, within } from '@testing-library/react';
+import {
+  fireEvent,
+  prettyDOM,
+  render,
+  waitFor,
+  within
+} from '@testing-library/react';
 import React from 'react';
 import { createMemoryHistory } from 'history';
 import { store as electronStore } from '@nuclear/core';
 
-import { buildElectronStoreState, buildStoreState } from '../../../test/storeBuilders';
-import { AnyProps, configureMockStore, setupI18Next, TestRouterProvider, TestStoreProvider } from '../../../test/testUtils';
+import {
+  buildElectronStoreState,
+  buildStoreState
+} from '../../../test/storeBuilders';
+import {
+  AnyProps,
+  configureMockStore,
+  setupI18Next,
+  TestRouterProvider,
+  TestStoreProvider
+} from '../../../test/testUtils';
 import MainContentContainer from '../MainContentContainer';
 import { onReorder } from '.';
 import userEvent from '@testing-library/user-event';
@@ -89,13 +104,11 @@ describe('Playlist view container', () => {
     // check if the dialog was open
     expect(remote.dialog.showSaveDialog).toHaveBeenCalledWith({
       defaultPath: playlist.name,
-      filters: [
-        { name: 'file', extensions: ['json'] }
-      ],
+      filters: [{ name: 'file', extensions: ['json'] }],
       properties: ['createDirectory', 'showOverwriteConfirmation']
     });
     expect(remote.dialog.showSaveDialog).toHaveBeenCalledTimes(1);
-    // check if the playlist was properly exported 
+    // check if the playlist was properly exported
     expect(fs.writeFile).toHaveBeenCalledWith(
       'downloaded_playlist',
       JSON.stringify(playlist, null, 2),
@@ -115,7 +128,7 @@ describe('Playlist view container', () => {
   });
 
   it('should update the last modified date when the playlist is modified', async () => {
-    Date.now = jest.fn(() => (new Date('2021-01-01').valueOf()));
+    Date.now = jest.fn(() => new Date('2021-01-01').valueOf());
     const { component, store } = mountComponent();
     await waitFor(() => component.getByTestId('rename-button').click());
     const input = component.getByPlaceholderText('Playlist name...');
@@ -123,7 +136,9 @@ describe('Playlist view container', () => {
     await waitFor(() => component.getByText(/rename/i).click());
 
     const state = store.getState();
-    expect(state.playlists.localPlaylists.data[0].lastModified).toEqual(new Date('2021-01-01').valueOf());
+    expect(state.playlists.localPlaylists.data[0].lastModified).toEqual(
+      new Date('2021-01-01').valueOf()
+    );
   });
 
   it('should add a single track to the queue', async () => {
@@ -155,7 +170,9 @@ describe('Playlist view container', () => {
 
   it('should add a single track to favorites', async () => {
     const { component, store } = mountComponent();
-    await waitFor(() => component.getAllByTestId('track-popup-trigger')[1].click());
+    await waitFor(() =>
+      component.getAllByTestId('track-popup-trigger')[1].click()
+    );
     await waitFor(() => component.getByText(/add to favorites/i).click());
 
     const state = store.getState();
@@ -169,7 +186,9 @@ describe('Playlist view container', () => {
 
   it('should add a single track to downloads', async () => {
     const { component, store } = mountComponent();
-    await waitFor(() => component.getAllByTestId('track-popup-trigger')[1].click());
+    await waitFor(() =>
+      component.getAllByTestId('track-popup-trigger')[1].click()
+    );
     await waitFor(() => component.getByText(/download/i).click());
 
     const state = store.getState();
@@ -200,7 +219,7 @@ describe('Playlist view container', () => {
   });
 
   it.each([
-    { query: 'test track 22', by: 'track title' }, 
+    { query: 'test track 22', by: 'track title' },
     { query: 'test artist 2', by: 'artist' }
   ])('should filter displayed tracks by $by', async ({ query }) => {
     const { component } = mountComponent();
@@ -217,26 +236,33 @@ describe('Playlist view container', () => {
   it('should delete a single track from the playlist when there are its duplicates', async () => {
     const initialStore = buildStoreState()
       .withPlugins()
-      .withPlaylists([{
-        id: 'test-playlist-id',
-        name: 'test playlist',
-        lastModified: 1000198000000,
-        tracks: [{
-          uuid: 'test-track-uuid-1',
-          artist: 'test artist 1',
-          name: 'test track 1',
-          stream: undefined
-        }, {
-          uuid: 'test-track-uuid-1',
-          artist: 'test artist 1',
-          name: 'test track 1',
-          stream: undefined
-        }, {
-          uuid: 'test-track-uuid-3',
-          artist: 'test artist 2',
-          name: 'test track 2',
-          stream: undefined
-        }]}])
+      .withPlaylists([
+        {
+          id: 'test-playlist-id',
+          name: 'test playlist',
+          lastModified: 1000198000000,
+          tracks: [
+            {
+              uuid: 'test-track-uuid-1',
+              artist: 'test artist 1',
+              name: 'test track 1',
+              stream: undefined
+            },
+            {
+              uuid: 'test-track-uuid-1',
+              artist: 'test artist 1',
+              name: 'test track 1',
+              stream: undefined
+            },
+            {
+              uuid: 'test-track-uuid-3',
+              artist: 'test artist 2',
+              name: 'test track 2',
+              stream: undefined
+            }
+          ]
+        }
+      ])
       .withConnectivity()
       .build();
     const { component, store } = mountComponent(initialStore);
@@ -259,7 +285,8 @@ describe('Playlist view container', () => {
   });
 
   const mountComponent = (initialStore?: AnyProps, initStore = true) => {
-    const initialState = initialStore ||
+    const initialState =
+      initialStore ||
       buildStoreState()
         .withPlugins()
         .withPlaylists()
@@ -267,10 +294,12 @@ describe('Playlist view container', () => {
         .build();
 
     // @ts-ignore
-    initStore && electronStore.init({
-      ...buildElectronStoreState(),
-      playlists: initialState.playlists.localPlaylists.data
-    });
+    if (initStore) {
+      electronStore.set({
+        ...buildElectronStoreState(),
+        playlists: initialState.playlists.localPlaylists.data
+      });
+    }
 
     const history = createMemoryHistory({
       initialEntries: ['/playlist/test-playlist-id']
@@ -279,15 +308,11 @@ describe('Playlist view container', () => {
     const store = configureMockStore(initialState);
 
     const component = render(
-      <TestRouterProvider
-        history={history}
-      >
-        <TestStoreProvider
-          store={store}
-        >
+      <TestRouterProvider history={history}>
+        <TestStoreProvider store={store}>
           <MainContentContainer />
         </TestStoreProvider>
-      </TestRouterProvider >
+      </TestRouterProvider>
     );
 
     return { component, history, store };
@@ -300,7 +325,7 @@ describe('Playlist view container - utils', () => {
   };
 
   let newPlaylist = {};
-  const updatePlaylist = playlistState => {
+  const updatePlaylist = (playlistState) => {
     newPlaylist = playlistState;
   };
 
@@ -313,7 +338,7 @@ describe('Playlist view container - utils', () => {
     };
     reorder = onReorder(playlist, updatePlaylist);
   });
-  
+
   it('should reorder tracks correctly (1)', () => {
     reorder(0, 2);
     expect(newPlaylist).toEqual({
@@ -335,3 +360,130 @@ describe('Playlist view container - utils', () => {
     });
   });
 });
+
+describe('Playlist editable fields', () => {
+  const mountComponent = (initialStore?: AnyProps, initStore = true) => {
+    const initialState =
+      initialStore ||
+      buildStoreState()
+        .withPlugins()
+        .withPlaylists([
+          {
+            id: 'test-playlist-id',
+            name: 'Test Playlist',
+            tracks: [
+              {
+                uuid: '1',
+                name: 'test track',
+                artist: 'test artist 1',
+                stream: undefined
+              },
+              {
+                uuid: '2',
+                name: 'test track 22',
+                artist: 'test artist 2',
+                stream: undefined
+              }
+            ]
+          }
+        ])
+        .withConnectivity()
+        .build();
+
+    if (initStore) {
+      electronStore.set({
+        ...buildElectronStoreState(),
+        playlists: initialState.playlists.localPlaylists.data
+      });
+    }
+
+    const history = createMemoryHistory({
+      initialEntries: ['/playlist/test-playlist-id']
+    });
+
+    const store = configureMockStore(initialState);
+
+    const component = render(
+      <TestRouterProvider history={history}>
+        <TestStoreProvider store={store}>
+          <MainContentContainer />
+        </TestStoreProvider>
+      </TestRouterProvider>
+    );
+
+    return { component, history, store };
+  };
+
+  it('should allow editing track title via double click', async () => {
+    const { component, store } = mountComponent();
+    const titleCell = await component.findByText('test track');
+
+    userEvent.dblClick(titleCell);
+    const input = await component.findByDisplayValue('test track');
+    expect(input).toBeInTheDocument();
+
+    userEvent.clear(input);
+    userEvent.type(input, 'new track title');
+    userEvent.keyboard('{Enter}');
+
+    expect(component.getByText('new track title')).toBeInTheDocument();
+    const state = store.getState();
+    expect(state.playlists.localPlaylists.data[0].tracks[0].name).toBe(
+      'new track title'
+    );
+  });
+
+  it('should allow editing artist via double click', async () => {
+    const { component, store } = mountComponent();
+    const artistCell = await component.findByText('test artist 1');
+
+    userEvent.dblClick(artistCell);
+    const input = await component.findByDisplayValue('test artist 1');
+    expect(input).toBeInTheDocument();
+
+    userEvent.clear(input);
+    userEvent.type(input, 'new artist name');
+    userEvent.keyboard('{Enter}');
+
+    expect(component.getByText('new artist name')).toBeInTheDocument();
+    const state = store.getState();
+    expect(state.playlists.localPlaylists.data[0].tracks[0].artist).toBe(
+      'new artist name'
+    );
+  });
+
+  it('should discard changes when pressing Escape', async () => {
+    const { component, store } = mountComponent();
+    const initialState = store.getState();
+    const titleCell = await component.findByText('test track');
+
+    userEvent.dblClick(titleCell);
+    const input = await component.findByDisplayValue('test track');
+    userEvent.clear(input);
+    userEvent.type(input, 'discarded title');
+    userEvent.keyboard('{Escape}');
+
+    expect(component.getByText('test track')).toBeInTheDocument();
+    expect(component.queryByText('discarded title')).not.toBeInTheDocument();
+    const finalState = store.getState();
+    expect(finalState.playlists.localPlaylists.data[0].tracks[0]).toEqual(
+      initialState.playlists.localPlaylists.data[0].tracks[0]
+    );
+  });
+
+  it('should keep track order when editing fields', async () => {
+    const { component, store } = mountComponent();
+    const titleCell = await component.findByText('test track');
+
+    userEvent.dblClick(titleCell);
+    const input = await component.findByDisplayValue('test track');
+    userEvent.clear(input);
+    userEvent.type(input, 'new track title');
+    userEvent.keyboard('{Enter}');
+
+    const state = store.getState();
+    const playlist = state.playlists.localPlaylists.data[0];
+    expect(playlist.tracks[0].name).toBe('new track title');
+    expect(playlist.tracks[1].name).toBe('test track 22');
+  });
+});
diff --git a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
index f18beda0d3..a7af1b2b50 100644
--- a/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
+++ b/packages/app/app/containers/PlaylistViewContainer/__snapshots__/PlaylistViewContainer.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`Playlist view container should display a playlist 1`] = `
               />
             </div>
             <button
-              class="ui blue icon button nuclear button borderless track_table_filter_button"
+              class="ui blue icon button track_table_filter_button"
             >
               <i
                 aria-hidden="true"
@@ -312,46 +312,47 @@ exports[`Playlist view container should display a playlist 1`] = `
                         />
                       </button>
                     </div>
-                    <div
-                      class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
-                    >
-                      <span
-                        class="title_cell_content"
+                    <div>
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          test track
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            test track
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       test artist 1
                     </div>
@@ -442,46 +443,47 @@ exports[`Playlist view container should display a playlist 1`] = `
                         />
                       </button>
                     </div>
-                    <div
-                      class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
-                    >
-                      <span
-                        class="title_cell_content"
+                    <div>
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          test track 22
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            test track 22
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       test artist 2
                     </div>
diff --git a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
index 35343f310d..c1f11d9fda 100644
--- a/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
+++ b/packages/app/app/containers/SpotifyPlaylistAdapter/__snapshots__/SpotifyPlaylistAdapter.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
               />
             </div>
             <button
-              class="ui blue icon button nuclear button borderless track_table_filter_button"
+              class="ui blue icon button track_table_filter_button"
             >
               <i
                 aria-hidden="true"
@@ -313,44 +313,47 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     </div>
                     <div
                       class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          Test track
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            Test track
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       Test artist
                     </div>
@@ -430,44 +433,47 @@ exports[`Spotfiy playlist adapter should display a Spotify playlist 1`] = `
                     </div>
                     <div
                       class="grid_track_table_cell text_cell title_cell"
-                      data-testid="title-cell"
-                      role="cell"
                     >
-                      <span
-                        class="title_cell_content"
+                      <div
+                        class="grid_track_table_cell text_cell title_cell"
+                        data-testid="title-cell"
+                        role="cell"
                       >
                         <span
-                          class="title_cell_value"
+                          class="title_cell_content"
                         >
-                          Another test track
-                        </span>
-                        <span
-                          class="title_cell_buttons"
-                        >
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="add-to-queue"
+                          <span
+                            class="title_cell_value"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="plus icon"
-                            />
-                          </button>
-                          <button
-                            class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
-                            data-testid="track-popup-trigger"
+                            Another test track
+                          </span>
+                          <span
+                            class="title_cell_buttons"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="ellipsis horizontal icon"
-                            />
-                          </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="add-to-queue"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="plus icon"
+                              />
+                            </button>
+                            <button
+                              class="ui tiny basic circular icon button nuclear button borderless title_cell_button"
+                              data-testid="track-popup-trigger"
+                            >
+                              <i
+                                aria-hidden="true"
+                                class="ellipsis horizontal icon"
+                              />
+                            </button>
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                     <div
                       class="grid_track_table_cell text_cell"
-                      role="cell"
                     >
                       Another test artist
                     </div>
diff --git a/packages/app/app/containers/TrackTableContainer/index.tsx b/packages/app/app/containers/TrackTableContainer/index.tsx
index cdfacc2b07..83c724c6f9 100644
--- a/packages/app/app/containers/TrackTableContainer/index.tsx
+++ b/packages/app/app/containers/TrackTableContainer/index.tsx
@@ -22,6 +22,7 @@ import { safeAddUuid } from '../../actions/helpers';
 export type TrackTableContainerProps<T extends Track> = TrackTableSettings & {
   tracks: TrackTableProps<T>['tracks'];
   onDelete?: TrackTableProps<T>['onDelete'];
+  onTrackUpdate?: (index: number, updatedTrack: Track) => void;
   onReorder?: (indexSource: number, indexDest: number) => void;
   TrackTableComponent?: React.ComponentType<TrackTableProps<T>>;
   customColumns?: TrackTableProps<T>['customColumns'];
@@ -29,7 +30,7 @@ export type TrackTableContainerProps<T extends Track> = TrackTableSettings & {
   displayAddToFavorites?: boolean;
 };
 
-function TrackTableContainer<T extends Track> ({
+function TrackTableContainer<T extends Track>({
   tracks,
   onDelete,
   onReorder,
@@ -48,55 +49,79 @@ function TrackTableContainer<T extends Track> ({
     dispatch(favoritesActions.readFavorites());
   }, [dispatch]);
 
-  const isTrackFavorite = (track: Track) => !_.isNil(favoriteTracks.find(t => areTracksEqualByName(t, track)));
+  const isTrackFavorite = (track: Track) =>
+    !_.isNil(favoriteTracks.find((t) => areTracksEqualByName(t, track)));
 
-  const onAddToQueue = useCallback((track: Track) => {
-    dispatch(queueActions.addToQueue(queueActions.toQueueItem(track)));
-  }, [dispatch]);
+  const onAddToQueue = useCallback(
+    (track: Track) => {
+      dispatch(queueActions.addToQueue(queueActions.toQueueItem(track)));
+    },
+    [dispatch]
+  );
 
-  const onPlayNow = useCallback((track: Track) => {
-    dispatch(queueActions.playTrack(null, queueActions.toQueueItem(track)));
-  }, [dispatch]);
+  const onPlayNow = useCallback(
+    (track: Track) => {
+      dispatch(queueActions.playTrack(null, queueActions.toQueueItem(track)));
+    },
+    [dispatch]
+  );
 
-  const onPlayNext = useCallback((track: Track) => {
-    dispatch(queueActions.playNext(queueActions.toQueueItem(track)));
-  }, [dispatch]);
+  const onPlayNext = useCallback(
+    (track: Track) => {
+      dispatch(queueActions.playNext(queueActions.toQueueItem(track)));
+    },
+    [dispatch]
+  );
 
-  const onPlayAll = useCallback((tracks: Track[]) => {
-    dispatch(queueActions.clearQueue());
-    dispatch(queueActions.addPlaylistTracksToQueue(tracks));
-    dispatch(queueActions.selectSong(0));
-    dispatch(playerActions.startPlayback(false));
-  }, [dispatch]);
+  const onPlayAll = useCallback(
+    (tracks: Track[]) => {
+      dispatch(queueActions.clearQueue());
+      dispatch(queueActions.addPlaylistTracksToQueue(tracks));
+      dispatch(queueActions.selectSong(0));
+      dispatch(playerActions.startPlayback(false));
+    },
+    [dispatch]
+  );
 
-  const onAddToFavorites = useCallback((track: Track) => {
-    dispatch(favoritesActions.addFavoriteTrack(track));
-  }, [dispatch]);
+  const onAddToFavorites = useCallback(
+    (track: Track) => {
+      dispatch(favoritesActions.addFavoriteTrack(track));
+    },
+    [dispatch]
+  );
 
-  const onRemoveFromFavorites = useCallback((track: Track) => {
-    dispatch(favoritesActions.removeFavoriteTrack(track));
-  }, [dispatch]);
+  const onRemoveFromFavorites = useCallback(
+    (track: Track) => {
+      dispatch(favoritesActions.removeFavoriteTrack(track));
+    },
+    [dispatch]
+  );
 
-  const onAddToDownloads = useCallback((track: Track) => {
-    dispatch(downloadsActions.addToDownloads(null, track));
-  }, [dispatch]);
+  const onAddToDownloads = useCallback(
+    (track: Track) => {
+      dispatch(downloadsActions.addToDownloads(null, track));
+    },
+    [dispatch]
+  );
 
-  const onAddToPlaylist = useCallback((track: Track, playlist: Playlist ) => {
-    const clonedTrack = {...safeAddUuid(track)};
-    const foundPlaylist = playlists.data?.find(p => p.name === playlist.name);
-    const newPlaylist = {
-      ...foundPlaylist,
-      tracks: [
-        ...foundPlaylist.tracks,
-        clonedTrack
-      ]
-    };
-    dispatch(playlistActions.updatePlaylist(newPlaylist));
-  }, [dispatch, playlists]);
+  const onAddToPlaylist = useCallback(
+    (track: Track, playlist: Playlist) => {
+      const clonedTrack = { ...safeAddUuid(track) };
+      const foundPlaylist = playlists.data?.find(
+        (p) => p.name === playlist.name
+      );
+      const newPlaylist = {
+        ...foundPlaylist,
+        tracks: [...foundPlaylist.tracks, clonedTrack]
+      };
+      dispatch(playlistActions.updatePlaylist(newPlaylist));
+    },
+    [dispatch, playlists]
+  );
 
   const onCreatePlaylist = useCallback(
-    (track: Track, { name }: { name: string } ) => {
-      const clonedTrack = {...safeAddUuid(track)};
+    (track: Track, { name }: { name: string }) => {
+      const clonedTrack = { ...safeAddUuid(track) };
       if (clonedTrack.artist.name) {
         _.set(clonedTrack, 'artist', clonedTrack.artist.name);
       }
@@ -105,10 +130,21 @@ function TrackTableContainer<T extends Track> ({
     [dispatch]
   );
 
-  const onDragEnd = useCallback<TrackTableProps<Track>['onDragEnd']>((result) => {
-    const { source, destination } = result;
-    onReorder(source.index, destination.index);
-  }, [onReorder]);
+  const onDragEnd = useCallback<TrackTableProps<Track>['onDragEnd']>(
+    (result) => {
+      const { source, destination } = result;
+      onReorder(source.index, destination.index);
+    },
+    [onReorder]
+  );
+  const onUpdateTrack = useCallback(
+    (index: number, updatedTrack: Track) => {
+      if (settings.onTrackUpdate) {
+        settings.onTrackUpdate(index, updatedTrack);
+      }
+    },
+    [settings.onTrackUpdate]
+  );
 
   const popupTranstation = useTranslation('track-popup').t;
   const popupStrings = {
@@ -129,42 +165,55 @@ function TrackTableContainer<T extends Track> ({
 
   const trackTableTranslation = useTranslation('track-table').t;
   const trackTableStrings = {
-    addSelectedTracksToQueue: trackTableTranslation('add-selected-tracks-to-queue'),
-    addSelectedTracksToDownloads: trackTableTranslation('add-selected-tracks-to-downloads'),
-    addSelectedTracksToFavorites: trackTableTranslation('add-selected-tracks-to-favorites'),
+    addSelectedTracksToQueue: trackTableTranslation(
+      'add-selected-tracks-to-queue'
+    ),
+    addSelectedTracksToDownloads: trackTableTranslation(
+      'add-selected-tracks-to-downloads'
+    ),
+    addSelectedTracksToFavorites: trackTableTranslation(
+      'add-selected-tracks-to-favorites'
+    ),
+
     playSelectedTracksNow: trackTableTranslation('play-selected-tracks-now'),
-    tracksSelectedLabelSingular: trackTableTranslation('tracks-selected-label-singular'),
-    tracksSelectedLabelPlural: trackTableTranslation('tracks-selected-label-plural'),
+    tracksSelectedLabelSingular: trackTableTranslation(
+      'tracks-selected-label-singular'
+    ),
+    tracksSelectedLabelPlural: trackTableTranslation(
+      'tracks-selected-label-plural'
+    ),
     filterInputPlaceholder: trackTableTranslation('filter-input-placeholder')
   };
 
-  return <TrackTableComponent
-    {...settings}
-    tracks={tracks}
-    positionHeader={<Icon name='hashtag' />}
-    thumbnailHeader={<Icon name='image' />}
-    artistHeader={t('artist')}
-    titleHeader={t('title')}
-    albumHeader={t('album')}
-    durationHeader={t('duration')}
-    strings={trackTableStrings}
-    playlists={playlists.data}
-    customColumns={customColumns}
-    onAddToQueue={onAddToQueue}
-    onPlay={onPlayNow}
-    onPlayNext={onPlayNext}
-    onPlayAll={onPlayAll}
-    onAddToFavorites={Boolean(displayAddToFavorites) && onAddToFavorites}
-    onRemoveFromFavorites={onRemoveFromFavorites}
-    onAddToDownloads={Boolean(displayAddToDownloads) && onAddToDownloads}
-    onAddToPlaylist={onAddToPlaylist}
-    onCreatePlaylist={onCreatePlaylist}
-    onDelete={onDelete}
-    onDragEnd={Boolean(onReorder) && onDragEnd}
-    popupActionStrings={popupStrings}
-
-    isTrackFavorite={isTrackFavorite}
-  />;
+  return (
+    <TrackTableComponent
+      {...settings}
+      tracks={tracks}
+      positionHeader={<Icon name='hashtag' />}
+      thumbnailHeader={<Icon name='image' />}
+      artistHeader={t('artist')}
+      titleHeader={t('title')}
+      albumHeader={t('album')}
+      durationHeader={t('duration')}
+      strings={trackTableStrings}
+      playlists={playlists.data}
+      customColumns={customColumns}
+      onAddToQueue={onAddToQueue}
+      onPlay={onPlayNow}
+      onPlayNext={onPlayNext}
+      onPlayAll={onPlayAll}
+      onAddToFavorites={Boolean(displayAddToFavorites) && onAddToFavorites}
+      onRemoveFromFavorites={onRemoveFromFavorites}
+      onAddToDownloads={Boolean(displayAddToDownloads) && onAddToDownloads}
+      onAddToPlaylist={onAddToPlaylist}
+      onCreatePlaylist={onCreatePlaylist}
+      onDelete={onDelete}
+      onDragEnd={Boolean(onReorder) && onDragEnd}
+      popupActionStrings={popupStrings}
+      isTrackFavorite={isTrackFavorite}
+      onTrackUpdate={onUpdateTrack}
+    />
+  );
 }
 
 export default TrackTableContainer;
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/EditableTextCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/EditableTextCell.tsx
new file mode 100644
index 0000000000..804bbc7cf4
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/EditableTextCell.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { CellProps } from 'react-table';
+import { Track } from '@nuclear/ui/lib/types';
+import { TextCell } from './TextCell';
+import cx from 'classnames';
+import styles from '../styles.scss';
+
+export const EditableArtistCell: React.FC<
+  CellProps<Track> & {
+    onTrackUpdate?: (index: number, updatedTrack: Track) => void;
+  }
+> = (props) => {
+  const { cell, row, onTrackUpdate } = props;
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(
+    typeof cell.value === 'string' ? cell.value : cell.value.name
+  );
+
+  if (!onTrackUpdate) {
+    return <TextCell {...(props as any)} />;
+  }
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      setIsEditing(false);
+      if (editValue !== cell.value) {
+        const updatedTrack = { ...row.original, artist: editValue };
+        onTrackUpdate(row.index, updatedTrack);
+      }
+    } else if (e.key === 'Escape') {
+      setIsEditing(false);
+      setEditValue(
+        typeof cell.value === 'string' ? cell.value : cell.value.name
+      );
+    }
+  };
+
+  return isEditing ? (
+    <input
+      value={editValue}
+      className={cx(styles.grid_track_table_cell, styles.text_cell)}
+      onChange={(e) => setEditValue(e.target.value)}
+      onBlur={() => {
+        setIsEditing(false);
+        if (editValue !== cell.value) {
+          const updatedTrack = { ...row.original };
+          if (typeof updatedTrack.artist === 'string') {
+            updatedTrack.artist = editValue;
+          } else {
+            updatedTrack.artist = { name: editValue };
+          }
+          onTrackUpdate(row.index, updatedTrack);
+        }
+      }}
+      onKeyDown={handleKeyDown}
+      autoFocus
+    />
+  ) : (
+    <div
+      className={cx(styles.grid_track_table_cell, styles.text_cell)}
+      onDoubleClick={() => setIsEditing(true)}
+    >
+      {editValue}
+    </div>
+  );
+};
diff --git a/packages/ui/lib/components/GridTrackTable/Cells/EditableTitleCell.tsx b/packages/ui/lib/components/GridTrackTable/Cells/EditableTitleCell.tsx
new file mode 100644
index 0000000000..a22ec921a2
--- /dev/null
+++ b/packages/ui/lib/components/GridTrackTable/Cells/EditableTitleCell.tsx
@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { CellProps } from 'react-table';
+import { Track } from '@nuclear/ui/lib/types';
+import { TitleCell } from './TitleCell';
+import cx from 'classnames';
+import styles from '../styles.scss';
+
+export const EditableTitleCell: React.FC<
+  CellProps<Track> & {
+    onTrackUpdate?: (index: number, updatedTrack: Track) => void;
+  }
+> = (props) => {
+  const { cell, row, onTrackUpdate } = props;
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(cell.value);
+
+  if (!onTrackUpdate) {
+    return <TitleCell {...props} />;
+  }
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      setIsEditing(false);
+      if (editValue !== cell.value) {
+        const updatedTrack = { ...row.original };
+        updatedTrack.title = editValue;
+        onTrackUpdate(row.index, updatedTrack);
+      }
+    } else if (e.key === 'Escape') {
+      setIsEditing(false);
+      setEditValue(cell.value);
+    }
+  };
+
+  return isEditing ? (
+    <input
+      value={editValue}
+      onChange={(e) => setEditValue(e.target.value)}
+      className={cx(
+        styles.grid_track_table_cell,
+        styles.text_cell,
+        styles.title_cell
+      )}
+      onBlur={() => {
+        setIsEditing(false);
+        if (editValue !== cell.value) {
+          const updatedTrack = { ...row.original };
+          updatedTrack.title = editValue;
+          onTrackUpdate(row.index, updatedTrack);
+        }
+      }}
+      onKeyDown={handleKeyDown}
+      autoFocus
+    />
+  ) : (
+    <div
+      onDoubleClick={() => setIsEditing(true)}
+      className={cx(
+        styles.grid_track_table_cell,
+        styles.text_cell,
+        styles.title_cell
+      )}
+    >
+      <TitleCell {...props} />
+    </div>
+  );
+};
diff --git a/packages/ui/lib/components/GridTrackTable/index.tsx b/packages/ui/lib/components/GridTrackTable/index.tsx
index eafc22967e..47af6f5bf7 100644
--- a/packages/ui/lib/components/GridTrackTable/index.tsx
+++ b/packages/ui/lib/components/GridTrackTable/index.tsx
@@ -1,15 +1,42 @@
-import { Column, ColumnInstance, HeaderGroup, Row, TableInstance, TableState, UseGlobalFiltersInstanceProps, UseRowSelectInstanceProps, UseRowSelectRowProps, UseSortByColumnProps, UseSortByInstanceProps, UseSortByState, useGlobalFilter, useRowSelect, useSortBy, useTable } from 'react-table';
+import {
+  Column,
+  ColumnInstance,
+  HeaderGroup,
+  Row,
+  TableInstance,
+  TableState,
+  UseGlobalFiltersInstanceProps,
+  UseRowSelectInstanceProps,
+  UseRowSelectRowProps,
+  UseSortByColumnProps,
+  UseSortByInstanceProps,
+  UseSortByState,
+  useGlobalFilter,
+  useRowSelect,
+  useSortBy,
+  useTable
+} from 'react-table';
 import React, { useMemo, useState } from 'react';
-import { DragDropContext, DragDropContextProps, Droppable } from 'react-beautiful-dnd';
+import {
+  DragDropContext,
+  DragDropContextProps,
+  Droppable
+} from 'react-beautiful-dnd';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
- 
-import { TrackTableColumn, TrackTableExtraProps, TrackTableHeaders, TrackTableSettings, TrackTableStrings } from '../TrackTable/types';
+
+import {
+  TrackTableColumn,
+  TrackTableExtraProps,
+  TrackTableHeaders,
+  TrackTableSettings,
+  TrackTableStrings
+} from '../TrackTable/types';
 import { TextHeader } from './Headers/TextHeader';
 import { TextCell } from './Cells/TextCell';
 import { Track } from '../../types';
 import { getTrackThumbnail } from '../TrackRow';
- 
+
 import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 import { ThumbnailCell } from './Cells/ThumbnailCell';
@@ -22,147 +49,199 @@ 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';
- 
+import { EditableTitleCell } from './Cells/EditableTitleCell';
+import { EditableArtistCell } from './Cells/EditableTextCell';
+
+import { Button, Modal, Form, Input } from 'semantic-ui-react';
+
 export type GridTrackTableProps<T extends Track> = {
   className?: string;
   tracks: T[];
   isTrackFavorite: (track: T) => boolean;
   onDragEnd?: DragDropContextProps['onDragEnd'];
+  onTrackUpdate?: (index: number, updatedTrack: T) => void;
   strings: TrackTableStrings;
-  customColumns?: (ColumnWithWidth<T>)[];
-} & TrackTableHeaders
-  & TrackTableSettings
-  & TrackTableExtraProps<T>;
- 
-type ColumnWithWidth<T extends Track> = Column<T> & { columnWidth: string; };
-type TrackTableColumnInstance<T extends Track> = ColumnInstance<T> & UseSortByColumnProps<T>;
-type TrackTableHeaderGroup<T extends Track> = HeaderGroup<T> & UseSortByColumnProps<T>;
-type TrackTableInstance<T extends Track> = TableInstance<T> & UseGlobalFiltersInstanceProps<T> & UseSortByInstanceProps<T> & UseRowSelectInstanceProps<T>;
+  customColumns?: ColumnWithWidth<T>[];
+} & TrackTableHeaders &
+  TrackTableSettings &
+  TrackTableExtraProps<T>;
+
+type ColumnWithWidth<T extends Track> = Column<T> & { columnWidth: string };
+type TrackTableColumnInstance<T extends Track> = ColumnInstance<T> &
+  UseSortByColumnProps<T>;
+type TrackTableHeaderGroup<T extends Track> = HeaderGroup<T> &
+  UseSortByColumnProps<T>;
+type TrackTableInstance<T extends Track> = TableInstance<T> &
+  UseGlobalFiltersInstanceProps<T> &
+  UseSortByInstanceProps<T> &
+  UseRowSelectInstanceProps<T>;
 type TrackTableState<T extends Track> = TableState<T> & UseSortByState<T>;
 export type TrackTableRow<T extends Track> = Row<T> & UseRowSelectRowProps<T>;
- 
+
 export const GridTrackTable = <T extends Track>({
   className,
   tracks,
-  customColumns=[],
+  customColumns = [],
   isTrackFavorite,
   onDragEnd,
- 
+  onTrackUpdate,
+
   positionHeader,
   thumbnailHeader,
   artistHeader,
   titleHeader,
   albumHeader,
   durationHeader,
- 
-  displayHeaders=true,
-  displayDeleteButton=true,
-  displayPosition=true,
-  displayFavorite=true,
-  displayArtist=true,
-  displayAlbum=true,
-  displayThumbnail=true,
-  displayDuration=true,
-  displayCustom=true,
-  selectable=true,
-  searchable=false,
- 
+
+  displayHeaders = true,
+  displayDeleteButton = true,
+  displayPosition = true,
+  displayFavorite = true,
+  displayArtist = true,
+  displayAlbum = true,
+  displayThumbnail = true,
+  displayDuration = true,
+  displayCustom = true,
+  selectable = true,
+  searchable = false,
+
   ...extraProps
 }: GridTrackTableProps<T>) => {
-  const shouldDisplayDuration = displayDuration && tracks.every(track => Boolean(track.duration));
-  const columns = useMemo(() => [
-    selectable && {
-      id: TrackTableColumn.Selection,
-      Header: SelectionHeader,
-      Cell: SelectionCell,
-      columnWidth: '7.5em'
-    },
-    displayPosition && {
-      id: TrackTableColumn.Position,
-      Header: ({ column }) => <TextHeader
-        data-testid='position-header'
-        column={column as TrackTableColumnInstance<Track>}
-        header={positionHeader}
-        isCentered
-      />,
-      accessor: (track: T) => track.position,
-      Cell: PositionCell,
-      enableSorting: true,
-      columnWidth: '4em'
-    } as Column<T>,
-    displayThumbnail && {
-      id: TrackTableColumn.Thumbnail,
-      Header: ({ column }) => <TextHeader column={column} header={thumbnailHeader} />,
-      accessor: (track: T) => getTrackThumbnail(track) || artPlaceholder,
-      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: TitleCell,
-      enableSorting: true,
-      columnWidth: 'minmax(8em, 1fr)'
-    },
-    displayArtist && {
-      id: TrackTableColumn.Artist,
-      Header: ({ column }) => <TextHeader column={column} header={artistHeader} />,
-      accessor: (track: T) => isString(track.artist)
-        ? track.artist
-        : track.artist.name,
-      Cell: TextCell,
-      enableSorting: true,
-      columnWidth: '6em'
-    },
-    displayAlbum && {
-      id: TrackTableColumn.Album,
-      Header: ({ column }: { column: TrackTableColumnInstance<T> }) => <TextHeader column={column} header={albumHeader} />,
-      accessor: (track: T) => track.album,
-      enableSorting: true,
-      Cell: TextCell,
-      columnWidth: '6em'
-    } as Column<T>,
-    shouldDisplayDuration && {
-      id: TrackTableColumn.Duration,
-      Header: ({ column }) => <TextHeader column={column} header={durationHeader} />,
-      accessor: (track: T) => {
-        if (isString(track.duration)) {
-          return track.duration;
-        } else if (isNumber(track.duration)) {
-          return formatDuration(track.duration);
-        } else {
-          return null;
-        }
-      },
-      Cell: TextCell,
-      columnWidth: '6em'
-    },
-    ...customColumns,
-    displayDeleteButton && {
-      id: TrackTableColumn.Delete,
-      Cell: DeleteCell,
-      columnWidth: '3em'
-    } as Column<T>
-  ].filter(Boolean), [displayDeleteButton, displayPosition, displayThumbnail, displayFavorite, isTrackFavorite, titleHeader, displayArtist, artistHeader, displayAlbum, albumHeader, shouldDisplayDuration, durationHeader, selectable, positionHeader, thumbnailHeader]);
- 
+  const shouldDisplayDuration =
+    displayDuration && tracks.every((track) => Boolean(track.duration));
+  const columns = useMemo(
+    () =>
+      [
+        selectable && {
+          id: TrackTableColumn.Selection,
+          Header: SelectionHeader,
+          Cell: SelectionCell,
+          columnWidth: '7.5em'
+        },
+        displayPosition &&
+          ({
+            id: TrackTableColumn.Position,
+            Header: ({ column }) => (
+              <TextHeader
+                data-testid='position-header'
+                column={column as TrackTableColumnInstance<Track>}
+                header={positionHeader}
+                isCentered
+              />
+            ),
+            accessor: (track: T) => track.position,
+            Cell: PositionCell,
+            enableSorting: true,
+            columnWidth: '4em'
+          } as Column<T>),
+        displayThumbnail && {
+          id: TrackTableColumn.Thumbnail,
+          Header: ({ column }) => (
+            <TextHeader column={column} header={thumbnailHeader} />
+          ),
+          accessor: (track: T) => getTrackThumbnail(track) || artPlaceholder,
+          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: (props) => (
+            <EditableTitleCell {...props} onTrackUpdate={onTrackUpdate} />
+          ),
+          enableSorting: true,
+          columnWidth: 'minmax(8em, 1fr)'
+        },
+        displayArtist && {
+          id: TrackTableColumn.Artist,
+          Header: ({ column }) => (
+            <TextHeader column={column} header={artistHeader} />
+          ),
+          accessor: (track: T) =>
+            isString(track.artist) ? track.artist : track.artist.name,
+          Cell: (props) => (
+            <EditableArtistCell {...props} onTrackUpdate={onTrackUpdate} />
+          ),
+          enableSorting: true,
+          columnWidth: '6em'
+        },
+        displayAlbum &&
+          ({
+            id: TrackTableColumn.Album,
+            Header: ({ column }: { column: TrackTableColumnInstance<T> }) => (
+              <TextHeader column={column} header={albumHeader} />
+            ),
+            accessor: (track: T) => track.album,
+            enableSorting: true,
+            Cell: TextCell,
+            columnWidth: '6em'
+          } as Column<T>),
+        shouldDisplayDuration && {
+          id: TrackTableColumn.Duration,
+          Header: ({ column }) => (
+            <TextHeader column={column} header={durationHeader} />
+          ),
+          accessor: (track: T) => {
+            if (isString(track.duration)) {
+              return track.duration;
+            } else if (isNumber(track.duration)) {
+              return formatDuration(track.duration);
+            } else {
+              return null;
+            }
+          },
+          Cell: TextCell,
+          columnWidth: '6em'
+        },
+        ...customColumns,
+        displayDeleteButton &&
+          ({
+            id: TrackTableColumn.Delete,
+            Cell: DeleteCell,
+            columnWidth: '3em'
+          } as Column<T>)
+      ].filter(Boolean),
+    [
+      displayDeleteButton,
+      displayPosition,
+      displayThumbnail,
+      displayFavorite,
+      isTrackFavorite,
+      titleHeader,
+      displayArtist,
+      artistHeader,
+      displayAlbum,
+      albumHeader,
+      shouldDisplayDuration,
+      durationHeader,
+      selectable,
+      positionHeader,
+      thumbnailHeader
+    ]
+  );
+
   const data = useMemo(() => tracks, [tracks]);
- 
+
   const initialState: Partial<TableState<T> & UseSortByState<T>> = {
     sortBy: [{ id: TrackTableColumn.Position, desc: false }]
   };
-  const table = useTable<T>({ columns, data, initialState }, useGlobalFilter, useSortBy, useRowSelect);
+  const table = useTable<T>(
+    { columns, data, initialState },
+    useGlobalFilter,
+    useSortBy,
+    useRowSelect
+  );
   const [globalFilter, setGlobalFilterState] = useState(''); // Required, because useGlobalFilter does not provide a way to get the current filter value
- 
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -173,113 +252,113 @@ export const GridTrackTable = <T extends Track>({
     state: tableState,
     selectedFlatRows
   } = table as TrackTableInstance<T>;
- 
+
   const onFilterClick = () => {
     setGlobalFilter('');
     setGlobalFilterState('');
   };
- 
-  const gridTemplateColumns = columns.map((column: ColumnWithWidth<T>) => 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 || selectedFlatRows.length > 0 || (tableState as TrackTableState<T>).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.grid_track_table}
-      {...getTableProps()}
-    >
-      <div className={styles.track_table_head}>
-        {headerGroups.map(headerGroup => (
-          <div
-            key={headerGroup.id}
-            className={styles.track_table_header_row}
-            style={{ gridTemplateColumns: gridTemplateColumns + ' auto' }}
-            {...headerGroup.getHeaderGroupProps()}
-          >
-            {
-              headerGroup.headers.map((column: TrackTableHeaderGroup<T>) => (
+  const isDragDisabled =
+    !onDragEnd ||
+    selectedFlatRows.length > 0 ||
+    (tableState as TrackTableState<T>).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.grid_track_table} {...getTableProps()}>
+        <div className={styles.track_table_head}>
+          {headerGroups.map((headerGroup) => (
+            <div
+              key={headerGroup.id}
+              className={styles.track_table_header_row}
+              style={{ gridTemplateColumns: gridTemplateColumns + ' auto' }}
+              {...headerGroup.getHeaderGroupProps()}
+            >
+              {headerGroup.headers.map((column: TrackTableHeaderGroup<T>) => (
                 <div
                   key={column.id}
                   className={styles.track_table_header_cell}
-                  {...column.getHeaderProps((column).getSortByToggleProps())}
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
                 >
                   {column.render('Header', extraProps)}
-                </div>))
-            }
-          </div>
-        ))}
-      </div>
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable
-          droppableId='track_table'
-          mode='virtual'
-          renderClone={GridTrackTableRowClone({
-            rows,
-            gridTemplateColumns,
-            extraProps
-          })}
-        >
-          {(droppableProvided, droppableSnapshot) => (
-            <div
-              data-testid='track-table-body'
-              className={styles.track_table_body}
-              ref={droppableProvided.innerRef}
-              {...getTableBodyProps()}
-              {...droppableProvided.droppableProps}
-            >
-              <AutoSizer
-                className={styles.track_table_auto_sizer}
-              >
-                {({ height, width }) =>
-                  <FixedSizeList
-                    className={styles.track_table_virtualized_list}
-                    height={height}
-                    width={width}
-                    itemSize={42}
-                    itemCount={rows.length}
-                    overscanCount={2}
-                    itemData={{
-                      rows: rows as Row<Track>[],
-                      prepareRow: prepareRow as (row: Row<Track>) => void,
-                      gridTemplateColumns,
-                      isDragDisabled,
-                      extraProps
-                    }}
-                    outerRef={droppableProvided.innerRef}
-                  >
-                    {GridTrackTableRow}
-                  </FixedSizeList>
-                }
-              </AutoSizer>
+                </div>
+              ))}
             </div>
-          )}
-        </Droppable>
-      </DragDropContext>
+          ))}
+        </div>
+        <DragDropContext onDragEnd={onDragEnd}>
+          <Droppable
+            droppableId='track_table'
+            mode='virtual'
+            renderClone={GridTrackTableRowClone({
+              rows,
+              gridTemplateColumns,
+              extraProps
+            })}
+          >
+            {(droppableProvided, droppableSnapshot) => (
+              <div
+                data-testid='track-table-body'
+                className={styles.track_table_body}
+                ref={droppableProvided.innerRef}
+                {...getTableBodyProps()}
+                {...droppableProvided.droppableProps}
+              >
+                <AutoSizer className={styles.track_table_auto_sizer}>
+                  {({ height, width }) => (
+                    <FixedSizeList
+                      className={styles.track_table_virtualized_list}
+                      height={height}
+                      width={width}
+                      itemSize={42}
+                      itemCount={rows.length}
+                      overscanCount={2}
+                      itemData={{
+                        rows: rows as Row<Track>[],
+                        prepareRow: prepareRow as (row: Row<Track>) => void,
+                        gridTemplateColumns,
+                        isDragDisabled,
+                        extraProps
+                      }}
+                      outerRef={droppableProvided.innerRef}
+                    >
+                      {GridTrackTableRow}
+                    </FixedSizeList>
+                  )}
+                </AutoSizer>
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
     </div>
-  </div>;
+  );
 };
- 
diff --git a/packages/ui/lib/components/TrackTable/types.ts b/packages/ui/lib/components/TrackTable/types.ts
index 840d888144..79ac11a7de 100644
--- a/packages/ui/lib/components/TrackTable/types.ts
+++ b/packages/ui/lib/components/TrackTable/types.ts
@@ -23,13 +23,14 @@ export type TrackTableExtraProps<T extends Track> = {
   onRemoveFromFavorites?: (track: T) => void;
   onAddToPlaylist?: (track: T, { name }: { name: string }) => void;
   onCreatePlaylist?: (track: T, { name }: { name: string }) => void;
+  onTrackUpdate?: (index: number, updatedTrack: T) => void;
   onAddToDownloads?: (track: T) => void;
   onDelete?: (track: T, idx: number) => void;
   playlists?: Array<{
     name: string;
   }>;
-  popupActionStrings?: TrackPopupStrings
-}
+  popupActionStrings?: TrackPopupStrings;
+};
 
 export type TrackTableStrings = {
   addSelectedTracksToQueue: string;
@@ -39,7 +40,7 @@ export type TrackTableStrings = {
   tracksSelectedLabelSingular: string;
   tracksSelectedLabelPlural: string;
   filterInputPlaceholder: string;
-}
+};
 
 export type TrackTableHeaders = {
   positionHeader: React.ReactNode;
@@ -48,7 +49,7 @@ export type TrackTableHeaders = {
   titleHeader: string;
   albumHeader: string;
   durationHeader: string;
-}
+};
 
 export type TrackTableSettings = {
   displayHeaders?: boolean;
@@ -63,5 +64,3 @@ export type TrackTableSettings = {
   selectable?: boolean;
   searchable?: boolean;
 };
-
-