diff --git a/components.d.ts b/components.d.ts
index c3c4cbf..41d712a 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,12 +15,9 @@ declare module 'vue' {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
+    InteractiveInstaller: typeof import('./src/components/InteractiveInstaller.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/components/InteractiveInstaller.vue b/src/components/InteractiveInstaller.vue
new file mode 100644
index 0000000..14f4ef4
--- /dev/null
+++ b/src/components/InteractiveInstaller.vue
@@ -0,0 +1,745 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { DocumentCopy } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { 
+  distros, 
+  methods, 
+  shells, 
+  deWms, 
+  environments, 
+  logic, 
+  fcitx5Config, 
+  kanataConfig 
+} from '@/data/installer';
+
+const selectedDistro = ref(distros[0]?.name || '');
+const selectedMethod = ref<string>(methods[0] || '');
+const selectedShell = ref<string>(shells[0] || '');
+const selectedDe = ref<string>(deWms[0] || '');
+const selectedEnv = ref<string>(environments[1] || '');
+
+const activateServerCode = computed(() => {
+  if (selectedDistro.value === 'NixOS') return '# Bước này đã được cấu hình trong flake.nix ở trên.';
+  if (isAutoHandled.value) {
+    return '# Gói .deb sẽ tự động thực hiện bước này.\n' + serverCmd.value;
+  }
+  return serverCmd.value;
+});
+
+const shellConfigCode = computed(() => {
+  if (selectedDistro.value === 'NixOS') return '# Bước này đã được cấu hình trong flake.nix ở trên.';
+  return envCmd.value;
+});
+
+const serverCmd = computed(() => {
+  if (selectedShell.value === 'Fish') return "sudo systemctl enable --now fcitx5-lotus-server@(whoami).service; or begin; sudo systemd-sysusers; and sudo systemctl enable --now fcitx5-lotus-server@(whoami).service; end";
+  return "sudo systemctl enable --now fcitx5-lotus-server@$(whoami).service || (sudo systemd-sysusers && sudo systemctl enable --now fcitx5-lotus-server@$(whoami).service)";
+});
+
+const envCmd = computed(() => {
+  // Default for X11 and other Wayland DEs
+  const defaultVars = [
+    "export GTK_IM_MODULE=fcitx",
+    "export QT_IM_MODULE=fcitx",
+    "export XMODIFIERS=@im=fcitx",
+    "export SDL_IM_MODULE=fcitx",
+    "export GLFW_IM_MODULE=ibus"
+  ];
+
+  let vars;
+
+  if (selectedEnv.value === 'Wayland') {
+    if (selectedDe.value === 'KDE Plasma') {
+      vars = [
+        "export XMODIFIERS=@im=fcitx",
+        "export GLFW_IM_MODULE=ibus"
+      ];
+    } else if (selectedDe.value === 'GNOME' || selectedDe.value === 'Sway') {
+      vars = [
+        "export XMODIFIERS=@im=fcitx",
+        "export QT_IM_MODULE=fcitx",
+        "export QT_IM_MODULES=\"wayland;fcitx\"",
+        "export GLFW_IM_MODULE=ibus"
+      ];
+    } else {
+      vars = defaultVars;
+    }
+  } else {
+    vars = defaultVars;
+  }
+
+  if (selectedShell.value === 'Bash') {
+    return `cat <<EOF >> ~/.bash_profile\n${vars.join('\n')}\nEOF`;
+  } else if (selectedShell.value === 'Zsh') {
+    return `cat <<EOF >> ~/.zprofile\n${vars.join('\n')}\nEOF`;
+  } else {
+    // Fish
+    const fishVars = vars.map(v => {
+      const idxEq = v.indexOf('=');
+      const name = v.slice(0, idxEq).replace('export ', '');
+      const val = v.slice(idxEq + 1);
+      return `    set -Ux ${name} ${val}`;
+    });
+    return `echo 'if status is-login\n${fishVars.join('\n')}\nend' >> ~/.config/fish/config.fish`;
+  }
+});
+
+const isAutoHandled = computed(() => {
+  return ['Debian', 'Ubuntu'].includes(selectedDistro.value) && selectedMethod.value === 'Package Manager';
+});
+
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage.success('Đã sao chép!');
+  } catch (err) {
+    ElMessage.error('Không thể sao chép');
+  }
+};
+
+const installStepCode = computed(() => {
+  const distroInfo = logic.steps.install[selectedDistro.value as keyof typeof logic.steps.install];
+  if (!distroInfo) return 'Cấu hình chưa sẵn sàng.';
+  return (distroInfo as any)[selectedMethod.value] || 'Phương thức chưa sẵn sàng.';
+});
+
+const autostartText = computed(() => logic.steps.autostart[selectedDe.value as keyof typeof logic.steps.autostart]);
+
+// Wayland Logic
+const waylandGeneral = computed(() => {
+  if (selectedEnv.value !== 'Wayland') return null;
+  return logic.steps.wayland_extras.General;
+});
+
+const waylandDeSpecific = computed(() => {
+  if (selectedEnv.value !== 'Wayland') return null;
+  return (logic.steps.wayland_extras as any)[selectedDe.value] || null;
+});
+
+const chromiumWaylandFlags = "--enable-features=UseOzonePlatform --ozone-platform=wayland --enable-wayland-ime --wayland-text-input-version=3";
+
+</script>
+
+<template>
+  <div class="installer-component">
+    <div class="installer-grid">
+      <!-- Controls -->
+      <div class="controls-card">
+        <div class="control-item">
+          <label>Distro</label>
+          <div class="distro-grid">
+            <div 
+              v-for="d in distros" 
+              :key="d.name" 
+              class="distro-card"
+              :class="{ active: selectedDistro === d.name }"
+              @click="selectedDistro = d.name"
+            >
+              <v-icon :name="d.icon" scale="1.5" />
+              <span>{{ d.name }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="control-item">
+          <label>Desktop Environment / WM</label>
+          <div class="de-grid">
+            <div 
+              v-for="de in deWms" 
+              :key="de" 
+              class="de-card"
+              :class="{ active: selectedDe === de }"
+              @click="selectedDe = de"
+            >
+              <span>{{ de }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="control-item">
+          <label>Môi trường</label>
+          <div class="option-grid">
+            <div 
+              v-for="e in environments" 
+              :key="e" 
+              class="option-card"
+              :class="{ active: selectedEnv === e }"
+              @click="selectedEnv = e"
+            >
+              <span>{{ e }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="control-item">
+          <label>Phương thức cài đặt</label>
+          <div class="option-grid">
+            <div 
+              v-for="m in methods" 
+              :key="m" 
+              class="option-card"
+              :class="{ active: selectedMethod === m }"
+              @click="selectedMethod = m"
+            >
+              <span>{{ m }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="control-item">
+          <label>Shell đang dùng</label>
+          <div class="option-grid">
+            <div 
+              v-for="s in shells" 
+              :key="s" 
+              class="option-card"
+              :class="{ active: selectedShell === s }"
+              @click="selectedShell = s"
+            >
+              <span>{{ s }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Output -->
+      <div class="output-area">
+        <div class="step-card">
+          <div class="step-badge">1</div>
+          <div class="step-content">
+            <h4>Cài đặt gói</h4>
+            <div class="code-container">
+              <pre><code>{{ installStepCode }}</code></pre>
+              <el-button class="copy-float" circle :icon="DocumentCopy" @click="copyToClipboard(installStepCode)" />
+            </div>
+          </div>
+        </div>
+
+        <div class="step-card">
+          <div class="step-badge">2</div>
+          <div class="step-content">
+            <h4>Kích hoạt Server</h4>
+            <div v-if="isAutoHandled" class="mb-3">
+              <el-alert title="Gói .deb sẽ tự động kích hoạt server qua post-install script. Bạn có thể bỏ qua bước này." type="success" :closable="false" />
+            </div>
+            <div class="code-container">
+              <pre><code>{{ activateServerCode }}</code></pre>
+              <el-button class="copy-float" circle :icon="DocumentCopy" @click="copyToClipboard(activateServerCode)" />
+            </div>
+          </div>
+        </div>
+
+        <div class="step-card">
+          <div class="step-badge">3</div>
+          <div class="step-content">
+            <h4>Tắt bộ gõ cũ (IBus)</h4>
+            <div v-if="isAutoHandled" class="mb-3">
+              <el-alert title="Gói .deb sẽ tự động tắt IBus. Bước này chỉ dùng để kiểm tra lại." type="success" :closable="false" />
+            </div>
+            <p class="instruction">Nếu máy bạn đang dùng IBus, hãy tắt nó đi trước khi chuyển sang Fcitx5 để tránh xung đột.</p>
+            <div class="code-container mini">
+              <pre><code>killall ibus-daemon || ibus exit</code></pre>
+              <el-button class="copy-float" circle :icon="DocumentCopy" size="small" @click="copyToClipboard('killall ibus-daemon || ibus exit')" />
+            </div>
+            <p class="instruction mt-2" style="font-size: 0.85rem">
+              * Lưu ý: Hãy tắt autostart của IBus (thường là ibus-daemon hoặc ibus). Tốt nhất là gỡ cài đặt IBus nếu không sử dụng.
+            </p>
+          </div>
+        </div>
+
+        <div class="step-card">
+          <div class="step-badge">4</div>
+          <div class="step-content">
+            <h4>Thiết lập biến môi trường (Shell)</h4>
+            <div class="code-container">
+              <pre><code>{{ shellConfigCode }}</code></pre>
+              <el-button class="copy-float" circle :icon="DocumentCopy" @click="copyToClipboard(shellConfigCode)" />
+            </div>
+            <el-alert title="Lưu ý: Bạn cần Đăng xuất và Đăng nhập lại sau bước này để cấu hình Shell có hiệu lực." type="info" :closable="false" />
+          </div>
+        </div>
+
+        <div class="step-card">
+          <div class="step-badge">5</div>
+          <div class="step-content">
+            <h4>Tự động khởi chạy (Autostart)</h4>
+            <div class="ui-nav-container">
+              {{ autostartText }}
+            </div>
+          </div>
+        </div>
+
+        <div class="step-card">
+          <div class="step-badge">6</div>
+          <div class="step-content">
+            <h4>Cấu hình bộ gõ Fcitx5</h4>
+            <p class="instruction">Sau khi đã Log out và Log in lại:</p>
+            <ul class="setup-list-mini">
+              <li v-for="(step, idx) in fcitx5Config.steps" :key="idx" v-html="step"></li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="step-card additional-card">
+          <div class="step-badge">7</div>
+          <div class="step-content">
+            <h4>Cấu hình bổ sung</h4>
+
+            <!-- GNOME Note (Alert) -->
+            <div v-if="selectedDe === 'GNOME'" class="mb-4">
+              <el-alert 
+                title="Lưu ý quan trọng cho GNOME" 
+                type="warning" 
+                show-icon 
+                :closable="false"
+              >
+                <p style="margin: 0; line-height: 1.5;">
+                  Ưu tiên sử dụng extension <b>AppIndicator and KStatusNotifierItem Support</b> để hiển thị đúng biểu tượng Lotus trên systray. <b>Tránh sử dụng Kimpanel</b> vì có thể gây lỗi hiển thị.
+                </p>
+              </el-alert>
+            </div>
+            
+            <!-- Wayland Extras -->
+            <div v-if="selectedEnv === 'Wayland'">
+              <!-- General Recommendation -->
+              <div v-if="waylandGeneral" class="extra-item mb-4">
+                <el-alert 
+                  :title="waylandGeneral.title" 
+                  type="info" 
+                  :closable="false"
+                  show-icon
+                >
+                  <p style="margin: 0; line-height: 1.5;">{{ waylandGeneral.description }}</p>
+                </el-alert>
+              </div>
+
+              <!-- DE Specific Setup -->
+              <div v-if="waylandDeSpecific" class="wayland-setup-section mb-6">
+                <h5 v-if="selectedDe !== 'KDE Plasma'" class="mb-2">{{ selectedDe }} Wayland Configuration</h5>
+                
+                <div class="wayland-details p-4">
+                  <p v-if="waylandDeSpecific.support_info" class="instruction mb-2"><b>Thành phần hỗ trợ:</b> {{ waylandDeSpecific.support_info }}</p>
+                  
+                  <div v-if="waylandDeSpecific.best_setup && waylandDeSpecific.best_setup.length > 0">
+                    <p v-if="selectedDe !== 'KDE Plasma'" class="instruction"><b>Hướng dẫn cài đặt tốt nhất:</b></p>
+                    <ul class="setup-list-mini">
+                      <li v-for="(point, idx) in waylandDeSpecific.best_setup" :key="idx" v-html="point"></li>
+                    </ul>
+                  </div>
+
+                  <el-alert 
+                    v-if="waylandDeSpecific.caveats" 
+                    title="Lưu ý" 
+                    type="warning" 
+                    :closable="false"
+                    class="mt-2"
+                  >
+                    <p style="margin: 0; line-height: 1.4; font-size: 0.85rem;">{{ waylandDeSpecific.caveats }}</p>
+                  </el-alert>
+                </div>
+              </div>
+
+              <!-- Chromium Flags (Common) -->
+              <div class="extra-item mb-4">
+                <p class="instruction"><b>Chromium / Electron:</b> Bật hỗ trợ bộ gõ Wayland:</p>
+                <div class="code-container mini">
+                  <pre><code>{{ chromiumWaylandFlags }}</code></pre>
+                  <el-button class="copy-float" circle :icon="DocumentCopy" size="small" @click="copyToClipboard(chromiumWaylandFlags)" />
+                </div>
+              </div>
+            </div>
+
+            <!-- Kanata -->
+            <div class="extra-item">
+              <p class="instruction"><b>{{ kanataConfig.title }}:</b> {{ kanataConfig.desc }}</p>
+              <div class="code-container mini">
+                <pre><code>{{ kanataConfig.code }}</code></pre>
+                <el-button class="copy-float" circle :icon="DocumentCopy" size="small" @click="copyToClipboard(kanataConfig.code)" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.installer-component {
+  padding: 0;
+  width: 100%;
+}
+
+.installer-grid {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 2.5rem;
+  align-items: start;
+}
+
+/* Sidebar Styling */
+.controls-card {
+  background-color: var(--ctp-surface0);
+  border: 1px solid var(--ctp-surface1);
+  padding: 2rem 1.5rem 2rem 1.25rem;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  height: fit-content;
+  position: sticky;
+  top: 100px;
+  transition: background-color 0.3s, border-color 0.3s;
+  z-index: 10;
+}
+
+.control-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.control-item label {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--ctp-text);
+  letter-spacing: 0.02em;
+}
+
+/* Specific Select/Input adjustments */
+:deep(.el-select .el-input__wrapper),
+:deep(.el-input__wrapper) {
+  background-color: var(--ctp-surface1) !important;
+  box-shadow: 0 0 0 1px var(--ctp-surface2) inset !important;
+  border: none !important;
+}
+
+:deep(.el-input__inner) {
+  color: var(--ctp-text) !important;
+}
+
+/* Grids styling */
+.distro-grid, .de-grid, .option-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.distro-grid {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.de-grid {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.option-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+/* Cards */
+.distro-card, .de-card, .option-card {
+  background-color: var(--ctp-mantle);
+  border: 1px solid var(--ctp-surface1);
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--ctp-subtext0);
+  text-align: center;
+}
+
+.option-card {
+  padding: 6px 12px;
+}
+
+.distro-card {
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+.distro-card:hover, .de-card:hover, .option-card:hover {
+  background-color: var(--ctp-surface0);
+  border-color: var(--ctp-surface2);
+  color: var(--ctp-text);
+}
+
+/* Trạng thái Active - Chỉ đổi viền và chữ để không bị lóa mảng màu lớn */
+.distro-card.active, .de-card.active, .option-card.active {
+  background-color: var(--ctp-surface1);
+  border-color: var(--ctp-green);
+  color: var(--ctp-green);
+  font-weight: 700;
+}
+
+.distro-card svg {
+  flex-shrink: 0;
+}
+
+.distro-card span, .option-card span {
+  font-size: 0.85rem;
+}
+
+.de-card span {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Output Area */
+.output-area {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 100%;
+}
+
+.step-card {
+  background-color: var(--ctp-surface0);
+  border: 1px solid var(--ctp-surface1);
+  border-radius: 16px;
+  padding: 2rem;
+  display: flex;
+  gap: 1.5rem;
+  position: relative;
+  transition: border-color 0.3s;
+  overflow: hidden;
+}
+
+.step-card:hover {
+  border-color: var(--ctp-surface2);
+}
+
+.step-badge {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  background-color: var(--ctp-surface1);
+  color: var(--ctp-text);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 1.1rem;
+  border: 1px solid var(--ctp-surface2);
+}
+
+.step-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.step-content h4 {
+  margin: 0 0 1.25rem 0;
+  font-size: 1.25rem;
+  color: var(--ctp-text);
+  font-weight: 700;
+}
+
+.code-container {
+  background-color: var(--ctp-crust);
+  padding: 1.25rem;
+  border-radius: 12px;
+  position: relative;
+  border: 1px solid var(--ctp-surface1);
+  margin-bottom: 1rem;
+  width: 100%;
+  overflow-x: auto;
+}
+
+.code-container.mini {
+  padding: 0.75rem 1rem;
+  margin-top: 0.5rem;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--ctp-text);
+}
+
+code {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.9rem;
+}
+
+.copy-float {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  background-color: var(--ctp-surface1) !important;
+  border: 1px solid var(--ctp-surface2) !important;
+  color: var(--ctp-text) !important;
+  transition: all 0.2s;
+  z-index: 2;
+}
+
+.copy-float:hover {
+  background-color: var(--ctp-surface2) !important;
+  color: var(--ctp-green) !important;
+  border-color: var(--ctp-green) !important;
+}
+
+.instruction {
+  font-size: 1rem;
+  line-height: 1.6;
+  margin: 0;
+  color: var(--ctp-subtext1);
+}
+
+.extra-item {
+  margin-bottom: 1.5rem;
+}
+
+.extra-item h5 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  color: var(--ctp-text);
+  font-weight: 600;
+}
+
+/* Reset lại El-Alert cho chuẩn màu Theme */
+:deep(.el-alert) {
+  background-color: var(--ctp-surface1) !important;
+  border: 1px solid var(--ctp-surface2) !important;
+  border-radius: 8px;
+}
+
+:deep(.el-alert__title) {
+  color: var(--ctp-text) !important;
+  font-weight: 600;
+}
+
+:deep(.el-alert__description) {
+  color: var(--ctp-subtext0) !important;
+}
+
+/* Utilities */
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mt-2 { margin-top: 0.5rem; }
+
+.wayland-setup-section { margin-bottom: 1.5rem; }
+.setup-list-mini {
+  padding-left: 1.25rem;
+  margin: 0.75rem 0;
+  color: var(--ctp-subtext0);
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+.setup-list-mini li { margin-bottom: 0.5rem; }
+
+.wayland-details {
+  background-color: var(--ctp-mantle);
+  border-radius: 8px;
+  border: 1px solid var(--ctp-surface1);
+  overflow: hidden;
+}
+.wayland-details summary {
+  padding: 0.75rem 1rem;
+  font-weight: 700;
+  color: var(--ctp-text);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+}
+.wayland-details summary:hover {
+  background-color: var(--ctp-surface0);
+}
+.details-content {
+  padding: 1rem;
+  border-top: 1px solid var(--ctp-surface1);
+  font-size: 0.9rem;
+  color: var(--ctp-subtext1);
+  line-height: 1.5;
+}
+
+.ui-nav-container {
+  background-color: var(--ctp-mantle);
+  border: 1px dashed var(--ctp-surface2);
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  color: var(--ctp-text);
+  font-weight: 600;
+  font-family: inherit;
+  margin-top: 0.5rem;
+}
+
+/* === RESPONSIVE MEDIA QUERIES === */
+
+/* Tablet & Smaller Desktop */
+@media (max-width: 1024px) {
+  .installer-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .controls-card {
+    position: relative;
+    top: 0;
+    padding: 1.5rem;
+  }
+}
+
+/* Mobile & Small Tablet */
+@media (max-width: 768px) {
+  .de-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .step-card {
+    padding: 1.25rem;
+    gap: 1rem;
+  }
+
+  .step-badge {
+    width: 32px;
+    height: 32px;
+    font-size: 1rem;
+  }
+
+  .step-content h4 {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+  }
+
+  .output-area {
+    gap: 1.5rem;
+  }
+}
+
+/* Extra Small Mobile */
+@media (max-width: 480px) {
+  .distro-grid, .de-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .step-card {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .controls-card {
+    padding: 1.25rem 1rem;
+  }
+
+  .code-container {
+    padding: 1rem 0.75rem;
+  }
+
+  .code-container pre {
+    font-size: 0.85rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/data/installer.ts b/src/data/installer.ts
new file mode 100644
index 0000000..071640f
--- /dev/null
+++ b/src/data/installer.ts
@@ -0,0 +1,115 @@
+export const distros = [
+  { name: "Ubuntu", icon: "si-ubuntu" },
+  { name: "Debian", icon: "si-debian" },
+  { name: "Fedora", icon: "si-fedora" },
+  { name: "Arch Linux", icon: "si-archlinux" },
+  { name: "openSUSE", icon: "si-opensuse" },
+  { name: "NixOS", icon: "si-nixos" }
+];
+
+export const methods = ["Package Manager", "Binary", "Source"];
+export const shells = ["Bash", "Zsh", "Fish"];
+export const deWms = ["GNOME", "KDE Plasma", "Xfce", "Cinnamon", "MATE", "Pantheon", "Budgie", "LXQt", "COSMIC", "i3", "Sway", "Hyprland"];
+export const environments = ["X11", "Wayland"];
+
+export const logic = {
+  "steps": {
+    "install": {
+      "Arch Linux": {
+        "Package Manager": "yay -S fcitx5-lotus-bin",
+        "Binary": "Arch khuyến khích sử dụng AUR để cài đặt",
+        "Source": "yay -S fcitx5-lotus-git"
+      },
+      "Debian": {
+        "Package Manager": "CODENAME=$(grep '^VERSION_CODENAME=' /etc/os-release | cut -d'=' -f2)\nsudo mkdir -p /etc/apt/keyrings\ncurl -fsSL https://fcitx5-lotus.pages.dev/pubkey.gpg | sudo gpg --dearmor -o /etc/apt/keyrings/fcitx5-lotus.gpg\necho \"deb [signed-by=/etc/apt/keyrings/fcitx5-lotus.gpg] https://fcitx5-lotus.pages.dev/apt/$CODENAME $CODENAME main\" | sudo tee /etc/apt/sources.list.d/fcitx5-lotus.list\nsudo apt update && sudo apt install fcitx5-lotus",
+        "Binary": "sudo dpkg -i fcitx5-lotus_*.deb",
+        "Source": "sudo apt-get install cmake extra-cmake-modules libfcitx5core-dev libfcitx5config-dev libfcitx5utils-dev libinput-dev libudev-dev g++ golang hicolor-icon-theme pkg-config libx11-dev libfcitx5-qt6-dev qt6-base-dev fcitx5-modules-dev\ngit clone https://github.com/LotusInputMethod/fcitx5-lotus.git\ncd fcitx5-lotus\ncmake -DCMAKE_INSTALL_PREFIX=/usr -DCMAKE_INSTALL_LIBDIR=/usr/lib .\nmake\nsudo make install"
+      },
+      "Ubuntu": {
+        "Package Manager": "CODENAME=$(grep '^UBUNTU_CODENAME=' /etc/os-release | cut -d'=' -f2)\nsudo mkdir -p /etc/apt/keyrings\ncurl -fsSL https://fcitx5-lotus.pages.dev/pubkey.gpg | sudo gpg --dearmor -o /etc/apt/keyrings/fcitx5-lotus.gpg\necho \"deb [signed-by=/etc/apt/keyrings/fcitx5-lotus.gpg] https://fcitx5-lotus.pages.dev/apt/$CODENAME $CODENAME main\" | sudo tee /etc/apt/sources.list.d/fcitx5-lotus.list\nsudo apt update && sudo apt install fcitx5-lotus",
+        "Binary": "sudo dpkg -i fcitx5-lotus_*.deb",
+        "Source": "sudo apt-get install cmake extra-cmake-modules libfcitx5core-dev libfcitx5config-dev libfcitx5utils-dev libinput-dev libudev-dev g++ golang hicolor-icon-theme pkg-config libx11-dev libfcitx5-qt6-dev qt6-base-dev fcitx5-modules-dev\ngit clone https://github.com/LotusInputMethod/fcitx5-lotus.git\ncd fcitx5-lotus\ncmake -DCMAKE_INSTALL_PREFIX=/usr -DCMAKE_INSTALL_LIBDIR=/usr/lib .\nmake\nsudo make install"
+      },
+      "Fedora": {
+        "Package Manager": "RELEASEVER=$(grep '^VERSION_ID=' /etc/os-release | cut -d'=' -f2)\nsudo rpm --import https://fcitx5-lotus.pages.dev/pubkey.gpg\nsudo dnf config-manager addrepo --from-repofile=https://fcitx5-lotus.pages.dev/rpm/fedora/fcitx5-lotus-$RELEASEVER.repo\nsudo dnf install fcitx5-lotus",
+        "Binary": "sudo rpm -i fcitx5-lotus-*.rpm",
+        "Source": "sudo dnf install cmake extra-cmake-modules fcitx5-devel libinput-devel libudev-devel gcc-c++ golang hicolor-icon-theme systemd-devel libX11-devel fcitx5-qt-devel\ngit clone https://github.com/LotusInputMethod/fcitx5-lotus.git\ncd fcitx5-lotus\ncmake -DCMAKE_INSTALL_PREFIX=/usr -DCMAKE_INSTALL_LIBDIR=/usr/lib .\nmake\nsudo make install"
+      },
+      "openSUSE": {
+        "Package Manager": "sudo rpm --import https://fcitx5-lotus.pages.dev/pubkey.gpg\nsudo zypper addrepo https://fcitx5-lotus.pages.dev/rpm/opensuse/fcitx5-lotus-tumbleweed.repo\nsudo zypper refresh\nsudo zypper install fcitx5-lotus",
+        "Binary": "sudo rpm -i fcitx5-lotus-*.rpm",
+        "Source": "sudo zypper install cmake extra-cmake-modules fcitx5-devel libinput-devel systemd-devel gcc-c++ go hicolor-icon-theme systemd-devel libX11-devel udev fcitx5-qt-devel\ngit clone https://github.com/LotusInputMethod/fcitx5-lotus.git\ncd fcitx5-lotus\ncmake -DCMAKE_INSTALL_PREFIX=/usr -DCMAKE_INSTALL_LIBDIR=/usr/lib .\nmake\nsudo make install"
+      },
+      "NixOS": {
+        "Package Manager": "inputs.fcitx5-lotus = {\n  url = \"github:LotusInputMethod/fcitx5-lotus\";\n  inputs.nixpkgs.follows = \"nixpkgs\";\n};\n\n# In configuration.nix:\nservices.fcitx5-lotus = {\n  enable = true;\n  user = \"your_username\";\n};",
+        "Binary": "NixOS ưu tiên cấu hình thông qua flake hoặc module.",
+        "Source": "NixOS ưu tiên sử dụng nix-shell."
+      }
+    },
+    "server": {
+      "Other": {
+        "Bash": "sudo systemctl enable --now fcitx5-lotus-server@$(whoami).service || (sudo systemd-sysusers && sudo systemctl enable --now fcitx5-lotus-server@$(whoami).service)",
+        "Zsh": "sudo systemctl enable --now fcitx5-lotus-server@$(whoami).service || (sudo systemd-sysusers && sudo systemctl enable --now fcitx5-lotus-server@$(whoami).service)",
+        "Fish": "sudo systemctl enable --now fcitx5-lotus-server@(whoami).service; or begin; sudo systemd-sysusers; and sudo systemctl enable --now fcitx5-lotus-server@(whoami).service; end"
+      }
+    },
+    "environment": {
+      "Bash": "cat <<EOF >> ~/.bash_profile\nexport GTK_IM_MODULE=fcitx\nexport QT_IM_MODULE=fcitx\nexport XMODIFIERS=@im=fcitx\nexport SDL_IM_MODULE=fcitx\nexport GLFW_IM_MODULE=ibus\nEOF",
+      "Zsh": "cat <<EOF >> ~/.zprofile\nexport GTK_IM_MODULE=fcitx\nexport QT_IM_MODULE=fcitx\nexport XMODIFIERS=@im=fcitx\nexport SDL_IM_MODULE=fcitx\nexport GLFW_IM_MODULE=ibus\nEOF",
+      "Fish": "echo 'if status is-login\n    set -Ux GTK_IM_MODULE fcitx\n    set -Ux QT_IM_MODULE fcitx\n    set -Ux XMODIFIERS \"@im=fcitx\"\n    set -gx SDL_IM_MODULE fcitx\n    set -gx GLFW_IM_MODULE ibus\nend' >> ~/.config/fish/config.fish"
+    },
+    "autostart": {
+      "GNOME": "GNOME Tweaks → Startup Applications → Add → Fcitx 5",
+      "KDE Plasma": "System Settings → Autostart → Add... → Add Application... → Fcitx 5",
+      "Xfce": "Settings → Session and Startup → Application Autostart → Add → Fcitx 5",
+      "Cinnamon": "System Settings → Startup Applications → + → Choose application → Fcitx 5",
+      "MATE": "Control Center → Startup Applications → Add (Name: Fcitx 5, Command: fcitx5)",
+      "Pantheon": "System Settings → Applications → Startup → Add Startup App... → Fcitx 5",
+      "Budgie": "Budgie Desktop Settings → Autostart → + → Add application → Fcitx 5",
+      "LXQt": "LXQt Configuration Center → Session Settings → Autostart → LXQt Autostart → Add (Name: Fcitx 5, Command: fcitx5)",
+      "COSMIC": "COSMIC Settings → Applications → Startup Applications → Add app → Fcitx 5",
+      "i3": "Add `exec --no-startup-id fcitx5 -d` to ~/.config/i3/config",
+      "Sway": "Add `exec --no-startup-id fcitx5 -d` to ~/.config/sway/config",
+      "Hyprland": "Add `exec-once = fcitx5 -d` to ~/.config/hypr/hyprland.conf"
+    },
+    "wayland_extras": {
+      "General": {
+        "title": "Khuyến nghị Xwayland",
+        "description": "Ngay cả khi bạn chỉ dùng ứng dụng Wayland native, bật Xwayland vẫn được khuyến nghị. Nếu bảng gõ client-side không hoạt động, Fcitx sẽ chuyển sang cửa sổ X11 để đảm bảo vị trí hiển thị chính xác thay vì một cửa sổ Wayland ngẫu nhiên."
+      },
+      "KDE Plasma": {
+        "best_setup": [
+          "Vào <b>System Settings</b> → <b>Keyboard</b> → <b>Virtual Keyboard</b> → Chọn <b>Fcitx 5</b>."
+        ]
+      },
+      "Sway": {
+        "support_info": "Hỗ trợ text-input-v3 và zwp_input_method_v2 (từ bản 1.10+).",
+        "caveats": "Qt < 6.8.2 cần `QT_IM_MODULE=fcitx` do Sway chưa hỗ trợ text-input-v2. Lưu ý: Yêu cầu Sway 1.10 trở lên."
+      },
+      "Weston": {
+        "best_setup": [
+          "Đặt `GTK_IM_MODULE=fcitx` và `QT_IM_MODULE=fcitx`.",
+          "Cấu hình `~/.config/weston.ini`:",
+          "[core]\nxwayland=true\n\n[input-method]\npath=/usr/bin/fcitx5"
+        ],
+        "support_info": "Sử dụng text-input-v1 và zwp_input_method_v1.",
+        "caveats": "Do thiếu text-input-v3, IM module là giải pháp duy nhất cho Gtk/Qt."
+      }
+    }
+  }
+};
+
+export const fcitx5Config = {
+  steps: [
+    'Mở <b>Fcitx5 Configuration</b> (tìm trong menu hoặc chạy <code>fcitx5-configtool</code>).',
+    'Tìm <b>Lotus</b> ở cột bên phải.',
+    'Nhấn mũi tên <b>&lt;</b> để thêm nó sang cột bên trái.',
+    'Bấm <b>Apply</b> để lưu thay đổi.'
+  ]
+};
+
+export const kanataConfig = {
+  title: "Cấu hình Kanata",
+  desc: "Nếu dùng Kanata, hãy loại bỏ Uinput Server khỏi danh sách quét:",
+  code: "(defcfg\n  ...\n  linux-dev-names-exclude (\"Lotus-Uinput-Server\")\n  ...\n)"
+};
diff --git a/src/views/Home.vue b/src/views/Home.vue
index db19ea7..7775a5b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -16,6 +16,7 @@ import {
   Aim,
   Brush,
 } from '@element-plus/icons-vue';
+import InteractiveInstaller from '../components/InteractiveInstaller.vue';
 
 // --- STATE ---
 const mobileMenuOpen = ref<boolean>(false);
@@ -126,19 +127,6 @@ onUnmounted(() => {
   clearTimeout(resetTimer);
 });
 
-// --- DATA ---
-interface PackageInfo {
-  package: string;
-  description: string;
-}
-const archPackages: PackageInfo[] = [
-  { package: 'fcitx5-lotus', description: 'Build từ mã nguồn release ổn định' },
-  { package: 'fcitx5-lotus-bin', description: 'Dùng binary đã build sẵn' },
-  {
-    package: 'fcitx5-lotus-git',
-    description: 'Build từ danh sách commit mới nhất',
-  },
-];
 
 interface SettingInfo {
   option: string;
@@ -323,8 +311,7 @@ const copyToClipboard = async (text: string | undefined): Promise<void> => {
 
         <div class="nav-links desktop-only">
           <a href="#features">Tính năng</a>
-          <a href="#installation">Cài đặt</a>
-          <a href="#setup">Thiết lập</a>
+          <a href="#installation">Cài đặt & Thiết lập</a>
           <a href="#usage">Hướng dẫn</a>
           <a href="#contributors">Đóng góp</a>
 
@@ -359,8 +346,7 @@ const copyToClipboard = async (text: string | undefined): Promise<void> => {
 
       <div class="mobile-menu" v-show="mobileMenuOpen">
         <a href="#features" @click="mobileMenuOpen = false">Tính năng</a>
-        <a href="#installation" @click="mobileMenuOpen = false">Cài đặt</a>
-        <a href="#setup" @click="mobileMenuOpen = false">Thiết lập</a>
+        <a href="#installation" @click="mobileMenuOpen = false">Cài đặt & Thiết lập</a>
         <a href="#usage" @click="mobileMenuOpen = false">Hướng dẫn</a>
         <a href="#contributors" @click="mobileMenuOpen = false">Đóng góp</a>
         <el-button type="primary" @click="goToGitHub">
@@ -519,435 +505,13 @@ const copyToClipboard = async (text: string | undefined): Promise<void> => {
     <section id="installation" class="section section-bg-mantle">
       <div class="container">
         <div class="section-title">
-          <h2>Cài đặt dễ dàng</h2>
+          <h2>Cài đặt & Thiết lập</h2>
           <p>
-            Kho lưu trữ Cloudflare Pages đảm bảo tốc độ tải và cập nhật tự động.
+            Chọn cấu hình hệ thống của bạn để nhận hướng dẫn cài đặt tối ưu nhất.
           </p>
         </div>
-
-        <div class="custom-card setup-wrapper">
-          <el-tabs v-model="activeOS">
-            <el-tab-pane lazy name="arch">
-              <template #label
-                ><div class="tab-label">
-                  <v-icon name="si-archlinux" /> Arch Linux
-                </div></template
-              >
-              <div class="tab-content">
-                <p class="instruction">AUR cung cấp 3 gói cài đặt:</p>
-                <el-table :data="archPackages" stripe class="pkg-table mb-4">
-                  <el-table-column prop="package" label="Gói">
-                    <template #default="{ row }"
-                      ><code class="inline-code">{{
-                        row.package
-                      }}</code></template
-                    >
-                  </el-table-column>
-                  <el-table-column prop="description" label="Mô tả" />
-                </el-table>
-                <div class="code-block">
-                  <pre><code>{{ commands.arch }}</code></pre>
-                  <button
-                    class="btn-copy"
-                    @click="copyToClipboard(commands.arch)"
-                  >
-                    <el-icon><DocumentCopy /></el-icon>
-                  </button>
-                </div>
-              </div>
-            </el-tab-pane>
-
-            <el-tab-pane lazy name="debian">
-              <template #label
-                ><div class="tab-label">
-                  <v-icon name="si-debian" /> Debian
-                </div></template
-              >
-              <div class="tab-content">
-                <el-alert
-                  title="Mẹo nhỏ"
-                  type="success"
-                  description="Sau khi cài đặt bằng script này, post-install sẽ tự động bật dịch vụ fcitx5-lotus-serve và tự thiết lập biến môi trường cho bạn."
-                  :closable="false"
-                  class="mb-4 custom-alert"
-                />
-                <div class="code-block">
-                  <pre><code>{{ commands.debian }}</code></pre>
-                  <button
-                    class="btn-copy"
-                    @click="copyToClipboard(commands.debian)"
-                  >
-                    <el-icon><DocumentCopy /></el-icon>
-                  </button>
-                </div>
-              </div>
-            </el-tab-pane>
-
-            <el-tab-pane lazy name="ubuntu">
-              <template #label
-                ><div class="tab-label">
-                  <v-icon name="si-ubuntu" /> Ubuntu
-                </div></template
-              >
-              <div class="tab-content">
-                <el-alert
-                  title="Mẹo nhỏ"
-                  type="success"
-                  description="Sau khi cài đặt bằng script này, post-install sẽ tự động bật dịch vụ fcitx5-lotus-serve và tự thiết lập biến môi trường cho bạn."
-                  :closable="false"
-                  class="mb-4 custom-alert"
-                />
-                <div class="code-block">
-                  <pre><code>{{ commands.ubuntu }}</code></pre>
-                  <button
-                    class="btn-copy"
-                    @click="copyToClipboard(commands.ubuntu)"
-                  >
-                    <el-icon><DocumentCopy /></el-icon>
-                  </button>
-                </div>
-              </div>
-            </el-tab-pane>
-
-            <el-tab-pane lazy name="fedora">
-              <template #label
-                ><div class="tab-label">
-                  <v-icon name="si-fedora" /> Fedora
-                </div></template
-              >
-              <div class="tab-content">
-                <div class="code-block">
-                  <pre><code>{{ commands.fedora }}</code></pre>
-                  <button
-                    class="btn-copy"
-                    @click="copyToClipboard(commands.fedora)"
-                  >
-                    <el-icon><DocumentCopy /></el-icon>
-                  </button>
-                </div>
-              </div>
-            </el-tab-pane>
-
-            <el-tab-pane lazy name="opensuse">
-              <template #label
-                ><div class="tab-label">
-                  <v-icon name="si-opensuse" /> openSUSE
-                </div></template
-              >
-              <div class="tab-content">
-                <div class="code-block">
-                  <pre><code>{{ commands.opensuse }}</code></pre>
-                  <button
-                    class="btn-copy"
-                    @click="copyToClipboard(commands.opensuse)"
-                  >
-                    <el-icon><DocumentCopy /></el-icon>
-                  </button>
-                </div>
-              </div>
-            </el-tab-pane>
-
-            <el-tab-pane lazy name="nixos">
-              <template #label
-                ><div class="tab-label">
-                  <v-icon name="si-nixos" /> NixOS
-                </div></template
-              >
-              <div class="tab-content">
-                <p class="instruction">
-                  Thêm input vào <code>flake.nix</code>:
-                </p>
-                <div class="code-block mb-4">
-                  <pre><code>{{ commands.nixosInput }}</code></pre>
-                </div>
-                <p class="instruction">
-                  Bật service trong <code>configuration.nix</code>:
-                </p>
-                <div class="code-block">
-                  <pre><code>{{ commands.nixosService }}</code></pre>
-                </div>
-              </div>
-            </el-tab-pane>
-
-            <el-tab-pane lazy name="github">
-              <template #label
-                ><div class="tab-label">
-                  <v-icon name="si-github" /> Releases
-                </div></template
-              >
-              <div class="tab-content">
-                <el-alert
-                  title="Khuyến cáo"
-                  type="warning"
-                  description="Chỉ dùng cách này khi distro của bạn gặp lỗi với repository ở trên."
-                  :closable="false"
-                  class="mb-4 custom-alert-warn"
-                />
-                <p class="instruction">
-                  Tải file .deb hoặc .rpm từ
-                  <a
-                    href="https://github.com/LotusInputMethod/fcitx5-lotus/releases/latest"
-                    target="_blank"
-                    class="text-link"
-                    >GitHub Releases</a
-                  >
-                </p>
-                <div class="code-block">
-                  <pre><code>{{ commands.github }}</code></pre>
-                </div>
-              </div>
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-      </div>
-    </section>
-
-    <section id="setup" class="section section-bg-base">
-      <div class="container">
-        <div class="section-title">
-          <h2>Thiết lập hệ thống</h2>
-          <p>Làm theo từng bước sau để đảm bảo bộ gõ tương tác hoàn hảo</p>
-        </div>
-
-        <div class="steps-wrapper">
-          <el-steps
-            :active="setupStep"
-            finish-status="success"
-            align-center
-            class="custom-steps"
-          >
-            <el-step
-              title="Bật Lotus Server"
-              description="Kích hoạt service"
-              @click="setupStep = 0"
-              class="clickable-step"
-            />
-            <el-step
-              title="Biến môi trường"
-              description="Cấu hình IM module"
-              @click="setupStep = 1"
-              class="clickable-step"
-            />
-            <el-step
-              title="Autostart & IBus"
-              description="Tránh xung đột"
-              @click="setupStep = 2"
-              class="clickable-step"
-            />
-            <el-step
-              title="Hoàn thiện Fcitx5"
-              description="Thêm Lotus"
-              @click="setupStep = 3"
-              class="clickable-step"
-            />
-          </el-steps>
-        </div>
-
-        <div class="setup-cards">
-          <transition name="fade-slide" mode="out-in">
-            <div :key="setupStep">
-              <div class="custom-card" v-if="setupStep === 0">
-                <div class="step-header">
-                  <span class="step-num">1</span>
-                  <h3>Bật Lotus Server</h3>
-                </div>
-                <p class="instruction">
-                  Server giúp bộ gõ gửi phím xóa và sửa lỗi mượt mà hơn. Chọn
-                  lệnh tương ứng với shell của bạn:
-                </p>
-                <details class="advanced-details mb-3" open>
-                  <summary>Dành cho Bash / Zsh</summary>
-                  <div class="code-block mt-2">
-                    <pre><code>{{ commands.serverBash }}</code></pre>
-                    <button
-                      class="btn-copy"
-                      @click="copyToClipboard(commands.serverBash)"
-                    >
-                      <el-icon><DocumentCopy /></el-icon>
-                    </button>
-                  </div>
-                </details>
-                <details class="advanced-details">
-                  <summary>Dành cho Fish shell</summary>
-                  <div class="code-block mt-2">
-                    <pre><code>{{ commands.serverFish }}</code></pre>
-                    <button
-                      class="btn-copy"
-                      @click="copyToClipboard(commands.serverFish)"
-                    >
-                      <el-icon><DocumentCopy /></el-icon>
-                    </button>
-                  </div>
-                </details>
-              </div>
-
-              <div class="custom-card" v-else-if="setupStep === 1">
-                <div class="step-header">
-                  <span class="step-num">2</span>
-                  <h3>Thiết lập biến môi trường</h3>
-                </div>
-                <p class="instruction">
-                  Bộ gõ sẽ không thể hoạt động nếu thiếu bước này.
-                  <strong>Cần Log out và Log in lại sau khi chạy lệnh</strong>.
-                </p>
-                <details class="advanced-details mb-3" open>
-                  <summary>Cấu hình cho Bash</summary>
-                  <div class="code-block mt-2">
-                    <pre><code>{{ commands.envBash }}</code></pre>
-                    <button
-                      class="btn-copy"
-                      @click="copyToClipboard(commands.envBash)"
-                    >
-                      <el-icon><DocumentCopy /></el-icon>
-                    </button>
-                  </div>
-                </details>
-                <details class="advanced-details mb-3">
-                  <summary>Cấu hình cho Zsh</summary>
-                  <div class="code-block mt-2">
-                    <pre><code>{{ commands.envZsh }}</code></pre>
-                    <button
-                      class="btn-copy"
-                      @click="copyToClipboard(commands.envZsh)"
-                    >
-                      <el-icon><DocumentCopy /></el-icon>
-                    </button>
-                  </div>
-                </details>
-                <details class="advanced-details mb-3">
-                  <summary>Cấu hình cho Fish shell</summary>
-                  <div class="code-block mt-2">
-                    <pre><code>{{ commands.envFish }}</code></pre>
-                    <button
-                      class="btn-copy"
-                      @click="copyToClipboard(commands.envFish)"
-                    >
-                      <el-icon><DocumentCopy /></el-icon>
-                    </button>
-                  </div>
-                </details>
-                <details class="advanced-details">
-                  <summary>Cấu hình toàn cục /etc/environment</summary>
-                  <div class="code-block mt-2">
-                    <pre><code>{{ commands.envGlobal }}</code></pre>
-                    <button
-                      class="btn-copy"
-                      @click="copyToClipboard(commands.envGlobal)"
-                    >
-                      <el-icon><DocumentCopy /></el-icon>
-                    </button>
-                  </div>
-                </details>
-              </div>
-
-              <div class="custom-card" v-else-if="setupStep === 2">
-                <div class="step-header">
-                  <span class="step-num">3</span>
-                  <h3>Tắt IBus và cấu hình Autostart</h3>
-                </div>
-                <p class="instruction">
-                  Xung đột IBus là nguyên nhân số 1 gây lỗi không gõ được. Chạy
-                  lệnh sau để tắt IBus:
-                </p>
-                <div class="code-block mb-4">
-                  <pre><code>{{ commands.killIbus }}</code></pre>
-                  <button
-                    class="btn-copy"
-                    @click="copyToClipboard(commands.killIbus)"
-                  >
-                    <el-icon><DocumentCopy /></el-icon>
-                  </button>
-                </div>
-                <div class="warning-box">
-                  <strong>Quan trọng:</strong> Bạn phải thêm
-                  <code>fcitx5</code> (hoặc <code>fcitx5 -d</code>) vào
-                  Autostart của Desktop Environment đang dùng.
-                </div>
-              </div>
-
-              <div class="custom-card" v-else-if="setupStep === 3">
-                <div class="step-header">
-                  <span class="step-num">4</span>
-                  <h3>Cấu hình Fcitx5 & Wayland</h3>
-                </div>
-                <p class="instruction">
-                  Bước cuối cùng, thêm Lotus vào Fcitx5:
-                </p>
-                <ol class="step-list mb-4 instruction">
-                  <li>
-                    Mở <strong>Fcitx5 Configuration</strong> từ menu ứng dụng.
-                  </li>
-                  <li>Tìm <strong>Lotus</strong> ở cột bên phải.</li>
-                  <li>
-                    Nhấn nút mũi tên trái để thêm sang cột bên trái và nhấn
-                    Apply.
-                  </li>
-                </ol>
-
-                <details class="advanced-details mt-4">
-                  <summary>Cấu hình bổ sung cho Wayland</summary>
-                  <div class="p-3 border rounded-lg mt-2 text-sm sub-card">
-                    <p class="mb-2 instruction">
-                      <strong>KDE:</strong> System Settings → Keyboard → Virtual
-                      Keyboard → Chọn Fcitx 5.
-                    </p>
-                    <p class="mb-2 instruction">
-                      <strong>Hyprland:</strong> Thêm dòng sau vào file config
-                    </p>
-                    <div class="code-block my-2">
-                      <pre><code>{{ commands.hyprland }}</code></pre>
-                    </div>
-                    <p class="mt-4 mb-2 instruction">
-                      <strong>Chromium/Electron:</strong> Chạy ứng dụng kèm các
-                      flag sau
-                    </p>
-                    <div class="code-block my-2">
-                      <pre><code>{{ commands.chromium }}</code></pre>
-                    </div>
-                  </div>
-                </details>
-              </div>
-
-              <div class="custom-card success-card" v-else-if="setupStep === 4">
-                <div class="success-content">
-                  <div class="icon-circle">
-                    <el-icon><Check /></el-icon>
-                  </div>
-                  <h3>Tuyệt vời! Bạn đã sẵn sàng.</h3>
-                  <p class="instruction">
-                    Bộ gõ Fcitx5 Lotus đã được thiết lập thành công. Hãy tận
-                    hưởng sự mượt mà của chế độ Non-preedit!
-                  </p>
-                </div>
-              </div>
-            </div>
-          </transition>
-
-          <div class="step-actions">
-            <el-button
-              @click="setupStep--"
-              :disabled="setupStep === 0"
-              v-show="setupStep < 4"
-              >Quay lại</el-button
-            >
-            <div style="flex-grow: 1"></div>
-            <el-button
-              type="primary"
-              @click="setupStep++"
-              v-show="setupStep < 3"
-              >Bước tiếp theo</el-button
-            >
-            <el-button
-              type="success"
-              @click="setupStep++"
-              v-show="setupStep === 3"
-              class="btn-success"
-              >Hoàn tất thiết lập</el-button
-            >
-            <el-button @click="setupStep = 0" v-show="setupStep === 4"
-              >Xem lại hướng dẫn</el-button
-            >
-          </div>
+        <div class="installer-wrapper">
+          <InteractiveInstaller />
         </div>
       </div>
     </section>
@@ -1101,7 +665,7 @@ const copyToClipboard = async (text: string | undefined): Promise<void> => {
         </div>
         <div class="footer-links">
           <h4>Tài liệu</h4>
-          <a href="#installation">Cài đặt</a>
+          <a href="#installation">Cài đặt & Thiết lập</a>
           <a href="#usage">Hướng dẫn</a>
           <a
             href="https://github.com/LotusInputMethod/fcitx5-lotus/blob/main/CONTRIBUTING.md"