diff --git a/package-lock.json b/package-lock.json
index 893657f..4b03476 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,12 +13,14 @@
 				"@codemirror/autocomplete": "^6.19.1",
 				"@codemirror/lang-rust": "^6.0.2",
 				"@codemirror/language": "^6.11.3",
+				"@codemirror/lint": "^6.9.5",
 				"@codemirror/state": "^6.5.2",
 				"@codemirror/view": "^6.38.6",
 				"@fontsource/poppins": "^5.2.7",
 				"@lezer/highlight": "^1.2.2",
 				"@lezer/rust": "^1.0.2",
 				"@microsoft/clarity": "^1.0.2",
+				"@replit/codemirror-vim": "^6.3.0",
 				"@tailwindcss/vite": "^4.1.16",
 				"astro": "^5.15.0",
 				"codemirror": "^6.0.2",
@@ -563,9 +565,9 @@
 			}
 		},
 		"node_modules/@codemirror/lint": {
-			"version": "6.9.2",
-			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.2.tgz",
-			"integrity": "sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==",
+			"version": "6.9.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.5.tgz",
+			"integrity": "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==",
 			"license": "MIT",
 			"dependencies": {
 				"@codemirror/state": "^6.0.0",
@@ -1686,6 +1688,19 @@
 				"object-assign": "^4.1.1"
 			}
 		},
+		"node_modules/@replit/codemirror-vim": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/@replit/codemirror-vim/-/codemirror-vim-6.3.0.tgz",
+			"integrity": "sha512-aTx931ULAMuJx6xLf7KQDOL7CxD+Sa05FktTDrtLaSy53uj01ll3Zf17JdKsriER248oS55GBzg0CfCTjEneAQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@codemirror/commands": "6.x.x",
+				"@codemirror/language": "6.x.x",
+				"@codemirror/search": "6.x.x",
+				"@codemirror/state": "6.x.x",
+				"@codemirror/view": "6.x.x"
+			}
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "5.3.0",
 			"license": "MIT",
diff --git a/package.json b/package.json
index 027904e..957d71a 100644
--- a/package.json
+++ b/package.json
@@ -18,12 +18,14 @@
 		"@codemirror/autocomplete": "^6.19.1",
 		"@codemirror/lang-rust": "^6.0.2",
 		"@codemirror/language": "^6.11.3",
+		"@codemirror/lint": "^6.9.5",
 		"@codemirror/state": "^6.5.2",
 		"@codemirror/view": "^6.38.6",
 		"@fontsource/poppins": "^5.2.7",
 		"@lezer/highlight": "^1.2.2",
 		"@lezer/rust": "^1.0.2",
 		"@microsoft/clarity": "^1.0.2",
+		"@replit/codemirror-vim": "^6.3.0",
 		"@tailwindcss/vite": "^4.1.16",
 		"astro": "^5.15.0",
 		"codemirror": "^6.0.2",
