diff --git a/.vscode/launch.json b/.vscode/launch.json
index 9311995..39deac0 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -4,6 +4,13 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "name": "Debug movies-db-ui",
+            "request": "launch",
+            "type": "chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/movies-db-ui",
+        },
         {
             "type": "lldb",
             "request": "launch",
diff --git a/movies-db-service/movies-db/Cargo.toml b/movies-db-service/movies-db/Cargo.toml
index b144f77..438b6a1 100644
--- a/movies-db-service/movies-db/Cargo.toml
+++ b/movies-db-service/movies-db/Cargo.toml
@@ -20,6 +20,7 @@ serde_json = "1.0"
 async-trait = "0.1"
 actix-cors = "0.6"
 rusqlite = { version = "0.29", features = ["bundled"] }
+serde_qs = { version = "0.12", features = ["actix4"]}
 
 [dev-dependencies]
 tempdir = "0.3"
diff --git a/movies-db-service/movies-db/src/db/movies_index.rs b/movies-db-service/movies-db/src/db/movies_index.rs
index efc8980..a49e0d5 100644
--- a/movies-db-service/movies-db/src/db/movies_index.rs
+++ b/movies-db-service/movies-db/src/db/movies_index.rs
@@ -165,6 +165,9 @@ pub trait MoviesIndex: Send + Sync {
     /// # Arguments
     /// `query` - The query to search for.
     async fn search_movies(&self, query: MovieSearchQuery) -> Result<Vec<MovieId>, Error>;
+
+    /// Returns a list of all tags with the number of movies associated with each tag.
+    async fn get_tag_list_with_count(&self) -> Result<Vec<(String, usize)>, Error>;
 }
 
 #[cfg(test)]
diff --git a/movies-db-service/movies-db/src/db/simple_movies_index.rs b/movies-db-service/movies-db/src/db/simple_movies_index.rs
index 6bed2f0..2b13bc9 100644
--- a/movies-db-service/movies-db/src/db/simple_movies_index.rs
+++ b/movies-db-service/movies-db/src/db/simple_movies_index.rs
@@ -185,6 +185,24 @@ impl MoviesIndex for SimpleMoviesIndex {
 
         Ok(movie_ids)
     }
+
+    async fn get_tag_list_with_count(&self) -> Result<Vec<(String, usize)>, Error> {
+        info!("Getting tag list with count");
+
+        let mut tag_map: HashMap<String, usize> = HashMap::new();
+
+        for movie in self.movies.values() {
+            for tag in movie.movie.tags.iter() {
+                let count = tag_map.entry(tag.clone()).or_insert(0);
+                *count += 1;
+            }
+        }
+
+        let mut tag_list: Vec<(String, usize)> = tag_map.into_iter().collect();
+        tag_list.sort_unstable_by(|(_, lhs), (_, rhs)| rhs.cmp(lhs));
+
+        Ok(tag_list)
+    }
 }
 
 impl SimpleMoviesIndex {
diff --git a/movies-db-service/movies-db/src/db/sqlite_movies_index.rs b/movies-db-service/movies-db/src/db/sqlite_movies_index.rs
index 165f00d..36eabaf 100644
--- a/movies-db-service/movies-db/src/db/sqlite_movies_index.rs
+++ b/movies-db-service/movies-db/src/db/sqlite_movies_index.rs
@@ -411,6 +411,28 @@ impl MoviesIndex for SqliteMoviesIndex {
     async fn search_movies(&self, query: MovieSearchQuery) -> Result<Vec<MovieId>, Error> {
         self.search_movies_impl(query).await
     }
+
+    async fn get_tag_list_with_count(&self) -> Result<Vec<(String, usize)>, Error> {
+        let connection = self.connection.lock().await;
+
+        let mut stmt = connection.prepare(
+            "SELECT tag, COUNT(*) FROM tags GROUP BY tag ORDER BY COUNT(*) DESC, tag ASC",
+        )?;
+
+        let rows = stmt.query_map([], |row| {
+            let tag: String = row.get(0)?;
+            let count: usize = row.get(1)?;
+
+            Ok((tag, count))
+        })?;
+
+        let mut tags: Vec<(String, usize)> = Vec::new();
+        for row in rows {
+            tags.push(row?);
+        }
+
+        Ok(tags)
+    }
 }
 
 #[cfg(test)]
diff --git a/movies-db-service/movies-db/src/service/service_handler.rs b/movies-db-service/movies-db/src/service/service_handler.rs
index 7730827..a23875f 100644
--- a/movies-db-service/movies-db/src/service/service_handler.rs
+++ b/movies-db-service/movies-db/src/service/service_handler.rs
@@ -504,6 +504,9 @@ where
     }
 
     /// Handles the request to show the list of all movies.
