diff --git a/src/components/home/MenuItem.vue b/src/components/00_home/MenuItem.vue
similarity index 100%
rename from src/components/home/MenuItem.vue
rename to src/components/00_home/MenuItem.vue
diff --git a/src/components/SelectorList.vue b/src/components/SelectorList.vue
deleted file mode 100644
index 34b6b8d1..00000000
--- a/src/components/SelectorList.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import AppBox from 'components/app/AppBox.vue';
-
-const selector = defineModel('selector');
-
-defineProps<{
-  list: {
-    label: string;
-    count: number;
-  }[];
-  clickable?: boolean;
-}>();
-</script>
-<template>
-  <AppBox bordered>
-    <q-list>
-      <q-item
-        v-for="v in list"
-        :key="v.label"
-        class="rounded"
-        :class="v.count === 0 ? 'disable-item' : ''"
-        :clickable="v.count > 0 || clickable"
-        :active="selector === v.label"
-        :active-class="
-          selector === v.label
-            ? $q.dark.isActive
-              ? 'active dark'
-              : 'active'
-            : ''
-        "
-        @click="selector = v.label"
-      >
-        <div class="row full-width items-center justify-between">
-          <div>
-            {{ $t(v.label) }}
-          </div>
-          <div class="dot text-weight-bold">{{ v.count }}</div>
-        </div>
-      </q-item>
-    </q-list>
-  </AppBox>
-</template>
-
-<style scoped>
-.active {
-  color: hsl(var(--info-fg)) !important;
-  background-color: hsl(var(--info-bg));
-
-  .dot {
-    background-color: hsla(var(--info-bg));
-    border: 1px solid hsl(var(--info-bg));
-    color: white;
-  }
-
-  &.dark {
-    background-color: transparent;
-    border: 1px solid hsl(var(--info-bg));
-  }
-}
-
-.q-item {
-  align-items: center;
-  border: 1px solid transparent;
-  min-height: 0;
-  padding: 0 16px;
-  margin-bottom: 4px;
-}
-
-.disable-item {
-  color: hsl(var(--text-mute));
-
-  .dot {
-    color: hsl(var(--text-mute));
-    border: 1px solid transparent;
-    background-color: hsla(var(--text-mute) / 0.1);
-  }
-}
-
-.dot {
-  height: 19px;
-  width: 19px;
-  margin-block: 3px;
-  background-color: hsla(var(--info-bg) / 0.1);
-  border: 1px solid transparent;
-  color: hsl(var(--info-bg));
-  border-radius: 50%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 00000000..b93168d0
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,22 @@
+export { default as AddButton } from './AddButton.vue';
+export { default as AllAroundBtn } from './AllAroundBtn.vue';
+export { default as ButtonAddCompoent } from './ButtonAddCompoent.vue';
+export { default as CanvasComponent } from './CanvasComponent.vue';
+export { default as DialogForm } from './DialogForm.vue';
+export { default as DrawerComponent } from './DrawerComponent.vue';
+export { default as DrawerInfo } from './DrawerInfo.vue';
+export { default as FormDialog } from './FormDialog.vue';
+export { default as GlobalDialog } from './GlobalDialog.vue';
+export { default as GlobalLoading } from './GlobalLoading.vue';
+export { default as ImageUploadDialog } from './ImageUploadDialog.vue';
+export { default as ItemCard } from './ItemCard.vue';
+export { default as NoData } from './NoData.vue';
+export { default as PaginationComponent } from './PaginationComponent.vue';
+export { default as ProfileBanner } from './ProfileBanner.vue';
+export { default as ProfileUpload } from './ProfileUpload.vue';
+export { default as SideMenu } from './SideMenu.vue';
+export { default as StatCardComponent } from './StatCardComponent.vue';
+export { default as TabComponent } from './TabComponent.vue';
+export { default as TooltipComponent } from './TooltipComponent.vue';
+export { default as TreeCompoent } from './TreeCompoent.vue';
+export { default as UsersDetailCardComponent } from './UsersDetailCardComponent.vue';
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 73eb034e..ef90485b 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -7,11 +7,9 @@ import { Icon } from '@iconify/vue';
 import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
-import DrawerComponent from 'components/DrawerComponent.vue';
-import CanvasComponent from 'components/CanvasComponent.vue';
-import ProfileMenu from 'components/ProfileMenu.vue';
+import ProfileMenu from './ProfileMenu.vue';
 import useUserStore from 'src/stores/user';
-import FormDialog from 'components/FormDialog.vue';
+import { DrawerComponent, CanvasComponent, FormDialog } from 'components/index';
 import useOptionStore from 'src/stores/options';
 import { dialog } from 'src/stores/utils';
 import { setLocale } from 'src/utils/datetime';
diff --git a/src/components/ProfileMenu.vue b/src/layouts/ProfileMenu.vue
similarity index 100%
rename from src/components/ProfileMenu.vue
rename to src/layouts/ProfileMenu.vue
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 1a34c250..da9d435f 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import MenuItem from 'components/home/MenuItem.vue';
+import MenuItem from 'components/00_home/MenuItem.vue';
 import useUtilsStore from 'src/stores/utils';
 import { onMounted } from 'vue';