diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index d3a019c6a..428908c93 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#f7fbff;
+  --primary-100:#daedfd;
+  --primary-200:#bcdffb;
+  --primary-300:#9fd1f9;
+  --primary-400:#81c3f8;
+  --primary-500:#64b5f6;
+  --primary-600:#559ad1;
+  --primary-700:#467fac;
+  --primary-800:#376487;
+  --primary-900:#284862;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index b81974a67..cddb428be 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#f9fcf9;
+  --primary-100:#e1f2e1;
+  --primary-200:#c9e7ca;
+  --primary-300:#b1dcb3;
+  --primary-400:#99d29b;
+  --primary-500:#81c784;
+  --primary-600:#6ea970;
+  --primary-700:#5a8b5c;
+  --primary-800:#476d49;
+  --primary-900:#345035;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 7d84f5db2..ece6f2bcf 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#fffdf6;
+  --primary-100:#fff5d5;
+  --primary-200:#ffedb3;
+  --primary-300:#ffe592;
+  --primary-400:#ffdd70;
+  --primary-500:#ffd54f;
+  --primary-600:#d9b543;
+  --primary-700:#b39537;
+  --primary-800:#8c752b;
+  --primary-900:#665520;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index d79d557fe..e64d3efad 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#fcf7fc;
+  --primary-100:#eedbf2;
+  --primary-200:#e1bee7;
+  --primary-300:#d4a1dd;
+  --primary-400:#c785d2;
+  --primary-500:#ba68c8;
+  --primary-600:#9e58aa;
+  --primary-700:#82498c;
+  --primary-800:#66396e;
+  --primary-900:#4a2a50;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 0312e4c93..7f04cfeda 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -222,6 +222,16 @@
   --red-700:#9a2530;
   --red-800:#791d26;
   --red-900:#58151c;
+  --primary-50:#f9fdff;
+  --primary-100:#e4f4ff;
+  --primary-200:#ceebff;
+  --primary-300:#b8e2ff;
+  --primary-400:#a3d9ff;
+  --primary-500:#8dd0ff;
+  --primary-600:#78b1d9;
+  --primary-700:#6392b3;
+  --primary-800:#4e728c;
+  --primary-900:#385366;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 19088b656..0b7ffdf45 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -222,6 +222,16 @@
   --red-700:#9a2530;
   --red-800:#791d26;
   --red-900:#58151c;
+  --primary-50:#fcfafd;
+  --primary-100:#f0e6f6;
+  --primary-200:#e5d3ee;
+  --primary-300:#d9bfe7;
+  --primary-400:#ceacdf;
+  --primary-500:#c298d8;
+  --primary-600:#a581b8;
+  --primary-700:#886a97;
+  --primary-800:#6b5477;
+  --primary-900:#4e3d56;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 35b8c6b0c..86a0fb889 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -222,6 +222,16 @@
   --red-700:#9a2530;
   --red-800:#791d26;
   --red-900:#58151c;
+  --primary-50:#f2f8ff;
+  --primary-100:#c2dfff;
+  --primary-200:#91c6ff;
+  --primary-300:#61adff;
+  --primary-400:#3094ff;
+  --primary-500:#007bff;
+  --primary-600:#0069d9;
+  --primary-700:#0056b3;
+  --primary-800:#00448c;
+  --primary-900:#003166;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 98727fd90..c3d68bcc2 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -222,6 +222,16 @@
   --red-700:#9a2530;
   --red-800:#791d26;
   --red-900:#58151c;
+  --primary-50:#f9f5fb;
+  --primary-100:#e2d0ec;
+  --primary-200:#ccabdc;
+  --primary-300:#b586cd;
+  --primary-400:#9f61bd;
+  --primary-500:#883cae;
+  --primary-600:#743394;
+  --primary-700:#5f2a7a;
+  --primary-800:#4b2160;
+  --primary-900:#361846;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index dfc38b3e4..6a0fe96af 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -222,6 +222,16 @@
   --red-700:#922427;
   --red-800:#731d1f;
   --red-900:#541516;
+  --primary-50:#f2f8fd;
+  --primary-100:#c2dff5;
+  --primary-200:#91c5ed;
+  --primary-300:#61abe4;
+  --primary-400:#3092dc;
+  --primary-500:#0078d4;
+  --primary-600:#0066b4;
+  --primary-700:#005494;
+  --primary-800:#004275;
+  --primary-900:#003055;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 5354a57ac..40554d65a 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32b23;
   --red-800:#8c221c;
   --red-900:#661814;
+  --primary-50:#fafcff;
+  --primary-100:#e5f1ff;
+  --primary-200:#d1e6fe;
+  --primary-300:#bcdbfe;
+  --primary-400:#a8d0fd;
+  --primary-500:#93c5fd;
+  --primary-600:#7da7d7;
+  --primary-700:#678ab1;
+  --primary-800:#516c8b;
+  --primary-900:#3b4f65;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 7e9158eb2..9e9de25ab 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32b23;
   --red-800:#8c221c;
   --red-900:#661814;
+  --primary-50:#fbfbff;
+  --primary-100:#e9edfe;
+  --primary-200:#d8dffe;
+  --primary-300:#c7d1fd;
+  --primary-400:#b6c2fd;
+  --primary-500:#a5b4fc;
+  --primary-600:#8c99d6;
+  --primary-700:#747eb0;
+  --primary-800:#5b638b;
+  --primary-900:#424865;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index e0001115b..0f644163a 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32b23;
   --red-800:#8c221c;
   --red-900:#661814;
+  --primary-50:#fcfbff;
+  --primary-100:#f1edff;
+  --primary-200:#e6dffe;
+  --primary-300:#dad1fe;
+  --primary-400:#cfc3fd;
+  --primary-500:#c4b5fd;
+  --primary-600:#a79ad7;
+  --primary-700:#897fb1;
+  --primary-800:#6c648b;
+  --primary-900:#4e4865;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 60f08f0a1..e0cdc05da 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32b23;
   --red-800:#8c221c;
   --red-900:#661814;
+  --primary-50:#f7fefd;
+  --primary-100:#d8faf5;
+  --primary-200:#baf6ed;
+  --primary-300:#9bf2e4;
+  --primary-400:#7deedc;
+  --primary-500:#5eead4;
+  --primary-600:#50c7b4;
+  --primary-700:#42a494;
+  --primary-800:#348175;
+  --primary-900:#265e55;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 83c984258..1b8746d30 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32b23;
   --red-800:#8c221c;
   --red-900:#661814;
+  --primary-50:#f5f9ff;
+  --primary-100:#d0e1fd;
+  --primary-200:#abc9fb;
+  --primary-300:#85b2f9;
+  --primary-400:#609af8;
+  --primary-500:#3b82f6;
+  --primary-600:#326fd1;
+  --primary-700:#295bac;
+  --primary-800:#204887;
+  --primary-900:#183462;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index fbca848d7..4a9fb9a61 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32b23;
   --red-800:#8c221c;
   --red-900:#661814;
+  --primary-50:#f7f7fe;
+  --primary-100:#dadafc;
+  --primary-200:#bcbdf9;
+  --primary-300:#9ea0f6;
+  --primary-400:#8183f4;
+  --primary-500:#6366f1;
+  --primary-600:#5457cd;
+  --primary-700:#4547a9;
+  --primary-800:#363885;
+  --primary-900:#282960;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 41e91616c..c807afe40 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32b23;
   --red-800:#8c221c;
   --red-900:#661814;
