diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 328cfe15f..c6652dd36 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3335,9 +3338,9 @@
   color: #212121;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #f4f4f4;
@@ -3359,6 +3362,18 @@
   background-color: #e91224;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #FFB300;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index f36cd30b2..644faa750 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3335,9 +3338,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #f4f4f4;
@@ -3359,6 +3362,18 @@
   background-color: #e91224;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #1ea04c;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index de22cd0ec..2e22acf69 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3335,9 +3338,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #f4f4f4;
@@ -3359,6 +3362,18 @@
   background-color: #e91224;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #cc285c;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 9d3dfd3a2..400fe315b 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3335,9 +3338,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #f4f4f4;
@@ -3359,6 +3362,18 @@
   background-color: #e91224;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #007ad9;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index af1360688..d3de6cedb 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3335,9 +3338,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #f4f4f4;
@@ -3359,6 +3362,18 @@
   background-color: #e91224;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #007ad9;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index 92cb89d61..ba8e533f9 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3335,9 +3338,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #f4f4f4;
@@ -3359,6 +3362,18 @@
   background-color: #e91224;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #007ad9;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index afe4f94f6..087986294 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3335,9 +3338,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #f4f4f4;
@@ -3359,6 +3362,18 @@
   background-color: #e91224;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #41b883;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 0d751ab51..c0da21f9c 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3335,9 +3338,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #f3f3f3;
@@ -3359,6 +3362,18 @@
   background-color: #F4B6B6;
   color: #262222;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #7B95A3;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 22ba29a44..2c3bb2dd3 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #ffffff;
@@ -3393,6 +3396,18 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #2196F3;
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index d34a8b4ad..5b813bef9 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #ffffff;
@@ -3393,6 +3396,18 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #00ACC1;
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index 20034000b..25644ee84 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #ffffff;
@@ -3393,6 +3396,18 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #673AB7;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 32e8d72de..5e05a44db 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #ffffff;
@@ -3393,6 +3396,18 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #4CAF50;
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index 45983c17d..328158741 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #ffffff;
@@ -3393,6 +3396,18 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #3F51B5;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 437df7988..a637aebca 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #212529;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #ffffff;
@@ -3393,6 +3396,18 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #FFC107;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index ed2b2196f..6fab936e3 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #ffffff;
@@ -3393,6 +3396,18 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #9C27B0;
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index d9a31dbd4..982ad1c8a 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: #ffffff;
@@ -3393,6 +3396,18 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #009688;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 083ec4924..5cd561ac9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #212529;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: transparent;
@@ -3393,6 +3396,18 @@
   background-color: #E57373;
   color: #212529;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #64B5F6;
diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css
index d3e21b2af..412f9c13b 100644
--- a/public/themes/vela-cyan/theme.css
+++ b/public/themes/vela-cyan/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #212529;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: transparent;
@@ -3393,6 +3396,18 @@
   background-color: #E57373;
   color: #212529;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #4DD0E1;
diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css
index 1389d6364..039f5a31a 100644
--- a/public/themes/vela-deeppurple/theme.css
+++ b/public/themes/vela-deeppurple/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: transparent;
@@ -3393,6 +3396,18 @@
   background-color: #E57373;
   color: #212529;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #9575CD;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 87739373b..efb59d7c0 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #212529;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: transparent;
@@ -3393,6 +3396,18 @@
   background-color: #E57373;
   color: #212529;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #81C784;
diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css
index e0ca61f21..d6a15080c 100644
--- a/public/themes/vela-indigo/theme.css
+++ b/public/themes/vela-indigo/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: transparent;
@@ -3393,6 +3396,18 @@
   background-color: #E57373;
   color: #212529;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #7986CB;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 6b156a7b4..22edb5a7c 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #212529;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: transparent;
@@ -3393,6 +3396,18 @@
   background-color: #E57373;
   color: #212529;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #FFD54F;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 4a5659a97..c822c39fe 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: transparent;
@@ -3393,6 +3396,18 @@
   background-color: #E57373;
   color: #212529;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #BA68C8;
diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css
index a0dc58ac6..8b6681f64 100644
--- a/public/themes/vela-teal/theme.css
+++ b/public/themes/vela-teal/theme.css
@@ -1064,6 +1064,9 @@
 }
 .p-button .p-badge {
   margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
 }
 .p-button.p-button-raised {
   box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -3369,9 +3372,9 @@
   color: #212529;
   font-size: 0.75rem;
   font-weight: 700;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
 }
 .p-badge.p-badge-secondary {
   background-color: transparent;
@@ -3393,6 +3396,18 @@
   background-color: #E57373;
   color: #212529;
 }
