diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index ba3e7f8c0..7137c6d0d 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #383838;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1e1e1e;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #383838;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index c8cfe2365..fca6caa98 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #383838;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1e1e1e;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #383838;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index acb3b1f06..fe5320211 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #383838;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1e1e1e;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #383838;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index f40c670c2..ab82f1487 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #383838;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1e1e1e;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #383838;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 6425acf7d..14da89d2a 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -4340,6 +4340,22 @@
   background-color: #3f4b5b;
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #2a323d;
@@ -4391,6 +4407,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #3f4b5b;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.75rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 4bee34305..297c3a015 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -4340,6 +4340,22 @@
   background-color: #3f4b5b;
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #2a323d;
@@ -4391,6 +4407,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #3f4b5b;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.75rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #f0e6f5;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 8ba177989..ff5f5ba96 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -4340,6 +4340,22 @@
   background-color: #dee2e6;
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4391,6 +4407,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #dee2e6;
+  color: #212529;
+  border-radius: 16px;
+  padding: 0 0.75rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: box-shadow 0.15s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 71af6c0ba..f4ba1d8a4 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -4340,6 +4340,22 @@
   background-color: #dee2e6;
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4391,6 +4407,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #dee2e6;
+  color: #212529;
+  border-radius: 16px;
+  padding: 0 0.75rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: box-shadow 0.15s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.75rem;
   border-radius: 4px;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 830cdc975..a42c6c8da 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -4279,6 +4279,22 @@
   background-color: #edebe9;
   border-radius: 2px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4330,6 +4346,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #edebe9;
+  color: #323130;
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 2px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #605e5c;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 2px;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index b696bacd6..a27efe877 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -4291,6 +4291,22 @@
   background-color: #4b4b4b;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #323232;
@@ -4342,6 +4358,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #4b4b4b;
+  color: #dedede;
+  border-radius: 16px;
+  padding: 0 0.429rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.2145rem;
+  margin-bottom: 0.2145rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 02d186f33..716924635 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -4291,6 +4291,22 @@
   background-color: #4b4b4b;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #323232;
@@ -4342,6 +4358,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #4b4b4b;
+  color: #dedede;
+  border-radius: 16px;
+  padding: 0 0.429rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.2145rem;
+  margin-bottom: 0.2145rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 3de6c3c31..621c57d07 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -4291,6 +4291,22 @@
   background-color: #4b4b4b;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #323232;
@@ -4342,6 +4358,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #4b4b4b;
+  color: #dedede;
+  border-radius: 16px;
+  padding: 0 0.429rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.2145rem;
+  margin-bottom: 0.2145rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 9b52bb85c..e3997e63f 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -4291,6 +4291,22 @@
   background-color: #4b4b4b;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #323232;