+  --primary-50:#f9f7ff;
+  --primary-100:#e3d8fd;
+  --primary-200:#cdb9fb;
+  --primary-300:#b79af9;
+  --primary-400:#a17bf8;
+  --primary-500:#8b5cf6;
+  --primary-600:#764ed1;
+  --primary-700:#6140ac;
+  --primary-800:#4c3387;
+  --primary-900:#382562;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 8d039a5b0..b04980d36 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32b23;
   --red-800:#8c221c;
   --red-900:#661814;
+  --primary-50:#f3fbfb;
+  --primary-100:#c7eeea;
+  --primary-200:#9ae0d9;
+  --primary-300:#6dd3c8;
+  --primary-400:#41c5b7;
+  --primary-500:#14b8a6;
+  --primary-600:#119c8d;
+  --primary-700:#0e8174;
+  --primary-800:#0b655b;
+  --primary-900:#084a42;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 7416d472b..94e8075ee 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -222,6 +222,16 @@
   --red-700:#971d0d;
   --red-800:#77170a;
   --red-900:#561108;
+  --primary-50:#fffdf9;
+  --primary-100:#fff8e1;
+  --primary-200:#fff2c9;
+  --primary-300:#ffecb2;
+  --primary-400:#ffe69a;
+  --primary-500:#ffe082;
+  --primary-600:#d9be6f;
+  --primary-700:#b39d5b;
+  --primary-800:#8c7b48;
+  --primary-900:#665a34;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index fea80ced0..991e9b1f2 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -222,6 +222,16 @@
   --red-700:#971d0d;
   --red-800:#77170a;
   --red-900:#561108;
+  --primary-50:#f9fdff;
+  --primary-100:#e1f5fe;
+  --primary-200:#c9edfd;
+  --primary-300:#b1e4fc;
+  --primary-400:#99dcfb;
+  --primary-500:#81d4fa;
+  --primary-600:#6eb4d5;
+  --primary-700:#5a94af;
+  --primary-800:#47758a;
+  --primary-900:#345564;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index a5d33e55b..8c6d79e40 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -222,6 +222,16 @@
   --red-700:#971d0d;
   --red-800:#77170a;
   --red-900:#561108;
+  --primary-50:#fcfefb;
+  --primary-100:#f1f8e9;
+  --primary-200:#e6f2d8;
+  --primary-300:#dbecc7;
+  --primary-400:#d0e7b6;
+  --primary-500:#c5e1a5;
+  --primary-600:#a7bf8c;
+  --primary-700:#8a9e74;
+  --primary-800:#6c7c5b;
+  --primary-900:#4f5a42;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 3598a1d40..475701015 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -222,6 +222,16 @@
   --red-700:#971d0d;
   --red-800:#77170a;
   --red-900:#561108;
+  --primary-50:#fef9fb;
+  --primary-100:#fce4ec;
+  --primary-200:#facfdd;
+  --primary-300:#f8bacf;
+  --primary-400:#f6a4c0;
+  --primary-500:#f48fb1;
+  --primary-600:#cf7a96;
+  --primary-700:#ab647c;
+  --primary-800:#864f61;
+  --primary-900:#623947;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index c1b741f25..89517f2ac 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -246,6 +246,16 @@
   --red-700:#ab2f26;
   --red-800:#86251e;
   --red-900:#621b16;
+  --primary-50:#fdfafd;
+  --primary-100:#f3e5f6;
+  --primary-200:#ead1ee;
+  --primary-300:#e1bce7;
+  --primary-400:#d7a8df;
+  --primary-500:#ce93d8;
+  --primary-600:#af7db8;
+  --primary-700:#906797;
+  --primary-800:#715177;
+  --primary-900:#523b56;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -6085,9 +6095,7 @@
   box-shadow: none;
   background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
 }
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
   border: 0 none;
   background-image: none;
 }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index a60d8431c..5dfcb4988 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -246,6 +246,16 @@
   --red-700:#ab2f26;
   --red-800:#86251e;
   --red-900:#621b16;
+  --primary-50:#fafbfd;
+  --primary-100:#e8eaf6;
+  --primary-200:#d6daef;
+  --primary-300:#c3c9e8;
+  --primary-400:#b1b9e1;
+  --primary-500:#9fa8da;
+  --primary-600:#878fb9;
+  --primary-700:#6f7699;
+  --primary-800:#575c78;
+  --primary-900:#404357;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -6085,9 +6095,7 @@
   box-shadow: none;
   background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
 }
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
   border: 0 none;
   background-image: none;
 }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index ee4fceeee..01ecd7298 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -246,6 +246,16 @@
   --red-700:#ab2f26;
   --red-800:#86251e;
   --red-900:#621b16;
+  --primary-50:#f7f5fb;
+  --primary-100:#dbd0ee;
+  --primary-200:#beaae0;
+  --primary-300:#a185d2;
+  --primary-400:#845fc5;
+  --primary-500:#673ab7;
+  --primary-600:#58319c;
+  --primary-700:#482980;
+  --primary-800:#392065;
+  --primary-900:#291749;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -6085,9 +6095,7 @@
   box-shadow: none;
   background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
 }
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
   border: 0 none;
   background-image: none;
 }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index ebff2d9dd..94c78e2f1 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -246,6 +246,16 @@
   --red-700:#ab2f26;
   --red-800:#86251e;
   --red-900:#621b16;
+  --primary-50:#f5f6fb;
+  --primary-100:#d1d5ed;
+  --primary-200:#acb4df;
+  --primary-300:#8893d1;
+  --primary-400:#6372c3;
+  --primary-500:#3f51b5;
+  --primary-600:#36459a;
+  --primary-700:#2c397f;
+  --primary-800:#232d64;
+  --primary-900:#192048;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -6085,9 +6095,7 @@
   box-shadow: none;
   background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
 }
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
   border: 0 none;
   background-image: none;
 }
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index a581d28f3..fdca5fe72 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -246,6 +246,16 @@
   --red-700:#ab2f26;
   --red-800:#86251e;
   --red-900:#621b16;
+  --primary-50:#fdfafd;
+  --primary-100:#f3e5f6;
+  --primary-200:#ead1ee;
+  --primary-300:#e1bce7;
+  --primary-400:#d7a8df;
+  --primary-500:#ce93d8;
+  --primary-600:#af7db8;
+  --primary-700:#906797;
+  --primary-800:#715177;
+  --primary-900:#523b56;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -6085,9 +6095,7 @@
   box-shadow: none;
   background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
 }
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
   border: 0 none;
   background-image: none;
 }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 95aab3205..a44ea6299 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -246,6 +246,16 @@
   --red-700:#ab2f26;
   --red-800:#86251e;
   --red-900:#621b16;
+  --primary-50:#fafbfd;
+  --primary-100:#e8eaf6;
+  --primary-200:#d6daef;
+  --primary-300:#c3c9e8;
+  --primary-400:#b1b9e1;
+  --primary-500:#9fa8da;
+  --primary-600:#878fb9;
+  --primary-700:#6f7699;
+  --primary-800:#575c78;
+  --primary-900:#404357;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -6085,9 +6095,7 @@
   box-shadow: none;
   background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
 }
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
   border: 0 none;
   background-image: none;
 }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 21346ba86..5f032ff07 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -246,6 +246,16 @@
   --red-700:#ab2f26;
   --red-800:#86251e;
   --red-900:#621b16;
