From a26f6f20fe51804b0cc8172e0c16b4e0bb0fd39e Mon Sep 17 00:00:00 2001
From: Geoffrey Kwan <geoffreykwan@gmail.com>
Date: Mon, 1 Jul 2024 15:06:50 -0700
Subject: [PATCH] feat(Teacher): Implement unit tagging (#1813)

Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
---
 package-lock.json                             |  24 ++
 package.json                                  |   2 +
 src/app/domain/archiveProjectResponse.ts      |   6 +-
 src/app/domain/project.ts                     |  28 +-
 src/app/domain/projectAndTagsResponse.ts      |   6 +
 src/app/domain/tag.ts                         |   7 +
 .../community-library.component.html          |   2 +-
 .../home-page-project-library.component.html  |   6 +-
 .../home-page-project-library.component.scss  |   5 +
 .../home-page-project-library.component.ts    |   4 +-
 .../library-filters.component.html            |   7 +-
 .../library-filters.component.ts              |   8 +-
 .../library-project-details.component.html    |   3 +-
 .../library-project-details.component.scss    |   2 +-
 .../library-project-menu.component.spec.ts    |   3 +-
 .../library-project-menu.component.ts         |   6 +-
 .../library-project.component.html            |   5 +-
 .../library-project.component.scss            |   7 +-
 .../library-project.component.spec.ts         |  22 +-
 .../library-project.component.ts              |  55 ++-
 src/app/modules/library/library.module.ts     |  15 +-
 .../library/library/library.component.scss    |   1 -
 .../official-library.component.html           |   2 +-
 .../personal-library.component.html           |  10 +-
 .../personal-library.component.spec.ts        |  25 +-
 .../personal-library.component.ts             |  38 +-
 .../select-all-items-checkbox.component.html  |   7 +-
 .../select-all-items-checkbox.component.scss  |   3 +
 ...elect-all-items-checkbox.component.spec.ts |   5 +-
 .../select-all-items-checkbox.component.ts    |  12 +-
 .../teacher-project-library.component.html    |  10 +-
 .../teacher-project-library.component.scss    |   6 +
 .../search-bar/search-bar.component.html      |  11 +-
 .../select-menu/select-menu.component.html    |   2 +-
 src/app/services/archive-project.service.ts   |  11 +-
 src/app/services/tagService.spec.ts           |   2 +-
 .../abstract-tags-menu.component.ts           |  86 ++++
 .../apply-tags-button.component.html          |  27 ++
 .../apply-tags-button.component.scss          |   3 +
 .../apply-tags-button.component.spec.ts       |  30 ++
 .../apply-tags-button.component.ts            |  91 +++++
 .../color-chooser.component.html              |  13 +
 .../color-chooser.component.scss              |  10 +
 .../color-chooser.component.spec.ts           |  20 +
 .../color-chooser/color-chooser.component.ts  |  29 ++
 .../teacher/edit-tag/edit-tag.component.html  |  40 ++
 .../teacher/edit-tag/edit-tag.component.scss  |   9 +
 .../edit-tag/edit-tag.component.spec.ts       |  25 ++
 .../teacher/edit-tag/edit-tag.component.ts    | 161 ++++++++
 .../manage-tags-dialog.component.html         |  58 +++
 .../manage-tags-dialog.component.scss         |  31 ++
 .../manage-tags-dialog.component.spec.ts      |  30 ++
 .../manage-tags-dialog.component.ts           | 101 +++++
 .../run-menu/run-menu.component.spec.ts       |  19 +-
 .../teacher/run-menu/run-menu.component.ts    |   4 +-
 .../select-tags/select-tags.component.html    |  31 ++
 .../select-tags/select-tags.component.scss    |  38 ++
 .../select-tags/select-tags.component.spec.ts |  24 ++
 .../select-tags/select-tags.component.ts      |  47 +++
 src/app/teacher/tag/tag.component.html        |  15 +
 src/app/teacher/tag/tag.component.scss        |  27 ++
 src/app/teacher/tag/tag.component.spec.ts     |  23 ++
 src/app/teacher/tag/tag.component.ts          |  29 ++
 .../teacher-run-list-item.component.html      |   2 +-
 .../teacher-run-list-item.component.spec.ts   |   5 +-
 .../teacher-run-list-item.component.ts        |  48 ++-
 .../teacher-run-list.component.html           | 149 +++----
 .../teacher-run-list.component.scss           |  18 +-
 .../teacher-run-list.component.spec.ts        |  30 +-
 .../teacher-run-list.component.ts             |  36 +-
 src/app/teacher/teacher.module.ts             |  18 +-
 src/app/teacher/teacher.service.ts            |   4 +
 .../unit-tags/unit-tags.component.html        |   7 +
 .../unit-tags/unit-tags.component.scss        |   4 +
 .../unit-tags/unit-tags.component.spec.ts     |  21 +
 .../teacher/unit-tags/unit-tags.component.ts  |  16 +
 src/assets/wise5/services/colorService.ts     |  10 +
 .../wise5/services/projectTagService.ts       |  67 ++++
 src/assets/wise5/services/tagService.ts       |   2 +-
 src/messages.xlf                              | 366 +++++++++++++-----
 src/style/abstracts/_mixins.scss              |  65 ++++
 src/style/components/_dialog.scss             |   2 +-
 src/style/styles.scss                         |   2 +
 83 files changed, 1940 insertions(+), 321 deletions(-)
 create mode 100644 src/app/domain/projectAndTagsResponse.ts
 create mode 100644 src/app/domain/tag.ts
 create mode 100644 src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.scss
 create mode 100644 src/app/teacher/abstract-tags-menu/abstract-tags-menu.component.ts
 create mode 100644 src/app/teacher/apply-tags-button/apply-tags-button.component.html
 create mode 100644 src/app/teacher/apply-tags-button/apply-tags-button.component.scss
 create mode 100644 src/app/teacher/apply-tags-button/apply-tags-button.component.spec.ts
 create mode 100644 src/app/teacher/apply-tags-button/apply-tags-button.component.ts
 create mode 100644 src/app/teacher/color-chooser/color-chooser.component.html
 create mode 100644 src/app/teacher/color-chooser/color-chooser.component.scss
 create mode 100644 src/app/teacher/color-chooser/color-chooser.component.spec.ts
 create mode 100644 src/app/teacher/color-chooser/color-chooser.component.ts
 create mode 100644 src/app/teacher/edit-tag/edit-tag.component.html
 create mode 100644 src/app/teacher/edit-tag/edit-tag.component.scss
 create mode 100644 src/app/teacher/edit-tag/edit-tag.component.spec.ts
 create mode 100644 src/app/teacher/edit-tag/edit-tag.component.ts
 create mode 100644 src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.html
 create mode 100644 src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.scss
 create mode 100644 src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.spec.ts
 create mode 100644 src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.ts
 create mode 100644 src/app/teacher/select-tags/select-tags.component.html
 create mode 100644 src/app/teacher/select-tags/select-tags.component.scss
 create mode 100644 src/app/teacher/select-tags/select-tags.component.spec.ts
 create mode 100644 src/app/teacher/select-tags/select-tags.component.ts
 create mode 100644 src/app/teacher/tag/tag.component.html
 create mode 100644 src/app/teacher/tag/tag.component.scss
 create mode 100644 src/app/teacher/tag/tag.component.spec.ts
 create mode 100644 src/app/teacher/tag/tag.component.ts
 create mode 100644 src/app/teacher/unit-tags/unit-tags.component.html
 create mode 100644 src/app/teacher/unit-tags/unit-tags.component.scss
 create mode 100644 src/app/teacher/unit-tags/unit-tags.component.spec.ts
 create mode 100644 src/app/teacher/unit-tags/unit-tags.component.ts
 create mode 100644 src/assets/wise5/services/colorService.ts
 create mode 100644 src/assets/wise5/services/projectTagService.ts

diff --git a/package-lock.json b/package-lock.json
index f7cc254a553..b3b49a24dca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@aws-sdk/client-transcribe-streaming": "^3.310.0",
         "@aws-sdk/client-translate": "^3.310.0",
         "@aws-sdk/credential-provider-cognito-identity": "^3.310.0",
+        "@ng-select/ng-select": "^12.0.7",
         "@ng-web-apis/common": "^2.0.1",
         "@ng-web-apis/intersection-observer": "^3.0.0",
         "@stomp/rx-stomp": "^1.1.4",
@@ -38,6 +39,7 @@
         "angular-password-strength-meter": "^11.0.0",
         "buffer": "^6.0.3",
         "canvg": "^2.0.0",
+        "colorjs.io": "^0.5.0",
         "compute-covariance": "^1.0.1",
         "core-js": "^3.22.0",
         "dom-autoscroller": "^2.3.4",
@@ -6300,6 +6302,23 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/@ng-select/ng-select": {
+      "version": "12.0.7",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-12.0.7.tgz",
+      "integrity": "sha512-Eht1zlLP0DJxiXcKnq3aY/EJ8odomgU0hM0BJoPY6oX3XFHndtFtdPxlZfhVtQn+FwyDEh7306rRx6digxVssA==",
+      "dependencies": {
+        "tslib": "^2.3.1"
+      },
+      "engines": {
+        "node": ">= 16",
+        "npm": ">= 8"
+      },
+      "peerDependencies": {
+        "@angular/common": "^17.0.0-rc.0",
+        "@angular/core": "^17.0.0-rc.0",
+        "@angular/forms": "^17.0.0-rc.0"
+      }
+    },
     "node_modules/@ng-web-apis/common": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ng-web-apis/common/-/common-2.2.0.tgz",
@@ -11131,6 +11150,11 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/colorjs.io": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.0.tgz",
+      "integrity": "sha512-qekjTiBLM3F/sXKks/ih5aWaHIGu+Ftel0yKEvmpbKvmxpNOhojKgha5uiWEUOqEpRjC1Tq3nJRT7WgdBOxIGg=="
+    },
     "node_modules/colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
diff --git a/package.json b/package.json
index e3db88170e5..20b57a64b6d 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@aws-sdk/client-transcribe-streaming": "^3.310.0",
     "@aws-sdk/client-translate": "^3.310.0",
     "@aws-sdk/credential-provider-cognito-identity": "^3.310.0",
+    "@ng-select/ng-select": "^12.0.7",
     "@ng-web-apis/common": "^2.0.1",
     "@ng-web-apis/intersection-observer": "^3.0.0",
     "@stomp/rx-stomp": "^1.1.4",
@@ -39,6 +40,7 @@
     "angular-password-strength-meter": "^11.0.0",
     "buffer": "^6.0.3",
     "canvg": "^2.0.0",
+    "colorjs.io": "^0.5.0",
     "compute-covariance": "^1.0.1",
     "core-js": "^3.22.0",
     "dom-autoscroller": "^2.3.4",