diff --git a/src/components/editor/CodeEditor.astro b/src/components/editor/CodeEditor.astro
index 9dd1f99..7b43778 100644
--- a/src/components/editor/CodeEditor.astro
+++ b/src/components/editor/CodeEditor.astro
@@ -7,94 +7,320 @@ interface Props {
 const { slug, initialCode = 'fn main() {\n    println!("Hola, mundo!");\n}\n' } = Astro.props
 ---
 
-<div
-  id="editor"
-  data-slug={slug}
-  data-initial-code={initialCode}
-  class="flex-1 min-w-0 min-h-0"
-  role="textbox"
-  aria-label="Editor de código"
-  aria-multiline="true"
->
+<div class="flex flex-col flex-1 min-w-0 min-h-0">
+  <div
+    id="editor"
+    data-slug={slug}
+    data-initial-code={initialCode}
+    class="flex-1 min-w-0 min-h-0"
+    role="textbox"
+    aria-label="Editor de código"
+    aria-multiline="true"
+  >
+  </div>
+
+  <div id="vim-mode-bar" class="hidden items-center gap-2 px-3 h-6 border-t border-stroke-color bg-light-bg text-xs font-mono font-bold shrink-0">
+    <span id="vim-mode-label" class="px-1.5 py-0.5 rounded text-[10px] tracking-widest">NORMAL</span>
+  </div>
 </div>
 
-<script>
-  import { EditorView, keymap } from "@codemirror/view";
-  import { EditorState } from "@codemirror/state";
-  import { basicSetup } from "codemirror";
-  import { indentWithTab } from "@codemirror/commands";
-  import { gruvbox } from "~/components/editor/theme";
-  import { db, editorCode } from "~/lib/stores/editor-store";
-  import { rust } from "~/components/editor/config";
-
-  let editorView: EditorView | null = null;
-  let saveTimeout: number | undefined;
-
-  async function initEditor() {
-    const editorElement = document.getElementById("editor");
-    if (!editorElement) return;
-
-    if (editorView) {
-      editorView.destroy();
-      editorView = null;
-    }
+<style>
+  /* Estilos para diagnósticos del linter */
+  :global(.cm-diagnostic) {
+    padding: 8px 12px;
+    border-radius: 6px;
+    border-left: 4px solid;
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 13px;
+    line-height: 1.4;
+    margin: 4px 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
 
-    const { slug, initialCode } = editorElement.dataset as {
-      slug: string;
-      initialCode: string;
-    };
-
-    const initialDoc = (await db.getCode(slug)) ?? initialCode;
-
-    editorView = new EditorView({
-      state: EditorState.create({
-        doc: initialDoc,
-        extensions: [
-          basicSetup,
-          gruvbox,
-          rust(),
-          keymap.of([indentWithTab]),
-          EditorView.updateListener.of((update) => {
-            if (update.docChanged) {
-              const value = update.state.doc.toString();
-              editorCode.set(value);
-              clearTimeout(saveTimeout);
-              saveTimeout = window.setTimeout(
-                () => db.saveCode(slug, value),
-                500,
-              );
-            }
-          }),
-        ],
-      }),
-      parent: editorElement,
-    });
+  :global(.cm-diagnostic.cm-diagnostic-error) {
+    border-left-color: #ef4444;
+    background: rgba(239, 68, 68, 0.1);
+    color: #fef2f2;
+  }
+
+  :global(.cm-diagnostic.cm-diagnostic-warning) {
+    border-left-color: #f59e0b;
+    background: rgba(245, 158, 11, 0.1);
+    color: #fefbf4;
+  }
+
+  :global(.cm-diagnostic.cm-diagnostic-info) {
+    border-left-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.1);
+    color: #eff6ff;
+  }
+
+  :global(.cm-diagnostic-action) {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  :global(.cm-diagnostic-action button) {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: inherit;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  :global(.cm-diagnostic-action button:hover) {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  /* Estilos para el gutter del linter */
+  :global(.cm-lint-marker) {
+    width: 0.8em;
+    height: 0.8em;
+    border-radius: 50%;
+    margin: 0.1em 0.2em;
+    cursor: pointer;
+    position: relative;
+  }
 
-    editorView.contentDOM.setAttribute("aria-label", "Editor de código Rust");
-    editorView.contentDOM.setAttribute("role", "textbox");
-    editorCode.set(initialDoc);
+  :global(.cm-lint-marker-error) {
+    background: #ef4444;
+    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
+  }
+  
+  :global(.cm-lint-marker-warning) {
+    background: #f59e0b;
+    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
+  }
 
-    window.addEventListener("editor:reset", handleReset);
+  :global(.cm-lint-marker-info) {
+    background: #3b82f6;
+    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
   }
 
-  function handleReset(e: Event) {
-    const { code } = (e as CustomEvent).detail;
+  /* Animación sutil para los marcadores */
+  :global(.cm-lint-marker) {
+    animation: lint-pulse 2s infinite;
+  }
 
-    if (editorView) {
-      const doc = editorView.state.doc.toString();
-      editorView.dispatch({ changes: { from: 0, to: doc.length, insert: code } });
+  @keyframes lint-pulse {
+    0%, 100% { 
+      opacity: 0.8;
+      transform: scale(1);
+    }
+    50% { 
+      opacity: 1;
+      transform: scale(1.1);
     }
   }
 
-  document.addEventListener("astro:page-load", initEditor);
+  /* Subrayado para código con errores */
+  :global(.cm-lintRange-error) {
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 2px,
+      rgba(239, 68, 68, 0.3) 2px,
+      rgba(239, 68, 68, 0.3) 4px
+    );
+    border-radius: 2px;
+  }
 
-  document.addEventListener("astro:before-swap", () => {
-    clearTimeout(saveTimeout);
-    window.removeEventListener("editor:reset", handleReset);
+  :global(.cm-lintRange-warning) {
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 2px,
+      rgba(245, 158, 11, 0.3) 2px,
+      rgba(245, 158, 11, 0.3) 4px
+    );
+    border-radius: 2px;
+  }
+
+  :global(.cm-lintRange-info) {
+    background: rgba(59, 130, 246, 0.2);
+    border-radius: 2px;
+  }
+
+  /* Panel de linting */
+  :global(.cm-panel.cm-panel-lint) {
+    background: rgba(40, 40, 40, 0.95);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+  }
+
+  :global(.cm-panel-lint ul) {
+    max-height: 150px;
+    overflow-y: auto;
+  }
 
-    if (editorView) {
-      editorView.destroy();
-      editorView = null;
+  :global(.cm-panel-lint li) {
+    padding: 6px 12px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    cursor: pointer;
+  }
+
+  :global(.cm-panel-lint li:hover) {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  /* Mejoras de accesibilidad */
+  :global(.cm-lint-marker:focus) {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+  }
+</style>
+
+<script>
+  // Solo ejecutar en el cliente
+  if (typeof window !== "undefined") {
+    let editorView: any = null;
+    let saveTimeout = undefined;
+
+    async function initEditor() {
+      const editorElement = document.getElementById("editor");
+      if (!editorElement) return;
+
+      // Importar dinámicamente los módulos necesarios
+      const [
+        { EditorView, keymap },
+        { EditorState },
+        { basicSetup },
+        { indentWithTab },
+        { gruvbox },
+        { db, editorCode, pendingEditorCode },
+        { rust }
+      ] = await Promise.all([
+        import("@codemirror/view"),
+        import("@codemirror/state"),
+        import("codemirror"),
+        import("@codemirror/commands"),
+        import("~/components/editor/theme"),
+        import("~/lib/stores/editor-store"),
+        import("~/components/editor/config")
+      ]);
+
+      const vimEnabled = !!JSON.parse(localStorage.getItem("preferences") ?? "{}").vimEditor;
+      const vimBar = document.getElementById("vim-mode-bar");
+      const vimLabel = document.getElementById("vim-mode-label");
+
+      const modeStyles: Record<string, { label: string; classes: string }> = {
+        normal:         { label: "NORMAL",  classes: "bg-blue-500/20 text-blue-400" },
+        insert:         { label: "INSERT",  classes: "bg-green-500/20 text-green-400" },
+        visual:         { label: "VISUAL",  classes: "bg-yellow/20 text-yellow" },
+        "visual-line":  { label: "V-LINE",  classes: "bg-yellow/20 text-yellow" },
+        "visual-block": { label: "V-BLOCK", classes: "bg-orange-500/20 text-orange-400" },
+        replace:        { label: "REPLACE", classes: "bg-red-500/20 text-red-400" },
+      };
+
+      function updateVimMode(mode: string, subMode?: string) {
+        const key = subMode === "linewise" ? "visual-line"
+                  : subMode === "blockwise" ? "visual-block"
+                  : mode;
+        const style = modeStyles[key] ?? modeStyles.normal;
+        if (vimLabel) {
+          vimLabel.textContent = style.label;
+          vimLabel.className = `px-1.5 py-0.5 rounded text-[10px] tracking-widest ${style.classes}`;
+        }
+      }
+
+      let vimExtension: any[] = [];
+      let getCM: ((view: any) => any) | null = null;
+      if (vimEnabled) {
+        const vimModule = await import("@replit/codemirror-vim");
+        const Vim = vimModule.Vim as any;
+        vimExtension = [vimModule.vim()];
+        getCM = vimModule.getCM;
+
+        // Arrow keys in visual mode — not mapped by default, falls through to CM6 and breaks selection
+        Vim.map("<Up>",    "k", "visual");
+        Vim.map("<Down>",  "j", "visual");
+        Vim.map("<Left>",  "h", "visual");
+        Vim.map("<Right>", "l", "visual");
+
+        vimBar?.classList.replace("hidden", "flex");
+        updateVimMode("normal");
+      }
+
+      if (editorView) {
+        editorView.destroy();
+        editorView = null;
+      }
+
+      const { slug, initialCode } = editorElement.dataset;
+      const initialDoc = (await db.getCode(slug)) ?? initialCode;
+
+      editorView = new EditorView({
+        state: EditorState.create({
+          doc: initialDoc,
+          extensions: [
+            basicSetup,
+            gruvbox,
+            ...vimExtension,
+            rust(),
+            keymap.of([indentWithTab]),
+            EditorView.updateListener.of((update) => {
+              if (update.docChanged) {
+                const value = update.state.doc.toString();
+                editorCode.set(value);
+                clearTimeout(saveTimeout);
+                saveTimeout = window.setTimeout(
+                  () => db.saveCode(slug, value),
+                  500,
+                );
+              }
+            }),
+          ],
+        }),
+        parent: editorElement,
+      });
+
+      editorView.contentDOM.setAttribute("aria-label", "Editor de código Rust");
+      editorView.contentDOM.setAttribute("role", "textbox");
+      editorCode.set(initialDoc);
+
+      if (vimEnabled && getCM) {
+        const cm = getCM(editorView);
+        cm?.on("vim-mode-change", ({ mode, subMode }: { mode: string; subMode?: string }) => {
+          updateVimMode(mode, subMode);
+        });
+      }
+
+      pendingEditorCode.subscribe((code) => {
+        if (code && editorView) {
+          const doc = editorView.state.doc.toString();
+          editorView.dispatch({ changes: { from: 0, to: doc.length, insert: code } });
+          pendingEditorCode.set(null);
+        }
+      });
+
+      window.addEventListener("editor:reset", handleReset);
     }
-  });
+
+    function handleReset(e: Event) {
+      const { code } = (e as CustomEvent).detail;
+      if (editorView) {
+        const doc = editorView.state.doc.toString();
+        editorView.dispatch({ changes: { from: 0, to: doc.length, insert: code } });
+      }
+    }
+
+    document.addEventListener("astro:page-load", initEditor);
+
+    document.addEventListener("astro:before-swap", () => {
+      clearTimeout(saveTimeout);
+      window.removeEventListener("editor:reset", handleReset);
+
+      if (editorView) {
+        editorView.destroy();
+        editorView = null;
+      }
+    });
+  }
 </script>
diff --git a/src/components/editor/output/Terminal.astro b/src/components/editor/output/Terminal.astro
index 00cb371..28d40e1 100644
--- a/src/components/editor/output/Terminal.astro
+++ b/src/components/editor/output/Terminal.astro
@@ -2,6 +2,7 @@
 import IconLoader2 from "~icons/tabler/loader-2"
 import IconPlayerPlay from "~icons/tabler/player-play"
 import IconRestore from "~icons/tabler/restore"
+import IconSparkles from "~icons/tabler/sparkles"
 import IconTerminal from "~icons/tabler/terminal"
 
 interface Props {
@@ -47,6 +48,20 @@ const isTestMode = !!testCode
 				<span>Reiniciar</span>
 			</button>
 
+			<!--
+			<button
+				id="btn-format"
+				class="btn-control hover:text-blue-400"
+				type="button"
+				aria-label="Format code"
+			>
+				<IconSparkles class="group-data-formatting:hidden" font-size={14} />
+				<IconLoader2 class="hidden animate-spin group-data-formatting:block" font-size={14} />
+				<span class="group-data-formatting:hidden">Formatear</span>
+				<span class="hidden group-data-formatting:inline">...</span>
+			</button>
+			-->
+
 			<button
 				id="btn-run"
 				class="btn-control hover:text-green-500"
@@ -84,6 +99,19 @@ const isTestMode = !!testCode
 				<IconRestore font-size={18} />
 				<span>Reiniciar</span>
 			</button>
+			<!--
+			<button
+				id="btn-format-mobile"
+				type="button"
+				aria-label="Format code"
+				class="flex-1 flex items-center justify-center gap-2 py-3 text-sm text-blue-400 border-r border-stroke-color hover:bg-blue-500/10 active:bg-blue-500/20 transition-colors cursor-pointer touch-manipulation"
+			>
+				<IconSparkles class="group-data-formatting:hidden" font-size={18} />
+				<IconLoader2 class="hidden animate-spin group-data-formatting:block" font-size={18} />
+				<span class="group-data-formatting:hidden">Formatear</span>
+				<span class="hidden group-data-formatting:inline">...</span>
+			</button>
+			-->
 			<button
 				id="btn-run-mobile"
 				type="button"
@@ -111,7 +139,7 @@ const isTestMode = !!testCode
 
 <script>
 import { rustPlayground } from "~/lib/rust-playground";
-import { db, editorCode } from "~/lib/stores/editor-store";
+import { db, editorCode, pendingEditorCode } from "~/lib/stores/editor-store";
 import { getStderrHTML } from "~/components/editor/output/renderer";
 
 class TerminalOutput extends HTMLElement {
@@ -123,8 +151,10 @@ class TerminalOutput extends HTMLElement {
 		stdout: document.getElementById("stdout") as HTMLPreElement,
 		btnRun: document.getElementById("btn-run") as HTMLButtonElement,
 		btnReset: document.getElementById("btn-reset") as HTMLButtonElement,
+		btnFormat: document.getElementById("btn-format") as HTMLButtonElement,
 		btnRunMobile: document.getElementById("btn-run-mobile") as HTMLButtonElement | null,
 		btnResetMobile: document.getElementById("btn-reset-mobile") as HTMLButtonElement | null,
+		btnFormatMobile: document.getElementById("btn-format-mobile") as HTMLButtonElement | null,
 	};
 
 	private state = {
@@ -135,8 +165,10 @@ class TerminalOutput extends HTMLElement {
 	connectedCallback() {
 		this.ui.btnRun.addEventListener("click", this.execute);
 		this.ui.btnReset.addEventListener("click", this.reset);
+		this.ui.btnFormat.addEventListener("click", this.format);
 		this.ui.btnRunMobile?.addEventListener("click", this.execute);
 		this.ui.btnResetMobile?.addEventListener("click", this.reset);
+		this.ui.btnFormatMobile?.addEventListener("click", this.format);
 		this.ui.stdin.addEventListener("keydown", this.handleStdin);
 		this.ui.stdinMobile?.addEventListener("keydown", this.handleStdin);
 	}
@@ -263,6 +295,29 @@ class TerminalOutput extends HTMLElement {
 		window.dispatchEvent(new CustomEvent("editor:reset", { detail: { code: initialCode } }));
 	}
 
+	private format = async () => {
+		this.setFormatting(true);
+		try {
+			const response = await fetch("https://play.rust-lang.org/format", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ channel: "stable", edition: "2024", code: editorCode.get() }),
+			});
+			const result = await response.json() as { success: boolean; code: string };
+			if (result.success && result.code) {
+				pendingEditorCode.set(result.code);
+			}
+		} catch {
+			// silent fail
+		} finally {
+			this.setFormatting(false);
+		}
+	}
+
+	private setFormatting(formatting: boolean) {
+		this.toggleAttribute("data-formatting", formatting);
+	}
+
 	private setRunning(running: boolean) {
 		this.toggleAttribute("data-running", running);
 	}
diff --git a/src/components/editor/theme.ts b/src/components/editor/theme.ts
index 48d205e..16c1719 100644
--- a/src/components/editor/theme.ts
+++ b/src/components/editor/theme.ts
@@ -43,6 +43,10 @@ export const gruvboxDarkTheme = EditorView.theme(
 			backgroundColor: selection,
 		},
 
+		"&.cm-focused .cm-activeLine .cm-selectionBackground": {
+			backgroundColor: "rgba(253, 216, 53, 0.22)",
+		},
+
 		".cm-panels": { backgroundColor: darkBackground, color: ivory },
 		".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
 		".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
diff --git a/src/i18n/keys/en.keys.ts b/src/i18n/keys/en.keys.ts
index 64e0b1f..c99a3f8 100644
--- a/src/i18n/keys/en.keys.ts
+++ b/src/i18n/keys/en.keys.ts
@@ -344,6 +344,9 @@ export const en_keys = {
 	"profile.certificate_view": "View Certificate",
 	"profile.progress_in_progress": "In progress",
 	"profile.progress_completed": "completed",
+	"profile.editor_section": "Editor",
+	"profile.vim_mode_label": "Vim Mode",
+	"profile.vim_mode_desc": "Enables Vim keybindings in the editor",
 
 	// Certificate Page
 	"certificate.back_button": "Back",
diff --git a/src/i18n/keys/es.keys.ts b/src/i18n/keys/es.keys.ts
index cd89aac..6c9b644 100644
--- a/src/i18n/keys/es.keys.ts
+++ b/src/i18n/keys/es.keys.ts
@@ -351,6 +351,9 @@ export const es_keys = {
 	"profile.certificate_view": "Ver Certificado",
 	"profile.progress_in_progress": "En progreso",
 	"profile.progress_completed": "completado",
+	"profile.editor_section": "Editor",
+	"profile.vim_mode_label": "Modo Vim",
+	"profile.vim_mode_desc": "Habilita keybindings de Vim en el editor",
 
 	// Certificate Page
 	"certificate.back_button": "Volver",
diff --git a/src/lib/stores/editor-store.ts b/src/lib/stores/editor-store.ts
index 0bdabed..f745d8c 100644
--- a/src/lib/stores/editor-store.ts
+++ b/src/lib/stores/editor-store.ts
@@ -1,6 +1,7 @@
 import { atom } from "nanostores"
 
 export const editorCode = atom("")
+export const pendingEditorCode = atom<string | null>(null)
 
 class RustlingsDB {
 	private dbPromise: Promise<IDBDatabase> | null = null
diff --git a/src/pages/[lang]/perfil.astro b/src/pages/[lang]/perfil.astro
index 39e8bcb..79fb2ca 100644
--- a/src/pages/[lang]/perfil.astro
+++ b/src/pages/[lang]/perfil.astro
@@ -117,6 +117,29 @@ const trackMap = Object.fromEntries(tracks.map((t) => [t.id, t]))
             {t("profile.save_button")}
           </button>
         </div>
+
+        <div class="border-t border-stroke-color pt-5 flex flex-col gap-4">
+          <h2 class="text-xs font-semibold text-secondary/40 uppercase tracking-wider">{t("profile.editor_section")}</h2>
+
+          <div class="flex items-center justify-between">
+            <div class="flex flex-col gap-0.5">
+              <span class="text-sm font-medium text-secondary">{t("profile.vim_mode_label")}</span>
+              <span class="text-xs text-secondary/40">{t("profile.vim_mode_desc")}</span>
+            </div>
+            <button
+              id="vim-toggle"
+              type="button"
+              role="switch"
+              aria-checked="false"
+              class="group relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-yellow/50 focus:ring-offset-2 focus:ring-offset-light-bg bg-stroke-color aria-checked:bg-yellow"
+            >
+              <span
+                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out translate-x-0.5 group-aria-checked:translate-x-5.5"
+                aria-hidden="true"
+              ></span>
+            </button>
+          </div>
+        </div>
       </section>
 
       <!-- Certificates section -->
@@ -330,6 +353,24 @@ const trackMap = Object.fromEntries(tracks.map((t) => [t.id, t]))
       }
     })
 
+    // Vim mode toggle
+    const vimToggle = document.getElementById("vim-toggle") as HTMLButtonElement
+    const getPrefs = () => JSON.parse(localStorage.getItem("preferences") ?? "{}")
+    const savePrefs = (prefs: Record<string, unknown>) => localStorage.setItem("preferences", JSON.stringify(prefs))
+
+    const vimEnabled = !!getPrefs().vimEditor
+    vimToggle.setAttribute("aria-checked", String(vimEnabled))
+    vimToggle.querySelector("span")!.dataset.ariaChecked = String(vimEnabled)
+
+    vimToggle.addEventListener("click", () => {
+      const prefs = getPrefs()
+      const next = !prefs.vimEditor
+      prefs.vimEditor = next
+      savePrefs(prefs)
+      vimToggle.setAttribute("aria-checked", String(next))
+      window.dispatchEvent(new CustomEvent("preferences:changed", { detail: { vimEditor: next } }))
+    })
+
     document.querySelectorAll<HTMLButtonElement>("[data-copy-link]").forEach((btn) => {
       btn.addEventListener("click", async () => {
         const path = btn.dataset.copyLink!