+  --primary-50:#f7f5fb;
+  --primary-100:#dbd0ee;
+  --primary-200:#beaae0;
+  --primary-300:#a185d2;
+  --primary-400:#845fc5;
+  --primary-500:#673ab7;
+  --primary-600:#58319c;
+  --primary-700:#482980;
+  --primary-800:#392065;
+  --primary-900:#291749;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -6085,9 +6095,7 @@
   box-shadow: none;
   background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
 }
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
   border: 0 none;
   background-image: none;
 }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index d3d767629..530363045 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -246,6 +246,16 @@
   --red-700:#ab2f26;
   --red-800:#86251e;
   --red-900:#621b16;
+  --primary-50:#f5f6fb;
+  --primary-100:#d1d5ed;
+  --primary-200:#acb4df;
+  --primary-300:#8893d1;
+  --primary-400:#6372c3;
+  --primary-500:#3f51b5;
+  --primary-600:#36459a;
+  --primary-700:#2c397f;
+  --primary-800:#232d64;
+  --primary-900:#192048;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -6085,9 +6095,7 @@
   box-shadow: none;
   background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
 }
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext {
   border: 0 none;
   background-image: none;
 }
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 774e2d59d..54489e6eb 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -222,6 +222,16 @@
   --red-700:#971d0d;
   --red-800:#77170a;
   --red-900:#561108;
+  --primary-50:#f2f8fd;
+  --primary-100:#c2dff6;
+  --primary-200:#91c6ef;
+  --primary-300:#61ade7;
+  --primary-400:#3093e0;
+  --primary-500:#007ad9;
+  --primary-600:#0068b8;
+  --primary-700:#005598;
+  --primary-800:#004377;
+  --primary-900:#003157;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 87dee43ce..90e3e377f 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -222,6 +222,16 @@
   --red-700:#971d0d;
   --red-800:#77170a;
   --red-900:#561108;
+  --primary-50:#f2f8fd;
+  --primary-100:#c2dff6;
+  --primary-200:#91c6ef;
+  --primary-300:#61ade7;
+  --primary-400:#3093e0;
+  --primary-500:#007ad9;
+  --primary-600:#0068b8;
+  --primary-700:#005598;
+  --primary-800:#004377;
+  --primary-900:#003157;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 2a0193a26..f300a3317 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -222,6 +222,16 @@
   --red-700:#971d0d;
   --red-800:#77170a;
   --red-900:#561108;
+  --primary-50:#f6fbf9;
+  --primary-100:#d1eee1;
+  --primary-200:#ade0ca;
+  --primary-300:#89d3b2;
+  --primary-400:#65c59b;
+  --primary-500:#41b883;
+  --primary-600:#379c6f;
+  --primary-700:#2e815c;
+  --primary-800:#246548;
+  --primary-900:#1a4a34;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 3aa37a8c9..974f6d2bc 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -222,6 +222,16 @@
   --red-700:#971d0d;
   --red-800:#77170a;
   --red-900:#561108;
+  --primary-50:#f2f8fd;
+  --primary-100:#c2dff6;
+  --primary-200:#91c6ef;
+  --primary-300:#61ade7;
+  --primary-400:#3093e0;
+  --primary-500:#007ad9;
+  --primary-600:#0068b8;
+  --primary-700:#005598;
+  --primary-800:#004377;
+  --primary-900:#003157;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index d842f519e..51e811733 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b33d25;
   --red-800:#8c301d;
   --red-900:#662315;
+  --primary-50:#f8fafa;
+  --primary-100:#dfe6e9;
+  --primary-200:#c6d1d7;
+  --primary-300:#adbdc6;
+  --primary-400:#94a9b4;
+  --primary-500:#7b95a3;
+  --primary-600:#697f8b;
+  --primary-700:#566872;
+  --primary-800:#44525a;
+  --primary-900:#313c41;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index d31f6634c..b92bc51c8 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#f4fafe;
+  --primary-100:#cae6fc;
+  --primary-200:#a0d2fa;
+  --primary-300:#75bef8;
+  --primary-400:#4baaf5;
+  --primary-500:#2196f3;
+  --primary-600:#1c80cf;
+  --primary-700:#1769aa;
+  --primary-800:#125386;
+  --primary-900:#0d3c61;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index bcefbf571..488ea1515 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#f6fbf6;
+  --primary-100:#d4ecd5;
+  --primary-200:#b2ddb4;
+  --primary-300:#90cd93;
+  --primary-400:#6ebe71;
+  --primary-500:#4caf50;
+  --primary-600:#419544;
+  --primary-700:#357b38;
+  --primary-800:#2a602c;
+  --primary-900:#1e4620;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index a320a7879..2a9626f5f 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#fffcf3;
+  --primary-100:#fff0c3;
+  --primary-200:#ffe494;
+  --primary-300:#ffd965;
+  --primary-400:#ffcd36;
+  --primary-500:#ffc107;
+  --primary-600:#d9a406;
+  --primary-700:#b38705;
+  --primary-800:#8c6a04;
+  --primary-900:#664d03;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index b85fbb454..efadc7404 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#faf4fb;
+  --primary-100:#e7cbec;
+  --primary-200:#d4a2dd;
+  --primary-300:#c279ce;
+  --primary-400:#af50bf;
+  --primary-500:#9c27b0;
+  --primary-600:#852196;
+  --primary-700:#6d1b7b;
+  --primary-800:#561561;
+  --primary-900:#3e1046;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 4e0f8a99c..aed100d43 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -257,6 +257,16 @@
   --red-700:#a73030;
   --red-800:#832525;
   --red-900:#601b1b;
+  --primary-50:#f6f6fe;
+  --primary-100:#d5d3f9;
+  --primary-200:#b3aff4;
+  --primary-300:#928cef;
+  --primary-400:#7069ea;
+  --primary-500:#4f46e5;
+  --primary-600:#433cc3;
+  --primary-700:#3731a0;
+  --primary-800:#2b277e;
+  --primary-900:#201c5c;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 7199ad351..79bb8223d 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#f7fbff;
+  --primary-100:#daedfd;
+  --primary-200:#bcdffb;
+  --primary-300:#9fd1f9;
+  --primary-400:#81c3f8;
+  --primary-500:#64b5f6;
+  --primary-600:#559ad1;
+  --primary-700:#467fac;
+  --primary-800:#376487;
+  --primary-900:#284862;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index d2f374c42..cfe8ac51a 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#f9fcf9;
+  --primary-100:#e1f2e1;
+  --primary-200:#c9e7ca;
+  --primary-300:#b1dcb3;
+  --primary-400:#99d29b;
+  --primary-500:#81c784;
+  --primary-600:#6ea970;
+  --primary-700:#5a8b5c;
+  --primary-800:#476d49;
+  --primary-900:#345035;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 972c28713..3f5384c65 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#fffdf6;
+  --primary-100:#fff5d5;
+  --primary-200:#ffedb3;
+  --primary-300:#ffe592;
+  --primary-400:#ffdd70;
+  --primary-500:#ffd54f;
+  --primary-600:#d9b543;
+  --primary-700:#b39537;
+  --primary-800:#8c752b;
+  --primary-900:#665520;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index fd74c35ba..fda3b844e 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -222,6 +222,16 @@
   --red-700:#b32d23;
   --red-800:#8c231c;
   --red-900:#661a14;
