From a198e0c263224654a506fd7aeedb5d17c8b4dca6 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sun, 10 May 2020 23:36:57 +0300
Subject: [PATCH] Scaling inputfield, button and table

---
 public/themes/luna-amber/theme.css      | 54 ++++++++++++++++-
 public/themes/luna-green/theme.css      | 54 ++++++++++++++++-
 public/themes/luna-pink/theme.css       | 54 ++++++++++++++++-
 public/themes/nova-colored/theme.css    | 54 ++++++++++++++++-
 public/themes/nova-dark/theme.css       | 54 ++++++++++++++++-
 public/themes/nova-light/theme.css      | 54 ++++++++++++++++-
 public/themes/nova-vue/theme.css        | 54 ++++++++++++++++-
 public/themes/rhea/theme.css            | 54 ++++++++++++++++-
 public/themes/saga-blue/theme.css       | 78 ++++++++++++++++++++-----
 public/themes/saga-cyan/theme.css       | 78 ++++++++++++++++++++-----
 public/themes/saga-deeppurple/theme.css | 78 ++++++++++++++++++++-----
 public/themes/saga-green/theme.css      | 78 ++++++++++++++++++++-----
 public/themes/saga-indigo/theme.css     | 78 ++++++++++++++++++++-----
 public/themes/saga-orange/theme.css     | 78 ++++++++++++++++++++-----
 public/themes/saga-purple/theme.css     | 78 ++++++++++++++++++++-----
 public/themes/saga-teal/theme.css       | 78 ++++++++++++++++++++-----
 public/themes/vela-blue/theme.css       | 78 ++++++++++++++++++++-----
 public/themes/vela-cyan/theme.css       | 78 ++++++++++++++++++++-----
 public/themes/vela-deeppurple/theme.css | 78 ++++++++++++++++++++-----
 public/themes/vela-green/theme.css      | 78 ++++++++++++++++++++-----
 public/themes/vela-indigo/theme.css     | 78 ++++++++++++++++++++-----
 public/themes/vela-orange/theme.css     | 78 ++++++++++++++++++++-----
 public/themes/vela-purple/theme.css     | 78 ++++++++++++++++++++-----
 public/themes/vela-teal/theme.css       | 78 ++++++++++++++++++++-----
 src/views/button/ButtonDemo.vue         | 20 ++++++-
 src/views/button/ButtonDoc.vue          | 16 +++++
 src/views/inputtext/InputTextDemo.vue   | 22 ++++++-
 src/views/inputtext/InputTextDoc.vue    | 18 +++++-
 28 files changed, 1537 insertions(+), 219 deletions(-)

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 8cdfc2855..81b518c17 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -653,6 +653,14 @@
   border-color: #cd3a3a;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.749875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.07125rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 0.71375rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 0.71375rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 1px;
@@ -3359,7 +3411,7 @@
   background-color: #e91224;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index f043e6a45..9149dcf4f 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -653,6 +653,14 @@
   border-color: #cd3a3a;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.749875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.07125rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 0.71375rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 0.71375rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 1px;
@@ -3359,7 +3411,7 @@
   background-color: #e91224;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index a1385931f..4c3647b05 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -653,6 +653,14 @@
   border-color: #cd3a3a;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.749875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.07125rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 0.71375rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 0.71375rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 1px;
@@ -3359,7 +3411,7 @@
   background-color: #e91224;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 8c8608fc7..08a5cdb7a 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -653,6 +653,14 @@
   border-color: #a80000;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.749875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.07125rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 0.71375rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 0.71375rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 1px;
@@ -3359,7 +3411,7 @@
   background-color: #e91224;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 2d1c2bed7..f218fc140 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -653,6 +653,14 @@
   border-color: #a80000;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.749875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.07125rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 0.71375rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 0.71375rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 1px;
@@ -3359,7 +3411,7 @@
   background-color: #e91224;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index e9e95efd2..324e96a20 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -653,6 +653,14 @@
   border-color: #a80000;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.749875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.07125rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 0.71375rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 0.71375rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 1px;
