diff --git a/mediarepo-ui/src/app/models/Tag.ts b/mediarepo-ui/src/app/models/Tag.ts
index a5eb657..fac2eb1 100644
--- a/mediarepo-ui/src/app/models/Tag.ts
+++ b/mediarepo-ui/src/app/models/Tag.ts
@@ -1,5 +1,11 @@
-export type Tag = {
-  id: number,
-  name: string,
-  namespace: string | undefined,
+export class Tag {
+  constructor(
+    public id: number,
+    public name: string,
+    public namespace: string | undefined
+  ) {}
+
+  public getNormalizedOutput(): string {
+    return this.namespace ? this.namespace + ':' + this.name : this.name
+  }
 };
diff --git a/mediarepo-ui/src/app/pages/home/home.component.html b/mediarepo-ui/src/app/pages/home/home.component.html
index b338537..e9ad88f 100644
--- a/mediarepo-ui/src/app/pages/home/home.component.html
+++ b/mediarepo-ui/src/app/pages/home/home.component.html
@@ -23,9 +23,9 @@
 
       <div id="file-tag-list">
         <h1>Selection Tags</h1>
-        <mat-selection-list [multiple]="false" *ngIf="tags.length > 0">
+        <mat-selection-list [multiple]="false" *ngIf="tags.length > 0" (selectionChange)="addSearchTagFromList($event)">
           <mat-list-option
-            *ngFor="let tag of tags">{{tag.namespace ? tag.namespace + ':' + tag.name : tag.name}}</mat-list-option>
+            *ngFor="let tag of tags" [value]="tag.getNormalizedOutput()">{{tag.getNormalizedOutput()}}</mat-list-option>
         </mat-selection-list>
       </div>
       </div>
diff --git a/mediarepo-ui/src/app/pages/home/home.component.ts b/mediarepo-ui/src/app/pages/home/home.component.ts
index 3f047ae..3a594c4 100644
--- a/mediarepo-ui/src/app/pages/home/home.component.ts
+++ b/mediarepo-ui/src/app/pages/home/home.component.ts
@@ -9,6 +9,7 @@ import {TagService} from "../../services/tag/tag.service";
 import {Tag} from "../../models/Tag";
 import {MatChipInputEvent} from "@angular/material/chips";
 import {COMMA, ENTER} from "@angular/cdk/keycodes";
+import {MatSelectionListChange} from "@angular/material/list";
 
 @Component({
   selector: 'app-home',
@@ -65,6 +66,15 @@ export class HomeComponent implements OnInit {
     await this.fileService.findFiles(this.searchTags);
   }
 
+  async addSearchTagFromList(event: MatSelectionListChange) {
+    if (event.options.length > 0) {
+      const tag = event.options[0].value;
+      this.searchTags.push(tag);
+      await this.fileService.findFiles(this.searchTags);
+    }
+    event.source.deselectAll();
+  }
+
   async addSearchTag(event: MatChipInputEvent) {
     const tag = event.value.trim();
     if (tag.length > 0) {
diff --git a/mediarepo-ui/src/app/services/tag/tag.service.ts b/mediarepo-ui/src/app/services/tag/tag.service.ts
index 0e7f8f8..85f9046 100644
--- a/mediarepo-ui/src/app/services/tag/tag.service.ts
+++ b/mediarepo-ui/src/app/services/tag/tag.service.ts
@@ -10,6 +10,7 @@ export class TagService {
   constructor() { }
 
   public async getTagsForFile(hash: string): Promise<Tag[]> {
-    return await invoke<Tag[]>("get_tags_for_file", {hash});
+    const tags =  await invoke<Tag[]>("get_tags_for_file", {hash});
+    return tags.map(t => new Tag(t.id, t.name, t.namespace));
   }
 }