+  --primary-50:#fcf7fc;
+  --primary-100:#eedbf2;
+  --primary-200:#e1bee7;
+  --primary-300:#d4a1dd;
+  --primary-400:#c785d2;
+  --primary-500:#ba68c8;
+  --primary-600:#9e58aa;
+  --primary-700:#82498c;
+  --primary-800:#66396e;
+  --primary-900:#4a2a50;
 }
 
 .p-autocomplete .p-autocomplete-loader {
diff --git a/src/components/datatable/DataTable.spec.js b/src/components/datatable/DataTable.spec.js
index 4d0d3af31..94bea83f5 100644
--- a/src/components/datatable/DataTable.spec.js
+++ b/src/components/datatable/DataTable.spec.js
@@ -198,38 +198,17 @@ describe('DataTable.vue', () => {
                             <Column header="Profits" :colspan="2" />
                         </Row>
                         <Row>
-                            <Column header="Last Year" :sortable="true" field="lastYearSale"/>
-                            <Column header="This Year" :sortable="true" field="thisYearSale"/>
-                            <Column header="Last Year" :sortable="true" field="lastYearProfit"/>
-                            <Column header="This Year" :sortable="true" field="thisYearProfit"/>
+                            <Column header="Last Year"/>
+                            <Column header="This Year"/>
+                            <Column header="Last Year"/>
+                            <Column header="This Year"/>
                         </Row>
                     </ColumnGroup>
-                    <Column field="product" />
-                    <Column field="lastYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.lastYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="thisYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.thisYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="lastYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.lastYearProfit)}}
-                        </template>
-                    </Column>
-                    <Column field="thisYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.thisYearProfit)}}
-                        </template>
-                    </Column>
                     <ColumnGroup type="footer">
                         <Row>
-                            <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
-                            <Column :footer="lastYearTotal" />
-                            <Column :footer="thisYearTotal" />
+                            <Column footer="Totals:" :colspan="3"/>
+                            <Column footer="Last Year Total" />
+                            <Column footer="This Year Total" />
                         </Row>
                     </ColumnGroup>
                 </DataTable>
@@ -270,102 +249,10 @@ describe('DataTable.vue', () => {
                 }
             }
         });
+
         expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-header');
         expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-grouped-footer');
-    });
 