@@ -3359,7 +3411,7 @@
   background-color: #e91224;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 898d2fae3..da6e5e235 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -653,6 +653,14 @@
   border-color: #a80000;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.749875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.07125rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 0.71375rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 0.71375rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 1px;
@@ -3359,7 +3411,7 @@
   background-color: #e91224;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 3c82bbf53..3212abbca 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -653,6 +653,14 @@
   border-color: e7a3a3;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.375375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 0.53625rem;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.375375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.53625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.749875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.499625rem 0.749875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.499625rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.07125rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 0.71375rem 1.07125rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 0.71375rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 0.71375rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 1px;
@@ -3359,7 +3411,7 @@
   background-color: #F4B6B6;
   color: #262222;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index b8fdf5c35..78d450eb5 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -653,6 +653,14 @@
   border-color: #f44336;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #6c757d;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #6c757d;
@@ -3393,7 +3445,7 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index e283b43a3..2f1495a90 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -653,6 +653,14 @@
   border-color: #f44336;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #6c757d;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #6c757d;
@@ -3393,7 +3445,7 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index 0d1a8e587..d272c0b21 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -653,6 +653,14 @@
   border-color: #f44336;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #6c757d;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #6c757d;
@@ -3393,7 +3445,7 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 219535d95..602393085 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -653,6 +653,14 @@
   border-color: #f44336;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #6c757d;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #6c757d;
@@ -3393,7 +3445,7 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index 09519c3a7..23d0703bd 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -653,6 +653,14 @@
   border-color: #f44336;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #6c757d;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #6c757d;
@@ -3393,7 +3445,7 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 988b867dc..c207a6fd0 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -653,6 +653,14 @@
   border-color: #f44336;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #6c757d;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #6c757d;
@@ -3393,7 +3445,7 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 998ca18f8..fd9487a30 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -653,6 +653,14 @@
   border-color: #f44336;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #6c757d;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #6c757d;
@@ -3393,7 +3445,7 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index 3f314c6cc..ae0d0f8fd 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -653,6 +653,14 @@
   border-color: #f44336;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #6c757d;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #495057;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #e9ecef;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #6c757d;
@@ -3393,7 +3445,7 @@
   background-color: #D32F2F;
   color: #ffffff;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index cacc8bf5d..7adb47c82 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -653,6 +653,14 @@
   border-color: #e57373;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #AEB6BF;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #AEB6BF;
@@ -3393,7 +3445,7 @@
   background-color: #E57373;
   color: #212529;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/vela-cyan/theme.css b/public/themes/vela-cyan/theme.css
index 91fa62051..5de2fbaab 100644
--- a/public/themes/vela-cyan/theme.css
+++ b/public/themes/vela-cyan/theme.css
@@ -653,6 +653,14 @@
   border-color: #e57373;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #AEB6BF;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #AEB6BF;
@@ -3393,7 +3445,7 @@
   background-color: #E57373;
   color: #212529;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/vela-deeppurple/theme.css b/public/themes/vela-deeppurple/theme.css
index 73ec518af..e5d1eb2b7 100644
--- a/public/themes/vela-deeppurple/theme.css
+++ b/public/themes/vela-deeppurple/theme.css
@@ -653,6 +653,14 @@
   border-color: #e57373;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #AEB6BF;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #AEB6BF;
@@ -3393,7 +3445,7 @@
   background-color: #E57373;
   color: #212529;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index ba083c70b..c74150603 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -653,6 +653,14 @@
   border-color: #e57373;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #AEB6BF;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #AEB6BF;
@@ -3393,7 +3445,7 @@
   background-color: #E57373;
   color: #212529;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/vela-indigo/theme.css b/public/themes/vela-indigo/theme.css
