diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..6fe8b7b
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,24 @@
+
+### Describe the bug
+<-- A clear and concise description of what the bug is. --!>
+
+### To Reproduce
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+### Expected behavior
+A clear and concise description of what you expected to happen.
+
+### Screenshots
+If applicable, add screenshots to help explain your problem.
+
+### Environment (please complete the following information):
+- **Device:** [e.g. Pixel 7]
+- **OS:** [e.g. Android 14]
+- **App Version:** [e.g. 1.0.1]
+
+### Additional context
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..2dd8717
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,14 @@
+
+
+### Is your feature request related to a problem?
+<-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] --!>
+
+### Describe the solution you'd like
+<-- A clear and concise description of what you want to happen. --!>
+
+### Describe alternatives you've considered
+<-- A clear and concise description of any alternative solutions or features you've considered. --!>
+
+### Additional context
+<-- Add any other context or screenshots about the feature request here. --!>
+
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index a8fb724..f713a2b 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,8 +1,3 @@
----
-name: Pull Request
-about: Create a new pull request
-labels: ''
----
 
 ## Task summery
 <!-- Briefly describe the changes in this PR. -->
diff --git a/build-logic/convention/src/main/java/dev/love/winter/convention/KotlinAndroid.kt b/build-logic/convention/src/main/java/dev/love/winter/convention/KotlinAndroid.kt
index 00eeedd..4411d43 100644
--- a/build-logic/convention/src/main/java/dev/love/winter/convention/KotlinAndroid.kt
+++ b/build-logic/convention/src/main/java/dev/love/winter/convention/KotlinAndroid.kt
@@ -24,7 +24,7 @@ internal fun Project.configureApplication() {
         }
 
         androidResources {
-            localeFilters += listOf("en", "ko")
+            localeFilters += listOf("en", "ko", "ja", "zh-rCN", "vi", "th")
         }
 
         buildTypes {
diff --git a/config/scripts/.gitignore b/config/scripts/.gitignore
new file mode 100644
index 0000000..beac9d4
--- /dev/null
+++ b/config/scripts/.gitignore
@@ -0,0 +1,7 @@
+# Service Account credentials
+*.json
+service-account*.json
+
+# Translation config files (except example)
+translations/*
+!translations/example.properties
diff --git a/config/scripts/build.gradle.kts b/config/scripts/build.gradle.kts
new file mode 100644
index 0000000..341423e
--- /dev/null
+++ b/config/scripts/build.gradle.kts
@@ -0,0 +1,36 @@
+plugins {
+    id("winter.kotlin.library")
+}
+
+dependencies {
+    // Google Sheets API v4
+    implementation("com.google.apis:google-api-services-sheets:v4-rev20220927-2.0.0")
+
+    // Google Auth Library for Service Account
+    implementation("com.google.auth:google-auth-library-oauth2-http:1.40.0")
+
+    // Required for JSON parsing by Google's libraries
+    implementation("com.google.code.gson:gson:2.13.2")
+
+    // HTTP transport for Google API
+    implementation("com.google.http-client:google-http-client-jackson2:2.0.2")
+}
+
+/**
+ * ./gradlew :config:scripts:updateTranslations -Pargs="example"
+ * ./gradlew :config:scripts:updateTranslations -Pargs="sample-app"
+ * ./gradlew :config:scripts:updateTranslations -Pargs="app"
+ */
+tasks.register<JavaExec>("updateTranslations") {
+    group = "translation"
+    description = "Update translations from Google Sheets to Android strings.xml"
+    mainClass.set("dev.love.winter.scripts.UpdateTranslationsKt")
+    classpath = sourceSets["main"].runtimeClasspath
+    workingDir = rootProject.projectDir
+
+    // Pass command line arguments to the script
+    val argsProperty = providers.gradleProperty("args")
+    if (argsProperty.isPresent) {
+        args(argsProperty.get().split(" "))
+    }
+}
diff --git a/config/scripts/src/main/AndroidManifest.xml b/config/scripts/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..1d26c87
--- /dev/null
+++ b/config/scripts/src/main/AndroidManifest.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest/>
\ No newline at end of file
diff --git a/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt b/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt
new file mode 100644
index 0000000..e0cc34a
--- /dev/null
+++ b/config/scripts/src/main/java/dev/love/winter/scripts/UpdateTranslations.kt
@@ -0,0 +1,273 @@
+@file:Suppress("MatchingDeclarationName")
+
+package dev.love.winter.scripts
+
+import com.google.api.client.googleapis.javanet.GoogleNetHttpTransport
+import com.google.api.client.json.gson.GsonFactory
+import com.google.api.services.sheets.v4.Sheets
+import com.google.api.services.sheets.v4.SheetsScopes
+import com.google.auth.http.HttpCredentialsAdapter
+import com.google.auth.oauth2.ServiceAccountCredentials
+import java.io.File
+import java.io.FileInputStream
+import java.io.FileWriter
+import java.util.Properties
+import kotlin.system.exitProcess
+
+data class ScriptConfig(
+    val spreadsheetId: String,
+    val sheetName: String,
+    val serviceAccountJsonPath: String,
+    val appModulePath: String,
+)
+
+/**
+ * ./gradlew :config:scripts:updateTranslations -Pargs="example"
+ * ./gradlew :config:scripts:updateTranslations -Pargs="sample-app"
+ * ./gradlew :config:scripts:updateTranslations -Pargs="app"
+ */
+fun main(args: Array<String>) {
+    if (args.isEmpty()) {
+        printUsage()
+        exitProcess(1)
+    }
+
+    val config = loadConfigFromFile(args[0])
+    runTranslationUpdate(config)
+}
+
+fun loadConfigFromFile(configPathOrAppName: String): ScriptConfig {
+    val configFile = if (configPathOrAppName.endsWith(".properties")) {
+        File(configPathOrAppName)
+    } else {
+        File("config/scripts/translations/$configPathOrAppName.properties")
+    }
+
+    check(configFile.exists()) {
+        "Config file not found: ${configFile.absolutePath}\n" +
+            "Available configs: ${File("config/scripts/translations").listFiles()?.joinToString { it.name } ?: "none"}"
+    }
+
+    val properties = Properties()
+    FileInputStream(configFile).use { properties.load(it) }
+
+    val configDir = configFile.parentFile
+
+    return ScriptConfig(
+        spreadsheetId = properties.getProperty("spreadsheet.id") ?: error("Missing required property: spreadsheet.id"),
+        sheetName = properties.getProperty("sheet.name") ?: error("Missing required property: sheet.name"),
+        serviceAccountJsonPath = resolveFilePath(
+            path = properties.getProperty("service.account.json.path") ?: error("Missing required property: service.account.json.path"),
+            baseDir = configDir,
+        ),
+        appModulePath = properties.getProperty("app.module.path")
+            ?: error("Missing required property: app.module.path"),
+    )
+}
+
+fun resolveFilePath(path: String, baseDir: File): String {
+    val file = File(path)
+    return if (file.isAbsolute) {
+        path
+    } else {
+        File(baseDir, path).absolutePath
+    }
+}
+
+fun runTranslationUpdate(config: ScriptConfig) {
+    try {
+        println("Starting translation update...")
+        println("  Spreadsheet ID: ${config.spreadsheetId}")
+        println("  Sheet Name: ${config.sheetName}")
+        println("  App Module: ${config.appModulePath}")
+
+        val translationData = fetchTranslationsFromSheet(config)
+        val parsedData = parseTranslationData(translationData)
+        saveTranslationsAsXml(parsedData, config.appModulePath)
+
+        println("✓ Translations successfully saved!")
+        println("  Languages: ${parsedData.languages.joinToString()}")
+        println("  Total keys: ${parsedData.translations.size}")
+    } catch (e: Exception) {
+        System.err.println("✗ Error occurred: ${e.message}")
+        exitProcess(1)
+    }
+}
+
+fun printUsage() {
+    val availableConfigs = File("config/scripts/translations").listFiles()
+        ?.filter { it.extension == "properties" }
+        ?.map { it.nameWithoutExtension }
+        ?: emptyList()
+
+    println(
+        """
+        Usage: ./gradlew :config:scripts:updateTranslations --args="<appName>"
+
+        Available configurations in translations/:
+          ${availableConfigs.joinToString("\n  ") { "- $it" }}
+
+        Examples:
+          # Use app config from translations/example.properties
+          ./gradlew :config:scripts:updateTranslations --args="example"
+
+          # Use custom config file path
+          ./gradlew :config:scripts:updateTranslations --args="path/to/custom.properties"
+
+        To add a new app configuration:
+          1. Copy translations/example.properties to translations/your-app.properties
+          2. Update the properties file with your app's settings
+          3. Run: ./gradlew :config:scripts:updateTranslations --args="your-app"
+        """.trimIndent()
+    )
+}
+
+fun fetchTranslationsFromSheet(config: ScriptConfig): List<List<Any>> {
+    val credentials = ServiceAccountCredentials.fromStream(
+        FileInputStream(config.serviceAccountJsonPath)
+    ).createScoped(listOf(SheetsScopes.SPREADSHEETS_READONLY))
+
+    val httpTransport = GoogleNetHttpTransport.newTrustedTransport()
+    val jsonFactory = GsonFactory.getDefaultInstance()
+
+    val sheetsService = Sheets.Builder(
+        httpTransport,
+        jsonFactory,
+        HttpCredentialsAdapter(credentials)
+    )
+        .setApplicationName("Translation Update Script")
+        .build()
+
+    val response = sheetsService.spreadsheets().values()
+        .get(config.spreadsheetId, config.sheetName)
+        .execute()
+
+    val values = response.getValues() ?: emptyList()
+    check(values.isNotEmpty()) { "No data found in sheet: ${config.sheetName}" }
+
+    return values
+}
+
+data class TranslationData(
+    val languages: List<String>,
+    val translations: List<TranslationEntry>,
+)
+
+data class TranslationEntry(
+    val key: String,
+    val values: Map<String, String>,
+    val context: String?,
+)
+
+fun parseTranslationData(data: List<List<Any>>): TranslationData {
+    check(data.isNotEmpty()) { "Translation data is empty" }
+
+    val headers = data[0].map { it.toString() }
+    val keyIndex = headers.indexOf("key")
+    check(keyIndex >= 0) { "Missing 'key' column in spreadsheet" }
+
+    val contextIndex = headers.indexOf("context").takeIf { it >= 0 }
+
+    val languageColumns = headers.mapIndexedNotNull { index, header ->
+        if (header != "key" && header != "context" && header != "screen" && header.length <= 5) {
+            index to header
+        } else {
+            null
+        }
+    }
+
+    check(languageColumns.isNotEmpty()) { "No language columns found in spreadsheet" }
+
+    val languages = languageColumns.map { it.second }
+    val translations = data.drop(1).mapNotNull { row ->
+        if (row.size <= keyIndex) return@mapNotNull null
+
+        val key = row[keyIndex].toString().trim()
+        if (key.isEmpty()) return@mapNotNull null
+
+        val values = languageColumns.associate { (index, lang) ->
+            lang to (row.getOrNull(index)?.toString()?.trim() ?: "")
+        }
+
+        val context = contextIndex?.let { row.getOrNull(it)?.toString()?.trim() }
+
+        TranslationEntry(
+            key = key,
+            values = values,
+            context = context,
+        )
+    }
+
+    return TranslationData(
+        languages = languages,
+        translations = translations,
+    )
+}
+
+fun convertToAndroidResourceQualifier(languageCode: String): String {
+    val parts = languageCode.split("-")
+    return when (parts.size) {
+        1 -> {
+            parts[0].lowercase()
+        }
+        2 -> {
+            val language = parts[0].lowercase()
+            val region = parts[1].uppercase()
+            "$language-r$region"
+        }
+        else -> {
+            languageCode.lowercase()
+        }
+    }
+}
+
+fun saveTranslationsAsXml(data: TranslationData, appModulePath: String) {
+    data.languages.forEach { language ->
+        val androidLanguageCode = convertToAndroidResourceQualifier(language)
+        val valuesDir = if (language == "en") {
+            File(appModulePath, "src/main/res/values")
+        } else {
+            File(appModulePath, "src/main/res/values-$androidLanguageCode")
+        }
+
+        valuesDir.mkdirs()
+        val stringsFile = File(valuesDir, "strings.xml")
+
+        FileWriter(stringsFile).use { writer ->
+            writer.write("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n")
+            writer.write("<resources>\n")
+
+            data.translations.forEach { entry ->
+                val value = entry.values[language] ?: ""
+                if (value.isNotEmpty()) {
+                    if (!entry.context.isNullOrBlank()) {
+                        writer.write("    <!-- ${entry.context} -->\n")
+                    }
+                    val escapedValue = escapeXml(value)
+                    writer.write("    <string name=\"${entry.key}\">$escapedValue</string>\n")
+                }
+            }
+
+            writer.write("</resources>\n")
+        }
+
+        println("  ✓ ${stringsFile.relativeTo(File(appModulePath)).path}")
+    }
+}
+
+fun escapeXml(text: String): String {
+    var result = text
+        .replace("&", "&amp;")
+        .replace("<", "&lt;")
+        .replace(">", "&gt;")
+        .replace("\"", "&quot;")
+        .replace("'", "\\'")
+        .replace("\n", "\\n")
+
+    // Escape @ symbol at the beginning of the string (Android resource reference)
+    if (result.startsWith("@")) {
+        result = "\\@${result.substring(1)}"
+    }
+
+    return result
+}
diff --git a/config/scripts/translations/example.properties b/config/scripts/translations/example.properties
new file mode 100644
index 0000000..c590125
--- /dev/null
+++ b/config/scripts/translations/example.properties
@@ -0,0 +1,17 @@
+# Example Translation Configuration
+# Copy this file and rename it for each app (e.g., design-system-catalog.properties)
+
+# Google Spreadsheet ID (from URL)
+# https://docs.google.com/spreadsheets/d/[THIS_PART]/edit
+spreadsheet.id=YOUR_SPREADSHEET_ID_HERE
+
+# Sheet name (will fetch all data from this sheet)
+sheet.name=Translations
+
+# Service Account JSON key file path (relative to this properties file or absolute path)
+service.account.json.path=service-account.json
+
+# App module path (relative to project root)
+# Example: sample/design-system-catalog
+# Example: app
+app.module.path=sample/design-system-catalog
diff --git a/sample/common/src/main/java/dev/love/winter/sample/common/util/LocaleManager.kt b/sample/common/src/main/java/dev/love/winter/sample/common/util/LocaleManager.kt
new file mode 100644
index 0000000..379f14b
--- /dev/null
+++ b/sample/common/src/main/java/dev/love/winter/sample/common/util/LocaleManager.kt
@@ -0,0 +1,11 @@
+package dev.love.winter.sample.common.util
+
+import androidx.appcompat.app.AppCompatDelegate
+import androidx.core.os.LocaleListCompat
+
+object LocaleManager {
+    fun setLocale(languageTag: String) {
+        val appLocale = LocaleListCompat.forLanguageTags(languageTag)
+        AppCompatDelegate.setApplicationLocales(appLocale)
+    }
+}
diff --git a/sample/common/src/main/res/values-ja/strings.xml b/sample/common/src/main/res/values-ja/strings.xml
new file mode 100644
index 0000000..35d0669
--- /dev/null
+++ b/sample/common/src/main/res/values-ja/strings.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Application name -->
+    <string name="app_name">LanguageStudy</string>
+    <!-- Design System text -->
+    <string name="design_system">デザインシステム</string>
+    <!-- Welcome message -->
+    <string name="welcome_message">コンポーネントとスタイルの総合カタログ</string>
+    <!-- Design tokens -->
+    <string name="design_tokens">デザイントークン</string>
+    <!-- Design token -->
+    <string name="design_token">デザイントークン</string>
+    <!-- Component -->
+    <string name="component">コンポーネント</string>
+    <!-- Components -->
+    <string name="components">コンポーネント</string>
+    <string name="winter">Winter</string>
+    <string name="made_by">Designed &amp; Development by Winter</string>
+    <string name="copyright">\@ 2025 All rights reserved.</string>
+    <string name="option">オプション</string>
+    <string name="color_system">カラーシステム</string>
+    <string name="display">ディスプレイ</string>
+    <string name="display_description">ディスプレイフォントスタイルは、大きな見出しや強調が必要な主要テキストに使用してください。ユーザーの注意を引き、力強い印象を与えるのに最適です。長いテキストには使用しないでください。</string>
+    <string name="title">タイトル</string>
+    <string name="title_description">카드 제목</string>
+    <string name="body">本文</string>
+    <string name="body_description">本文フォントスタイルは、段落や説明などの通常のテキストコンテンツに最適です。可読性と判読性が重要な長いテキストと短いテキストの両方に適しています。</string>
+    <string name="action">アクション</string>
+    <string name="action_description">アクションフォントスタイルは、ボタン、入力フィールド、リンクなど、インタラクティブまたは実行可能なアイテムを表すテキスト要素に適しています。通常のテキストとインタラクティブ要素を区別するために使用してください。</string>
+    <string name="caption">キャプション</string>
+    <string name="caption_description">キャプションフォントスタイルは、アイコン、画像、タグなどの視覚要素を補完し、コンテキストを提供する補助テキストに使用されます。長いテキストには使用しないでください。</string>
+    <string name="spacing">スペーシング</string>
+    <string name="spacing_description">スペーシングトークンは、要素間の一貫した間隔と配置を保証し、より良い可読性、明確性、バランスを提供します。</string>
+    <string name="usage">使用方法</string>
+    <string name="usage_description_1">スペーシングトークンを使用して、正しい階層でコンテンツを整理してください。可読性を高めるには、関連する要素をグループ化することが重要です。関連項目には小さい間隔値を使用し、無関係な項目間では間隔を広げることをお勧めします。</string>
+    <string name="usage_description_2">컴포넌트를 쌓을 때는 그룹 내 모든 요소 사이에 동일한 간격을 사용하세요.</string>
+    <string name="border_radius">ボーダー半径</string>
+    <string name="border_radius_description">ボーダー半径トークンは、ボタン、カード、入力フィールド、コンテナなどの角が丸い要素に適用され、エッジを柔らかくし、より美しい外観を作成します。</string>
+    <string name="tokens">トークン</string>
+    <string name="extra_small">エクストラスモール</string>
+    <string name="extra_small_description">エクストラスモールは、非常に微妙な丸い角に使用してください。</string>
+    <string name="small">スモール</string>
+    <string name="small_description">スモールは、最小の要素やネストされたコンポーネントに使用してください。</string>
+    <string name="medium">ミディアム</string>
+    <string name="medium_description">ミディアムは、ほとんどのコンポーネントで使用されます。小型から中型のコンポーネントとコンテナに使用してください。</string>
+    <string name="large">ラージ</string>
+    <string name="large_description">ラージは、中型から大型のコンポーネントとコンテナに使用してください。</string>
+    <string name="extra_large">エクストララージ</string>
+    <string name="extra_large_description">エクストララージは、特にタブレット画面で最も大きな要素に使用してください。</string>
+    <string name="pill">ピル</string>
+    <string name="pill_description">ピルは、両側が完全に丸いコンポーネントに使用してください。</string>
+    <string name="icons">アイコン</string>
+    <string name="icons_description">アイコンは、アクションやコンポーネントに追加の意味を提供することで使いやすさを向上させ、視覚的により魅力的で理解しやすくするグラフィック資産です。</string>
+    <string name="creating_an_icon">アイコンの作成</string>
+    <string name="creating_an_icon_description">新しいアイコンを作成する場合は、24pxのベースから始め、1.5pxのストロークを使用してアイコンを描いてください。一貫したアイコンをデザインするために、アイコングリッド（下記）を使用してください。</string>
+    <string name="select_language">言語を選択</string>
+</resources>
diff --git a/sample/common/src/main/res/values-ko/strings.xml b/sample/common/src/main/res/values-ko/strings.xml
new file mode 100644
index 0000000..ea42b91
--- /dev/null
+++ b/sample/common/src/main/res/values-ko/strings.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Application name -->
+    <string name="app_name">LanguageStudy</string>
+    <!-- Design System text -->
+    <string name="design_system">디자인 시스템</string>
+    <!-- Welcome message -->
+    <string name="welcome_message">컴포넌트와 스타일의 종합 카탈로그</string>
+    <!-- Design tokens -->
+    <string name="design_tokens">디자인 토큰</string>
+    <!-- Design token -->
+    <string name="design_token">디자인 토큰</string>
+    <!-- Component -->
+    <string name="component">컴포넌트</string>
+    <!-- Components -->
+    <string name="components">컴포넌트</string>
+    <string name="winter">Winter</string>
+    <string name="made_by">Designed &amp; Development by Winter</string>
+    <string name="copyright">\@ 2025 All rights reserved.</string>
+    <string name="option">옵션</string>
+    <string name="color_system">컬러 시스템</string>
+    <string name="display">디스플레이</string>
+    <string name="display_description">디스플레이 폰트 스타일은 큰 제목이나 강조가 필요한 주요 텍스트에 사용하세요. 사용자의 시선을 끌고 강렬한 인상을 주기에 이상적입니다. 긴 텍스트에는 사용하지 마세요.</string>
+    <string name="title">타이틀</string>
+    <string name="title_description">타이틀 폰트 스타일은 레이아웃을 압도하지 않으면서 명확한 시각적 계층이 필요할 때 사용하세요. 섹션 제목</string>
+    <string name="body">본문</string>
+    <string name="body_description">본문 폰트 스타일은 문단이나 설명과 같은 일반 텍스트 콘텐츠에 이상적입니다. 가독성과 판독성이 중요한 긴 텍스트와 짧은 텍스트 모두에 적합합니다.</string>
+    <string name="action">액션</string>
+    <string name="action_description">액션 폰트 스타일은 버튼, 입력 필드, 링크와 같이 상호작용하거나 실행 가능한 항목을 나타내는 텍스트 요소에 적합합니다. 일반 텍스트와 상호작용 요소를 구분하는 데 사용하세요.</string>
+    <string name="caption">캡션</string>
+    <string name="caption_description">캡션 폰트 스타일은 아이콘, 이미지, 태그 등 시각적 요소를 보완하고 맥락을 제공하는 보조 텍스트에 사용됩니다. 긴 텍스트에는 사용하지 마세요.</string>
+    <string name="spacing">간격</string>
+    <string name="spacing_description">간격 토큰은 요소 간 일관된 간격과 정렬을 보장하며, 더 나은 가독성, 명확성, 균형을 제공합니다.</string>
+    <string name="usage">사용법</string>
+    <string name="usage_description_1">간격 토큰을 사용하여 올바른 계층 구조로 콘텐츠를 구성하세요. 가독성을 높이려면 관련 요소를 그룹화하는 것이 중요합니다. 관련된 항목은 작은 간격 값을 사용하고, 관련 없는 항목 사이에는 간격을 늘리는 것이 좋습니다.</string>
+    <string name="usage_description_2">use the same spacing between all elements in the group.</string>
+    <string name="border_radius">모서리 반경</string>
+    <string name="border_radius_description">모서리 반경 토큰은 버튼, 카드, 입력 필드, 컨테이너 등 둥근 모서리를 가진 요소에 적용되어 가장자리를 부드럽게 하고 더 보기 좋은 외관을 만듭니다.</string>
+    <string name="tokens">토큰</string>
+    <string name="extra_small">엑스트라 스몰</string>
+    <string name="extra_small_description">엑스트라 스몰은 매우 미묘한 둥근 모서리에 사용하세요.</string>
+    <string name="small">스몰</string>
+    <string name="small_description">스몰은 가장 작은 요소나 중첩된 컴포넌트에 사용하세요.</string>
+    <string name="medium">미디엄</string>
+    <string name="medium_description">미디엄은 대부분의 컴포넌트에 사용됩니다. 소형에서 중형 컴포넌트 및 컨테이너에 사용하세요.</string>
+    <string name="large">라지</string>
+    <string name="large_description">라지는 중형에서 대형 컴포넌트 및 컨테이너에 사용하세요.</string>
+    <string name="extra_large">엑스트라 라지</string>
+    <string name="extra_large_description">엑스트라 라지는 가장 큰 요소, 특히 태블릿 화면에서 사용하세요.</string>
+    <string name="pill">필</string>
+    <string name="pill_description">필은 양쪽이 완전히 둥근 컴포넌트에 사용하세요.</string>
+    <string name="icons">아이콘</string>
+    <string name="icons_description">아이콘은 액션과 컴포넌트에 추가적인 의미를 제공하여 사용성을 향상시키고, 시각적으로 더 매력적이며 이해하기 쉽게 만드는 그래픽 자산입니다.</string>
+    <string name="creating_an_icon">아이콘 만들기</string>
+    <string name="creating_an_icon_description">새 아이콘을 만들 때는 24px 베이스로 시작하고 1.5px 스트로크를 사용하여 아이콘을 그리세요. 일관된 아이콘을 디자인하는 데 도움이 되도록 아이콘 그리드(아래 표시)를 사용하세요.</string>
+    <string name="select_language">언어 선택</string>
+</resources>
diff --git a/sample/common/src/main/res/values-night/themes.xml b/sample/common/src/main/res/values-night/themes.xml
index dd7aa0d..05a473b 100644
--- a/sample/common/src/main/res/values-night/themes.xml
+++ b/sample/common/src/main/res/values-night/themes.xml
@@ -1,6 +1,6 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme. -->
-    <style name="Theme.LanguageStudy" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+    <style name="Theme.LanguageStudy" parent="Theme.MaterialComponents.DayNight.NoActionBar">
         <!-- Primary brand color. -->
         <item name="colorPrimary">@color/purple_200</item>
         <item name="colorPrimaryVariant">@color/purple_700</item>
diff --git a/sample/common/src/main/res/values-th/strings.xml b/sample/common/src/main/res/values-th/strings.xml
new file mode 100644
index 0000000..3b8d8a0
--- /dev/null
+++ b/sample/common/src/main/res/values-th/strings.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Application name -->
+    <string name="app_name">LanguageStudy</string>
+    <!-- Design System text -->
+    <string name="design_system">ระบบดีไซน์</string>
+    <!-- Welcome message -->
+    <string name="welcome_message">แคตตาล็อกที่ครอบคลุมของคอมโพเนนต์และสไตล์</string>
+    <!-- Design tokens -->
+    <string name="design_tokens">โทเค็นดีไซน์</string>
+    <!-- Design token -->
+    <string name="design_token">โทเค็นดีไซน์</string>
+    <!-- Component -->
+    <string name="component">คอมโพเนนต์</string>
+    <!-- Components -->
+    <string name="components">คอมโพเนนต์</string>
+    <string name="winter">Winter</string>
+    <string name="made_by">Designed &amp; Development by Winter</string>
+    <string name="copyright">\@ 2025 All rights reserved.</string>
+    <string name="option">ตัวเลือก</string>
+    <string name="color_system">ระบบสี</string>
+    <string name="display">หน้าจอแสดงผล</string>
+    <string name="display_description">ใช้สไตล์ฟอนต์แบบดิสเพลย์สำหรับหัวข้อใหญ่หรือข้อความที่โดดเด่นซึ่งต้องการการเน้น ดิสเพลย์เหมาะสำหรับดึงดูดความสนใจของผู้ใช้และสร้างความประทับใจที่แข็งแกร่ง หลีกเลี่ยงการใช้สไตล์นี้สำหรับข้อความยาว</string>
+    <string name="title">หัวข้อ</string>
+    <string name="title_description">ใช้สไตล์ฟอนต์หัวข้อเมื่อคุณต้องการลำดับชั้นภาพที่ชัดเจนโดยไม่ทำให้เลย์เอาต์ดูแน่นเกินไป คุณสามารถใช้สไตล์นี้ในข้อความสั้นที่จำเป็นต้องโดดเด่นเมื่อเปรียบเทียบกับข้อความเนื้อหา เช่น หัวข้อส่วน หัวข้อการ์ด หัวข้อหน้า ฯลฯ</string>
+    <string name="body">เนื้อหา</string>
+    <string name="body_description">สไตล์ฟอนต์เนื้อหาเหมาะสำหรับเนื้อหาข้อความปกติ เช่น ย่อหน้าหรือคำอธิบาย สไตล์เนื้อหาเหมาะสำหรับทั้งข้อความยาวและสั้น ซึ่งความสามารถในการอ่านและความชัดเจนเป็นสิ่งสำคัญ</string>
+    <string name="action">การกระทำ</string>
+    <string name="action_description">สไตล์ฟอนต์การกระทำเหมาะสำหรับองค์ประกอบข้อความที่แสดงรายการเชิงโต้ตอบหรือสามารถดำเนินการได้ เช่น ปุ่ม ช่องป้อนข้อมูล และลิงก์ ใช้เพื่อแยกองค์ประกอบเชิงโต้ตอบจากข้อความปกติ</string>
+    <string name="caption">คำอธิบาย</string>
+    <string name="caption_description">สไตล์ฟอนต์คำอธิบายใช้สำหรับข้อความสนับสนุนที่ให้บริบทและเสริมองค์ประกอบภาพ เช่น ไอคอน รูปภาพ แท็ก ฯลฯ หลีกเลี่ยงการใช้สไตล์นี้ในข้อความยาว</string>
+    <string name="spacing">ระยะห่าง</string>
+    <string name="spacing_description">โทเค็นระยะห่างรับประกันระยะห่างและการจัดตำแหน่งที่สอดคล้องกันระหว่างองค์ประกอบ ในขณะที่ให้ความสามารถในการอ่าน ความชัดเจน และความสมดุลที่ดีขึ้น</string>
+    <string name="usage">การใช้งาน</string>
+    <string name="usage_description_1">ใช้โทเค็นระยะห่างเพื่อจัดระเบียบเนื้อหาภายใต้ลำดับชั้นที่ถูกต้อง สิ่งสำคัญคือการจัดกลุ่มองค์ประกอบที่เกี่ยวข้องเพื่อเพิ่มความสามารถในการอ่าน สำหรับรายการที่เกี่ยวข้อง ให้ใช้ค่าระยะห่างที่เล็กกว่า ในขณะที่ระหว่างรายการที่ไม่เกี่ยวข้อง ควรเพิ่มระยะห่าง</string>
+    <string name="usage_description_2">เมื่อซ้อนคอมโพเนนต์ ให้ใช้ระยะห่างเดียวกันระหว่างองค์ประกอบทั้งหมดในกลุ่ม</string>
+    <string name="border_radius">รัศมีขอบ</string>
+    <string name="border_radius_description">โทเค็นรัศมีขอบถูกนำไปใช้กับองค์ประกอบที่มีมุมโค้งมน เช่น ปุ่ม การ์ด ช่องป้อนข้อมูล และคอนเทนเนอร์ เพื่อทำให้ขอบนุ่มนวลและสร้างรูปลักษณ์ที่น่าดูยิ่งขึ้น</string>
+    <string name="tokens">โทเค็น</string>
+    <string name="extra_small">เล็กพิเศษ</string>
+    <string name="extra_small_description">ใช้เล็กพิเศษสำหรับมุมโค้งมนที่ละเอียดอ่อนมาก</string>
+    <string name="small">เล็ก</string>
+    <string name="small_description">ใช้เล็กสำหรับองค์ประกอบที่เล็กที่สุดหรือคอมโพเนนต์ที่ซ้อนกัน</string>
+    <string name="medium">กลาง</string>
+    <string name="medium_description">รูปแบบกลางถูกใช้ในคอมโพเนนต์ส่วนใหญ่ ใช้ในคอมโพเนนต์และคอนเทนเนอร์ขนาดเล็กถึงกลาง</string>
+    <string name="large">ใหญ่</string>
+    <string name="large_description">ใช้ใหญ่สำหรับคอมโพเนนต์และคอนเทนเนอร์ขนาดกลางถึงใหญ่</string>
+    <string name="extra_large">ใหญ่พิเศษ</string>
+    <string name="extra_large_description">ใช้ใหญ่พิเศษสำหรับองค์ประกอบที่ใหญ่ที่สุด โดยเฉพาะบนหน้าจอแท็บเล็ต</string>
+    <string name="pill">เม็ด</string>
+    <string name="pill_description">ใช้เม็ดสำหรับคอมโพเนนต์ที่โค้งมนอย่างสมบูรณ์ที่ด้านข้าง</string>
+    <string name="icons">ไอคอน</string>
+    <string name="icons_description">ไอคอนเป็นทรัพย์สินกราฟิกที่ปรับปรุงการใช้งานโดยให้ความหมายเพิ่มเติมแก่การกระทำและคอมโพเนนต์ ทำให้มีความน่าสนใจทางสายตามากขึ้นและเข้าใจง่ายขึ้น</string>
+    <string name="creating_an_icon">สร้างไอคอน</string>
+    <string name="creating_an_icon_description">เมื่อสร้างไอคอนใหม่ ให้เริ่มต้นด้วยฐาน 24px และวาดไอคอนโดยใช้เส้นขนาด 1.5px ใช้ตารางไอคอน (แสดงด้านล่าง) เพื่อช่วยคุณออกแบบไอคอนที่สอดคล้องกัน</string>
+    <string name="select_language">เลือกภาษา</string>
+</resources>
diff --git a/sample/common/src/main/res/values-vi/strings.xml b/sample/common/src/main/res/values-vi/strings.xml
new file mode 100644
index 0000000..73c255b
--- /dev/null
+++ b/sample/common/src/main/res/values-vi/strings.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Application name -->
+    <string name="app_name">LanguageStudy</string>
+    <!-- Design System text -->
+    <string name="design_system">Hệ thống thiết kế</string>
+    <!-- Welcome message -->
+    <string name="welcome_message">Danh mục toàn diện về các thành phần và phong cách</string>
+    <!-- Design tokens -->
+    <string name="design_tokens">Token thiết kế</string>
+    <!-- Design token -->
+    <string name="design_token">Token thiết kế</string>
+    <!-- Component -->
+    <string name="component">Thành phần</string>
+    <!-- Components -->
+    <string name="components">Thành phần</string>
+    <string name="winter">Winter</string>
+    <string name="made_by">Designed &amp; Development by Winter</string>
+    <string name="copyright">\@ 2025 All rights reserved.</string>
+    <string name="option">Tùy chọn</string>
+    <string name="color_system">Hệ thống màu sắc</string>
+    <string name="display">Hiển thị</string>
+    <string name="display_description">Sử dụng kiểu phông chữ hiển thị cho các tiêu đề lớn hoặc văn bản nổi bật cần nhấn mạnh. Hiển thị rất lý tưởng để thu hút sự chú ý của người dùng và tạo ra tuyên bố táo bạo. Tránh sử dụng kiểu này cho văn bản dài.</string>
+    <string name="title">Tiêu đề</string>
+    <string name="title_description">Sử dụng kiểu phông chữ tiêu đề khi bạn cần một hệ thống phân cấp trực quan rõ ràng mà không làm choáng ngợp bố cục. Bạn có thể áp dụng kiểu này trong các văn bản ngắn cần nổi bật so với văn bản nội dung, như tiêu đề phần, tiêu đề thẻ, tiêu đề trang, v.v.</string>
+    <string name="body">Nội dung</string>
+    <string name="body_description">Kiểu phông chữ nội dung lý tưởng cho nội dung văn bản thông thường, chẳng hạn như đoạn văn hoặc mô tả. Kiểu nội dung phù hợp cho cả văn bản dài và ngắn, nơi khả năng đọc và dễ đọc là điều cần thiết.</string>
+    <string name="action">Hành động</string>
+    <string name="action_description">Kiểu phông chữ hành động phù hợp cho các phần tử văn bản đại diện cho các mục tương tác hoặc có thể thực hiện, chẳng hạn như nút, trường nhập liệu và liên kết. Sử dụng nó để phân biệt các phần tử tương tác với văn bản thông thường.</string>
+    <string name="caption">Chú thích</string>
+    <string name="caption_description">Kiểu phông chữ chú thích được sử dụng cho văn bản hỗ trợ cung cấp ngữ cảnh và bổ sung cho các yếu tố trực quan, như biểu tượng, hình ảnh, thẻ, v.v. Tránh sử dụng kiểu này trong văn bản dài.</string>
+    <string name="spacing">Khoảng cách</string>
+    <string name="spacing_description">Token khoảng cách đảm bảo khoảng cách và căn chỉnh nhất quán giữa các phần tử đồng thời cung cấp khả năng đọc, rõ ràng và cân bằng tốt hơn.</string>
+    <string name="usage">Cách sử dụng</string>
+    <string name="usage_description_1">Sử dụng token khoảng cách để sắp xếp nội dung theo đúng hệ thống phân cấp. Điều quan trọng là nhóm các phần tử liên quan để tăng khả năng đọc. Đối với các mục liên quan, sử dụng giá trị khoảng cách nhỏ hơn. Trong khi giữa các mục không liên quan, tốt hơn là tăng khoảng cách.</string>
+    <string name="usage_description_2">Khi xếp chồng các thành phần, hãy sử dụng cùng một khoảng cách giữa tất cả các phần tử trong nhóm.</string>
+    <string name="border_radius">Bán kính viền</string>
+    <string name="border_radius_description">Token bán kính viền được áp dụng cho các phần tử có góc bo tròn, chẳng hạn như nút, thẻ, trường nhập liệu và vùng chứa, để làm mềm các cạnh của chúng và tạo ra vẻ ngoài dễ chịu hơn.</string>
+    <string name="tokens">Token</string>
+    <string name="extra_small">Rất nhỏ</string>
+    <string name="extra_small_description">Sử dụng Rất nhỏ cho các góc bo tròn rất tinh tế.</string>
+    <string name="small">Nhỏ</string>
+    <string name="small_description">Sử dụng Nhỏ cho các phần tử nhỏ nhất hoặc các thành phần lồng nhau.</string>
+    <string name="medium">Trung bình</string>
+    <string name="medium_description">Biến thể Trung bình được sử dụng trong hầu hết các thành phần. Sử dụng nó trong các thành phần và vùng chứa từ nhỏ đến trung bình.</string>
+    <string name="large">Lớn</string>
+    <string name="large_description">Sử dụng Lớn cho các thành phần và vùng chứa từ trung bình đến lớn.</string>
+    <string name="extra_large">Rất lớn</string>
+    <string name="extra_large_description">Sử dụng Rất lớn cho các phần tử lớn nhất, đặc biệt là trên màn hình máy tính bảng.</string>
+    <string name="pill">Viên thuốc</string>
+    <string name="pill_description">Sử dụng Viên thuốc cho các thành phần có các cạnh hoàn toàn tròn.</string>
+    <string name="icons">Biểu tượng</string>
+    <string name="icons_description">Biểu tượng là tài sản đồ họa giúp cải thiện khả năng sử dụng bằng cách cung cấp ý nghĩa bổ sung cho các hành động và thành phần, làm cho chúng hấp dẫn hơn về mặt thị giác và dễ hiểu hơn.</string>
+    <string name="creating_an_icon">Tạo biểu tượng</string>
+    <string name="creating_an_icon_description">Khi tạo biểu tượng mới, hãy bắt đầu với cơ sở 24px và vẽ biểu tượng bằng nét 1.5px. Sử dụng lưới Biểu tượng (được thể hiện bên dưới) để giúp bạn thiết kế các biểu tượng nhất quán.</string>
+    <string name="select_language">Chọn ngôn ngữ</string>
+</resources>
diff --git a/sample/common/src/main/res/values-zh-rCN/strings.xml b/sample/common/src/main/res/values-zh-rCN/strings.xml
new file mode 100644
index 0000000..dffd9c0
--- /dev/null
+++ b/sample/common/src/main/res/values-zh-rCN/strings.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- Application name -->
+    <string name="app_name">LanguageStudy</string>
+    <!-- Design System text -->
+    <string name="design_system">设计系统</string>
+    <!-- Welcome message -->
+    <string name="welcome_message">组件和样式的综合目录</string>
+    <!-- Design tokens -->
+    <string name="design_tokens">设计令牌</string>
+    <!-- Design token -->
+    <string name="design_token">设计令牌</string>
+    <!-- Component -->
+    <string name="component">组件</string>
+    <!-- Components -->
+    <string name="components">组件</string>
+    <string name="winter">Winter</string>
+    <string name="made_by">Designed &amp; Development by Winter</string>
+    <string name="copyright">\@ 2025 All rights reserved.</string>
+    <string name="option">选项</string>
+    <string name="color_system">颜色系统</string>
+    <string name="display">显示</string>
+    <string name="display_description">显示字体样式用于大标题或需要强调的突出文本。显示非常适合吸引用户注意力并做出大胆的声明。避免在长文本中使用此样式。</string>
+    <string name="title">标题</string>
+    <string name="title_description">当您需要清晰的视觉层次而不会使布局过于复杂时，请使用标题字体样式。您可以将此样式应用于需要与正文文本区分开来的短文本，例如章节标题、卡片标题、页面标题等。</string>
+    <string name="body">正文</string>
+    <string name="body_description">正文字体样式非常适合常规文本内容，例如段落或描述。正文样式适用于长文本和短文本，其中可读性和易读性至关重要。</string>
+    <string name="action">操作</string>
+    <string name="action_description">操作字体样式适用于表示交互或可操作项目的文本元素，例如按钮、输入框和链接。使用它来区分交互元素和常规文本。</string>
+    <string name="caption">说明文字</string>
+    <string name="caption_description">说明文字字体样式用于提供上下文并补充视觉元素的辅助文本，如图标、图像、标签等。避免在长文本中使用此样式。</string>
+    <string name="spacing">间距</string>
+    <string name="spacing_description">间距令牌保证元素之间的间距和对齐一致，同时提供更好的可读性、清晰度和平衡性。</string>
+    <string name="usage">使用方法</string>
+    <string name="usage_description_1">使用间距令牌在正确的层次结构下组织内容。对相关元素进行分组以提高可读性非常重要。对于相关项目，使用较小的间距值。而对于不相关的项目之间，最好增加间距。</string>
+    <string name="usage_description_2">堆叠组件时，在组中的所有元素之间使用相同的间距。</string>
+    <string name="border_radius">边框半径</string>
+    <string name="border_radius_description">边框半径令牌应用于具有圆角的元素，例如按钮、卡片、输入字段和容器，以软化其边缘并创建更令人愉悦的外观。</string>
+    <string name="tokens">令牌</string>
+    <string name="extra_small">超小</string>
+    <string name="extra_small_description">超小用于非常微妙的圆角。</string>
+    <string name="small">小</string>
+    <string name="small_description">小用于最小的元素或嵌套组件。</string>
+    <string name="medium">中</string>
+    <string name="medium_description">中等变体用于大多数组件。将其用于中小型组件和容器。</string>
+    <string name="large">大</string>
+    <string name="large_description">大用于中大型组件和容器。</string>
+    <string name="extra_large">超大</string>
+    <string name="extra_large_description">超大用于最大的元素，特别是在平板电脑屏幕上。</string>
+    <string name="pill">胶囊</string>
+    <string name="pill_description">胶囊用于两侧完全圆润的组件。</string>
+    <string name="icons">图标</string>
+    <string name="icons_description">图标是通过为操作和组件提供额外含义来提高可用性的图形资源，使其更具视觉吸引力且更易于理解。</string>
+    <string name="creating_an_icon">创建图标</string>
+    <string name="creating_an_icon_description">创建新图标时，从24px的基础开始，并使用1.5px笔画绘制图标。使用图标网格（如下所示）帮助您设计一致的图标。</string>
+    <string name="select_language">选择语言</string>
+</resources>
diff --git a/sample/common/src/main/res/values/strings.xml b/sample/common/src/main/res/values/strings.xml
index a07aaa6..822a8c1 100644
--- a/sample/common/src/main/res/values/strings.xml
+++ b/sample/common/src/main/res/values/strings.xml
@@ -1,3 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <string name="app_name">Sample app common</string>
-</resources>
\ No newline at end of file
+    <!-- Application name -->
+    <string name="app_name">LanguageStudy</string>
+    <!-- Design System text -->
+    <string name="design_system">Design System</string>
+    <!-- Welcome message -->
+    <string name="welcome_message">A comprehensive catalog of \ncomponents and styles</string>
+    <!-- Design tokens -->
+    <string name="design_tokens">Design tokens</string>
+    <!-- Design token -->
+    <string name="design_token">Design token</string>
+    <!-- Component -->
+    <string name="component">Component</string>
+    <!-- Components -->
+    <string name="components">Components</string>
+    <string name="winter">Winter</string>
+    <string name="made_by">Designed &amp; Development by Winter</string>
+    <string name="copyright">\@ 2025 All rights reserved.</string>
+    <string name="option">Option</string>
+    <string name="color_system">Color System</string>
+    <string name="display">Display</string>
+    <string name="display_description">Use the display font style for large headings or prominent text that requires emphasis. Display is ideal for grabbing the user\'s attention and making a bold statement. Avoid using this style for long texts.</string>
+    <string name="title">Title</string>
+    <string name="title_description">Use the title font style when you need a clear visual hierarchy without overwhelming the layout. You can apply this style in short texts that need to stand out when compared to body text, like section titles, card titles, page titles, etc.</string>
+    <string name="body">Body</string>
+    <string name="body_description">The body font style is ideal for regular text content, such as paragraphs, or descriptions. The body styles are suitable both for long and short text, where readability and legibility are essential.</string>
+    <string name="action">Action</string>
+    <string name="action_description">The action font style is suitable for text elements that represent interactive or actionable items, such as buttons, input, and links. Use it to distinguish interactive elements from regular text.</string>
+    <string name="caption">Caption</string>
+    <string name="caption_description">The caption font style is used for supporting text that provides context and complements visual elements, like icons, images, tags, etc. Avoid using this style in long texts.</string>
+    <string name="spacing">Spacing</string>
+    <string name="spacing_description">Spacing tokens guarantee consistent spacing and alignment between elements while providing better readability, clarity, and balance.</string>
+    <string name="usage">Usage</string>
+    <string name="usage_description_1">Use the spacing tokens to organize the content under the correct hierarchy.\n\nIt\'s important to group related elements to increase readability.\n\nFor related items, use smaller spacing values. While between unrelated items, it\'s better to increase the spacing.</string>
+    <string name="usage_description_2">When stacking components</string>
+    <string name="border_radius">Border radius</string>
+    <string name="border_radius_description">Border radius tokens are applied to elements with rounded corners, such as buttons, cards, input fields, and containers, to soften their edges and create a more pleasing appearance.</string>
+    <string name="tokens">Tokens</string>
+    <string name="extra_small">Extra Small</string>
+    <string name="extra_small_description">Use Extra small for very subtle rounded corners.</string>
+    <string name="small">Small</string>
+    <string name="small_description">Use Small for the smallest elements or nested components.</string>
+    <string name="medium">Medium</string>
+    <string name="medium_description">The Medium variation is used in most components. Use it in small-to-medium components and containers.</string>
+    <string name="large">Large</string>
+    <string name="large_description">Use Large for medium-to-large components and containers.</string>
+    <string name="extra_large">Extra Large</string>
+    <string name="extra_large_description">Use Extra Large for the biggest elements, especially on tablet screens.</string>
+    <string name="pill">Pill</string>
+    <string name="pill_description">Use Pill for the components that are completely rounded on their sides.</string>
+    <string name="icons">Icons</string>
+    <string name="icons_description">Icons are graphic assets that improve usability by providing extra meaning to actions and components, making them more visually appealing and easier to understand.</string>
+    <string name="creating_an_icon">Creating an icon</string>
+    <string name="creating_an_icon_description">When creating new icons, start with a base of 24px and draw the icon using a 1.5px stroke. Use the Icon grid (represented below) to help you design consistent icons.</string>
+    <string name="select_language">Select Language</string>
+</resources>
diff --git a/sample/common/src/main/res/values/themes.xml b/sample/common/src/main/res/values/themes.xml
index b5d4162..e5aca59 100644
--- a/sample/common/src/main/res/values/themes.xml
+++ b/sample/common/src/main/res/values/themes.xml
@@ -1,6 +1,6 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme. -->
-    <style name="Theme.LanguageStudy" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+    <style name="Theme.LanguageStudy" parent="Theme.MaterialComponents.DayNight.NoActionBar">
         <!-- Primary brand color. -->
         <item name="colorPrimary">@color/purple_500</item>
         <item name="colorPrimaryVariant">@color/purple_700</item>
diff --git a/sample/design-system-catalog/build.gradle.kts b/sample/design-system-catalog/build.gradle.kts
index 1d10bec..8f9c706 100644
--- a/sample/design-system-catalog/build.gradle.kts
+++ b/sample/design-system-catalog/build.gradle.kts
@@ -20,4 +20,5 @@ android {
 dependencies {
     implementation(projects.sample.common)
     implementation(projects.coreAndroid.designSystem)
+    implementation(libs.androidX.appcompat)
 }
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/MainActivity.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/MainActivity.kt
index aec31a0..39d68fb 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/MainActivity.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/MainActivity.kt
@@ -1,14 +1,14 @@
 package dev.love.winter.dscatalog
 
 import android.os.Bundle
-import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
+import androidx.appcompat.app.AppCompatActivity
 import dagger.hilt.android.AndroidEntryPoint
 import dev.love.winter.designsystem.theme.WinterTheme
 
 @AndroidEntryPoint
-class MainActivity : ComponentActivity() {
+class MainActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Data.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Data.kt
index b5c8944..cc543bb 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Data.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Data.kt
@@ -6,13 +6,14 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.graphics.Shape
 import dev.love.winter.designsystem.theme.WinterTheme
 import dev.love.winter.dscatalog.R
+import dev.love.winter.sample.common.R as CommonR
 
 class Data
 
 data class UsageInfo(
-    val title: String,
+    @param:DrawableRes val titleRes: Int,
     @param:DrawableRes val imageRes: Int,
-    val description: String,
+    @param:DrawableRes val descriptionRes: Int,
 )
 
 data class SpecInfo(
@@ -23,34 +24,34 @@ data class SpecInfo(
 
 val usageInfoItems = listOf(
     UsageInfo(
-        title = "Extra small",
+        titleRes = CommonR.string.extra_small,
         imageRes = R.drawable.image_border_radius_usage,
-        description = "Use Extra small for very subtle rounded corners.",
+        descriptionRes = CommonR.string.extra_small_description,
     ),
     UsageInfo(
-        title = "Small",
+        titleRes = CommonR.string.small,
         imageRes = R.drawable.image_border_radius_usage_small,
-        description = "Use Small for the smallest elements or nested components.",
+        descriptionRes = CommonR.string.small_description,
     ),
     UsageInfo(
-        title = "Medium",
+        titleRes = CommonR.string.medium,
         imageRes = R.drawable.image_border_radius_usage_medium,
-        description = "The Medium variation is used in most components. Use it in small-to-medium components and containers.",
+        descriptionRes = CommonR.string.medium_description,
     ),
     UsageInfo(
-        title = "Large",
+        titleRes = CommonR.string.large,
         imageRes = R.drawable.image_border_radius_usage_large,
-        description = "Use Large for medium-to-large components and containers.",
+        descriptionRes = CommonR.string.large_description,
     ),
     UsageInfo(
-        title = "Extra Large",
+        titleRes = CommonR.string.extra_large,
         imageRes = R.drawable.image_border_radius_usage_extra_large,
-        description = "Use Extra Large for the biggest elements, especially on tablet screens.",
+        descriptionRes = CommonR.string.extra_large_description,
     ),
     UsageInfo(
-        title = "Pill",
+        titleRes = CommonR.string.pill,
         imageRes = R.drawable.image_border_radius_usage_pill,
-        description = "Use Pill for the components that are completely rounded on their sides.",
+        descriptionRes = CommonR.string.pill_description,
     ),
 )
 
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Screen.kt
index 6dd14b9..b7f7b23 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Screen.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/borderradius/Screen.kt
@@ -22,11 +22,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import dev.love.winter.designsystem.component.text.Text
 import dev.love.winter.designsystem.theme.WinterTheme
-import dev.love.winter.dscatalog.R
+import dev.love.winter.sample.common.R
 
 private const val ASPECT_COLUMN_RATIO_TOKEN = 0.5f
 private const val ASPECT_COLUMN_RATIO_PX = 0.3f
@@ -55,15 +56,14 @@ fun Screen(
     ) {
         item(key = "Title") {
             Text(
-                text = "Border radius",
+                text = stringResource(R.string.border_radius),
                 style = WinterTheme.typography.displayMedium,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
                     .padding(top = WinterTheme.spacing.extraExtraLarge),
             )
             Text(
-                text = "Border radius tokens are applied to elements with rounded corners, " +
-                        "such as buttons, cards, input fields, and containers, to soften their edges and create a more pleasing appearance.",
+                text = stringResource(R.string.border_radius_description),
                 color = WinterTheme.color.textCaption,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
@@ -85,7 +85,7 @@ fun Screen(
                         ),
             ) {
                 Image(
-                    painter = painterResource(R.drawable.image_border_radius_sample),
+                    painter = painterResource(dev.love.winter.dscatalog.R.drawable.image_border_radius_sample),
                     contentDescription = "sample image",
                     modifier = Modifier.align(Alignment.Center)
                 )
@@ -93,6 +93,7 @@ fun Screen(
         }
 
         item(key = "Tokens") {
+            stringResource(R.string.tokens)
             Text(
                 text = "Tokens",
                 style = WinterTheme.typography.displayMedium,
@@ -147,7 +148,7 @@ fun Screen(
 
         item(key = "Usage title") {
             Text(
-                text = "Usage",
+                text = stringResource(R.string.usage),
                 style = WinterTheme.typography.displayMedium,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
@@ -156,9 +157,9 @@ fun Screen(
         }
 
         usageInfoItems.forEach { usageInfo ->
-            item(key = "Usage title - ${usageInfo.title}") {
+            item(key = "Usage title - ${usageInfo.titleRes}") {
                 Text(
-                    text = usageInfo.title,
+                    text = stringResource(usageInfo.titleRes),
                     style = WinterTheme.typography.titleLarge,
                     color = WinterTheme.color.textSubtitle,
                     modifier = Modifier
@@ -167,15 +168,15 @@ fun Screen(
                 )
             }
 
-            item(key = "Usage sample - ${usageInfo.title}") {
+            item(key = "Usage sample - ${usageInfo.titleRes}") {
                 UsageSampleImage(
                     imageRes = usageInfo.imageRes,
                 )
             }
 
-            item(key = "Usage desc - ${usageInfo.title}") {
+            item(key = "Usage desc - ${usageInfo.titleRes}") {
                 Text(
-                    text = usageInfo.description,
+                    text = stringResource(usageInfo.descriptionRes),
                     color = WinterTheme.color.textCaption,
                     modifier = Modifier
                         .padding(top = WinterTheme.spacing.small)
@@ -191,7 +192,7 @@ fun Screen(
 private fun UsageSampleImage(
     @DrawableRes imageRes: Int,
 ) {
-    if (imageRes == R.drawable.image_border_radius_usage) {
+    if (imageRes == dev.love.winter.dscatalog.R.drawable.image_border_radius_usage) {
         Box(
             modifier =
                 Modifier
@@ -295,10 +296,12 @@ private fun SpecItem(
 @Preview(
     name = "Light",
     uiMode = Configuration.UI_MODE_NIGHT_NO,
+    heightDp = 2000,
 )
 @Preview(
     name = "Dark",
     uiMode = Configuration.UI_MODE_NIGHT_YES,
+    heightDp = 2000,
 )
 @Composable
 private fun Preview() {
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/color/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/color/Screen.kt
index 38d0e05..b9db28d 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/color/Screen.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/color/Screen.kt
@@ -24,6 +24,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -35,6 +36,7 @@ import dev.love.winter.designsystem.api.redColorTokens
 import dev.love.winter.designsystem.api.yellowColorTokens
 import dev.love.winter.designsystem.component.text.Text
 import dev.love.winter.designsystem.theme.WinterTheme
+import dev.love.winter.sample.common.R
 import kotlinx.collections.immutable.ImmutableList
 
 @Composable
@@ -63,7 +65,7 @@ private fun Screen(
     ) {
         item(span = { GridItemSpan(maxLineSpan) }) {
             Text(
-                text = "Color System",
+                text = stringResource(R.string.color_system),
                 style = WinterTheme.typography.displayMedium,
                 modifier = Modifier.padding(top = WinterTheme.spacing.extraExtraLarge),
             )
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/icons/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/icons/Screen.kt
index 9c2aac6..1739d9c 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/icons/Screen.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/icons/Screen.kt
@@ -19,11 +19,13 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import dev.love.winter.designsystem.component.text.Text
 import dev.love.winter.designsystem.theme.WinterTheme
 import dev.love.winter.designsystem.tokens.IconResource
 import dev.love.winter.dscatalog.R
+import dev.love.winter.sample.common.R as CommonR
 
 private const val ASPECT_COLUMN_RATIO_TOKEN = 0.65f
 private const val ASPECT_COLUMN_RATIO_EXAMPLE = 0.35f
@@ -51,15 +53,14 @@ private fun Screen(
     ) {
         item(key = "Icons") {
             Text(
-                text = "Icons",
+                text = stringResource(CommonR.string.icons),
                 style = WinterTheme.typography.displayMedium,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
                     .padding(top = WinterTheme.spacing.extraExtraLarge),
             )
             Text(
-                text = "Icons are graphic assets that improve usability by providing extra meaning to actions and components, " +
-                        "making them more visually appealing and easier to understand",
+                text = stringResource(CommonR.string.icons_description),
                 color = WinterTheme.color.textCaption,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
@@ -68,15 +69,14 @@ private fun Screen(
         }
         item(key = "Creating an icon") {
             Text(
-                text = "Creating an icon",
+                text = stringResource(CommonR.string.creating_an_icon),
                 style = WinterTheme.typography.displaySmall,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
                     .padding(top = WinterTheme.spacing.extraExtraLarge),
             )
             Text(
-                text = "When creating new icons, start with a base of 24px and draw the icon using a 1.5px stroke. " +
-                        "Use the Icon grid (represented below) to help you design consistent icons.",
+                text = stringResource(CommonR.string.creating_an_icon_description),
                 color = WinterTheme.color.textCaption,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
@@ -99,7 +99,7 @@ private fun Screen(
         }
         item(key = "Tokens") {
             Text(
-                text = "Tokens",
+                text = stringResource(CommonR.string.tokens),
                 style = WinterTheme.typography.displayMedium,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/spacing/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/spacing/Screen.kt
index 6b60a0e..d2cbe39 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/spacing/Screen.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/spacing/Screen.kt
@@ -21,11 +21,13 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import dev.love.winter.designsystem.component.text.Text
 import dev.love.winter.designsystem.theme.WinterTheme
 import dev.love.winter.dscatalog.R
+import dev.love.winter.sample.common.R as CommonR
 
 private const val ASPECT_COLUMN_RATIO_TOKEN = 0.5f
 private const val ASPECT_COLUMN_RATIO_PX = 0.2f
@@ -53,14 +55,14 @@ private fun Screen(
     ) {
         item(key = "Spacing") {
             Text(
-                text = "Spacing",
+                text = stringResource(CommonR.string.spacing),
                 style = WinterTheme.typography.displayMedium,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
                     .padding(top = WinterTheme.spacing.extraExtraLarge),
             )
             Text(
-                text = "Spacing tokens guarantee consistent spacing and alignment between elements while providing better readability, clarity, and balance.",
+                text = stringResource(CommonR.string.spacing_description),
                 color = WinterTheme.color.textCaption,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
@@ -91,7 +93,7 @@ private fun Screen(
 
         item(key = "Tokens") {
             Text(
-                text = "Tokens",
+                text = stringResource(CommonR.string.tokens),
                 style = WinterTheme.typography.displayMedium,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
@@ -202,13 +204,7 @@ private fun Screen(
 
         item(key = "Usage desc") {
             Text(
-                text = """
-                    Use the spacing tokens to organize the content under the correct hierarchy.
-                    
-                    It's important to group related elements to increase readability.
-                    
-                    For related items, use smaller spacing values. While between unrelated items, it's better to increase the spacing.
-                """.trimIndent(),
+                text = stringResource(CommonR.string.usage_description_1),
                 color = WinterTheme.color.textCaption,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
@@ -240,7 +236,7 @@ private fun Screen(
 
         item(key = "Usage desc 2") {
             Text(
-                text = "When stacking components, use the same spacing between all elements in the group.",
+                text = stringResource(CommonR.string.usage_description_2),
                 color = WinterTheme.color.textCaption,
                 modifier = Modifier
                     .padding(horizontal = WinterTheme.spacing.small)
@@ -333,10 +329,12 @@ private fun SpacingExample(
 @Preview(
     name = "Light",
     uiMode = Configuration.UI_MODE_NIGHT_NO,
+    heightDp = 2000,
 )
 @Preview(
     name = "Dark",
     uiMode = Configuration.UI_MODE_NIGHT_YES,
+    heightDp = 2000,
 )
 @Composable
 private fun Preview() {
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/typography/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/typography/Screen.kt
index 0eea61a..e641017 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/typography/Screen.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/designtokens/typography/Screen.kt
@@ -14,29 +14,11 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import dev.love.winter.designsystem.component.text.Text
 import dev.love.winter.designsystem.theme.WinterTheme
-
-private const val DESC_HEADER_DISPLAY =
-    "Use the display font style for large headings or prominent text that requires emphasis. " +
-            "Display is ideal for grabbing the user's attention and making a bold statement. Avoid using this style for long texts."
-
-private const val DESC_HEADER_TITLE =
-    "Use the title font style when you need a clear visual hierarchy without overwhelming the layout. " +
-            "You can apply this style in short texts that need to stand out when compared to body text, like section titles, card titles, page titles, etc."
-
-private const val DESC_HEADER_BODY =
-    "The body font style is ideal for regular text content, such as paragraphs, or descriptions. " +
-            "The body styles are suitable both for long and short text, where readability and legibility are essential."
-
-private const val DESC_HEADER_ACTION =
-    "The action font style is suitable for text elements that represent interactive or actionable items, such as buttons, input, and links. " +
-            "Use it to distinguish interactive elements from regular text."
-
-private const val DESC_HEADER_CAPTION =
-    "The caption font style is used for supporting text that provides context and complements visual elements, " +
-            "like icons, images, tags, etc. Avoid using this style in long texts."
+import dev.love.winter.sample.common.R as CommonR
 
 @Composable
 fun TypographyRoute(
@@ -60,8 +42,8 @@ private fun Screen(
     ) {
         item(key = "display-header") {
             SectionHeader(
-                title = "Display",
-                description = DESC_HEADER_DISPLAY,
+                title = stringResource(CommonR.string.display),
+                description = stringResource(CommonR.string.display_description),
                 modifier = Modifier.padding(top = WinterTheme.spacing.extraExtraLarge),
             )
         }
@@ -74,8 +56,8 @@ private fun Screen(
 
         item(key = "title-header") {
             SectionHeader(
-                title = "Title",
-                description = DESC_HEADER_TITLE,
+                title = stringResource(CommonR.string.title),
+                description = stringResource(CommonR.string.title_description),
             )
         }
         items(
@@ -87,8 +69,8 @@ private fun Screen(
 
         item(key = "body-header") {
             SectionHeader(
-                title = "Body",
-                description = DESC_HEADER_BODY,
+                title = stringResource(CommonR.string.body),
+                description = stringResource(CommonR.string.body_description),
             )
         }
         items(
@@ -100,8 +82,8 @@ private fun Screen(
 
         item(key = "action-header") {
             SectionHeader(
-                title = "Action",
-                description = DESC_HEADER_ACTION,
+                title = stringResource(CommonR.string.action),
+                description = stringResource(CommonR.string.action_description),
             )
         }
         items(
@@ -113,8 +95,8 @@ private fun Screen(
 
         item(key = "caption-header") {
             SectionHeader(
-                title = "Caption",
-                description = DESC_HEADER_CAPTION,
+                title = stringResource(CommonR.string.caption),
+                description = stringResource(CommonR.string.caption_description),
             )
         }
         items(
@@ -300,10 +282,12 @@ private fun SpecItem(
 @Preview(
     name = "Light",
     uiMode = Configuration.UI_MODE_NIGHT_NO,
+    heightDp = 2000,
 )
 @Preview(
     name = "Dark",
     uiMode = Configuration.UI_MODE_NIGHT_YES,
+    heightDp = 2000,
 )
 @Composable
 fun Preview() {
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/Screen.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/Screen.kt
index dbb9e31..c044be0 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/Screen.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/Screen.kt
@@ -1,5 +1,6 @@
 package dev.love.winter.dscatalog.home
 
+import android.content.Intent
 import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -17,10 +18,15 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.buildAnnotatedString
@@ -35,7 +41,12 @@ import dev.love.winter.designsystem.component.button.spec.ButtonShape
 import dev.love.winter.designsystem.component.text.Text
 import dev.love.winter.designsystem.theme.WinterTheme
 import dev.love.winter.dscatalog.Catalog
+import dev.love.winter.dscatalog.home.component.LanguageSelectionDialog
+import dev.love.winter.dscatalog.home.component.findActivity
+import dev.love.winter.sample.common.R
+import dev.love.winter.sample.common.util.LocaleManager
 import kotlinx.coroutines.flow.collectLatest
+import kotlin.system.exitProcess
 
 @Composable
 fun HomeRoute(
@@ -43,6 +54,7 @@ fun HomeRoute(
     modifier: Modifier = Modifier,
     viewModel: ViewModel = hiltViewModel(),
 ) {
+    val context = LocalContext.current
     val state: State by viewModel.uiState.collectAsStateWithLifecycle()
 
     LaunchedEffect(viewModel.sideEffect) {
@@ -51,6 +63,16 @@ fun HomeRoute(
                 is SideEffect.NavigateTo -> {
                     onNavigate(sideEffect.catalog)
                 }
+                is SideEffect.RestartApp -> {
+                    LocaleManager.setLocale(languageTag = sideEffect.languageTag)
+                    context.findActivity()?.let { activity ->
+                        val intent = activity.packageManager.getLaunchIntentForPackage(activity.packageName)
+                        intent?.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
+                        intent?.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+                        activity.startActivity(intent)
+                        exitProcess(0)
+                    }
+                }
             }
         }
     }
@@ -58,9 +80,7 @@ fun HomeRoute(
         state = state,
         modifier = modifier
             .background(color = WinterTheme.color.background),
-        onClick = {
-            viewModel.onEvent(Event.OnCatalogItemClick(it))
-        },
+        onEvent = viewModel::onEvent,
     )
 }
 
@@ -68,19 +88,36 @@ fun HomeRoute(
 private fun HomeScreen(
     state: State,
     modifier: Modifier = Modifier,
-    onClick: (item: Catalog) -> Unit = { },
+    onEvent: (Event) -> Unit = { },
 ) {
+    var showLanguageDialog by remember { mutableStateOf(false) }
+    if (showLanguageDialog) {
+        LanguageSelectionDialog(
+            onDismissRequest = {
+                showLanguageDialog = false
+            },
+            onLanguageChange = { languageTag ->
+                onEvent(Event.OnLanguageChange(languageTag))
+                showLanguageDialog = false
+            },
+        )
+    }
+
     Box(modifier) {
         Content(
             state = state,
-            modifier = Modifier
-                .fillMaxSize(),
-            onClick = onClick,
+            modifier = Modifier.fillMaxSize(),
+            onClick = { catalog ->
+                onEvent(Event.OnCatalogItemClick(catalog))
+            },
         )
         BottomBar(
             modifier = Modifier
                 .fillMaxWidth()
                 .align(Alignment.BottomCenter),
+            onOptionClick = {
+                showLanguageDialog = true
+            },
         )
     }
 }
@@ -109,7 +146,7 @@ private fun Content(
         }
         item {
             Text(
-                text = "LanguageStudy",
+                text = stringResource(R.string.app_name),
                 style = WinterTheme.typography.displayLarge,
                 color = WinterTheme.color.textBrand,
                 modifier = Modifier.padding(
@@ -119,15 +156,14 @@ private fun Content(
         }
         item {
             Text(
-                text = "Design System",
+                text = stringResource(R.string.design_system),
                 style = WinterTheme.typography.displayLarge,
                 color = WinterTheme.color.textTitle,
             )
         }
         item {
             Text(
-                text = "A comprehensive catalog of\n" +
-                        "components and styles",
+                text = stringResource(R.string.welcome_message),
                 style = WinterTheme.typography.displaySmall,
                 color = WinterTheme.color.textTitle,
                 modifier = Modifier.padding(
@@ -139,7 +175,7 @@ private fun Content(
             Divider()
         }
         stickyHeader {
-            SectionTitle(text = "🎨  DESIGN TOKENS")
+            SectionTitle(text = stringResource(R.string.tokens))
         }
         items(
             items = state.designTokenEntries,
@@ -159,7 +195,7 @@ private fun Content(
             Divider()
         }
         stickyHeader {
-            SectionTitle(text = "🧩  COMPONENTS")
+            SectionTitle(text = stringResource(R.string.components))
         }
         items(
             items = state.componentEntries.chunked(2),
@@ -209,6 +245,7 @@ private fun SectionTitle(text: String) {
 @Composable
 private fun BottomBar(
     modifier: Modifier = Modifier,
+    onOptionClick: () -> Unit,
 ) {
     Row(
         modifier = modifier
@@ -223,10 +260,10 @@ private fun BottomBar(
         Text(
             text = createHighlightedText(
                 text = """
-                    Designed & Developed by Winter
-                    © 2025 All rights reserved.
+                    ${stringResource(R.string.made_by)}
+                    ${stringResource(R.string.copyright)}
                 """.trimIndent(),
-                highlightWord = "Winter",
+                highlightWord = stringResource(R.string.winter),
                 highlightColor = WinterTheme.color.textBrand,
                 baseStyle = WinterTheme.typography.bodySmall,
             ),
@@ -234,8 +271,8 @@ private fun BottomBar(
             color = WinterTheme.color.textTitle,
         )
         Button(
-            label = "option",
-            onPress = { },
+            label = stringResource(R.string.option),
+            onPress = onOptionClick,
             shape = ButtonShape.Small,
             icon = ButtonIcon.Leading(
                 resource = WinterTheme.icon.global.settings.outlined,
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/State.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/State.kt
index 6f9401b..470aab6 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/State.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/State.kt
@@ -21,10 +21,17 @@ sealed interface Event {
     data class OnCatalogItemClick(
         val item: Catalog,
     ) : Event
+    data class OnLanguageChange(
+        val languageTag: String,
+    ) : Event
 }
 
 sealed interface SideEffect {
     data class NavigateTo(
         val catalog: NavKey,
     ) : SideEffect
+
+    data class RestartApp(
+        val languageTag: String,
+    ) : SideEffect
 }
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/ViewModel.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/ViewModel.kt
index 6e4ff87..eb31fb5 100644
--- a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/ViewModel.kt
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/ViewModel.kt
@@ -40,6 +40,13 @@ class ViewModel @Inject constructor() : ViewModel() {
             is Event.OnCatalogItemClick -> {
                 handleCatalogItemClick(event.item)
             }
+            is Event.OnLanguageChange -> {
+                _sideEffect.tryEmit(
+                    SideEffect.RestartApp(
+                        languageTag = event.languageTag,
+                    )
+                )
+            }
         }
     }
 
diff --git a/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/component/LanguageSelectionDialog.kt b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/component/LanguageSelectionDialog.kt
new file mode 100644
index 0000000..2e27b6d
--- /dev/null
+++ b/sample/design-system-catalog/src/main/java/dev/love/winter/dscatalog/home/component/LanguageSelectionDialog.kt
@@ -0,0 +1,87 @@
+package dev.love.winter.dscatalog.home.component
+
+import android.app.Activity
+import android.content.Context
+import android.content.ContextWrapper
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.window.Dialog
+import dev.love.winter.designsystem.component.text.Text
+import dev.love.winter.designsystem.theme.WinterTheme
+import dev.love.winter.sample.common.R
+
+private data class Language(
+    val displayName: String,
+    val languageTag: String,
+)
+
+@Composable
+fun LanguageSelectionDialog(
+    onDismissRequest: () -> Unit,
+    modifier: Modifier = Modifier,
+    onLanguageChange: (languageTag: String) -> Unit,
+) {
+    val languages = remember {
+        listOf(
+            Language("English", "en"),
+            Language("한국어", "ko"),
+            Language("日本語", "ja"),
+            Language("中文", "zh-CN"),
+            Language("Tiếng Việt", "vi"),
+            Language("ภาษาไทย", "th"),
+        )
+    }
+
+    Dialog(onDismissRequest = onDismissRequest) {
+        Surface(
+            shape = WinterTheme.borderRadius.large,
+            color = WinterTheme.color.background,
+            modifier = modifier,
+        ) {
+            Column(
+                modifier = Modifier.padding(WinterTheme.spacing.medium)
+            ) {
+                Text(
+                    text = stringResource(R.string.select_language),
+                    style = WinterTheme.typography.titleLarge,
+                    color = WinterTheme.color.textTitle
+                )
+                Spacer(modifier = Modifier.height(WinterTheme.spacing.medium))
+                LazyColumn {
+                    items(languages) { language ->
+                        Text(
+                            text = language.displayName,
+                            style = WinterTheme.typography.bodyLarge,
+                            color = WinterTheme.color.textBody,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .clip(WinterTheme.borderRadius.medium)
+                                .clickable {
+                                    onLanguageChange(language.languageTag)
+                                }
+                                .padding(WinterTheme.spacing.small)
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+fun Context.findActivity(): Activity? = when (this) {
+    is Activity -> this
+    is ContextWrapper -> baseContext.findActivity()
+    else -> null
+}
diff --git a/sample/design-system-catalog/src/main/res/xml/locales_config.xml b/sample/design-system-catalog/src/main/res/xml/locales_config.xml
new file mode 100644
index 0000000..1d1210a
--- /dev/null
+++ b/sample/design-system-catalog/src/main/res/xml/locales_config.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<locale-config xmlns:android="http://schemas.android.com/apk/res/android">
+    <locale android:name="en"/>
+    <locale android:name="ko"/>
+    <locale android:name="ja"/>
+    <locale android:name="zh-CN"/>
+    <locale android:name="vi"/>
+    <locale android:name="th"/>
+</locale-config>
diff --git a/settings.gradle.kts b/settings.gradle.kts
index c8021df..373a535 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -10,3 +10,5 @@ include(":app")
 include(":core-android:design-system")
 include(":sample:common")
 include(":sample:design-system-catalog")
+
+include(":config:scripts")