diff --git a/aj-vi-translate.code-workspace b/aj-vi-translate.code-workspace
new file mode 100644
index 00000000..0936f36f
--- /dev/null
+++ b/aj-vi-translate.code-workspace
@@ -0,0 +1,15 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"workbench.colorCustomizations": {
+			"editorGroupHeader.tabsBorder": "#00aced",
+			"commandCenter.foreground": "#ffffffdd",
+			"commandCenter.background": "#00aced77",
+			"commandCenter.border": "#00aced"
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/docs/welcome/vi.md b/src/docs/welcome/vi.md
new file mode 100644
index 00000000..14fab1e7
--- /dev/null
+++ b/src/docs/welcome/vi.md
@@ -0,0 +1,55 @@
+<div class="header">
+	<div>
+		<h1>Chào mừng đến</h1>
+		<h1>Animated Java!</h1>
+	</div>
+	<img src="/images/armor_stand_wave.webp" alt="Một armor stand đang vẫy tay" />
+</div>
+
+Tài liệu này sẽ giúp **bạn** 🫵 đưa các dự án Data Pack của mình lên một
+tầm cao mới với Animated Java!
+
+<br>
+
+:::warning[Trước khi bắt đầu]
+Khuyên thật bạn nên tìm hiểu trước cách hoạt động của [Data Pack](https://minecraft.wiki/w/Data_pack) và [Resource Pack](https://minecraft.wiki/w/Resource_pack) trong Minecraft: Java Edition.
+:::
+
+<style>
+	.header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+	}
+
+	.header div {
+		display: flex;
+		flex-direction: column;
+	}
+
+	h1 {
+		margin: 0;
+	}
+
+	img {
+		border: unset;
+		outline: unset;
+		box-shadow: unset;
+		background: unset;
+	}
+
+	@media (width < 950px) {
+		.header {
+			flex-direction: column-reverse;
+			text-align: center;
+		}
+
+		img {
+			width: 150px;
+			height: 150px;
+			margin-top: 8px;
+		}
+	}
+</style>
diff --git a/src/lib/docs/docs.ts b/src/lib/docs/docs.ts
index b13178be..27c0c2e4 100644
--- a/src/lib/docs/docs.ts
+++ b/src/lib/docs/docs.ts
@@ -3,7 +3,7 @@ import type { Component } from 'svelte'
 const MODULES = import.meta.glob('/src/docs/**/*.md')
 
 export const DEFAULT_LANGUAGE = 'en'
-export const SUPPORTED_LANGUAGES = ['en', 'de', 'nl', 'ru', 'uk', 'zh-cn']
+export const SUPPORTED_LANGUAGES = ['en', 'de', 'nl', 'ru', 'uk', 'zh-cn', 'vi']
 /** Languages served under a `/<lang>` prefix. The default language has no prefix. */
 export const PREFIXED_LANGUAGES = SUPPORTED_LANGUAGES.filter(lang => lang !== DEFAULT_LANGUAGE)