index 2b181eb93..a6df21cf7 100644
--- a/public/themes/vela-indigo/theme.css
+++ b/public/themes/vela-indigo/theme.css
@@ -653,6 +653,14 @@
   border-color: #e57373;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #AEB6BF;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #AEB6BF;
@@ -3393,7 +3445,7 @@
   background-color: #E57373;
   color: #212529;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 5011283a8..f994aa3bb 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -653,6 +653,14 @@
   border-color: #e57373;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #AEB6BF;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #AEB6BF;
@@ -3393,7 +3445,7 @@
   background-color: #E57373;
   color: #212529;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 7e23e68cd..6d951609a 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -653,6 +653,14 @@
   border-color: #e57373;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #AEB6BF;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #AEB6BF;
@@ -3393,7 +3445,7 @@
   background-color: #E57373;
   color: #212529;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/public/themes/vela-teal/theme.css b/public/themes/vela-teal/theme.css
index 006941503..b71e41df0 100644
--- a/public/themes/vela-teal/theme.css
+++ b/public/themes/vela-teal/theme.css
@@ -653,6 +653,14 @@
   border-color: #e57373;
   border-width: 1px;
 }
+.p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.4375rem;
+}
+.p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.625rem;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -1084,6 +1092,20 @@
 .p-button.p-button-icon-only.p-button-rounded {
   border-radius: 50%;
 }
+.p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.875rem;
+}
+.p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 1.25rem;
+}
+.p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
 
 .p-fluid .p-button {
   width: 100%;
@@ -1261,7 +1283,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1271,14 +1293,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-datatable .p-datatable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1288,7 +1310,7 @@
 }
 .p-datatable .p-datatable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1335,7 +1357,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
   color: #AEB6BF;