+    ///
+    /// # Arguments
+    /// * `query` - The query to search for.
     pub async fn handle_search_movies(&self, query: MovieSearchQuery) -> Result<impl Responder> {
         let movie_ids = match self.index.read().await.search_movies(query).await {
             Ok(movie_ids) => movie_ids,
@@ -525,6 +528,20 @@ where
         Ok(web::Json(movies))
     }
 
+    /// Handles the request to get a list of all tags with the number of movies associated with
+    /// each tag.
+    pub async fn handle_get_tags(&self) -> Result<impl Responder> {
+        let tags = match self.index.read().await.get_tag_list_with_count().await {
+            Ok(tags) => tags,
+            Err(err) => {
+                error!("Error getting tags: {}", err);
+                return Self::handle_error(err);
+            }
+        };
+
+        Ok(web::Json(tags))
+    }
+
     /// Handles the given error by translating it into an actix-web error response.
     ///
     /// # Arguments
diff --git a/movies-db-service/movies-db/src/service/service_impl.rs b/movies-db-service/movies-db/src/service/service_impl.rs
index bdb9370..adc407d 100644
--- a/movies-db-service/movies-db/src/service/service_impl.rs
+++ b/movies-db-service/movies-db/src/service/service_impl.rs
@@ -5,6 +5,7 @@ use actix_multipart::Multipart;
 use actix_web::{http::header, web, App, HttpServer, Responder, Result};
 
 use log::{debug, error, info, trace};
+use serde_qs::actix::QsQuery;
 use tokio::sync::{mpsc, RwLock};
 
 use crate::{
@@ -104,6 +105,7 @@ where
                 .route("/movie", web::get().to(Self::handle_get_movie))
                 .route("/movie", web::delete().to(Self::handle_delete_movie))
                 .route("/movie/search", web::get().to(Self::handle_search_movie))
+                .route("/movie/tags", web::get().to(Self::handle_get_tags))
                 .route("/movie/file", web::post().to(Self::handle_upload_movie))
                 .route("/movie/file", web::get().to(Self::handle_download_movie))
                 .route(
@@ -188,7 +190,7 @@ where
     /// * `query` - The query parameters.
     async fn handle_search_movie(
         handler: web::Data<RwLock<ServiceHandler<I, S>>>,
-        query: web::Query<MovieSearchQuery>,
+        query: QsQuery<MovieSearchQuery>,
     ) -> Result<impl Responder> {
         debug!("Handling GET /api/v1/movie/search");
         trace!("Request query: {:?}", query);
@@ -200,6 +202,20 @@ where
         handler.handle_search_movies(query).await
     }
 
+    /// Handles the GET /api/v1/tags endpoint.
+    ///
+    /// # Arguments
+    /// * `handler` - The service handler.
+    async fn handle_get_tags(
+        handler: web::Data<RwLock<ServiceHandler<I, S>>>,
+    ) -> Result<impl Responder> {
+        debug!("Handling GET /api/v1/movie/tags");
+
+        let handler = handler.read().await;
+
+        handler.handle_get_tags().await
+    }
+
     /// Handles the GET /api/v1/movie endpoint.
     ///
     /// # Arguments
diff --git a/movies-db-ui/src/App.tsx b/movies-db-ui/src/App.tsx
index 0435125..db5936e 100644
--- a/movies-db-ui/src/App.tsx
+++ b/movies-db-ui/src/App.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import './App.css';
 import AddVideoDialog from './components/AddVideoDialog';
-import { AppBar, Box, Button, Toolbar } from '@mui/material';
+import { AppBar, Box, Button, Toolbar, Typography } from '@mui/material';
 import { MovieSubmit } from './service/types';
 import { service } from './service/service';
 import LoadingDialog, { LoadingDialogProps } from './components/LoadingDialog';
 import VideosList from './components/VideosList';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import AddIcon from '@mui/icons-material/Add';
+import Search from './components/Search';
 
 const theme = createTheme({
   palette: {
@@ -44,8 +46,34 @@ function App() {
           <div>
             <Box sx={{ flexGrow: 1 }}>
               <AppBar position="static">
-                <Toolbar>
-                  <Button color="primary" onClick={() => setVideoDialogOpen(true)}>Add Video</Button>
+                <Toolbar sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                  <Box sx={{ flexGrow: 1 }}>
+                    <Typography
+                      variant="h6"
+                      noWrap
+                      component="a"
+                      href="/"
+                      sx={{
+                        mr: 2,
+                        display: { xs: 'none', md: 'flex' },
+                        fontFamily: 'monospace',
+                        fontWeight: 700,
+                        letterSpacing: '.2rem',
+                        color: 'inherit',
+                        textDecoration: 'none',
+                      }}
+                    >
+                      Movie DB
+                    </Typography>
+                  </Box>
+                  <Box sx={{ flexGrow: 2 }}>
+                    <Search onSearch={s => service.setSearchString(s)} />
+                  </Box>
+                  <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end' }}>
+                    <Button color="primary" variant='contained' onClick={() => setVideoDialogOpen(true)} startIcon={<AddIcon />}>
+                      Add Video
+                    </Button>
+                  </Box>
                 </Toolbar>
               </AppBar>
             </Box>
diff --git a/movies-db-ui/src/components/Search.tsx b/movies-db-ui/src/components/Search.tsx
new file mode 100644
index 0000000..936ce39
--- /dev/null
+++ b/movies-db-ui/src/components/Search.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import InputBase from '@mui/material/InputBase';
+import SearchIcon from '@mui/icons-material/Search';
+import { IconButton, MenuItem, Paper } from '@mui/material';
+
+export interface SearchProps {
+    onSearch?: (query: string) => void;
+}
+
+export default function Search(props: SearchProps) {
+    const [query, setQuery] = React.useState("");
+
+    const handleSearch = () => {
+        if (props.onSearch) {
+            props.onSearch(query);
+        }
+    };
+
+    return (
+        <Paper
+            sx={{ p: '2px 4px', flexGrow: 1, display: 'flex', alignItems: 'center' }}
+        >
+            <IconButton sx={{ p: '10px' }} aria-label="menu">
+                <MenuItem />
+            </IconButton>
+            <InputBase
+                value={query}
+                sx={{ ml: 1, flex: 1 }}
+                placeholder="Search"
+                inputProps={{ 'aria-label': 'search' }}
+                onChange={e => setQuery(e.target.value)}
+                onKeyDown={e => {
+                    if (e.key === 'Enter') {
+                        handleSearch();
+                    }
+                }}
+            />
+            <IconButton type="button" sx={{ p: '10px' }} onClick={() => handleSearch()}>
+                <SearchIcon />
+            </IconButton>
+        </Paper>
+    );
+}
\ No newline at end of file
diff --git a/movies-db-ui/src/components/VideoCard.tsx b/movies-db-ui/src/components/VideoCard.tsx
index b158d85..78596ad 100644
--- a/movies-db-ui/src/components/VideoCard.tsx
+++ b/movies-db-ui/src/components/VideoCard.tsx
@@ -57,7 +57,7 @@ export default function VideoCard(props: VideoCardProps): JSX.Element {
     };
 
     return (
-        <Card elevation={3} sx={{ maxWidth: 345 }}>
+        <Card elevation={3} sx={{ width: 345, height: 448 }}>
             <CardHeader
                 action={
                     <IconButton aria-label="settings" onClick={handleOnDelete}>
@@ -84,9 +84,9 @@ export default function VideoCard(props: VideoCardProps): JSX.Element {
                     </Typography>
                 </CardContent>
             </CardActionArea>
-            <CardActions disableSpacing>
+            <CardActions >
                 {movie.tags ? movie.tags.map((tag, index) => {
-                    return <Chip key={index} label={tag} />
+                    return <Chip key={index} size="small" label={tag} />
                 }) : <div></div>}
             </CardActions>
 
diff --git a/movies-db-ui/src/components/VideoListFilters.tsx b/movies-db-ui/src/components/VideoListFilters.tsx
new file mode 100644
index 0000000..5e93b3f
--- /dev/null
+++ b/movies-db-ui/src/components/VideoListFilters.tsx
@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { Box, Chip, IconButton, Menu, MenuItem } from '@mui/material';
+import IconSort from '@mui/icons-material/SortRounded';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Check from '@mui/icons-material/Check';
+import { SortingField, SortingOrder } from '../service/types';
+
+enum SortingOption {
+    TitleAscending,
+    TitleDescending,
+    DateAscending,
+    DateDescending,
+}
+
+export interface VideoListFilterProps {
+    tagList: [string, number][];
+    onChangeTags?: (tags: string[]) => void;
+    onChangeSorting?: (sorting_field: SortingField, sorting_order: SortingOrder) => void;
+}
+
+const menuOptions = [
+    {
+        label: "Date descending",
+        value: SortingOption.DateDescending,
+    },
+    {
+        label: "Date ascending",
+        value: SortingOption.DateAscending,
+    },
+    {
+        label: "Title descending",
+        value: SortingOption.TitleDescending,
+    },
+    {
+        label: "Title ascending",
+        value: SortingOption.TitleAscending,
+    },
+]
+
+export default function VideoListFilter(props: VideoListFilterProps) {
+    const [tags, setTags] = React.useState<string[]>([]);
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const [sortingOption, setSortingOption] = React.useState<SortingOption>(SortingOption.DateDescending);
+
+    const handleToggleTag = (tagName: string) => {
+        if (tagName === "") {
+            setTags([]);
+            return;
+        }
+
+        const index = tags.indexOf(tagName);
+        if (index === -1) {
+            setTags([...tags, tagName]);
+        } else {
+            setTags(tags.filter((_, i) => i !== index));
+        }
+    };
+
+    React.useEffect(() => {
+        if (props.onChangeTags) {
+            props.onChangeTags(tags);
+        }
+    }, [tags, props]);
+
+    React.useEffect(() => {
+        const handleSorting = (option: SortingOption) => {
+            if (!props.onChangeSorting) {
+                return;
+            }
+
+            switch (option) {
+                case SortingOption.DateAscending:
+                    props.onChangeSorting(SortingField.Date, SortingOrder.Ascending);
+                    break;
+                case SortingOption.DateDescending:
+                    props.onChangeSorting(SortingField.Date, SortingOrder.Descending);
+                    break;
+                case SortingOption.TitleAscending:
+                    props.onChangeSorting(SortingField.Title, SortingOrder.Ascending);
+                    break;
+                case SortingOption.TitleDescending:
+                    props.onChangeSorting(SortingField.Title, SortingOrder.Descending);
+                    break;
+            }
+        };
+
+        handleSorting(sortingOption);
+    }, [sortingOption, props]);
+
+    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <Box sx={{
+            overflow: 'hidden',
+            maxWidth: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center',
+        }}>
+            <Box className="scrollButNoScrollbar" sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'nowrap',
+                padding: '10px',
+                width: '80%',
+                overflowX: 'scroll',
+            }}>
+                <Chip onClick={() => handleToggleTag("")} variant={tags.length === 0 ? 'filled' : 'outlined'} label="All" clickable />
+                {props.tagList.map(([tagName, _]) => {
+                    return (<Box key={tagName} sx={{ marginLeft: '8px' }}>
+                        <Chip onClick={() => handleToggleTag(tagName)} variant={tags.indexOf(tagName) === -1 ? 'outlined' : 'filled'} label={tagName} clickable />
+                    </Box>);
+                })}
+            </Box>
+            <Menu
+                anchorEl={anchorEl}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+                keepMounted
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}>
+                {menuOptions.map(option => {
+                    return (<MenuItem key={option.value} onClick={() => {
+                        setSortingOption(option.value);
+                        handleClose();
+                    }}>
+                        {option.value === sortingOption ? <ListItemIcon><Check fontSize="small" /></ListItemIcon> : <></>}
+                        {option.label}
+                    </MenuItem>
+                    )
+                })}
+            </Menu>
+            <Box sx={{ marginLeft: '32px', display: 'flex' }}>
+                <IconButton type="button" onClick={handleMenu}>
+                    <IconSort />
+                </IconButton>
+            </Box>
+        </Box>
+    );
+}
\ No newline at end of file
diff --git a/movies-db-ui/src/components/VideoPlayer.tsx b/movies-db-ui/src/components/VideoPlayer.tsx
index 6aaec8f..edabff0 100644
--- a/movies-db-ui/src/components/VideoPlayer.tsx
+++ b/movies-db-ui/src/components/VideoPlayer.tsx
@@ -57,7 +57,7 @@ export default function VideoPlayer(props: VideoPlayerProps) {
                 }}>
                     <video controls src={movieURL} style={{
                         marginTop: '16px',
-                        width: '50%'
+                        height: '50vh',
                     }} />
                     <div style={{
                         marginTop: '16px',
diff --git a/movies-db-ui/src/components/VideosList.tsx b/movies-db-ui/src/components/VideosList.tsx
index 6cd8096..52eb729 100644
--- a/movies-db-ui/src/components/VideosList.tsx
+++ b/movies-db-ui/src/components/VideosList.tsx
@@ -1,35 +1,36 @@
-import { Paper } from '@mui/material';
+import { Box, Paper } from '@mui/material';
 import * as React from 'react';
 import VideoCard from './VideoCard';
 import { service } from '../service/service';
-import { MovieId, MovieSearchQuery, SortingField, SortingOrder } from '../service/types';
+import { MovieId, SortingField, SortingOrder } from '../service/types';
 import YesNoDialog from './YesNoDialog';
 import VideoPlayer from './VideoPlayer';
+import VideoListFilter from './VideoListFilters';
 
 export default function VideosList(): JSX.Element {
     const [movieIds, setMovieIds] = React.useState<string[]>([]);
+    const [tagList, setTagList] = React.useState<[string, number][]>([]);
     const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
     const [movieToDelete, setMovieToDelete] = React.useState<MovieId | null>(null);
     const [movieToPlay, setMovieToPlay] = React.useState<MovieId | null>(null);
 
     // update list of movies
     const updateList = async () => {
-        const query: MovieSearchQuery = {
-            sorting_field: SortingField.Date,
-            sorting_order: SortingOrder.Descending,
-        }
-
-        const movies = await service.searchMovies(query);
+        const movies = await service.searchMovies();
         const movieIds = movies.map((movie) => {
             return movie.id;
         });
 
+        setTagList(await service.getTags());
+
         setMovieIds(movieIds);
     };
 
     // get list of movies
     React.useEffect(() => {
         updateList();
+
+        service.registerVideoListUpdate(updateList);
     }, []);
 
     const handleOnDelete1 = (movieId: MovieId) => {
@@ -44,7 +45,6 @@ export default function VideosList(): JSX.Element {
         }
 
         await service.removeMovie(movieToDelete);
-        await updateList();
     };
 
     const handleOnShow = (movieId: MovieId) => {
@@ -52,9 +52,17 @@ export default function VideosList(): JSX.Element {
         setMovieToPlay(movieId);
     };
 
+    const handleChangeTags = (tags: string[]) => {
+        service.setSearchTags(tags);
+    };
+
+    const handleChangeSorting = (sorting_field: SortingField, sorting_order: SortingOrder) => {
+        service.setSorting(sorting_field, sorting_order);
+    };
+
     return (<Paper style={{
         display: 'flex',
-        flexDirection: 'row',
+        flexDirection: 'column',
         flexWrap: 'wrap',
         justifyContent: 'flex-start',
         alignItems: 'flex-start',
@@ -66,16 +74,27 @@ export default function VideosList(): JSX.Element {
             open={deleteDialogOpen}
             onClose={() => setDeleteDialogOpen(false)}
             onAccept={() => handleOnDelete2()} />
-        {movieToPlay ? <VideoPlayer open={movieToPlay !== null} movieId={movieToPlay} onClose={() => setMovieToPlay(null)} /> : <></>}
-        {
-            movieIds.map((movieId) => {
-                return (<div key={movieId} style={{
-                    margin: '16px',
-                }}>
-                    <VideoCard movieId={movieId} onDelete={() => handleOnDelete1(movieId)} onShow={() => handleOnShow(movieId)} />
-                </div>);
-            })
-        }
-
+        <VideoListFilter tagList={tagList} onChangeTags={handleChangeTags} onChangeSorting={handleChangeSorting} />
+        <Box className='scrollButNoScrollbar' sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            flexGrow: 1,
+            overflowY: 'scroll',
+            maxHeight: 'calc(100vh - 64px - 48px - 48px)',
+        }}>
+            {movieToPlay ? <VideoPlayer open={movieToPlay !== null} movieId={movieToPlay} onClose={() => setMovieToPlay(null)} /> : <></>}
+            {
+                movieIds.map((movieId) => {
+                    return (<div key={movieId} style={{
+                        margin: '16px',
+                    }}>
+                        <VideoCard movieId={movieId} onDelete={() => handleOnDelete1(movieId)} onShow={() => handleOnShow(movieId)} />
+                    </div>);
+                })
+            }
+        </Box>
     </Paper >)
 }
\ No newline at end of file
diff --git a/movies-db-ui/src/index.css b/movies-db-ui/src/index.css
index 904c051..c7fb452 100644
--- a/movies-db-ui/src/index.css
+++ b/movies-db-ui/src/index.css
@@ -22,4 +22,13 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
+}
+
+.scrollButNoScrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollButNoScrollbar::-webkit-scrollbar {
+  display: none;
 }
\ No newline at end of file
diff --git a/movies-db-ui/src/service/service.ts b/movies-db-ui/src/service/service.ts
index 207fb0e..f21c5f6 100644
--- a/movies-db-ui/src/service/service.ts
+++ b/movies-db-ui/src/service/service.ts
@@ -1,12 +1,22 @@
-import { MovieDetailed, MovieId, MovieSearchQuery, MovieSearchResult, MovieSubmit } from "./types";
+import { MovieDetailed, MovieId, MovieSearchQuery, MovieSearchResult, MovieSubmit, SortingField, SortingOrder } from "./types";
 
 export type ProgressUpdate = (progress: number, done: boolean) => void;
 
+export type VideoListUpdate = () => void;
+
 export class Service {
     private endpoint: string;
+    private query: MovieSearchQuery;
+    private videoListUpdate: Set<VideoListUpdate> = new Set<VideoListUpdate>();
 
     constructor(endpoint: string) {
         this.endpoint = endpoint;
+        this.query = {
+            sorting_field: SortingField.Date,
+            sorting_order: SortingOrder.Descending,
+            num_results: undefined,
+            start_index: 0,
+        };
     }
 
     /**
@@ -22,6 +32,8 @@ export class Service {
         const id = await this.submitMovieInfo(movie);
         await this.submitMovieFile(id, file, progressUpdate);
 
+        this.notifyVideoListUpdate();
+
         return id;
     }
 
@@ -44,6 +56,23 @@ export class Service {
         return movie;
     }
 
+    /**
+     * Returns a list of all tags sorted by the number of movies they are assigned to.
+     *
+     * @returns list of tags.
+     */
+    public async getTags(): Promise<[string, number][]> {
+        const response = await fetch(`${this.endpoint}/movie/tags`);
+
+        if (!response.ok) {
+            throw new Error("Failed to get tags");
+        }
+
+        const tags = await response.json() as [string, number][];
+
+        return tags;
+    }
+
     /**
      * Deletes the movie with the given id.
      * 
@@ -57,6 +86,8 @@ export class Service {
         if (!response.ok) {
             throw new Error("Failed to remove movie");
         }
+
+        this.notifyVideoListUpdate();
     }
 
     /**
@@ -66,16 +97,23 @@ export class Service {
      * 
      * @returns a list of movie ids with title matching the given query in the given order.
      **/
-    public async searchMovies(query: MovieSearchQuery): Promise<MovieSearchResult> {
-        const queryString = `sorting_order=${query.sorting_order}&sorting_field=${query.sorting_field}`;
-        if (query.title) {
-            queryString.concat(`&title=${query.title}`);
+    public async searchMovies(): Promise<MovieSearchResult> {
+        const query = this.query;
+
+        let queryString = `sorting_order=${query.sorting_order}&sorting_field=${query.sorting_field}`;
+        if (query.title !== undefined) {
+            queryString = queryString.concat(`&title=${query.title}`);
+        }
+        if (query.start_index !== undefined) {
+            queryString = queryString.concat(`&start_index=${query.start_index}`);
         }
-        if (query.start_index) {
-            queryString.concat(`&start_index=${query.start_index}`);
+        if (query.num_results !== undefined) {
+            queryString = queryString.concat(`&num_results=${query.num_results}`);
         }
-        if (query.num_results) {
-            queryString.concat(`&num_results=${query.num_results}`);
+        if (query.tags !== undefined) {
+            query.tags.forEach((tag, index) => {
+                queryString = queryString.concat(`&tags[${index}]=${tag}`);
+            });
         }
 
         const response = await fetch(`${this.endpoint}/movie/search?${queryString}`, {
@@ -105,6 +143,73 @@ export class Service {
         return `${this.endpoint}/movie/screenshot?id=${id}`;
     }
 
+    /**
+     * Registers a callback to be called when the video list has been updated.
+     * 
+     * @param update - The callback to register.
+     */
+    public registerVideoListUpdate(update: VideoListUpdate): void {
+        this.videoListUpdate.add(update);
+    }
+
+    /**
+     * Sets the string to search for.
+     * 
+     * @param searchString - The string to search for.
+     */
+    public setSearchString(searchString: string): void {
+        if (searchString.length === 0) {
+            this.query.title = undefined;
+            this.notifyVideoListUpdate();
+            return;
+        }
+
+        if (searchString.startsWith("\"") && searchString.endsWith("\"")) {
+            searchString = searchString.substring(1, searchString.length - 1);
+            this.query.title = searchString;
+        } else {
+            if (!searchString.startsWith("*")) {
+                searchString = "*" + searchString;
+            }
+
+            if (!searchString.endsWith("*")) {
+                searchString = searchString + "*";
+            }
+
+            this.query.title = searchString;
+        }
+
+        this.notifyVideoListUpdate();
+    }
+
+    /**
+     * Sets the tags to search for.
+     * 
+     * @param tags - The tags to search for.
+     */
+    public setSearchTags(tags: string[]): void {
+        if (tags.length === 0) {
+            this.query.tags = undefined;
+        } else {
+            this.query.tags = tags;
+        }
+
+        this.notifyVideoListUpdate();
+    }
+
+    /**
+     * Sets the sorting field and order.
+     * 
+     * @param field - The field to sort by.
+     * @param order - The order to sort in.
+     */
+    public setSorting(field: SortingField, order: SortingOrder): void {
+        this.query.sorting_field = field;
+        this.query.sorting_order = order;
+
+        this.notifyVideoListUpdate();
+    }
+
     /**
      * Submits a video file for the given movie id.
      * 
@@ -176,6 +281,15 @@ export class Service {
 
         return id;
     }
+
+    /**
+     * Notifies all registered listeners that the video list has been updated.
+     */
+    private notifyVideoListUpdate(): void {
+        this.videoListUpdate.forEach((update) => {
+            update();
+        });
+    }
 }
 
 const SERVER_ADDRESS: string = (process.env.REACT_APP_SERVER_ADDRESS as string);