diff --git a/public/locales/en.json b/public/locales/en.json
index 496d4f1..30e88e5 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -18,8 +18,10 @@
   "scrobbleSelected": "Scrobble selected",
   "findAlbumCopy": "Enter an album or artist name",
   "customTimestamp": "Custom timestamp",
-  "albumTimestampLogicDescription": "Scrobbling tracks \"now\" will scrobble the last track at the current time, backdating the previous ones accordingly (as if you had just finished listening). The \"custom timestamp\" will define the timestamp of the first track and add time to the following tracks from there (i.e. you specify the time you started listening to this album)",
+  "albumTimestampLogicDescription": "Scrobbling tracks \"now\" will scrobble the last track at the current time, backdating the previous ones accordingly (as if you had just finished listening). The \"custom timestamp\" will define the timestamp of the first track and add time to the following tracks from there (i.e. you specify the time you started listening to this album).",
   "albumArtist": "Album artist",
+  "filter": "Filter",
+  "albumCleanupPatternDescription": "Some albums tracks are displayed with some repeated text (i.e. Demo, Live, Remastered, ...). These are patterns that could be considered annoying to scrobble, for some users. Set the full pattern (including paranthesis, dashes, ...) that you would like to be removed, from the track names.",
   "history": "History",
   "yourProfile": "Your profile",
   "yourHistory": "Your history",
diff --git a/public/locales/it.json b/public/locales/it.json
index e2f3183..33f62df 100644
--- a/public/locales/it.json
+++ b/public/locales/it.json
@@ -20,6 +20,7 @@
   "customTimestamp": "Timestamp personalizzato",
   "albumTimestampLogicDescription": "Scrobblando le canzoni \"adesso\" scrobblerà l'ultima canzone in questo momento, anticipando relativamente le precedenti (come se avessi appena finito di ascoltarle). Il \"timestamp personalizzato\" definirà il timestamp di ascolto della prima traccia ed agginguerà il relativo tempo alle canzoni successive (come se avessi iniziato ad ascoltare l'album nel timestamp selezionato)",
   "albumArtist": "Artista di un Album",
+  "albumCleanupPatternDescription": "Alcune canzoni di album sono visualizzate con un certo testo ripetuto (ad esempio Demo, Live, Remastered, ...). Questi sono pattern che potrebbero risultare fastidiosi da scrobblare, per alcuni utenti. Imposta il pattern completo (incluse parentesi, trattini, ...) che desideri venga rimosso dai nomi delle canzoni.",
   "history": "Storico",
   "yourProfile": "Tuo profilo",
   "yourHistory": "Tuo storico",
diff --git a/src/components/ScrobbleItem.css b/src/components/ScrobbleItem.css
index dbf4eac..3ece4ee 100644
--- a/src/components/ScrobbleItem.css
+++ b/src/components/ScrobbleItem.css
@@ -97,3 +97,8 @@
   padding-left: 1.15rem;
   padding-right: 1.15rem;
 }
+
+.scrobbled-item del {
+  color: var(--bs-secondary-color) !important;
+  background-color: rgba(255, 32, 0, 0.2);
+}
diff --git a/src/components/ScrobbleItem.tsx b/src/components/ScrobbleItem.tsx
index 70c86af..ec47dda 100644
--- a/src/components/ScrobbleItem.tsx
+++ b/src/components/ScrobbleItem.tsx
@@ -6,7 +6,7 @@ import { get } from 'lodash-es';
 import { enqueueScrobble } from 'store/actions/scrobbleActions';
 
 import { Button, Input, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, FormGroup, Label } from 'reactstrap';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -22,6 +22,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { faClock, faCopy } from '@fortawesome/free-regular-svg-icons';
 import { getAmznLink } from 'Constants';
+import { breakStringUsingPattern, cleanTitleWithPattern } from 'domains/scrobbleAlbum/CleanupContext';
 
 import type { Scrobble } from 'utils/types/scrobble';
 
