diff --git a/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue b/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue
index e06ff73..fd41a7e 100644
--- a/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue
+++ b/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
 import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
+import { enumPageComponentStaticChild } from "@/definitions/enum";
 
 const props = defineProps<{
     records?: any[]
@@ -14,7 +15,7 @@ const setGlobalState = (id: any) => {
 </script>
 
 <template>
-    <div class="navigation-container d-flex gap-4 justify-content-center align-items-center">
+    <div class="navigation-container flex gap-4 justify-center items-center">
         <div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
             <template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
                 <div class="navigation-submenu">
diff --git a/components/dynamic-page/page-component/templates/navigations/tops/Default.vue b/components/dynamic-page/page-component/templates/navigations/tops/Default.vue
index 67a95a6..423395f 100644
--- a/components/dynamic-page/page-component/templates/navigations/tops/Default.vue
+++ b/components/dynamic-page/page-component/templates/navigations/tops/Default.vue
@@ -14,7 +14,7 @@ const SETTING_OPTIONS = {
 
 <template>
   <nav>
-    <div class="d-flex gap-3 justify-content-end align-items-center">
+    <div class="flex gap-3 justify-end items-center">
       <RecusiveNavItem :records="content && buildTree(content)" :component="_props.component" />
     </div>
   </nav>