diff --git a/app.vue b/app.vue
index bc375a7..6cd9e5a 100644
--- a/app.vue
+++ b/app.vue
@@ -2,8 +2,26 @@
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 
 const { seo } = useAppConfig()
+const route = useRoute()
+
+const { data: navigation, refresh: refreshNavigation } = await useAsyncData('navigation', () => fetchContentNavigation(), {
+  transform: (data) => {
+    const result = []
+
+    data.forEach((item) => {
+      if (item.title.toLowerCase() === route.fullPath.split('/')[1]) {
+        if (item.children) {
+          item.children.forEach((child) => {
+            result.push(child)
+          })
+        }
+      }
+    })
+
+    return result
+  }
+})
 
-const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
   default: () => [],
   server: false
@@ -29,7 +47,7 @@ useSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-provide('navigation', navigation)
+provide('navigation', { navigation, refreshNavigation })
 </script>
 
 <template>
diff --git a/content/1.getting-started/1.index.md b/content/en/1.getting-started/1.index.md
similarity index 100%
rename from content/1.getting-started/1.index.md
rename to content/en/1.getting-started/1.index.md
diff --git a/content/1.getting-started/2.installation.md b/content/en/1.getting-started/2.installation.md
similarity index 100%
rename from content/1.getting-started/2.installation.md
rename to content/en/1.getting-started/2.installation.md
diff --git a/content/1.getting-started/3.usage.md b/content/en/1.getting-started/3.usage.md
similarity index 100%
rename from content/1.getting-started/3.usage.md
rename to content/en/1.getting-started/3.usage.md
diff --git a/content/1.getting-started/_dir.yml b/content/en/1.getting-started/_dir.yml
similarity index 100%
rename from content/1.getting-started/_dir.yml
rename to content/en/1.getting-started/_dir.yml
diff --git a/content/index.yml b/content/en/index.yml
similarity index 98%
rename from content/index.yml
rename to content/en/index.yml
index 0934e84..e35b0db 100644
--- a/content/index.yml
+++ b/content/en/index.yml
@@ -13,7 +13,7 @@ hero:
     - label: Get started
       icon: i-heroicons-arrow-right-20-solid
       trailing: true
-      to: '/getting-started'
+      to: '/en/getting-started'
       size: lg
     - label: Use this template
       icon: i-simple-icons-github
diff --git a/layouts/docs.vue b/layouts/docs.vue
index 042fdca..7c390b7 100644
--- a/layouts/docs.vue
+++ b/layouts/docs.vue
@@ -1,7 +1,29 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
+import type { Ref } from 'vue'
+import type { Lang } from '~/types/Lang'
 
-const navigation = inject<Ref<NavItem[]>>('navigation')
+const route = useRoute()
+const router = useRouter()
+const config = useRuntimeConfig()
+
+const { navigation, refreshNavigation } = inject<Ref<NavItem[]>>('navigation')
+const languages = config.public.languages.map((lang: Lang) => ({
+  name: lang.name,
+  value: lang.code
+}))
+const language = ref(languages.find((lang) => lang.value === route.fullPath.split('/')[1] && lang.value)?.value || config.public.defaultLanguage)
+
+watch(language, (value) => {
+  router.push(
+    route.fullPath.replace(`/${route.fullPath.split('/')[1]}/`, `/${value}/`)
+  )
+  refreshNavigation()
+})
+
+onMounted(() => {
+  refreshNavigation()
+})
 </script>
 
 <template>
@@ -9,6 +31,12 @@ const navigation = inject<Ref<NavItem[]>>('navigation')
     <UPage>
       <template #left>
         <UAside>
+          <USelect
+            v-model="language"
+            :options="languages"
+            option-attribute="name"
+            class="mb-2"
+          />
           <UNavigationTree :links="mapContentNavigation(navigation)" />
         </UAside>
       </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3836aa8..8babfb8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+
 export default defineNuxtConfig({
   extends: ['@nuxt/ui-pro'],
   modules: [
@@ -39,5 +40,16 @@ export default defineNuxtConfig({
         braceStyle: '1tbs'
       }
     }
+  },
+  runtimeConfig: {
+    public: {
+      defaultLanguage: 'en',
+      languages: [
+        {
+          code: 'en',
+          name: 'English'
+        },
+      ]
+    }
   }
 })
diff --git a/pages/index.vue b/pages/index.vue
index 230a0dd..59e1c6e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
+const config = useRuntimeConfig()
+
+const { data: page } = await useAsyncData('index', () => queryContent(`/${config.public.defaultLanguage}`).findOne())
 
 useSeoMeta({
   titleTemplate: '',
@@ -46,7 +48,7 @@ useSeoMeta({
       </template>
 
       <template #title>
-        <MDC :value="page.hero.title" />
+        <MDC :value="page.hero.title"/>
       </template>
 
       <MDC
diff --git a/types/Lang.ts b/types/Lang.ts
new file mode 100644
index 0000000..2394902
--- /dev/null
+++ b/types/Lang.ts
@@ -0,0 +1,4 @@
+export interface Lang {
+  name: string
+  code: string
+}