@@ -4342,6 +4358,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #4b4b4b;
+  color: #dedede;
+  border-radius: 16px;
+  padding: 0 0.429rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.2145rem;
+  margin-bottom: 0.2145rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 630282271..c945cb8b9 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -4352,6 +4352,22 @@
   background-color: rgba(255, 255, 255, 0.12);
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1e1e1e;
@@ -4403,6 +4419,39 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
+.p-chip {
+  background-color: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 1rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 8a784edd8..7af7d68a0 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -4352,6 +4352,22 @@
   background-color: rgba(255, 255, 255, 0.12);
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1e1e1e;
@@ -4403,6 +4419,39 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
+.p-chip {
+  background-color: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 1rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 949ee12cf..eb3499dc7 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -4352,6 +4352,22 @@
   background-color: rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4403,6 +4419,39 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
+.p-chip {
+  background-color: rgba(0, 0, 0, 0.12);
+  color: #000001;
+  border-radius: 16px;
+  padding: 0 1rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 2a9cbd0a4..0de722015 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -4352,6 +4352,22 @@
   background-color: rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4403,6 +4419,39 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
+.p-chip {
+  background-color: rgba(0, 0, 0, 0.12);
+  color: #000001;
+  border-radius: 16px;
+  padding: 0 1rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index b296f40e5..6cd885877 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -4352,6 +4352,22 @@
   background-color: rgba(255, 255, 255, 0.12);
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1e1e1e;
@@ -4403,6 +4419,39 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
+.p-chip {
+  background-color: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.75rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index b8c9f0df8..a7a2f9be4 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -4352,6 +4352,22 @@
   background-color: rgba(255, 255, 255, 0.12);
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1e1e1e;
@@ -4403,6 +4419,39 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
+.p-chip {
+  background-color: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.75rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index c56908559..5ffbe9fdb 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -4352,6 +4352,22 @@
   background-color: rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4403,6 +4419,39 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
+.p-chip {
+  background-color: rgba(0, 0, 0, 0.12);
+  color: #000001;
+  border-radius: 16px;
+  padding: 0 0.75rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 2bdc75940..51351a29c 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -4352,6 +4352,22 @@
   background-color: rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4403,6 +4419,39 @@
   background: rgba(0, 0, 0, 0.32);
 }
 
+.p-chip {
+  background-color: rgba(0, 0, 0, 0.12);
+  color: #000001;
+  border-radius: 16px;
+  padding: 0 0.75rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 4px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
 .p-inplace .p-inplace-display {
   padding: 1rem 1rem;
   border-radius: 4px;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index e05c266b4..d277c45d6 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -4279,6 +4279,22 @@
   background-color: #c8c8c8;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4330,6 +4346,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #c8c8c8;
+  color: #333333;
+  border-radius: 16px;
+  padding: 0 0.429rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.2145rem;
+  margin-bottom: 0.2145rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 4e5b1c526..c0edc42b3 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -4291,6 +4291,22 @@
   background-color: #c8c8c8;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4342,6 +4358,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #c8c8c8;
+  color: #333333;
+  border-radius: 16px;
+  padding: 0 0.429rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.2145rem;
+  margin-bottom: 0.2145rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 36d93bf5e..fac3335ea 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -4291,6 +4291,22 @@
   background-color: #c8c8c8;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4342,6 +4358,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #c8c8c8;
+  color: #333333;
+  border-radius: 16px;
+  padding: 0 0.429rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.2145rem;
+  margin-bottom: 0.2145rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #c2e9d8;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 81611be84..0ac8d4ca0 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -4291,6 +4291,22 @@
   background-color: #c8c8c8;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4342,6 +4358,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #c8c8c8;
+  color: #333333;
+  border-radius: 16px;
+  padding: 0 0.429rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.2145rem;
+  margin-bottom: 0.2145rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 3px;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 41e21beb8..090d5531e 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -4279,6 +4279,22 @@
   background-color: #dadada;
   border-radius: 2px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4330,6 +4346,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #dadada;
+  color: #666666;
+  border-radius: 16px;
+  padding: 0 0.429rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.2145rem;
+  margin-bottom: 0.2145rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 2px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #e4e9ec;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.429rem 0.429rem;
   border-radius: 2px;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 2a431e2f5..1dd1ace1a 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #dee2e6;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #dee2e6;
+  color: #495057;
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #a6d5fa;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 976cfd2da..a4bafbba6 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #dee2e6;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #dee2e6;
+  color: #495057;
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #b7e0b8;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index f2659370b..eb3b55cc0 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #dee2e6;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #dee2e6;
+  color: #495057;
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #ffe69c;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index c19d0e32d..7cf7cda2e 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #dee2e6;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #ffffff;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #dee2e6;
+  color: #495057;
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #df9eea;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 233c871f3..3498fd116 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #304562;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1f2d40;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #304562;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index baf906117..6530d8083 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #304562;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1f2d40;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #304562;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 54868cd36..a51fc10e6 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #304562;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1f2d40;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #304562;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index ed640b8fe..74d4c006d 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -4328,6 +4328,22 @@
   background-color: #304562;
   border-radius: 3px;
 }
+.p-avatar.p-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-lg .p-avatar-icon {
+  font-size: 1.5rem;
+}
+.p-avatar.p-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 2rem;
+}
+.p-avatar.p-avatar-xl .p-avatar-icon {
+  font-size: 2rem;
+}
 
 .p-avatar-group .p-avatar {
   border: 2px solid #1f2d40;
@@ -4379,6 +4395,39 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
+.p-chip {
+  background-color: #304562;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+  padding: 0 0.5rem;
+}
+.p-chip .p-chip-text {
+  line-height: 1.5;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.p-chip .p-chip-icon {
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  margin-left: 0.5rem;
+}
+.p-chip img {
+  width: 2rem;
+  height: 2rem;
+  margin-left: -0.5rem;
+  margin-right: 0.5rem;
+}
+.p-chip .pi-chip-remove-icon {
+  border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.p-chip .pi-chip-remove-icon:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+}
+
 .p-inplace .p-inplace-display {
   padding: 0.5rem 0.5rem;
   border-radius: 3px;
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 52819399e..8e1051839 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -253,6 +253,7 @@
             <div class="menu-items">
                 <router-link to="/avatar">Avatar <Tag value="New"></Tag></router-link>
                 <router-link to="/badge">Badge <Tag value="New"></Tag></router-link>
+                <router-link to="/chip">Chip <Tag value="New"></Tag></router-link>
                 <router-link to="/blockui">BlockUI</router-link>
                 <router-link to="/inplace">Inplace</router-link>
                 <router-link to="/scrolltop">ScrollTop <Tag value="New"></Tag></router-link>
diff --git a/src/components/avatar/Avatar.vue b/src/components/avatar/Avatar.vue
index c64c79497..933a8f4fb 100644
--- a/src/components/avatar/Avatar.vue
+++ b/src/components/avatar/Avatar.vue
@@ -74,34 +74,4 @@ export default {
     width: 100%;
     height: 100%;
 }
-
-.p-avatar.p-avatar-sm {
-    width: 1rem;
-    height: 1rem;
-    font-size: .75rem;
-}
-
-.p-avatar-sm .p-avatar-icon {
-    font-size: .75rem;
-}
-
-.p-avatar.p-avatar-lg {
-    width: 3rem;
-    height: 3rem;
-    font-size: 1.5rem;
-}
-
-.p-avatar-lg .p-avatar-icon {
-    font-size: 1.5rem;
-}
-
-.p-avatar.p-avatar-xl {
-    width: 4rem;
-    height: 4rem;
-    font-size: 2rem;
-}
-
-.p-avatar-xl .p-avatar-icon {
-    font-size: 2rem;
-}
 </style>
diff --git a/src/components/chip/Chip.d.ts b/src/components/chip/Chip.d.ts
new file mode 100644
index 000000000..530b0a47a
--- /dev/null
+++ b/src/components/chip/Chip.d.ts
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+
+declare class Chip extends Vue {
+    label?: string;
+    icon?: string;
+    image?: string;
+    removable?: boolean;
+    removeIcon?: string;
+}
+
+export default Chip;
\ No newline at end of file
diff --git a/src/components/chip/Chip.vue b/src/components/chip/Chip.vue
new file mode 100644
index 000000000..04cf62fea
--- /dev/null
+++ b/src/components/chip/Chip.vue
@@ -0,0 +1,87 @@
+<template>
+    <div :class="containerClass" v-if="visible">
+        <slot>
+            <img :src="image" v-if="image">
+            <span :class="iconClass" v-else-if="icon"></span>
+            <div class="p-chip-text" v-if="label">{{label}}</div>
+            <span v-if="removable" tabindex="0" :class="removeIconClass" 
+                @click="close" @keydown.enter="close"></span>
+        </slot>
+    </div>
+</template>
+
+<script>
+export default {
+    emits: ['remove'],
+    props: {
+        label: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+        image: {
+            type: String,
+            default: null
+        },
+        removable: {
+            type: Boolean,
+            default: false
+        },
+        removeIcon: {
+            type: String,
+            default: 'pi pi-times-circle'
+        }
+    },
+    data() {
+        return {
+            visible: true
+        }
+    },
+    methods: {
+        close(event) {
+            this.visible = false;
+            this.$emit('remove', event);
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-chip p-component', {
+                'p-chip-image': this.image != null
+            }];
+        },
+        iconClass() {
+            return ['p-chip-icon', this.icon];
+        },
+        removeIconClass() {
+            return ['pi-chip-remove-icon', this.removeIcon];
+        }
+    }
+}
+</script>
+
+<style>
+.p-chip {
+    display: inline-flex;
+    align-items: center;
+}
+
+.p-chip-text {
+    line-height: 1.5;
+}
+ 
+.p-chip-icon.pi {
+    line-height: 1.5;
+}
+
+.pi-chip-remove-icon {
+    line-height: 1.5;
+    cursor: pointer;
+}
+
+.p-chip img {
+    border-radius: 50%;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index eaf59b0a6..222f62870 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,7 @@ import Card from './components/card/Card';
 import Carousel from './components/carousel/Carousel';
 import Chart from './components/chart/Chart';
 import Checkbox from './components/checkbox/Checkbox';
+import Chip from './components/chip/Chip';
 import Chips from './components/chips/Chips';
 import ColorPicker from './components/colorpicker/ColorPicker';
 import Column from './components/column/Column';
@@ -133,6 +134,7 @@ app.component('Card', Card);
 app.component('Carousel', Carousel);
 app.component('Chart', Chart);
 app.component('Checkbox', Checkbox);
+app.component('Chip', Chip);
 app.component('Chips', Chips);
 app.component('ColorPicker', ColorPicker);
 app.component('Column', Column);
diff --git a/src/router/index.js b/src/router/index.js
index c96a0e2be..8678633a4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -52,6 +52,11 @@ const routes = [
         name: 'badge',
         component: () => import('../views/badge/BadgeDemo.vue')
     },
+    {
+        path: '/chip',
+        name: 'chip',
+        component: () => import('../views/chip/ChipDemo.vue')
+    },
     {
         path: '/blockui',
         name: 'blockui',
diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index 4eb420ece..aa5fffe37 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -271,7 +271,7 @@ import AvatarGroup from 'primevue/avatargroup';
 		&lt;/div&gt;
 	&lt;/div&gt;
 
-		&lt;div class="p-col-12 p-md-4"&gt;
+	&lt;div class="p-col-12 p-md-4"&gt;
 		&lt;div class="card"&gt;
 			&lt;h5&gt;Image - Badge&lt;/h5&gt;
 			&lt;Badge value="4" severity="danger"&gt;
@@ -280,7 +280,6 @@ import AvatarGroup from 'primevue/avatargroup';
 		&lt;/div&gt;
 	&lt;/div&gt;
 &lt;/div&gt;
-&lt;/div&gt;
 </template>
 </code></pre>
 
diff --git a/src/views/chip/ChipDemo.vue b/src/views/chip/ChipDemo.vue
new file mode 100644
index 000000000..6a5791d92
--- /dev/null
+++ b/src/views/chip/ChipDemo.vue
@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Chip</h1>
+                <p>Chip represents objects using icons, labels and images.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Basic</h5>
+                <div class="p-d-flex p-ai-center">
+                    <Chip label="Action" class="p-mr-2" />
+                    <Chip label="Comedy" class="p-mr-2" />
+                    <Chip label="Mystery" class="p-mr-2" />
+                    <Chip label="Thriller" removable />
+                </div>
+
+                <h5>Icon</h5>
+                <div class="p-d-flex p-ai-center">
+                    <Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
+                    <Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
+                    <Chip label="Google" icon="pi pi-google" class="p-mr-2" />
+                    <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+                </div>
+
+                <h5>Image</h5>
+                <div class="p-d-flex p-ai-center">
+                    <Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="p-mr-2" />
+                    <Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" />
+                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2" />
+                    <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable />
+                </div>
+
+                <h5>Styling</h5>
+                <div class="p-d-flex p-ai-center">
+                    <Chip label="Action" class="p-mr-2 custom-chip" />
+                    <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
+                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2 custom-chip" />
+                    <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
+                </div>
+            </div>
+        </div>
+
+        <ChipDoc />
+    </div>
+</template>
+
+<script>
+import ChipDoc from './ChipDoc';
+
+export default {
+    components: {
+        'ChipDoc': ChipDoc
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.p-chip.custom-chip {
+    background: var(--primary-color);
+    color: var(--primary-color-text);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/chip/ChipDoc.vue b/src/views/chip/ChipDoc.vue
new file mode 100644
index 000000000..9895b8c73
--- /dev/null
+++ b/src/views/chip/ChipDoc.vue
@@ -0,0 +1,186 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h5>Import</h5>
+<pre v-code.script>
+<code>
+import Chip from 'primevue/chip';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>Chip can display labels, icons and images.</p>
+<pre v-code>
+<code>
+&lt;Chip label="Text Only" /&gt;
+&lt;Chip label="Text with icon" icon="pi pi-check" /&gt;
+&lt;Chip label="Text with image" image="user.png" /&gt;
+
+</code></pre>
+
+				<h5>Removable</h5>
+				<p>Setting <i>removable</i> property displays an icon to close the chip, the optional <i>remove</i>
+				event is available to get notified when a chip is hidden.</p>
+<pre v-code>
+<code>
+&lt;Chip label="Text" removable /&gt;
+
+</code></pre>
+
+				<h5>Templating</h5>
+				<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
+<pre v-code>
+<code>
+&lt;Chip&gt;
+   Content
+&lt;/Chip&gt;
+
+</code></pre>
+
+				<h5>Properties</h5>
+				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td>label</td>
+								<td>string</td>
+								<td>null</td>
+								<td>Defines the text to display.</td>
+							</tr>
+							<tr>
+								<td>icon</td>
+								<td>string</td>
+								<td>null</td>
+								<td>Defines the icon to display.</td>
+							</tr>
+							<tr>
+								<td>image</td>
+								<td>string</td>
+								<td>null</td>
+								<td>Defines the image to display.</td>
+							</tr>
+							<tr>
+								<td>removable</td>
+								<td>boolean</td>
+								<td>false</td>
+								<td>Whether to display a remove icon.</td>
+							</tr>
+							<tr>
+								<td>removeIconClass</td>
+								<td>string</td>
+								<td>pi pi-times-circle</td>
+								<td>Icon of the remove element.</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Events</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>remove</td>
+                                <td>event: Browser event</td>
+                                <td>Callback to invoke when a chip is removed.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling</h5>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+								<td>p-chip</td>
+								<td>Container element.</td>
+                            </tr>
+							<tr>
+								<td>p-chip-image</td>
+								<td>Container element in image mode.</td>
+                            </tr>
+							<tr>
+								<td>p-chip-text</td>
+								<td>Text of the chip.</td>
+                            </tr>
+							<tr>
+								<td>pi-chip-remove-icon</td>
+								<td>Remove icon.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/chip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<pre v-code>
+<code><template v-pre>
+&lt;h5&gt;Basic&lt;/h5&gt;
+&lt;div class="p-d-flex p-ai-center"&gt;
+	&lt;Chip label="Action" class="p-mr-2" /&gt;
+	&lt;Chip label="Comedy" class="p-mr-2" /&gt;
+	&lt;Chip label="Mystery" class="p-mr-2" /&gt;
+	&lt;Chip label="Thriller" removable /&gt;
+&lt;/div&gt;
+
+&lt;h5&gt;Icon&lt;/h5&gt;
+&lt;div class="p-d-flex p-ai-center"&gt;
+	&lt;Chip label="Apple" icon="pi pi-apple" class="p-mr-2" /&gt;
+	&lt;Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" /&gt;
+	&lt;Chip label="Google" icon="pi pi-google" class="p-mr-2" /&gt;
+	&lt;Chip label="Microsoft" icon="pi pi-microsoft" removable /&gt;
+&lt;/div&gt;
+
+&lt;h5&gt;Image&lt;/h5&gt;
+&lt;div class="p-d-flex p-ai-center"&gt;
+	&lt;Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="p-mr-2" /&gt;
+	&lt;Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" /&gt;
+	&lt;Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2" /&gt;
+	&lt;Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable /&gt;
+&lt;/div&gt;
+
+&lt;h5&gt;Styling&lt;/h5&gt;
+&lt;div class="p-d-flex p-ai-center"&gt;
+	&lt;Chip label="Action" class="p-mr-2 custom-chip" /&gt;
+	&lt;Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" /&gt;
+	&lt;Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2 custom-chip" /&gt;
+	&lt;Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable /&gt;
+&lt;/div&gt;
+</template>
+</code></pre>
+
+			</TabPanel>
+		</TabView>
+	</div>
+</template>