diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..279e4eb
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,10 @@
+NUXT_PUBLIC_BASE_API=https://api.vpress.vn/api-v1
+NUXT_PUBLIC_SITE_DEFAULT=1
+PUBLIC_BASE_SERVER_RESOURCE=https://acp-api.vpress.vn
+PUBLIC_PAGING_PAGE=1
+PUBLIC_PAGING_LIMIT=10
+AUTH_SECRET=vpress
+GOOGLE_CLIENT_ID=410090780886-odisqirb9ghresjoop8rg3ad0fn8jl0s.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=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
+FACEBOOK_CLIENT_ID=280456401372340
+FACEBOOK_CLIENT_SECRET=86d6272c3a03d25442ecd7ccbf0c204c
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..77425a6
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,7 @@
+NUXT_PUBLIC_BASE_API=https://api.vpress.vn/api-v1
+NUXT_PUBLIC_SITE_DEFAULT=1
+PUBLIC_BASE_SERVER_RESOURCE=https://api.vpress.vn
+PUBLIC_PAGING_PAGE=1
+PUBLIC_PAGING_LIMIT=10
+AUTH_SECRET=vpress
+AUTH_ORIGIN=https://vpress.vn
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b827f3e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+package-lock.json
+yarn.lock
+bun.lockb
+
+.env
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..cf04042
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/README.md b/README.md
index 2826b2e..595dda9 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,63 @@
-# NSG_PORTAL_V2
+# Nuxt 3 Minimal Starter
 
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/app.vue b/app.vue
new file mode 100644
index 0000000..2fab925
--- /dev/null
+++ b/app.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const props = defineProps({
+  error: Object,
+});
+
+const resolveError = async (error: any) => {
+  await clearError({ redirect: "/" });
+  error.value = null;
+};
+
+useHead({
+  bodyAttrs: {
+    class: "!overflow-x-hidden max-w-screen min-h-screen w-full h-full"
+  }
+})
+</script>
+
+<template>
+  <!-- <a-config-provider
+    :theme="{
+      token: {
+        colorPrimary: '#3c7abc',
+      },
+    }"
+  >
+  <div>
+    <NuxtLayout>
+      <NuxtLoadingIndicator />
+      <ErrorBoundary>
+        
+
+        <template #error="{ error }">
+          <div class="text-center my-8">
+            <h2 class="mb-2">404</h2>
+            <p class="mb-3">Trang không tồn tại.</p>
+            <p v-if="utils.isDev()">{{ error }}</p>
+            <button @click="resolveError(error)" type="button" class=" p-2 border focus:outline-none border-blue text-blue-7 hover:(bg-blue text-white) rounded-lg transition-colors">Về
+              trang chủ</button>
+          </div>
+        </template>
+      </ErrorBoundary>
+      <ScrollToTop />
+    </NuxtLayout>
+  </div>
+  </a-config-provider> -->
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
\ No newline at end of file
diff --git a/assets/styles/app.sass b/assets/styles/app.sass
new file mode 100644
index 0000000..5b6616a
--- /dev/null
+++ b/assets/styles/app.sass
@@ -0,0 +1,12 @@
+@import custom.css
+body
+    font-family: 'Nunito', sans-serif
+
+video
+    max-width: 100% !important
+    width: unset !important
+    height: unset !important
+
+iframe
+    width: 100% !important
+    
\ No newline at end of file
diff --git a/assets/styles/custom.css b/assets/styles/custom.css
new file mode 100644
index 0000000..ae0f44b
--- /dev/null
+++ b/assets/styles/custom.css
@@ -0,0 +1,287 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+
+.custom_scrollbar {
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-width: 100%;
+  margin: 5px 0px;
+  scrollbar-color: #f5f5f5 transparent;
+  scrollbar-width: thin;
+}
+
+.custom_scrollbar::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.custom_scrollbar::-webkit-scrollbar-thumb {
+  background: #cdcccc;
+  border-radius: 4px;
+}
+.custom_scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* tiny */
+
+figure.image {
+  display: table;
+  margin-left: 0;
+}
+
+figure.image img {
+  margin-left: 0;
+  margin: 0;
+}
+img.wide {
+  display: block;
+  height: auto;
+  margin-left: 0;
+  max-width: 70%;
+  width: 70%;
+  transform: translateX(20%);
+}
+
+figure.image.wide {
+  display: block;
+  height: auto;
+  max-width: auto;
+  width: auto;
+}
+
+img.full-width {
+  max-width: 100%;
+  width: 100%;
+}
+
+figure.image.full-width {
+  display: block;
+  max-width: 100%;
+  width: 100%;
+}
+
+figure.image img,
+figure.image.aside img,
+figure.image.wide img,
+figure.image.full-width img {
+  /* height: 100%; */
+  /* max-width: 100%; */
+  width: 100%;
+}
+figure figcaption {
+  color: #8a8f97;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid #ccc;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+  quotes: "\201C""\201D""\2018""\2019";
+}
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size: 3em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+blockquote:after {
+  color: #ccc;
+  content: close-quote;
+  font-size: 3em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+  margin-left: 0.25em;
+}
+
+/* menu link */
+.menu-link{
+  color: #757575;
+
+  &:hover{
+    @apply text-blue;
+  }
+
+  &.active{
+    @apply text-blue;
+  }
+}
+articlerelation img.relationImg{
+  height: 100px !important;
+  width: 200px !important;
+  object-fit: cover;
+  border-radius: 7px;
+}
+ articlerelation{
+  margin-bottom: 12px;
+    display: inline-block;
+    cursor: pointer;
+}
+span.box{
+  margin-top: 12px;
+  margin-bottom: 12px;
+  display: inline-block;
+}
+articlerelation >*{
+    pointer-events: none;
+}
+articlerelation:hover .relationText{
+  color: #3c7abc;
+  }
+span.boxRelation{
+  display: flex ;
+    gap: 12px ;
+
+}
+span.boxRelation .relationBoxText{
+  display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+span.boxRelation .relationText{
+  font-size: 18px;
+    font-weight: 600;
+}
+span.boxRelation .relationDay{
+  font-size: 14px;
+}
+figcaption.PhotoCMS_Caption p{
+  display: inline-block;
+}
+@media only screen and (min-width: 600px){
+  .width_common.box-widget-thethao-2{
+    display: block !important;
+  }
+}
+.width_common.box-widget-thethao-2{
+  border: 1px solid #e5e5e5;
+    position: relative;
+    border-radius: 20px 20px 0 0;
+    border-bottom: 0;
+    margin-bottom: 44px;
+    box-shadow: 0px 2px 2px rgba(185,192,210,0.2);
+    display: none;
+}
+.box-widget-thethao-2 .logo-left img{
+  position: absolute;
+    opacity: 7%;
+    width: 35%;
+    left: -38px;
+    top: 22%;
+
+}
+.box-widget-thethao-2 .logo-right img{
+  position: absolute;
+    opacity: 12%;
+    right: -23px;
+    top: 22%;
+    z-index: 1;
+}
+.box-widget-thethao-2 .header-tt{
+  padding: 12px 26px;
+  border-radius: 10px 10px 0 0;
+  background: black;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+}
+.box-widget-thethao-2 .header-tt .txt-note{
+  font-weight: 800;
+}
+a.width_common.team-kq{
+  display: flex;
+  align-items: center;
+  background: white;
+  z-index: 10;
+  justify-content: space-between;
+  padding: 0 20px;
+  margin-top: 20px;
+}
+a.width_common.team-kq .team-pl{
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+span.name-team{
+  font-weight: 700;
+}
+.flag-team{
+  width: 48px;
+}
+.res-m{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 12px 53px;
+  border-radius: 9px;
+  background: #3E506D;
+  font-size: 35px;
+  font-weight: 900;
+  color: white;
+}
+.res-m .sub-res{
+  font-size: 14px;
+  font-weight: 400;
+}
+.team-pl.team-away{
+  font-weight: 700;
+}
+.dienbien{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px 20px;
+  flex: 1;
+  border-bottom: 1px solid #e5e5e5;
+}
+.dienbien .left .row{
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-direction: row-reverse;
+}
+.dienbien .right .row{
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  justify-content: flex-end;
+  flex-direction: row-reverse;
+
+}
+.dienbien .right .row .flag-team{
+  width: fit-content;
+}
+.note-bot{
+  margin-top: 10px;
+  position: absolute;
+}
+.bg-gradient-radial {
+  background-image: radial-gradient(97.99% 97.99% at 84.51% 2.01%, red 0%, #eaa23e 99.5%) !important;
+}
+.glide__bullet.glide__bullet--active{
+  background: red ;
+}
+@media only screen and (min-width: 768px) {
+  /* For desktop: */
+  .block-right {
+    float: right;
+    width: 50%;
+  }
+  .block-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+  }
+  .block-left {
+    float: left;
+    width: 50%;
+  }
+}
diff --git a/assets/svg/logo.svg b/assets/svg/logo.svg
new file mode 100644
index 0000000..e94172c
--- /dev/null
+++ b/assets/svg/logo.svg
@@ -0,0 +1,77 @@
+<svg `viewBox="0 0 693 315" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect width="693" height="315" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0586 26.0907H76.5475L89.0139 54.0907H25.525L13.0586 26.0907Z" fill="#262626"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M25.525 54.0907L13.0586 26.0907H76.5475L89.0139 54.0907L139.685 167.901L107.941 239.2L25.525 54.0907Z" fill="#262626"/>
+    <path d="M245 77H289.5C304.136 77 316 88.8645 316 103.5C316 118.136 304.136 130 289.5 130H245V77Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M245 77H244.036H243.66L243.214 78H245V77Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M294.88 99.6374L244.036 77H243.66L243.214 78L183.966 211.074L235.124 233.852L294.88 99.6374Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M202.823 26.0907H266.312L253.846 54.0907H190.357L194 45.9081L202.823 26.0907Z" fill="#EC3E36"/>
+    <path d="M107.941 239.2L139.685 310.499L171.43 239.2L139.685 167.901L107.941 239.2Z" fill="#EC3E36"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M202.823 26.0907L194 45.9081V179.091H303.5C345.75 179.091 380 144.841 380 102.591C380 60.3409 345.75 26.0907 303.5 26.0907L202.823 26.0907Z" fill="#EC3E36"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M171.43 239.2L139.685 167.901L190.357 54.0907L194 45.9081L202.823 26.0907H266.312L253.846 54.0907L171.43 239.2Z" fill="#EC3E36"/>
+    <path d="M245 77H289.5C304.136 77 316 88.8645 316 103.5V103.5C316 118.136 304.136 130 289.5 130H245V77Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M245 77H244.036H243.66L243.214 78H245V77Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M294.88 99.6374L244.036 77H243.66L243.214 78L183.966 211.074L235.124 233.852L294.88 99.6374Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M202.823 26.0907H266.312L253.846 54.0907H190.357L194 45.9081L202.823 26.0907Z" fill="#EC3E36"/>
+    <path d="M107.941 239.2L139.685 310.499L171.43 239.2L139.685 167.901L107.941 239.2Z" fill="#EC3E36"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M202.823 26.0907L194 45.9081V179.091H303.5C345.75 179.091 380 144.841 380 102.591C380 60.3409 345.75 26.0907 303.5 26.0907L202.823 26.0907Z" fill="#EC3E36"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M171.43 239.2L139.685 167.901L190.357 54.0907L194 45.9081L202.823 26.0907H266.312L253.846 54.0907L171.43 239.2Z" fill="#EC3E36"/>
+    <path d="M245.034 77.1399H289.534C304.17 77.1399 316.034 89.0043 316.034 103.64V103.64C316.034 118.275 304.17 130.14 289.534 130.14H245.034V77.1399Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M245.034 77.1398H244.07H243.694L243.249 78.1398H245.034V77.1398Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M294.915 99.7773L244.07 77.1398H243.694L243.249 78.1398L184 211.214L235.159 233.992L294.915 99.7773Z" fill="white"/>
+    <path d="M205 209.322L225.941 209.322L244.5 281.094L226.778 281.127L205 209.322Z" fill="#1A1A1A"/>
+    <path d="M269.491 208.806L248.379 208.829L232 281.092L249.646 281.116L269.491 208.806Z" fill="#1A1A1A"/>
+    <path d="M327 209.195H345V281.195H327V209.195Z" fill="#1A1A1A"/>
+    <rect x="358" y="208.431" width="21" height="73" fill="#1A1A1A"/>
+    <path d="M376 208.431H387.5C401.031 208.431 412 219.4 412 232.931V232.931C412 246.462 401.031 257.431 387.5 257.431H376V208.431Z" fill="#1A1A1A"/>
+    <path d="M379 225.431H385.5C389.642 225.431 393 228.789 393 232.931V232.931C393 237.073 389.642 240.431 385.5 240.431H379V225.431Z" fill="white"/>
+    <rect x="425" y="208.431" width="19" height="73" fill="#1A1A1A"/>
+    <path d="M443 208.431H459.5C473.031 208.431 484 219.4 484 232.931V232.931C484 246.462 473.031 257.431 459.5 257.431H443V208.431Z" fill="#1A1A1A"/>
+    <path d="M444 225.431H456.5C460.642 225.431 464 228.789 464 232.931V232.931C464 237.073 460.642 240.431 456.5 240.431H444V225.431Z" fill="white"/>
+    <path d="M450.564 251.949L468.306 242.001L484.868 281.225L462.462 281.225L450.564 251.949Z" fill="#1A1A1A"/>
+    <rect x="497" y="208.431" width="20" height="73" fill="#1A1A1A"/>
+    <rect x="507" y="208.431" width="46" height="19" fill="#1A1A1A"/>
+    <rect x="512" y="263.431" width="41" height="18" fill="#1A1A1A"/>
+    <rect x="514" y="237.431" width="29" height="16" fill="#1A1A1A"/>
+    <rect x="571" y="266.437" width="40" height="14" rx="7" fill="#0B5398"/>
+    <path d="M566 263.437H604V281.437H566V263.437Z" fill="#1A1A1A"/>
+    <ellipse cx="603.5" cy="259.437" rx="19.5" ry="22" fill="#1A1A1A"/>
+    <rect x="580" y="225.437" width="25" height="12" rx="6" fill="#F5F5F5"/>
+    <rect x="570" y="252.437" width="34" height="11" rx="5.5" fill="white"/>
+    <rect x="589" y="238.437" width="20" height="13" rx="6.5" fill="#0B5398"/>
+    <path d="M618.611 226.028L585.748 226.009L585.757 208.431L618.62 208.45L618.611 226.028Z" fill="#1A1A1A"/>
+    <ellipse cx="19.3494" cy="22.0044" rx="19.3494" ry="22.0044" transform="matrix(-1 -0.000571404 0.000499233 -1 605.053 252.474)" fill="#1A1A1A"/>
+    <path d="M610.184 237.45L590.914 237.439C587.759 237.437 585.202 234.878 585.204 231.723V231.723C585.205 228.568 587.764 226.011 590.92 226.013L610.189 226.024L610.184 237.45Z" fill="white"/>
+    <rect width="22.315" height="13.9922" rx="6.99612" transform="matrix(-1 -0.000571404 0.000499233 -1 609.698 252.372)" fill="#1A1A1A"/>
+    <rect x="641" y="266.437" width="40" height="14" rx="7" fill="#0B5398"/>
+    <path d="M636 263.437H674V281.437H636V263.437Z" fill="#1A1A1A"/>
+    <ellipse cx="673.5" cy="259.437" rx="19.5" ry="22" fill="#1A1A1A"/>
+    <rect x="650" y="225.437" width="25" height="12" rx="6" fill="#F5F5F5"/>
+    <rect x="640" y="252.437" width="34" height="11" rx="5.5" fill="white"/>
+    <rect x="659" y="238.437" width="20" height="13" rx="6.5" fill="#0B5398"/>
+    <path d="M688.611 226.028L655.748 226.009L655.757 208.431L688.62 208.45L688.611 226.028Z" fill="#1A1A1A"/>
+    <ellipse cx="19.3494" cy="22.0044" rx="19.3494" ry="22.0044" transform="matrix(-1 -0.000571404 0.000499233 -1 675.053 252.474)" fill="#1A1A1A"/>
+    <path d="M680.184 237.45L660.914 237.439C657.759 237.437 655.202 234.878 655.204 231.723V231.723C655.205 228.568 657.764 226.011 660.92 226.013L680.189 226.024L680.184 237.45Z" fill="white"/>
+    <rect width="22.315" height="13.9922" rx="6.99612" transform="matrix(-1 -0.000571404 0.000499233 -1 679.698 252.372)" fill="#1A1A1A"/>
+    <path d="M282 209.195H299.152H300V281.195H282V209.195Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M327 280.195H326V280.946L326.179 281.195H327V280.195Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M299.152 209.195L284.621 223.419L326 280.946L326.179 281.195L326.182 281.2L341.494 266.211L301 209.915L300.483 209.195H300H299.152Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M299.152 209.195H299V210.195H301V209.915L300.483 209.195H299.152Z" fill="#1A1A1A"/>
+    <rect x="299.737" y="208.182" width="3.7116" height="3.43404" transform="rotate(-36 299.737 208.182)" fill="white"/>
+    <rect x="302" y="207.431" width="25" height="3" fill="white"/>
+    <rect x="282" y="280.431" width="18" height="1" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M345 280.431H326V280.948L326.351 281.431H326.663H345V280.431Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M326.611 280.233L325.871 280.77L326 280.948L326.351 281.431H326.663L327.198 281.042L326.611 280.233Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M227.195 279.423L226.345 279.683L226.574 280.431L226.88 281.431H227.469L227.78 281.336L227.195 279.423Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M226.574 280.431H249.833L249.56 281.431H248.181H227.469H226.88L226.574 280.431Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M250.01 279.783L248.727 279.433L248.181 281.431H249.56L249.833 280.431L250.01 279.783Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M206.271 210.241L205.717 208.431H204.729L205.034 209.431L205.367 210.518L206.271 210.241Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M224.233 208.431L224.653 209.955L226.004 209.583L225.962 209.431L225.686 208.431H224.233Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M249.055 211.213L249.697 208.431H248.481L248.25 209.431L247.9 210.946L249.055 211.213Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M268.585 208.431L268 210.344L268.956 210.636L269.325 209.431L269.63 208.431H268.585Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M249.697 208.431H248.481L248.25 209.431H269.325L269.63 208.431H268.585H249.697ZM224.233 208.431H225.686L225.962 209.431H205.034L204.729 208.431H205.717H224.233Z" fill="#1A1A1A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M282 208.431H299.922L300.648 209.431H282V208.431Z" fill="#1A1A1A"/>
+    <path d="M301 209.431V208.431H299.922L300.648 209.431H301Z" fill="white"/>
+    <rect x="327" y="208.431" width="18" height="1" fill="#1A1A1A"/>
+</svg>
diff --git a/components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue b/components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue
new file mode 100644
index 0000000..95f5573
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/articles/collections/BasicCollection.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from '@/utils/parseSQL';
+import { isEmpty } from "lodash";
+
+const _props = defineProps<{
+  dataResult?: any[];
+  dataQuery?: string;
+  layout?: string;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 5,
+  TEMPLATE: "Article",
+  LAYOUT: "LAYOUT:vertical"
+};
+
+const LAYOUT_PARSE = computed(() => {
+  const parseLayout = _props.layout?.split("-")?.map((_layout: any) => {
+    const parseItem = _layout.split(":");
+    return {
+      [parseItem[0]]: parseItem[1],
+    };
+  });
+  return Object.assign({}, ...parseLayout);
+}); 
+
+const _dataResult = computed(() => {
+  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, 'ARRAY');
+  result && result.length > 0 && _components.map((_ : any, index : any) => {
+    _components[index] = result[index] || null;
+  })
+  return _components;
+});
+</script>
+
+<template>
+  <div>
+    <div class="collection-container p-2" :class="LAYOUT_PARSE['LAYOUT'] || 'horizontal'">
+      <div v-for="(component, index) in _dataResult" :key="index">
+        <template v-if="!isEmpty(component)">
+          <DynamicComponent
+            :settings="{
+              template: LAYOUT_PARSE.TYPE || SETTING_OPTIONS.TEMPLATE,
+              layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
+              dataResult: { ...component },
+            }"
+            @drop-data="dropData"
+          />
+        </template>
+        <template v-else>
+          <DynamicComponent
+            :settings="{
+              template: LAYOUT_PARSE.TYPE || SETTING_OPTIONS.TEMPLATE,
+              layout: `LAYOUT:${LAYOUT_PARSE.DATA.toLowerCase()}` || SETTING_OPTIONS.LAYOUT,
+            }"
+            @drop-data="dropData"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.collection-container {
+  display: grid;
+  gap: 10px;
+  &.vertical {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  &.horizontal {
+    grid-template-rows: auto;
+    grid-auto-flow: column;
+  }
+  .empty {
+    min-height: 100px;
+    border-radius: 6px;
+    background: #409eff;
+  }
+  &.noData {
+    border-radius: 6px;
+  }
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/articles/individuals/Card.vue b/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
new file mode 100644
index 0000000..7343cb2
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/articles/individuals/Card.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP, getInputValue } from '@/utils/parseSQL';
+
+const props = defineProps<{
+    dataResult?: any
+    dataType?: any
+    dataQuery?: any
+    layout?: string
+}>()
+
+const LAYOUT_PARSE = computed(() => {
+    const parseLayout = props.layout?.split('-')?.map((_layout : any) => {
+        const parseItem = _layout.split(':')
+        return {
+            [parseItem[0]]: parseItem[0] === 'HIDE' ? parseItem[1].split(',') : parseItem[1],
+        };
+    }) || [];
+    return Object.assign({}, ...parseLayout);
+})
+
+const emit = defineEmits(['selectComponent', 'dropData']);
+
+const selectComponent = () => {
+    emit('selectComponent');
+}
+
+const parseData = computed(() => {
+    if(!props.dataResult) return 
+    const result = getInputValue(props.dataResult, 'OBJECT');
+    return result
+}) 
+
+const drop = (e: any) => {
+    if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
+        const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
+        const { dataType, dataResult } = JSON.parse(data);
+        const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
+        emit('dropData', { 
+            dataType,
+            dataResult, 
+            dataQuery: dataQuery,
+        });
+    }
+}
+</script>
+
+<template>
+    <article class="basic-article" :class="[LAYOUT_PARSE['LAYOUT'] || 'horizontal', !parseData && 'no-data', LAYOUT_PARSE['REVERSE'] ? 'reverse' : '']" @click="selectComponent" @dragover.prevent @drop.stop.prevent="drop">
+        <div v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('thumbnail')" class="basic-article_thumbnail">
+            <template v-if="parseData">
+                <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+            </template>
+            <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px;"></span>
+        </div>
+        <div class="basic-article_content" :class="[!parseData && 'no-data']">
+            <div>
+                <h3 v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 text-truncate-two-lines">
+                    <template v-if="parseData">
+                        {{ parseData.title?.replace(/<[^>]+>/g, '') }}
+                    </template>
+                    <span v-else class="empty-block" style="height: 8px;"></span>
+                </h3>
+                <p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 text-truncate-two-lines">
+                    <template v-if="parseData">
+                        {{ parseData.intro?.replace(/<[^>]+>/g, '') }}
+                    </template>
+                    <span v-else class="empty-block" style="height: 5px;"></span>
+                </p>
+            </div>
+        </div>
+    </article>
+</template>
+
+<style lang="scss" scoped>
+.basic-article {
+    display: grid;
+    gap: 10px;
+    height: 100%;
+
+    &.no-data {
+        gap: 5px !important;
+    }
+
+    &.vertical {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    &.horizontal {
+        grid-template-columns: 1fr 1fr;
+
+        &.reverse {
+            .basic-article_thumbnail {
+                grid-column: 2;
+            }
+
+            .basic-article_content {
+                grid-row: 1;
+            }
+        }
+    }
+
+    &_thumbnail {
+        flex: 1;
+
+        img {
+            width: 100%;
+            border-radius: 6px;
+            aspect-ratio: 16/10;
+        }
+    }
+
+    &_content {
+        padding: 10px 0px;
+
+        &.no-data {
+            padding: 0px;
+        }
+
+        h3 {
+            font-size: 15px;
+        }
+
+        p {
+            font-size: 12px;
+            margin-top: 10px;
+        }
+    }
+
+    .empty-block {
+        background-color: #409eff;
+        height: 100px;
+        display: block;
+    }
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/categories/BasicCategories.vue b/components/dynamic-page/page-component/templates/categories/BasicCategories.vue
new file mode 100644
index 0000000..4e75be2
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/categories/BasicCategories.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { isEmpty } from "lodash";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from '@/utils/parseSQL';
+
+const emit = defineEmits(["dropData", "selectComponent"]);
+
+const _props = defineProps<{
+  dataResult?: any[];
+  dataQuery?: string;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 5,
+};
+
+const _dataResult = computed(() => {
+  let _components = Array(SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, 'ARRAY');
+  result && result.length > 0 && _components.map((_ : any, index : any) => {
+    _components[index] = result[index] || null;
+  })
+  return _components;
+});
+
+async function dropData(event: any) {
+  const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
+  const checkDataResult = getInputValue(_props.dataResult, 'ARRAY');
+  const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{...dataResult}];
+  const getDataQuery = _props.dataQuery ? 
+    COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) 
+    : COLLECTION_QUERY_DROP(dataType, dataResult.id);
+
+  emit("dropData", {
+    dataResult: result,
+    dataType,
+    dataQuery: getDataQuery,
+  });
+}
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+</script>
+
+<template>
+  <div>
+    <div class="categories-container p-2" @click="selectComponent">
+      <div
+        v-for="(component, index) in _dataResult"
+        :key="index"
+        :class="isEmpty(component) ? 'empty' : 'category'"
+      >
+        <template v-if="!isEmpty(component)">
+            <h3>{{ component.title }}</h3>
+          </template>
+        <div    
+          v-else     
+          @dragover.prevent
+          @drop.stop.prevent="dropData($event)"
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.categories-container {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+  .category {
+    height: 100%;
+    h3 {
+      font-weight: 500;
+      font-size: 14px;
+      margin: 0px !important;
+    }
+    &:first-child {
+      h3 {
+        font-weight: 600;
+        font-size: 17px;
+      }
+    }
+  }
+  .empty {
+    border-radius: 6px;
+    background: #409eff;
+    width: 50px;
+    > div {
+      min-height: 20px;
+    }
+  }
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/components/AudioPlayer.vue b/components/dynamic-page/page-component/templates/components/AudioPlayer.vue
new file mode 100644
index 0000000..f7d7f30
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/components/AudioPlayer.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+const props = defineProps<{}>();
+
+</script>
+
+<template>
+  <div class="player">
+    <div class="player__track">
+        <input class="player__track-range" type="range" disabled />
+        <div class="player__time">
+            <span class="player__time-current">00:00</span>
+            <span class="player__time-duration">00:00</span>
+        </div>
+    </div>
+    <div class="player__controls">
+        <div class="player__speed">
+            <button class="player__speed-button">
+                <span class="player__speed-label">Tốc độ phát</span>
+                <span class="player__speed-value">1.0x</span>
+            </button>
+        </div>
+        <div class="player__actions">
+            <button class="player__actions-button player__actions-button--replay">
+                <Icon name="ri:replay-5-fill" class="player__icon player__icon--replay" />
+            </button>
+            <button class="player__actions-button player__actions-button--pause">
+                <Icon name="ri:play-circle-fill" class="player__icon player__icon--pause" />
+            </button>
+            <button class="player__actions-button player__actions-button--forward">
+                <Icon name="ri:forward-5-line" class="player__icon player__icon--forward" />
+            </button>
+        </div>
+        <div class="player__volume">
+            <button class="player__volume-button">
+                <div class="player__volume-control">
+                    <Icon name="ri:volume-up-fill" class="player__icon player__icon--volume" />
+                    <input class="player__volume-range" type="range" disabled />
+                </div>
+            </button>
+        </div>
+    </div>
+</div>
+
+</template>
+<style lang="scss" scoped>
+.player {
+  &__track {
+    width: 100%;
+  }
+
+  &__track-range {
+    width: 100%;
+    height: 5px;
+    accent-color: #fff;
+    cursor: pointer;
+  }
+
+  &__time {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 1rem;
+
+    &-current,
+    &-duration {
+      font-size: 10px;
+      font-family: 'Raleway', sans-serif;
+      font-weight: normal;
+      color: #fff;
+    }
+  }
+
+  &__controls {
+    width: 100%;
+    padding: 0 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & > div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  &__speed {
+    &-button {
+      color: #fff;
+      background-color: transparent;
+      font-size: 0.75rem;
+      display: flex;
+      gap: 0.25rem;
+
+      &-value {
+        font-weight: bold;
+        font-size: 0.75rem;
+      }
+    }
+  }
+
+  &__actions {
+    &-button {
+      background-color: transparent;
+      padding: 0.5rem;
+      border-radius: 100%;
+      color: white;
+      width: fit-content;
+      height: fit-content;
+      &--replay:hover,
+      &--forward:hover {
+        background-color: #d6d3d1;
+      }
+    }
+  }
+  &__icon {
+      &--replay,
+      &--forward,
+      &--pause {
+        font-size: 20px;
+      }
+
+      &--pause {
+        font-size: 44px;
+      }
+    }
+  &__volume {
+    display: flex;
+    align-items: center;
+
+    &-button {
+      background-color: transparent;
+      color: white;
+    }
+
+    &-control {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      & .player__icon--volume {
+        font-size: 1.125rem;
+      }
+
+      & .player__volume-range {
+        accent-color: #fff;
+        width: 3rem;
+        height: 5px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+button{
+  border: 0;
+}
+
+</style>
diff --git a/components/dynamic-page/page-component/templates/components/Podcast.vue b/components/dynamic-page/page-component/templates/components/Podcast.vue
new file mode 100644
index 0000000..69a14c8
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/components/Podcast.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import AudioPlayer from './AudioPlayer.vue'
+</script>
+<template>
+  <div class="banner">
+    <div class="banner__background" style="background-image: url('https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg')">
+      <div class="banner__overlay"></div>
+      <Wrap class="banner__content">
+        <div class="banner__inner">
+          <div class="article">
+            <div class="article__image-container">
+              <div class="article__image-wrapper" style="background-image: url('https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg')">
+                <img src="https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg" alt="" class="article__image" />
+              </div>
+            </div>
+            <div class="article__content">
+              <div class="article__header">
+                <div class="article__header-text">
+                  <h1 class="article__title">Podcast Truyện ngắn: Như cơi đựng trầu</h1>
+                  <time class="article__date">T2, 29 Th01 2024 16:57</time>
+                </div>
+              </div>
+              <div class="article__intro">
+                <div class="article__intro-text">Tình cảm vợ chồng êm ấm 12 năm, tối nay được định đoạt bằng tờ giấy vô hồn, vốn là người dễ xúc động nên trong lúc viết, Ngân Thương để mấy giọt nước mắt rơi xuống làm đôi chỗ bị nhòe đi.</div>
+              </div>
+              <div class="article__audio">
+                <AudioPlayer />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Wrap>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.banner {
+  &__background {
+    width: 100%;
+    height: 60px;
+    background-size: cover;
+    @media (min-width: 768px) {
+      height: 25rem;
+    }
+
+    position: relative;
+    background-position: center;
+  }
+
+  &__overlay {
+    position: absolute;
+    inset: 0;
+    background-color: black;
+    opacity: 0.8;
+    z-index: 1;
+  }
+
+  &__content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__inner {
+    width: 100%;
+    height: 40px;
+
+    @media (min-width: 768px) {
+      height: 80px;
+    }
+
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    .article {
+      display: grid;
+      grid-template-columns: repeat(10, 1fr);
+      width: 100%;
+
+      &__image-container {
+        grid-column: span 3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 15rem;
+        min-width: 100px;
+        @media (min-width: 768px) {
+          height: 20rem;
+          margin: 0 2rem;
+        }
+        margin: 0 0.5rem;
+      }
+
+      &__image-wrapper {
+        height: 10rem;
+        @media (min-width: 768px) {
+          height: 15rem;
+        }
+        width: 100%;
+        border-radius: 1.5rem 0 0 1.5rem;
+        padding: 0.5rem;
+        overflow: hidden;
+        position: relative;
+        background-size: cover;
+        z-index: 1;
+
+        &::after {
+          content: "";
+          width: 100%;
+          height: 100%;
+          top: 0;
+          left: 0;
+          background-color: #000;
+          opacity: 0.3;
+          position: absolute;
+          z-index: 2;
+        }
+      }
+
+      &__image {
+        position: relative;
+        z-index: 3;
+        height: 10rem;
+        @media (min-width: 768px) {
+          height: 15rem;
+        }
+        width: 100%;
+        object-fit: contain;
+      }
+
+      &__content {
+        grid-column: span 7;
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        position: relative;
+      }
+
+      &__header {
+        grid-column: span 12;
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        margin-top: 2rem;
+
+        &-text {
+          grid-column: span 11;
+        }
+      }
+
+      &__subtitle {
+        font-size: 14px;
+        font-weight: bold;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      &__title {
+        font-size: 19px;
+        color: #fff;
+        font-weight: bold;
+        font-family: "SFD";
+      }
+
+      &__date {
+        margin-top: 0.125rem;
+        font-size: 14px;
+        color: #fff;
+      }
+
+      &__intro {
+        grid-column: span 12;
+        margin-bottom: 1rem;
+        display: none;
+        @media (min-width: 768px) {
+          display: block;
+        }
+      }
+
+      &__intro-text {
+        text-align: left;
+        font-size: 16px;
+        color: #fff;
+        font-family: "SFD";
+      }
+
+      &__audio {
+        grid-column: span 10;
+      }
+    }
+  }
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/components/Video.vue b/components/dynamic-page/page-component/templates/components/Video.vue
new file mode 100644
index 0000000..347a57d
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/components/Video.vue
@@ -0,0 +1,74 @@
+<template>
+  <article class="article">
+    <div id="article-detail" class="article__detail">
+      <div>
+        <video controls="controls" width="100%" height="auto" data-file-id="149" data-resource="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" data-title="Download.mp4">
+          <source src="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" type="video/mp4" />
+        </video>
+      </div>
+    </div>
+    <div class="article__sidebar">
+      <div class="article__sidebar-content">
+        <h1 class="article__title">Tranh cãi chuyện 'quán không nhận chuyển khoản'</h1>
+        <div class="article__author-info">
+          <div class="article__author">
+            <p class="article__author-name">Thanh Huệ</p>
+          </div>
+          <span class="article__separator">-</span>
+          <p class="article__date">T4, 15 Th05 2024 10:55</p>
+        </div>
+        <div id="article-brief" class="article__brief">
+          <div class="article__intro-text">Những ngày cận Tết tại Hà Nội, các hội thi hoa đào, quất cảnh với đa dạng các sản phẩm độc đáo, bắt mắt đ đuợc các nghệ nhân đem đến cho khách tham quan chiêm ngưỡng.</div>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+<style scoped lang="scss">
+.article {
+  width: 100%;
+  display: flex;
+  /* flex-direction: column; */
+  gap: 1rem; // Equivalent to gap-4
+  margin-top: 1rem; // Equivalent to mt-4
+  background-color: #f7f7f7;
+
+  &__detail {
+    flex: 1;
+
+    iframe,
+    video {
+      width: 100%;
+      max-width: 100%;
+      &.iframe {
+        max-height: 13rem; // Equivalent to max-h-52
+      }
+    }
+  }
+
+  &__sidebar {
+    width: 50%;
+    &-content {
+      width: 100%;
+    }
+  }
+
+  &__title {
+    font-size: 17px; // Equivalent to text-2xl
+    font-weight: 600;
+    text-align: left;
+  }
+
+  &__author-info {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+  p {
+    margin: 0;
+  }
+  video {
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/components/dynamic-page/page-component/templates/index.ts b/components/dynamic-page/page-component/templates/index.ts
new file mode 100644
index 0000000..91e3dcf
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/index.ts
@@ -0,0 +1,7 @@
+// Article
+export { default as Article_BasicCard } from './articles/individuals/Card.vue'
+export { default as Article_BasicCollection } from './articles/collections/BasicCollection.vue'
+
+// Category
+export { default as BasicCategories } from './categories/BasicCategories.vue'
+export { default as CollectionPaging } from './pageCategories/collection_page.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page-component/templates/index.vue b/components/dynamic-page/page-component/templates/index.vue
new file mode 100644
index 0000000..c2d2fdd
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/index.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { Article_BasicCard, BasicCategories, Article_BasicCollection } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+}>();
+
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentTemplates.ARTICLE]: Article_BasicCard,
+  [enumPageComponentTemplates.CATEGORY]: BasicCategories,
+  [enumPageComponentTemplates.COLLECTION]: Article_BasicCollection,
+};
+
+const getCurrentComponent = computed(() => `${_props.settings.template}`);
+
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+      return props;
+    }
+  };
+});
+</script>
+
+<template>
+  <!-- <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...(GET_PROPS()), component: _props.component, settings: _props.settings }" /> -->
+  <component :is="definedDynamicComponent[getCurrentComponent]" v-bind="{ ...(GET_PROPS()), component: _props.component }" />
+</template>
diff --git a/components/dynamic-page/page-component/templates/pageCategories/collection_page.vue b/components/dynamic-page/page-component/templates/pageCategories/collection_page.vue
new file mode 100644
index 0000000..e3c36e1
--- /dev/null
+++ b/components/dynamic-page/page-component/templates/pageCategories/collection_page.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { isEmpty } from "lodash";
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { COLLECTION_PAGING_QUERY_DROP } from '@/utils/parseSQL';
+const router = useRouter();
+const route = useRoute();
+
+const emit = defineEmits(["dropData", "selectComponent"]);
+
+const _props = defineProps<{
+  dataResult?: any[];
+  dataQuery?: string;
+  component?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 5,
+  TEMPLATE: "Article",
+  LAYOUT: "LAYOUT:horizontal",
+};
+
+// const page = ref(1);
+const limit = ref(1);
+const totals = ref(2);
+const category = ref(0);
+const listArticleByCategory = ref([]);
+const type = "Article";
+
+// watch(
+//   () => _props.dataResult,
+//   (newValue) => {
+//     const result = getInputValue(newValue, "ARRAY");
+//     listArticleByCategory.value = result;
+//   }
+// );
+
+
+const dropData = (event: any) => {
+  const queryBy = {
+    Category: "Categories",
+  };
+  const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
+  // const getDataQuery = `Get[${type}] Top[20] With[${queryBy[dataType]}:${dataResult.id}]`;
+  const getDataQuery = COLLECTION_PAGING_QUERY_DROP(type, { key: queryBy[dataType], value: dataResult.id })
+  category.value = dataResult.id;
+  emit("dropData", {
+    dataResult: [],
+    dataType,
+    dataQuery: getDataQuery,
+  });
+};
+
+//?cpn_1=page:2&cpn_2=page:1
+// Get[Article] Top[5] With[Categories:1]
+const select = (page: number) => {
+  const componentId = _props.component?.id;
+  if (componentId) {
+    router.push({
+      query: {
+        ...route.query,
+        [`cpn_${componentId}`]: `page:${page}`,
+      },
+    });
+  }
+};
+const handleRouteChange = (query: any) => {
+  const [_, value] = query[`cpn_${_props.component?.id}`]?.split(":");
+  if (value) {
+    loadPage(Number(value));
+  }
+};
+
+onBeforeMount(()=>{
+  const result = getInputValue( _props.dataResult, "ARRAY");
+  listArticleByCategory.value = result;
+  handleRouteChange(route.query)
+})
+
+const loadPage = (page: string | number) => {
+  console.log(`Loading page ${page}`);
+  // listArticleByCategory.value =
+};
+
+watch(
+  () => route.query,
+  (newQuery) => {
+    handleRouteChange(newQuery);
+  }
+);
+</script>
+
+<template>
+  <section>
+    <div class="section-container" @dragover.prevent @drop.stop.prevent="dropData($event)" 
+      :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
+      <div class="collection-container">
+        <template v-if="category">
+          <template v-if="listArticleByCategory?.length > 0">
+            <template v-for="(component, index) in listArticleByCategory" :key="index">
+              <DynamicComponent
+                v-if="!isEmpty(component)"
+                :settings="{
+                  template: SETTING_OPTIONS.TEMPLATE,
+                  layout: SETTING_OPTIONS.LAYOUT,
+                  dataResult: { ...component },
+                }"
+              />
+            </template>
+          </template>
+          <template v-else>
+            <el-result icon="success" title="Success" sub-title="Nội dung danh sách bài viết sẽ ở đây"> </el-result>
+          </template>
+        </template>
+        <template v-else><el-empty image-size="90px" description="Kéo Category vào đây" /></template>
+        <div class="button-page flex">
+          <a class="btn-page prev-page">
+            <i class="el-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+                <path
+                  fill="currentColor"
+                  d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
+                ></path>
+              </svg>
+            </i>
+          </a>
+          <a class="btn-page" @click="() => select(index + 1)" v-for="(_, index) in totals">{{ index + 1 }}</a>
+          <a class="btn-page next-page">
+            <i class="el-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+                <path
+                  fill="currentColor"
+                  d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
+                ></path>
+              </svg>
+            </i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.section-container {
+  .empty {
+    min-height: 100px;
+    border-radius: 6px;
+    background: #409eff;
+  }
+  .collection-container {
+    display: grid;
+    gap: 10px;
+  }
+  .basic-article {
+    &.article {
+      margin-bottom: 10px;
+      display: flex;
+      pointer-events: none;
+    }
+  }
+  &.noData {
+    border-radius: 6px;
+  }
+
+  .flex {
+    display: flex;
+    margin-top: 10px;
+    justify-content: center;
+    overflow-x: auto;
+  }
+
+  .button-page {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  .btn-page {
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 36px;
+    border: 1px solid #409eff;
+    border-radius: 3px;
+    margin-left: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.el-empty {
+  padding: 12px 0;
+}
+</style>
diff --git a/components/dynamic-page/page-section/RecusiveSection.vue b/components/dynamic-page/page-section/RecusiveSection.vue
new file mode 100644
index 0000000..b9c9717
--- /dev/null
+++ b/components/dynamic-page/page-section/RecusiveSection.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
+
+const props = defineProps<{
+  type: string;
+  id: any;
+}>();
+
+import { useDynamicPageStore } from '~/stores/dynamic-page';
+const store = reactive({
+  dynamicPage: useDynamicPageStore(),
+});
+
+const { currentPage } = storeToRefs(useDynamicPageStore());
+
+const defineTypeRecusive = {
+  COMPONENT: "component",
+  SECTION: "section",
+};
+
+const findDataPosition = computed(() => {
+  let result = {};
+  switch (props.type) {
+    case defineTypeRecusive.COMPONENT:
+      result = currentPage.value.components && currentPage.value.components.find((component: any) => component.id === props.id);
+      break;
+    case defineTypeRecusive.SECTION:
+      result = currentPage.value.sections && currentPage.value.sections.find((section: any) => section.id === props.id);
+      break;
+    default:
+      result = {};
+      break;
+  }
+  return result;
+});
+</script>
+
+<template>
+  <div>
+    <template v-if="props.type === defineTypeRecusive.COMPONENT">
+      <DynamicComponent 
+        v-if="findDataPosition && findDataPosition?.id" 
+        :settings="findDataPosition.settings" 
+        :component="findDataPosition"
+      />
+      <div v-else class="empty"></div>
+    </template>
+    <template v-else-if="props.type === defineTypeRecusive.SECTION">
+      <DynamicSection 
+        v-if="findDataPosition && findDataPosition?.id" 
+        :settings="findDataPosition.settings" 
+        :content="findDataPosition.content ? JSON.parse(findDataPosition.content) : null" 
+        :section="findDataPosition"
+       />
+      <div v-else class="empty"></div>
+    </template>
+    <template v-else>
+      <div class="empty"></div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty {
+  min-height: 100px;
+  border-radius: 6px;
+  background: #409eff;
+}
+</style>
diff --git a/components/dynamic-page/page-section/layouts/Default.vue b/components/dynamic-page/page-section/layouts/Default.vue
new file mode 100644
index 0000000..8a846ac
--- /dev/null
+++ b/components/dynamic-page/page-section/layouts/Default.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import RecusiveSection from "~/components/dynamic-page/page-section/RecusiveSection.vue";
+import { enumPageSectionLayouts } from "~/definitions/enum";
+
+const props = defineProps<{
+  layout?: string;
+  content?: any;
+  section: any;
+}>();
+
+const defineTypeRecusive = {
+  COMPONENT: "component",
+  SECTION: "section",
+};
+
+const SETTING_OPTIONS = computed(() => {
+  let _setting_options = {};
+  switch (props.layout) {
+    case enumPageSectionLayouts.VERTICAL_TWO:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_LEFT_TWO:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_RIGHT_TWO:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_THREE:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_FOUR:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_ONE:
+      _setting_options = {
+        MAX_ELEMENT: 1,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_TWO:
+      _setting_options = {
+        MAX_ELEMENT: 2,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_THREE:
+      _setting_options = {
+        MAX_ELEMENT: 3,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_FOUR:
+      _setting_options = {
+        MAX_ELEMENT: 4,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_FIVE:
+      _setting_options = {
+        MAX_ELEMENT: 5,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_SIX:
+      _setting_options = {
+        MAX_ELEMENT: 6,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_SEVEN:
+      _setting_options = {
+        MAX_ELEMENT: 7,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_EIGHT:
+      _setting_options = {
+        MAX_ELEMENT: 8,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_NINE:
+      _setting_options = {
+        MAX_ELEMENT: 9,
+      };
+      break;
+    case enumPageSectionLayouts.HORIZONTAL_TEN:
+      _setting_options = {
+        MAX_ELEMENT: 10,
+      };
+      break;
+    default:
+      _setting_options = {
+        MAX_ELEMENT: 1,
+      };
+      break;
+  }
+  return _setting_options;
+});
+
+const CLASS_FOR_SECTION = computed(() => {
+  let _classForSection = {};
+  switch (props.layout) {
+    case enumPageSectionLayouts.VERTICAL_TWO:
+      _classForSection = {
+        section_layout: "section_layout two_col_layout",
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_LEFT_TWO:
+      _classForSection = {
+        section_layout: "section_layout three_col_layout",
+        0: "col-span-2",
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_RIGHT_TWO:
+      _classForSection = {
+        section_layout: "section_layout three_col_layout",
+        1: "col-span-2",
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_THREE:
+      _classForSection = {
+        section_layout: "section_layout three_col_layout",
+      };
+      break;
+    case enumPageSectionLayouts.VERTICAL_FOUR:
+      _classForSection = {
+        section_layout: "section_layout four_col_layout",
+      };
+      break;
+    default:
+      _classForSection = {
+        section_layout: "section_layout basic_column",
+      };
+      break;
+  }
+  return _classForSection;
+});
+</script>
+
+<template>
+    <div class="section_layout" :class="[CLASS_FOR_SECTION.section_layout]">
+      <div
+        v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
+        :key="index"
+        :class="[CLASS_FOR_SECTION[index]]"
+      >
+        <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
+      </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.section_layout {
+  display: grid;
+  gap: 10px;
+
+  &.basic_column {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  &.two_col_layout {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  &.three_col_layout {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  &.four_col_layout {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+}
+</style>
diff --git a/components/dynamic-page/page-section/layouts/index.ts b/components/dynamic-page/page-section/layouts/index.ts
new file mode 100644
index 0000000..92185eb
--- /dev/null
+++ b/components/dynamic-page/page-section/layouts/index.ts
@@ -0,0 +1 @@
+export { default as BASE_LAYOUT } from './Default.vue'
diff --git a/components/dynamic-page/page-section/layouts/index.vue b/components/dynamic-page/page-section/layouts/index.vue
new file mode 100644
index 0000000..5b69e35
--- /dev/null
+++ b/components/dynamic-page/page-section/layouts/index.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { BASE_LAYOUT } from "./index";
+import { enumPageSectionLayouts } from "@/definitions/enum";
+
+const _props = defineProps<{
+  settings?: any;
+  layout?: string;
+  content?: any;
+
+  section: any;
+}>();
+
+const definedDynamicSection: Record<string, any> = {
+  'Default': BASE_LAYOUT,
+  [enumPageSectionLayouts.VERTICAL_TWO]: BASE_LAYOUT,
+  [enumPageSectionLayouts.VERTICAL_LEFT_TWO]: BASE_LAYOUT,
+  [enumPageSectionLayouts.VERTICAL_RIGHT_TWO]: BASE_LAYOUT,
+  [enumPageSectionLayouts.VERTICAL_THREE]: BASE_LAYOUT,
+  [enumPageSectionLayouts.VERTICAL_FOUR]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_ONE]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_TWO]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_THREE]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_FOUR]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_FIVE]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_SIX]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_SEVEN]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_EIGHT]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_NINE]: BASE_LAYOUT,
+  [enumPageSectionLayouts.HORIZONTAL_TEN]: BASE_LAYOUT,
+};
+
+const getCurrentSection = computed(() => _props?.layout || "");
+
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+    }
+    return props;
+  };
+});
+</script>
+
+<template>
+  <component
+    :is="definedDynamicSection[getCurrentSection] || null"
+    v-bind="{
+      ...GET_PROPS(),
+      section: _props.section,
+      content: _props.content,
+    }"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/components/dynamic-page/page-section/templates/articles/Default.vue b/components/dynamic-page/page-section/templates/articles/Default.vue
new file mode 100644
index 0000000..9d979a6
--- /dev/null
+++ b/components/dynamic-page/page-section/templates/articles/Default.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import DynamicLayout from '~/components/dynamic-page/page-section/layouts/index.vue';
+
+const emit = defineEmits(['dropComponent', 'dropData', 'selectComponent']);
+const props = defineProps<{
+    label?: any
+    layout?: string
+    settings?: any
+    content?: any
+
+    section: any
+}>()
+</script>
+
+<template>
+    <section class="section-container">
+        <h2 class="section__title mb-3" v-if="props.label">{{ props.label || '' }}</h2>
+        <div class="section_layout">
+            <template v-if="props.layout">
+                <DynamicLayout
+                    :layout="props.layout"
+                    :content="props.content"
+                    :settings="props.settings"
+                    :section= "props.section"
+                />
+            </template>
+            <template v-else>
+                <div>
+                    Bấm để chọn layout
+                </div>
+            </template>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" scoped>
+.section_layout {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr)); 
+    gap: 10px;     
+
+    .empty {
+        min-height: 100px;
+        border-radius: 6px;
+        background: #409eff;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/components/dynamic-page/page-section/templates/homes/Basic.vue b/components/dynamic-page/page-section/templates/homes/Basic.vue
new file mode 100644
index 0000000..437a288
--- /dev/null
+++ b/components/dynamic-page/page-section/templates/homes/Basic.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import HeaderHomeTemplate from '~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue'
+import FooterHomeTemplate from '~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue'
+
+const props = defineProps<{
+    layout?: any
+}>()
+
+const classForLayout = computed(() => {
+    let _empty = {
+        page_container: 'page_container',
+        layout_container: 'layout_container',
+    };
+    switch (props.layout) {
+        case 'Full_Page':
+            _empty = {
+                page_container: 'page_container full-size-page',
+                layout_container: 'layout_container full-size-layout',
+            };
+            break;
+        case 'Center_Page':
+            _empty = {
+                page_container: 'page_container full-size-page',
+                layout_container: 'layout_container center-layout',
+            };
+            break;
+        case 'Background_Page':
+            _empty = {
+                page_container: 'page_container full-size-page background-container',
+                layout_container: 'layout_container center-layout',
+            };
+            break;
+        default: 
+            break;
+    }
+    return _empty;
+})
+</script>
+
+<template>
+    <div class="h-100 overflow-y-auto">
+        <HeaderHomeTemplate /> 
+
+        <div :class="[classForLayout.page_container]">
+            <div :class="[classForLayout.layout_container]">
+                <slot />
+            </div>
+        </div>
+
+        <FooterHomeTemplate />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .body-center {
+        padding: 40px 0px;
+    }
+
+    .page_container {
+        &.full-size-page {
+            width: 100%;
+        }
+        .full-size-layout {
+            padding: 0 20px;
+        }
+    }
+
+    .layout_container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &.center-layout {
+            max-width: 1300px;
+            margin: auto;
+        }
+    }
+</style>
diff --git a/components/dynamic-page/page-section/templates/index.ts b/components/dynamic-page/page-section/templates/index.ts
new file mode 100644
index 0000000..1ac4c32
--- /dev/null
+++ b/components/dynamic-page/page-section/templates/index.ts
@@ -0,0 +1 @@
+export { default as Article_Section_Default } from './articles/Default.vue'
diff --git a/components/dynamic-page/page-section/templates/index.vue b/components/dynamic-page/page-section/templates/index.vue
new file mode 100644
index 0000000..e79d22f
--- /dev/null
+++ b/components/dynamic-page/page-section/templates/index.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { Article_Section_Default } from './index';
+import { enumPageSectionLayouts } from "@/definitions/enum";
+
+const _props = defineProps<{
+    settings?: any,
+    content?: any
+    section: any
+}>()
+
+const definedDynamicSection: Record<string, any> = {
+    'Article_Default': Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.VERTICAL_TWO}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.VERTICAL_LEFT_TWO}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.VERTICAL_RIGHT_TWO}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.VERTICAL_THREE}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.VERTICAL_FOUR}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_ONE}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_TWO}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_THREE}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_FOUR}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_FIVE}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_SIX}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_SEVEN}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_EIGHT}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_NINE}`]: Article_Section_Default,
+    [`Article_${enumPageSectionLayouts.HORIZONTAL_TEN}`]: Article_Section_Default,
+}
+
+const getCurrentSection = computed(() => `${_props.settings.template}_${_props.settings.layout}`);
+
+const GET_PROPS = computed(() => {
+    return () => {
+        let props: any = {};
+        if (_props.settings) {
+            for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
+                props = {
+                    ...props,
+                    [key]: value
+                }
+            }
+        }
+        return props;
+    };
+})
+</script>
+
+<template>
+    <component :is="definedDynamicSection[getCurrentSection] || null" v-bind="{ ...(GET_PROPS()), section: _props.section, content: _props.content, settings: _props.settings }">
+        <slot />
+    </component>
+</template>
diff --git a/components/dynamic-page/page/layouts/Default.vue b/components/dynamic-page/page/layouts/Default.vue
new file mode 100644
index 0000000..b4a0de5
--- /dev/null
+++ b/components/dynamic-page/page/layouts/Default.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const props = defineProps<{
+    layout?: any
+}>()
+
+const CLASS_FOR_LAYOUT = computed(() => {
+    let _classForLayout = {};
+    switch (props.layout) {
+        case 'Full_Page':
+            _classForLayout = {
+                page_container: 'page_container full-size-page',
+                layout_container: 'layout_container full-size-layout',
+            };
+            break;
+        case 'Center_Page':
+            _classForLayout = {
+                page_container: 'page_container full-size-page',
+                layout_container: 'layout_container center-layout',
+            };
+            break;
+        case 'Background_Page':
+            _classForLayout = {
+                page_container: 'page_container full-size-page background-container',
+                layout_container: 'layout_container center-layout',
+            };
+            break;
+        default: 
+            _classForLayout = {
+                page_container: 'page_container',
+                layout_container: 'layout_container',
+            };
+            break;
+    }
+    return _classForLayout;
+})
+</script>
+
+<template>
+    <div :class="[CLASS_FOR_LAYOUT.page_container]">
+        <div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .page_container {
+        &.full-size-page {
+            width: 100%;
+        }
+        .full-size-layout {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
+
+    .layout_container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &.center-layout {
+            max-width: 1300px;
+            margin: auto;
+        }
+    }
+
+    .grid-container {
+        display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr)); 
+        gap: 40px;
+    }
+</style>
diff --git a/components/dynamic-page/page/layouts/articles/Long.vue b/components/dynamic-page/page/layouts/articles/Long.vue
new file mode 100644
index 0000000..9e7752b
--- /dev/null
+++ b/components/dynamic-page/page/layouts/articles/Long.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="page_container full-size-page">
+        <div class="layout_container center-layout grid-container">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .page_container {
+        &.full-size-page {
+            width: 100%;
+        }
+        .full-size-layout {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
+
+    .layout_container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &.center-layout {
+            max-width: 1300px;
+            margin: auto;
+        }
+    }
+</style>
diff --git a/components/dynamic-page/page/layouts/articles/None.vue b/components/dynamic-page/page/layouts/articles/None.vue
new file mode 100644
index 0000000..d662eea
--- /dev/null
+++ b/components/dynamic-page/page/layouts/articles/None.vue
@@ -0,0 +1,42 @@
+/*
+- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4
+- ContentType: None=0 | General=1 | Photo=2 | Audio=3 | Video=4 | Graphic=5 | Document=6 | Interaction=7 (Poll,Quiz)
+*/
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="page_container full-size-page">
+        <div class="layout_container full-size-layout grid-container">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .page_container {
+        &.full-size-page {
+            width: 100%;
+        }
+        .full-size-layout {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
+
+    .layout_container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &.center-layout {
+            max-width: 1300px;
+            margin: auto;
+        }
+    }
+
+    .grid-container {
+        display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr)); 
+        gap: 40px;
+    }
+</style>
diff --git a/components/dynamic-page/page/layouts/articles/Normal.vue b/components/dynamic-page/page/layouts/articles/Normal.vue
new file mode 100644
index 0000000..9e7752b
--- /dev/null
+++ b/components/dynamic-page/page/layouts/articles/Normal.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="page_container full-size-page">
+        <div class="layout_container center-layout grid-container">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .page_container {
+        &.full-size-page {
+            width: 100%;
+        }
+        .full-size-layout {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
+
+    .layout_container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &.center-layout {
+            max-width: 1300px;
+            margin: auto;
+        }
+    }
+</style>
diff --git a/components/dynamic-page/page/layouts/articles/Page.vue b/components/dynamic-page/page/layouts/articles/Page.vue
new file mode 100644
index 0000000..d662eea
--- /dev/null
+++ b/components/dynamic-page/page/layouts/articles/Page.vue
@@ -0,0 +1,42 @@
+/*
+- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4
+- ContentType: None=0 | General=1 | Photo=2 | Audio=3 | Video=4 | Graphic=5 | Document=6 | Interaction=7 (Poll,Quiz)
+*/
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="page_container full-size-page">
+        <div class="layout_container full-size-layout grid-container">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .page_container {
+        &.full-size-page {
+            width: 100%;
+        }
+        .full-size-layout {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
+
+    .layout_container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &.center-layout {
+            max-width: 1300px;
+            margin: auto;
+        }
+    }
+
+    .grid-container {
+        display: grid;
+        grid-template-columns: repeat(1, minmax(0, 1fr)); 
+        gap: 40px;
+    }
+</style>
diff --git a/components/dynamic-page/page/layouts/articles/Short.vue b/components/dynamic-page/page/layouts/articles/Short.vue
new file mode 100644
index 0000000..9e7752b
--- /dev/null
+++ b/components/dynamic-page/page/layouts/articles/Short.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="page_container full-size-page">
+        <div class="layout_container center-layout grid-container">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .page_container {
+        &.full-size-page {
+            width: 100%;
+        }
+        .full-size-layout {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
+
+    .layout_container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+
+        &.center-layout {
+            max-width: 1300px;
+            margin: auto;
+        }
+    }
+</style>
diff --git a/components/dynamic-page/page/layouts/index.ts b/components/dynamic-page/page/layouts/index.ts
new file mode 100644
index 0000000..70ac50c
--- /dev/null
+++ b/components/dynamic-page/page/layouts/index.ts
@@ -0,0 +1,8 @@
+export { default as BASE_LAYOUT } from './Default.vue'
+
+// Article
+export { default as ARTICLE_LONG_LAYOUT } from './articles/Long.vue'
+export { default as ARTICLE_NONE_LAYOUT } from './articles/None.vue'
+export { default as ARTICLE_NORMAL_LAYOUT } from './articles/Normal.vue'
+export { default as ARTICLE_PAGE_LAYOUT } from './articles/Page.vue'
+export { default as ARTICLE_SHORT_LAYOUT } from './articles/Short.vue'
diff --git a/components/dynamic-page/page/layouts/index.vue b/components/dynamic-page/page/layouts/index.vue
new file mode 100644
index 0000000..508dd22
--- /dev/null
+++ b/components/dynamic-page/page/layouts/index.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { layouts } from "@/definitions/enum";
+
+import { 
+    BASE_LAYOUT,
+    ARTICLE_SHORT_LAYOUT,
+    ARTICLE_PAGE_LAYOUT,
+    ARTICLE_NORMAL_LAYOUT,
+    ARTICLE_NONE_LAYOUT,
+    ARTICLE_LONG_LAYOUT,
+} from './index';
+
+const _props = defineProps<{
+    settings?: any,
+}>()
+
+const definedDynamicPageLayout: Record<string, any> = {
+    'Default': BASE_LAYOUT,
+    [layouts.FULL_PAGE]: BASE_LAYOUT,
+    [layouts.CENTER_PAGE]: BASE_LAYOUT,
+    [layouts.BACKGROUND_PAGE]: BASE_LAYOUT,
+
+    'ARTICLE_SHORT': ARTICLE_SHORT_LAYOUT,
+    'ARTICLE_PAGE': ARTICLE_PAGE_LAYOUT,
+    'ARTICLE_NORMAL': ARTICLE_NORMAL_LAYOUT,
+    'ARTICLE_NONE': ARTICLE_NONE_LAYOUT,
+    'ARTICLE_LONG': ARTICLE_LONG_LAYOUT,
+}
+
+const getCurrentLayout = computed(() => _props.settings && _props.settings.layout);
+
+const GET_PROPS = computed(() => {
+    return () => {
+        let props: any = {};
+        for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
+            props = {
+                ...props,
+                [key]: value
+            }
+        }
+        return props;
+    };
+})
+</script>
+
+<template>
+    <component :is="definedDynamicPageLayout[getCurrentLayout] || null" v-bind="GET_PROPS()">
+        <slot />
+    </component>
+</template>
diff --git a/components/dynamic-page/page/templates/articles/Default.vue b/components/dynamic-page/page/templates/articles/Default.vue
new file mode 100644
index 0000000..dfbfade
--- /dev/null
+++ b/components/dynamic-page/page/templates/articles/Default.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import DynamicLayout from '~/components/dynamic-page/page/layouts/index.vue';
+import HeaderHomeTemplate from '~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue'
+import FooterHomeTemplate from '~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue'
+
+const props = defineProps<{
+    settings?: any
+}>()
+</script>
+
+<template>
+    <div class="h-100 overflow-y-auto">
+        <HeaderHomeTemplate /> 
+            <DynamicLayout :settings="props.settings">
+                <slot />
+            </DynamicLayout>
+        <FooterHomeTemplate />
+    </div>
+</template>
diff --git a/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue b/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue
new file mode 100644
index 0000000..e3b465e
--- /dev/null
+++ b/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+</script>
+<template>
+  <div>
+    useCmsPageStore 
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.col-span-8 {
+  grid-column: span 8 / span 8;
+
+  @media (max-width: 1150px) {
+    grid-column: span 7 / span 7;
+  }
+}
+.col-span-12 {
+  grid-column: span 12 / span 12 !important;
+}
+.mbootom-5 {
+  margin-bottom: 5px;
+}
+.mbootom-14 {
+  margin-bottom: 14px;
+}
+.text-neutral-500 {
+  color: #737373;
+}
+.grid-col-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  &.grid-col-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+
+  .text-span {
+    font-size: 1rem;
+    line-height: 1.75rem;
+    font-weight: 700;
+    letter-spacing: 0.025em;
+    flex: 1;
+    word-break: break-word;
+  }
+
+  .text-a {
+    font-size: 0.8rem;
+    line-height: 1rem;
+  }
+}
+
+.lg-row {
+  @media (min-width: 1300px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.footer1 {
+  margin-top: 1.5rem;
+  background-color: #ffffff;
+  color: black;
+  border-top: 1px solid #bfbfbf;
+
+  &-wrap {
+    max-width: 90%;
+    margin: auto;
+    padding-top: 1rem;
+    padding-left: 0;
+    padding-right: 0;
+
+    .section-right {
+      display: grid;
+      margin-bottom: 0.5rem;
+      gap: 1rem;
+      font-size: 0.8rem;
+      line-height: 1.25rem;
+      font-weight: 400;
+
+      @media (min-width: 950px) {
+        grid-template-columns: repeat(12, minmax(0, 1fr));
+      }
+
+      .footer-category {
+        display: grid;
+        gap: 1rem;
+        height: 100%;
+        /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
+        &.grid-col-3 {
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+        &.grid-col-2 {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+        .item-nav {
+          padding: 10px;
+          .text {
+            font-size: 0.8rem;
+            line-height: 1.25rem;
+            color: black;
+          }
+        }
+        .drag-new {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 6px;
+          background: #215486;
+          font-size: 40px;
+          color: #fff;
+          margin: 0 11px;
+          max-width: 200px;
+          height: 30px;
+        }
+      }
+
+      &-4 {
+        display: grid;
+        grid-column: span 4 / span 4;
+        grid-auto-rows: max;
+        gap: 1rem;
+        &.border-top-left-0 {
+          border-left: 0;
+          border-top: 1px solid #bfbfbf;
+          padding-top: 1rem;
+        }
+        @media (max-width: 1150px) {
+          grid-column: span 5 / span 5;
+        }
+
+        @media (min-width: 950px) {
+          padding-left: 1rem;
+          border-left: 1px solid #bfbfbf;
+        }
+
+        .text {
+          margin-bottom: 0.5rem;
+          font-size: 1rem;
+          line-height: 1.75rem;
+          font-weight: 700;
+          text-transform: uppercase;
+
+          &-wrap {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            white-space: nowrap;
+
+            .text-item {
+              display: flex;
+              gap: 0.5rem;
+              align-items: center;
+              max-width: 100%;
+
+              .text-child {
+                font-size: 0.8rem;
+                line-height: 1.25rem;
+                flex: 1;
+                word-break: break-word;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .section-bottom {
+      display: flex;
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      flex-direction: column;
+      gap: 1rem;
+      justify-content: space-between;
+      align-items: center;
+
+      @media (min-width: 640px) {
+        flex-direction: row;
+      }
+
+      .ssr {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+
+        a {
+          font-size: 0.8rem;
+          color: #737373;
+          line-height: 1.25rem;
+
+          @media (min-width: 1024px) {
+            font-size: 1rem;
+            line-height: 1.5rem;
+          }
+        }
+      }
+
+      &__left {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        @media (min-width: 640px) {
+          order: 1;
+        }
+      }
+
+      &__right {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+
+        .icon1 {
+          color: #737373;
+          display: grid;
+          place-items: center;
+          border-radius: 9999px;
+          border: 1px solid #737373;
+          transition-duration: 300ms;
+          width: 32px;
+          height: 32px;
+        }
+
+        @media (min-width: 640px) {
+          order: 3;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue b/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
new file mode 100644
index 0000000..e3b465e
--- /dev/null
+++ b/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+</script>
+<template>
+  <div>
+    useCmsPageStore 
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.col-span-8 {
+  grid-column: span 8 / span 8;
+
+  @media (max-width: 1150px) {
+    grid-column: span 7 / span 7;
+  }
+}
+.col-span-12 {
+  grid-column: span 12 / span 12 !important;
+}
+.mbootom-5 {
+  margin-bottom: 5px;
+}
+.mbootom-14 {
+  margin-bottom: 14px;
+}
+.text-neutral-500 {
+  color: #737373;
+}
+.grid-col-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  &.grid-col-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+
+  .text-span {
+    font-size: 1rem;
+    line-height: 1.75rem;
+    font-weight: 700;
+    letter-spacing: 0.025em;
+    flex: 1;
+    word-break: break-word;
+  }
+
+  .text-a {
+    font-size: 0.8rem;
+    line-height: 1rem;
+  }
+}
+
+.lg-row {
+  @media (min-width: 1300px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.footer1 {
+  margin-top: 1.5rem;
+  background-color: #ffffff;
+  color: black;
+  border-top: 1px solid #bfbfbf;
+
+  &-wrap {
+    max-width: 90%;
+    margin: auto;
+    padding-top: 1rem;
+    padding-left: 0;
+    padding-right: 0;
+
+    .section-right {
+      display: grid;
+      margin-bottom: 0.5rem;
+      gap: 1rem;
+      font-size: 0.8rem;
+      line-height: 1.25rem;
+      font-weight: 400;
+
+      @media (min-width: 950px) {
+        grid-template-columns: repeat(12, minmax(0, 1fr));
+      }
+
+      .footer-category {
+        display: grid;
+        gap: 1rem;
+        height: 100%;
+        /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
+        &.grid-col-3 {
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+        &.grid-col-2 {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+        .item-nav {
+          padding: 10px;
+          .text {
+            font-size: 0.8rem;
+            line-height: 1.25rem;
+            color: black;
+          }
+        }
+        .drag-new {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 6px;
+          background: #215486;
+          font-size: 40px;
+          color: #fff;
+          margin: 0 11px;
+          max-width: 200px;
+          height: 30px;
+        }
+      }
+
+      &-4 {
+        display: grid;
+        grid-column: span 4 / span 4;
+        grid-auto-rows: max;
+        gap: 1rem;
+        &.border-top-left-0 {
+          border-left: 0;
+          border-top: 1px solid #bfbfbf;
+          padding-top: 1rem;
+        }
+        @media (max-width: 1150px) {
+          grid-column: span 5 / span 5;
+        }
+
+        @media (min-width: 950px) {
+          padding-left: 1rem;
+          border-left: 1px solid #bfbfbf;
+        }
+
+        .text {
+          margin-bottom: 0.5rem;
+          font-size: 1rem;
+          line-height: 1.75rem;
+          font-weight: 700;
+          text-transform: uppercase;
+
+          &-wrap {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            white-space: nowrap;
+
+            .text-item {
+              display: flex;
+              gap: 0.5rem;
+              align-items: center;
+              max-width: 100%;
+
+              .text-child {
+                font-size: 0.8rem;
+                line-height: 1.25rem;
+                flex: 1;
+                word-break: break-word;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .section-bottom {
+      display: flex;
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      flex-direction: column;
+      gap: 1rem;
+      justify-content: space-between;
+      align-items: center;
+
+      @media (min-width: 640px) {
+        flex-direction: row;
+      }
+
+      .ssr {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+
+        a {
+          font-size: 0.8rem;
+          color: #737373;
+          line-height: 1.25rem;
+
+          @media (min-width: 1024px) {
+            font-size: 1rem;
+            line-height: 1.5rem;
+          }
+        }
+      }
+
+      &__left {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        @media (min-width: 640px) {
+          order: 1;
+        }
+      }
+
+      &__right {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        align-items: center;
+
+        .icon1 {
+          color: #737373;
+          display: grid;
+          place-items: center;
+          border-radius: 9999px;
+          border: 1px solid #737373;
+          transition-duration: 300ms;
+          width: 32px;
+          height: 32px;
+        }
+
+        @media (min-width: 640px) {
+          order: 3;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/components/dynamic-page/page/templates/components/headers/logo.svg b/components/dynamic-page/page/templates/components/headers/logo.svg
new file mode 100644
index 0000000..08d989f
--- /dev/null
+++ b/components/dynamic-page/page/templates/components/headers/logo.svg
@@ -0,0 +1,132 @@
+    <svg `viewBox="0 0 693 315" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="693" height="315" fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0586 26.0907H76.5475L89.0139 54.0907H25.525L13.0586 26.0907Z"
+            fill="#262626" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M25.525 54.0907L13.0586 26.0907H76.5475L89.0139 54.0907L139.685 167.901L107.941 239.2L25.525 54.0907Z"
+            fill="#262626" />
+        <path d="M245 77H289.5C304.136 77 316 88.8645 316 103.5C316 118.136 304.136 130 289.5 130H245V77Z" fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M245 77H244.036H243.66L243.214 78H245V77Z" fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M294.88 99.6374L244.036 77H243.66L243.214 78L183.966 211.074L235.124 233.852L294.88 99.6374Z" fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M202.823 26.0907H266.312L253.846 54.0907H190.357L194 45.9081L202.823 26.0907Z" fill="#EC3E36" />
+        <path d="M107.941 239.2L139.685 310.499L171.43 239.2L139.685 167.901L107.941 239.2Z" fill="#EC3E36" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M202.823 26.0907L194 45.9081V179.091H303.5C345.75 179.091 380 144.841 380 102.591C380 60.3409 345.75 26.0907 303.5 26.0907L202.823 26.0907Z"
+            fill="#EC3E36" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M171.43 239.2L139.685 167.901L190.357 54.0907L194 45.9081L202.823 26.0907H266.312L253.846 54.0907L171.43 239.2Z"
+            fill="#EC3E36" />
+        <path d="M245 77H289.5C304.136 77 316 88.8645 316 103.5V103.5C316 118.136 304.136 130 289.5 130H245V77Z"
+            fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M245 77H244.036H243.66L243.214 78H245V77Z" fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M294.88 99.6374L244.036 77H243.66L243.214 78L183.966 211.074L235.124 233.852L294.88 99.6374Z" fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M202.823 26.0907H266.312L253.846 54.0907H190.357L194 45.9081L202.823 26.0907Z" fill="#EC3E36" />
+        <path d="M107.941 239.2L139.685 310.499L171.43 239.2L139.685 167.901L107.941 239.2Z" fill="#EC3E36" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M202.823 26.0907L194 45.9081V179.091H303.5C345.75 179.091 380 144.841 380 102.591C380 60.3409 345.75 26.0907 303.5 26.0907L202.823 26.0907Z"
+            fill="#EC3E36" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M171.43 239.2L139.685 167.901L190.357 54.0907L194 45.9081L202.823 26.0907H266.312L253.846 54.0907L171.43 239.2Z"
+            fill="#EC3E36" />
+        <path
+            d="M245.034 77.1399H289.534C304.17 77.1399 316.034 89.0043 316.034 103.64V103.64C316.034 118.275 304.17 130.14 289.534 130.14H245.034V77.1399Z"
+            fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M245.034 77.1398H244.07H243.694L243.249 78.1398H245.034V77.1398Z"
+            fill="white" />
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M294.915 99.7773L244.07 77.1398H243.694L243.249 78.1398L184 211.214L235.159 233.992L294.915 99.7773Z"
+            fill="white" />
+        <path d="M205 209.322L225.941 209.322L244.5 281.094L226.778 281.127L205 209.322Z" fill="#1A1A1A" />
+        <path d="M269.491 208.806L248.379 208.829L232 281.092L249.646 281.116L269.491 208.806Z" fill="#1A1A1A" />
+        <path d="M327 209.195H345V281.195H327V209.195Z" fill="#1A1A1A" />
+        <rect x="358" y="208.431" width="21" height="73" fill="#1A1A1A" />
+        <path
+            d="M376 208.431H387.5C401.031 208.431 412 219.4 412 232.931V232.931C412 246.462 401.031 257.431 387.5 257.431H376V208.431Z"
+            fill="#1A1A1A" />
+        <path
+            d="M379 225.431H385.5C389.642 225.431 393 228.789 393 232.931V232.931C393 237.073 389.642 240.431 385.5 240.431H379V225.431Z"
+            fill="white" />
+        <rect x="425" y="208.431" width="19" height="73" fill="#1A1A1A" />
+        <path
+            d="M443 208.431H459.5C473.031 208.431 484 219.4 484 232.931V232.931C484 246.462 473.031 257.431 459.5 257.431H443V208.431Z"
+            fill="#1A1A1A" />
+        <path
+            d="M444 225.431H456.5C460.642 225.431 464 228.789 464 232.931V232.931C464 237.073 460.642 240.431 456.5 240.431H444V225.431Z"
+            fill="white" />
+        <path d="M450.564 251.949L468.306 242.001L484.868 281.225L462.462 281.225L450.564 251.949Z" fill="#1A1A1A" />
+        <rect x="497" y="208.431" width="20" height="73" fill="#1A1A1A" />
+        <rect x="507" y="208.431" width="46" height="19" fill="#1A1A1A" />
+        <rect x="512" y="263.431" width="41" height="18" fill="#1A1A1A" />
+        <rect x="514" y="237.431" width="29" height="16" fill="#1A1A1A" />
+        <rect x="571" y="266.437" width="40" height="14" rx="7" fill="#0B5398" />
+        <path d="M566 263.437H604V281.437H566V263.437Z" fill="#1A1A1A" />
+        <ellipse cx="603.5" cy="259.437" rx="19.5" ry="22" fill="#1A1A1A" />
+        <rect x="580" y="225.437" width="25" height="12" rx="6" fill="#F5F5F5" />
+        <rect x="570" y="252.437" width="34" height="11" rx="5.5" fill="white" />
+        <rect x="589" y="238.437" width="20" height="13" rx="6.5" fill="#0B5398" />
+        <path d="M618.611 226.028L585.748 226.009L585.757 208.431L618.62 208.45L618.611 226.028Z" fill="#1A1A1A" />
+        <ellipse cx="19.3494" cy="22.0044" rx="19.3494" ry="22.0044"
+            transform="matrix(-1 -0.000571404 0.000499233 -1 605.053 252.474)" fill="#1A1A1A" />
+        <path
+            d="M610.184 237.45L590.914 237.439C587.759 237.437 585.202 234.878 585.204 231.723V231.723C585.205 228.568 587.764 226.011 590.92 226.013L610.189 226.024L610.184 237.45Z"
+            fill="white" />
+        <rect width="22.315" height="13.9922" rx="6.99612"
+            transform="matrix(-1 -0.000571404 0.000499233 -1 609.698 252.372)" fill="#1A1A1A" />
+        <rect x="641" y="266.437" width="40" height="14" rx="7" fill="#0B5398" />
+        <path d="M636 263.437H674V281.437H636V263.437Z" fill="#1A1A1A" />
+    <ellipse cx="673.5" cy="259.437" rx="19.5" ry="22" fill="#1A1A1A" />
+    <rect x="650" y="225.437" width="25" height="12" rx="6" fill="#F5F5F5" />
+    <rect x="640" y="252.437" width="34" height="11" rx="5.5" fill="white" />
+    <rect x="659" y="238.437" width="20" height="13" rx="6.5" fill="#0B5398" />
+    <path d="M688.611 226.028L655.748 226.009L655.757 208.431L688.62 208.45L688.611 226.028Z" fill="#1A1A1A" />
+    <ellipse cx="19.3494" cy="22.0044" rx="19.3494" ry="22.0044"
+        transform="matrix(-1 -0.000571404 0.000499233 -1 675.053 252.474)" fill="#1A1A1A" />
+    <path
+        d="M680.184 237.45L660.914 237.439C657.759 237.437 655.202 234.878 655.204 231.723V231.723C655.205 228.568 657.764 226.011 660.92 226.013L680.189 226.024L680.184 237.45Z"
+        fill="white" />
+    <rect width="22.315" height="13.9922" rx="6.99612"
+        transform="matrix(-1 -0.000571404 0.000499233 -1 679.698 252.372)" fill="#1A1A1A" />
+    <path d="M282 209.195H299.152H300V281.195H282V209.195Z" fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M327 280.195H326V280.946L326.179 281.195H327V280.195Z"
+        fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M299.152 209.195L284.621 223.419L326 280.946L326.179 281.195L326.182 281.2L341.494 266.211L301 209.915L300.483 209.195H300H299.152Z"
+        fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M299.152 209.195H299V210.195H301V209.915L300.483 209.195H299.152Z"
+        fill="#1A1A1A" />
+    <rect x="299.737" y="208.182" width="3.7116" height="3.43404" transform="rotate(-36 299.737 208.182)"
+        fill="white" />
+    <rect x="302" y="207.431" width="25" height="3" fill="white" />
+    <rect x="282" y="280.431" width="18" height="1" fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M345 280.431H326V280.948L326.351 281.431H326.663H345V280.431Z"
+        fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M326.611 280.233L325.871 280.77L326 280.948L326.351 281.431H326.663L327.198 281.042L326.611 280.233Z"
+        fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M227.195 279.423L226.345 279.683L226.574 280.431L226.88 281.431H227.469L227.78 281.336L227.195 279.423Z"
+        fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M226.574 280.431H249.833L249.56 281.431H248.181H227.469H226.88L226.574 280.431Z" fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M250.01 279.783L248.727 279.433L248.181 281.431H249.56L249.833 280.431L250.01 279.783Z" fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M206.271 210.241L205.717 208.431H204.729L205.034 209.431L205.367 210.518L206.271 210.241Z" fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M224.233 208.431L224.653 209.955L226.004 209.583L225.962 209.431L225.686 208.431H224.233Z" fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M249.055 211.213L249.697 208.431H248.481L248.25 209.431L247.9 210.946L249.055 211.213Z" fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M268.585 208.431L268 210.344L268.956 210.636L269.325 209.431L269.63 208.431H268.585Z" fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M249.697 208.431H248.481L248.25 209.431H269.325L269.63 208.431H268.585H249.697ZM224.233 208.431H225.686L225.962 209.431H205.034L204.729 208.431H205.717H224.233Z"
+        fill="#1A1A1A" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M282 208.431H299.922L300.648 209.431H282V208.431Z"
+        fill="#1A1A1A" />
+    <path d="M301 209.431V208.431H299.922L300.648 209.431H301Z" fill="white" />
+    <rect x="327" y="208.431" width="18" height="1" fill="#1A1A1A" />
+</svg>
\ No newline at end of file
diff --git a/components/dynamic-page/page/templates/homes/Basic.vue b/components/dynamic-page/page/templates/homes/Basic.vue
new file mode 100644
index 0000000..76973ac
--- /dev/null
+++ b/components/dynamic-page/page/templates/homes/Basic.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import DynamicLayout from '~/components/dynamic-page/page/layouts/index.vue';
+import HeaderHomeTemplate from '~/components/dynamic-page/page/templates/components/headers/HeaderHomeTemplate.vue'
+import FooterHomeTemplate from '~/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue'
+
+const props = defineProps<{
+    settings?: any
+}>()
+</script>
+
+<template>
+    <div>
+        <HeaderHomeTemplate /> 
+            <DynamicLayout :settings="props.settings">
+                <slot />
+            </DynamicLayout>
+        <FooterHomeTemplate />
+    </div>
+</template>
diff --git a/components/dynamic-page/page/templates/index.ts b/components/dynamic-page/page/templates/index.ts
new file mode 100644
index 0000000..ca8dc45
--- /dev/null
+++ b/components/dynamic-page/page/templates/index.ts
@@ -0,0 +1 @@
+export { default as HomeBasic } from './homes/Basic.vue'
\ No newline at end of file
diff --git a/components/dynamic-page/page/templates/index.vue b/components/dynamic-page/page/templates/index.vue
new file mode 100644
index 0000000..935158d
--- /dev/null
+++ b/components/dynamic-page/page/templates/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { HomeBasic } from './index';
+
+const _props = defineProps<{
+    settings: any
+}>()
+
+const definedDynamicPage: Record<string, any> = {
+    'Home' : HomeBasic,
+}
+
+const getCurrentTemplate = computed(() => {
+    return _props.settings && _props.settings.template || '';
+});
+
+const GET_PROPS = computed(() => {
+    return () => {
+        let props : any = {};
+        if (_props.settings) {
+            for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
+                props = {
+                    ...props,
+                    [key]: value
+                }
+            }
+        }
+        return props;
+    };
+})
+</script>
+
+<template>
+    <component :is="definedDynamicPage[getCurrentTemplate] || null" v-bind="{...(GET_PROPS()), settings: _props.settings}">
+        <slot />
+    </component>
+</template>
\ No newline at end of file
diff --git a/definitions/base-exception.ts b/definitions/base-exception.ts
new file mode 100644
index 0000000..055eccf
--- /dev/null
+++ b/definitions/base-exception.ts
@@ -0,0 +1,11 @@
+export const exceptionMessages = [
+  { title: 'Unhandled Exception', value: 'Unhandled Exception' },
+  { title: 'Unable to {0}', value: (entity: string) => `Unable to ${entity}` },
+  { title: '{0} does not exist', value: (entity: string) => `${entity} does not exist` },
+  { title: '{0} is not valid', value: (entity: string) => `${entity} is not valid` },
+  { title: '{0} is not ready', value: (entity: string) => `${entity} is not ready` },
+  { title: '{0} is not activated', value: (entity: string) => `${entity} is not activated` },
+  { title: '{0} is not available', value: (entity: string) => `${entity} is not available` },
+  { title: '{0} has expired', value: (entity: string) => `${entity} has expired` },
+  { title: '{0} has been deleted', value: (entity: string) => `${entity} has been deleted` },
+];
diff --git a/definitions/base-gender.ts b/definitions/base-gender.ts
new file mode 100644
index 0000000..7d76595
--- /dev/null
+++ b/definitions/base-gender.ts
@@ -0,0 +1,6 @@
+export const BaseGender = [
+    { title: 'Nam', value: 1 },
+    { title: 'Nữ', value: 2 },
+    { title: 'Khác', value: 3 },
+  ];
+  
\ No newline at end of file
diff --git a/definitions/base-nationlity.ts b/definitions/base-nationlity.ts
new file mode 100644
index 0000000..b81fd40
--- /dev/null
+++ b/definitions/base-nationlity.ts
@@ -0,0 +1,4 @@
+export const nationlityOptions = [
+    { title: 'Anh', value: '0' },
+    { title: 'Việt Nam', value: '1' },
+  ];
diff --git a/definitions/base-sidebar.ts b/definitions/base-sidebar.ts
new file mode 100644
index 0000000..3d2ddad
--- /dev/null
+++ b/definitions/base-sidebar.ts
@@ -0,0 +1,365 @@
+export const baseSideBarMenu = [
+  {
+    "components": [
+      {
+        "operations": [
+          {
+            "id": 119,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 24,
+            "title": "Xóa phòng ban",
+            "code": "delete",
+            "route": "HRM/GROUP/DELETE",
+            "description": "Quyền xóa phòng ban ",
+            "feature": "",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 118,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 24,
+            "title": "Sửa phòng ban ",
+            "code": "update",
+            "route": "HRM/GROUP/UPDATE",
+            "description": "Quyền sửa phòng ban ",
+            "feature": "Navigation",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 120,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 24,
+            "title": "Danh sách phòng ban",
+            "code": "manage",
+            "route": "HRM/GROUP/MANAGE",
+            "description": "Quyền hiển thị danh sách phòng ban",
+            "feature": "",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 117,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 24,
+            "title": "Thêm phòng ban mới",
+            "code": "create",
+            "route": "HRM/GROUP/CREATE",
+            "description": "Quyền tạo phòng ban ",
+            "feature": "Navigation",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          }
+        ],
+        "id": 24,
+        "siteId": 1,
+        "moduleId": 6,
+        "title": "Group",
+        "code": "GROUP",
+        "route": "hrm/group",
+        "icon": "ri-article-line",
+        "description": "Quản lý phòng ban",
+        "order": 18,
+        "status": 6,
+        "createdBy": null,
+        "createdOn": null,
+        "updatedBy": null,
+        "updatedOn": null
+      },
+      {
+        "operations": [
+          {
+            "id": 123,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 25,
+            "title": "Xóa vai trò",
+            "code": "delete",
+            "route": "HRM/ROLE/DELETE",
+            "description": "Quyền xóa vai trò ",
+            "feature": "",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 121,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 25,
+            "title": "Thêm vai trò mới",
+            "code": "create",
+            "route": "HRM/ROLE/CREATE",
+            "description": "Quyền tạo vai trò ",
+            "feature": "Navigation",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 122,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 25,
+            "title": "Sửa vai trò ",
+            "code": "update",
+            "route": "HRM/ROLE/UPDATE",
+            "description": "Quyền sửa vai trò ",
+            "feature": "",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 124,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 25,
+            "title": "Danh sách vai trò",
+            "code": "manage",
+            "route": "HRM/ROLE/MANAGE",
+            "description": "Quyền hiển thị danh sách vai trò",
+            "feature": "Navigation",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          }
+        ],
+        "id": 25,
+        "siteId": 1,
+        "moduleId": 6,
+        "title": "Role",
+        "code": "ROLE",
+        "route": "hrm/role",
+        "icon": "ri-article-line",
+        "description": "Quản lý vai trò",
+        "order": 19,
+        "status": 6,
+        "createdBy": null,
+        "createdOn": null,
+        "updatedBy": null,
+        "updatedOn": null
+      },
+      {
+        "operations": [
+          {
+            "id": 125,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 26,
+            "title": "Thêm quyền hạn mới",
+            "code": "create",
+            "route": "HRM/PERMISSION/CREATE",
+            "description": "Quyền tạo quyền hạn ",
+            "feature": "Navigation",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 126,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 26,
+            "title": "Sửa quyền hạn",
+            "code": "update",
+            "route": "HRM/PERMISSION/UPDATE",
+            "description": "Quyền sửa quyền hạn",
+            "feature": "",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 127,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 26,
+            "title": "Xóa quyền hạn",
+            "code": "delete",
+            "route": "HRM/PERMISSION/DELETE",
+            "description": "Quyền xóa quyền hạn ",
+            "feature": "",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 128,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 26,
+            "title": "Danh sách quyền hạn",
+            "code": "manage",
+            "route": "HRM/PERMISSION/MANAGE",
+            "description": "Quyền hiển thị danh sách quyền hạn",
+            "feature": "Navigation",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          }
+        ],
+        "id": 26,
+        "siteId": 1,
+        "moduleId": 6,
+        "title": "Permission",
+        "code": "PERMISSION",
+        "route": "hrm/permission",
+        "icon": "ri-article-line",
+        "description": "Quản lý quyền hạn",
+        "order": 20,
+        "status": 6,
+        "createdBy": null,
+        "createdOn": null,
+        "updatedBy": null,
+        "updatedOn": null
+      },
+      {
+        "operations": [
+          {
+            "id": 133,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 27,
+            "title": "Thêm người dùng mới",
+            "code": "create",
+            "route": "HRM/USER/CREATE",
+            "description": "Quyền tạo người dùng ",
+            "feature": "Navigation",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 134,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 27,
+            "title": "Sửa người dùng ",
+            "code": "update",
+            "route": "HRM/USER/UPDATE",
+            "description": "Quyền sửa người dùng ",
+            "feature": "",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 135,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 27,
+            "title": "Xóa người dùng",
+            "code": "delete",
+            "route": "HRM/USER/DELETE",
+            "description": "Quyền xóa người dùng ",
+            "feature": "",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          },
+          {
+            "id": 136,
+            "siteId": 1,
+            "moduleId": 6,
+            "componentId": 27,
+            "title": "Danh sách người dùng",
+            "code": "manage",
+            "route": "HRM/USER/MANAGE",
+            "description": "Quyền hiển thị danh sách người dùng",
+            "feature": "Navigation",
+            "order": null,
+            "status": 6,
+            "createdBy": 1,
+            "createdOn": "2023-12-13T10:48:47.667016",
+            "updatedBy": null,
+            "updatedOn": null
+          }
+        ],
+        "id": 27,
+        "siteId": 1,
+        "moduleId": 6,
+        "title": "User",
+        "code": "USER",
+        "route": "hrm/user",
+        "icon": "ri-article-line",
+        "description": "Quản lý người dùng",
+        "order": 21,
+        "status": 6,
+        "createdBy": null,
+        "createdOn": null,
+        "updatedBy": null,
+        "updatedOn": null
+      }
+    ],
+    "id": 6,
+    "siteId": 1,
+    "parentId": null,
+    "title": "Quản lý tổ chức",
+    "code": "HRM",
+    "route": null,
+    "icon": "ri-line-chart-fill",
+    "description": "Quản lý tổ chức",
+    "order": 3,
+    "status": 6,
+    "createdBy": null,
+    "createdOn": null,
+    "updatedBy": null,
+    "updatedOn": null
+  },
+  
+]
diff --git a/definitions/base-status.ts b/definitions/base-status.ts
new file mode 100644
index 0000000..6c02842
--- /dev/null
+++ b/definitions/base-status.ts
@@ -0,0 +1,13 @@
+export const baseStatus = [
+  // { title: "All", value: null, key: "" }, // tất cả
+  { title: "Processing", value: 1, key: "1" }, // đang xử lý
+  { title: "Cancelled", value: 2, key: "2" }, // đã hủy
+  { title: "Completed", value: 3, key: "3" }, // hoàn thành
+  { title: "Approving", value: 4, key: "4" }, // chờ duyệt
+  { title: "Approved", value: 5, key: "5" }, // đã duyệt
+  { title: "Activated", value: 6, key: "6" }, // đã kích hoạt
+  { title: "Deactivated", value: 7, key: "7" }, // hủy kích hoạt
+  { title: "Suspended", value: 8, key: "8" }, // đã đình chỉ
+  { title: "Locked", value: 9, key: "9" }, // đã khóa
+  { title: "Deleted", value: -1, key: "-1" }, // đã xóa
+];
diff --git a/definitions/base-taxonomy.ts b/definitions/base-taxonomy.ts
new file mode 100644
index 0000000..c09c125
--- /dev/null
+++ b/definitions/base-taxonomy.ts
@@ -0,0 +1,8 @@
+export const taskTaxonomy = [
+  { title: "Soạn thảo", value: "Soạn thảo", value_number: "1" },
+  { title: "Biên tập", value: "Biên tập", value_number: "2" },
+  { title: "Xem xét", value: "Xem xét", value_number: "3" },
+  { title: "Duyệt bài", value: "Duyệt bài", value_number: "4" },
+  { title: "Xuất bản", value: "Xuất bản", value_number: "5" },
+  { title: "Dàn trang", value: "Dàn trang", value_number: "6" },
+];
diff --git a/definitions/boolean-options.ts b/definitions/boolean-options.ts
new file mode 100644
index 0000000..af5afc7
--- /dev/null
+++ b/definitions/boolean-options.ts
@@ -0,0 +1,5 @@
+export const booleanOptions = [
+    { title: 'True', value: true },
+    { title: 'False', value: false },
+  ];
+  
\ No newline at end of file
diff --git a/definitions/breakpoint.ts b/definitions/breakpoint.ts
new file mode 100644
index 0000000..7ea1d29
--- /dev/null
+++ b/definitions/breakpoint.ts
@@ -0,0 +1,9 @@
+export const breakpoint = {
+    xxs: 0,
+    xs: 375,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1400
+}
\ No newline at end of file
diff --git a/definitions/category-layouts.ts b/definitions/category-layouts.ts
new file mode 100644
index 0000000..ab43c18
--- /dev/null
+++ b/definitions/category-layouts.ts
@@ -0,0 +1,48 @@
+export const categoryLayouts = [
+    {
+        title: 'Bố cục 1',
+        id: 1,
+        thumb: 'https://i.imgur.com/SJMRAv0.jpg'
+    },
+    {
+        title: 'Bố cục 2',
+        id: 2,
+        thumb: 'https://i.imgur.com/QYOe6Wb.jpg'
+    },
+    {
+        title: 'Bố cục 3',
+        id: 3,
+        thumb: 'https://i.imgur.com/IBcBPSA.jpg'
+    },
+    {
+        title: 'Bố cục 4',
+        id: 4,
+        thumb: 'https://i.imgur.com/P2Wu4Vu.jpg'
+    },
+    {
+        title: 'Bố cục 5',
+        id: 5,
+        thumb: 'https://i.imgur.com/2n2LzRZ.jpg'
+    },
+    {
+        title: 'Bố cục 6',
+        id: 6,
+        thumb: ' '
+    },
+    {
+        title: 'Bố cục 7',
+        id: 7,
+        thumb: 'https://i.imgur.com/mRIHVdy.jpg'
+    },
+    {
+        title: 'Bố cục 8',
+        id: 8,
+        thumb: 'https://i.imgur.com/4k0YxaV.jpg'
+    },
+    {
+        title: 'Bố cục 9',
+        id: 9,
+        thumb: 'https://i.imgur.com/GCdGyeb.jpg'
+    },
+
+]
\ No newline at end of file
diff --git a/definitions/cms/advertisement.type.ts b/definitions/cms/advertisement.type.ts
new file mode 100644
index 0000000..4d4cca3
--- /dev/null
+++ b/definitions/cms/advertisement.type.ts
@@ -0,0 +1,4 @@
+export const advertisementType = [
+  { title: "None", value: "None" },
+  { title: "NoEffect", value: "NoEffect" },
+];
diff --git a/definitions/cms/article.type.ts b/definitions/cms/article.type.ts
new file mode 100644
index 0000000..e9d02f7
--- /dev/null
+++ b/definitions/cms/article.type.ts
@@ -0,0 +1,146 @@
+export const articleType = [
+  { title: "None", value: 0 },
+  { title: "Editorial", value: 1 }, // Tự luận - xã luận
+  { title: "General", value: 2 }, // Tổng hợp
+  { title: "Reportage", value: 3 }, // Phóng sự
+  { title: "Interview", value: 4 }, // Phỏng vấn
+  { title: "Survey", value: 5 }, // Khảo sát
+  { title: "Tutorial", value: 6 }, // Hướng dẫn
+  { title: "Podcast", value: 7 }, // Tin tiếng
+  { title: "Broadcast", value: 8 }, // Trực tuyến
+  { title: "Talkshow", value: 9 }, // Tọa đàm
+  { title: "Livestream", value: 10 }, // Phát trực tiếp
+  { title: "Translation", value: 11 }, // Dịch thuật
+  { title: "Promotion", value: 12 }, // Quảng bá
+];
+
+export const articleLayout = [
+  { title: "None", value: 0 },
+  { title: "Normal", value: 1 }, // Thông thường
+  { title: "Short", value: 2 }, // Ngắn
+  { title: "Long", value: 3 }, // Dài
+  { title: "Page", value: 4 }, // Trang
+];
+
+export const articleContentType = [
+  { title: "None", value: 0 },
+  { title: "General", value: 1 }, //Tổng hợp
+  { title: "Photo", value: 2 }, // Ảnh
+  { title: "Audio", value: 3 }, // Âm thanh
+  { title: "Video", value: 4 }, // Video
+  { title: "Graphic", value: 5 }, // Đồ họa
+  { title: "Document", value: 6 }, // Văn bản
+  { title: "Interaction", value: 7 }, // Tương tác (Poll, Quiz)
+];
+
+export const articleComponentType = [
+  { title: "None", value: 0 },
+  { title: "Sub", value: 1 }, //Tiền tố
+  { title: "Title", value: 2 }, // Tiêu đề
+  { title: "Intro", value: 3 }, // Giới thiệu
+  { title: "Brief", value: 4 }, // Tóm tắt nội dung
+  { title: "Detail", value: 5 }, // Nội dung chi tiết
+  { title: "Sumary", value: 6 }, // Tóm tắt bài viết
+  { title: "Represent", value: 7 }, // Nội dung đại diện
+];
+
+export const articleStateType = [
+  { title: "None", value: 0 },
+  { title: "Drafting", value: 5 }, // Soạn thảo
+  { title: "Polishing", value: 10 }, // Hoàn thiện
+  { title: "Reviewing", value: 15 }, // Xem xét
+  { title: "Approving", value: 20 }, // Duyệt bài
+  { title: "Publishing", value: 25 }, // Xuất bản
+  { title: "UnPublishing", value: 30 }, // Hủy xuất bản
+];
+
+export const articlePublishType = [
+  // { title: "None", value: 0 },
+  { title: "Digital", value: 1 }, // Xuất bản số
+  { title: "Printing", value: 2 }, // Xuất bản in
+  { title: "Sharing", value: 3 }, // xuất bản chia sẻ
+  { title: "Digital_Printing", value: 12 }, // xuất bản số và in ấn
+  { title: "All", value: 99 },
+];
+
+export const articleInteractionType = [
+  { title: "View", value: "View" }, // Xem
+  { title: "Like", value: "Like" }, // Thích
+  { title: "Rate", value: "Rate" }, // Đánh giá
+  { title: "Share", value: "Share" }, // Chia sẻ
+  { title: "Report", value: "Report" }, // Báo cáo
+  { title: "Comment", value: "Comment" }, // Bình luận
+  { title: "Download", value: "Download" }, // Tải về
+  { title: "Follow", value: "Follow" }, // Theo dõi
+  { title: "Bookmark", value: "Bookmark" }, // Đánh dấu
+  { title: "Subscribe", value: "Subscribe" }, // Đăng ký theo dõi
+  { title: "PollSubmit", value: "PollSubmit" }, // Thực hiện bình chọn
+  { title: "QuizSubmit", value: "QuizSubmit" }, // Thực hiện trắc ngiệm
+  { title: "SurveySubmit", value: "SurveySubmit" }, // Thực hiện khảo sát
+];
+
+export const articleCommentType = [
+  { title: "None", value: 0 },
+  { title: "Comment", value: 1 }, // Bình luận
+  { title: "ReplyComment", value: 2 }, // Phản hồi
+];
+
+export const interactionType = [
+  { title: "View", value: "View" }, // Xem
+  { title: "Like", value: "Like" }, // Thích
+  { title: "Rate", value: "Rate" }, // Đánh giá
+  { title: "Share", value: "Share" }, // Chia sẻ
+  { title: "Report", value: "Report" }, // Báo cáo
+  { title: "Comment", value: "Comment" }, // Bình luận
+  { title: "Download", value: "Download" }, // Tải về
+  { title: "Follow", value: "Follow" }, // Theo dõi
+  { title: "Bookmark", value: "Bookmark" }, // Đánh dấu
+  { title: "Subscribe", value: "Subscribe" }, // Đăng ký theo dõi
+  { title: "PollSubmit", value: "PollSubmit" }, // Thực hiện bình chọn
+  { title: "QuizSubmit", value: "QuizSubmit" }, // Thực hiện trắc ngiệm
+  { title: "SurveySubmit", value: "SurveySubmit" }, // Thực hiện khảo sát
+];
+
+export const articleRelationType = [
+  { title: "None", value: 0 },
+  { title: "SameContent", value: 1 },
+  { title: "SameTag", value: 2 },
+  { title: "SameFigure", value: 3 },
+  { title: "SameLocation", value: 4 },
+  { title: "SameAuthor", value: 5 },
+  { title: "SameCategory", value: 6 },
+  { title: "SameTopic", value: 7 },
+  { title: "SameEvent", value: 8 },
+  { title: "SameCollection", value: 9 },
+];
+
+export const articleReportType = [
+  { title: "None", value: 0 },
+  { title: "Author", value: 1 }, // Tác giả
+  { title: "Content", value: 2 }, // Nội dung
+  { title: "Copyright", value: 3 }, // Bản quyền
+  { title: "Other", value: 99 }, // Khác
+];
+
+export const articleSourceType = [
+  { title: "None", value: 0 },
+  { title: "Synthesize", value: 1 }, // Tổng hợp
+  { title: "GenerativeAI", value: 2 }, // Trí tuệ nhân tạo
+  { title: "SearchEngine", value: 3 }, // Máy tìm kiếm
+  { title: "SocialNetwork", value: 4 }, // Mạng xã hội
+  { title: "Other", value: 99 }, // Khác
+];
+
+export const digitalArticleCommentType = [
+  { title: "None", value: 0 },
+  { title: "Comment", value: 1 }, // Bình luận
+  { title: "ReplyComment", value: 2 }, // Phản hồi
+];
+
+export const sharingSiteType = [
+  // { title: "None", value: 0 },
+  { title: "Facebook", value: 1 },
+  { title: "Tiwtter", value: 2 },
+  { title: "Youtube", value: 6 },
+  // { title: "Tiktok", value: 7 },
+];
diff --git a/definitions/cms/attachment.type.ts b/definitions/cms/attachment.type.ts
new file mode 100644
index 0000000..1dccecb
--- /dev/null
+++ b/definitions/cms/attachment.type.ts
@@ -0,0 +1 @@
+export const attachmentType = [{ title: "None", value: 0 }];
diff --git a/definitions/cms/audio.type.ts b/definitions/cms/audio.type.ts
new file mode 100644
index 0000000..0a100f6
--- /dev/null
+++ b/definitions/cms/audio.type.ts
@@ -0,0 +1 @@
+export const audioType = [{ title: "None", value: 0 }];
diff --git a/definitions/cms/author.type.ts b/definitions/cms/author.type.ts
new file mode 100644
index 0000000..f13ed1e
--- /dev/null
+++ b/definitions/cms/author.type.ts
@@ -0,0 +1,5 @@
+export const authorType = [
+  { title: "None", value: 0 },
+  { title: "Reporter", value: 1 }, // Phóng viên
+  { title: "Other", value: 99 }, // Khác
+];
diff --git a/definitions/cms/category.type.ts b/definitions/cms/category.type.ts
new file mode 100644
index 0000000..e921316
--- /dev/null
+++ b/definitions/cms/category.type.ts
@@ -0,0 +1,20 @@
+export const categoryType = [
+  { title: "None", value: 0 }, // Không xác định
+  { title: "Normal", value: 1 }, // Thông thường
+  { title: "Section", value: 2 }, // Chuyên trang
+  { title: "Other", value: 99 }, // Khác
+
+  // { title: "None", value: 0 }, // Không xác định
+  // { title: "Home", value: 1 }, // Thông thường
+  // { title: "Subsite", value: 2 }, // Chuyên trang
+  // { title: "Normal", value: 3 }, // Thông thường
+  // { title: "Other", value: 99 }, // Khác
+];
+
+export const categoryPublishType = [
+  { title: "None", value: 0 }, // Chưa xác định
+  { title: "Digital", value: 1 }, // Xuất bản số
+  { title: "Printing", value: 2 }, // Xuất bản in ấn
+  { title: "Sharing", value: 3 }, // Xuất bản chia sẻ
+  { title: "Other", value: 99 }, // Khác
+];
diff --git a/definitions/cms/collection.type.ts b/definitions/cms/collection.type.ts
new file mode 100644
index 0000000..50c7505
--- /dev/null
+++ b/definitions/cms/collection.type.ts
@@ -0,0 +1,15 @@
+export const collectionType = [
+  { title: "None", value: 0 },
+  { title: "Normal", value: 1 }, // Thông thường
+  { title: "Section", value: 2 }, // Chuyên trang
+  { title: "Other", value: 99 }, // Khác
+];
+
+export const collectionPublishType = [
+    { title: "None", value: 0 }, // Chưa xác định
+    { title: "Digital", value: 1 }, // Xuất bản số
+    { title: "Printing", value: 2 }, // Xuất bản in ấn
+    { title: "Sharing", value: 3 }, // Xuất bản chia sẻ
+    { title: "Other", value: 99 }, // Khác
+  ];
+  
\ No newline at end of file
diff --git a/definitions/cms/criteria.type.ts b/definitions/cms/criteria.type.ts
new file mode 100644
index 0000000..673adc0
--- /dev/null
+++ b/definitions/cms/criteria.type.ts
@@ -0,0 +1,8 @@
+export const criteriasType = [
+    { title: 'None', value: 0 },
+    { title: 'Category', value: 1 },
+    { title: 'Topic', value: 2 },
+    { title: 'Event', value: 3 },
+    { title: 'Article', value: 4 },
+    { title: 'Author', value: 5 },
+];
\ No newline at end of file
diff --git a/definitions/cms/document.type.ts b/definitions/cms/document.type.ts
new file mode 100644
index 0000000..fbefdd2
--- /dev/null
+++ b/definitions/cms/document.type.ts
@@ -0,0 +1 @@
+export const documentType = [{ title: "None", value: 0 }];
diff --git a/definitions/cms/event.type.ts b/definitions/cms/event.type.ts
new file mode 100644
index 0000000..2393f55
--- /dev/null
+++ b/definitions/cms/event.type.ts
@@ -0,0 +1,14 @@
+export const eventType = [
+  { title: "None", value: 0 }, // Chưa xác định
+  { title: "Normal", value: 1 }, // Thông thường
+  { title: "Section", value: 2 }, // Chuyên trang
+  { title: "Other", value: 99 }, // Khác
+];
+
+export const eventPublishType = [
+  { title: "None", value: 0 }, // Chưa xác định
+  { title: "Digital", value: 1 }, // Xuất bản số
+  { title: "Printing", value: 2 }, // Xuất bản in ấn
+  { title: "Sharing", value: 3 }, // Xuất bản chia sẻ
+  { title: "Other", value: 99 }, // Khác
+];
diff --git a/definitions/cms/exception-messages.ts b/definitions/cms/exception-messages.ts
new file mode 100644
index 0000000..58c3109
--- /dev/null
+++ b/definitions/cms/exception-messages.ts
@@ -0,0 +1,17 @@
+export const exceptionMessages = [
+    { title: 'Unhandled exception', value: 'UnhandledException' },
+    { title: 'Invalid argument {0}', value: 'InvalidArgument' },
+    { title: 'Unable to {0}', value: 'UnableTo' },
+    { title: '{0} is unavailable', value: 'Unavailable' },
+    { title: '{0} is unauthorized', value: 'Unauthorized' },
+    { title: '{0} is unauthenticated', value: 'Unauthenticated' },
+    { title: '{0} does not exist', value: 'NotExist' },
+    { title: '{0} is not valid', value: 'NotValid' },
+    { title: '{0} is not ready', value: 'NotReady' },
+    { title: '{0} is not allowed', value: 'NotAllowed' },
+    { title: '{0} is not activated', value: 'NotActivated' },
+    { title: '{0} has expired', value: 'HasExpired' },
+    { title: '{0} has been deleted', value: 'HasDeleted' },
+    { title: '{0} failed', value: 'Failed' },
+  ];
+  
\ No newline at end of file
diff --git a/definitions/cms/figure.type.ts b/definitions/cms/figure.type.ts
new file mode 100644
index 0000000..c266cac
--- /dev/null
+++ b/definitions/cms/figure.type.ts
@@ -0,0 +1,8 @@
+export const figureType = [
+  { title: "None", value: 0 },
+  { title: "Genius", value: 1 }, // Vĩ nhân
+  { title: "Celebrity", value: 2 }, // Người nổi tiếng
+  { title: "Politician", value: 3 }, // Chính trị gia
+  { title: "Businessman", value: 4 }, // Doanh nhân
+  { title: "Other", value: 99 }, // Khác
+];
diff --git a/definitions/cms/image.type.ts b/definitions/cms/image.type.ts
new file mode 100644
index 0000000..5861a07
--- /dev/null
+++ b/definitions/cms/image.type.ts
@@ -0,0 +1,7 @@
+export const imageType = [{ title: "None", value: 0 }];
+
+export const imageEffectType = [
+  { title: "None", value: null }, // Không hiệu ứng
+  { title: "NoEffect", value: "NoEffect" }, // Không hiệu ứng
+  { title: "SwitchBar", value: "SwitchBar" }, // Thanh chuyển đổi | https://vnexpress.net/gaza-tan-hoang-duoi-don-khong-kich-cua-israel-4669473.html"
+];
diff --git a/definitions/cms/index.ts b/definitions/cms/index.ts
new file mode 100644
index 0000000..e2900eb
--- /dev/null
+++ b/definitions/cms/index.ts
@@ -0,0 +1,62 @@
+export { advertisementType } from "./advertisement.type";
+export {
+  articleType,
+  articleLayout,
+  articleContentType,
+  articleComponentType,
+  articleStateType,
+  articlePublishType,
+  articleInteractionType,
+  articleCommentType,
+  interactionType,
+  articleRelationType,
+  articleReportType,
+  articleSourceType,
+  digitalArticleCommentType,
+  sharingSiteType,
+} from "./article.type";
+
+export { attachmentType } from "./attachment.type";
+export { audioType } from "./audio.type";
+export { authorType } from "./author.type";
+export { categoryType, categoryPublishType } from "./category.type";
+export { collectionType, collectionPublishType } from "./collection.type";
+export { documentType } from "./document.type";
+export { eventType, eventPublishType } from "./event.type";
+export { figureType } from "./figure.type";
+export { imageType, imageEffectType } from "./image.type";
+export { keywordType } from "./keyword.type";
+export { linkType } from "./link.type";
+export { locationType } from "./location.type";
+export { multimediaType, multimediaEffectType } from "./multimedia.type";
+export { navigationType } from "./navigation.type";
+export {
+  pageTypes,
+  pageComponentTypes,
+  pageSectionTypes,
+  pageTaxonomy,
+  pageSectionTaxonomy,
+  pageDataQuery,
+  pageDataType,
+  pageComponentTaxonomy,
+  pageLayouts,
+  pageTemplates,
+  pageSectionLayouts,
+  pageComponentLayouts,
+  pageComponentTemplates,
+} from "./page.type";
+export { placementType } from "./placement.type";
+export { pollType, pollParticipantType, pollOptionType, pollResultPublication } from "./poll.type";
+export { printinEditionType, printingPageType, printingPublicationType } from "./printing.type";
+export { qualificationType } from "./qualification.type";
+export { quizType, quizAnswerType, quizQuestionType, quizResponseType, quizParticipantType, quizResultPublication } from "./quiz.type";
+export { quotationType } from "./quotation.type";
+export { readerType } from "./reader.type";
+export { redirectionType } from "./redirection.type";
+export { sectionType } from "./section.type";
+export { surveyType, surveyParticipantType, surveyResultPublication, surveyAnswerType, surveyQuestionType, surveyResponseType } from "./survey.type";
+export { tagType } from "./tag.type";
+export { templateType } from "./template.type";
+export { criteriasType } from "./criteria.type";
+export { topicType, topicPublishType } from "./topic.type";
+export { scoreCategoryType } from "./score-category.type";
diff --git a/definitions/cms/keyword.type.ts b/definitions/cms/keyword.type.ts
new file mode 100644
index 0000000..1bb6ca8
--- /dev/null
+++ b/definitions/cms/keyword.type.ts
@@ -0,0 +1,4 @@
+export const keywordType = [
+  {title: "None", value: 0 }// Chưa xác định
+];
+  
\ No newline at end of file
diff --git a/definitions/cms/link.type.ts b/definitions/cms/link.type.ts
new file mode 100644
index 0000000..b25ac94
--- /dev/null
+++ b/definitions/cms/link.type.ts
@@ -0,0 +1,5 @@
+export const linkType = [
+  { title: "None", value: 0 },
+  { title: "Internal", value: 1 }, // Bên trong
+  { title: "External", value: 2 }, // Bên ngoài
+];
diff --git a/definitions/cms/location.type.ts b/definitions/cms/location.type.ts
new file mode 100644
index 0000000..cd3ea79
--- /dev/null
+++ b/definitions/cms/location.type.ts
@@ -0,0 +1 @@
+export const locationType = [{ title: "None", value: 0 }];
diff --git a/definitions/cms/multimedia.type.ts b/definitions/cms/multimedia.type.ts
new file mode 100644
index 0000000..5cd1821
--- /dev/null
+++ b/definitions/cms/multimedia.type.ts
@@ -0,0 +1,5 @@
+export const multimediaType = [{ title: "None", value: 0 }];
+export const multimediaEffectType = [
+  { title: "None", value: null }, // Không hiệu ứng
+  { title: "NoEffect", value: "NoEffect" }, // Không hiệu ứng
+];
diff --git a/definitions/cms/navigation.type.ts b/definitions/cms/navigation.type.ts
new file mode 100644
index 0000000..2f199c7
--- /dev/null
+++ b/definitions/cms/navigation.type.ts
@@ -0,0 +1,5 @@
+export const navigationType = [
+  { title: "None", value: 0 },
+  { title: "Primary", value: 1 },
+  { title: "Secondary", value: 2 },
+];
diff --git a/definitions/cms/page.type.ts b/definitions/cms/page.type.ts
new file mode 100644
index 0000000..e988734
--- /dev/null
+++ b/definitions/cms/page.type.ts
@@ -0,0 +1,174 @@
+import { enumPageComponentTemplates, enumPageComponentLayouts, enumPageSectionLayouts, templates } from "@/definitions/enum";
+
+export const pageTypes = [
+  { title: "None", value: 0 }, // Không xác định
+  { title: "Home", value: 1 }, // Trang chủ
+  { title: "Section", value: 2 }, // Chuyên trang
+  { title: "Category", value: 3 }, // Trang danh mục
+  { title: "Topic", value: 4 }, // Trang chủ đề
+  { title: "Event", value: 5 }, // Trang sự kiện
+  { title: "Collection", value: 6 }, // Trang sưu tập
+  { title: "Article", value: 7 }, // Trang bài viết
+  { title: "Tag", value: 8 }, // Trang từ khóa
+  { title: "Author", value: 9 }, // Trang tác giả
+  { title: "Search", value: 10 }, // Trang tìm kiếm
+  { title: "Contact", value: 11 }, // Trang liên hệ
+  { title: "About", value: 12 }, // Trang giới thiệu
+  { title: "Service", value: 13 }, // Trang dịch vụ
+  { title: "Policy", value: 14 }, // Trang chính sách
+  { title: "Terms", value: 15 }, // Trang điều khoản
+  { title: "Privacy", value: 16 }, // Trang bảo mật
+  { title: "Error", value: 97 }, // Trang lỗi
+  { title: "Maintenance", value: 98 }, // Trang bảo trì
+  { title: "Custom", value: 99 }, // Trang tùy chỉnh
+];
+// LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4
+
+export const pageLayouts = (key: string)=>{
+  if (key === "Article") {
+    return [
+      { title: "Normal", value: 1, key: "ARTICLE_SHORT_LAYOUT" },
+      { title: "Short", value: 2, key: "ARTICLE_SHORT_LAYOUT" },
+      { title: "Long", value: 3, key: "ARTICLE_LONG_LAYOUT" },
+      { title: "Page", value: 4, key: "ARTICLE_PAGE_LAYOUT" },
+    ];
+  } else {
+    return [
+      { title: "None", value: 0 }, // Không xác định
+      { title: "Full Page", value: "Full_Page" }, // full with 100%
+      { title: "Center Page", value: "Center_Page" }, // ở giữa
+      { title: "Backgroud Page", value: "Backgroud_Page" }, // Phân trang
+    ];
+  }
+};
+
+export const pageTemplates = [
+  { title: "None", value: "None" }, // Không xác định
+  { title: "Home", value: "Home" }, // Trang chủ
+  { title: "Section", value: "Section" }, // Chuyên trang
+  { title: "Category", value: "Category" }, // Trang danh mục
+  { title: "Topic", value: "Topic" }, // Trang chủ đề
+  { title: "Event", value: "Event" }, // Trang sự kiện
+  { title: "Collection", value: "Collection" }, // Trang sưu tập
+  { title: "Article", value: "Article" }, // Trang bài viết
+  { title: "Tag", value: "Tag" }, // Trang từ khóa
+  { title: "Author", value: "Author" }, // Trang tác giả
+  { title: "Search", value: "Search" }, // Trang tìm kiếm
+  { title: "Contact", value: "Contact" }, // Trang liên hệ
+  { title: "About", value: "About" }, // Trang giới thiệu
+  { title: "Service", value: "Service" }, // Trang dịch vụ
+  { title: "Policy", value: "Policy" }, // Trang chính sách
+  { title: "Terms", value: "Terms" }, // Trang điều khoản
+  { title: "Privacy", value: "Privacy" }, // Trang bảo mật
+  { title: "Error", value: "Error" }, // Trang lỗi
+  { title: "Maintenance", value: "Maintenance" }, // Trang bảo trì
+  { title: "Custom", value: "Custom" }, // Trang tùy chỉnh
+];
+
+export const pageComponentTemplates = [
+  { title: "None", value: "None" }, // Không xác định
+  { title: "Section", value: "Section" }, // Chuyên trang
+  { title: "Category", value: "Category" }, // Trang danh mục
+  { title: "Topic", value: "Topic" }, // Trang chủ đề
+  { title: "Event", value: "Event" }, // Trang sự kiện
+  { title: "Collection", value: "Collection" }, // Trang sưu tập
+  { title: "Article", value: "Article" }, // Trang bài viết
+  { title: "Tag", value: "Tag" }, // Trang từ khóa
+  { title: "Author", value: "Author" }, // Trang tác giả
+  { title: "Poll", value: "Poll" }, // Trang poll
+  { title: "Quiz", value: "Quiz" }, // Trang quiz
+  { title: "Survey", value: "Survey" }, // Trang survey
+  { title: "Advertising", value: "Advertising" }, // Trang quảng cáo
+  { title: "Other", value: "Other" }, // Trang khác
+];
+
+export const pageComponentTypes = [
+  { title: "None", value: 0 }, // Không xác định
+  { title: "Individual", value: 1 }, // Đơn lẻ
+  { title: "Collection", value: 2 }, // Sưu tập
+  { title: "Pagination", value: 3 }, // Phân trang
+];
+
+export const pageSectionTypes = [
+  { title: "None", value: 0 }, // Không xác định
+  { title: "Block", value: 1 }, // Khối
+];
+
+export const pageTaxonomy = [
+  { title: "Block", value: 0 },
+  { title: "Module", value: 1 },
+  { title: "Navigation", value: 2 },
+];
+
+export const pageSectionTaxonomy = [
+  { title: "Block", value: "Block" },
+  { title: "Module", value: "Module" },
+  { title: "Navigation", value: "Navigation" },
+];
+
+export const pageDataType = [
+  { title: "Section", value: "Section" },
+  { title: "Category", value: "Category" },
+  { title: "Topic", value: "Topic" },
+  { title: "Event", value: "Event" },
+  { title: "Collection", value: "Collection" },
+  { title: "Article", value: "Article" },
+  { title: "Tag", value: "Tag" },
+  { title: "Author", value: "Author" },
+  { title: "Poll", value: "Poll" },
+  { title: "Quiz", value: "Quiz" },
+  { title: "Survey", value: "Survey" },
+  { title: "Advertising", value: "Advertising" },
+  { title: "Other", value: "Other" },
+];
+
+export const pageDataQuery = [
+  { title: "IDS", value: "IDS" },
+  { title: "NEW", value: "NEW" },
+  { title: "VIEW", value: "VIEW" },
+  { title: "SQL", value: "SQL" },
+  { title: "REQUEST", value: "REQUEST" },
+];
+
+export const pageComponentTaxonomy = [
+  { title: "Block", value: 0 },
+  { title: "Module", value: 1 },
+  { title: "Navigation", value: 2 },
+];
+
+export const pageSectionLayouts = [
+  { title: "None", value: "None" },
+  { title: "2 Cột", value: enumPageSectionLayouts['VERTICAL_TWO'] },
+  { title: "2 Cột, bên trái rộng", value: enumPageSectionLayouts['VERTICAL_LEFT_TWO'] },
+  { title: "2 Cột, bên phải rộng", value: enumPageSectionLayouts['VERTICAL_RIGHT_TWO'] },
+  { title: "3 Cột", value: enumPageSectionLayouts['VERTICAL_THREE'] },
+  { title: "4 Cột", value: enumPageSectionLayouts['VERTICAL_FOUR'] },
+  { title: "1 Hàng", value: enumPageSectionLayouts['HORIZONTAL_ONE'] },
+  { title: "2 Hàng", value: enumPageSectionLayouts['HORIZONTAL_TWO'] },
+  { title: "3 Hàng", value: enumPageSectionLayouts['HORIZONTAL_THREE'] },
+  { title: "4 Hàng", value: enumPageSectionLayouts['HORIZONTAL_FOUR'] },
+  { title: "5 Hàng", value: enumPageSectionLayouts['HORIZONTAL_FIVE'] },
+  { title: "6 Hàng", value: enumPageSectionLayouts['HORIZONTAL_SIX'] },
+  { title: "7 Hàng", value: enumPageSectionLayouts['HORIZONTAL_SEVEN'] },
+  { title: "8 Hàng", value: enumPageSectionLayouts['HORIZONTAL_EIGHT'] },
+  { title: "9 Hàng", value: enumPageSectionLayouts['HORIZONTAL_NINE'] },
+  { title: "10 Hàng", value: enumPageSectionLayouts['HORIZONTAL_TEN'] }
+];
+
+export const pageComponentLayouts = {
+  [`${enumPageComponentTemplates.ARTICLE}`]: [
+    { title: "None", value: "None" },
+    { title: "Trình bày ngang", value: enumPageComponentLayouts[enumPageComponentTemplates.ARTICLE]['HORIZONTAL'] },
+    { title: "Trình bày dọc", value: enumPageComponentLayouts[enumPageComponentTemplates.ARTICLE]['VERTICAL'] },
+    { title: "Ngang và ẩn Giới thiệu", value: enumPageComponentLayouts[enumPageComponentTemplates.ARTICLE]['HORIZONTAL-HIDE_PARAGRAPH'] },
+    { title: "Dọc và ẩn Hình ảnh", value: enumPageComponentLayouts[enumPageComponentTemplates.ARTICLE]['VERTICAL-HIDE_THUMBNAIL'] },
+    { title: "Dọc và ẩn Giới thiệu", value: enumPageComponentLayouts[enumPageComponentTemplates.ARTICLE]['VERTICAL-HIDE_PARAGRAPH'] },
+    { title: "Dọc và ẩn Giới thiệu, ngược", value: enumPageComponentLayouts[enumPageComponentTemplates.ARTICLE]['VERTICAL-HIDE_PARAGRAPH-REVERSE'] },
+  ],
+  [`${enumPageComponentTemplates.CATEGORY}`]: [
+    { title: "Danh mục", value: enumPageComponentLayouts[enumPageComponentTemplates.CATEGORY]['DEFAULT'] }
+  ],
+  [`${enumPageComponentTemplates.COLLECTION}`]: [
+    { title: "Cụm Bài viết 5 phần tử, Bài viết ngang", value: enumPageComponentLayouts[enumPageComponentTemplates.COLLECTION]['ARTICLE-VERTICAL-|HORIZONTAL|-MAX_5'] },
+  ]
+};
diff --git a/definitions/cms/placement.type.ts b/definitions/cms/placement.type.ts
new file mode 100644
index 0000000..1b111f7
--- /dev/null
+++ b/definitions/cms/placement.type.ts
@@ -0,0 +1,3 @@
+export const placementType = [
+  { title: "None", value: 0 }, // Không xác định
+];
diff --git a/definitions/cms/poll.type.ts b/definitions/cms/poll.type.ts
new file mode 100644
index 0000000..d5f2afc
--- /dev/null
+++ b/definitions/cms/poll.type.ts
@@ -0,0 +1,19 @@
+export const pollType = [
+  { title: "None", value: 0 },
+  { title: "SingleSelection", value: 1 }, // Đơn lựa chọn
+  { title: "MultipleSelections", value: 2 }, // Nhiều lựa chọn
+];
+export const pollParticipantType = [
+  { title: "None", value: 0 },
+  { title: "Guest", value: 1 }, // Khách
+  { title: "Logged", value: 2 }, // Xác thực
+  { title: "All", value: 3 }, // Tất cả
+];
+export const pollOptionType = [{ title: "None", value: 0 }];
+
+export const pollResultPublication = [
+  { title: 'Not Public', value: 0 }, // Không công khai
+  { title: 'Always Public', value: 1 }, // Luôn luôn công khai
+  { title: 'After Answered All', value: 2 }, // Sau khi kiểm tra
+  { title: 'At The End', value: 3 }, // Sau khi kiểm tra kết thúc
+];
\ No newline at end of file
diff --git a/definitions/cms/printing.type.ts b/definitions/cms/printing.type.ts
new file mode 100644
index 0000000..dda4779
--- /dev/null
+++ b/definitions/cms/printing.type.ts
@@ -0,0 +1,8 @@
+export const printinEditionType = [{ title: "None", value: 0 }];
+export const printingPageType = [
+  { title: "None", value: 0 },
+  { title: "CoverPage", value: 1 }, // Trang bìa
+  { title: "MiddlePage", value: 2 }, // Trang giữa
+  { title: "LastPage", value: 3 }, // Trang cuối
+];
+export const printingPublicationType = [{ title: "None", value: 0 }];
diff --git a/definitions/cms/qualification.type.ts b/definitions/cms/qualification.type.ts
new file mode 100644
index 0000000..44b1f79
--- /dev/null
+++ b/definitions/cms/qualification.type.ts
@@ -0,0 +1,9 @@
+export const qualificationType = [
+    { title: 'None', value: 0 },
+    { title: 'Quality', value: 1 },
+    { title: 'Interaction', value: 2 },
+    { title: 'Contribution', value: 3 },
+    { title: 'Professional', value: 4 },
+    { title: 'Adjustment', value: 5 },
+    { title: 'Bonus', value: 6 },
+];
diff --git a/definitions/cms/quiz.type.ts b/definitions/cms/quiz.type.ts
new file mode 100644
index 0000000..af91978
--- /dev/null
+++ b/definitions/cms/quiz.type.ts
@@ -0,0 +1,40 @@
+export const quizType = [{ title: "None", value: 0 }];
+
+export const pollType = [
+  { title: "None", value: 0 },
+  { title: "Guest", value: 1 }, // Khách
+  { title: "Logged", value: 2 }, // Xác thực
+  { title: "All", value: 3 }, // Tất cả
+];
+
+export const quizAnswerType = [
+  { title: "None", value: 0 },
+  { title: "Tick", value: 1 }, //chọn đáp án
+  { title: "Input", value: 2 }, // nhập đáp án
+];
+
+export const quizQuestionType = [
+  { title: "None", value: 0 }, // Không xác định
+  { title: "Single Selection", value: 1 }, // Đơn lựa chọn
+  { title: "Multiple Selections", value: 2 }, // Nhiều lựa chọn
+];
+
+export const quizResponseType = [
+  { title: "None", value: 0 },
+  { title: "Tick", value: 1 }, //chọn đáp án
+  { title: "Input", value: 2 }, // nhập đáp án
+];
+
+export const quizParticipantType = [
+
+  { title: 'Guest', value: 1 }, // Khách
+  { title: 'Logged', value: 2 }, // Xác thực
+  { title: 'All', value: 3 }, // Tất cả
+];
+
+export const quizResultPublication = [
+  { title: 'Not Public', value: 0 }, // Không công khai
+  { title: 'Always Public', value: 1 }, // Luôn luôn công khai
+  { title: 'After Answered All', value: 2 }, // Sau khi kiểm tra
+  { title: 'At The End', value: 3 }, // Sau khi kiểm tra kết thúc
+];
\ No newline at end of file
diff --git a/definitions/cms/quotation.type.ts b/definitions/cms/quotation.type.ts
new file mode 100644
index 0000000..80980f8
--- /dev/null
+++ b/definitions/cms/quotation.type.ts
@@ -0,0 +1 @@
+export const quotationType = [{ title: "None", value: 0 }];
diff --git a/definitions/cms/reader.type.ts b/definitions/cms/reader.type.ts
new file mode 100644
index 0000000..277dda4
--- /dev/null
+++ b/definitions/cms/reader.type.ts
@@ -0,0 +1,6 @@
+export const readerType = [
+  { title: "None", value: 0 },
+  { title: "Guest", value: 1 }, // Khách
+  { title: "Logged", value: 2 }, // Xác thực
+  { title: "All", value: 3 }, // Tất cả
+];
diff --git a/definitions/cms/redirection.type.ts b/definitions/cms/redirection.type.ts
new file mode 100644
index 0000000..d272aad
--- /dev/null
+++ b/definitions/cms/redirection.type.ts
@@ -0,0 +1,7 @@
+export const redirectionType = [
+  { title: "None", value: 0 },
+  { title: "Blank", value: 1 },
+  { title: "Self", value: 2 },
+  { title: "Parent", value: 3 },
+  { title: "Top", value: 4 },
+];
diff --git a/definitions/cms/score-category.type.ts b/definitions/cms/score-category.type.ts
new file mode 100644
index 0000000..4849374
--- /dev/null
+++ b/definitions/cms/score-category.type.ts
@@ -0,0 +1,10 @@
+export const scoreCategoryType = [
+    {
+        title: "Báo in",
+        value: 1
+    },
+    {
+        title: "Báo điện tử",
+        value: 2
+    }
+]
\ No newline at end of file
diff --git a/definitions/cms/section.type.ts b/definitions/cms/section.type.ts
new file mode 100644
index 0000000..dc8a8f1
--- /dev/null
+++ b/definitions/cms/section.type.ts
@@ -0,0 +1 @@
+export const sectionType = [{ title: "None", value: 0 }];
diff --git a/definitions/cms/survey.type.ts b/definitions/cms/survey.type.ts
new file mode 100644
index 0000000..c899d90
--- /dev/null
+++ b/definitions/cms/survey.type.ts
@@ -0,0 +1,31 @@
+export const surveyType = [{ title: "None", value: 0 }];
+export const surveyParticipantType = [
+  { title: "None", value: 0 },
+  { title: "Guest", value: 1 }, // Khách
+  { title: "Logged", value: 2 }, // Xác thực
+  { title: "All", value: 3 }, // Tất cả
+];
+export const surveyResultPublication = [
+  { title: "Not Public", value: 0 }, // Không công khai
+  { title: "Always Public", value: 1 }, // Luôn luôn công khai
+  { title: "After Answered All", value: 2 }, // Sau khi kiểm tra
+  { title: "At The End", value: 3 }, // Sau khi kiểm tra kết thúc
+];
+
+export const surveyAnswerType = [
+  { title: "None", value: 0 },
+  { title: "Tick", value: 1 },
+  { title: "Input", value: 2 },
+];
+
+export const surveyQuestionType = [
+  { title: "None", value: 0 },
+  { title: "Single Selection", value: 1 },
+  { title: "Multiple Selections", value: 2 },
+];
+
+export const surveyResponseType = [
+  { title: "None", value: 0 },
+  { title: "Tick", value: 1 },
+  { title: "Input", value: 2 },
+];
diff --git a/definitions/cms/tag.type.ts b/definitions/cms/tag.type.ts
new file mode 100644
index 0000000..fb97c47
--- /dev/null
+++ b/definitions/cms/tag.type.ts
@@ -0,0 +1 @@
+export const tagType = [{ title: "None", value: 0 }];
diff --git a/definitions/cms/template.type.ts b/definitions/cms/template.type.ts
new file mode 100644
index 0000000..c25c856
--- /dev/null
+++ b/definitions/cms/template.type.ts
@@ -0,0 +1,6 @@
+export const templateType = [
+  { title: "None", value: 0 },
+  { title: "Post", value: 1 },
+  { title: "Page", value: 2 },
+  { title: "Other", value: 99 },
+];
diff --git a/definitions/cms/topic.type.ts b/definitions/cms/topic.type.ts
new file mode 100644
index 0000000..af974d1
--- /dev/null
+++ b/definitions/cms/topic.type.ts
@@ -0,0 +1,14 @@
+export const topicType = [
+  { title: "None", value: 0 },
+  { title: "Normal", value: 1 },
+  { title: "Subsite", value: 2 },
+  { title: "Other", value: 99 },
+];
+
+export const topicPublishType = [
+  { title: "None", value: 0 },
+  { title: "Digital", value: 1 }, // Xuất bản số
+  { title: "Printing", value: 2 }, // Xuất bản in
+  { title: "Sharing", value: 3 }, // xuất bản chia sẻ
+  { title: "Digital_Printing", value: 12 }, // xuất bản số và in ấn
+];
diff --git a/definitions/com/domain-feature.ts b/definitions/com/domain-feature.ts
new file mode 100644
index 0000000..b0cdb60
--- /dev/null
+++ b/definitions/com/domain-feature.ts
@@ -0,0 +1,4 @@
+export const domainFeature = [ //Loại domain sếp chưa nghĩ ra
+  { id: 0, name: 'No' },
+  { id: 1, name: 'Yes' }
+];
diff --git a/definitions/com/index.ts b/definitions/com/index.ts
new file mode 100644
index 0000000..bace634
--- /dev/null
+++ b/definitions/com/index.ts
@@ -0,0 +1,4 @@
+export { status } from './status'
+export { domainFeature } from './domain-feature'
+export { typeOption } from './type-option'
+export { scopeOption } from './scope-option'
\ No newline at end of file
diff --git a/definitions/com/scope-option.ts b/definitions/com/scope-option.ts
new file mode 100644
index 0000000..f2f812a
--- /dev/null
+++ b/definitions/com/scope-option.ts
@@ -0,0 +1,6 @@
+export const scopeOption = [
+  { id: 0, title: "Global" },
+  { id: 1, title: "Site" },
+  { id: 2, title: "Group" },
+  { id: 3, title: "User" },
+];
diff --git a/definitions/com/status.ts b/definitions/com/status.ts
new file mode 100644
index 0000000..b39d522
--- /dev/null
+++ b/definitions/com/status.ts
@@ -0,0 +1,12 @@
+export const status = [
+  { title: "Processing", value: 1, key: "1" },
+  { title: "Cancelled", value: 2, key: "2" },
+  { title: "Completed", value: 3, key: "3" },
+  { title: "Approving", value: 4, key: "4" },
+  { title: "Approved", value: 5, key: "5" },
+  { title: "Activated", value: 6, key: "6" },
+  { title: "Deactivated", value: 7, key: "7" },
+  { title: "Suspended", value: 8, key: "8" },
+  { title: "Locked", value: 9, key: "9" },
+  { title: "Deleted", value: -1, key: "-1" },
+];
diff --git a/definitions/com/type-option.ts b/definitions/com/type-option.ts
new file mode 100644
index 0000000..8f814d9
--- /dev/null
+++ b/definitions/com/type-option.ts
@@ -0,0 +1,4 @@
+export const typeOption = [
+  { title: "Chính", value: 1 },
+  { title: "Phụ", value: 2 },
+];
diff --git a/definitions/dashboad-ranges.ts b/definitions/dashboad-ranges.ts
new file mode 100644
index 0000000..c031b57
--- /dev/null
+++ b/definitions/dashboad-ranges.ts
@@ -0,0 +1,7 @@
+export const dashboardRanges = [
+  { title: "Giờ", value: 1 },
+  { title: "Ngày", value: 2 },
+  { title: "Tuần", value: 3 },
+  { title: "Tháng", value: 4 },
+  { title: "Năm", value: 5 },
+];
diff --git a/definitions/dashboard-options.ts b/definitions/dashboard-options.ts
new file mode 100644
index 0000000..1a69fc9
--- /dev/null
+++ b/definitions/dashboard-options.ts
@@ -0,0 +1,6 @@
+export const dashboardOptions = [
+    { title: 'Global', value: 1 },
+    { title: 'Site', value: 2 },
+    { title: 'Group', value: 3 },
+    { title: 'User', value: 4 },
+  ];
\ No newline at end of file
diff --git a/definitions/digital-options.ts b/definitions/digital-options.ts
new file mode 100644
index 0000000..61b239d
--- /dev/null
+++ b/definitions/digital-options.ts
@@ -0,0 +1,4 @@
+export const digitaldOptions = [
+    { title: 'View', value: 1},
+    { title: 'Share', value: 0 },
+  ];
\ No newline at end of file
diff --git a/definitions/enum/actionCodes.enum.ts b/definitions/enum/actionCodes.enum.ts
new file mode 100644
index 0000000..d99ee2d
--- /dev/null
+++ b/definitions/enum/actionCodes.enum.ts
@@ -0,0 +1,14 @@
+export enum actionCodes {
+  MANAGE = "manage",
+  ACCESS = "access",
+  READ = "read",
+  CREATE = "create",
+  UPDATE = "update",
+  DELETE = "delete",
+  APPROVE = "approve",
+  ACTIVATE = "activate",
+  REACTIVATE = "reactivate",
+  DEACTIVATE = "deactivate",
+  SUSPEND = "suspend",
+  LOCK = "lock",
+}
diff --git a/definitions/enum/actionCommands.enum.ts b/definitions/enum/actionCommands.enum.ts
new file mode 100644
index 0000000..8a4f043
--- /dev/null
+++ b/definitions/enum/actionCommands.enum.ts
@@ -0,0 +1,6 @@
+export enum actionCommands {
+  CHANGESTATE = "Changestate",
+  CREATEVERSION = "Createversion",
+  REPUBLISH = "Republish",
+  UNPUBLISH = "Unpublish",
+}
diff --git a/definitions/enum/categoryTypes.enum.ts b/definitions/enum/categoryTypes.enum.ts
new file mode 100644
index 0000000..59acefe
--- /dev/null
+++ b/definitions/enum/categoryTypes.enum.ts
@@ -0,0 +1,8 @@
+export enum categoryTypes {
+    NONE = 0,
+    HOME = 1,
+    SUBSITE = 2,
+    NORMAL = 3,
+    OTHER = 99
+  }
+  
\ No newline at end of file
diff --git a/definitions/enum/component.enum.ts b/definitions/enum/component.enum.ts
new file mode 100644
index 0000000..3a5c2af
--- /dev/null
+++ b/definitions/enum/component.enum.ts
@@ -0,0 +1,19 @@
+import { moduleCodes } from "./module.enum";
+export enum componentCodes {
+  CmsArticle = `${moduleCodes.Cms}/article`,
+  CmsScoringCategory = `${moduleCodes.Cms}/scoring/category`,
+  CmsScoringQualification = `${moduleCodes.Cms}/scoring/qualification`,
+  CmsScoringQualificationQuota = `${moduleCodes.Cms}/scoring/qualification-quota`,
+  CmsCategory = `${moduleCodes.Cms}/category`,
+  CmsTopic = `${moduleCodes.Cms}/topic`,
+  CmsEvent = `${moduleCodes.Cms}/event`,
+  CmsPrintingPage = `${moduleCodes.Cms}/printing-page`,
+  CmsPrintingEdition = `${moduleCodes.Cms}/printing-edition`,
+  CmsPrintingPublication = `${moduleCodes.Cms}/printing-publication`,
+  CmsTemplate = `${moduleCodes.Cms}/template`,
+  CmsCollection = `${moduleCodes.Cms}/collection`,
+  HrmUser = `${moduleCodes.Hrm}/user`,
+  HrmRole = `${moduleCodes.Hrm}/role`,
+  HrmGroup = `${moduleCodes.Hrm}/group`,
+  MfmWorkflow = `${moduleCodes.Mfm}/workflow`,
+}
diff --git a/definitions/enum/index.ts b/definitions/enum/index.ts
new file mode 100644
index 0000000..131fb7a
--- /dev/null
+++ b/definitions/enum/index.ts
@@ -0,0 +1,8 @@
+export { PublishTypes as publishTypes } from "./publishTypes.enum";
+export { categoryTypes } from "./categoryTypes.enum";
+export { templates, layouts, dataTypes, dataQuery, sectionTypes, sectionTaxonomy, enumPageType, enumPageSectionLayouts, enumPageComponentLayouts, enumPageComponentTemplates } from "./page.enum";
+export { enumStatus } from "./status.enum";
+export { actionCommands } from "./actionCommands.enum";
+export { moduleCodes } from "./module.enum";
+export { actionCodes } from "./actionCodes.enum";
+export { componentCodes } from "./component.enum";
diff --git a/definitions/enum/module.enum.ts b/definitions/enum/module.enum.ts
new file mode 100644
index 0000000..9ba73b9
--- /dev/null
+++ b/definitions/enum/module.enum.ts
@@ -0,0 +1,8 @@
+export enum moduleCodes {
+  Cms = "cms",
+  Com = "com",
+  Crm = "crm",
+  Fam = "fam",
+  Hrm = "hrm",
+  Mfm = "mfm",
+}
diff --git a/definitions/enum/page.enum.ts b/definitions/enum/page.enum.ts
new file mode 100644
index 0000000..f519880
--- /dev/null
+++ b/definitions/enum/page.enum.ts
@@ -0,0 +1,142 @@
+export const templates = {
+  NONE: "None", // Không xác định
+  HOME: "Home", // Trang chủ
+  SECTION: "Section", // Chuyên trang
+  CATEGORY: "Category", // Trang danh mục
+  TOPIC: "Topic", // Trang chủ đề
+  EVENT: "Event", // Trang sự kiện
+  COLLECTION: "Collection", // Trang sưu tập
+  ARTICLE: "Article", // Trang bài viết
+  TAG: "Tag", // Trang từ khóa
+  AUTHOR: "Author", // Trang tác giả
+  SEARCH: "Search", // Trang tìm kiếm
+  CONTACT: "Contact", // Trang liên hệ
+  ABOUT: "About", // Trang giới thiệu
+  SERVICE: "Service", // Trang dịch vụ
+  POLICY: "Policy", // Trang chính sách
+  TERMS: "Terms", // Trang điều khoản
+  PRIVACY: "Privacy", // Trang bảo mật
+  ERROR: "Error", // Trang lỗi
+  MAINTENANCE: "Maintenance", // Trang bảo trì
+  CUSTOM: "Custom", // Trang tùy chỉnh
+};
+
+export const layouts = {
+  NONE: "None", // Không xác định
+  FULL_PAGE: "Full_Page", // full width 100%
+  CENTER_PAGE: "Center_Page", // ở giữa
+  BACKGROUND_PAGE: "Background_Page", // Phân trang
+};
+
+export const dataTypes = {
+  SECTION: "Section",
+  CATEGORY: "Category",
+  TOPIC: "Topic",
+  EVENT: "Event",
+  COLLECTION: "Collection",
+  ARTICLE: "Article",
+  TAG: "Tag",
+  AUTHOR: "Author",
+  POLL: "Poll",
+  QUIZ: "Quiz",
+  SURVEY: "Survey",
+  ADVERTISING: "Advertising",
+  OTHER: "Other",
+};
+
+export const dataQuery = {
+  IDS: "IDS",
+  NEW: "NEW",
+  VIEW: "VIEW",
+  SQL: "SQL",
+  REQUEST: "REQUEST",
+};
+
+export const sectionTypes = {
+  NONE: 0, // Không xác định
+  BLOCK: 1, // Khối
+};
+
+export const sectionTaxonomy = {
+  BLOCK: "Block",
+  MODULE: "Module",
+  NAVIGATION: "Navigation",
+};
+
+export const enumPageType = {
+  NONE: 0, // Không xác định
+  HOME: 1, // Trang chủ
+  SECTION: 2, // Chuyên trang
+  CATEGORY: 3, // Trang danh mục
+  TOPIC: 4, // Trang chủ đề
+  EVENT: 5, // Trang sự kiện
+  COLLECTION: 6, // Trang sưu tập
+  ARTICLE: 7, // Trang bài viết
+  TAG: 8, // Trang từ khóa
+  AUTHOR: 9, // Trang tác giả
+  SEARCH: 10, // Trang tìm kiếm
+  CONTACT: 11, // Trang liên hệ
+  ABOUT: 12, // Trang giới thiệu
+  SERVICE: 13, // Trang dịch vụ
+  POLICY: 14, // Trang chính sách
+  TERMS: 15, // Trang điều khoản
+  PRIVACY: 16, // Trang bảo mật
+  ERROR: 97, // Trang lỗi
+  MAINTENANCE: 98, // Trang bảo trì
+  CUSTOM: 99, // Trang tùy chỉnh
+};
+
+export const enumPageSectionLayouts = {
+  NONE: "None",
+  'VERTICAL_TWO': 'LAYOUT:vertical-TYPE:Default-MAX:2',
+  'VERTICAL_LEFT_TWO': 'LAYOUT:vertical-TYPE:LEFT-MAX:2',
+  'VERTICAL_RIGHT_TWO': 'LAYOUT:vertical-TYPE:RIGHT-MAX:2',
+  'VERTICAL_THREE': 'LAYOUT:vertical-TYPE:Default-MAX:3',
+  'VERTICAL_FOUR': 'LAYOUT:vertical-TYPE:Default-MAX:4',
+  'HORIZONTAL_ONE': 'LAYOUT:horizontal-TYPE:Default-MAX:1',
+  'HORIZONTAL_TWO': 'LAYOUT:horizontal-TYPE:Default-MAX:2',
+  'HORIZONTAL_THREE': 'LAYOUT:horizontal-TYPE:Default-MAX:3',
+  'HORIZONTAL_FOUR': 'LAYOUT:horizontal-TYPE:Default-MAX:4',
+  'HORIZONTAL_FIVE': 'LAYOUT:horizontal-TYPE:Default-MAX:5',
+  'HORIZONTAL_SIX': 'LAYOUT:horizontal-TYPE:Default-MAX:6',
+  'HORIZONTAL_SEVEN': 'LAYOUT:horizontal-TYPE:Default-MAX:7',
+  'HORIZONTAL_EIGHT': 'LAYOUT:horizontal-TYPE:Default-MAX:8',
+  'HORIZONTAL_NINE': 'LAYOUT:horizontal-TYPE:Default-MAX:9',
+  'HORIZONTAL_TEN': 'LAYOUT:horizontal-TYPE:Default-MAX:10',
+};
+
+export const enumPageComponentTemplates = { // KHÔNG ĐƯỢC XÓA KEY - BIẾN này
+  NONE: "None", // Không xác định
+  SECTION: "Section", // Chuyên trang
+  CATEGORY: "Category", // Trang danh mục
+  TOPIC: "Topic", // Trang chủ đề
+  EVENT: "Event", // Trang sự kiện
+  COLLECTION: "Collection", // Trang sưu tập
+  ARTICLE: "Article", // Trang bài viết
+  TAG: "Tag", // Trang từ khóa
+  AUTHOR: "Author", // Trang tác giả
+  POLL: "Poll", // Trang poll
+  QUIZ: "Quiz", // Trang quiz
+  SURVEY: "Survey", // Trang survey
+  ADVERTISING: "Advertising", // Trang quảng cáo
+  OTHER: "Other" // Trang khác
+};
+
+export const enumPageComponentLayouts = {
+  [`${enumPageComponentTemplates.ARTICLE}`]: {
+    NONE: "None",
+    'HORIZONTAL': "LAYOUT:horizontal",
+    'VERTICAL': "LAYOUT:vertical",
+    'HORIZONTAL-HIDE_PARAGRAPH': "LAYOUT:horizontal-HIDE:paragraph",
+    'VERTICAL-HIDE_THUMBNAIL': "LAYOUT:vertical-HIDE:thumbnail",
+    'VERTICAL-HIDE_PARAGRAPH': "LAYOUT:vertical-HIDE:paragraph",
+    'VERTICAL-HIDE_PARAGRAPH-REVERSE': "LAYOUT:vertical-HIDE:paragraph-REVERSE:true",
+  },
+  [`${enumPageComponentTemplates.CATEGORY}`]: {
+    NONE: "None",
+    'DEFAULT': "DEFAULT"
+  },
+  [`${enumPageComponentTemplates.COLLECTION}`]: {
+    'ARTICLE-VERTICAL-|HORIZONTAL|-MAX_5': 'TYPE:Article-LAYOUT:vertical-DATA:HORIZONTAL-MAX:5'
+  }
+};
diff --git a/definitions/enum/publishTypes.enum.ts b/definitions/enum/publishTypes.enum.ts
new file mode 100644
index 0000000..4c575a5
--- /dev/null
+++ b/definitions/enum/publishTypes.enum.ts
@@ -0,0 +1,7 @@
+export enum PublishTypes {
+  DIGITAL = 1,
+  PRINTING = 2,
+  SHARING = 3,
+  DIGITAL_PRINTING = 12,
+  ALL = 99,
+}
diff --git a/definitions/enum/status.enum.ts b/definitions/enum/status.enum.ts
new file mode 100644
index 0000000..f313f1a
--- /dev/null
+++ b/definitions/enum/status.enum.ts
@@ -0,0 +1,13 @@
+export const enumStatus = {
+  ALL: null,
+  PROCESSING: 1,
+  CANCELLED: 2,
+  COMPLETED: 3,
+  APPROVING: 4,
+  APPROVED: 5,
+  ACTIVATED: 6,
+  DEACTIVATED: 7,
+  SUSPENDED: 8,
+  LOCKED: 9,
+  DELETED: -1,
+};
diff --git a/definitions/feature-options.ts b/definitions/feature-options.ts
new file mode 100644
index 0000000..f01403c
--- /dev/null
+++ b/definitions/feature-options.ts
@@ -0,0 +1,6 @@
+export const featureOptions = [
+    { title: 'Important', value: 'Important' },
+    { title: 'Feature', value: 'Feature' },
+    { title: 'Trending', value: 'Trending' },
+    { title: 'Navigation', value: 'Navigation' },
+];
diff --git a/definitions/index.ts b/definitions/index.ts
new file mode 100644
index 0000000..861e027
--- /dev/null
+++ b/definitions/index.ts
@@ -0,0 +1,18 @@
+export { BaseGender } from "./base-gender";
+export { baseStatus } from "./base-status";
+export { systemStatus } from "./system-status";
+export { breakpoint } from "./breakpoint";
+export { baseSideBarMenu } from "./base-sidebar";
+export { booleanOptions } from "./boolean-options";
+export { yesNoOptions } from "./yes-no-options";
+export { languageOptions } from "./language-options";
+export { featureOptions } from "./feature-options";
+export { taskTaxonomy } from "./base-taxonomy";
+export { nationlityOptions } from "./base-nationlity";
+export { dashboardOptions } from "./dashboard-options";
+export { digitaldOptions } from "./digital-options";
+export { categoryLayouts } from "./category-layouts";
+export { dashboardRanges } from "./dashboad-ranges";
+export { trendOptions } from "./trend-options";
+export { publishedByOptions } from "./publishedBy-options";
+export { priorityOptions } from './priority-options';
diff --git a/definitions/language-options.ts b/definitions/language-options.ts
new file mode 100644
index 0000000..56ba37e
--- /dev/null
+++ b/definitions/language-options.ts
@@ -0,0 +1,4 @@
+export const languageOptions = [
+    { title: 'Tiếng Anh', value: 'en' },
+    { title: 'Tiếng Việt', value: 'vi' },
+  ];
diff --git a/definitions/mfm/action-type.ts b/definitions/mfm/action-type.ts
new file mode 100644
index 0000000..5ef6b52
--- /dev/null
+++ b/definitions/mfm/action-type.ts
@@ -0,0 +1,15 @@
+export const actionCommands = [
+  { title: "Create", value: "Create", code: "Create" },
+  { title: "Update", value: "Update", code: "Update" },
+  { title: "Publish", value: "Publish", code: "Publish" },
+  { title: "Republish", value: "Republish", code: "Republish" },
+  { title: "Unpublish", value: "Unpublish", code: "Unpublish" },
+
+  { title: "Assign", value: "Assign", code: "Assign" },
+  { title: "Assign me", value: "Assign me", code: "Assign me" },
+  { title: "Assign {id}", value: "Assign {id}", code: "AssignId" },
+
+  { title: "Create&Assign", value: "Create&Assign", code: "Create&Assign" },
+  { title: "Create&Assign me", value: "Create&Assign me", code: "Create&Assign me" },
+  { title: "Create&Assign {id}", value: "Create&Assign {id}", code: "Create&AssignId" },
+];
diff --git a/definitions/mfm/actor-types.ts b/definitions/mfm/actor-types.ts
new file mode 100644
index 0000000..ef3c7cd
--- /dev/null
+++ b/definitions/mfm/actor-types.ts
@@ -0,0 +1,6 @@
+export const actorTypes = [
+    { title: 'Performer', value: 0 },
+    { title: 'Supervisor', value: 1 },
+    { title: 'Monitor', value: 2 },
+  ];
+  
\ No newline at end of file
diff --git a/definitions/mfm/enable-disable-button.ts b/definitions/mfm/enable-disable-button.ts
new file mode 100644
index 0000000..6c74ad6
--- /dev/null
+++ b/definitions/mfm/enable-disable-button.ts
@@ -0,0 +1,9 @@
+/**phục vụ cho việc enable, disable các button cơ bản cho workflow
+ * hiện tại chỉ thêm trong state
+ * Nút delete hiện tại chỉ người nào tạo bài viết đó thì mới được hiển thị nút xóa ở trạng thái cho phép hiển thị nút xóa
+ */
+export const enableDisableButton = [
+    { title: 'Creatable',value: true},
+    { title: 'Updatable',value: true},
+    { title: 'Deletable' ,value: false},
+  ];
\ No newline at end of file
diff --git a/definitions/mfm/index.ts b/definitions/mfm/index.ts
new file mode 100644
index 0000000..7fb0f2a
--- /dev/null
+++ b/definitions/mfm/index.ts
@@ -0,0 +1,4 @@
+export { stateTaxonomy } from "./state-taxonomy";
+export { actorTypes } from "./actor-types";
+export { enableDisableButton } from "./enable-disable-button";
+export { actionCommands } from "./action-type";
diff --git a/definitions/mfm/state-taxonomy.ts b/definitions/mfm/state-taxonomy.ts
new file mode 100644
index 0000000..29ffa3b
--- /dev/null
+++ b/definitions/mfm/state-taxonomy.ts
@@ -0,0 +1,26 @@
+export const stateTaxonomy = [
+  { title: "Chờ biên tập", value: "Chờ biên tập", value_number: "1" },
+  { title: "Chờ xem xét", value: "Chờ xem xét", value_number: "1" },
+  { title: "Chờ duyệt bài", value: "Chờ duyệt bài", value_number: "1" },
+  { title: "Chờ xuất bản", value: "Chờ xuất bản", value_number: "1" },
+  { title: "Đã yêu cầu hủy xuất bản", value: "Đã yêu cầu hủy xuất bản", value_number: "1" },
+  { title: "Đang chỉnh sửa", value: "Đang chỉnh sửa", value_number: "5" },
+  { title: "Đang biên tập", value: "Đang biên tập", value_number: "5" },
+  { title: "Đang xem xét", value: "Đang xem xét", value_number: "5" },
+  { title: "Đang duyệt bài", value: "Đang duyệt bài", value_number: "5" },
+  { title: "Đang xuất bản", value: "Đang xuất bản", value_number: "5" },
+  { title: "Đang duyệt hủy xuất bản", value: "Đang duyệt hủy xuất bản", value_number: "5" },
+  { title: "Đã soạn thảo", value: "Đã soạn thảo", value_number: "10" },
+  { title: "Đã biên tập", value: "Đã biên tập", value_number: "10" },
+  { title: "Đã xem xét", value: "Đã xem xét", value_number: "10" },
+  { title: "Đã duyệt bài", value: "Đã duyệt bài", value_number: "10" },
+  { title: "Đã hủy xuất bản", value: "Đã hủy xuất bản", value_number: "10" },
+  { title: "Đã lên lịch", value: "Đã lên lịch", value_number: "10" },
+  { title: "Bài bị trả về", value: "Bài bị trả về", value_number: "15" },
+  { title: "Đã từ chối hủy xuất bản", value: "Đã từ chối hủy xuất bản", value_number: "15" },
+  { title: "Đã xuất bản", value: "Đã xuất bản", value_number: "20" },
+  { title: "Bài bị hạ", value: "Bài bị hạ", value_number: "25" },
+  { title: "Chờ nhận dàn trang", value: "Chờ nhận dàn trang", value_number: "1" },
+  { title: "Đang dàn trang ", value: "Đang dàn trang ", value_number: "5" },
+  { title: "Đã dàn trang", value: "Đã dàn trang", value_number: "10" },
+];
diff --git a/definitions/priority-options.ts b/definitions/priority-options.ts
new file mode 100644
index 0000000..5c37161
--- /dev/null
+++ b/definitions/priority-options.ts
@@ -0,0 +1,7 @@
+export const priorityOptions = [
+    { title: 'Top', value: 0 },
+    { title: 'High', value: 1 },
+    { title: 'Medium', value: 2 },
+    { title: 'Low', value: 3 },
+  ];
+  
\ No newline at end of file
diff --git a/definitions/publishedBy-options.ts b/definitions/publishedBy-options.ts
new file mode 100644
index 0000000..54f4b2c
--- /dev/null
+++ b/definitions/publishedBy-options.ts
@@ -0,0 +1,4 @@
+export const publishedByOptions = [
+  { name: "Phóng viên", value: 1 },
+  { name: "Biên tập", value: 2 },
+];
diff --git a/definitions/system-status.ts b/definitions/system-status.ts
new file mode 100644
index 0000000..337b6f2
--- /dev/null
+++ b/definitions/system-status.ts
@@ -0,0 +1,5 @@
+export const systemStatus = [
+
+    { title: 'Deleted', value: -1 },
+  ];
+  
\ No newline at end of file
diff --git a/definitions/trend-options.ts b/definitions/trend-options.ts
new file mode 100644
index 0000000..418a8cf
--- /dev/null
+++ b/definitions/trend-options.ts
@@ -0,0 +1,5 @@
+export const trendOptions = [
+    { title: 'Daily Trends', value: 'dailytrends' },
+    { title: 'Realtime Trends', value: 'realtimetrends' }
+  ];
+  
\ No newline at end of file
diff --git a/definitions/yes-no-options.ts b/definitions/yes-no-options.ts
new file mode 100644
index 0000000..a760651
--- /dev/null
+++ b/definitions/yes-no-options.ts
@@ -0,0 +1,5 @@
+export const yesNoOptions = [
+    { title: 'Yes', value: true },
+    { title: 'No', value: false },
+  ];
+  
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..39979c4
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,26 @@
+<template>
+    <Body class=" text-black max-w-screen max-w-full w-full overflow-x-hidden">
+        <!-- <Component :is="header[hostname]" /> -->
+        aaaa
+        <slot />
+        bbbb
+        <!-- <Component :is="footer[hostname]" /> -->
+    </Body>
+</template>
+<script setup>
+    // import { HeaderTTTC, Header, FooterTTTC, Footer } from './index'
+    // const header = {
+    //     thitruongtaichinh: HeaderTTTC,
+    //     stable: Header
+    // }
+    // const footer = {
+    //     thitruongtaichinh: FooterTTTC,
+    //     stable: Footer
+    // }
+    // const url = useRequestURL();
+    // let hostname = url.hostname.split('.')[0];
+    // if(hostname == "localhost") {
+    //     hostname = "stable"
+    // }
+</script>
+
diff --git a/mocks/index.ts b/mocks/index.ts
new file mode 100644
index 0000000..a765ea6
--- /dev/null
+++ b/mocks/index.ts
@@ -0,0 +1 @@
+export { default as MenuData } from './menu'
\ No newline at end of file
diff --git a/mocks/menu.ts b/mocks/menu.ts
new file mode 100644
index 0000000..7cfd7e7
--- /dev/null
+++ b/mocks/menu.ts
@@ -0,0 +1,438 @@
+export default [
+    {
+        name: 'Thời sự',
+        slug: 'thoi-su',
+        isMain: true,
+        children: [
+            {
+                name: 'Chính trị',
+                slug: 'chinh-tri'
+            },
+            {
+                name: 'Dân sinh',
+                slug: 'chinh-tri'
+            },
+            {
+                name: 'Lao động - Việc làm',
+                slug: 'lao-dong-viec-lam'
+            },
+            {
+                name: 'Giao thông',
+                slug: 'giao-thong'
+            }
+        ]
+    },
+    {
+        name: 'Góc Nhìn',
+        slug: 'goc-nhin',
+        isMain: true,
+        children: [
+            {
+                name: 'Bình luận nhiều',
+                slug: 'binh-luan-nhieu'
+            },
+            {
+                name: 'Chính trị & Chính sách',
+                slug: 'chinh-tri-chinh-sach'
+            },
+            {
+                name: 'Y tế & Sức khoẻ',
+                slug: 'y-te-suc-khoe'
+            },
+            {
+                name: 'Kinh doanh & Quản trị',
+                slug: 'kinh-doanh-quan-tri'
+            }
+        ]
+    },
+    {
+        name: 'Thế giới',
+        slug: 'the-gioi',
+        isMain: true,
+        children: [
+            {
+                name: 'Tư liệu',
+                slug: 'tu-lieu'
+            },
+            {
+                name: 'Phân tích',
+                slug: 'phan-tich'
+            },
+            {
+                name: 'Người Việt 5 Châu',
+                slug: 'nguoi-viet-5-chau'
+            },
+            {
+                name: 'Cuộc sống đó đây',
+                slug: 'cuoc-song-do-day'
+            }
+        ]
+    },
+    {
+        name: 'Video',
+        slug: 'video',
+        isMain: true,
+        children: [
+            {
+                name: 'Thời sự',
+                slug: 'thoi-su'
+            },
+            {
+                name: 'Nhịp sống',
+                slug: 'nhip-song'
+            },
+            {
+                name: 'Food',
+                slug: 'food'
+            },
+            {
+                name: 'Tôi kể',
+                slug: 'toi-ke'
+            },
+        ]
+    },
+    {
+        name: 'Podcasts',
+        slug: 'podcasts',
+        isMain: true,
+        children: [
+            {
+                name: 'Podcasts hôm nay',
+                slug: 'podcasts-hom-nay'
+            },
+            {
+                name: 'Tiền để làm gì?',
+                slug: 'tien-de-lam-gi'
+            },
+            {
+                name: 'Tài chính cá nhân',
+                slug: 'tai-chinh-ca-nhan'
+            },
+            {
+                name: 'Giải mã',
+                slug: 'giai-ma'
+            }
+        ]
+    },
+    {
+        name: 'Kinh doanh',
+        slug: 'kinh-doanh',
+        isMain: true,
+        children: [
+            {
+                name: 'Quốc tế',
+                slug: 'quoc-te',
+            },
+            {
+                name: 'Doanh nghiệp',
+                slug: 'doanh-nghiep',
+            },
+            {
+                name: 'Chứng khoán',
+                slug: 'chung-khoan',
+            },
+            {
+                name: 'EBank',
+                slug: 'e-bank',
+            }
+        ]
+    },
+    {
+        name: 'Bất động sản',
+        slug: 'bat-dong-san',
+        isMain: true,
+        children: [
+            {
+                name: 'Chính sách',
+                slug: 'chinh-sach'
+            },
+            {
+                name: 'Thị trường',
+                slug: 'thi-truong'
+            },
+            {
+                name: 'Dự án',
+                slug: 'du-an'
+            },
+            {
+                name: 'Không gian sống',
+                slug: 'khong-gian-song'
+            }
+        ]
+    },
+    {
+        name: 'Khoa học',
+        slug: 'khoa-hoc',
+        isMain: true,
+        children: [
+            {
+                name: 'Khoa học trong nước',
+                slug: 'khoa-hoc-trong-nuoc'
+            },
+            {
+                name: 'Tin tức',
+                slug: 'tin-tuc'
+            },
+            {
+                name: 'Phát minh',
+                slug: 'phat-minh'
+            },
+            {
+                name: 'Ứng dụng',
+                slug: 'ung-dung'
+            }
+        ]
+    },
+    {
+        name: 'Giải trí',
+        slug: 'giai-tri',
+        isMain: true,
+        children: [
+            {
+                name: 'Giới sao',
+                slug: 'gioi-sao'
+            },
+            {
+                name: 'Sách',
+                slug: 'sach'
+            },
+            {
+                name: 'Video',
+                slug: 'video'
+            },
+            {
+                name: 'Phim',
+                slug: 'phim'
+            }
+        ]
+    },
+    {
+        name: 'Thể thao',
+        slug: 'the-thao',
+        isMain: true,
+        children: [
+            {
+                name: 'Lịch thi đấu',
+                slug: 'lich-thi-dau'
+            },
+            {
+                name: 'Bóng đã',
+                slug: 'bong-da'
+            },
+            {
+                name: 'Tennis',
+                slug: 'tennis'
+            },
+            {
+                name: 'E-Sports',
+                slug: 'e-sports'
+            }
+        ]
+    },
+    {
+        name: 'Pháp luật',
+        slug: 'phap-luat',
+        isMain: true,
+        children: [
+            {
+                name: 'Hồ sơ phá án',
+                slug: 'ho-so-pha-an'
+            },
+            {
+                name: 'Tư vấn',
+                slug: 'tu-van'
+            },
+            {
+                name: 'Video',
+                slug: 'video'
+            }
+        ]
+    },
+    {
+        name: 'Giáo dục',
+        slug: 'giao-duc',
+        isMain: true,
+        children: [
+            {
+                name: 'Tin tức',
+                slug: 'tin-tuc'
+            },
+            {
+                name: 'Tuyển sinh',
+                slug: 'tuyen-sinh'
+            },
+            {
+                name: 'Tra cứu',
+                slug: 'tra-cuu'
+            },
+            {
+                name: 'Diễn đàn',
+                slug: 'dien-dan'
+            }
+        ]
+    },
+    {
+        name: 'Sức khoẻ',
+        slug: 'suc-khoe',
+        isMain: true,
+        children: [
+            {
+                name: 'Tin tức',
+                slug: 'tin-tuc'
+            },
+            {
+                name: 'Tư vấn',
+                slug: 'tu-van'
+            },
+            {
+                name: 'Dinh dưỡng',
+                slug: 'dinh-duong'
+            },
+            {
+                name: 'Khoẻ đẹp',
+                slug: 'khoe-dep'
+            }
+        ]
+    },
+    {
+        name: 'Đời sống',
+        slug: 'doi-song',
+        isMain: true,
+        children: [
+            {
+                name: 'Nhịp sống',
+                slug: 'nhip-song'
+            },
+            {
+                name: 'Tổ ấm',
+                slug: 'to-am'
+            },
+            {
+                name: 'Bài học',
+                slug: 'bai-hoc'
+            },
+            {
+                name: 'Nấu ăn',
+                slug: 'nau-an'
+            }
+        ]
+    },
+    {
+        name: 'Du lịch',
+        slug: 'du-lich',
+        isMain: true,
+        children: [
+            {
+                name: 'Điểm đến',
+                slug: 'diem-den'
+            },
+            {
+                name: 'Ẩm thực',
+                slug: 'am-thuc'
+            },
+            {
+                name: 'Dấu chân',
+                slug: 'dau-chan'
+            },
+            {
+                name: 'Tư vấn',
+                slug: 'tu-van'
+            }
+        ]
+    },
+    {
+        name: 'Số hoá',
+        slug: 'so-hoa',
+        isMain: true,
+        children: [
+            {
+                name: 'Công nghệ',
+                slug: 'cong-nghe'
+            },
+            {
+                name: 'Sản phẩm',
+                slug: 'san-pham'
+            },
+            {
+                name: 'Blockchain',
+                slug: 'blockchain'
+            },
+            {
+                name: 'CTO Summit 2023',
+                slug: 'cto-summit-2023'
+            }
+        ]
+    },
+    {
+      name: 'Xe',
+      slug: 'xe',
+      isMain: true,
+      children: [
+        {
+          name: 'Thị trường',
+          slug: 'thi-truong'
+        },
+        {
+          name: 'Car Awards 2023',
+          slug: 'car-awards-2023'
+        },
+        {
+          name: 'Diễn đàn',
+          slug: 'dien-dan'
+        },
+        {
+          name: 'V-Car',
+          slug: 'v-car'
+        }
+      ]
+    },
+    {
+      name: 'Thư giãn',
+      slug: 'thu-gian',
+      isMain: true,
+      children: [
+        {
+          name: 'Cười',
+          slug: 'cuoi'
+        },
+        {
+          name: 'Đố vui',
+          slug: 'do-vui'
+        },
+        {
+          name: 'Chuyện lạ',
+          slug: 'chuyen-la'
+        },
+        {
+          name: 'Crossword',
+          slug: 'crossword'
+        }
+      ]
+    },
+    {
+      name: 'Ý kiến',
+      slug: 'y-kien',
+      isMain: true,
+      children: [
+        {
+          name: 'Thời sự',
+          slug: 'thoi-su'
+        },
+        {
+          name: 'Đời sống',
+          slug: 'doi-song'
+        }
+      ]
+    },
+    {
+      name: 'Tâm sự',
+      slug: 'tam-su',
+      isMain: true,
+      children: [
+        {
+          name: 'Hẹn hò',
+          slug: 'hen-ho'
+        }
+      ]
+    }
+]
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
new file mode 100644
index 0000000..e535bc4
--- /dev/null
+++ b/nuxt.config.ts
@@ -0,0 +1,82 @@
+import { createResolver } from "@nuxt/kit";
+const { resolve } = createResolver(import.meta.url);
+// https://nuxt.com/docs/api/configuration/nuxt-config
+
+export default defineNuxtConfig({
+  nitro: {
+    preset: 'iis_node'
+  },
+  devtools: { enabled: true },
+  app: {
+    head: {
+      link: [],
+    },
+  },
+  modules: [
+    '@nuxt/image',
+    "@unocss/nuxt",
+    "@vueuse/nuxt",
+    "@pinia/nuxt",
+    "nuxt-delay-hydration",
+    // "@nuxtjs/critters",
+    "nuxt-icon",
+    // "nuxt-custom-elements",
+    "dayjs-nuxt",
+    "nuxt-swiper",
+    "nuxt-lodash",
+    // "nuxt-headlessui",
+    '@ant-design-vue/nuxt',
+    // "@sidebase/nuxt-auth",
+  ],
+
+  runtimeConfig: {
+    public: {
+      apiUrl: process.env.NUXT_PUBLIC_BASE_API || "http://api-portal.vpress.vn/api-v1",
+      site: process.env.NUXT_PUBLIC_SITE_DEFAULT || "1",
+    },
+    authSecret: process.env.AUTH_SECRET||"vpress"
+  },
+
+  alias: {
+    "@": resolve(__dirname, "./"),
+    "~": resolve(__dirname, "./"),
+  },
+
+  css: ["@/assets/styles/app.sass", "@unocss/reset/tailwind-compat.css"],
+
+  // dayjs
+  dayjs: {
+    locales: ["vi"],
+    plugins: ["relativeTime", "utc", "timezone"],
+    defaultTimezone: "Asia/Ho_Chi_Minh",
+    defaultLocale: ["vi", {
+      weekdays: 'Chủ nhật_Thứ Hai_Thứ Ba_Thứ Tư_Thứ Năm_Thứ Sáu_Thứ Bảy'.split('_'),
+    }],
+  },
+
+  lodash: {
+    prefix: "_",
+  },
+
+  // pinia
+  pinia: {
+    autoImports: [
+      'defineStore', // import { defineStore } from 'pinia'
+      ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
+      'storeToRefs',
+      'acceptHMRUpdate',
+    ],
+  },
+
+  vue: {
+    defineModel: true,
+    runtimeCompiler: true,
+    propsDestructure: true,
+  },
+
+  ssr: true,
+
+  typescript: {
+    shim: false,
+  },
+});
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b9d2f84
--- /dev/null
+++ b/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build --dotenv .env.production",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@ant-design-vue/nuxt": "^1.4.1",
+    "@nuxt/devtools": "1.0.0",
+    "@nuxt/image": "^1.1.0",
+    "@pinia/nuxt": "latest",
+    "@remix-run/web-file": "^3.1.0",
+    "@sidebase/nuxt-auth": "^0.6.4",
+    "@types/glidejs__glide": "latest",
+    "@unocss/postcss": "latest",
+    "cva": "beta",
+    "dayjs-nuxt": "^2.1.8",
+    "nuxt": "latest",
+    "nuxt-custom-elements": "beta",
+    "nuxt-headlessui": "^1.1.4",
+    "nuxt-icon": "latest",
+    "nuxt-lodash": "latest",
+    "typescript": "^5.3.3",
+    "vue-tsc": "^1.8.27"
+  },
+  "dependencies": {
+    "@glidejs/glide": "^3.6.0",
+    "@unocss/nuxt": "latest",
+    "@unocss/reset": "latest",
+    "@vueuse/core": "^10.8.0",
+    "@vueuse/nuxt": "10.5.0",
+    "aos": "latest",
+    "axios": "^1.5.1",
+    "cheerio": "^1.0.0-rc.12",
+    "clsx": "^2.1.0",
+    "defu": "^6.1.4",
+    "ipx": "^3.0.1",
+    "mitt": "^3.0.1",
+    "next-auth": "4.21.1",
+    "node-html-parser": "latest",
+    "nuxt-delay-hydration": "latest",
+    "nuxt-swiper": "latest",
+    "parse-nested-form-data": "^1.0.0",
+    "request": "^2.88.2",
+    "request-promise": "^0.0.1",
+    "require": "^0.4.4",
+    "sass": "latest",
+    "sass-loader": "latest",
+    "tailwind-merge": "latest",
+    "vite-svg-loader": "latest",
+    "vue-advanced-cropper": "^2.8.8",
+    "winston": "^3.11.0",
+    "zod": "^3.22.4"
+  },
+  "overrides": {
+    "vue": "latest"
+  }
+}
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..52d8c97
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import _cloneDeep from 'lodash/cloneDeep';
+
+import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
+import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
+
+import { useDynamicPageStore } from '~/stores/dynamic-page';
+const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
+
+const store = reactive({
+  dynamicPage: useDynamicPageStore(),
+});
+
+const loadData = async () => {
+  store.dynamicPage.fetchPageById(1);
+
+  store.dynamicPage.setSectionPublished();
+  store.dynamicPage.setComponentPublished()
+}
+await loadData()
+
+
+</script>
+
+<template>
+  <main class="h-screen" v-if="currentPage">
+    <DynamicTemplate :settings="currentPage.settings">
+      <template v-if="sectionPublished && sectionPublished.length > 0">
+        <DynamicSection
+          v-for="(section, index) in sectionPublished"
+          :key="index"
+          :settings="section.settings"
+          :content="section.content ? JSON.parse(section.content) : null"
+          :section="section"
+        />
+      </template>
+    </DynamicTemplate>
+  </main>
+</template>
\ No newline at end of file
diff --git a/pages/test.vue b/pages/test.vue
new file mode 100644
index 0000000..b334b05
--- /dev/null
+++ b/pages/test.vue
@@ -0,0 +1,15 @@
+<template>
+  <Wrap>
+    <div class="flex">
+      <Button @click="handleTest" label="Test" />
+    </div>
+  </Wrap>
+</template>
+
+<script setup lang='ts'>
+
+const handleTest = async () => {
+  await navigateTo('/v/abc-500')
+  
+}
+</script>
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..18993ad
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/images/100.png b/public/images/100.png
new file mode 100644
index 0000000..03ffda1
Binary files /dev/null and b/public/images/100.png differ
diff --git a/public/images/150.png b/public/images/150.png
new file mode 100644
index 0000000..4cf888e
Binary files /dev/null and b/public/images/150.png differ
diff --git a/public/images/1600x900a.jpg b/public/images/1600x900a.jpg
new file mode 100644
index 0000000..97cb870
Binary files /dev/null and b/public/images/1600x900a.jpg differ
diff --git a/public/images/200.png b/public/images/200.png
new file mode 100644
index 0000000..7ab2f97
Binary files /dev/null and b/public/images/200.png differ
diff --git a/public/images/42.png b/public/images/42.png
new file mode 100644
index 0000000..aebedd5
Binary files /dev/null and b/public/images/42.png differ
diff --git a/public/images/VPress.png b/public/images/VPress.png
new file mode 100644
index 0000000..ce89fe1
Binary files /dev/null and b/public/images/VPress.png differ
diff --git a/public/images/default-thumbnail.jpg b/public/images/default-thumbnail.jpg
new file mode 100644
index 0000000..b6f2279
Binary files /dev/null and b/public/images/default-thumbnail.jpg differ
diff --git a/public/images/logo-footer-tttc.png b/public/images/logo-footer-tttc.png
new file mode 100644
index 0000000..304ea60
Binary files /dev/null and b/public/images/logo-footer-tttc.png differ
diff --git a/public/images/logo-ktdt-tttc.png b/public/images/logo-ktdt-tttc.png
new file mode 100644
index 0000000..b03839e
Binary files /dev/null and b/public/images/logo-ktdt-tttc.png differ
diff --git a/public/images/logo-ktdt.png b/public/images/logo-ktdt.png
new file mode 100644
index 0000000..b03839e
Binary files /dev/null and b/public/images/logo-ktdt.png differ
diff --git a/public/images/logo-tttc.png b/public/images/logo-tttc.png
new file mode 100644
index 0000000..fe2a2b3
Binary files /dev/null and b/public/images/logo-tttc.png differ
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000..35bba5c
Binary files /dev/null and b/public/images/logo.png differ
diff --git a/public/images/logotttc.png b/public/images/logotttc.png
new file mode 100644
index 0000000..fe2a2b3
Binary files /dev/null and b/public/images/logotttc.png differ
diff --git a/public/images/logotttcfooter.png b/public/images/logotttcfooter.png
new file mode 100644
index 0000000..304ea60
Binary files /dev/null and b/public/images/logotttcfooter.png differ
diff --git a/public/images/vp-1.png b/public/images/vp-1.png
new file mode 100644
index 0000000..38a32ed
Binary files /dev/null and b/public/images/vp-1.png differ
diff --git a/public/svg/logo.svg b/public/svg/logo.svg
new file mode 100644
index 0000000..df34471
--- /dev/null
+++ b/public/svg/logo.svg
@@ -0,0 +1,59 @@
+<svg fill="none"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 -24 742 230">
+    <rect width="742" height="206" fill="white"></rect>
+    <path d="M180.326 57C180.326 55.3431 181.669 54 183.326 54H201.326C202.983 54 204.326 55.3431 204.326 57V124C204.326 125.657 202.983 127 201.326 127H180.326V57Z" fill="#262626"></path>
+    <path d="M388.326 57C388.326 55.3431 389.669 54 391.326 54H412.326V124C412.326 125.657 410.983 127 409.326 127H391.326C389.669 127 388.326 125.657 388.326 124V57Z" fill="#2D2D2D"></path>
+    <path d="M412 54.0001H441.5C455.031 54.0001 466 64.9691 466 78.5001V78.5001C466 92.0311 455.031 103 441.5 103H412V54.0001Z" fill="#2D2D2D"></path>
+    <path d="M412.326 71H431.826C435.968 71 439.326 74.3579 439.326 78.5V78.5C439.326 82.6421 435.968 86 431.826 86H412.326V71Z" fill="white"></path>
+    <path d="M422.61 99.2702C422.091 98.3009 422.49 97.1701 423.502 96.7392L443.219 88.345C444.228 87.9154 445.47 88.3419 446.003 89.3011L465.34 124.068C466.049 125.342 465.14 126.794 463.632 126.794L438.695 126.794C437.874 126.794 437.101 126.342 436.727 125.643L422.61 99.2702Z" fill="#2D2D2D"></path>
+    <path d="M483.326 57C483.326 55.3431 484.669 54 486.326 54H507.326V127H486.326C484.669 127 483.326 125.657 483.326 124V57Z" fill="#2D2D2D"></path>
+    <path d="M496.326 54H554.326C555.983 54 557.326 55.3431 557.326 57V69C557.326 70.6569 555.983 72 554.326 72H496.326V54Z" fill="#2D2D2D"></path>
+    <path d="M503 109H554C555.657 109 557 110.343 557 112V124C557 125.657 555.657 127 554 127H503V109Z" fill="#2D2D2D"></path>
+    <path d="M505.326 82H540.326C541.983 82 543.326 83.3431 543.326 85V96C543.326 97.6569 541.983 99 540.326 99H505.326V82Z" fill="#2D2D2D"></path>
+    <rect x="580" y="112" width="53" height="14" rx="7" fill="#2D2D2D"></rect>
+    <path d="M574 112C574 110.343 575.343 109 577 109H624V127H577C575.343 127 574 125.657 574 124V112Z" fill="#2D2D2D"></path>
+    <ellipse cx="623" cy="105" rx="26" ry="22" fill="#2D2D2D"></ellipse>
+    <rect x="592" y="71.0001" width="33" height="12" rx="6" fill="#F5F5F5"></rect>
+    <rect x="579.326" y="98" width="48" height="11" rx="5.5" fill="white"></rect>
+    <rect x="604" y="84.0001" width="26" height="13" rx="6.5" fill="#2D2D2D"></rect>
+    <path d="M643.019 68.5973C643.018 70.2541 641.674 71.5967 640.017 71.596L599.731 71.5785L599.743 54.0002L640.029 54.0177C641.685 54.0184 643.028 55.3622 643.027 57.019L643.019 68.5973Z" fill="#2D2D2D"></path>
+    <ellipse cx="25.4863" cy="22.0044" rx="25.4863" ry="22.0044" transform="matrix(-1 -0.000433813 0.000657572 -1 625.159 98.0433)" fill="#2D2D2D"></ellipse>
+    <path d="M631.917 83.0192L601.033 83.0058C597.878 83.0044 595.322 80.4455 595.324 77.2903V77.2903C595.326 74.1352 597.885 71.5785 601.041 71.5799L631.925 71.5933L631.917 83.0192Z" fill="white"></path>
+    <rect width="29.3925" height="13.9922" rx="6.99612" transform="matrix(-1 -0.000433813 0.000657572 -1 631.277 97.941)" fill="#2D2D2D"></rect>
+    <rect x="672.326" y="112" width="53" height="14" rx="7" fill="#2D2D2D"></rect>
+    <path d="M666.326 112C666.326 110.343 667.669 109 669.326 109H716.326V127H669.326C667.669 127 666.326 125.657 666.326 124V112Z" fill="#2D2D2D"></path>
+    <ellipse cx="715.326" cy="105" rx="26" ry="22" fill="#2D2D2D"></ellipse>
+    <rect x="684.326" y="70.9999" width="33" height="12" rx="6" fill="#F5F5F5"></rect>
+    <rect x="671.652" y="97.9998" width="48" height="11" rx="5.5" fill="white"></rect>
+    <rect x="696.326" y="83.9999" width="26" height="13" rx="6.5" fill="#2D2D2D"></rect>
+    <path d="M735.345 68.597C735.344 70.2539 734 71.5965 732.343 71.5957L692.058 71.5783L692.069 54L732.355 54.0175C734.012 54.0182 735.354 55.3619 735.353 57.0188L735.345 68.597Z" fill="#2D2D2D"></path>
+    <ellipse cx="25.4863" cy="22.0044" rx="25.4863" ry="22.0044" transform="matrix(-1 -0.000433813 0.000657572 -1 717.485 98.0431)" fill="#2D2D2D"></ellipse>
+    <path d="M724.243 83.0189L693.359 83.0055C690.204 83.0042 687.648 80.4453 687.65 77.2901V77.2901C687.652 74.1349 690.212 71.5782 693.367 71.5796L724.251 71.593L724.243 83.0189Z" fill="white"></path>
+    <rect width="29.3925" height="13.9922" rx="6.99612" transform="matrix(-1 -0.000433813 0.000657572 -1 723.603 97.9408)" fill="#2D2D2D"></rect>
+    <path d="M120 57.0001C120 55.3433 121.343 54.0001 123 54.0001H131.5H137H140H141.5H142H142.5L142.775 54.767L143.812 54.0001L143.898 123.992C143.9 125.651 142.556 126.996 140.898 126.996H123C121.343 126.996 120 125.653 120 123.996V57.0001Z" fill="#262626"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M181 126.185C181 125.614 180.427 125.221 179.894 125.427L179.129 125.722C178.705 125.885 178.426 126.292 178.426 126.746V126.746L178.664 126.996L180.185 126.999C180.635 126.999 181 126.635 181 126.185V126.185Z" fill="#262626"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M142.775 54.767L126.212 67.0159C124.761 68.0886 124.579 70.1899 125.823 71.4966L178.426 126.746L178.664 126.996V126.996C178.666 126.998 178.67 126.999 178.672 126.997L196.268 113.984C197.719 112.912 197.901 110.81 196.657 109.504L145.229 55.4884L143.812 54.0001L142.775 54.767Z" fill="#262626"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M142.775 54.767L142.5 54.0001L142.52 54.471C142.55 55.1971 143.147 55.7701 143.874 55.7701H144.948C145.103 55.7701 145.229 55.644 145.229 55.4884V55.4884L143.812 54.0001L142.775 54.767Z" fill="#262626"></path>
+    <rect width="4.54079" height="3.85806" transform="matrix(0.877022 -0.480451 0.693869 0.720102 143.97 54.1818)" fill="white"></rect>
+    <rect x="147" y="53.0001" width="33" height="3" fill="white"></rect>
+    <path d="M208 62.0001C208 53.1636 215.163 46.0001 224 46.0001H313V62.0001H208V62.0001Z" fill="white"></path>
+    <path d="M301 46.0001H314C334.987 46.0001 352 63.0133 352 84.0001V86.0001C352 106.987 334.987 124 314 124H301V46.0001Z" fill="white"></path>
+    <path d="M290 62.0001H314C326.703 62.0001 337 72.2976 337 85.0001V86.0001C337 98.7027 326.703 109 314 109H290V62.0001Z" fill="#A63438"></path>
+    <path d="M259 89.0001C259 82.3727 264.373 77.0001 271 77.0001H275V206V206C266.163 206 259 198.837 259 190V89.0001Z" fill="white"></path>
+    <path d="M272 77.0001H313C317.418 77.0001 321 80.5818 321 85.0001V85.0001C321 89.4184 317.418 93.0001 313 93.0001H272V77.0001Z" fill="white"></path>
+    <rect x="275" y="93.0001" width="7" height="7" fill="white"></rect>
+    <path d="M275 100C275 96.1341 278.134 93.0001 282 93.0001H290V100H275V100Z" fill="#A63438"></path>
+    <path d="M290 117C290 112.582 293.582 109 298 109H312V124H290V117Z" fill="white"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M143.215 54.0001L142.758 54.4229L143.676 55.4153L144.455 54.6941L144 54.2019L143.813 54.0001H143.215Z" fill="#262626"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M143.215 54.0001H142V55.0001H144V54.2019L143.813 54.0001H143.215Z" fill="#262626"></path>
+    <rect x="190.326" y="82.066" width="150" height="150" rx="60" transform="rotate(-45 190.326 82.066)" fill="#A63438"></rect>
+    <path d="M252.326 59.0001C252.326 50.1636 259.49 43.0001 268.326 43.0001H306.326V59.0001H252.326V59.0001Z" fill="white"></path>
+    <path d="M294.326 43.0001H307.326C328.313 43.0001 345.326 60.0133 345.326 81.0001V83.0001C345.326 103.987 328.313 121 307.326 121H294.326V43.0001Z" fill="white"></path>
+    <path d="M283.326 59.0001H307.326C320.029 59.0001 330.326 69.2976 330.326 82.0001V83.0001C330.326 95.7027 320.029 106 307.326 106H283.326V59.0001Z" fill="#A63438"></path>
+    <path d="M252.326 86.0001C252.326 79.3727 257.699 74.0001 264.326 74.0001H268.326V173V173C259.49 173 252.326 165.837 252.326 157V86.0001Z" fill="white"></path>
+    <path d="M265.326 74.0001H306.326C310.744 74.0001 314.326 77.5818 314.326 82.0001V82.0001C314.326 86.4184 310.744 90.0001 306.326 90.0001H265.326V74.0001Z" fill="white"></path>
+    <rect x="268.326" y="90.0001" width="7" height="7" fill="white"></rect>
+    <path d="M268.326 97.0001C268.326 93.1341 271.46 90.0001 275.326 90.0001H283.326V97.0001H268.326V97.0001Z" fill="#A63438"></path>
+    <path d="M283.326 114C283.326 109.582 286.908 106 291.326 106H305.326V121H283.326V114Z" fill="white"></path>
+    <path d="M63.5276 126.5H37.2266C36.474 126.5 35.7851 126.078 35.4439 125.407L0.855828 57.4067C0.17904 56.0762 1.14568 54.5 2.63847 54.5H24.7812C25.5297 54.5 26.2156 54.918 26.5587 55.5832L48.7042 98.5182C49.4526 99.9693 51.5304 99.9606 52.2667 98.5034L73.9452 55.5981C74.2855 54.9246 74.9758 54.5 75.7303 54.5H98.2338C99.7278 54.5 100.694 56.0785 100.015 57.4092L65.309 125.409C64.9674 126.079 64.2792 126.5 63.5276 126.5Z" fill="#262626" stroke="#2D2D2D"></path>
+</svg>
\ No newline at end of file
diff --git a/server/api/dynamic-page/[...].ts b/server/api/dynamic-page/[...].ts
new file mode 100644
index 0000000..d656343
--- /dev/null
+++ b/server/api/dynamic-page/[...].ts
@@ -0,0 +1,9 @@
+import { createRouter, defineEventHandler, useBase } from 'h3'
+import * as DynamicPageCtrl from '~/server/models/dynamic-page'
+
+const router = createRouter()
+
+router.get('/getByCode/:code', defineEventHandler(DynamicPageCtrl.getDynamicPageByCode))
+router.get('/get-by-id/:id', defineEventHandler(DynamicPageCtrl.getDynamicPageById))
+
+export default useBase('/api/services', router.handler)
diff --git a/server/api/services/[...].ts b/server/api/services/[...].ts
new file mode 100644
index 0000000..ecdacc1
--- /dev/null
+++ b/server/api/services/[...].ts
@@ -0,0 +1,30 @@
+import { createRouter, defineEventHandler, useBase } from 'h3'
+import * as DynamicPageCtrl from '~/server/models/dynamic-page'
+
+const router = createRouter()
+
+router.get('/get-by-code/:slug', defineEventHandler(async (event : any) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const slug = event.context.params.slug;
+        const { item } : any = await $fetch(`${apiUrl}/cms/overview-page/1`)
+
+        return item
+    } catch (error) {
+        handleError(error);
+    }
+}))
+
+router.get('/get-by-id/:id', defineEventHandler(async (event : any) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const slug = event.context.params.slug;
+        const { item } : any = await $fetch(`${apiUrl}/cms/overview-page/1`)
+
+        return item
+    } catch (error) {
+        handleError(error);
+    }
+}))
+
+export default useBase('/api/services', router.handler)
diff --git a/server/models/dynamic-page/index.ts b/server/models/dynamic-page/index.ts
new file mode 100644
index 0000000..4574627
--- /dev/null
+++ b/server/models/dynamic-page/index.ts
@@ -0,0 +1,128 @@
+interface Base {
+    createdBy?: string | number
+    createdOn?: string
+    updatedBy?: string | number
+    updatedOn?: string
+}
+interface PageSettings {
+    label?: string; // Nhãn
+    layout?: string; // Bố cục
+    template?: string; // Bản mẫu
+    mainLink?: boolean; // Liên kết chính
+    footerLink?: boolean; // Liên kết chân trang
+    sidebarLink?: boolean; // Liên kết trượt bên
+    floatingLink?: boolean; // Liên kết bám nổi
+    dataType?: string; // Loại dữ liệu: Section, Category, Topic, Event, Collection, Article, Tag, Author, Poll, Quiz, Survey, Advertising, Other
+    dataQuery?: string; // Truy vấn dữ liệu: IDS | NEW | VIEW | SQL | REQUEST | PARAM | ...
+    dataResult?: string; // Kết quả dữ liệu (Json)
+}
+interface PageSectionSettings {
+    label?: string; // Nhãn
+    layout?: string; // Bố cục
+    template?: string; // Bản mẫu
+}
+interface PageComponentSettings {
+    label?: string; // Nhãn
+    layout?: string; // Bố cục
+    template?: string; // Bản mẫu
+    dataType?: string; // Loại dữ liệu: Section, Category, Topic, Event, Collection, Article, Tag, Author, Poll, Quiz, Survey, Advertising, Other
+    dataQuery?: string; // Truy vấn dữ liệu: IDS | NEW | VIEW | SQL | REQUEST | ...
+    dataResult?: string; // Kết quả dữ liệu (Json)
+}
+
+interface PageSection extends Base {
+  id?: number; // Mã định danh
+  siteId?: number; // Mã hệ thống
+  pageId?: number; // Mã trang
+  parentId?: number; // Mã vùng cha
+  title?: string; // Tiêu đề
+  slug?: string; // (Anchor)
+  code?: string; // Mã nhận diện
+  content?: string; // Nội dung
+  keywords?: string; // Từ khóa
+  description?: string; // Mô tả
+  type?: number; // Phân loại: PageSectionType
+  features?: string; // Đặc trưng: Featured (nổi bật)
+  taxonomy?: string; // Phân loại: Block | Module | Navigation
+  settings?: PageSectionSettings; // Thiết lập: PageSectionSettings (Json)
+  isPublished?: boolean; // Đã xuất bản
+  publishedBy?: number; // Xuất bản bởi
+  publishedOn?: string; // Xuất bản vào lúc (string)
+  expiresOn?: string; // Hết hạn vào lúc (string)
+  order?: number; // Thứ tự sắp xếp
+  status?: number; // Trạng thái
+}
+interface PageComponent extends Base {
+  id?: number; // Mã định danh
+  siteId?: number; // Mã hệ thống
+  pageId?: number; // Mã trang
+  sectionId?: number; // Mã vùng
+  title?: string; // Tiêu đề
+  code?: string; // Mã nhận diện
+  content?: string; // Nội dung
+  type?: number; // Phân loại: PageComponentType
+  features?: string; // Đặc trưng: Featured (nổi bật)
+  taxonomy?: string; // Phân loại
+  settings?: PageComponentSettings; // Thiết lập: PageComponentSettings (Json)
+  isPublished?: boolean; // Đã xuất bản
+  publishedBy?: number; // Xuất bản bởi
+  publishedOn?: string; // Xuất bản vào lúc (string)
+  expiresOn?: string; // Hết hạn vào lúc (string)
+  order?: number; // Thứ tự sắp xếp
+  status?: number; // Trạng thái
+}
+interface Page extends Base {
+  id?: number; // Mã định danh
+  siteId?: number; // Mã hệ thống
+  parentId?: number; // Mã trang cha
+  title?: string; // Tiêu đề
+  slug?: string; // Slug
+  code?: string; // Mã nhận diện
+  content?: string; // Nội dung
+  favicon?: string; // Biểu tượng
+  keywords?: string; // Từ khóa
+  thumbnail?: string; // Ảnh đại diện
+  description?: string; // Mô tả
+  type?: number; // Phân loại: PageType
+  features?: string; // Đặc trưng: Featured (nổi bật)
+  taxonomy?: string; // Phân nhóm
+  settings?: PageSettings; // Thiết lập: PageSettings (Json)
+  isPublished?: boolean; // Đã xuất bản
+  publishedBy?: number; // Đã xuất bản bởi
+  publishedOn?: string; // Đã xuất bản vào lúc (string)
+  expiresOn?: string; // Đã hết hạn vào lúc (string)
+  order?: number; // Thứ tự sắp xếp
+  status?: number; // Trạng thái
+  
+  components?: PageComponent[];
+  sections?: PageSection[];
+}
+
+export const getDynamicPageByCode = async (event : any) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const slug = event.context.params.slug;
+        
+        const { item }: any = await $fetch(`${apiUrl}/cms/overview-page/slug:${slug}`)
+        console.log('============')
+        console.log(item)
+        console.log('============')
+        return { item }
+    } catch (error) {
+        handleError(error);
+    }
+}
+
+export const getDynamicPageById = async (event : any) => {
+    try {
+        const { apiUrl } = useRuntimeConfig().public
+        const id = event.context.params.id;
+        
+        const { item }: any = await $fetch(`${apiUrl}/cms/overview-page/${id}`, {
+            method: 'GET',
+        })
+        return { item }
+    } catch (error) {
+        handleError(error);
+    }
+}
\ No newline at end of file
diff --git a/server/tsconfig.json b/server/tsconfig.json
new file mode 100644
index 0000000..b9ed69c
--- /dev/null
+++ b/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/server/utils/error.ts b/server/utils/error.ts
new file mode 100644
index 0000000..b4e4307
--- /dev/null
+++ b/server/utils/error.ts
@@ -0,0 +1,11 @@
+import { H3Error} from 'h3'
+
+export function handleError(error: any){
+    const h3Error = new H3Error('')
+
+    h3Error.statusCode = error.statusCode||500
+    h3Error.statusMessage = error.statusMessage||'Internal Server Error'
+    h3Error.data = error.data
+
+    throw createError(h3Error)
+}
\ No newline at end of file
diff --git a/stores/dynamic-page.ts b/stores/dynamic-page.ts
new file mode 100644
index 0000000..4ba1452
--- /dev/null
+++ b/stores/dynamic-page.ts
@@ -0,0 +1,74 @@
+import { defineStore, acceptHMRUpdate } from "pinia";
+
+export const useDynamicPageStore = defineStore("dynamicPageStore", () => {
+    const currentPage = ref<any>({});
+    const sectionPublished = ref<any[]>([]);
+    const componentPublished = ref<any[]>([]);
+
+    async function fetchPageByCode(slug: any) {
+        try {
+          const { data } = await useFetch(`/api/services/get-by-code/${slug}`)
+          currentPage.value = data.value
+        } catch (error: any) {}
+    }
+
+    async function fetchPageById(id: string | number) {
+        try {
+          const {data} = await useFetch(`/api/services/get-by-id/${id}`)
+          currentPage.value = data.value
+        } catch (error: any) {}
+    }
+
+    const setSectionPublished = () => {
+        const contentArr: any = [];
+        currentPage.value.sections && currentPage.value.sections.map((section: any) => {
+          contentArr.push(section.content && typeof section.content === 'string' && JSON.parse(section.content));
+          return section;
+        });
+        
+        sectionPublished.value = currentPage.value.sections && currentPage.value.sections.filter(
+          (section: any) => section.isPublished && !contentArr.flat().some((_section: any) => _section && _section.data && _section.type === "section" && section.id === _section.data)
+        );
+    };
+
+    const setComponentPublished = () => {
+        const contentArr: any = [];
+        currentPage.value.sections && currentPage.value.sections.map((section: any) => {
+          contentArr.push(section.content && JSON.parse(section.content) && JSON.parse(section.content));
+          return section;
+        });
+        componentPublished.value = currentPage.value.components && currentPage.value.components.filter((section: any) => section.isPublished);
+    };
+
+    const setDataQuery = (query: any, componentId: number | string) => {
+        for (const _component of currentPage.value.components && currentPage.value.components) {
+          if (_component.id === componentId) {
+            const currentSetting = {
+              ..._component.settings,
+              dataQuery: query,
+            };
+            _component.settings = {
+              ...currentSetting,
+            };
+            break;
+          }
+        }
+        setComponentPublished();
+    };
+
+    return {
+        currentPage,
+        sectionPublished,
+        componentPublished,
+
+        fetchPageByCode,
+        fetchPageById,
+        setSectionPublished,
+        setComponentPublished,
+        setDataQuery,
+    };
+});
+
+if (import.meta.hot) {
+    import.meta.hot.accept(acceptHMRUpdate(useDynamicPageStore, import.meta.hot));
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a746f2a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/uno.config.ts b/uno.config.ts
new file mode 100644
index 0000000..4a27d30
--- /dev/null
+++ b/uno.config.ts
@@ -0,0 +1,85 @@
+import type { ConfigBase } from "unocss";
+
+import {
+  defineConfig,
+  transformerVariantGroup,
+  transformerDirectives,
+  presetWebFonts,
+  presetUno,
+  presetMini,
+} from "unocss";
+
+export default defineConfig({
+  safelist: [],
+
+  theme: {
+    colors: {
+      'primary': {
+        100: "#3c7abc",
+      },
+      // 'red': '#ff0018',
+      // 'blue': '#2d6cf6',
+      // 'brown-700': '#99553D',
+      // 'gray-100': '#f5f5f5',
+      // 'gray-200': '#eee',
+      // 'gray-400': '#bdbdbd',
+      // 'gray-600': '#757575',
+      // 'gray-700': '#616161',
+      // 'green-100': '#2ED0A9',
+      // 'yellow-700': '#eaa23e',
+    },
+  },
+
+  shortcuts: [
+    {
+      "after:no-content": "after:content-['']",
+      "before:no-content": "before:content-['']",
+      'container-xxl': 'px-[8px] mx-auto w-full sm:w-620px md:w-760px lg:w-980px xl:w-1100px 2xl:w-1320px',
+    },
+  ],
+  rules: [
+    [
+      "text-fill-transparent",
+      {
+        "-webkit-text-fill-color": "transparent",
+        "text-fill-color": "transparent",
+      },
+    ],
+    [
+      "backdrop-blur-xs",
+      {
+        "backdrop-filter": "blur(2px)",
+        "-webkit-backdrop-filter": "blur(2px)",
+      },
+    ],
+    [
+      "max-w-6xl",
+      {
+        "max-width": "60rem",
+      },
+    ],
+    [
+      "max-w-8xl",
+      {
+        "max-width": "85.375rem",
+      },
+    ],
+  ],
+  extractors: [],
+  presets: [
+    presetUno(),
+    presetMini(),
+    presetWebFonts({
+      provider: "google",
+      fonts: {
+        nunito: "Nunito",
+        playfair: ['Playfair Display', 'sans-serif'],
+        'playfair-display': ['Playfair Display', 'serif'],
+        'bai-jamjuree': ['Bai Jamjuree', 'Arial', 'sans-serif'],
+        sans: ['Raleway', 'Arial', "Helvetica Neue", 'Helvetica', 'sans-serif'],
+        arial: ['Arial', 'sans-serif'],
+      },
+    }),
+  ],
+  transformers: [transformerVariantGroup(), transformerDirectives()],
+}) satisfies ConfigBase;
diff --git a/utils/parseSQL.ts b/utils/parseSQL.ts
new file mode 100644
index 0000000..692a0bc
--- /dev/null
+++ b/utils/parseSQL.ts
@@ -0,0 +1,249 @@
+/* Bộ query mẫu */
+// Sql[SELECT * FROM Table WHERE Id=1] Key[xxx]
+// Uri[link-api] Method[Post] Params[{"param1":"value1","param2":"value2"}] Headers[{"Authorization":"12345678","Content-Type":"application/json"}] Content[{"data1":"value1","data2":"value2"}] Key[xxx]
+// Get[Article] Top[10] With[Topics:1,2,3] Sort[Views-,Shares+]
+
+import { isEmpty } from "lodash";
+
+const keyMapping = {
+    // 3 query key để phân loại
+    Sql: 'Sql',
+    Uri: 'Uri',
+    Get: 'Get',
+    Key: 'Key',
+    Method: 'Method',
+    Params: 'Params',
+    Headers: 'Headers',
+    Content: 'Content',
+    Top: 'Top',
+    Page: 'Page',
+    With: 'With',
+    Sort: 'Sort',
+    TTL: 'TTL',
+    Ids: 'Ids'
+};
+
+const SQL_MODEL = {
+    Get: "",
+    Top: 1,
+    Page: 0,
+    With: [],
+    Sort: [],
+    TTL: "",
+    Key: "",
+    Ids: [],
+}
+
+const REQUEST_MODEL = {
+    TTL: "",
+    Key: "",
+    Uri: "",
+    Method: "Get",
+    Params: [],
+    Headers: [],
+    Content: [],
+};
+
+const CUSTOM_MODEL = {
+    TTL: "",
+    Key: "",
+    Sql: "",
+};
+
+const regexParseString = (key: String) => {
+    const pattern = `${key}\\[(.*?)\\]`;
+    return new RegExp(pattern);
+}
+const regexParseStringColon = (key: String, suffix: string = ']') => {
+    const pattern = `${key}:\\s*([^;\\]]+)`;
+    return new RegExp(pattern);
+}
+
+const getObjectWithModel = (model: any, queryString: string) => {
+    let resultObject: any = {};
+    for (let [key] of Object.entries(model)) {
+        let resultValue: any = null;
+        const matchValue = queryString.match(regexParseString(key)) || '';
+        let currentMatchValue: any = matchValue && matchValue[1];
+        if (key === keyMapping.With) {
+            const splitArrWithSemi = currentMatchValue.split(';').length > 0 ? currentMatchValue.split(';') : [currentMatchValue];
+            resultValue = splitArrWithSemi.map((_: any) => {
+                const parseColon = _.split(':');
+                return {
+                    key: parseColon[0],
+                    value: parseColon[1],
+                }
+            }).filter((item: any) => item.value);
+        } else if (key === keyMapping.Sort) {
+            const splitArrWithComma = currentMatchValue.split(',').length > 0 ? currentMatchValue.split(',') : [currentMatchValue];
+            resultValue = splitArrWithComma.map((_: any) => {
+                const isPlus = _.includes('+')
+                const isMinus = _.includes('-')
+                const key = _.replaceAll('-', '').replaceAll('+', '');
+                return {
+                    key,
+                    value: isPlus ? '+' : isMinus ? '-' : ''
+                }
+            }).filter((item: any) => item.value);
+        } 
+        else if ([keyMapping.Content, keyMapping.Headers, keyMapping.Params].includes(key)) {
+            if(currentMatchValue) {
+                const parsedObject = JSON.parse(currentMatchValue);
+                resultValue = Object.entries(parsedObject).map(([key, value]) => ({ key, value }));
+            }
+        } 
+        else {
+            resultValue = currentMatchValue;
+        }
+
+        resultObject = {
+            ...resultObject,
+            [key]: resultValue
+        }
+    }
+    return resultObject;
+}
+
+const ArrayToString = (array: any, key: string, prefix: string, suffix: string) => {
+    if (!Array.isArray(array) || array.length === 0) {
+        return '';
+    }
+    const toString = array.filter((item: any) => item.value).reduce((accumulator: any, currentObject: any, index: number) => {
+        const parseString = currentObject.key + prefix + currentObject.value;
+        return index === 0 ? accumulator + parseString : accumulator + suffix + parseString;
+    }, "")
+    return key + "[" + toString + "]";
+}
+
+const parseDataQueryFormString = (command: string) => {
+    if (isEmpty(command)) return null;
+
+    let resultObject: any = null;
+    let typeQuery: any = null;
+
+    if (command.includes(keyMapping.Sql)) {
+        typeQuery = keyMapping.Sql
+    } else if (command.includes(keyMapping.Uri)) {
+        typeQuery = keyMapping.Uri
+    } else if (command.includes(keyMapping.Get)) {
+        typeQuery = keyMapping.Get
+    }
+
+    if (!typeQuery) return null;
+
+    switch (typeQuery) {
+        case keyMapping.Sql:
+            resultObject = Object.assign(CUSTOM_MODEL, getObjectWithModel(CUSTOM_MODEL, command));
+            break;
+        case keyMapping.Uri:
+            resultObject = Object.assign(REQUEST_MODEL, getObjectWithModel(REQUEST_MODEL, command));
+            break;
+        case keyMapping.Get:
+            resultObject = Object.assign(SQL_MODEL, getObjectWithModel(SQL_MODEL, command));
+            break;
+        default:
+            resultObject = {};
+    }
+    return {
+        typeQuery,
+        value: resultObject
+    }
+}
+
+const parseDataQueryFormObject = (command: any) => {
+    const resultString = Object.entries(command).reduce((accumulator, [key, value]) => {
+        if (!value) return accumulator;
+        let parseString: string = '';
+        if (key === keyMapping.With) {
+            parseString = ArrayToString(value, key, ':', ';');
+        } else if (key === keyMapping.Sort) {
+            parseString = ArrayToString(value, key, '', ',');
+        } else if ([keyMapping.Content, keyMapping.Headers, keyMapping.Params].includes(key)) {
+            const reduceArrayToObject = value.reduce((acc: any, { key, value }: any) => {
+                acc[key.trim()] = value.trim();
+                return acc;
+            }, {});
+            const formattedValue = Object.keys(reduceArrayToObject).length ? JSON.stringify(reduceArrayToObject) : "";
+            parseString = formattedValue ? `${key}[${formattedValue}]` : ""
+        }  
+        else {
+            if (typeof value === "string") {
+                value = value.trim();
+            } else {
+                value = value < 0 ? 0 : value;
+            }
+            if(value) parseString = key + "[" + value + "]"
+        }
+        return parseString ? accumulator + " " + parseString : accumulator;
+    }, "");
+    return resultString;
+}
+
+const DEFAULT_QUERY_DROP = (key: string, id: any, TTL?: String) => {
+    return `Get[${key}] With[Id:${id}]${TTL ? ` TTL[${TTL}]` : ''}`;
+}
+
+const COLLECTION_QUERY_DROP = (key: string, ids: any, TTL?: String) => {
+    let arraySplit : any = null; 
+    try {
+        arraySplit = ids.split(',');
+    } catch {
+        arraySplit =  1;
+    }
+    return `Get[${key}]${`${arraySplit && arraySplit.length > 0 ? ` Top[${arraySplit?.length}]` : ` Top[1]`}`} With[Ids:${ids.toString()}]${TTL ? ` TTL[${TTL}]` : ''}`;
+}
+
+const COLLECTION_PAGING_QUERY_DROP = (key: string, params: { key: string; value: any; }, TTL?: string) => {
+    return `Get[${key}] Top[20] With[${params.key}:${params.value}]${TTL ? ` TTL[${TTL}]` : ''}`;
+};
+
+const getValueStringWithKey = (queryString: string, key: string = keyMapping.Ids) => {
+    const matchValue = queryString.match(regexParseString(key)) || '';
+    let currentMatchValue : any = matchValue && matchValue[1]; 
+    return currentMatchValue;
+}
+
+const getValueStringWithKeyAndColon = (queryString: string, key: string = keyMapping.Ids) => {
+    const matchValue = queryString.match(regexParseStringColon(key)) || '';
+    let currentMatchValue : any = matchValue && matchValue[1]; 
+    return currentMatchValue;
+}
+
+const getInputValue = (inputValue: any, typeGet: 'OBJECT' | 'ARRAY') => {
+    if (!inputValue) return null;
+    
+    let _inputValue : any = null;
+    try {
+        _inputValue = JSON.parse(inputValue)
+    } catch {
+        _inputValue = inputValue
+    }
+    
+    let typeOfInputValue : any = null;  
+    if (Array.isArray(_inputValue)) {
+        typeOfInputValue = 'ARRAY';
+    } else if (typeof _inputValue === 'object' && _inputValue !== null) {
+        typeOfInputValue = 'OBJECT';
+    } else {
+        typeOfInputValue = null;
+    }
+
+    if (typeGet === 'OBJECT') {
+        if (typeOfInputValue === 'OBJECT') return _inputValue;
+        if (typeOfInputValue === 'ARRAY') return _inputValue && _inputValue[0];
+    } else if (typeGet === 'ARRAY') {
+        if (typeOfInputValue === 'OBJECT') return [{..._inputValue}];
+        if (typeOfInputValue === 'ARRAY') return _inputValue;
+    }
+}
+
+export {
+    parseDataQueryFormString,
+    parseDataQueryFormObject,
+    getValueStringWithKey,
+    getValueStringWithKeyAndColon,
+    getInputValue,
+    DEFAULT_QUERY_DROP,
+    COLLECTION_QUERY_DROP,
+    COLLECTION_PAGING_QUERY_DROP
+}
\ No newline at end of file