diff --git a/public/themes/Theme187.css b/public/themes/Theme187.css
index 3dfed03..1814e08 100644
--- a/public/themes/Theme187.css
+++ b/public/themes/Theme187.css
@@ -4,10 +4,10 @@ html {
   color-scheme: light;
 
   /* Primary palette variables */
-  --mat-sys-primary: light-dark(#486363, #afcccc);
+  --mat-sys-primary: light-dark(#607c7c, #afcccc);
   --mat-sys-on-primary: light-dark(#ffffff, #193535);
-  --mat-sys-primary-container: light-dark(#cae8e8, #304b4c);
-  --mat-sys-on-primary-container: light-dark(#022020, #cae8e8);
+  --mat-sys-primary-container: light-dark(#ffffff, #304b4c);
+  --mat-sys-on-primary-container: light-dark(#607c7c, #cae8e8);
   --mat-sys-inverse-primary: light-dark(#afcccc, #486363);
   --mat-sys-primary-fixed: light-dark(#cae8e8, #cae8e8);
   --mat-sys-primary-fixed-dim: light-dark(#afcccc, #afcccc);
@@ -15,10 +15,10 @@ html {
   --mat-sys-on-primary-fixed-variant: light-dark(#304b4c, #304b4c);
 
   /* Secondary palette variables */
-  --mat-sys-secondary: light-dark(#4c6266, #b3cbcf);
+  --mat-sys-secondary: light-dark(#607c7c, #b3cbcf);
   --mat-sys-on-secondary: light-dark(#ffffff, #1d3437);
-  --mat-sys-secondary-container: light-dark(#cee7eb, #344a4e);
-  --mat-sys-on-secondary-container: light-dark(#071f22, #cee7eb);
+  --mat-sys-secondary-container: light-dark(#607c7c, #344a4e);
+  --mat-sys-on-secondary-container: light-dark(#ffffff, #cee7eb);
   --mat-sys-secondary-fixed: light-dark(#cee7eb, #cee7eb);
   --mat-sys-secondary-fixed-dim: light-dark(#b3cbcf, #b3cbcf);
   --mat-sys-on-secondary-fixed: light-dark(#071f22, #071f22);
@@ -53,7 +53,8 @@ html {
   --mat-sys-inverse-on-surface: light-dark(#f1f0f0, #2f3130);
   --mat-sys-outline: light-dark(#727878, #8b9292);
   --mat-sys-outline-variant: light-dark(#c1c8c7, #414848);
-  --mat-sys-neutral10: light-dark(#1a1c1c, #1a1c1c); /* Variable used for the form field native select option text color */
+  --mat-sys-neutral10: light-dark(#1a1c1c, #1a1c1c);
+  /* Variable used for the form field native select option text color */
 
   /* Error palette variables */
   --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
@@ -64,16 +65,22 @@ html {
   /* Neutral variant palette variables */
   --mat-sys-surface-variant: light-dark(#dde4e3, #414848);
   --mat-sys-on-surface-variant: light-dark(#414848, #c1c8c7);
-  --mat-sys-neutral-variant20: light-dark(#2b3232, #2b3232); /* Variable used for the sidenav scrim (container background shadow when opened) */
+  --mat-sys-neutral-variant20: light-dark(#2b3232, #2b3232);
+  /* Variable used for the sidenav scrim (container background shadow when opened) */
 
   /* TYPOGRAPHY SYSTEM VARIABLES */
 
   /* Typography variables. Only used in the different typescale system variables. */
-  --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
-  --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
-  --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
-  --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
-  --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
+  --mat-sys-brand-font-family: Roboto;
+  /* The font-family to use for brand text. */
+  --mat-sys-plain-font-family: Roboto;
+  /* The font-family to use for plain text. */
+  --mat-sys-bold-font-weight: 700;
+  /* The font-weight to use for bold text. */
+  --mat-sys-medium-font-weight: 500;
+  /* The font-weight to use for medium text. */
+  --mat-sys-regular-font-weight: 400;
+  /* The font-weight to use for regular text. */
 
   /* Typescale variables. */
   /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
@@ -233,4 +240,13 @@ html {
   --mat-sys-focus-state-layer-opacity: 0.12;
   --mat-sys-hover-state-layer-opacity: 0.08;
   --mat-sys-pressed-state-layer-opacity: 0.12;
-}
+
+  /* CUSTOM BUTTON COLORS */
+  --custom-button-color: #ffffff;
+  --custom-button-background-color: #627f9a;
+  --custom-hover-color: #384857;
+
+  /* CUSTOM NAV COLORS */
+  --custom-nav-color: #ffffff;
+  --custom-nav-background-color: #607c7c;
+}
\ No newline at end of file
diff --git a/public/themes/Theme188.css b/public/themes/Theme188.css
index 21f9930..31bafbf 100644
--- a/public/themes/Theme188.css
+++ b/public/themes/Theme188.css
@@ -1,13 +1,13 @@
-/* Note: Color palettes are generated from primary: #103454, secondary: #18749c */
+/* Note: Color palettes are generated from primary: #003057, secondary: #18749c */
 html {
   /* COLOR SYSTEM VARIABLES */
   color-scheme: light;
 
   /* Primary palette variables */
-  --mat-sys-primary: light-dark(#416183, #aac9f1);
+  --mat-sys-primary: light-dark(#003057, #aac9f1);
   --mat-sys-on-primary: light-dark(#ffffff, #0d3252);
-  --mat-sys-primary-container: light-dark(#d1e4ff, #29496a);
-  --mat-sys-on-primary-container: light-dark(#001d35, #d1e4ff);
+  --mat-sys-primary-container: light-dark(#ffffff, #29496a);
+  --mat-sys-on-primary-container: light-dark(#003057, #d1e4ff);
   --mat-sys-inverse-primary: light-dark(#aac9f1, #416183);
   --mat-sys-primary-fixed: light-dark(#d1e4ff, #d1e4ff);
   --mat-sys-primary-fixed-dim: light-dark(#aac9f1, #aac9f1);
@@ -15,10 +15,10 @@ html {
   --mat-sys-on-primary-fixed-variant: light-dark(#29496a, #29496a);
 
   /* Secondary palette variables */
-  --mat-sys-secondary: light-dark(#00658b, #84cffc);
+  --mat-sys-secondary: light-dark(#003057, #84cffc);
   --mat-sys-on-secondary: light-dark(#ffffff, #00344a);
-  --mat-sys-secondary-container: light-dark(#c5e7ff, #004c6a);
-  --mat-sys-on-secondary-container: light-dark(#001e2d, #c5e7ff);
+  --mat-sys-secondary-container: light-dark(#003057, #004c6a);
+  --mat-sys-on-secondary-container: light-dark(#ffffff, #c5e7ff);
   --mat-sys-secondary-fixed: light-dark(#c5e7ff, #c5e7ff);
   --mat-sys-secondary-fixed-dim: light-dark(#84cffc, #84cffc);
   --mat-sys-on-secondary-fixed: light-dark(#001e2d, #001e2d);
@@ -53,7 +53,8 @@ html {
   --mat-sys-inverse-on-surface: light-dark(#f1f0f3, #2f3033);
   --mat-sys-outline: light-dark(#73777e, #8d9198);
   --mat-sys-outline-variant: light-dark(#c3c7ce, #43474e);
-  --mat-sys-neutral10: light-dark(#1a1c1e, #1a1c1e); /* Variable used for the form field native select option text color */
+  --mat-sys-neutral10: light-dark(#1a1c1e, #1a1c1e);
+  /* Variable used for the form field native select option text color */
 
   /* Error palette variables */
   --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
@@ -64,16 +65,22 @@ html {
   /* Neutral variant palette variables */
   --mat-sys-surface-variant: light-dark(#dfe2eb, #43474e);
   --mat-sys-on-surface-variant: light-dark(#43474e, #c3c7ce);
-  --mat-sys-neutral-variant20: light-dark(#2c3137, #2c3137); /* Variable used for the sidenav scrim (container background shadow when opened) */
+  --mat-sys-neutral-variant20: light-dark(#2c3137, #2c3137);
+  /* Variable used for the sidenav scrim (container background shadow when opened) */
 
   /* TYPOGRAPHY SYSTEM VARIABLES */
 
   /* Typography variables. Only used in the different typescale system variables. */
-  --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
-  --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
-  --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
-  --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
-  --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
+  --mat-sys-brand-font-family: Roboto;
+  /* The font-family to use for brand text. */
+  --mat-sys-plain-font-family: Roboto;
+  /* The font-family to use for plain text. */
+  --mat-sys-bold-font-weight: 700;
+  /* The font-weight to use for bold text. */
+  --mat-sys-medium-font-weight: 500;
+  /* The font-weight to use for medium text. */
+  --mat-sys-regular-font-weight: 400;
+  /* The font-weight to use for regular text. */
 
   /* Typescale variables. */
   /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
@@ -233,4 +240,13 @@ html {
   --mat-sys-focus-state-layer-opacity: 0.12;
   --mat-sys-hover-state-layer-opacity: 0.08;
   --mat-sys-pressed-state-layer-opacity: 0.12;
-}
+
+  /* CUSTOM BUTTON COLORS */
+  --custom-button-color: #fff;
+  --custom-button-background-color: #FF6A00;
+  --custom-hover-color: #FFAC70;
+
+  /* CUSTOM NAV COLORS */
+  --custom-nav-color: #003057;
+  --custom-nav-background-color: #ffffff;
+}
\ No newline at end of file