@@ -1387,6 +1409,36 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
+.p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.875rem 0.875rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
 
 .p-dataview .p-paginator {
   border-width: 0 0 1px 0;
@@ -1397,7 +1449,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1416,7 +1468,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -1826,7 +1878,7 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   font-weight: 600;
@@ -1836,14 +1888,14 @@
   color: #ebedef;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
   font-weight: 600;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 .p-treetable .p-treetable-thead > tr > th {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1853,7 +1905,7 @@
 }
 .p-treetable .p-treetable-tfoot > tr > td {
   text-align: left;
-  padding: 1rem;
+  padding: 1rem 1rem;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
   font-weight: 600;
@@ -1900,7 +1952,7 @@
   text-align: left;
   border: 1px solid #2C3E50;
   border-width: 0 0 1px 0;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
   color: #AEB6BF;
@@ -3393,7 +3445,7 @@
   background-color: #E57373;
   color: #212529;
 }
-.p-badge.p-badge-l {
+.p-badge.p-badge-lg {
   font-size: 1.125rem;
   min-width: 2.25rem;
   height: 2.25rem;
diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue
index 6146e1745..e9ac371b3 100755
--- a/src/views/button/ButtonDemo.vue
+++ b/src/views/button/ButtonDemo.vue
@@ -53,6 +53,13 @@
                 <Button label="Delete" icon="pi pi-trash" />
                 <Button label="Cancel" icon="pi pi-times" />
             </span>
+
+            <h3>Sizes</h3>
+            <div class="sizes">
+                <Button label="Small" icon="pi pi-check" class="p-button-sm"  />
+                <Button label="Normal" icon="pi pi-check" class="p-button"  />
+                <Button label="Large" icon="pi pi-check" class="p-button-lg" />
+            </div>
         </div>
 
         <ButtonDoc/>
@@ -69,8 +76,19 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 button {
     margin-right: .5em;
 }
+
+.sizes {
+    .p-button {
+        margin-bottom: .5rem;
+        display: block;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index 6cc1b1dca..d324a0019 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -79,6 +79,15 @@ import Button from 'primevue/button';
     &lt;Button label="Delete" icon="pi pi-trash" /&gt;
     &lt;Button label="Cancel" icon="pi pi-times" /&gt;
 &lt;/span&gt;
+</CodeHighlight>
+
+                <h3>Sizes</h3>
+                <p>2 more sizes are available in addition to a regular button, for a smaller input add <i>p-button-sm</i> and for a larger one, use <i>p-button-lg</i>.
+                Note that these classes available to change the size of a particular button, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
+<CodeHighlight>
+&lt;Button label="Small" icon="pi pi-check" class="p-button-sm"  /&gt;
+&lt;Button label="Normal" icon="pi pi-check" class="p-button"  /&gt;
+&lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
 </CodeHighlight>
 
 				<h3>Properties</h3>
@@ -212,6 +221,13 @@ import Button from 'primevue/button';
     &lt;Button label="Delete" icon="pi pi-trash" /&gt;
     &lt;Button label="Cancel" icon="pi pi-times" /&gt;
 &lt;/span&gt;
+
+&lt;h3&gt;Sizes&lt;/h3&gt;
+&lt;div class="sizes"&gt;
+    &lt;Button label="Small" icon="pi pi-check" class="p-button-sm"  /&gt;
+    &lt;Button label="Normal" icon="pi pi-check" class="p-button"  /&gt;
+    &lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>
 
diff --git a/src/views/inputtext/InputTextDemo.vue b/src/views/inputtext/InputTextDemo.vue
index 81d014a69..563032e90 100755
--- a/src/views/inputtext/InputTextDemo.vue
+++ b/src/views/inputtext/InputTextDemo.vue
@@ -35,6 +35,13 @@
 
              <h3>Invalid</h3>
             <InputText type="text" class="p-invalid" />
+
+            <h3>Sizes</h3>
+            <div class="sizes">
+                <InputText type="text" class="p-inputtext-sm" placeholder="Small" />
+                <InputText type="text" class="p-inputtext" placeholder="Normal" />
+                <InputText type="text" class="p-inputtext-lg"  placeholder="Large" />
+            </div>
         </div>
 
         <InputTextDoc />
@@ -58,4 +65,17 @@ export default {
 		'InputTextDoc': InputTextDoc
 	}
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.sizes {
+    .p-inputtext {
+        display: block;
+        margin-bottom: .5rem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index b6908081a..adcacffa0 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -35,6 +35,15 @@ import InputText from 'primevue/inputtext';
     &lt;i class="pi pi-spin pi-spinner" /&gt;
     &lt;InputText type="text" v-model="value2" /&gt;
 &lt;/span&gt;
+</CodeHighlight>
+
+                <h3>Sizes</h3>
+                <p>2 more sizes are available in addition to a regular input, for a smaller input add <i>p-inputtext-sm</i> and for a larger one, use <i>p-inputtext-lg</i>.
+                Note that these classes should be used to change the size of a particular field, for global scaling see the <router-link to="/theming">theming</router-link> page.</p>
+<CodeHighlight>
+&lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
+&lt;InputText type="text" class="p-inputtext" placeholder="Normal" /&gt;
+&lt;InputText type="text" class="p-inputtext-lg"  placeholder="Large" /&gt;
 </CodeHighlight>
 
 				<h3>Properties</h3>
@@ -97,8 +106,15 @@ import InputText from 'primevue/inputtext';
 &lt;h3&gt;Disabled&lt;/h3&gt;
 &lt;InputText type="text" v-model="value5" disabled /&gt;
 
-    &lt;h3&gt;Invalid&lt;/h3&gt;
+&lt;h3&gt;Invalid&lt;/h3&gt;
 &lt;InputText type="text" class="p-invalid" /&gt;
+
+&lt;h3&gt;Sizes&lt;/h3&gt;
+&lt;div class="sizes"&gt;
+    &lt;InputText type="text" class="p-inputtext-sm" placeholder="Small" /&gt;
+    &lt;InputText type="text" class="p-inputtext" placeholder="Normal" /&gt;
+    &lt;InputText type="text" class="p-inputtext-lg"  placeholder="Large" /&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>