diff --git a/src/app/domain/archiveProjectResponse.ts b/src/app/domain/archiveProjectResponse.ts
index 4f3570fe080..60b6f5130e7 100644
--- a/src/app/domain/archiveProjectResponse.ts
+++ b/src/app/domain/archiveProjectResponse.ts
@@ -1,9 +1,13 @@
+import { Tag } from './tag';
+
 export class ArchiveProjectResponse {
   archived: boolean;
   id: number;
+  tag: Tag;
 
-  constructor(id: number, archived: boolean) {
+  constructor(id: number, archived: boolean, tag: Tag) {
     this.id = id;
     this.archived = archived;
+    this.tag = tag;
   }
 }
diff --git a/src/app/domain/project.ts b/src/app/domain/project.ts
index 255f002ae2b..c50ea39e3d5 100644
--- a/src/app/domain/project.ts
+++ b/src/app/domain/project.ts
@@ -1,5 +1,6 @@
 import { Run } from './run';
 import { User } from '../domain/user';
+import { Tag } from './tag';
 
 export class Project {
   archived: boolean;
@@ -17,7 +18,7 @@ export class Project {
   run: Run;
   sharedOwners: User[] = [];
   selected: boolean;
-  tags: string[];
+  tags: Tag[];
   thumbStyle: any;
   uri: String;
   wiseVersion: number;
@@ -93,16 +94,25 @@ export class Project {
     return metadata;
   }
 
-  hasTag(tag: string): boolean {
-    return this.tags.includes(tag);
+  hasTagWithText(tagText: string): boolean {
+    return this.tags.some((tag: Tag) => tag.text === tagText);
   }
 
-  updateArchivedStatus(archived: boolean): void {
+  hasTag(tag: Tag): boolean {
+    return this.tags.some((projectTag: Tag) => projectTag.id === tag.id);
+  }
+
+  updateArchivedStatus(archived: boolean, tag: Tag): void {
     this.archived = archived;
-    if (archived) {
-      this.tags.push('archived');
-    } else {
-      this.tags.splice(this.tags.indexOf('archived'), 1);
-    }
+    archived ? this.addTag(tag) : this.removeTag(tag);
+  }
+
+  addTag(tag: Tag): void {
+    this.tags.push(tag);
+    this.tags.sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()));
+  }
+
+  removeTag(tag: Tag): void {
+    this.tags = this.tags.filter((projectTag: Tag) => projectTag.id !== tag.id);
   }
 }
diff --git a/src/app/domain/projectAndTagsResponse.ts b/src/app/domain/projectAndTagsResponse.ts
new file mode 100644
index 00000000000..4217b984a2c
--- /dev/null
+++ b/src/app/domain/projectAndTagsResponse.ts
@@ -0,0 +1,6 @@
+import { Tag } from './tag';
+
+export interface ProjectAndTagsResponse {
+  projectId: number;
+  tags: Tag[];
+}
diff --git a/src/app/domain/tag.ts b/src/app/domain/tag.ts
new file mode 100644
index 00000000000..a76f803c83a
--- /dev/null
+++ b/src/app/domain/tag.ts
@@ -0,0 +1,7 @@
+export interface Tag {
+  color: string;
+  id: number;
+  numProjectsWithTag?: number;
+  selected?: boolean;
+  text: string;
+}
diff --git a/src/app/modules/library/community-library/community-library.component.html b/src/app/modules/library/community-library/community-library.component.html
index 154b14457e8..7a692fb0044 100644
--- a/src/app/modules/library/community-library/community-library.component.html
+++ b/src/app/modules/library/community-library/community-library.component.html
@@ -19,7 +19,7 @@
         fxFlex.sm="50"
         fxFlex.md="33"
         fxFlex.gt-md="25"
-      ></app-library-project>
+      />
     </ng-container>
     <div *ngIf="filteredProjects.length === 0" class="notice" i18n>
       No community designed units found.
diff --git a/src/app/modules/library/home-page-project-library/home-page-project-library.component.html b/src/app/modules/library/home-page-project-library/home-page-project-library.component.html
index 15b755ddca3..b079fdf51d9 100644
--- a/src/app/modules/library/home-page-project-library/home-page-project-library.component.html
+++ b/src/app/modules/library/home-page-project-library/home-page-project-library.component.html
@@ -1,14 +1,14 @@
 <div class="library library-home notice-bg-bg">
   <div fxLayout="column" fxLayout.gt-sm="row">
-    <div class="content-block controls dark-theme library__header primary-bg" fxFlex.gt-sm="33">
-      <app-library-filters [isSplitScreen]="true"></app-library-filters>
+    <div class="content-block dark-theme library__header primary-bg" fxFlex.gt-sm="33">
+      <app-library-filters [isSplitScreen]="true"/>
     </div>
     <div class="library__content library-home__content content-block" fxFlex.gt-sm="67">
       <div class="notice center" i18n>
         Explore suggested WISE curricula for the given grade levels or search for specific units
         that address your needs.
       </div>
-      <app-official-library [isSplitScreen]="true"></app-official-library>
+      <app-official-library [isSplitScreen]="true"/>
     </div>
   </div>
 </div>
diff --git a/src/app/modules/library/home-page-project-library/home-page-project-library.component.scss b/src/app/modules/library/home-page-project-library/home-page-project-library.component.scss
index 463ca918a0c..e1f2fafa0f0 100644
--- a/src/app/modules/library/home-page-project-library/home-page-project-library.component.scss
+++ b/src/app/modules/library/home-page-project-library/home-page-project-library.component.scss
@@ -18,3 +18,8 @@
   max-width: none;
 }
 
+.content-block {
+  padding: 16px;
+  border-radius: 0;
+}
+
diff --git a/src/app/modules/library/home-page-project-library/home-page-project-library.component.ts b/src/app/modules/library/home-page-project-library/home-page-project-library.component.ts
index ca796e1f9ce..c74264aa10b 100644
--- a/src/app/modules/library/home-page-project-library/home-page-project-library.component.ts
+++ b/src/app/modules/library/home-page-project-library/home-page-project-library.component.ts
@@ -3,8 +3,8 @@ import { LibraryService } from '../../../services/library.service';
 
 @Component({
   selector: 'app-home-page-project-library',
-  templateUrl: './home-page-project-library.component.html',
-  styleUrls: ['./home-page-project-library.component.scss', '../library/library.component.scss']
+  styleUrls: ['./home-page-project-library.component.scss', '../library/library.component.scss'],
+  templateUrl: './home-page-project-library.component.html'
 })
 export class HomePageProjectLibraryComponent {
   constructor(private libraryService: LibraryService) {
diff --git a/src/app/modules/library/library-filters/library-filters.component.html b/src/app/modules/library/library-filters/library-filters.component.html
index 5a6ef80e0fc..ba65750b5a4 100644
--- a/src/app/modules/library/library-filters/library-filters.component.html
+++ b/src/app/modules/library/library-filters/library-filters.component.html
@@ -32,12 +32,7 @@
       (NGSS).</ng-container
     >&nbsp;<a *ngIf="hasFilters()" href="#" (click)="!!clearFilterValues()" i18n>Reset</a>
   </div>
-  <div
-    fxLayout="column"
-    fxLayout.gt-sm="{{ isSplitScreen ? 'column' : 'row' }}"
-    fxLayoutGap="0"
-    fxLayoutGap.gt-sm="{{ isSplitScreen ? '0' : '8px' }}"
-  >
+  <div fxLayout="column" fxLayout.gt-sm="{{ isSplitScreen ? 'column' : 'row' }}" fxLayoutGap="8px">
     <div
       *ngIf="disciplineOptions.length > 0"
       class="library-filter"
diff --git a/src/app/modules/library/library-filters/library-filters.component.ts b/src/app/modules/library/library-filters/library-filters.component.ts
index 48cb7dd342d..d670e812f41 100644
--- a/src/app/modules/library/library-filters/library-filters.component.ts
+++ b/src/app/modules/library/library-filters/library-filters.component.ts
@@ -3,8 +3,6 @@ import {
   OnInit,
   Input,
   SimpleChanges,
-  Output,
-  EventEmitter,
   ViewEncapsulation
 } from '@angular/core';
 import { LibraryProject } from '../libraryProject';
@@ -15,10 +13,10 @@ import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { UtilService } from '../../../services/util.service';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: 'app-library-filters',
-  templateUrl: './library-filters.component.html',
-  styleUrls: ['./library-filters.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  styleUrl: './library-filters.component.scss',
+  templateUrl: './library-filters.component.html'
 })
 export class LibraryFiltersComponent implements OnInit {
   @Input()
diff --git a/src/app/modules/library/library-project-details/library-project-details.component.html b/src/app/modules/library/library-project-details/library-project-details.component.html
index a72d5b0f645..6ae1b7b8f72 100644
--- a/src/app/modules/library/library-project-details/library-project-details.component.html
+++ b/src/app/modules/library/library-project-details/library-project-details.component.html
@@ -31,7 +31,7 @@
       *ngIf="isTeacher && project.wiseVersion !== 4"
       [project]="project"
       [isRun]="isRunProject"
-    ></app-library-project-menu>
+    />
   </div>
   <div class="info-block">
     <div class="details">
@@ -75,6 +75,7 @@
           >{{ isLast ? '' : ' / ' }}
         </ng-container>
       </p>
+      <unit-tags [tags]="project.tags" />
     </div>
     <discourse-category-activity
       *ngIf="project.metadata.discourseCategoryURL"
diff --git a/src/app/modules/library/library-project-details/library-project-details.component.scss b/src/app/modules/library/library-project-details/library-project-details.component.scss
index ba49c1c4b85..b3efae3700a 100644
--- a/src/app/modules/library/library-project-details/library-project-details.component.scss
+++ b/src/app/modules/library/library-project-details/library-project-details.component.scss
@@ -59,7 +59,7 @@
   }
 }
 
-discourse-category-activity {
+discourse-category-activity, unit-tags {
   margin-bottom: 12px;
   display: block;
 }
diff --git a/src/app/modules/library/library-project-menu/library-project-menu.component.spec.ts b/src/app/modules/library/library-project-menu/library-project-menu.component.spec.ts
index ea88096cdc3..5cbc83ae2d1 100644
--- a/src/app/modules/library/library-project-menu/library-project-menu.component.spec.ts
+++ b/src/app/modules/library/library-project-menu/library-project-menu.component.spec.ts
@@ -49,6 +49,7 @@ export class MockConfigService {
   }
 }
 
+const archivedTag = { id: 1, text: 'archived', color: null };
 let component: LibraryProjectMenuComponent;
 let fixture: ComponentFixture<LibraryProjectMenuComponent>;
 let harness: LibraryProjectMenuHarness;
@@ -108,7 +109,7 @@ function showsArchiveButton() {
 function showsRestoreButton() {
   describe('project has archived tag', () => {
     beforeEach(() => {
-      component.project.tags = ['archived'];
+      component.project.tags = [archivedTag];
       component.ngOnInit();
     });
     it('shows restore button', async () => {
diff --git a/src/app/modules/library/library-project-menu/library-project-menu.component.ts b/src/app/modules/library/library-project-menu/library-project-menu.component.ts
index 7868496e2cb..56305d4e1ee 100644
--- a/src/app/modules/library/library-project-menu/library-project-menu.component.ts
+++ b/src/app/modules/library/library-project-menu/library-project-menu.component.ts
@@ -10,8 +10,8 @@ import { ArchiveProjectService } from '../../../services/archive-project.service
 
 @Component({
   selector: 'app-library-project-menu',
-  templateUrl: './library-project-menu.component.html',
-  styleUrls: ['./library-project-menu.component.scss']
+  styleUrl: './library-project-menu.component.scss',
+  templateUrl: './library-project-menu.component.html'
 })
 export class LibraryProjectMenuComponent {
   @Input()
@@ -40,7 +40,7 @@ export class LibraryProjectMenuComponent {
     this.isCanShare = this.isOwner() && !this.isRun;
     this.editLink = `${this.configService.getContextPath()}/teacher/edit/unit/${this.project.id}`;
     this.isChild = this.project.isChild();
-    this.archived = this.project.hasTag('archived');
+    this.archived = this.project.hasTagWithText('archived');
   }
 
   isOwner() {
diff --git a/src/app/modules/library/library-project/library-project.component.html b/src/app/modules/library/library-project/library-project.component.html
index 69946a8411b..3845f319eb6 100644
--- a/src/app/modules/library/library-project/library-project.component.html
+++ b/src/app/modules/library/library-project/library-project.component.html
@@ -22,7 +22,7 @@
       (click)="selectProject($event)"
     ></mat-checkbox>
   </div>
-  <app-library-project-disciplines [project]="project"></app-library-project-disciplines>
+  <app-library-project-disciplines [project]="project" />
   <div
     class="library-project__details can-highlight"
     [ngClass]="{ 'highlighted-bg': project.isHighlighted }"
@@ -42,5 +42,8 @@
     <p *ngIf="project.shared" class="info mat-caption" i18n>
       Shared by {{ project.owner.displayName }}
     </p>
+    <div class="tags">
+      <unit-tags class="mat-small" [tags]="project.tags" />
+    </div>
   </div>
 </mat-card>
diff --git a/src/app/modules/library/library-project/library-project.component.scss b/src/app/modules/library/library-project/library-project.component.scss
index dece9d4baab..2713de8647b 100644
--- a/src/app/modules/library/library-project/library-project.component.scss
+++ b/src/app/modules/library/library-project/library-project.component.scss
@@ -85,6 +85,11 @@ $config: mat.define-typography-config();
 .mat-mdc-checkbox.library-project__checkbox {
   position: absolute;
   top: 0;
-  z-index: 1;
+  z-index: 100;
   border-end-end-radius: $button-border-radius;
+}
+
+.tags {
+  max-height: 86px;
+  overflow-y: auto;
 }
\ No newline at end of file
diff --git a/src/app/modules/library/library-project/library-project.component.spec.ts b/src/app/modules/library/library-project/library-project.component.spec.ts
index 99341300534..ec406902ce0 100644
--- a/src/app/modules/library/library-project/library-project.component.spec.ts
+++ b/src/app/modules/library/library-project/library-project.component.spec.ts
@@ -3,22 +3,26 @@ import { LibraryProjectComponent } from './library-project.component';
 import { LibraryProject } from '../libraryProject';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
-import { Router } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { ProjectTagService } from '../../../../assets/wise5/services/projectTagService';
+import { provideRouter } from '@angular/router';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('LibraryProjectComponent', () => {
   let component: LibraryProjectComponent;
   let fixture: ComponentFixture<LibraryProjectComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [LibraryProjectComponent],
-      imports: [BrowserAnimationsModule, RouterTestingModule, OverlayModule, MatDialogModule],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [LibraryProjectComponent],
+        imports: [BrowserAnimationsModule, HttpClientTestingModule, MatDialogModule, OverlayModule],
+        providers: [ProjectTagService, provideRouter([])],
+        schemas: [NO_ERRORS_SCHEMA]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LibraryProjectComponent);
diff --git a/src/app/modules/library/library-project/library-project.component.ts b/src/app/modules/library/library-project/library-project.component.ts
index 887db754a84..f1b4c3d29e0 100644
--- a/src/app/modules/library/library-project/library-project.component.ts
+++ b/src/app/modules/library/library-project/library-project.component.ts
@@ -5,25 +5,33 @@ import { LibraryProject } from '../libraryProject';
 import { LibraryProjectDetailsComponent } from '../library-project-details/library-project-details.component';
 import { flash } from '../../../animations';
 import { ProjectSelectionEvent } from '../../../domain/projectSelectionEvent';
+import { Subscription } from 'rxjs';
+import { ProjectTagService } from '../../../../assets/wise5/services/projectTagService';
+import { Tag } from '../../../domain/tag';
 
 @Component({
-  selector: 'app-library-project',
-  templateUrl: './library-project.component.html',
-  styleUrls: ['./library-project.component.scss'],
+  animations: [flash],
   encapsulation: ViewEncapsulation.None,
-  animations: [flash]
+  selector: 'app-library-project',
+  styleUrl: './library-project.component.scss',
+  templateUrl: './library-project.component.html'
 })
 export class LibraryProjectComponent implements OnInit {
+  animateDelay: string = '0s';
+  animateDuration: string = '0s';
   @Input() checked: boolean = false;
   @Input() myUnit: boolean = false;
   @Input() project: LibraryProject = new LibraryProject();
   @Output()
-  projectSelectionEvent: EventEmitter<ProjectSelectionEvent> = new EventEmitter<ProjectSelectionEvent>();
-
-  animateDuration: string = '0s';
-  animateDelay: string = '0s';
+  projectSelectionEvent: EventEmitter<ProjectSelectionEvent> =
+    new EventEmitter<ProjectSelectionEvent>();
+  private subscriptions: Subscription = new Subscription();
 
-  constructor(public dialog: MatDialog, private sanitizer: DomSanitizer) {}
+  constructor(
+    private dialog: MatDialog,
+    private projectTagService: ProjectTagService,
+    private sanitizer: DomSanitizer
+  ) {}
 
   ngOnInit() {
     this.project.thumbStyle = this.getThumbStyle(this.project.projectThumb);
@@ -34,6 +42,35 @@ export class LibraryProjectComponent implements OnInit {
         this.project.isHighlighted = false;
       }, 7000);
     }
+    this.subscribeToTagUpdated();
+    this.subscribeToTagDeleted();
+  }
+
+  private subscribeToTagUpdated(): void {
+    this.subscriptions.add(
+      this.projectTagService.tagUpdated$.subscribe((updatedTag: Tag) => {
+        const projectTag = this.project.tags.find((tag: Tag) => tag.id === updatedTag.id);
+        if (projectTag != null) {
+          projectTag.text = updatedTag.text;
+          projectTag.color = updatedTag.color;
+          this.projectTagService.sortTags(this.project.tags);
+        }
+      })
+    );
+  }
+
+  private subscribeToTagDeleted(): void {
+    this.subscriptions.add(
+      this.projectTagService.tagDeleted$.subscribe((tag: Tag) => {
+        if (this.project.hasTag(tag)) {
+          this.project.removeTag(tag);
+        }
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
   /**
diff --git a/src/app/modules/library/library.module.ts b/src/app/modules/library/library.module.ts
index f0523d42c43..f1dd58dad72 100644
--- a/src/app/modules/library/library.module.ts
+++ b/src/app/modules/library/library.module.ts
@@ -48,10 +48,14 @@ import { ShareProjectDialogComponent } from './share-project-dialog/share-projec
 import { CopyProjectDialogComponent } from './copy-project-dialog/copy-project-dialog.component';
 import { LibraryPaginatorIntl } from './libraryPaginatorIntl';
 import { DiscourseCategoryActivityComponent } from './discourse-category-activity/discourse-category-activity.component';
-import { SelectAllItemsCheckboxComponent } from './select-all-items-checkbox/select-all-items-checkbox.component';
 import { ArchiveProjectsButtonComponent } from '../../teacher/archive-projects-button/archive-projects-button.component';
 import { SearchBarComponent } from '../shared/search-bar/search-bar.component';
+import { SelectAllItemsCheckboxComponent } from './select-all-items-checkbox/select-all-items-checkbox.component';
+import { ApplyTagsButtonComponent } from '../../teacher/apply-tags-button/apply-tags-button.component';
+import { SelectTagsComponent } from '../../teacher/select-tags/select-tags.component';
+import { MatChipsModule } from '@angular/material/chips';
 import { SelectMenuComponent } from '../shared/select-menu/select-menu.component';
+import { UnitTagsComponent } from '../../teacher/unit-tags/unit-tags.component';
 
 const materialModules = [
   MatAutocompleteModule,
@@ -59,6 +63,7 @@ const materialModules = [
   MatButtonModule,
   MatCardModule,
   MatCheckboxModule,
+  MatChipsModule,
   MatDialogModule,
   MatDividerModule,
   MatExpansionModule,
@@ -76,6 +81,7 @@ const materialModules = [
 
 @NgModule({
   imports: [
+    ApplyTagsButtonComponent,
     ArchiveProjectsButtonComponent,
     CommonModule,
     DiscourseCategoryActivityComponent,
@@ -86,9 +92,12 @@ const materialModules = [
     RouterModule,
     materialModules,
     SearchBarComponent,
+    SelectAllItemsCheckboxComponent,
     SelectMenuComponent,
+    SelectTagsComponent,
     SharedModule,
-    TimelineModule
+    TimelineModule,
+    UnitTagsComponent
   ],
   declarations: [
     LibraryGroupThumbsComponent,
@@ -104,7 +113,6 @@ const materialModules = [
     CommunityLibraryDetailsComponent,
     PersonalLibraryComponent,
     PersonalLibraryDetailsComponent,
-    SelectAllItemsCheckboxComponent,
     ShareProjectDialogComponent,
     CopyProjectDialogComponent
   ],
@@ -112,6 +120,7 @@ const materialModules = [
     HomePageProjectLibraryComponent,
     ReactiveFormsModule,
     TeacherProjectLibraryComponent,
+    UnitTagsComponent,
     materialModules
   ],
   providers: [LibraryService, { provide: MatPaginatorIntl, useClass: LibraryPaginatorIntl }]
diff --git a/src/app/modules/library/library/library.component.scss b/src/app/modules/library/library/library.component.scss
index 59bd460b4e2..2dcf4fe592f 100644
--- a/src/app/modules/library/library/library.component.scss
+++ b/src/app/modules/library/library/library.component.scss
@@ -8,7 +8,6 @@
 .library {
   text-align: left;
   border-radius: $card-border-radius;
-  overflow: hidden;
 
   h2 {
     font-weight: 400;
diff --git a/src/app/modules/library/official-library/official-library.component.html b/src/app/modules/library/official-library/official-library.component.html
index 2cbc54b73d1..ab30bf0359f 100644
--- a/src/app/modules/library/official-library/official-library.component.html
+++ b/src/app/modules/library/official-library/official-library.component.html
@@ -27,7 +27,7 @@
               fxFlex.md="{{ isSplitScreen ? 50 : 33 }}"
               fxFlex.gt-md="{{ isSplitScreen ? 33 : 25 }}"
             >
-              <app-library-project [project]="project"></app-library-project>
+              <app-library-project [project]="project"/>
             </div>
           </ng-container>
         </div>
diff --git a/src/app/modules/library/personal-library/personal-library.component.html b/src/app/modules/library/personal-library/personal-library.component.html
index 51e2f7dc4dc..7299f0f3619 100644
--- a/src/app/modules/library/personal-library/personal-library.component.html
+++ b/src/app/modules/library/personal-library/personal-library.component.html
@@ -2,8 +2,9 @@
   <div class="personal-library-header" fxLayoutAlign="center center" fxLayoutGap="8px">
     <a class="mat-caption" href="#" (click)="showInfo($event)" i18n>What are My Units?</a>
     <span fxFlex></span>
+    <select-tags [selectedTags]="selectedTags" (selectTagEvent)="selectTags($event)" />
     <mat-form-field [subscriptSizing]="'dynamic'">
-      <mat-label>View</mat-label>
+      <mat-label i18n>View</mat-label>
       <mat-select [(ngModel)]="showArchivedView" (selectionChange)="switchActiveArchivedView()">
         <mat-option [value]="false" i18n>Active</mat-option>
         <mat-option [value]="true" i18n>Archived</mat-option>
@@ -14,7 +15,7 @@
   <div fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutGap="8px">
     <div fxLayoutAlign="center center" fxLayoutGap="4px" fxFlexAlign.xs="start" fxFlexOrder.xs="1">
       <select-all-items-checkbox
-        [label]="projectsLabel"
+        [tooltip]="projectsLabel"
         [numAllItems]="numProjectsInView"
         [numSelectedItems]="numSelectedProjects()"
         (allSelectedEvent)="selectAllProjects()"
@@ -28,6 +29,9 @@
         [showArchive]="!showArchivedView"
         (archiveProjectsEvent)="archiveProjects($event)"
       ></archive-projects-button>
+      @if (selectedProjects().length > 0) {
+        <apply-tags-button [selectedProjects]="selectedProjects()" />
+      }
     </div>
     <span fxFlex fxHide.xs></span>
     <mat-paginator
@@ -51,7 +55,7 @@
         fxFlex.sm="50"
         fxFlex.md="33"
         fxFlex.gt-md="25"
-      ></app-library-project>
+      />
     </ng-container>
     <div *ngIf="filteredProjects.length === 0" class="notice" i18n>
       No owned or shared units found.
diff --git a/src/app/modules/library/personal-library/personal-library.component.spec.ts b/src/app/modules/library/personal-library/personal-library.component.spec.ts
index 8bf70b05959..d220771a067 100644
--- a/src/app/modules/library/personal-library/personal-library.component.spec.ts
+++ b/src/app/modules/library/personal-library/personal-library.component.spec.ts
@@ -24,7 +24,9 @@ import { of } from 'rxjs';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { ArchiveProjectsButtonComponent } from '../../../teacher/archive-projects-button/archive-projects-button.component';
 import { HttpClient } from '@angular/common/http';
+import { ProjectTagService } from '../../../../assets/wise5/services/projectTagService';
 
+const archivedTag = { id: 1, text: 'archived', color: null };
 let archiveProjectService: ArchiveProjectService;
 let component: PersonalLibraryComponent;
 let fixture: ComponentFixture<PersonalLibraryComponent>;
@@ -52,14 +54,11 @@ describe('PersonalLibraryComponent', () => {
           MatPaginatorModule,
           MatSelectModule,
           MatSnackBarModule,
-          OverlayModule
-        ],
-        declarations: [
-          LibraryProjectComponent,
-          PersonalLibraryComponent,
+          OverlayModule,
           SelectAllItemsCheckboxComponent
         ],
-        providers: [ArchiveProjectService, LibraryService],
+        declarations: [LibraryProjectComponent, PersonalLibraryComponent],
+        providers: [ArchiveProjectService, LibraryService, ProjectTagService],
         schemas: [NO_ERRORS_SCHEMA]
       }).compileComponents();
     })
@@ -92,12 +91,12 @@ function setUpFiveProjects() {
     new LibraryProject({
       id: projectId1,
       metadata: { title: 'Hello' },
-      tags: ['archived']
+      tags: [archivedTag]
     }),
     new LibraryProject({
       id: projectId2,
       metadata: { title: 'Hello World' },
-      tags: ['archived']
+      tags: [archivedTag]
     }),
     new LibraryProject({
       id: projectId3,
@@ -150,7 +149,10 @@ function archiveMultipleProjects() {
       it('archives multiple projects', async () => {
         await harness.selectProjects([projectId4, projectId3]);
         spyOn(http, 'put').and.returnValue(
-          of([new ArchiveProjectResponse(4, true), new ArchiveProjectResponse(3, true)])
+          of([
+            new ArchiveProjectResponse(4, true, archivedTag),
+            new ArchiveProjectResponse(3, true, archivedTag)
+          ])
         );
         await (await harness.getArchiveButton()).click();
         expect(await harness.getProjectIdsInView()).toEqual([projectId5]);
@@ -166,7 +168,10 @@ function restoreMultipleProjects() {
         await harness.showArchivedView();
         await harness.selectProjects([projectId2, projectId1]);
         spyOn(http, 'delete').and.returnValue(
-          of([new ArchiveProjectResponse(2, false), new ArchiveProjectResponse(1, false)])
+          of([
+            new ArchiveProjectResponse(2, false, archivedTag),
+            new ArchiveProjectResponse(1, false, archivedTag)
+          ])
         );
         await (await harness.getUnarchiveButton()).click();
         expect(await harness.getProjectIdsInView()).toEqual([]);
diff --git a/src/app/modules/library/personal-library/personal-library.component.ts b/src/app/modules/library/personal-library/personal-library.component.ts
index 7945841daa4..c62e8e44f42 100644
--- a/src/app/modules/library/personal-library/personal-library.component.ts
+++ b/src/app/modules/library/personal-library/personal-library.component.ts
@@ -7,11 +7,13 @@ import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { ArchiveProjectService } from '../../../services/archive-project.service';
 import { PageEvent } from '@angular/material/paginator';
 import { ProjectSelectionEvent } from '../../../domain/projectSelectionEvent';
+import { Tag } from '../../../domain/tag';
+import { Project } from '../../../domain/project';
 
 @Component({
   selector: 'app-personal-library',
-  templateUrl: './personal-library.component.html',
-  styleUrls: ['./personal-library.component.scss']
+  styleUrl: './personal-library.component.scss',
+  templateUrl: './personal-library.component.html'
 })
 export class PersonalLibraryComponent extends LibraryComponent {
   filteredProjects: LibraryProject[] = [];
@@ -25,8 +27,9 @@ export class PersonalLibraryComponent extends LibraryComponent {
     }, {})
   );
   projects: LibraryProject[] = [];
-  protected projectsLabel: string = $localize`units`;
+  protected projectsLabel: string = $localize`Select all units`;
   protected selectedProjects: WritableSignal<LibraryProject[]> = signal([]);
+  protected selectedTags: Tag[] = [];
   protected sharedProjects: LibraryProject[] = [];
   protected showArchivedView: boolean = false;
 
@@ -113,8 +116,13 @@ export class PersonalLibraryComponent extends LibraryComponent {
   public filterUpdated(filterValues: ProjectFilterValues = null): void {
     super.filterUpdated(filterValues);
     this.filteredProjects = this.filteredProjects.filter(
-      (project) => project.hasTag('archived') == this.showArchivedView
+      (project) => project.hasTagWithText('archived') == this.showArchivedView
     );
+    if (this.selectedTags.length > 0) {
+      this.filteredProjects = this.filteredProjects.filter((project: Project) =>
+        this.selectedTags.some((tag: Tag) => project.hasTag(tag))
+      );
+    }
     this.numProjectsInView = this.getProjectsInView().length;
     this.unselectAllProjects();
   }
@@ -130,16 +138,14 @@ export class PersonalLibraryComponent extends LibraryComponent {
   }
 
   protected updateSelectedProjects(event: ProjectSelectionEvent): void {
+    const selectedProjects = this.selectedProjects();
     if (event.selected) {
-      this.selectedProjects.update((selectedProjects) => {
-        return [...selectedProjects, event.project];
-      });
+      selectedProjects.push(event.project);
     } else {
-      this.selectedProjects.update((selectedProjects) => {
-        selectedProjects.splice(selectedProjects.indexOf(event.project), 1);
-        return [...selectedProjects];
-      });
+      selectedProjects.splice(selectedProjects.indexOf(event.project), 1);
     }
+    // create a new array to trigger change detection
+    this.selectedProjects.set([...selectedProjects]);
   }
 
   protected unselectAllProjects(): void {
@@ -162,6 +168,16 @@ export class PersonalLibraryComponent extends LibraryComponent {
   protected archiveProjects(archive: boolean): void {
     this.archiveProjectService.archiveProjects(this.selectedProjects(), archive);
   }
+
+  protected selectTags(tags: Tag[]): void {
+    this.selectedTags = tags;
+    this.filterUpdated();
+  }
+
+  protected removeTag(tag: Tag): void {
+    this.selectedTags = this.selectedTags.filter((selectedTag: Tag) => selectedTag.id !== tag.id);
+    this.filterUpdated();
+  }
 }
 
 @Component({
diff --git a/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.html b/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.html
index e5451dcd2d7..f518102e148 100644
--- a/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.html
+++ b/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.html
@@ -1,9 +1,12 @@
 <mat-checkbox
   color="primary"
+  class="checkbox"
   [checked]="status === 'all'"
   [indeterminate]="status === 'some'"
   (click)="select()"
-  [matTooltip]="'Select all ' + label"
+  [matTooltip]="tooltip"
   matTooltipPosition="above"
   i18n-matTooltip
-></mat-checkbox>
+>
+  <ng-content />
+</mat-checkbox>
diff --git a/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.scss b/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.scss
new file mode 100644
index 00000000000..0b3fa2aa38b
--- /dev/null
+++ b/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.scss
@@ -0,0 +1,3 @@
+.checkbox {
+  width: 100%;
+}
diff --git a/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.spec.ts b/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.spec.ts
index e484654b25b..3eb2c99fef3 100644
--- a/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.spec.ts
+++ b/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.spec.ts
@@ -1,7 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SelectAllItemsCheckboxComponent } from './select-all-items-checkbox.component';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatTooltipModule } from '@angular/material/tooltip';
 
 describe('SelectAllItemsCheckboxComponent', () => {
   let component: SelectAllItemsCheckboxComponent;
@@ -9,8 +7,7 @@ describe('SelectAllItemsCheckboxComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [SelectAllItemsCheckboxComponent],
-      imports: [MatCheckboxModule, MatTooltipModule]
+      imports: [SelectAllItemsCheckboxComponent]
     });
     fixture = TestBed.createComponent(SelectAllItemsCheckboxComponent);
     component = fixture.componentInstance;
diff --git a/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.ts b/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.ts
index 7243ca97307..179c6453f65 100644
--- a/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.ts
+++ b/src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.ts
@@ -1,20 +1,24 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
+import { MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 type SelectAllItemsStatus = 'none' | 'some' | 'all';
 
 @Component({
+  imports: [MatCheckboxModule, MatTooltipModule],
+  providers: [{ provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } }],
   selector: 'select-all-items-checkbox',
-  templateUrl: './select-all-items-checkbox.component.html',
-  providers: [{ provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } }]
+  standalone: true,
+  styleUrl: 'select-all-items-checkbox.component.scss',
+  templateUrl: './select-all-items-checkbox.component.html'
 })
 export class SelectAllItemsCheckboxComponent {
   @Output() allSelectedEvent: EventEmitter<void> = new EventEmitter<void>();
-  @Input() label: string = $localize`items`;
   @Output() noneSelectedEvent: EventEmitter<void> = new EventEmitter<void>();
   @Input() numAllItems: number;
   @Input() numSelectedItems: number;
   protected status: SelectAllItemsStatus;
+  @Input() tooltip: string;
 
   ngOnChanges(): void {
     if (this.numSelectedItems == 0) {
diff --git a/src/app/modules/library/teacher-project-library/teacher-project-library.component.html b/src/app/modules/library/teacher-project-library/teacher-project-library.component.html
index 1a14a7599d1..7a9b24fdf64 100644
--- a/src/app/modules/library/teacher-project-library/teacher-project-library.component.html
+++ b/src/app/modules/library/teacher-project-library/teacher-project-library.component.html
@@ -1,6 +1,6 @@
 <div class="library library-teacher notice-bg-bg">
-  <div class="content-block controls dark-theme library__header library-teacher__header primary-bg">
-    <app-library-filters></app-library-filters>
+  <div class="content-block filters dark-theme library__header library-teacher__header primary-bg">
+    <app-library-filters />
   </div>
   <div class="library__content library-teacher__content">
     <nav mat-tab-nav-bar i18n-aria-label aria-label="Teacher unit library navigation">
@@ -15,8 +15,8 @@
         {{ tab.label }} ({{ tab.numVisible }})
       </a>
     </nav>
-    <app-official-library [hidden]="!isOfficialRoute()"></app-official-library>
-    <app-community-library [hidden]="!isCommunityRoute()"></app-community-library>
-    <app-personal-library [hidden]="!isPersonalRoute()"></app-personal-library>
+    <app-official-library [hidden]="!isOfficialRoute()" />
+    <app-community-library [hidden]="!isCommunityRoute()" />
+    <app-personal-library [hidden]="!isPersonalRoute()" />
   </div>
 </div>
diff --git a/src/app/modules/library/teacher-project-library/teacher-project-library.component.scss b/src/app/modules/library/teacher-project-library/teacher-project-library.component.scss
index 340cbe07ed5..9f68504ab1a 100644
--- a/src/app/modules/library/teacher-project-library/teacher-project-library.component.scss
+++ b/src/app/modules/library/teacher-project-library/teacher-project-library.component.scss
@@ -12,6 +12,12 @@
   }
 }
 
+.filters {
+  padding: 16px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .library-teacher__header {
   h3 {
     font-weight: 500;
diff --git a/src/app/modules/shared/search-bar/search-bar.component.html b/src/app/modules/shared/search-bar/search-bar.component.html
index 3aac8ef63b1..12762f5a3d8 100644
--- a/src/app/modules/shared/search-bar/search-bar.component.html
+++ b/src/app/modules/shared/search-bar/search-bar.component.html
@@ -1,12 +1,17 @@
-<mat-form-field class="search-bar" appearance="fill">
+<mat-form-field
+  class="search-bar"
+  appearance="fill"
+  [subscriptSizing]="'dynamic'"
+  (click)="$event.stopPropagation()"
+>
   <mat-label>{{ placeholderText }}</mat-label>
   <mat-icon matPrefix>search</mat-icon>
-  <input matInput [formControl]="searchField" />
+  <input matInput [formControl]="searchField" (keydown)="$event.stopPropagation()" />
   <button
     mat-icon-button
     matSuffix
     [disabled]="disable"
-    [ngClass]="{ invisible: !value }"
+    [ngClass]="{ invisible: !searchField.value }"
     i18n-aria-label
     aria-label="Clear"
     (click)="clear()"
diff --git a/src/app/modules/shared/select-menu/select-menu.component.html b/src/app/modules/shared/select-menu/select-menu.component.html
index bdf8cd7b5d3..1469f5955f8 100644
--- a/src/app/modules/shared/select-menu/select-menu.component.html
+++ b/src/app/modules/shared/select-menu/select-menu.component.html
@@ -1,4 +1,4 @@
-<mat-form-field class="select-menu" appearance="fill">
+<mat-form-field class="select-menu" appearance="fill" [subscriptSizing]="'dynamic'">
   <mat-label>{{ placeholderText }}</mat-label>
   <mat-select
     [formControl]="selectField"
diff --git a/src/app/services/archive-project.service.ts b/src/app/services/archive-project.service.ts
index 45ab946d2be..6fabe84feb6 100644
--- a/src/app/services/archive-project.service.ts
+++ b/src/app/services/archive-project.service.ts
@@ -4,6 +4,7 @@ import { Observable, Subject, Subscription } from 'rxjs';
 import { Project } from '../domain/project';
 import { ArchiveProjectResponse } from '../domain/archiveProjectResponse';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { Tag } from '../domain/tag';
 
 @Injectable()
 export class ArchiveProjectService {
@@ -15,7 +16,7 @@ export class ArchiveProjectService {
   archiveProject(project: Project, archive: boolean): void {
     this[archive ? 'makeArchiveProjectRequest' : 'makeUnarchiveProjectRequest'](project).subscribe({
       next: (response: ArchiveProjectResponse) => {
-        this.updateProjectArchivedStatus(project, response.archived);
+        this.updateProjectArchivedStatus(project, response.archived, response.tag);
         this.showArchiveProjectSuccessMessage(project, archive);
       },
       error: () => {
@@ -32,8 +33,8 @@ export class ArchiveProjectService {
     return this.http.delete<ArchiveProjectResponse>(`/api/project/${project.id}/archived`);
   }
 
-  private updateProjectArchivedStatus(project: Project, archived: boolean): void {
-    project.updateArchivedStatus(archived);
+  private updateProjectArchivedStatus(project: Project, archived: boolean, tag: Tag): void {
+    project.updateArchivedStatus(archived, tag);
     this.refreshProjects();
   }
 
@@ -52,7 +53,7 @@ export class ArchiveProjectService {
   private undoArchiveProjectAction(project: Project, archiveFunctionName: string): void {
     this[archiveFunctionName](project).subscribe({
       next: (response: ArchiveProjectResponse) => {
-        this.updateProjectArchivedStatus(project, response.archived);
+        this.updateProjectArchivedStatus(project, response.archived, response.tag);
         this.snackBar.open($localize`Action undone.`);
       },
       error: () => {
@@ -102,7 +103,7 @@ export class ArchiveProjectService {
   ): void {
     for (const archiveProjectResponse of archiveProjectsResponse) {
       const project = projects.find((project: Project) => project.id === archiveProjectResponse.id);
-      project.updateArchivedStatus(archiveProjectResponse.archived);
+      project.updateArchivedStatus(archiveProjectResponse.archived, archiveProjectResponse.tag);
     }
     this.refreshProjects();
   }
diff --git a/src/app/services/tagService.spec.ts b/src/app/services/tagService.spec.ts
index 51659a5abe8..4dd2e8f8c1c 100644
--- a/src/app/services/tagService.spec.ts
+++ b/src/app/services/tagService.spec.ts
@@ -36,7 +36,7 @@ function retrieveRunTags() {
     const req = http.expectOne(`/api/tag/run/${configService.getRunId()}`);
     expect(req.request.method).toEqual('GET');
     req.flush(response);
-    expect(service.tags).toEqual(response);
+    expect(service.getTags()).toEqual(response);
   });
 }
 
diff --git a/src/app/teacher/abstract-tags-menu/abstract-tags-menu.component.ts b/src/app/teacher/abstract-tags-menu/abstract-tags-menu.component.ts
new file mode 100644
index 00000000000..4e00b6ed069
--- /dev/null
+++ b/src/app/teacher/abstract-tags-menu/abstract-tags-menu.component.ts
@@ -0,0 +1,86 @@
+import { Directive } from '@angular/core';
+import { Tag } from '../../domain/tag';
+import { Subscription } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
+import { ManageTagsDialogComponent } from '../manage-tags-dialog/manage-tags-dialog.component';
+
+@Directive()
+export class AbstractTagsMenuComponent {
+  protected filteredTags: Tag[] = [];
+  protected searchText: string = '';
+  private subscriptions: Subscription = new Subscription();
+  protected tags: Tag[] = [];
+
+  constructor(
+    private dialog: MatDialog,
+    protected projectTagService: ProjectTagService
+  ) {}
+
+  ngOnInit(): void {
+    this.retrieveUserTags();
+    this.subscribeToTagUpdated();
+    this.subscribeToNewTag();
+    this.subscribeToTagDeleted();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
+  private retrieveUserTags(): void {
+    this.projectTagService.retrieveUserTags().subscribe((tags: Tag[]) => {
+      this.tags = tags;
+      this.filteredTags = tags;
+      this.afterRetrieveUserTags();
+    });
+  }
+
+  protected afterRetrieveUserTags(): void {}
+
+  private subscribeToTagUpdated(): void {
+    this.subscriptions.add(
+      this.projectTagService.tagUpdated$.subscribe((updatedTag: Tag) => {
+        const tag = this.tags.find((t: Tag) => t.id === updatedTag.id);
+        tag.text = updatedTag.text;
+        tag.color = updatedTag.color;
+        this.projectTagService.sortTags(this.tags);
+      })
+    );
+  }
+
+  private subscribeToNewTag(): void {
+    this.subscriptions.add(
+      this.projectTagService.newTag$.subscribe((tag: Tag) => {
+        this.tags.push(tag);
+        this.projectTagService.sortTags(this.tags);
+        this.filterTags(this.searchText);
+        this.afterNewTag(tag);
+      })
+    );
+  }
+
+  protected afterNewTag(tag: Tag): void {}
+
+  private subscribeToTagDeleted(): void {
+    this.subscriptions.add(
+      this.projectTagService.tagDeleted$.subscribe((deletedTag: Tag) => {
+        this.tags = this.tags.filter((tag: Tag) => tag.id !== deletedTag.id);
+        this.filterTags(this.searchText);
+      })
+    );
+  }
+
+  protected filterTags(searchText: string): void {
+    this.searchText = searchText;
+    this.filteredTags = this.tags.filter((tag: Tag) =>
+      tag.text.toLowerCase().includes(searchText.trim().toLowerCase())
+    );
+  }
+
+  protected manageTags(): void {
+    this.dialog.open(ManageTagsDialogComponent, {
+      panelClass: 'dialog-md'
+    });
+  }
+}
diff --git a/src/app/teacher/apply-tags-button/apply-tags-button.component.html b/src/app/teacher/apply-tags-button/apply-tags-button.component.html
new file mode 100644
index 00000000000..c940359f35a
--- /dev/null
+++ b/src/app/teacher/apply-tags-button/apply-tags-button.component.html
@@ -0,0 +1,27 @@
+<button
+  mat-icon-button
+  [matMenuTriggerFor]="applyTagsMenu"
+  matTooltip="Apply tags"
+  matTooltipPosition="above"
+  i18n-matTooltip
+>
+  <mat-icon>sell</mat-icon>
+</button>
+<mat-menu #applyTagsMenu (closed)="searchText = ''">
+  <div class="menu-info secondary-text" (click)="$event.stopPropagation()" i18n>Apply tags</div>
+  <app-search-bar [value]="searchText" (update)="filterTags($event)" />
+  @for (tag of filteredTags; track tag.id) {
+    <div (click)="$event.stopPropagation()" mat-menu-item>
+      <select-all-items-checkbox
+        [numAllItems]="selectedProjects.length"
+        [numSelectedItems]="tag.numProjectsWithTag"
+        (allSelectedEvent)="addTagToProjects(tag)"
+        (noneSelectedEvent)="removeTagFromProjects(tag)"
+      >
+        <tag [color]="tag.color" [text]="tag.text" class="mat-small" />
+      </select-all-items-checkbox>
+    </div>
+  }
+  <mat-divider />
+  <div (click)="manageTags(); $event.stopPropagation()" mat-menu-item i18n>Manage Tags</div>
+</mat-menu>
diff --git a/src/app/teacher/apply-tags-button/apply-tags-button.component.scss b/src/app/teacher/apply-tags-button/apply-tags-button.component.scss
new file mode 100644
index 00000000000..52d7a8062b3
--- /dev/null
+++ b/src/app/teacher/apply-tags-button/apply-tags-button.component.scss
@@ -0,0 +1,3 @@
+.menu-info {
+  margin: 16px;
+}
diff --git a/src/app/teacher/apply-tags-button/apply-tags-button.component.spec.ts b/src/app/teacher/apply-tags-button/apply-tags-button.component.spec.ts
new file mode 100644
index 00000000000..3937e833c83
--- /dev/null
+++ b/src/app/teacher/apply-tags-button/apply-tags-button.component.spec.ts
@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ApplyTagsButtonComponent } from './apply-tags-button.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+describe('ApplyTagsButtonComponent', () => {
+  let component: ApplyTagsButtonComponent;
+  let fixture: ComponentFixture<ApplyTagsButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        ApplyTagsButtonComponent,
+        BrowserAnimationsModule,
+        HttpClientTestingModule,
+        MatSnackBarModule
+      ],
+      providers: [ProjectTagService]
+    });
+    fixture = TestBed.createComponent(ApplyTagsButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/teacher/apply-tags-button/apply-tags-button.component.ts b/src/app/teacher/apply-tags-button/apply-tags-button.component.ts
new file mode 100644
index 00000000000..5c01a175a68
--- /dev/null
+++ b/src/app/teacher/apply-tags-button/apply-tags-button.component.ts
@@ -0,0 +1,91 @@
+import { Component, Input } from '@angular/core';
+import { Project } from '../../domain/project';
+import { Tag } from '../../domain/tag';
+import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { SelectAllItemsCheckboxComponent } from '../../modules/library/select-all-items-checkbox/select-all-items-checkbox.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { AbstractTagsMenuComponent } from '../abstract-tags-menu/abstract-tags-menu.component';
+import { SearchBarComponent } from '../../modules/shared/search-bar/search-bar.component';
+import { TagComponent } from '../tag/tag.component';
+import { MatDialog } from '@angular/material/dialog';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatIconModule,
+    MatMenuModule,
+    MatTooltipModule,
+    SearchBarComponent,
+    SelectAllItemsCheckboxComponent,
+    TagComponent
+  ],
+  providers: [{ provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { clickAction: 'noop' } }],
+  selector: 'apply-tags-button',
+  standalone: true,
+  styleUrl: './apply-tags-button.component.scss',
+  templateUrl: './apply-tags-button.component.html'
+})
+export class ApplyTagsButtonComponent extends AbstractTagsMenuComponent {
+  @Input() selectedProjects: Project[] = [];
+
+  constructor(
+    dialog: MatDialog,
+    protected projectTagService: ProjectTagService,
+    private snackBar: MatSnackBar
+  ) {
+    super(dialog, projectTagService);
+  }
+
+  ngOnChanges(): void {
+    this.updateAllTagsCheckedValues();
+  }
+
+  protected afterRetrieveUserTags(): void {
+    this.updateAllTagsCheckedValues();
+  }
+
+  private updateAllTagsCheckedValues(): void {
+    for (const tag of this.tags) {
+      this.updateTagCheckedValue(tag);
+    }
+  }
+
+  protected afterNewTag(tag: Tag): void {
+    this.updateTagCheckedValue(tag);
+  }
+
+  private updateTagCheckedValue(tag: Tag): void {
+    tag.numProjectsWithTag = this.selectedProjects.filter((project) =>
+      project.tags.some((projectTag) => projectTag.id === tag.id)
+    ).length;
+  }
+
+  protected addTagToProjects(tag: Tag): void {
+    this.projectTagService.applyTagToProjects(tag, this.selectedProjects).subscribe(() => {
+      for (const project of this.selectedProjects) {
+        project.addTag(tag);
+      }
+      this.updateTagCheckedValue(tag);
+      this.snackBar.open($localize`Successfully applied tag`);
+    });
+  }
+
+  protected removeTagFromProjects(tag: Tag): void {
+    this.projectTagService.removeTagFromProjects(tag, this.selectedProjects).subscribe(() => {
+      for (const project of this.selectedProjects) {
+        project.tags = project.tags.filter((projectTag: Tag) => projectTag.id !== tag.id);
+      }
+      this.updateTagCheckedValue(tag);
+      this.snackBar.open($localize`Successfully removed tag`);
+    });
+  }
+}
diff --git a/src/app/teacher/color-chooser/color-chooser.component.html b/src/app/teacher/color-chooser/color-chooser.component.html
new file mode 100644
index 00000000000..7377628800e
--- /dev/null
+++ b/src/app/teacher/color-chooser/color-chooser.component.html
@@ -0,0 +1,13 @@
+<mat-chip-listbox>
+  @for (color of colors; track color) {
+    <mat-chip-option
+      class="color-choice"
+      [value]="color"
+      [selected]="color === chosenColor"
+      (selectionChange)="chooseColorEvent.emit($event.selected ? $event.source.value : '')"
+      [style.background-color]="color"
+    >
+      <div class="color-option-div"></div>
+    </mat-chip-option>
+  }
+</mat-chip-listbox>
diff --git a/src/app/teacher/color-chooser/color-chooser.component.scss b/src/app/teacher/color-chooser/color-chooser.component.scss
new file mode 100644
index 00000000000..5854076152a
--- /dev/null
+++ b/src/app/teacher/color-chooser/color-chooser.component.scss
@@ -0,0 +1,10 @@
+@import 'style/abstracts/variables';
+
+.color-choice {
+  border-radius: $button-border-radius;
+  width: 32px;
+}
+
+.color-option-div {
+  width: 10px;
+}
diff --git a/src/app/teacher/color-chooser/color-chooser.component.spec.ts b/src/app/teacher/color-chooser/color-chooser.component.spec.ts
new file mode 100644
index 00000000000..a5c95929ac0
--- /dev/null
+++ b/src/app/teacher/color-chooser/color-chooser.component.spec.ts
@@ -0,0 +1,20 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ColorChooserComponent } from './color-chooser.component';
+
+describe('ColorChooserComponent', () => {
+  let component: ColorChooserComponent;
+  let fixture: ComponentFixture<ColorChooserComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ColorChooserComponent]
+    });
+    fixture = TestBed.createComponent(ColorChooserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/teacher/color-chooser/color-chooser.component.ts b/src/app/teacher/color-chooser/color-chooser.component.ts
new file mode 100644
index 00000000000..71617fc074c
--- /dev/null
+++ b/src/app/teacher/color-chooser/color-chooser.component.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatChipsModule } from '@angular/material/chips';
+
+@Component({
+  imports: [CommonModule, MatChipsModule],
+  selector: 'color-chooser',
+  standalone: true,
+  styleUrl: './color-chooser.component.scss',
+  templateUrl: './color-chooser.component.html'
+})
+export class ColorChooserComponent {
+  @Output() chooseColorEvent: EventEmitter<string> = new EventEmitter();
+  @Input() chosenColor: string;
+  protected colors: string[] = [
+    '#66BB6A',
+    '#009688',
+    '#00B0FF',
+    '#1565C0',
+    '#673AB7',
+    '#AB47BC',
+    '#E91E63',
+    '#D50000',
+    '#F57C00',
+    '#FBC02D',
+    '#795548',
+    '#757575'
+  ];
+}
diff --git a/src/app/teacher/edit-tag/edit-tag.component.html b/src/app/teacher/edit-tag/edit-tag.component.html
new file mode 100644
index 00000000000..e14be165b6a
--- /dev/null
+++ b/src/app/teacher/edit-tag/edit-tag.component.html
@@ -0,0 +1,40 @@
+<div class="tag-inputs" fxLayout="column">
+  <div class="tag-preview">
+    <tag class="mat-small" [color]="colorControl.value" [text]="nameControl.value" />
+  </div>
+  <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <mat-form-field fxFlex>
+      <mat-label i18n>Tag Name</mat-label>
+      <input matInput #nameInput (keyup.enter)="enterKeyPressed()" [formControl]="nameControl" />
+      @if (nameControl.errors?.required) {
+        <mat-error i18n>Required</mat-error>
+      } @else if (nameControl.errors?.archivedNotAllowed) {
+        <mat-error i18n>Archived tag not allowed</mat-error>
+      } @else if (nameControl.errors?.tagAlreadyExists) {
+        <mat-error i18n>Tag already exists</mat-error>
+      }
+    </mat-form-field>
+    <mat-form-field class="color-input">
+      <mat-label i18n>Color</mat-label>
+      <input matInput (keyup.enter)="enterKeyPressed()" [formControl]="colorControl" />
+      @if (colorControl.errors?.required) {
+        <mat-error i18n>Required</mat-error>
+      }
+    </mat-form-field>
+  </div>
+</div>
+<div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutAlign="start center" fxLayoutGap="8px">
+  <color-chooser [chosenColor]="colorControl.value" (chooseColorEvent)="chooseColor($event)" />
+  <span fxFlex></span>
+  <div fxLayoutGap="8px">
+    <button mat-button (click)="close()" i18n>Cancel</button>
+    <button
+      mat-flat-button
+      color="primary"
+      [disabled]="!nameControl.valid || !colorControl.valid"
+      (click)="submit()"
+    >
+      {{ submitLabel }}
+    </button>
+  </div>
+</div>
diff --git a/src/app/teacher/edit-tag/edit-tag.component.scss b/src/app/teacher/edit-tag/edit-tag.component.scss
new file mode 100644
index 00000000000..17f523357f6
--- /dev/null
+++ b/src/app/teacher/edit-tag/edit-tag.component.scss
@@ -0,0 +1,9 @@
+@import 'style/abstracts/variables';
+
+.tag-preview {
+  margin-bottom: 12px;
+}
+
+.color-input {
+  width: 120px;
+}
diff --git a/src/app/teacher/edit-tag/edit-tag.component.spec.ts b/src/app/teacher/edit-tag/edit-tag.component.spec.ts
new file mode 100644
index 00000000000..6d1d76cce87
--- /dev/null
+++ b/src/app/teacher/edit-tag/edit-tag.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EditTagComponent } from './edit-tag.component';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ColorService } from '../../../assets/wise5/services/colorService';
+
+describe('EditTagComponent', () => {
+  let component: EditTagComponent;
+  let fixture: ComponentFixture<EditTagComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, EditTagComponent, HttpClientTestingModule],
+      providers: [ColorService, ProjectTagService]
+    });
+    fixture = TestBed.createComponent(EditTagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/teacher/edit-tag/edit-tag.component.ts b/src/app/teacher/edit-tag/edit-tag.component.ts
new file mode 100644
index 00000000000..5265237f18e
--- /dev/null
+++ b/src/app/teacher/edit-tag/edit-tag.component.ts
@@ -0,0 +1,161 @@
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import {
+  AbstractControl,
+  FormControl,
+  FormsModule,
+  ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn,
+  Validators
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
+import { Tag } from '../../domain/tag';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ColorChooserComponent } from '../color-chooser/color-chooser.component';
+import { TagComponent } from '../tag/tag.component';
+
+@Component({
+  imports: [
+    ColorChooserComponent,
+    CommonModule,
+    FormsModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    TagComponent
+  ],
+  selector: 'edit-tag',
+  standalone: true,
+  styleUrl: './edit-tag.component.scss',
+  templateUrl: './edit-tag.component.html'
+})
+export class EditTagComponent {
+  @Output() closeEvent: EventEmitter<void> = new EventEmitter();
+  @ViewChild('nameInput') nameInput: ElementRef;
+  protected submitLabel: string = $localize`Create`;
+  @Input() tag: Tag;
+  private tags: Tag[] = [];
+
+  protected colorControl = new FormControl('', [Validators.required]);
+  protected nameControl = new FormControl('', [
+    Validators.required,
+    this.createArchivedTagValidator(),
+    this.createUniqueTagValidator()
+  ]);
+
+  constructor(private projectTagService: ProjectTagService, private snackBar: MatSnackBar) {}
+
+  ngOnInit(): void {
+    if (this.tag != null) {
+      this.nameControl.setValue(this.tag.text);
+      this.colorControl.setValue(this.tag.color);
+      this.submitLabel = $localize`Save`;
+    }
+    this.projectTagService.retrieveUserTags().subscribe((tags: Tag[]) => {
+      this.tags = tags;
+      if (this.tag != null) {
+        this.tags = this.tags.filter((tag: Tag) => tag.id !== this.tag.id);
+      }
+    });
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.nameInput.nativeElement.focus();
+    });
+  }
+
+  private createArchivedTagValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (control.value?.toLowerCase() === 'archived') {
+        control.markAsTouched();
+        return { archivedNotAllowed: true };
+      } else {
+        return null;
+      }
+    };
+  }
+
+  private createUniqueTagValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (this.doesTagAlreadyExist(control.value)) {
+        control.markAsTouched();
+        return { tagAlreadyExists: true };
+      } else {
+        return null;
+      }
+    };
+  }
+  private doesTagAlreadyExist(tagText: string): boolean {
+    return this.tags.some((tag: Tag) => tag.text.toLowerCase() === tagText.toLowerCase().trim());
+  }
+
+  protected enterKeyPressed(): void {
+    if (this.nameControl.valid) {
+      this.submit();
+    }
+  }
+
+  protected chooseColor(color: string): void {
+    this.colorControl.setValue(color);
+  }
+
+  protected submit(): void {
+    if (this.tag == null) {
+      this.createTag();
+    } else {
+      this.updateTag();
+    }
+  }
+
+  private getNameValue(): string {
+    return this.nameControl.value.trim();
+  }
+
+  private getColorValue(): string {
+    return this.colorControl.value.trim();
+  }
+
+  private createTag(): void {
+    this.projectTagService.createTag(this.getNameValue(), this.getColorValue()).subscribe({
+      next: () => {
+        this.snackBar.open($localize`Tag created`);
+        this.close();
+      },
+      error: ({ error }) => {
+        this.handleError(error);
+      }
+    });
+  }
+
+  private updateTag(): void {
+    this.tag.text = this.getNameValue();
+    this.tag.color = this.getColorValue();
+    this.projectTagService.updateTag(this.tag).subscribe({
+      next: () => {
+        this.snackBar.open($localize`Tag updated`);
+        this.close();
+      },
+      error: ({ error }) => {
+        this.handleError(error);
+      }
+    });
+  }
+
+  private handleError(error: any): void {
+    if (error.messageCode === 'tagAlreadyExists') {
+      this.nameControl.setErrors({ tagAlreadyExists: true });
+    }
+  }
+
+  protected close(): void {
+    this.closeEvent.emit();
+  }
+}
diff --git a/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.html b/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.html
new file mode 100644
index 00000000000..2ffaeb14d09
--- /dev/null
+++ b/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.html
@@ -0,0 +1,58 @@
+<h2 mat-dialog-title i18n>Manage Tags</h2>
+<mat-dialog-content class="dialog-content-scroll">
+  <div fxLayout="column" fxLayoutGap="12px">
+    @if (showCreateTag) {
+      <edit-tag (closeEvent)="showCreateTag = false" />
+    } @else {
+      <div>
+        <button mat-flat-button color="primary" (click)="showCreateTag = !showCreateTag" i18n>
+          + New Tag
+        </button>
+      </div>
+    }
+    <mat-list class="app-bg-bg">
+      @for (tag of tags; track tag.id; let tagIndex = $index; let last = $last) {
+        <div>
+          <mat-list-item>
+            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+              @if (idToEditing[tag.id]) {
+                <div class="edit-tag">
+                  <edit-tag [tag]="tag" (closeEvent)="cancelEditing(tag)" />
+                </div>
+              } @else {
+                <tag class="mat-small" [color]="tag.color" [text]="tag.text" />
+                <span fxFlex></span>
+                <button
+                  mat-icon-button
+                  color="primary"
+                  (click)="idToEditing[tag.id] = !idToEditing[tag.id]; showCreateTag = false"
+                  matTooltip="Edit"
+                  matTooltipPosition="above"
+                  i18n-matTooltip
+                >
+                  <mat-icon>edit</mat-icon>
+                </button>
+                <button
+                  mat-icon-button
+                  color="primary"
+                  (click)="delete(tag)"
+                  matTooltip="Delete"
+                  matTooltipPosition="above"
+                  i18n-matTooltip
+                >
+                  <mat-icon>close</mat-icon>
+                </button>
+              }
+            </div>
+          </mat-list-item>
+          @if (!last) {
+            <mat-divider />
+          }
+        </div>
+      }
+    </mat-list>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions fxLayoutAlign="end">
+  <button mat-button cdkFocusInitial mat-dialog-close i18n>Close</button>
+</mat-dialog-actions>
diff --git a/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.scss b/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.scss
new file mode 100644
index 00000000000..1c29f635cc5
--- /dev/null
+++ b/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.scss
@@ -0,0 +1,31 @@
+@import 'style/abstracts/variables';
+
+.edit-tag {
+  width: 100%;
+  padding: 16px 0;
+}
+
+.tag-name {
+  border-radius: $card-border-radius;
+  padding: 12px;
+}
+
+.mat-icon {
+  margin: 0px;
+}
+
+.mdc-list {
+  padding: 0;
+}
+
+.mdc-list-item {
+  padding: 0 12px;
+}
+
+.mat-divider {
+  margin: 0;
+}
+
+.mdc-list-item.mdc-list-item--with-one-line {
+  height: auto;
+}
diff --git a/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.spec.ts b/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.spec.ts
new file mode 100644
index 00000000000..47f9491c32d
--- /dev/null
+++ b/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.spec.ts
@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ManageTagsDialogComponent } from './manage-tags-dialog.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { StudentTeacherCommonServicesModule } from '../../student-teacher-common-services.module';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
+import { TeacherService } from '../teacher.service';
+import { ColorService } from '../../../assets/wise5/services/colorService';
+
+describe('ManageTagsDialogComponent', () => {
+  let component: ManageTagsDialogComponent;
+  let fixture: ComponentFixture<ManageTagsDialogComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientTestingModule,
+        ManageTagsDialogComponent,
+        StudentTeacherCommonServicesModule
+      ],
+      providers: [ColorService, ProjectTagService, TeacherService]
+    });
+    fixture = TestBed.createComponent(ManageTagsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.ts b/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.ts
new file mode 100644
index 00000000000..f6e1d39fe8c
--- /dev/null
+++ b/src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.ts
@@ -0,0 +1,101 @@
+import { Component, OnInit } from '@angular/core';
+import { Tag } from '../../domain/tag';
+import { Subject, Subscription } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
+import { MatIconModule } from '@angular/material/icon';
+import { TeacherService } from '../teacher.service';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { EditTagComponent } from '../edit-tag/edit-tag.component';
+import { Project } from '../../domain/project';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
+import { TagComponent } from '../tag/tag.component';
+
+@Component({
+  imports: [
+    CommonModule,
+    EditTagComponent,
+    FlexLayoutModule,
+    FormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatTooltipModule,
+    TagComponent
+  ],
+  selector: 'manage-tags-dialog',
+  standalone: true,
+  styleUrl: './manage-tags-dialog.component.scss',
+  templateUrl: './manage-tags-dialog.component.html'
+})
+export class ManageTagsDialogComponent implements OnInit {
+  protected idToEditing: { [id: string]: boolean } = {};
+  protected inputChanged: Subject<any> = new Subject<any>();
+  private projects: Project[];
+  protected showCreateTag: boolean;
+  private subscriptions: Subscription = new Subscription();
+  protected tags: Tag[] = [];
+
+  constructor(
+    private projectTagService: ProjectTagService,
+    private snackBar: MatSnackBar,
+    private teacherService: TeacherService
+  ) {}
+
+  ngOnInit(): void {
+    this.teacherService.getPersonalAndSharedProjects().subscribe((projects) => {
+      this.projects = projects;
+    });
+    this.subscriptions.add(
+      this.projectTagService.retrieveUserTags().subscribe((tags: Tag[]) => {
+        this.tags = tags;
+      })
+    );
+    this.subscriptions.add(
+      this.projectTagService.newTag$.subscribe((tag: Tag) => {
+        this.tags.push(tag);
+        this.projectTagService.sortTags(this.tags);
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
+  protected cancelEditing(tag: Tag): void {
+    this.idToEditing[tag.id] = false;
+  }
+
+  protected delete(tag: Tag): void {
+    if (confirm(this.getDeleteMessage(tag))) {
+      this.projectTagService.deleteTag(tag).subscribe((tag: Tag) => {
+        this.tags = this.tags.filter((t) => t.id !== tag.id);
+        this.snackBar.open($localize`Tag deleted`);
+      });
+    }
+  }
+
+  private getDeleteMessage(tag: Tag): string {
+    const numProjectsWithTag = this.projects.filter((project: Project) =>
+      project.tags.some((projectTag: Tag) => projectTag.id === tag.id)
+    ).length;
+    const numberOfProjectsMessage =
+      numProjectsWithTag === 1
+        ? $localize`There is ${numProjectsWithTag} unit with this tag.`
+        : $localize`There are ${numProjectsWithTag} units with this tag.`;
+    return $localize`Are you sure you want to delete this tag? ` + numberOfProjectsMessage;
+  }
+}
diff --git a/src/app/teacher/run-menu/run-menu.component.spec.ts b/src/app/teacher/run-menu/run-menu.component.spec.ts
index 647e2aa2078..d05d420938d 100644
--- a/src/app/teacher/run-menu/run-menu.component.spec.ts
+++ b/src/app/teacher/run-menu/run-menu.component.spec.ts
@@ -67,6 +67,7 @@ export class MockConfigService {
   }
 }
 
+const archivedTag = { id: 1, text: 'archived', color: null };
 let archiveProjectService: ArchiveProjectService;
 let component: RunMenuComponent;
 let fixture: ComponentFixture<RunMenuComponent>;
@@ -137,20 +138,22 @@ function setRun(archived: boolean): void {
 function archive() {
   describe('archive()', () => {
     it('should archive a run', async () => {
-      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(runId1, true)));
+      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(runId1, true, archivedTag)));
       await runMenuHarness.clickArchiveMenuButton();
       expect(component.run.project.archived).toEqual(true);
       const snackBar = await getSnackBar();
       expect(await snackBar.getMessage()).toEqual('Successfully archived unit.');
     });
     it('should archive a run and then undo', async () => {
-      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(runId1, true)));
+      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(runId1, true, archivedTag)));
       await runMenuHarness.clickArchiveMenuButton();
       expect(component.run.project.archived).toEqual(true);
       let snackBar = await getSnackBar();
       expect(await snackBar.getMessage()).toEqual('Successfully archived unit.');
       expect(await snackBar.getActionDescription()).toEqual('Undo');
-      spyOn(http, 'delete').and.returnValue(of(new ArchiveProjectResponse(runId1, false)));
+      spyOn(http, 'delete').and.returnValue(
+        of(new ArchiveProjectResponse(runId1, false, archivedTag))
+      );
       await snackBar.dismissWithAction();
       expect(component.run.project.archived).toEqual(false);
       snackBar = await getSnackBar();
@@ -164,7 +167,9 @@ function unarchive() {
     it('should unarchive a run', async () => {
       setRun(true);
       component.ngOnInit();
-      spyOn(http, 'delete').and.returnValue(of(new ArchiveProjectResponse(runId1, false)));
+      spyOn(http, 'delete').and.returnValue(
+        of(new ArchiveProjectResponse(runId1, false, archivedTag))
+      );
       await runMenuHarness.clickUnarchiveMenuButton();
       expect(component.run.project.archived).toEqual(false);
       const snackBar = await getSnackBar();
@@ -173,13 +178,15 @@ function unarchive() {
     it('should unarchive a run and then undo', async () => {
       setRun(true);
       component.ngOnInit();
-      spyOn(http, 'delete').and.returnValue(of(new ArchiveProjectResponse(runId1, false)));
+      spyOn(http, 'delete').and.returnValue(
+        of(new ArchiveProjectResponse(runId1, false, archivedTag))
+      );
       await runMenuHarness.clickUnarchiveMenuButton();
       expect(component.run.project.archived).toEqual(false);
       let snackBar = await getSnackBar();
       expect(await snackBar.getMessage()).toEqual('Successfully restored unit.');
       expect(await snackBar.getActionDescription()).toEqual('Undo');
-      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(runId1, true)));
+      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(runId1, true, archivedTag)));
       await snackBar.dismissWithAction();
       expect(component.run.project.archived).toEqual(true);
       snackBar = await getSnackBar();
diff --git a/src/app/teacher/run-menu/run-menu.component.ts b/src/app/teacher/run-menu/run-menu.component.ts
index 2bb73952461..e75fb35309a 100644
--- a/src/app/teacher/run-menu/run-menu.component.ts
+++ b/src/app/teacher/run-menu/run-menu.component.ts
@@ -12,8 +12,8 @@ import { ArchiveProjectService } from '../../services/archive-project.service';
 
 @Component({
   selector: 'app-run-menu',
-  templateUrl: './run-menu.component.html',
-  styleUrls: ['./run-menu.component.scss']
+  styleUrl: './run-menu.component.scss',
+  templateUrl: './run-menu.component.html'
 })
 export class RunMenuComponent implements OnInit {
   private editLink: string = '';
diff --git a/src/app/teacher/select-tags/select-tags.component.html b/src/app/teacher/select-tags/select-tags.component.html
new file mode 100644
index 00000000000..f22c13de485
--- /dev/null
+++ b/src/app/teacher/select-tags/select-tags.component.html
@@ -0,0 +1,31 @@
+<ng-select
+  class="select-tags"
+  [items]="filteredTags"
+  appearance="outline"
+  bindLabel="tags"
+  placeholder="Filter by tag"
+  i18n-placeholder
+  [(ngModel)]="selectedTags"
+  [closeOnSelect]="false"
+  [multiple]="true"
+  [searchFn]="tagSearch"
+  (change)="selectTagEvent.emit(selectedTags)"
+>
+  <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+    <mat-checkbox [checked]="isSelected(item)" color="primary">
+      <tag [color]="item.color" [text]="item.text" class="mat-small" />
+    </mat-checkbox>
+  </ng-template>
+  <ng-template ng-label-tmp let-item="item" let-clear="clear">
+    <tag
+      [color]="item.color"
+      [text]="item.text"
+      [allowRemove]="true"
+      (removeTagEvent)="clear(item)"
+      class="mat-small"
+    />
+  </ng-template>
+  <ng-template ng-footer-tmp>
+    <button mat-button (click)="manageTags(); $event.stopPropagation()" i18n>Manage Tags</button>
+  </ng-template>
+</ng-select>
diff --git a/src/app/teacher/select-tags/select-tags.component.scss b/src/app/teacher/select-tags/select-tags.component.scss
new file mode 100644
index 00000000000..975127ea8d0
--- /dev/null
+++ b/src/app/teacher/select-tags/select-tags.component.scss
@@ -0,0 +1,38 @@
+.ng-select {
+  padding-bottom: 0;
+
+  &.select-tags {
+    &.ng-select-multiple .ng-select-container {
+      .ng-value-container {
+        .ng-value {
+          background-color: transparent;
+          padding: 2px 0;
+        }
+      }
+    }
+
+    .ng-select-container {
+      width: auto;
+    }
+
+    div {
+      box-sizing: unset;
+    }
+  }
+}
+
+.ng-dropdown-panel {
+  &.ng-select-bottom {
+    top: 100%;
+    width: auto;
+  }
+
+  &.ng-select-top {
+    bottom: calc(100% - .04375em);
+    width: auto;
+  }
+
+  .mdc-checkbox .mdc-checkbox__background {
+    box-sizing: border-box;
+  }
+}
diff --git a/src/app/teacher/select-tags/select-tags.component.spec.ts b/src/app/teacher/select-tags/select-tags.component.spec.ts
new file mode 100644
index 00000000000..0b1a2491b22
--- /dev/null
+++ b/src/app/teacher/select-tags/select-tags.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SelectTagsComponent } from './select-tags.component';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('SelectTagsComponent', () => {
+  let component: SelectTagsComponent;
+  let fixture: ComponentFixture<SelectTagsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, HttpClientTestingModule, SelectTagsComponent],
+      providers: [ProjectTagService]
+    });
+    fixture = TestBed.createComponent(SelectTagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/teacher/select-tags/select-tags.component.ts b/src/app/teacher/select-tags/select-tags.component.ts
new file mode 100644
index 00000000000..e15f4a1fa6e
--- /dev/null
+++ b/src/app/teacher/select-tags/select-tags.component.ts
@@ -0,0 +1,47 @@
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatDividerModule } from '@angular/material/divider';
+import { Tag } from '../../domain/tag';
+import { AbstractTagsMenuComponent } from '../abstract-tags-menu/abstract-tags-menu.component';
+import { SearchBarComponent } from '../../modules/shared/search-bar/search-bar.component';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { TagComponent } from '../tag/tag.component';
+import { FormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+@Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDividerModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    NgSelectModule,
+    SearchBarComponent,
+    TagComponent
+  ],
+  encapsulation: ViewEncapsulation.None,
+  selector: 'select-tags',
+  standalone: true,
+  styleUrl: './select-tags.component.scss',
+  templateUrl: './select-tags.component.html'
+})
+export class SelectTagsComponent extends AbstractTagsMenuComponent {
+  @Input() selectedTags: Tag[] = [];
+  @Output() selectTagEvent: EventEmitter<Tag[]> = new EventEmitter<Tag[]>();
+
+  protected tagSearch(term: string, item: Tag): boolean {
+    return item.text.toLowerCase().includes(term.toLowerCase());
+  }
+
+  protected isSelected(tag: Tag): boolean {
+    return this.selectedTags.some((selectedTag) => selectedTag.text === tag.text);
+  }
+}
diff --git a/src/app/teacher/tag/tag.component.html b/src/app/teacher/tag/tag.component.html
new file mode 100644
index 00000000000..0410491d97c
--- /dev/null
+++ b/src/app/teacher/tag/tag.component.html
@@ -0,0 +1,15 @@
+<span class="tag" [ngStyle]="{ 'background-color': color, color: textColor }">
+  <span>{{ text }}</span>
+  @if (allowRemove) {
+    <span class="divider"></span>
+    <button
+      mat-icon-button
+      class="remove-tag"
+      (click)="removeTagEvent.emit()"
+      aria-label="Remove tag"
+      i18n-aria-label
+    >
+      <mat-icon class="remove-icon">cancel</mat-icon>
+    </button>
+  }
+</span>
diff --git a/src/app/teacher/tag/tag.component.scss b/src/app/teacher/tag/tag.component.scss
new file mode 100644
index 00000000000..0fa5e34605c
--- /dev/null
+++ b/src/app/teacher/tag/tag.component.scss
@@ -0,0 +1,27 @@
+.tag {
+  padding: .3rem .6rem;
+  border-radius: 1rem;
+  min-height: 1rem;
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+}
+
+.divider {
+  margin: 0 .2rem;
+}
+
+.remove-tag {
+  padding: 0;
+  height: 16px;
+  width: 16px;
+}
+
+.remove-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
\ No newline at end of file
diff --git a/src/app/teacher/tag/tag.component.spec.ts b/src/app/teacher/tag/tag.component.spec.ts
new file mode 100644
index 00000000000..5f0cbffa5ae
--- /dev/null
+++ b/src/app/teacher/tag/tag.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TagComponent } from './tag.component';
+import { ColorService } from '../../../assets/wise5/services/colorService';
+
+describe('TagComponent', () => {
+  let component: TagComponent;
+  let fixture: ComponentFixture<TagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TagComponent],
+      providers: [ColorService]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/teacher/tag/tag.component.ts b/src/app/teacher/tag/tag.component.ts
new file mode 100644
index 00000000000..880f64a604e
--- /dev/null
+++ b/src/app/teacher/tag/tag.component.ts
@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { ColorService } from '../../../assets/wise5/services/colorService';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+
+@Component({
+  imports: [CommonModule, MatButtonModule, MatDividerModule, MatIconModule],
+  selector: 'tag',
+  standalone: true,
+  templateUrl: './tag.component.html',
+  styleUrl: './tag.component.scss'
+})
+export class TagComponent implements OnChanges {
+  @Input() allowRemove: boolean;
+  @Input() color: string;
+  @Output() removeTagEvent: EventEmitter<void> = new EventEmitter<void>();
+  @Input() text: string;
+  protected textColor: string;
+
+  constructor(private colorService: ColorService) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.color?.currentValue) {
+      this.textColor = this.colorService.getContrastColor(this.color);
+    }
+  }
+}
diff --git a/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html b/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html
index f979f26c9a7..3edf02dcf48 100644
--- a/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html
+++ b/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html
@@ -47,8 +47,8 @@
   <div *ngIf="run.shared" class="info" i18n>
     Shared by {{ run.owner.firstName }} {{ run.owner.lastName }}
   </div>
+  <unit-tags [tags]="run.project.tags" />
 </ng-template>
-
 <mat-card
   class="can-highlight"
   [ngClass]="{ 'highlighted-bg': run.highlighted }"
diff --git a/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.spec.ts b/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.spec.ts
index c2660158eaa..c177c5850c1 100644
--- a/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.spec.ts
+++ b/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.spec.ts
@@ -21,6 +21,7 @@ import { User } from '../../domain/user';
 import { HttpClient } from '@angular/common/http';
 import { of } from 'rxjs';
 import { ArchiveProjectResponse } from '../../domain/archiveProjectResponse';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
 
 export class MockTeacherService {}
 
@@ -36,6 +37,7 @@ export class MockConfigService {
   }
 }
 
+const archivedTag = { id: 1, text: 'archived', color: null };
 let component: TeacherRunListItemComponent;
 let fixture: ComponentFixture<TeacherRunListItemComponent>;
 let http: HttpClient;
@@ -64,6 +66,7 @@ describe('TeacherRunListItemComponent', () => {
       providers: [
         ArchiveProjectService,
         { provide: ConfigService, useClass: MockConfigService },
+        ProjectTagService,
         { provide: TeacherService, useClass: MockTeacherService },
         UserService
       ],
@@ -119,7 +122,7 @@ function runArchiveStatusChanged() {
   describe('run is not archived and archive menu button is clicked', () => {
     it('should archive run and emit events', async () => {
       expect(await runListItemHarness.isArchived()).toBeFalse();
-      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(1, true)));
+      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(1, true, archivedTag)));
       await runListItemHarness.clickArchiveMenuButton();
       expect(await runListItemHarness.isArchived()).toBeTrue();
     });
diff --git a/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.ts b/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.ts
index 912f7973e85..e2facc631f8 100644
--- a/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.ts
+++ b/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.ts
@@ -7,12 +7,15 @@ import { flash } from '../../animations';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { ShareRunCodeDialogComponent } from '../share-run-code-dialog/share-run-code-dialog.component';
+import { Subscription } from 'rxjs';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
+import { Tag } from '../../domain/tag';
 
 @Component({
+  animations: [flash],
   selector: 'app-teacher-run-list-item',
-  templateUrl: './teacher-run-list-item.component.html',
-  styleUrls: ['./teacher-run-list-item.component.scss'],
-  animations: [flash]
+  styleUrl: './teacher-run-list-item.component.scss',
+  templateUrl: './teacher-run-list-item.component.html'
 })
 export class TeacherRunListItemComponent implements OnInit {
   protected animateDelay: string = '0s';
@@ -22,6 +25,7 @@ export class TeacherRunListItemComponent implements OnInit {
   @Input() run: TeacherRun = new TeacherRun();
   @Output() runArchiveStatusChangedEvent: EventEmitter<void> = new EventEmitter<void>();
   @Output() runSelectedStatusChangedEvent: EventEmitter<void> = new EventEmitter<void>();
+  private subscriptions: Subscription = new Subscription();
   protected thumbStyle: SafeStyle;
 
   constructor(
@@ -29,10 +33,11 @@ export class TeacherRunListItemComponent implements OnInit {
     private configService: ConfigService,
     private router: Router,
     private elRef: ElementRef,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private projectTagService: ProjectTagService
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.run.project.thumbStyle = this.getThumbStyle();
     this.manageStudentsLink = `${this.configService.getContextPath()}/teacher/manage/unit/${
       this.run.id
@@ -44,18 +49,47 @@ export class TeacherRunListItemComponent implements OnInit {
         this.run.highlighted = false;
       }, 7000);
     }
+    this.subscribeToTagUpdated();
+    this.subscribeToTagDeleted();
   }
 
-  ngAfterViewInit() {
+  private subscribeToTagUpdated(): void {
+    this.subscriptions.add(
+      this.projectTagService.tagUpdated$.subscribe((updatedTag: Tag) => {
+        const projectTag = this.run.project.tags.find((tag: Tag) => tag.id === updatedTag.id);
+        if (projectTag != null) {
+          projectTag.text = updatedTag.text;
+          projectTag.color = updatedTag.color;
+          this.projectTagService.sortTags(this.run.project.tags);
+        }
+      })
+    );
+  }
+
+  private subscribeToTagDeleted(): void {
+    this.subscriptions.add(
+      this.projectTagService.tagDeleted$.subscribe((tag: Tag) => {
+        if (this.run.project.hasTag(tag)) {
+          this.run.project.removeTag(tag);
+        }
+      })
+    );
+  }
+
+  ngAfterViewInit(): void {
     if (this.run.highlighted) {
       this.elRef.nativeElement.querySelector('mat-card').scrollIntoView();
     }
   }
 
-  ngOnChanges() {
+  ngOnChanges(): void {
     this.periodsTooltipText = this.getPeriodsTooltipText();
   }
 
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
   private getThumbStyle() {
     const DEFAULT_THUMB = 'assets/img/default-picture.svg';
     const STYLE = `url(${this.run.project.projectThumb}), url(${DEFAULT_THUMB})`;
diff --git a/src/app/teacher/teacher-run-list/teacher-run-list.component.html b/src/app/teacher/teacher-run-list/teacher-run-list.component.html
index 6b7215fc21d..8750ffd76a8 100644
--- a/src/app/teacher/teacher-run-list/teacher-run-list.component.html
+++ b/src/app/teacher/teacher-run-list/teacher-run-list.component.html
@@ -1,23 +1,21 @@
-<div class="content-block">
-  <div
-    class="content-block__header controls dark-theme primary-bg"
-    fxLayout="row"
-    fxLayout.xs="column"
-    fxLayoutGap.sm="16px"
-    fxLayoutAlign="start center"
-  >
-    <app-search-bar
-      fxFlex="0 0 auto"
-      fxFlex.xs="0 0 100%"
-      fxFlex.sm="0 0 calc(50%-8px)"
-      i18n-placeholderText
-      placeholderText="Search"
-      [disable]="!recentRunsLoaded"
-      [value]="searchValue"
-      (update)="searchChanged($event)"
-    ></app-search-bar>
-    <span fxFlex="1 1 auto" fxHide fxShow.gt-sm></span>
-    <mat-form-field>
+<div
+  class="content-block filters dark-theme primary-bg"
+  fxLayout="row"
+  fxLayout.lt-md="column"
+  fxLayoutGap="16px"
+  fxLayoutAlign="start stretch"
+>
+  <app-search-bar
+    fxFlex="0 0 auto"
+    i18n-placeholderText
+    placeholderText="Search"
+    [disable]="!recentRunsLoaded"
+    [value]="searchValue"
+    (update)="searchChanged($event)"
+  />
+  <span fxFlex="1 1 auto" fxHide fxShow.gt-sm></span>
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="16px">
+    <mat-form-field [subscriptSizing]="'dynamic'">
       <mat-label>View</mat-label>
       <mat-select [(ngModel)]="showArchivedView" (selectionChange)="refreshProjects()">
         <mat-option [value]="false" i18n>Active</mat-option>
@@ -25,58 +23,71 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div *ngIf="filteredRuns.length > 0" class="notice">
-    <p [ngStyle]="{ visibility: allRunsLoaded ? 'visible' : 'hidden' }">
-      <ng-container *ngIf="searchValue || filterValue" i18n
-        >Units found: {{ filteredRuns.length }}</ng-container
-      >
-      <ng-container *ngIf="!searchValue && !filterValue">
-        <ng-container *ngIf="showArchivedView" i18n>Archived classroom units:</ng-container>
-        <ng-container *ngIf="!showArchivedView" i18n>Active classroom units:</ng-container>
-        {{ filteredRuns.length }}
-      </ng-container>
-      <span class="mat-caption" *ngIf="!showArchivedView && filteredRuns.length">
-        (<ng-container *ngIf="completedTotal()"
-          ><span i18n>{{ completedTotal() }} completed</span>,
-        </ng-container>
-        <ng-container
-          ><span i18n>{{ activeTotal() }} running</span></ng-container
-        >
-        <ng-container *ngIf="scheduledTotal()"
-          >, <span i18n>{{ scheduledTotal() }} scheduled</span></ng-container
-        >)
-      </span>
-      <ng-container *ngIf="searchValue || filterValue">
-        |
-        <a
-          href="#"
-          (click)="clearFilters($event)"
-          (keyup.enter)="clearFilters($event)"
-          tabindex="0"
-          i18n
-          >Clear filters</a
+</div>
+<div class="content-block">
+  <div
+    fxLayout="column"
+    fxLayout.gt-xs="row"
+    fxLayoutGap="16px"
+    fxLayoutAlign="space-between center"
+  >
+    <select-tags [selectedTags]="selectedTags" (selectTagEvent)="selectTags($event)" />
+    <div class="notice run-counts">
+      <p [ngStyle]="{ visibility: allRunsLoaded ? 'visible' : 'hidden' }">
+        <ng-container *ngIf="searchValue || filterValue" i18n
+          >Units found: {{ filteredRuns.length }}</ng-container
         >
-      </ng-container>
-    </p>
+        <ng-container *ngIf="!searchValue && !filterValue">
+          <ng-container *ngIf="showArchivedView" i18n>Archived classroom units:</ng-container>
+          <ng-container *ngIf="!showArchivedView" i18n>Active classroom units:</ng-container>
+          {{ filteredRuns.length }}
+        </ng-container>
+        <span class="mat-caption" *ngIf="!showArchivedView && filteredRuns.length">
+          (<ng-container *ngIf="completedTotal()"
+            ><span i18n>{{ completedTotal() }} completed</span>,
+          </ng-container>
+          <ng-container
+            ><span i18n>{{ activeTotal() }} running</span></ng-container
+          >
+          <ng-container *ngIf="scheduledTotal()"
+            >, <span i18n>{{ scheduledTotal() }} scheduled</span></ng-container
+          >)
+        </span>
+        <ng-container *ngIf="searchValue || filterValue || selectedTags.length > 0">
+          |
+          <a
+            href="#"
+            (click)="clearFilters($event)"
+            (keyup.enter)="clearFilters($event)"
+            tabindex="0"
+            i18n
+            >Clear filters</a
+          >
+        </ng-container>
+      </p>
+    </div>
   </div>
   <ng-container *ngIf="recentRunsLoaded">
-    <ng-container *ngIf="filteredRuns.length === 0">
-      <div class="notice no-runs-message" *ngIf="!showArchivedView">
-        <p i18n>Hey there! Looks like you don't have any active classroom units.</p>
-        <p i18n>Browse the "Unit Library" to find titles to use with your students.</p>
-      </div>
-      <div class="notice no-runs-message" *ngIf="showArchivedView">
-        <p i18n>Looks like you don't have any archived classroom units.</p>
-      </div>
-    </ng-container>
-    <select-runs-controls
-      *ngIf="filteredRuns.length > 0"
-      (archiveProjectsEvent)="archiveProjects($event)"
-      [runChangedEventEmitter]="runChangedEventEmitter"
-      [runs]="filteredRuns"
-      (selectRunsOptionChosenEvent)="selectRunsOptionChosen($event)"
-      [showArchive]="!showArchivedView"
-    ></select-runs-controls>
+    <div class="notice no-runs-message" *ngIf="!showArchivedView && getNumActiveRuns() === 0">
+      <p i18n>Hey there! Looks like you don't have any active classroom units.</p>
+      <p i18n>Browse the "Unit Library" to find titles to use with your students.</p>
+    </div>
+    <div class="notice no-runs-message" *ngIf="showArchivedView && getNumArchivedRuns() === 0">
+      <p i18n>Looks like you don't have any archived classroom units.</p>
+    </div>
+    <div fxLayout="row">
+      <select-runs-controls
+        *ngIf="filteredRuns.length > 0"
+        (archiveProjectsEvent)="archiveProjects($event)"
+        [runChangedEventEmitter]="runChangedEventEmitter"
+        [runs]="filteredRuns"
+        (selectRunsOptionChosenEvent)="selectRunsOptionChosen($event)"
+        [showArchive]="!showArchivedView"
+      />
+      @if (selectedProjects.length > 0) {
+        <apply-tags-button [selectedProjects]="selectedProjects" />
+      }
+    </div>
     <app-timeline>
       <ng-container *ngFor="let run of filteredRuns.sort(sortByStartTimeDesc); let i = index">
         <app-timeline-item
diff --git a/src/app/teacher/teacher-run-list/teacher-run-list.component.scss b/src/app/teacher/teacher-run-list/teacher-run-list.component.scss
index d893cc68870..e7f62bbd682 100644
--- a/src/app/teacher/teacher-run-list/teacher-run-list.component.scss
+++ b/src/app/teacher/teacher-run-list/teacher-run-list.component.scss
@@ -7,19 +7,15 @@ h2 {
   margin-bottom: 0;
 }
 
-.content-block {
+.filters {
   margin-top: 24px;
-  overflow: hidden;
+  padding: 16px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.content-block__header {
-  margin: -16px -16px 16px;
-
-  @media (min-width: breakpoint('sm.min')) {
-    margin: -24px -24px 16px;
-  }
-}
-
-.notice {
+.run-counts {
   font-weight: 500;
+  margin: 0;
+  max-width: none;
 }
diff --git a/src/app/teacher/teacher-run-list/teacher-run-list.component.spec.ts b/src/app/teacher/teacher-run-list/teacher-run-list.component.spec.ts
index f7943f7dad0..f0b910945ee 100644
--- a/src/app/teacher/teacher-run-list/teacher-run-list.component.spec.ts
+++ b/src/app/teacher/teacher-run-list/teacher-run-list.component.spec.ts
@@ -30,10 +30,13 @@ import { Project } from '../../domain/project';
 import { SearchBarComponent } from '../../modules/shared/search-bar/search-bar.component';
 import { HttpClient } from '@angular/common/http';
 import { ArchiveProjectResponse } from '../../domain/archiveProjectResponse';
+import { Tag } from '../../domain/tag';
+import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
 import { provideRouter } from '@angular/router';
 
 class TeacherScheduleStubComponent {}
 
+const archivedTag = { id: 1, text: 'archived', color: null };
 let component: TeacherRunListComponent;
 let configService: ConfigService;
 const currentTime = new Date().getTime();
@@ -55,7 +58,7 @@ const userId: number = 1;
 let userService: UserService;
 
 class TeacherRunStub extends TeacherRun {
-  constructor(id: number, startTime: number, endTime: number, name: string, tags: string[] = []) {
+  constructor(id: number, startTime: number, endTime: number, name: string, tags: Tag[] = []) {
     super({
       id: id,
       archived: false,
@@ -65,7 +68,7 @@ class TeacherRunStub extends TeacherRun {
       owner: new User({ id: userId }),
       periods: [],
       project: new Project({
-        archived: tags.includes('archived'),
+        archived: tags.includes(archivedTag),
         id: id,
         tags: tags,
         name: name,
@@ -103,6 +106,7 @@ describe('TeacherRunListComponent', () => {
         providers: [
           ArchiveProjectService,
           ConfigService,
+          ProjectTagService,
           provideRouter([
             { path: 'teacher/home/schedule', component: TeacherScheduleStubComponent }
           ]),
@@ -156,7 +160,10 @@ function archiveSelectedRuns(): void {
       await (await runListHarness.getRunListItem(run3Title)).checkCheckbox();
       await (await runListHarness.getRunListItem(run2Title)).checkCheckbox();
       spyOn(http, 'put').and.returnValue(
-        of([new ArchiveProjectResponse(runId3, true), new ArchiveProjectResponse(runId2, true)])
+        of([
+          new ArchiveProjectResponse(runId3, true, archivedTag),
+          new ArchiveProjectResponse(runId2, true, archivedTag)
+        ])
       );
       await runListHarness.clickArchiveButton();
       expect(await runListHarness.getNumRunListItems()).toEqual(1);
@@ -171,8 +178,8 @@ function unarchiveSelectedRuns(): void {
       getRunsSpy.and.returnValue(
         of([
           new TeacherRunStub(runId1, run1StartTime, null, run1Title),
-          new TeacherRunStub(runId2, run2StartTime, null, run2Title, ['archived']),
-          new TeacherRunStub(runId3, run3StartTime, null, run3Title, ['archived'])
+          new TeacherRunStub(runId2, run2StartTime, null, run2Title, [archivedTag]),
+          new TeacherRunStub(runId3, run3StartTime, null, run3Title, [archivedTag])
         ])
       );
       component.ngOnInit();
@@ -181,7 +188,10 @@ function unarchiveSelectedRuns(): void {
       await (await runListHarness.getRunListItem(run3Title)).checkCheckbox();
       await (await runListHarness.getRunListItem(run2Title)).checkCheckbox();
       spyOn(http, 'delete').and.returnValue(
-        of([new ArchiveProjectResponse(runId3, false), new ArchiveProjectResponse(runId2, false)])
+        of([
+          new ArchiveProjectResponse(runId3, false, archivedTag),
+          new ArchiveProjectResponse(runId2, false, archivedTag)
+        ])
       );
       await runListHarness.clickUnarchiveButton();
       expect(await runListHarness.getNumRunListItems()).toEqual(0);
@@ -310,7 +320,7 @@ function archiveRunNoLongerInActiveView() {
     it('it should no longer be displayed in the active view', async () => {
       expect(await runListHarness.isShowingArchived()).toBeFalse();
       expect(await runListHarness.getNumRunListItems()).toEqual(3);
-      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(runId2, true)));
+      spyOn(http, 'put').and.returnValue(of(new ArchiveProjectResponse(runId2, true, archivedTag)));
       const runListItem = await runListHarness.getRunListItem(run2Title);
       await runListItem.clickArchiveMenuButton();
       expect(await runListHarness.isShowingArchived()).toBeFalse();
@@ -326,7 +336,7 @@ function unarchiveRunNoLongerInArchivedView() {
       getRunsSpy.and.returnValue(
         of([
           new TeacherRunStub(runId1, run1StartTime, null, run1Title),
-          new TeacherRunStub(runId2, run2StartTime, null, run2Title, ['archived']),
+          new TeacherRunStub(runId2, run2StartTime, null, run2Title, [archivedTag]),
           new TeacherRunStub(runId3, run3StartTime, null, run3Title)
         ])
       );
@@ -335,7 +345,9 @@ function unarchiveRunNoLongerInArchivedView() {
       expect(await runListHarness.isShowingArchived()).toBeTrue();
       expect(await runListHarness.getNumRunListItems()).toEqual(1);
       await expectRunTitles([run2Title]);
-      spyOn(http, 'delete').and.returnValue(of(new ArchiveProjectResponse(runId2, false)));
+      spyOn(http, 'delete').and.returnValue(
+        of(new ArchiveProjectResponse(runId2, false, archivedTag))
+      );
       const runListItem = await runListHarness.getRunListItem(run2Title);
       await runListItem.clickUnarchiveMenuButton();
       expect(await runListHarness.isShowingArchived()).toBeTrue();
diff --git a/src/app/teacher/teacher-run-list/teacher-run-list.component.ts b/src/app/teacher/teacher-run-list/teacher-run-list.component.ts
index 9d479215b35..40a738311ba 100644
--- a/src/app/teacher/teacher-run-list/teacher-run-list.component.ts
+++ b/src/app/teacher/teacher-run-list/teacher-run-list.component.ts
@@ -11,11 +11,12 @@ import { runSpansDays } from '../../../assets/wise5/common/datetime/datetime';
 import { SelectRunsOption } from '../select-runs-controls/select-runs-option';
 import { sortByRunStartTimeDesc } from '../../domain/run';
 import { Project } from '../../domain/project';
+import { Tag } from '../../domain/tag';
 
 @Component({
   selector: 'app-teacher-run-list',
-  templateUrl: './teacher-run-list.component.html',
-  styleUrls: ['./teacher-run-list.component.scss']
+  styleUrl: './teacher-run-list.component.scss',
+  templateUrl: './teacher-run-list.component.html'
 })
 export class TeacherRunListComponent implements OnInit {
   private MAX_RECENT_RUNS = 10;
@@ -28,6 +29,8 @@ export class TeacherRunListComponent implements OnInit {
   protected runChangedEventEmitter: EventEmitter<void> = new EventEmitter<void>();
   protected runs: TeacherRun[] = [];
   protected searchValue: string = '';
+  protected selectedProjects: Project[] = [];
+  protected selectedTags: Tag[] = [];
   protected showAll: boolean = false;
   protected showArchivedView: boolean = false;
   private subscriptions: Subscription = new Subscription();
@@ -78,7 +81,7 @@ export class TeacherRunListComponent implements OnInit {
     this.runs = runs.map((run) => {
       const teacherRun = new TeacherRun(run);
       teacherRun.shared = !teacherRun.isOwner(userId);
-      teacherRun.project.archived = teacherRun.project.tags.includes('archived');
+      teacherRun.project.archived = teacherRun.project.hasTagWithText('archived');
       return teacherRun;
     });
     this.filteredRuns = this.runs;
@@ -153,12 +156,27 @@ export class TeacherRunListComponent implements OnInit {
     this.performSearchAndFilter();
   }
 
+  protected selectTags(tags: Tag[]): void {
+    this.selectedTags = tags;
+    this.performSearchAndFilter();
+  }
+
+  protected removeTag(tag: Tag): void {
+    this.selectedTags = this.selectedTags.filter((selectedTag: Tag) => selectedTag.id !== tag.id);
+    this.performSearchAndFilter();
+  }
+
   private performFilter(): void {
     this.filteredRuns = this.filteredRuns.filter(
       (run: TeacherRun) =>
         (!this.showArchivedView && !run.project.archived) ||
         (this.showArchivedView && run.project.archived)
     );
+    if (this.selectedTags.length > 0) {
+      this.filteredRuns = this.filteredRuns.filter((run: TeacherRun) =>
+        this.selectedTags.some((tag: Tag) => run.project.hasTag(tag))
+      );
+    }
   }
 
   private performSearch(searchValue: string): TeacherRun[] {
@@ -185,6 +203,7 @@ export class TeacherRunListComponent implements OnInit {
   protected reset(): void {
     this.searchValue = '';
     this.filterValue = '';
+    this.selectedTags = [];
     this.performSearchAndFilter();
   }
 
@@ -237,15 +256,24 @@ export class TeacherRunListComponent implements OnInit {
 
   private runSelectedStatusChanged(): void {
     this.runChangedEventEmitter.emit();
+    this.selectedProjects = this.getSelectedProjects();
   }
 
   protected archiveProjects(archive: boolean): void {
     this.archiveProjectService.archiveProjects(this.getSelectedProjects(), archive);
   }
 
-  private getSelectedProjects(): Project[] {
+  protected getSelectedProjects(): Project[] {
     return this.filteredRuns
       .filter((run: TeacherRun) => run.project.selected)
       .map((run: TeacherRun) => run.project);
   }
+
+  protected getNumActiveRuns(): number {
+    return this.runs.filter((run: TeacherRun) => !run.project.archived).length;
+  }
+
+  protected getNumArchivedRuns(): number {
+    return this.runs.filter((run: TeacherRun) => run.project.archived).length;
+  }
 }
diff --git a/src/app/teacher/teacher.module.ts b/src/app/teacher/teacher.module.ts
index c6f9320236c..2d8b2f725d4 100644
--- a/src/app/teacher/teacher.module.ts
+++ b/src/app/teacher/teacher.module.ts
@@ -43,6 +43,12 @@ import { MatListModule } from '@angular/material/list';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { SelectRunsControlsModule } from './select-runs-controls/select-runs-controls.module';
 import { SearchBarComponent } from '../modules/shared/search-bar/search-bar.component';
+import { ApplyTagsButtonComponent } from './apply-tags-button/apply-tags-button.component';
+import { ProjectTagService } from '../../assets/wise5/services/projectTagService';
+import { SelectTagsComponent } from './select-tags/select-tags.component';
+import { UnitTagsComponent } from './unit-tags/unit-tags.component';
+import { ColorService } from '../../assets/wise5/services/colorService';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 const materialModules = [
   MatAutocompleteModule,
@@ -67,18 +73,22 @@ const materialModules = [
 ];
 @NgModule({
   imports: [
+    ApplyTagsButtonComponent,
     CommonModule,
     DiscourseRecentActivityComponent,
     FlexLayoutModule,
     FormsModule,
     LibraryModule,
     materialModules,
+    NgSelectModule,
     SearchBarComponent,
-    SharedModule,
     SelectRunsControlsModule,
+    SelectTagsComponent,
+    SharedModule,
     TeacherRoutingModule,
     TimelineModule,
-    ClipboardModule
+    ClipboardModule,
+    UnitTagsComponent
   ],
   declarations: [
     CreateRunDialogComponent,
@@ -95,7 +105,7 @@ const materialModules = [
     TeacherRunListComponent,
     TeacherRunListItemComponent
   ],
-  providers: [AuthGuard],
-  exports: [TeacherComponent, materialModules]
+  providers: [AuthGuard, ColorService, ProjectTagService],
+  exports: [TeacherComponent, UnitTagsComponent, materialModules]
 })
 export class TeacherModule {}
diff --git a/src/app/teacher/teacher.service.ts b/src/app/teacher/teacher.service.ts
index 0bcada405e6..a691bad2e3d 100644
--- a/src/app/teacher/teacher.service.ts
+++ b/src/app/teacher/teacher.service.ts
@@ -65,6 +65,10 @@ export class TeacherService {
     return this.http.get<Run>(`${this.lastRunUrl}/${projectId}`);
   }
 
+  getPersonalAndSharedProjects(): Observable<Project[]> {
+    return this.http.get<Project[]>('/api/project/personal-and-shared');
+  }
+
   registerTeacherAccount(teacherUser: Teacher): Observable<any> {
     const headers = {
       'Content-Type': 'application/json'
diff --git a/src/app/teacher/unit-tags/unit-tags.component.html b/src/app/teacher/unit-tags/unit-tags.component.html
new file mode 100644
index 00000000000..c97bddb2e90
--- /dev/null
+++ b/src/app/teacher/unit-tags/unit-tags.component.html
@@ -0,0 +1,7 @@
+<div fxLayoutGap="8px" role="presentation" aria-label="Unit tags" i18n-aria-label>
+  @for (tag of tags; track tag) {
+    @if (tag.text !== 'archived') {
+      <tag [color]="tag.color" [text]="tag.text" />
+    }
+  }
+</div>
diff --git a/src/app/teacher/unit-tags/unit-tags.component.scss b/src/app/teacher/unit-tags/unit-tags.component.scss
new file mode 100644
index 00000000000..0dda090c8dd
--- /dev/null
+++ b/src/app/teacher/unit-tags/unit-tags.component.scss
@@ -0,0 +1,4 @@
+tag {
+  display: inline-block;
+  margin-top: 8px;
+}
\ No newline at end of file
diff --git a/src/app/teacher/unit-tags/unit-tags.component.spec.ts b/src/app/teacher/unit-tags/unit-tags.component.spec.ts
new file mode 100644
index 00000000000..59093c6e52c
--- /dev/null
+++ b/src/app/teacher/unit-tags/unit-tags.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UnitTagsComponent } from './unit-tags.component';
+
+describe('UnitTagsComponent', () => {
+  let component: UnitTagsComponent;
+  let fixture: ComponentFixture<UnitTagsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UnitTagsComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UnitTagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/teacher/unit-tags/unit-tags.component.ts b/src/app/teacher/unit-tags/unit-tags.component.ts
new file mode 100644
index 00000000000..b7593b32059
--- /dev/null
+++ b/src/app/teacher/unit-tags/unit-tags.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { TagComponent } from '../tag/tag.component';
+import { Tag } from '../../domain/tag';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+@Component({
+  selector: 'unit-tags',
+  standalone: true,
+  imports: [CommonModule, FlexLayoutModule, TagComponent],
+  templateUrl: './unit-tags.component.html',
+  styleUrl: './unit-tags.component.scss'
+})
+export class UnitTagsComponent {
+  @Input() tags: Tag[];
+}
diff --git a/src/assets/wise5/services/colorService.ts b/src/assets/wise5/services/colorService.ts
new file mode 100644
index 00000000000..e6ff68dca14
--- /dev/null
+++ b/src/assets/wise5/services/colorService.ts
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import Color from 'colorjs.io/dist/color';
+
+@Injectable()
+export class ColorService {
+  getContrastColor(color: string): string {
+    const colorObj = new Color(color);
+    return colorObj.contrast('#FFFFFF', 'WCAG21') < 4.5 ? '#000000' : '#FFFFFF';
+  }
+}
diff --git a/src/assets/wise5/services/projectTagService.ts b/src/assets/wise5/services/projectTagService.ts
new file mode 100644
index 00000000000..4cb343c10e4
--- /dev/null
+++ b/src/assets/wise5/services/projectTagService.ts
@@ -0,0 +1,67 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Subject, Observable, tap, map } from 'rxjs';
+import { Project } from '../../../app/domain/project';
+import { Tag } from '../../../app/domain/tag';
+import { ProjectAndTagsResponse } from '../../../app/domain/projectAndTagsResponse';
+
+@Injectable()
+export class ProjectTagService {
+  private newTagSource: Subject<Tag> = new Subject<Tag>();
+  public newTag$: Observable<Tag> = this.newTagSource.asObservable();
+  private tagDeletedSource: Subject<Tag> = new Subject<Tag>();
+  public tagDeleted$: Observable<Tag> = this.tagDeletedSource.asObservable();
+  private tagUpdatedSource: Subject<Tag> = new Subject<Tag>();
+  public tagUpdated$: Observable<Tag> = this.tagUpdatedSource.asObservable();
+
+  constructor(protected http: HttpClient) {}
+
+  retrieveUserTags(): Observable<Tag[]> {
+    return this.http
+      .get<Tag[]>(`/api/user/tags`)
+      .pipe(map((tags) => tags.filter((tag) => tag.text !== 'archived')));
+  }
+
+  applyTagToProjects(tag: Tag, projects: Project[]): Observable<ProjectAndTagsResponse[]> {
+    const projectIds = projects.map((project) => project.id);
+    return this.http.put<ProjectAndTagsResponse[]>(`/api/projects/tag/${tag.id}`, projectIds);
+  }
+
+  removeTagFromProjects(tag: Tag, projects: Project[]): Observable<ProjectAndTagsResponse[]> {
+    let params = new HttpParams();
+    for (const project of projects) {
+      params = params.append('projectIds', project.id);
+    }
+    return this.http.delete<ProjectAndTagsResponse[]>(`/api/projects/tag/${tag.id}`, {
+      params: params
+    });
+  }
+
+  updateTag(tag: Tag): Observable<Tag> {
+    return this.http.put<Tag>(`/api/user/tag/${tag.id}`, tag).pipe(
+      tap((tag) => {
+        this.tagUpdatedSource.next(tag);
+      })
+    );
+  }
+
+  createTag(tagName: string, color: string): Observable<Tag> {
+    return this.http.post(`/api/user/tag`, { text: tagName, color: color }).pipe(
+      tap((tag: Tag) => {
+        this.newTagSource.next(tag);
+      })
+    );
+  }
+
+  sortTags(tags: Tag[]): Tag[] {
+    return tags.sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()));
+  }
+
+  deleteTag(tag: Tag): Observable<Tag> {
+    return this.http.delete(`/api/user/tag/${tag.id}`).pipe(
+      tap((tag: Tag) => {
+        this.tagDeletedSource.next(tag);
+      })
+    );
+  }
+}
diff --git a/src/assets/wise5/services/tagService.ts b/src/assets/wise5/services/tagService.ts
index f6166dfee56..dad97205668 100644
--- a/src/assets/wise5/services/tagService.ts
+++ b/src/assets/wise5/services/tagService.ts
@@ -8,7 +8,7 @@ import { ProjectService } from './projectService';
 
 @Injectable()
 export class TagService {
-  tags: any[] = [];
+  private tags: any[] = [];
 
   constructor(
     protected http: HttpClient,
diff --git a/src/messages.xlf b/src/messages.xlf
index a665769d0de..0164e979a15 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -279,7 +279,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">131</context>
+          <context context-type="linenumber">132</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/official-library/official-library-details.html</context>
@@ -289,6 +289,10 @@
           <context context-type="sourcefile">src/app/modules/library/personal-library/personal-library-details.html</context>
           <context context-type="linenumber">15</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.html</context>
+          <context context-type="linenumber">57</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/share-run-code-dialog/share-run-code-dialog.component.html</context>
           <context context-type="linenumber">61</context>
@@ -431,6 +435,10 @@
           <context context-type="sourcefile">src/app/teacher/edit-run-warning-dialog/edit-run-warning-dialog.component.html</context>
           <context context-type="linenumber">20</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/list-classroom-courses-dialog/list-classroom-courses-dialog.component.html</context>
           <context context-type="linenumber">52</context>
@@ -693,6 +701,10 @@
           <context context-type="sourcefile">src/app/authoring-tool/edit-connected-component-delete-button/edit-connected-component-delete-button.component.html</context>
           <context context-type="linenumber">5</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.html</context>
+          <context context-type="linenumber">39</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-asset-authoring/project-asset-authoring.component.html</context>
           <context context-type="linenumber">85</context>
@@ -1013,6 +1025,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/authoring-tool/edit-component-tags/edit-component-tags.component.html</context>
           <context context-type="linenumber">23</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.html</context>
+          <context context-type="linenumber">7</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="9001940350011393028" datatype="html">
         <source>Are you sure you want to delete this tag?</source>
@@ -2925,7 +2941,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">14</context>
+          <context context-type="linenumber">11</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component.html</context>
@@ -5410,21 +5426,21 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Discipline</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-filters/library-filters.component.html</context>
-          <context context-type="linenumber">50</context>
+          <context context-type="linenumber">45</context>
         </context-group>
       </trans-unit>
       <trans-unit id="b26db160af51478944575eeb0137e167ab054cca" datatype="html">
         <source>DCI Arrangement</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-filters/library-filters.component.html</context>
-          <context context-type="linenumber">67</context>
+          <context context-type="linenumber">62</context>
         </context-group>
       </trans-unit>
       <trans-unit id="b17d72cdba2d53ad1c4952c8c3ba0d70ffc7ed1d" datatype="html">
         <source>Performance Expectation</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-filters/library-filters.component.html</context>
-          <context context-type="linenumber">84</context>
+          <context context-type="linenumber">79</context>
         </context-group>
       </trans-unit>
       <trans-unit id="07ab43ffb10e6bed417b203bfdc02cdda6aa1b61" datatype="html">
@@ -5495,49 +5511,49 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source><x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;{{ project.uri }}&quot; target=&quot;_blank&quot;&gt;"/>This unit<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/> is licensed under <x id="START_LINK_1" equiv-text="&lt;a href=&quot;{{ licenseUrl }}&quot; target=&quot;_blank&quot;&gt;"/>CC BY-SA<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">87,88</context>
+          <context context-type="linenumber">88,89</context>
         </context-group>
       </trans-unit>
       <trans-unit id="76090675079e7fd02dc6c73399e7c5e40538d258" datatype="html">
         <source><x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;{{ project.uri }}&quot; target=&quot;_blank&quot;&gt;"/>This unit<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/> is licensed under <x id="START_LINK_1" equiv-text="&lt;a href=&quot;{{ licenseUrl }}&quot; target=&quot;_blank&quot;&gt;"/>CC BY-SA<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/> by <x id="INTERPOLATION" equiv-text="{{ authorsString }}"/>.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">91,93</context>
+          <context context-type="linenumber">92,94</context>
         </context-group>
       </trans-unit>
       <trans-unit id="88cef6ebc611fe768365957b97c2081dac9fbdca" datatype="html">
         <source><x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;{{ project.uri }}&quot; target=&quot;_blank&quot;&gt;"/>This unit<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/> is a copy of <x id="START_LINK_1" equiv-text="&lt;a href=&quot;{{ parentProject.uri }}&quot; target=&quot;_blank&quot;&gt;"/><x id="INTERPOLATION" equiv-text="{{ parentProject.title }}"/><x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/> (used under <x id="START_LINK_2" equiv-text="&lt;a href=&quot;{{ licenseUrl }}&quot; target=&quot;_blank&quot;&gt;"/>CC BY-SA<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>).</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">98,100</context>
+          <context context-type="linenumber">99,101</context>
         </context-group>
       </trans-unit>
       <trans-unit id="ba4629c96855780ad8a56e5d0db5150f3237b66f" datatype="html">
         <source><x id="START_LINK" ctype="x-a" equiv-text="&lt;a href=&quot;{{ project.uri }}&quot; target=&quot;_blank&quot;&gt;"/>This unit<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/> is a copy of <x id="START_LINK_1" equiv-text="&lt;a href=&quot;{{ parentProject.uri }}&quot; target=&quot;_blank&quot;&gt;"/><x id="INTERPOLATION" equiv-text="{{ parentProject.title }}"/><x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/> by <x id="INTERPOLATION_1" equiv-text="{{ parentAuthorsString }}"/> (used under <x id="START_LINK_2" equiv-text="&lt;a href=&quot;{{ licenseUrl }}&quot; target=&quot;_blank&quot;&gt;"/>CC BY-SA<x id="CLOSE_LINK" ctype="x-a" equiv-text="&lt;/a&gt;"/>).</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">103,106</context>
+          <context context-type="linenumber">104,107</context>
         </context-group>
       </trans-unit>
       <trans-unit id="ac0f81713a84217c9bd1d9bb460245d8190b073f" datatype="html">
         <source>More</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">117</context>
+          <context context-type="linenumber">118</context>
         </context-group>
       </trans-unit>
       <trans-unit id="01b7fa43a3428af3967f5ddeb02a21315ec636e4" datatype="html">
         <source>View License</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">119</context>
+          <context context-type="linenumber">120</context>
         </context-group>
       </trans-unit>
       <trans-unit id="053c99466a9288207400b49f2ca907192b5bd44d" datatype="html">
         <source>Use with Class</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">139</context>
+          <context context-type="linenumber">140</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/create-run-dialog/create-run-dialog.component.html</context>
@@ -5548,7 +5564,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Preview</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project-details/library-project-details.component.html</context>
-          <context context-type="linenumber">143</context>
+          <context context-type="linenumber">144</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/run-menu/run-menu.component.html</context>
@@ -5599,6 +5615,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/modules/library/library-project-menu/library-project-menu.component.html</context>
           <context context-type="linenumber">14</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.html</context>
+          <context context-type="linenumber">29</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/peer-grouping/select-peer-grouping-option/select-peer-grouping-option.component.html</context>
           <context context-type="linenumber">9</context>
@@ -5689,7 +5709,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Unit Details</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/library-project/library-project.component.ts</context>
-          <context context-type="linenumber">53</context>
+          <context context-type="linenumber">90</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1160916388490317189" datatype="html">
@@ -5793,54 +5813,54 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">3</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="6829218544e108e152f5fa72cb79c4ccb82e0d06" datatype="html">
+        <source>View</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/modules/library/personal-library/personal-library.component.html</context>
+          <context context-type="linenumber">7</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="b36e1450940b7f6028d8587568c7d669b53f7a06" datatype="html">
         <source>Active</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/personal-library/personal-library.component.html</context>
-          <context context-type="linenumber">8</context>
+          <context context-type="linenumber">9</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">23</context>
+          <context context-type="linenumber">21</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5124633f6ba30f4d9b29fd0e43c9195a6bcf0f79" datatype="html">
         <source>Archived</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/personal-library/personal-library.component.html</context>
-          <context context-type="linenumber">9</context>
+          <context context-type="linenumber">10</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">24</context>
+          <context context-type="linenumber">22</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8c208095ba4dc91d0b08952326cd6eff7e781d8e" datatype="html">
         <source> <x id="INTERPOLATION" equiv-text="{{ numSelectedProjects() }}"/> selected </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/personal-library/personal-library.component.html</context>
-          <context context-type="linenumber">23,25</context>
+          <context context-type="linenumber">24,26</context>
         </context-group>
       </trans-unit>
       <trans-unit id="050a0b486e807a37ee8dbeeac274d84786bffa34" datatype="html">
         <source> No owned or shared units found. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/personal-library/personal-library.component.html</context>
-          <context context-type="linenumber">56,58</context>
+          <context context-type="linenumber">60,62</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8443540764676509944" datatype="html">
-        <source>units</source>
+      <trans-unit id="4204495853509039236" datatype="html">
+        <source>Select all units</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/personal-library/personal-library.component.ts</context>
-          <context context-type="linenumber">28</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="413346167952108153" datatype="html">
-        <source>items</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/modules/library/select-all-items-checkbox/select-all-items-checkbox.component.ts</context>
-          <context context-type="linenumber">13</context>
+          <context context-type="linenumber">30</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6028472408314831177" datatype="html">
@@ -5915,7 +5935,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/shared/search-bar/search-bar.component.html</context>
-          <context context-type="linenumber">11</context>
+          <context context-type="linenumber">16</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/share-run-dialog/share-run-dialog.component.html</context>
@@ -6242,7 +6262,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">104</context>
+          <context context-type="linenumber">115</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3376099465386156138" datatype="html">
@@ -7408,82 +7428,82 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Successfully <x id="PH" equiv-text="archive ? &apos;archived&apos; : &apos;restored&apos;"/> unit.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">42</context>
+          <context context-type="linenumber">43</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5775346636203685655" datatype="html">
         <source>Undo</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">42</context>
+          <context context-type="linenumber">43</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">123</context>
+          <context context-type="linenumber">124</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1866036816253590803" datatype="html">
         <source>Action undone.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">56</context>
+          <context context-type="linenumber">57</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">139</context>
+          <context context-type="linenumber">140</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8310924106294815391" datatype="html">
         <source>Error undoing action.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">59</context>
+          <context context-type="linenumber">60</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">142</context>
+          <context context-type="linenumber">143</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4649373271512187502" datatype="html">
         <source>Error archiving unit.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">67</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3781019523543102447" datatype="html">
         <source>Error restoring unit.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">67</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4446500764298446942" datatype="html">
         <source>Successfully archived <x id="PH" equiv-text="count"/> unit(s).</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">121</context>
+          <context context-type="linenumber">122</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6233410407787231949" datatype="html">
         <source>Successfully restored <x id="PH" equiv-text="count"/> unit(s).</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">122</context>
+          <context context-type="linenumber">123</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3755123516042132329" datatype="html">
         <source>Error archiving unit(s).</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">149</context>
+          <context context-type="linenumber">150</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3419148337120710852" datatype="html">
         <source>Error restoring unit(s).</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/archive-project.service.ts</context>
-          <context context-type="linenumber">149</context>
+          <context context-type="linenumber">150</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e931f6b80399785ea1647269f43ffeea54327cb6" datatype="html">
@@ -7769,7 +7789,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">38</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cba86a51e8ee210e24b4d9b47ceffed1e70b61d1" datatype="html">
@@ -8010,6 +8030,46 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">121,123</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="4aec117738aef2c652af2cabf15863b130aa2196" datatype="html">
+        <source>Apply tags</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/apply-tags-button/apply-tags-button.component.html</context>
+          <context context-type="linenumber">4</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/apply-tags-button/apply-tags-button.component.html</context>
+          <context context-type="linenumber">11</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="dfbc2318c9fccb8087026673bfd89a13ef2284de" datatype="html">
+        <source>Manage Tags</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/apply-tags-button/apply-tags-button.component.html</context>
+          <context context-type="linenumber">26</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/select-tags/select-tags.component.html</context>
+          <context context-type="linenumber">29</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="4098687853188279101" datatype="html">
+        <source>Successfully applied tag</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/apply-tags-button/apply-tags-button.component.ts</context>
+          <context context-type="linenumber">78</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1793239119471258096" datatype="html">
+        <source>Successfully removed tag</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/apply-tags-button/apply-tags-button.component.ts</context>
+          <context context-type="linenumber">88</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="a2d9400df68d9f4e89fe24f6a3f40bc5322f19f2" datatype="html">
         <source>1. Choose Periods</source>
         <context-group purpose="location">
@@ -8232,6 +8292,102 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">25</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="e5f24fc7a2bf50bd61d109dd9cad3fbff6ec7add" datatype="html">
+        <source>Required</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.html</context>
+          <context context-type="linenumber">10</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.html</context>
+          <context context-type="linenumber">21</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/required-error-label/required-error-label.component.html</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="aae122bd1c42ac22fe514a63b0d2832097264935" datatype="html">
+        <source>Archived tag not allowed</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.html</context>
+          <context context-type="linenumber">12</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="4215210349960e31377ef22c4d2750f626b84067" datatype="html">
+        <source>Tag already exists</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.html</context>
+          <context context-type="linenumber">14</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="8fa4d523f7b91df4390120b85ed0406138273e1a" datatype="html">
+        <source>Color</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.html</context>
+          <context context-type="linenumber">18</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.html</context>
+          <context context-type="linenumber">249</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/graph/edit-graph-advanced/edit-graph-advanced.component.html</context>
+          <context context-type="linenumber">107</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/graph/edit-graph-advanced/edit-graph-advanced.component.html</context>
+          <context context-type="linenumber">148</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html</context>
+          <context context-type="linenumber">191</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html</context>
+          <context context-type="linenumber">250</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html</context>
+          <context context-type="linenumber">431</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/label/label-authoring/label-authoring.component.html</context>
+          <context context-type="linenumber">147</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html</context>
+          <context context-type="linenumber">146</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="5674286808255988565" datatype="html">
+        <source>Create</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.ts</context>
+          <context context-type="linenumber">42</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="3768927257183755959" datatype="html">
+        <source>Save</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.ts</context>
+          <context context-type="linenumber">59</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="5325249077056620539" datatype="html">
+        <source>Tag created</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.ts</context>
+          <context context-type="linenumber">129</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1772313028295081091" datatype="html">
+        <source>Tag updated</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/edit-tag/edit-tag.component.ts</context>
+          <context context-type="linenumber">143</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="76de164da3c441addbf9b14950150aa869b00fdb" datatype="html">
         <source>Share to Google Classroom</source>
         <context-group purpose="location">
@@ -8345,6 +8501,41 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">123</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="13773197ab492ec5aab001f2798d1f262f09c068" datatype="html">
+        <source> + New Tag </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.html</context>
+          <context context-type="linenumber">8,10</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="8663242190095976332" datatype="html">
+        <source>Tag deleted</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.ts</context>
+          <context context-type="linenumber">86</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="9151762754681070291" datatype="html">
+        <source>There is <x id="PH" equiv-text="numProjectsWithTag"/> unit with this tag.</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.ts</context>
+          <context context-type="linenumber">97</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="2021640020415028727" datatype="html">
+        <source>There are <x id="PH" equiv-text="numProjectsWithTag"/> units with this tag.</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.ts</context>
+          <context context-type="linenumber">98</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1288226131735320264" datatype="html">
+        <source>Are you sure you want to delete this tag? </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/manage-tags-dialog/manage-tags-dialog.component.ts</context>
+          <context context-type="linenumber">99</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="9008968878373693685" datatype="html">
         <source>Teams</source>
         <context-group purpose="location">
@@ -8708,6 +8899,13 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">28</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="bdb9a910523610254872e147222689e9a4115b84" datatype="html">
+        <source>Filter by tag</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/select-tags/select-tags.component.html</context>
+          <context context-type="linenumber">6</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="c76c2eeebe0adc81f3434495d189c56d70899cad" datatype="html">
         <source>Share with Students</source>
         <context-group purpose="location">
@@ -8868,6 +9066,13 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">172</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="0f6ae2b3123ad5e28ac81cd30a8504ffdbf802a7" datatype="html">
+        <source>Remove tag</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/tag/tag.component.html</context>
+          <context context-type="linenumber">9</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="48ae429835665b58a2711db68e68b9a4dfa1f0ff" datatype="html">
         <source>Teacher home navigation</source>
         <context-group purpose="location">
@@ -8987,70 +9192,77 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Class Periods:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">116</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dc4130f5eb9a8c04d1b3734d36f745db855fe90f" datatype="html">
         <source>Archived classroom units:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">34</context>
+          <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
       <trans-unit id="86afbfd92ca97c3ff7a13ce7b054cb61da0a765b" datatype="html">
         <source>Active classroom units:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">35</context>
+          <context context-type="linenumber">42</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c3840ff3430f7c6130e4d7a2f0aec5a7cb3ebb3a" datatype="html">
         <source><x id="INTERPOLATION" equiv-text="{{ completedTotal() }}"/> completed</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">40</context>
+          <context context-type="linenumber">47</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a7b809683879d9bbbcc3e267d32b6d1843e71f37" datatype="html">
         <source><x id="INTERPOLATION" equiv-text="{{ activeTotal() }}"/> running</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">43</context>
+          <context context-type="linenumber">50</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c6a2c19b6bd10c35aca82f19ffebdc75a2fc164c" datatype="html">
         <source><x id="INTERPOLATION" equiv-text="{{ scheduledTotal() }}"/> scheduled</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">46</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1e5e23363e949f7dcbaf034bdb141a561132a10e" datatype="html">
         <source>Clear filters</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">57</context>
+          <context context-type="linenumber">64</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e4e0216355ba192123e2e3de05ca4dd43bade702" datatype="html">
         <source>Hey there! Looks like you don&apos;t have any active classroom units.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">65</context>
+          <context context-type="linenumber">72</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0bba20f41a44e7e61cb7eaad1470a5609e82344e" datatype="html">
         <source>Browse the &quot;Unit Library&quot; to find titles to use with your students.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">66</context>
+          <context context-type="linenumber">73</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a6b02f88136d4ac3a08c668a1faafe2759d2b48d" datatype="html">
         <source>Looks like you don&apos;t have any archived classroom units.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">69</context>
+          <context context-type="linenumber">76</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="8e63cdbdb10c29b7ecc49caa43163fc7c800d612" datatype="html">
+        <source>Unit tags</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/unit-tags/unit-tags.component.html</context>
+          <context context-type="linenumber">1</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f6b8c00d13eab40bfcae19bec9a2c7698d943715" datatype="html">
@@ -11508,13 +11720,6 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">203</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="e5f24fc7a2bf50bd61d109dd9cad3fbff6ec7add" datatype="html">
-        <source>Required</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/required-error-label/required-error-label.component.html</context>
-          <context context-type="linenumber">3</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="cf11597f80309219c947fba6c22b94290f6371d2" datatype="html">
         <source>Choose the new location by clicking one of the buttons below</source>
         <context-group purpose="location">
@@ -16718,41 +16923,6 @@ Are you ready to receive feedback on this answer?</source>
           <context context-type="linenumber">245</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8fa4d523f7b91df4390120b85ed0406138273e1a" datatype="html">
-        <source>Color</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.html</context>
-          <context context-type="linenumber">249</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/graph/edit-graph-advanced/edit-graph-advanced.component.html</context>
-          <context context-type="linenumber">107</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/graph/edit-graph-advanced/edit-graph-advanced.component.html</context>
-          <context context-type="linenumber">148</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html</context>
-          <context context-type="linenumber">191</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html</context>
-          <context context-type="linenumber">250</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html</context>
-          <context context-type="linenumber">431</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/label/label-authoring/label-authoring.component.html</context>
-          <context context-type="linenumber">147</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html</context>
-          <context context-type="linenumber">146</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="3009366829878620841" datatype="html">
         <source>Are you sure you want to delete this node?
 
diff --git a/src/style/abstracts/_mixins.scss b/src/style/abstracts/_mixins.scss
index 388c1bbf6d0..8346c0d37bf 100644
--- a/src/style/abstracts/_mixins.scss
+++ b/src/style/abstracts/_mixins.scss
@@ -63,6 +63,10 @@
     }
   }
 
+  .mat-mdc-standard-chip .mdc-evolution-chip__text-label {
+    font-size: mat.font-size($wise-typography, 'button');
+  }
+
   .mat-divider-horizontal {
     margin: 16px 0;
   }
@@ -286,6 +290,67 @@
         border-color: $value;
       }
   }
+
+  // ng-select
+  .ng-select {
+    .ng-select-container {
+      padding: 0 12px;
+      background-color: rgba(0, 0, 0, 0.04);
+      border-radius: $card-border-radius;
+
+      .ng-value-container {
+        padding: .2875em 0;
+
+        .ng-value {
+          margin: 0.21875em 0.4375em 0.21875em 0;
+        }
+
+        .ng-input>input {
+          height: 100%;
+        }
+      }
+
+      &.ng-appearance-outline {
+        min-height: 56px;
+
+        .ng-placeholder {
+          background-color: transparent;
+        }
+
+        &:after {
+          border-radius: $card-border-radius;
+          border: 0 none;
+        }
+
+        &:hover:after {
+          border-bottom: 1px solid;
+        }
+
+        &.ng-has-value {
+          .ng-placeholder {
+            margin-top: 0.4375em;
+          }
+        }
+      }
+    }
+
+    &.ng-select-focused {
+      .ng-select-container {
+        background-color: rgba(0, 0, 0, 0.08);
+
+        &.ng-appearance-outline {
+          &:after {
+            border-bottom: 2px solid map.get($colors, 'primary');
+          }
+
+          .ng-placeholder {
+            color: map.get($colors, 'primary');
+            margin-top: 0.4375em;
+          }
+        }
+      }
+    }
+  }
 }
 
 // Set Angular Material icon size
diff --git a/src/style/components/_dialog.scss b/src/style/components/_dialog.scss
index ffa66c00af1..ab2dddc6731 100644
--- a/src/style/components/_dialog.scss
+++ b/src/style/components/_dialog.scss
@@ -35,7 +35,7 @@ mat-dialog-container.mat-mdc-dialog-container {
     }
   }
 
-  .dialog-content-scroll {
+  .mat-mdc-dialog-title+.mat-mdc-dialog-content.dialog-content-scroll {
     padding-top: 16px;
     padding-bottom: 16px;
   }
diff --git a/src/style/styles.scss b/src/style/styles.scss
index a9ff04bd1ed..41996d3e618 100644
--- a/src/style/styles.scss
+++ b/src/style/styles.scss
@@ -64,6 +64,8 @@
 @import 'themes/author';
 @import 'themes/monitor';
 
+@import "~@ng-select/ng-select/themes/material.theme.css";
+
 // TODO: remove/merge after upgrading apps to Angular
 @import 'themes/apps';
 .app-styles {