+.p-badge.p-badge-l {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+.p-badge.p-badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
 
 .p-tag {
   background: #4DB6AC;
diff --git a/src/components/badge/Badge.css b/src/components/badge/Badge.css
index 2b288c9d9..2cf6c35cb 100644
--- a/src/components/badge/Badge.css
+++ b/src/components/badge/Badge.css
@@ -7,6 +7,7 @@
 .p-tag {
     display: inline-block;
     text-align: center;
+    line-height: 1;
 }
 
 .p-tag.p-tag-rounded {
diff --git a/src/views/badge/BadgeDemo.vue b/src/views/badge/BadgeDemo.vue
index 52d5cec9b..55e0a971f 100644
--- a/src/views/badge/BadgeDemo.vue
+++ b/src/views/badge/BadgeDemo.vue
@@ -52,14 +52,9 @@
 
             <h3>Sizes</h3>
             <div class="badges">
-                <span class="p-badge" style="font-size: 1em">2</span>
-                <span class="p-badge p-badge-success" style="font-size: 1.25em">8</span>
-                <span class="p-badge p-badge-info" style="font-size: 1.5em">4</span>
-                <span class="p-badge p-badge-warning" style="font-size: 1.75em">12</span>
-                <span class="p-badge p-badge-danger" style="font-size: 2em">3</span>
-
-                <h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
-                <h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
+                <span class="p-badge">2</span>
+                <span class="p-badge p-badge-l p-badge-sucess">4</span>
+                <span class="p-badge p-badge-xl p-badge-warning">6</span>
             </div>
         </div>
 
@@ -85,16 +80,16 @@ export default {
 <style lang="scss" scoped>
 .badges {
     .p-badge, .p-tag {
-        margin-right: .5em;
+        margin-right: .5rem;
     }
 }
 
 .p-button {
-    margin-right: .5em;
+    margin-right: .5rem;
 }
 
 .p-overlay-badge {
-    margin-right: 2em;
+    margin-right: 2rem;
 }
 
 /deep/ h1, h2 {
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index 86b77b993..7ad76793b 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -52,13 +52,11 @@
 </CodeHighlight>
 
                 <h3>Sizes</h3>
-                <p>Badge sizes are adjusted according to their font size.</p>
+                <p>Badge sizes are adjusted with additional classes.</p>
 <CodeHighlight>
-&lt;span class="p-badge" style="font-size: 1em"&gt;2&lt;/span&gt;
-&lt;span class="p-badge p-badge-success" style="font-size: 1.25em"&gt;8&lt;/span&gt;
-&lt;span class="p-badge p-badge-info" style="font-size: 1.5em"&gt;4&lt;/span&gt;
-&lt;span class="p-badge p-badge-warning" style="font-size: 1.75em"&gt;12&lt;/span&gt;
-&lt;span class="p-badge p-badge-danger" style="font-size: 2em"&gt;3&lt;/span&gt;
+&lt;span class="p-badge"&gt;2&lt;/span&gt;
+&lt;span class="p-badge p-badge-l p-badge-sucess"&gt;4&lt;/span&gt;
+&lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
 </CodeHighlight>
 
                 <p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
@@ -93,6 +91,14 @@
                             <tr>
                                 <td>p-overlay-badge</td>
                                 <td>Wrapper of a badge and its target.</td>
+                            </tr>
+                            <tr>
+                                <td>p-badge-l</td>
+                                <td>Large badge element</td>
+                            </tr>
+                            <tr>
+                                <td>p-badge-l</td>
+                                <td>Extra large badge element</td>
                             </tr>
 						</tbody>
 					</table>
@@ -152,14 +158,9 @@
 
 &lt;h3&gt;Sizes&lt;/h3&gt;
 &lt;div class="badges"&gt;
-    &lt;span class="p-badge" style="font-size: 1em"&gt;2&lt;/span&gt;
-    &lt;span class="p-badge p-badge-success" style="font-size: 1.25em"&gt;8&lt;/span&gt;
-    &lt;span class="p-badge p-badge-info" style="font-size: 1.5em"&gt;4&lt;/span&gt;
-    &lt;span class="p-badge p-badge-warning" style="font-size: 1.75em"&gt;12&lt;/span&gt;
-    &lt;span class="p-badge p-badge-danger" style="font-size: 2em"&gt;3&lt;/span&gt;
-
-    &lt;h1&gt;Heading 1 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h1&gt;
-    &lt;h2&gt;Heading 2 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h2&gt;
+    &lt;span class="p-badge"&gt;2&lt;/span&gt;
+    &lt;span class="p-badge p-badge-l p-badge-sucess"&gt;4&lt;/span&gt;
+    &lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
 &lt;/div&gt;
 </template>
 </CodeHighlight>