diff --git a/src/css/app.scss b/src/css/app.scss
index 1c5588b4..54a58040 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -31,6 +31,9 @@ html {
   --positive-fg: 0 0% 100%;
   --positive-bg: var(--teal-7-hsl);
 
+  --warning-fg: 0 0% 100%;
+  --warning-bg: var(--yellow-6-hsl);
+
   --gender-male: var(--blue-5-hsl);
   --gender-female: var(--pink-7-hsl);
   --customer-corp: var(--purple-11-hsl);
@@ -166,6 +169,15 @@ html {
   background-color: hsl(var(--positive-bg));
 }
 
+.app-text-warning {
+  color: hsl(var(--warning-bg));
+}
+
+.app-bg-warning {
+  color: hsl(var(--warning-fg));
+  background-color: hsl(var(--warning-bg));
+}
+
 .app-text-male {
   color: hsl(var(--gender-male));
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 5687f686..ea219696 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -16,6 +16,7 @@ import { dialog } from 'stores/utils';
 import { setLocale } from 'src/utils/datetime';
 import useUtilsStore from 'stores/utils';
 import useMyBranchStore from 'stores/my-branch';
+import { useConfigStore } from 'src/stores/config';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
@@ -38,6 +39,7 @@ const $q = useQuasar();
 const loaderStore = useLoader();
 const utilsStore = useUtilsStore();
 const optionStore = useOptionStore();
+const configStore = useConfigStore();
 
 const { visible } = storeToRefs(loaderStore);
 const { t, locale } = useI18n({ useScope: 'global' });
@@ -144,6 +146,8 @@ watch(
 );
 
 onMounted(async () => {
+  await configStore.getConfig();
+
   await fetchListMyBranch(getUserId() ?? '');
   leftDrawerOpen.value = $q.screen.gt.xs ? true : false;