@@ -31,6 +32,7 @@ import { formatDuration, formatScrobbleTimestamp } from 'utils/datetime';
 
 interface ScrobbleItemProps {
   scrobble: Scrobble;
+  cleanupPattern?: RegExp;
   compact?: boolean;
   hideArtist?: boolean;
   muteArtist?: boolean;
@@ -45,6 +47,7 @@ interface ScrobbleItemProps {
 
 export default function ScrobbleItem({
   scrobble,
+  cleanupPattern,
   compact = false,
   hideArtist = false,
   muteArtist = false,
@@ -83,6 +86,7 @@ export default function ScrobbleItem({
     enqueueScrobble(dispatch)([
       {
         ...scrobble,
+        title: cleanTitleWithPattern(scrobble.title, cleanupPattern),
         timestamp: useOriginalTimestamp ? scrobble.timestamp : new Date(),
       },
     ]);
@@ -100,6 +104,13 @@ export default function ScrobbleItem({
       return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
     });
   };
+
+  const strikethroughMatch = (text: string, pattern?: RegExp) => {
+    return breakStringUsingPattern(text, pattern).map(({ value, isMatch }, index) => (
+      <Fragment key={index}>{!isMatch ? value : <del>{value}</del>}</Fragment>
+    ));
+  };
+
   let albumArt;
   let errorMessage;
   let rightSideContent;
@@ -172,18 +183,23 @@ export default function ScrobbleItem({
     </small>
   );
 
+  const formattedTitle = strikethroughMatch(properCase(scrobble.title, true), cleanupPattern);
   if (!hideArtist) {
     if (muteArtist) {
       songFullTitle = (
         <>
-          {properCase(scrobble.title, true)} <span className="text-muted">{properCase(scrobble.artist)}</span>
+          {formattedTitle} <span className="text-muted">{properCase(scrobble.artist)}</span>
         </>
       );
     } else {
-      songFullTitle = `${properCase(scrobble.artist)} - ${properCase(scrobble.title, true)}`;
+      songFullTitle = (
+        <>
+          {properCase(scrobble.artist)} - {formattedTitle}
+        </>
+      );
     }
   } else {
-    songFullTitle = properCase(scrobble.title, true);
+    songFullTitle = formattedTitle;
   }
 
   const scrobbleItemInputId = `ScrobbleItem-checkbox-${scrobble.uuid}`;
@@ -201,7 +217,7 @@ export default function ScrobbleItem({
     // FULL view
     songInfo = (
       <>
-        <span className="song">{songFullTitle}</span>
+        <span className="song flex-grow-1 pe-2 truncate">{songFullTitle}</span>
         <Label className="d-flex mb-0" htmlFor={scrobbleItemInputId}>
           <small className="text-muted flex-grow-1 truncate album">
             {scrobble.album && (
diff --git a/src/components/ScrobbleList.tsx b/src/components/ScrobbleList.tsx
index b7d253f..ac4db06 100644
--- a/src/components/ScrobbleList.tsx
+++ b/src/components/ScrobbleList.tsx
@@ -1,10 +1,11 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 
 import ScrobbleItem from 'components/ScrobbleItem';
 import Spinner from 'components/Spinner';
 import { ScrobbleCloneContext } from 'domains/scrobbleSong/ScrobbleSong';
 
 import type { ReactNode } from 'react';
+import { CleanupPatternContext } from 'domains/scrobbleAlbum/CleanupContext';
 
 interface ScrobbleListProps {
   analyticsEventForScrobbles?: string;
@@ -30,6 +31,7 @@ export default function ScrobbleList({
   scrobbles = [],
 }: ScrobbleListProps) {
   const { cloneFn, setCloneFn } = useContext(ScrobbleCloneContext);
+  const cleanupCtx = useContext(CleanupPatternContext); // this may be undefined
   let albumHasVariousArtists = !isAlbum;
 
   if (loading) {
@@ -53,6 +55,7 @@ export default function ScrobbleList({
         <ScrobbleItem
           scrobble={scrobble}
           analyticsEvent={analyticsEventForScrobbles}
+          cleanupPattern={cleanupCtx?.cleanupPattern}
           cloneScrobbleTo={setCloneFn ? cloneFn : undefined}
           compact={compact}
           noMenu={noMenu}
diff --git a/src/domains/scrobbleAlbum/CleanupContext.test.ts b/src/domains/scrobbleAlbum/CleanupContext.test.ts
new file mode 100644
index 0000000..c821854
--- /dev/null
+++ b/src/domains/scrobbleAlbum/CleanupContext.test.ts
@@ -0,0 +1,125 @@
+import { cleanTitleWithPattern, breakStringUsingPattern, strToCleanupPattern } from './CleanupContext';
+
+describe('cleanTitleWithPattern', () => {
+  it('removes pattern from title', () => {
+    const title = 'Song Title live';
+    const pattern = strToCleanupPattern('LIVE');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it('returns the original title if pattern is not found', () => {
+    const title = 'Song Title (live)';
+    const pattern = strToCleanupPattern('remix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title (live)');
+  });
+
+  it('returns the original title if pattern is null', () => {
+    const title = 'Song Title (2024)';
+    expect(cleanTitleWithPattern(title, null)).toBe('Song Title (2024)');
+  });
+
+  it('skips patterns of less than 3 characters', () => {
+    const title = 'Song Title (20)';
+    const pattern = strToCleanupPattern('20');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title (20)');
+  });
+
+  it('removes trailing dashes', () => {
+    const title = 'Song Title - Live';
+    const pattern = strToCleanupPattern('live');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it('removes empty parenthesis', () => {
+    const title = 'Song Title (remix)';
+    const pattern = strToCleanupPattern('remix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it('removes empty brackets', () => {
+    const title = 'Song Title [fOoB4r]';
+    const pattern = strToCleanupPattern('fOoB4r');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it("doesn't match partial end of words", () => {
+    const title = 'Song Title remix';
+    const pattern = strToCleanupPattern('mix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title remix');
+  });
+
+  it("doesn't match partial beginning of words", () => {
+    const title = 'Love (Sweet Love) (Dopamine Remix)';
+    const pattern = strToCleanupPattern('dopa');
+    expect(cleanTitleWithPattern(title, pattern)).toBe(title);
+  });
+
+  it('auto-closes parenthesis', () => {
+    const title = 'Song Title (remix) [1984]';
+    const pattern = strToCleanupPattern('(remix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title [1984]');
+  });
+
+  it('auto-closes brackets', () => {
+    const title = 'Song Title (remix) [1984]';
+    const pattern = strToCleanupPattern('[1984');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title (remix)');
+  });
+
+  it('matches words starting with symbols', () => {
+    const title = 'Song Title $remix';
+    const pattern = strToCleanupPattern('$remix');
+    expect(cleanTitleWithPattern(title, pattern)).toBe('Song Title');
+  });
+
+  it('supports several words in the pattern', () => {
+    const title = "I can't quit you baby - Live in paris, 1969";
+    const pattern = strToCleanupPattern('live in paris, 1969');
+    expect(cleanTitleWithPattern(title, pattern)).toBe("I can't quit you baby");
+  });
+});
+
+describe('breakStringUsingPattern', () => {
+  it('breaks down the string into parts matching the pattern', () => {
+    const str = 'Song Title (remix) (live) (2024)';
+    const pattern = /\(remix\)|\(live\)|\(2024\)/gi;
+    const result = breakStringUsingPattern(str, pattern);
+    expect(result).toEqual([
+      { value: 'Song Title', isMatch: false },
+      { value: ' (remix)', isMatch: true },
+      { value: ' (live)', isMatch: true },
+      { value: ' (2024)', isMatch: true },
+    ]);
+  });
+
+  it('marks extra spaces', () => {
+    const str = 'Song Title (remix) - More';
+    const pattern = /\(remix\)/gi;
+    const result = breakStringUsingPattern(str, pattern);
+    expect(result).toEqual([
+      { value: 'Song Title', isMatch: false },
+      { value: ' (remix)', isMatch: true },
+      { value: ' - More', isMatch: false },
+    ]);
+  });
+
+  it('returns the whole string as non-matching if pattern is not found', () => {
+    const str = 'Song Title (remix)';
+    const pattern = /\(live\)/gi;
+    const result = breakStringUsingPattern(str, pattern);
+    expect(result).toEqual([{ value: 'Song Title (remix)', isMatch: false }]);
+  });
+
+  it('returns the whole string as non-matching if pattern is null', () => {
+    const str = 'Song Title (2024)';
+    const result = breakStringUsingPattern(str, null);
+    expect(result).toEqual([{ value: 'Song Title (2024)', isMatch: false }]);
+  });
+
+  it('returns an empty array if the string is empty', () => {
+    const str = '';
+    const pattern = /\(remix\)/gi;
+    const result = breakStringUsingPattern(str, pattern);
+    expect(result).toEqual([]);
+  });
+});
diff --git a/src/domains/scrobbleAlbum/CleanupContext.ts b/src/domains/scrobbleAlbum/CleanupContext.ts
new file mode 100644
index 0000000..eb2be39
--- /dev/null
+++ b/src/domains/scrobbleAlbum/CleanupContext.ts
@@ -0,0 +1,123 @@
+import { createContext } from 'react';
+import { escapeRegExp } from 'lodash-es';
+
+export type CleanupContext = {
+  // this type represents the content of the context, it's a regexp value (cleanupPattern) and the corresponidng state setter (setCleanupPattern)
+  cleanupPattern: RegExp | null;
+  setCleanupPattern: (pattern?: RegExp) => void;
+};
+
+type BreakStringResult = {
+  value: string;
+  isMatch: boolean;
+};
+
+export const CleanupPatternContext = createContext<CleanupContext>({
+  cleanupPattern: null,
+  setCleanupPattern: () => {},
+});
+
+export function cleanTitleWithPattern(title: string, pattern: RegExp): string {
+  if (!pattern) return title;
+
+  return breakStringUsingPattern(title, pattern)
+    .filter(({ isMatch }) => !isMatch)
+    .reduce((acc, { value }) => acc + value, '')
+    .trim();
+}
+
+/**
+ * Converts a string into a regular expression, to be used as cleanup pattern
+ * @param str string to be converted to pattern
+ * @returns regular expression using the given string
+ */
+export function strToCleanupPattern(str: string): RegExp {
+  if (!str || str.trim().length < 3) return;
+  const startsWithWord = str.match(/^\w/);
+  const prefix = startsWithWord ? '\\s?\\b' : ''; // disallow partial words
+
+  let postfix = '';
+  if (startsWithWord) {
+    // disallow partial words
+    postfix = '\\s?\\b';
+  } else if (str.match(/^[([]/)) {
+    // auto-close parenthesis and brackets
+    postfix = '[\\)\\]]?';
+  }
+  return new RegExp(`${prefix}${escapeRegExp(str)}${postfix}`, 'ig');
+}
+
+/**
+ * Breaks down the given string into pieces that match (or don't match) the given pattern
+ * @param str string to break down into parts
+ * @param pattern pattern to use to break down the string
+ */
+export function breakStringUsingPattern(str: string, pattern: RegExp): BreakStringResult[] {
+  if (!str) return [];
+
+  const __stringCrumble = (value: string, isMatch: boolean): BreakStringResult => ({
+    value,
+    isMatch,
+  });
+
+  if (!pattern) return [__stringCrumble(str, false)];
+
+  const matches = str.matchAll(pattern);
+
+  if (!matches) return [__stringCrumble(str, false)];
+
+  const crumbles = [] as BreakStringResult[];
+  const splitStr = str.split(pattern);
+
+  splitStr.forEach((part, index) => {
+    // This block checks interactions between valid parts for invalid combinations
+    // (extra spaces, empty parenthesis/brackets, more than one dash)
+    if (index > 0) {
+      let previous = splitStr[index - 1];
+
+      if (previous.match(/ +$/) && part.match(/^(\s|$)/)) {
+        // modify the previous crumble to remove the space
+        previous = previous.trimEnd();
+        crumbles[crumbles.length - 2].value = previous;
+        // and add the space to the corresponding match
+        crumbles[crumbles.length - 1].value = ' ' + crumbles[crumbles.length - 1].value;
+      }
+
+      if (previous.endsWith('(') && part.startsWith(')')) {
+        // modify the previous crumble to remove the empty parenthesis
+        crumbles[crumbles.length - 2].value = previous.slice(0, -1);
+        // add it to the corresponding match
+        crumbles[crumbles.length - 1].value = `(${crumbles[crumbles.length - 1].value})`;
+        // and remove it from the part we're currently processing
+        part = part.slice(1);
+      }
+
+      if (previous.endsWith('[') && part.startsWith(']')) {
+        // modify the previous crumble to remove the empty brackets
+        crumbles[crumbles.length - 2].value = previous.slice(0, -1);
+        // add it to the corresponding match
+        crumbles[crumbles.length - 1].value = `[${crumbles[crumbles.length - 1].value}]`;
+        // and remove it from the part we're currently processing
+        part = part.slice(1);
+      }
+
+      if (previous.match(/[-–—]$/) && (!part || part.match(/^\s*[-–—]/))) {
+        const removedChar = previous.at(-1);
+        // modify the previous crumble to remove the extra dash
+        crumbles[crumbles.length - 2].value = previous.slice(0, -1);
+        // and add it to the corresponding match
+        crumbles[crumbles.length - 1].value = removedChar + crumbles[crumbles.length - 1].value;
+      }
+    }
+
+    // Then we add the current part to the crumbles array
+    crumbles.push(__stringCrumble(part, false));
+
+    // And its corresponding match, if there is one
+    const match = matches.next();
+    if (match.done) return;
+    crumbles.push(__stringCrumble(match.value[0], true));
+  });
+
+  return crumbles.filter((crumble) => crumble.value);
+}
diff --git a/src/domains/scrobbleAlbum/ScrobbleAlbumTracklist.tsx b/src/domains/scrobbleAlbum/ScrobbleAlbumTracklist.tsx
index 0b68ec3..995dd5b 100644
--- a/src/domains/scrobbleAlbum/ScrobbleAlbumTracklist.tsx
+++ b/src/domains/scrobbleAlbum/ScrobbleAlbumTracklist.tsx
@@ -19,6 +19,7 @@ import { MAX_RECENT_ALBUMS, PROVIDER_DISCOGS, PROVIDER_LASTFM } from 'Constants'
 
 import { albumGetInfo as DiscogsAlbumGetInfo } from 'utils/clients/discogs';
 import { albumGetInfo as LastfmAlbumGetInfo } from 'utils/clients/lastfm';
+import { CleanupPatternContext } from './CleanupContext';
 import useLocalStorage from 'hooks/useLocalStorage';
 
 import type { RootState } from 'store';
@@ -38,6 +39,7 @@ export function ScrobbleAlbumTracklist() {
   const [triedAlternativeProvider, setTriedAlternativeProvider] = useState(false);
   const scrobbles = useSelector((state: RootState) => state.scrobbles.list);
   const [recentAlbums, setRecentAlbums] = useLocalStorage<Album[]>('recentAlbums', []);
+  const [cleanupPattern, setCleanupPattern] = useState<RegExp>();
 
   const albumId = sanitizeParam(params.albumId);
   const discogsId = sanitizeParam(params.discogsId);
@@ -145,11 +147,13 @@ export function ScrobbleAlbumTracklist() {
       />
       <div className="row mb-5">
         <div className="col-md-7 mb-4">
-          {showTracklist ? (
-            <Tracklist tracks={albumInfo.data?.tracks || []} albumInfo={albumInfo.data?.info} />
-          ) : (
-            <Spinner />
-          )}
+          <CleanupPatternContext.Provider value={{ cleanupPattern, setCleanupPattern }}>
+            {showTracklist ? (
+              <Tracklist tracks={albumInfo.data?.tracks || []} albumInfo={albumInfo.data?.info} />
+            ) : (
+              <Spinner />
+            )}
+          </CleanupPatternContext.Provider>
         </div>
         <div className="col-md-5">
           <div className="d-flex flex-row justify-content-between">
diff --git a/src/domains/scrobbleAlbum/partials/Tracklist.tsx b/src/domains/scrobbleAlbum/partials/Tracklist.tsx
index 8d9da59..a1956c2 100644
--- a/src/domains/scrobbleAlbum/partials/Tracklist.tsx
+++ b/src/domains/scrobbleAlbum/partials/Tracklist.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, Suspense, useMemo } from 'react';
+import { useState, useEffect, Suspense, useMemo, useCallback, ChangeEventHandler, useContext } from 'react';
 import lazyWithPreload from 'react-lazy-with-preload';
 import { useDispatch } from 'react-redux';
 import { Trans, useTranslation } from 'react-i18next';
@@ -17,7 +17,9 @@ import { enqueueScrobble } from 'store/actions/scrobbleActions';
 
 import { DEFAULT_SONG_DURATION, getAmznLink } from 'Constants';
 
+import { cleanTitleWithPattern, CleanupPatternContext } from '../CleanupContext';
 import { EmptyDiscMessage } from './EmptyDiscMessage';
+import { TracklistFilter } from './TracklistFilter';
 
 import type { Album, DiscogsAlbum } from 'utils/types/album';
 import type { Scrobble } from 'utils/types/scrobble';
@@ -41,6 +43,8 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
   const [useCustomTimestamp, setUseCustomTimestamp] = useState(false);
   const [selectedTracks, setSelectedTracks] = useState<Set<string>>(new Set());
   const [totalDuration, setTotalDuration] = useState(0);
+  const { cleanupPattern } = useContext(CleanupPatternContext);
+
   const albumHasTracks = tracks && tracks.length > 0;
   const hasAlbumInfo = !!albumInfo && Object.keys(albumInfo).length > 0;
 
@@ -112,6 +116,7 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
       .reduce((result, track) => {
         const newTrack = {
           ...track,
+          title: cleanTitleWithPattern(track.title, cleanupPattern),
           album: albumInfo?.name || '',
           albumArtist: albumInfo?.artist || '',
           timestamp: rollingTimestamp,
@@ -130,7 +135,8 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
         }
 
         return result;
-      }, []);
+      }, [])
+      .filter(({ title }) => title !== '');
 
     enqueueScrobble(dispatch)(tracksToScrobble);
     setCanScrobble(selectedTracks.size > 0);
@@ -239,6 +245,7 @@ export default function Tracklist({ albumInfo, tracks }: { albumInfo: Album | nu
         </div>
       )}
 
+      <TracklistFilter />
       <ScrobbleList
         compact
         isAlbum
diff --git a/src/domains/scrobbleAlbum/partials/TracklistFilter.scss b/src/domains/scrobbleAlbum/partials/TracklistFilter.scss
new file mode 100644
index 0000000..c2cd6f8
--- /dev/null
+++ b/src/domains/scrobbleAlbum/partials/TracklistFilter.scss
@@ -0,0 +1,5 @@
+.TracklistFilter {
+  &-container {
+    height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2)); // boils down to 32px
+  }
+}
diff --git a/src/domains/scrobbleAlbum/partials/TracklistFilter.tsx b/src/domains/scrobbleAlbum/partials/TracklistFilter.tsx
new file mode 100644
index 0000000..f860c93
--- /dev/null
+++ b/src/domains/scrobbleAlbum/partials/TracklistFilter.tsx
@@ -0,0 +1,42 @@
+import { ChangeEventHandler, useCallback, useContext, useState } from 'react';
+import { Trans } from 'react-i18next';
+import { Input } from 'reactstrap';
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { CleanupPatternContext, strToCleanupPattern } from '../CleanupContext';
+
+import './TracklistFilter.scss';
+
+export function TracklistFilter() {
+  const [showForm, setFormVisible] = useState(false);
+  const { setCleanupPattern } = useContext(CleanupPatternContext);
+  const [value, setValue] = useState('');
+
+  const handleCleanupPatternChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    (event) => {
+      const { value } = event.target;
+      setValue(value);
+      setCleanupPattern(strToCleanupPattern(value));
+    },
+    [setCleanupPattern]
+  );
+
+  return (
+    <div className="d-flex flex-row-reverse align-items-center TracklistFilter-container">
+      <FontAwesomeIcon icon={faFilter} className="text-secondary" onClick={() => setFormVisible(!showForm)} />
+      {showForm && (
+        <div className="me-2 d-flex flex-row">
+          <label htmlFor="albumCleanupPattern">
+            <Trans i18nKey="filter" />:
+          </label>
+          <Input
+            className="form-control-sm form-control ms-2"
+            id="albumCleanupPattern"
+            onChange={handleCleanupPatternChange}
+            value={value}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/utils/common.test.ts b/src/utils/common.test.ts
index 6f01874..214c16c 100644
--- a/src/utils/common.test.ts
+++ b/src/utils/common.test.ts
@@ -47,12 +47,12 @@ describe('`sanitizeProvider` helper', () => {
   it('returns a custom default provider when an invalid one is given', () => {
     expect(sanitizeProvider('winamp', 'lastfm')).toBe('lastfm');
   });
+});
 
-  describe('`sha256` digest', () => {
-    it('returns the correct SHA-256 hash for a given string', () => {
-      const str = 'hello world';
-      const expectedHash = 'b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9';
-      sha256(str).then((hash) => expect(hash).toBe(expectedHash));
-    });
+describe('`sha256` digest', () => {
+  it('returns the correct SHA-256 hash for a given string', () => {
+    const str = 'hello world';
+    const expectedHash = 'b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9';
+    sha256(str).then((hash) => expect(hash).toBe(expectedHash));
   });
 });