-    it('should column group and row templating', () => {
-        wrapper = mount({
-            components: {
-                DataTable,
-                ColumnGroup,
-                Row,
-                Column
-            },
-            template: `
-                <DataTable :value="sales" responsiveLayout="scroll">
-                    <ColumnGroup type="header">
-                        <Row>
-                            <Column header="Product" :rowspan="3" />
-                            <Column header="Sale Rate" :colspan="4" />
-                        </Row>
-                        <Row>
-                            <Column header="Sales" :colspan="2" />
-                            <Column header="Profits" :colspan="2" />
-                        </Row>
-                        <Row>
-                            <Column header="Last Year" :sortable="true" field="lastYearSale"/>
-                            <Column header="This Year" :sortable="true" field="thisYearSale"/>
-                            <Column header="Last Year" :sortable="true" field="lastYearProfit"/>
-                            <Column header="This Year" :sortable="true" field="thisYearProfit"/>
-                        </Row>
-                    </ColumnGroup>
-                    <Column field="product" />
-                    <Column field="lastYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.lastYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="thisYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.thisYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="lastYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.lastYearProfit)}}
-                        </template>
-                    </Column>
-                    <Column field="thisYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.thisYearProfit)}}
-                        </template>
-                    </Column>
-                    <ColumnGroup type="footer">
-                        <Row>
-                            <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
-                            <Column :footer="lastYearTotal" />
-                            <Column :footer="thisYearTotal" />
-                        </Row>
-                    </ColumnGroup>
-                </DataTable>
-            `,
-            data() {
-                return {
-                    sales: null
-                }
-            },
-            created() {
-                this.sales = [
-                    {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
-                    {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
-                    {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500}
-                ];
-            },
-            methods: {
-                formatCurrency(value) {
-                    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-                }
-            },
-            computed: {
-                lastYearTotal() {
-                    let total = 0;
-                    for(let sale of this.sales) {
-                        total += sale.lastYearProfit;
-                    }
-        
-                    return this.formatCurrency(total);
-                },
-                thisYearTotal() {
-                    let total = 0;
-                    for(let sale of this.sales) {
-                        total += sale.thisYearProfit;
-                    }
-        
-                    return this.formatCurrency(total);
-                }
-            }
-        });
         const headerRows = wrapper.findAll('.p-datatable-thead > tr');
 
         expect(headerRows.length).toEqual(3);
@@ -384,150 +271,78 @@ describe('DataTable.vue', () => {
         expect(headerRows[2].findAll('th')[1].text()).toEqual('This Year');
         expect(headerRows[2].findAll('th')[2].text()).toEqual('Last Year');
         expect(headerRows[2].findAll('th')[3].text()).toEqual('This Year');
-    });
 
-    it('should column group templating', () => {
-        wrapper = mount({
-            components: {
-                DataTable,
-                ColumnGroup,
-                Row,
-                Column
-            },
-            template: `
-                <DataTable :value="sales" responsiveLayout="scroll">
-                    <ColumnGroup type="header">
-                        <Row>
-                            <Column header="Product" :rowspan="3" />
-                            <Column header="Sale Rate" :colspan="4" />
-                        </Row>
-                        <Row>
-                            <Column header="Sales" :colspan="2" />
-                            <Column header="Profits" :colspan="2" />
-                        </Row>
-                        <Row>
-                            <Column header="Last Year" :sortable="true" field="lastYearSale"/>
-                            <Column header="This Year" :sortable="true" field="thisYearSale"/>
-                            <Column header="Last Year" :sortable="true" field="lastYearProfit"/>
-                            <Column header="This Year" :sortable="true" field="thisYearProfit"/>
-                        </Row>
-                    </ColumnGroup>
-                    <Column field="product" />
-                    <Column field="lastYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.lastYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="thisYearSale">
-                        <template #body="slotProps">
-                            {{slotProps.data.thisYearSale}}%
-                        </template>
-                    </Column>
-                    <Column field="lastYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.lastYearProfit)}}
-                        </template>
-                    </Column>
-                    <Column field="thisYearProfit">
-                        <template #body="slotProps">
-                            {{formatCurrency(slotProps.data.thisYearProfit)}}
-                        </template>
-                    </Column>
-                    <ColumnGroup type="footer">
-                        <Row>
-                            <Column footer="Totals:" :colspan="3" footerStyle="text-align:right"/>
-                            <Column :footer="lastYearTotal" />
-                            <Column :footer="thisYearTotal" />
-                        </Row>
-                    </ColumnGroup>
-                </DataTable>
-            `,
-            data() {
-                return {
-                    sales: null
-                }
-            },
-            created() {
-                this.sales = [
-                    {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
-                    {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
-                    {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500}
-                ];
-            },
-            methods: {
-                formatCurrency(value) {
-                    return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-                }
-            },
-            computed: {
-                lastYearTotal() {
-                    let total = 0;
-                    for(let sale of this.sales) {
-                        total += sale.lastYearProfit;
-                    }
-        
-                    return this.formatCurrency(total);
-                },
-                thisYearTotal() {
-                    let total = 0;
-                    for(let sale of this.sales) {
-                        total += sale.thisYearProfit;
-                    }
-        
-                    return this.formatCurrency(total);
-                }
-            }
-        });
         const footerRows = wrapper.findAll('.p-datatable-tfoot > tr');
 
         expect(footerRows.length).toEqual(1);
 
         expect(footerRows[0].findAll('td')[0].attributes().colspan).toEqual('3');
-        expect(footerRows[0].findAll('td')[0].text()).not.toEqual('');
-        expect(footerRows[0].findAll('td')[0].text()).not.toEqual('');
-    });
-
-
-    // pagination
-    it('should have a paginator', async () => {
-        await wrapper.setProps({ value: data, paginator: true, rows: 5 });
-
-        expect(wrapper.find('.p-paginator').exists()).toBe(true);
-        expect(wrapper.findAll('.p-paginator-page').length).toEqual(2);
-        expect(wrapper.find('.p-paginator-next').exists()).toBe(true);
-        expect(wrapper.find('.p-paginator-first').classes()).toContain('p-disabled');
-        expect(wrapper.findAll('.p-paginator-page')[0].classes()).toContain('p-highlight');
-        expect(wrapper.find('.p-paginator-current').text()).toBe('Showing 1 to 5 of 10');
-
-        await wrapper.vm.onPage({page: 1, first: 5, rows: 5, pageCount: 2});
-        
-        expect(wrapper.findAll('.p-paginator-page')[0].classes()).not.toContain('p-highlight');
-        expect(wrapper.findAll('.p-paginator-page')[1].classes()).toContain('p-highlight');
+        expect(footerRows[0].findAll('td')[1].text()).toEqual('Last Year Total');
+        expect(footerRows[0].findAll('td')[2].text()).toEqual('This Year Total');
     });
 
 
     // sorting
     it('should single sort', async () => {
+        wrapper = mount(DataTable, {
+            global: {
+                components: {
+                    Column
+                }
+            },
+            props: {
+                value: smallData
+            },
+            slots: {
+                default: `
+                    <Column field="code" header="Code" sortable></Column>
+                    <Column field="name" header="Name" sortable></Column>
+                `
+            }
+        });
+
         const sortableTH = wrapper.findAll('.p-sortable-column')[0];
+        const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
         const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
 
         await sortableTH.trigger('click');
 
         expect(headerClick).toHaveBeenCalled();
         expect(sortableTH.classes()).toContain('p-highlight');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
         expect(wrapper.emitted()['update:sortField'][0]).toEqual(['code']);
         expect(wrapper.emitted()['value-change'][0]).not.toBeNull();
     });
 
     it('should multiple sort', async () => {
-        const sortableTHs = wrapper.findAll('.p-sortable-column');
-        const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
+        wrapper = mount(DataTable, {
+            global: {
+                components: {
+                    Column
+                }
+            },
+            props: {
+                value: smallData,
+                sortMode: 'multiple'
+            },
+            slots: {
+                default: `
+                    <Column field="code" header="Code" sortable></Column>
+                    <Column field="name" header="Name" sortable></Column>
+                `
+            }
+        });
 
-        await wrapper.setProps({ sortMode: 'multiple' });
+        const sortableTHs = wrapper.findAll('.p-sortable-column');
+        const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
+        const headerClick = jest.spyOn(wrapper.vm, 'onColumnHeaderClick');
 
         await sortableTHs[0].trigger('click');
 
         expect(headerClick).toHaveBeenCalled();
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
+
+        const seconCellText = wrapper.findAll('.p-datatable-tbody > tr')[1].findAll('td')[1].text();
 
         await sortableTHs[1].trigger('click');
 
@@ -536,31 +351,74 @@ describe('DataTable.vue', () => {
         expect(wrapper.emitted()['update:multiSortMeta'][0]).toEqual([[{ field: 'code', order: 1 }]]);
         expect(wrapper.emitted()['update:multiSortMeta'][1]).toEqual([[{ field: 'name', order: 1 }]]);
         expect(wrapper.emitted()['value-change'][0]).not.toEqual(wrapper.emitted()['value-change'][1]);
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[1].findAll('td')[1].text()).not.toEqual(seconCellText);
     });
 
     it('should have presort', async () => {
+        wrapper = mount(DataTable, {
+            global: {
+                components: {
+                    Column
+                }
+            },
+            props: {
+                value: smallData,
+                sortOrder: -1,
+                sortField: 'code'
+            },
+            slots: {
+                default: `
+                    <Column field="code" header="Code" sortable></Column>
+                    <Column field="name" header="Name" sortable></Column>
+                `
+            }
+        });
+
         const presortedTH = wrapper.findAll('.p-sortable-column')[0];
 
-        await wrapper.setProps({ sortOrder: -1, sortField: 'code' });
-
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual('Game Controller');
         expect(presortedTH.classes()).toContain('p-highlight');
     });
 
     it('should remove sort', async () => {
-        const sortableTH = wrapper.findAll('.p-sortable-column')[0];
+        wrapper = mount(DataTable, {
+            global: {
+                components: {
+                    Column
+                }
+            },
+            props: {
+                value: smallData,
+                removableSort: true
+            },
+            slots: {
+                default: `
+                    <Column field="code" header="Code" sortable></Column>
+                    <Column field="name" header="Name" sortable></Column>
+                `
+            }
+        });
 
-        await wrapper.setProps({ removableSort: true });
+        const sortableTH = wrapper.findAll('.p-sortable-column')[0];
+        const firstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
 
         await sortableTH.trigger('click');
-
+        
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(firstCellText);
         expect(sortableTH.attributes()['aria-sort']).toBe('ascending');
 
+        const updatedFirstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
+
         await sortableTH.trigger('click');
 
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(updatedFirstCellText);
         expect(sortableTH.attributes()['aria-sort']).toBe('descending');
 
+        const latestUpdatedFirstCellText = wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text();
+
         await sortableTH.trigger('click');
 
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).not.toEqual(latestUpdatedFirstCellText);
         expect(sortableTH.attributes()['aria-sort']).toBe('none');
     });
 
@@ -1301,8 +1159,7 @@ describe('DataTable.vue', () => {
         expect(wrapper.find('.p-rowgroup-footer').text()).toBe('GroupFooter Templating');
     });
 
-    // expandable row groups
-    it('should expand', () => {
+    it('should have expandable row groups and expand rows', async () => {
         wrapper = mount(DataTable, {
             global: {
                 components: {
@@ -1310,31 +1167,124 @@ describe('DataTable.vue', () => {
                 }
             },
             props: {
-                value: smallData,
+                value: [
+                    {
+                        "id":1000,
+                        "name":"James Butt",
+                        "country":{
+                            "name":"Algeria",
+                            "code":"dz"
+                        },
+                        "company":"Benton, John B Jr",
+                        "representative":{
+                            "name":"Ioni Bowcher",
+                            "image":"ionibowcher.png"
+                        }
+                    },
+                    {
+                        "id":1001,
+                        "name":"Josephine Darakjy",
+                        "country":{
+                            "name":"Egypt",
+                            "code":"eg"
+                        },
+                        "company":"Chanay, Jeffrey A Esq",
+                        "representative":{
+                            "name":"Amy Elsner",
+                            "image":"amyelsner.png"
+                        }
+                    },
+                    {
+                        "id":1013,
+                        "name":"Graciela Ruta",
+                        "country":{
+                            "name":"Chile",
+                            "code":"cl"
+                        },
+                        "company":"Buckley Miller & Wright",
+                        "representative":{
+                            "name":"Amy Elsner",
+                            "image":"amyelsner.png"
+                        }
+                    },
+                    {
+                        "id":1021,
+                        "name":"Veronika Inouye",
+                        "country":{
+                            "name":"Ecuador",
+                            "code":"ec"
+                        },
+                        "company":"C 4 Network Inc",
+                        "representative":{
+                            "name":"Ioni Bowcher",
+                            "image":"ionibowcher.png"
+                        }
+                    },
+                    {
+                        "id":1026,
+                        "name":"Chanel Caudy",
+                        "country":{
+                            "name":"Argentina",
+                            "code":"ar"
+                        },
+                        "company":"Professional Image Inc",
+                        "representative":{
+                            "name":"Ioni Bowcher",
+                            "image":"ionibowcher.png"
+                        }
+                    },
+                    {
+                        "id":1027,
+                        "name":"Ezekiel Chui",
+                        "country":{
+                            "name":"Ireland",
+                            "code":"ie"
+                        },
+                        "company":"Sider, Donald C Esq",
+                        "representative":{
+                            "name":"Amy Elsner",
+                            "image":"amyelsner.png"
+                        }
+                    }
+                ],
                 rowGroupMode: 'subheader',
-                groupRowsBy: 'name',
+                groupRowsBy: 'representative.name',
                 sortMode: 'single',
-                sortField: 'name',
+                sortField: 'representative.name',
                 sortOrder: 1,
                 scrollable: true,
                 expandableRowGroups: true,
-                expandedRowGroups: ['Blue Band']
+                expandedRowGroups: null,
+                responsiveLayout: 'scroll'
             },
             slots: {
                 default: `
-                    <Column field="code" header="Code"></Column>
+                    <Column field="representative.name" header="Representative"></Column>
                     <Column field="name" header="Name"></Column>
+                    <Column field="country" header="Country"></Column>
+                    <Column field="company" header="Company"></Column>
                 `,
-                groupheader: `GroupHeader Templating`,
-                groupfooter: `GroupFooter Templating`
+                groupheader: `
+                    <template #groupheader="slotProps">
+                        <span class="image-text">{{slotProps.data.representative.name}}</span>
+                    </template>
+                `
             }
         });
 
-        expect(wrapper.find('.p-column-title').text()).toBe('Code');
+        expect(wrapper.findAll('.p-datatable-thead > tr > th').length).toBe(3);
+        expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header').length).toBe(2);
+        expect(wrapper.findAll('.p-datatable-tbody > tr.p-rowgroup-header')[0].text()).toBe('Amy Elsner');
+
+        const firstToggler = wrapper.findAll('.p-row-toggler')[0];
+
+        await firstToggler.trigger('click');
+
+        expect(wrapper.emitted()['update:expandedRowGroups'][0]).toEqual([['Amy Elsner']]);
+        expect(wrapper.emitted()['rowgroup-expand'][0][0].data).toBe('Amy Elsner');
     });
 
-    // rowspan grouping
-    it('should rowspan', async () => {
+    it('should have rowspan grouping', async () => {
         wrapper = mount(DataTable, {
             global: {
                 components: {
@@ -1342,25 +1292,65 @@ describe('DataTable.vue', () => {
                 }
             },
             props: {
-                value: smallData,
+                value: [
+                    {
+                        "id": "1000",
+                        "code": "vbb124btr",
+                        "name": "Game Controller"
+                    },
+                    {
+                        "id": "1001",
+                        "code": "nvklal433",
+                        "name": "Black Watch"
+                    },
+                    {
+                        "id": "1002",
+                        "code": "zz21cz3c1",
+                        "name": "Blue Band"
+                    },
+                    {
+                        "id": "1003",
+                        "code": "vbb124btrvbb124btr",
+                        "name": "Game Controller"
+                    },
+                    {
+                        "id": "1004",
+                        "code": "nvklal433nvklal433",
+                        "name": "Black Watch"
+                    },
+                    {
+                        "id": "1006",
+                        "code": "zz21cz3c1zz21cz3c1",
+                        "name": "Blue Band"
+                    }
+                ],
                 rowGroupMode: 'rowspan',
                 groupRowsBy: 'name',
                 sortMode: 'single',
                 sortField: 'name',
                 sortOrder: 1,
-                scrollable: true
+                scrollable: true,
+                responsiveLayout: 'scroll'
             },
             slots: {
                 default: `
-                    <Column field="code" header="Code"></Column>
+                    <Column header="#">
+                        <template #body="slotProps">
+                            {{slotProps.index}}
+                        </template>
+                    </Column>
                     <Column field="name" header="Name"></Column>
-                `,
-                groupheader: `GroupHeader Templating`,
-                groupfooter: `GroupFooter Templating`
+                    <Column field="code" header="Code"></Column>
+                `
             }
         });
 
-        expect(wrapper.find('td > span').text()).toBe('Code');
+        expect(wrapper.find('.p-datatable-thead > tr').findAll('th')[0].text()).toBe('#');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[0].text()).toBe('0');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].text()).toBe('Black Watch');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[0].findAll('td')[1].attributes().rowspan).toBe('2');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[2].findAll('td')[1].attributes().rowspan).toBe('2');
+        expect(wrapper.findAll('.p-datatable-tbody > tr')[4].findAll('td')[1].attributes().rowspan).toBe('2');
     });
 
 
diff --git a/src/components/inputtext/InputText.spec.js b/src/components/inputtext/InputText.spec.js
index fd9d75c34..671599671 100644
--- a/src/components/inputtext/InputText.spec.js
+++ b/src/components/inputtext/InputText.spec.js
@@ -1,5 +1,5 @@
 import { mount } from  '@vue/test-utils';
-import InputText from '@/components/inputText/InputText.vue';
+import InputText from './InputText.vue';
 
 describe('InputText.vue', () => {
     it('is InputText component exists', async () => {
@@ -31,4 +31,4 @@ describe('InputText.vue', () => {
 
         expect(wrapper.vm.filled).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/src/views/colors/ColorsDemo.vue b/src/views/colors/ColorsDemo.vue
index 32e749b63..cf2302fe1 100644
--- a/src/views/colors/ColorsDemo.vue
+++ b/src/views/colors/ColorsDemo.vue
@@ -141,7 +141,7 @@
 export default {
     data() {
         return {
-            colors: ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'red', 'gray'],
+            colors: ['blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'red', 'gray', 'primary'],
             shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
         }
     }
diff --git a/src/views/contextmenu/ContextMenuDoc.vue b/src/views/contextmenu/ContextMenuDoc.vue
index c90ab8038..e016bb548 100755
--- a/src/views/contextmenu/ContextMenuDoc.vue
+++ b/src/views/contextmenu/ContextMenuDoc.vue
@@ -25,135 +25,134 @@ export default {
         return {
             items: [
                 {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
+					label:'File',
+					icon:'pi pi-fw pi-file',
+					items:[
+						{
+							label:'New',
+							icon:'pi pi-fw pi-plus',
+							items:[
+								{
+									label:'Bookmark',
+									icon:'pi pi-fw pi-bookmark'
+								},
+								{
+									label:'Video',
+									icon:'pi pi-fw pi-video'
+								}
+							]
+						},
+						{
+							label:'Delete',
+							icon:'pi pi-fw pi-trash'
+						},
+						{
+							separator:true
+						},
+						{
+							label:'Export',
+							icon:'pi pi-fw pi-external-link'
+						}
+					]
+				},
+                {
+					label:'Edit',
+					icon:'pi pi-fw pi-pencil',
+					items:[
+						{
+							label:'Left',
+							icon:'pi pi-fw pi-align-left'
+						},
+						{
+							label:'Right',
+							icon:'pi pi-fw pi-align-right'
+						},
+						{
+							label:'Center',
+							icon:'pi pi-fw pi-align-center'
+						},
+						{
+							label:'Justify',
+							icon:'pi pi-fw pi-align-justify'
+						},
 
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
+					]
                 },
                 {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
+					label:'Users',
+					icon:'pi pi-fw pi-user',
+					items:[
+						{
+							label:'New',
+							icon:'pi pi-fw pi-user-plus',
 
-                   ]
+						},
+						{
+							label:'Delete',
+							icon:'pi pi-fw pi-user-minus',
+
+						},
+						{
+							label:'Search',
+							icon:'pi pi-fw pi-users',
+							items:[
+								{
+									label:'Filter',
+									icon:'pi pi-fw pi-filter',
+									items:[
+										{
+											label:'Print',
+											icon:'pi pi-fw pi-print'
+										}
+									]
+								},
+								{
+									icon:'pi pi-fw pi-bars',
+									label:'List'
+								}
+							]
+						}
+					]
                 },
                 {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
+					label:'Events',
+					icon:'pi pi-fw pi-calendar',
+					items:[
+						{
+							label:'Edit',
+							icon:'pi pi-fw pi-pencil',
+							items:[
+								{
+									label:'Save',
+									icon:'pi pi-fw pi-calendar-plus'
+								},
+								{
+									label:'Delete',
+									icon:'pi pi-fw pi-calendar-minus'
+								},
 
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
+							]
+						},
+						{
+							label:'Archieve',
+							icon:'pi pi-fw pi-calendar-times',
+							items:[
+								{
+									label:'Remove',
+									icon:'pi pi-fw pi-calendar-minus'
+								}
+							]
+						}
+					]
                 },
                 {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
+					separator:true
                 },
                 {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
+					label:'Quit',
+					icon:'pi pi-fw pi-power-off'
                 }
-             ]
+            ]
         }
     }
 }
@@ -192,8 +191,8 @@ export default {
 
 </code></pre>
 
-         <h5>Templating</h5>
-         <p>ContextMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+		<h5>Templating</h5>
+		<p>ContextMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
 <pre v-code><code><template v-pre>
 &lt;ContextMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
@@ -298,23 +297,23 @@ export default {
 			</table>
 		</div>
 
-      <h5>Slots</h5>
-		<div class="doc-tablewrapper">
-            <table class="doc-table">
-				<thead>
-               <tr>
-                  <th>Name</th>
-                  <th>Parameters</th>
-               </tr>
-				</thead>
-				<tbody>
-               <tr>
-                  <td>item</td>
-                  <td>item: Menuitem instance</td>
-               </tr>
-				</tbody>
-			</table>
-      </div>
+		<h5>Slots</h5>
+			<div class="doc-tablewrapper">
+				<table class="doc-table">
+					<thead>
+						<tr>
+							<th>Name</th>
+							<th>Parameters</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>item</td>
+							<td>item: Menuitem instance</td>
+						</tr>
+					</tbody>
+				</table>
+		</div>
 
 		<h5>Styling</h5>
 		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 8077c6a14..4a2fecd24 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -435,7 +435,7 @@ export default {
                         <td>option: OptionGroup instance <br />
                             index: Index of the option group</td>
                     </tr>
-                     <tr>
+                    <tr>
                         <td>value</td>
                         <td>value: Value of the component <br />
                             placeholder: Placeholder prop value</td>
diff --git a/src/views/sidebar/SidebarDemo.vue b/src/views/sidebar/SidebarDemo.vue
index 895ab84b4..d7eb18122 100755
--- a/src/views/sidebar/SidebarDemo.vue
+++ b/src/views/sidebar/SidebarDemo.vue
@@ -16,23 +16,23 @@
                 <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2"  />
                 <Button icon="pi pi-th-large" @click="visibleFull = true"  />
 
-                <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
+                <Sidebar v-model:visible="visibleLeft" :baseZIndex="10000">
                     <h3>Left Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
+                <Sidebar v-model:visible="visibleRight" :baseZIndex="10000" position="right">
                     <h3>Right Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
+                <Sidebar v-model:visible="visibleTop" :baseZIndex="10000" position="top">
                     <h3>Top Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
+                <Sidebar v-model:visible="visibleBottom" :baseZIndex="10000" position="bottom">
                     <h3>Bottom Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
+                <Sidebar v-model:visible="visibleFull" :baseZIndex="10000" position="full">
                     <h3>Full Screen</h3>
                 </Sidebar>
             </div>
diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
index e3ac099da..77edc23bf 100755
--- a/src/views/sidebar/SidebarDoc.vue
+++ b/src/views/sidebar/SidebarDoc.vue
@@ -225,23 +225,23 @@ export default {
         <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2"  />
         <Button icon="pi pi-th-large" @click="visibleFull = true"  />
 
-        <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
+        <Sidebar v-model:visible="visibleLeft" :baseZIndex="10000">
             <h3>Left Sidebar</h3>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
+        <Sidebar v-model:visible="visibleRight" :baseZIndex="10000" position="right">
             <h3>Right Sidebar</h3>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
+        <Sidebar v-model:visible="visibleTop" :baseZIndex="10000" position="top">
             <h3>Top Sidebar</h3>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
+        <Sidebar v-model:visible="visibleBottom" :baseZIndex="10000" position="bottom">
             <h3>Bottom Sidebar</h3>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
+        <Sidebar v-model:visible="visibleFull" :baseZIndex="10000" position="full">
             <h3>Full Screen</h3>
         </Sidebar>
     </div>
@@ -273,23 +273,23 @@ export default {
         <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2"  />
         <Button icon="pi pi-th-large" @click="visibleFull = true"  />
 
-        <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
+        <Sidebar v-model:visible="visibleLeft" :baseZIndex="10000">
             <h3>Left Sidebar</h3>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
+        <Sidebar v-model:visible="visibleRight" :baseZIndex="10000" position="right">
             <h3>Right Sidebar</h3>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
+        <Sidebar v-model:visible="visibleTop" :baseZIndex="10000" position="top">
             <h3>Top Sidebar</h3>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
+        <Sidebar v-model:visible="visibleBottom" :baseZIndex="10000" position="bottom">
             <h3>Bottom Sidebar</h3>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
+        <Sidebar v-model:visible="visibleFull" :baseZIndex="10000" position="full">
             <h3>Full Screen</h3>
         </Sidebar>
     </div>
@@ -322,23 +322,23 @@ export default {
 			<p-button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2"></p-button>
 			<p-button icon="pi pi-th-large" @click="visibleFull = true"></p-button>
 
-			<p-sidebar v-model:visible="visibleLeft" :base-z-index="1000">
+			<p-sidebar v-model:visible="visibleLeft" :base-z-index="10000">
 				<h3>Left Sidebar</h3>
 			</p-sidebar>
 
-			<p-sidebar v-model:visible="visibleRight" :base-z-index="1000" position="right">
+			<p-sidebar v-model:visible="visibleRight" :base-z-index="10000" position="right">
 				<h3>Right Sidebar</h3>
 			</p-sidebar>
 
-			<p-sidebar v-model:visible="visibleTop" :base-z-index="1000" position="top">
+			<p-sidebar v-model:visible="visibleTop" :base-z-index="10000" position="top">
 				<h3>Top Sidebar</h3>
 			</p-sidebar>
 
-			<p-sidebar v-model:visible="visibleBottom" :base-z-index="1000" position="bottom">
+			<p-sidebar v-model:visible="visibleBottom" :base-z-index="10000" position="bottom">
 				<h3>Bottom Sidebar</h3>
 			</p-sidebar>
 
-			<p-sidebar v-model:visible="visibleFull" :base-z-index="1000" position="full">
+			<p-sidebar v-model:visible="visibleFull" :base-z-index="10000" position="full">
 				<h3>Full Screen</h3>
 			</p-sidebar>
 		</div>
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index c8f4c5fc7..e5100d43b 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -149,20 +149,20 @@ export default {
         <h5>Slots</h5>
 		<div class="doc-tablewrapper">
             <table class="doc-table">
-				<thead>
-               <tr>
-                  <th>Name</th>
-                  <th>Parameters</th>
-               </tr>
-				</thead>
-				<tbody>
-               <tr>
-                  <td>item</td>
-                  <td>item: Menuitem instance</td>
-               </tr>
-				</tbody>
-			</table>
-      </div>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
 		<h5>Styling</h5>
 		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index 7feae863b..5d8556551 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -119,7 +119,7 @@ import TabPanel from 'primevue/tabpanel';
         Content II
     &lt;/TabPanel&gt;
     &lt;TabPanel header="Header III"&gt;
-       Content III
+        Content III
     &lt;/TabPanel&gt;
 &lt;/TabView&gt;
 
diff --git a/untitled b/untitled
deleted file mode 100644
index bb52b7356..000000000
--- a/untitled
+++ /dev/null
@@ -1,185 +0,0 @@
-// window.HTMLElement.prototype.getBoundingClientRect = function () {};
-
-it('should filtercallback work', async () => {
-        wrapper = mount({
-            components: {
-                DataTable,
-                Column,
-                Button,
-                InputText
-            },
-            template: `
-                <DataTable :value="value" v-model:filters="filters" :globalFilterFields="['code', 'name']" filterDisplay="row">
-                    <template #header>
-                        <div class="flex justify-content-end">
-                            <span class="p-input-icon-left ">
-                                <i class="pi pi-search" />
-                                <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                            </span>
-                        </div>
-                    </template>
-                    <Column field="code" header="Code">
-                        <template #body="{data}">
-                            {{data.code}}
-                        </template>
-                        <template #filter="{filterModel,filterCallback}">
-                            <InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by name - \${filterModel.matchMode}\`"/>
-                        </template>
-                    </Column>
-                    <Column field="name" header="Name">
-                        <template #body="{data}">
-                            {{data.name}}
-                        </template>
-                        <template #filter="{filterModel,filterCallback}">
-                            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="\`Search by name - \${filterModel.matchMode}\`"/>
-                        </template>
-                    </Column>
-                </DataTable>
-            `,
-            data() {
-                return {
-                    value: smallData,
-                    filters: null
-                }
-            },
-            created() {
-                this.initFilters1();
-            },
-            methods: {
-                clearFilter1() {
-                    this.initFilters1();
-                },
-                initFilters1() {
-                    this.filters = {
-                        'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
-                        'code': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
-                        'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
-                    }
-                }
-            }
-        });
-
-        
-
-        const inputs = wrapper.findAll('input.p-column-filter');
-        // const onFilterApply = jest.spyOn(wrapper.vm, 'onFilterApply');
-console.log(inputs[0].html())
-        // inputs[0].element.value = 'z';
-        // await inputs[0].setValue('z');
-        // await inputs[0].trigger('keydown.enter');
-        await inputs[0].trigger('input', { key: 'z' });
-
-        await wrapper.vm.$nextTick();
-
-        // expect(onFilterApply).toHaveBeenCalled();
-        console.log(wrapper.vm.filters.code)
-    });
-
-
-
-
-it('should start drag over the column', async () => {
-        const firstTH = wrapper.findAll('th')[0];
-        const headerContent = wrapper.findAll('.p-column-header-content')[0];
-        console.log(firstTH)
-
-        await wrapper.setProps({ reorderableColumns: true });
-
-        await wrapper.vm.onColumnHeaderDragStart({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, dataTransfer: { setData: () => {}} });
-
-        await wrapper.vm.onColumnHeaderDragOver({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
-
-        await wrapper.vm.onColumnHeaderDragLeave({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
-
-        await wrapper.vm.onColumnHeaderDrop({ target: {firstTH, parentElement: headerContent, nodeName: 'TH'}, preventDefault: () => {}});
-
-        
-
-        console.log(wrapper.componentVM.draggedColumn)
-
-});
-
-it('should have row styling', async () => {
-        await wrapper.setProps({ rowClass: (data) => {console.log(data)}});
-
-        console.log()
-});
-
-
-// describe('DataTable and ContextMenu', () => {
-//     it('should exist', async () => {
-//         const wrapper = mount({
-//             global: {
-//                 mocks: {
-//                     $primevue: {
-//                         config: {
-//                             'ripple': true,
-//                             'inputStyle': 'outlined'
-//                         }
-//                     }
-//                 },
-//                 stubs: ['router-link'],
-//             },
-//             components: {
-//                 DataTable,
-//                 Column,
-//                 ContextMenu
-//             },
-//             template: `
-//                 <DataTable :value="smallData" contextMenu v-model:contextMenuSelection="selectedProduct" @rowContextmenu="onRowContextMenu" responsiveLayout="scroll">
-//                     <Column field="code" header="Code"></Column>
-//                     <Column field="name" header="Name"></Column>
-//                 </DataTable>
-
-//                 <ContextMenu :model="menuModel" ref="cm" />
-//             `,
-//             data() {
-//                 return {
-//                     smallData: [
-//                         {
-//                             "id": "1000",
-//                             "code": "vbb124btr",
-//                             "name": "Game Controller"
-//                         },
-//                         {
-//                             "id": "1001",
-//                             "code": "nvklal433",
-//                             "name": "Black Watch"
-//                         },
-//                         {
-//                             "id": "1002",
-//                             "code": "zz21cz3c1",
-//                             "name": "Blue Band"
-//                         }
-//                     ],
-//                     selectedProduct: null,
-//                     menuModel: [
-//                         {label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct)},
-//                         {label: 'Delete', icon: 'pi pi-fw pi-times', command: () => this.deleteProduct(this.selectedProduct)}
-//                     ]
-//                 }
-//             },
-//             methods: {
-//                 onRowContextMenu(event) {
-//                     this.$refs.cm.show(event.originalEvent);
-//                 },
-//                 viewProduct(product) {
-//                     console.log(product);
-//                 },
-//                 deleteProduct(product) {
-//                     this.products = this.products.filter((p) => p.id !== product.id);
-//                     this.selectedProduct = null;
-//                 },
-//             }
-//         });
-
-//         const firstTD = wrapper.findAll('td')[0];
-
-//         const event = { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {}};
-
-//         wrapper.componentVM.onRowContextMenu({ originalEvent: { pageX: 100, pageY: 120, preventDefault: () => {}, stopPropagation: () => {}} });
-
-//         // console.log(wrapper.html())
-
-//     });
-// });