diff --git a/components/CompatibilitySection.tsx b/components/CompatibilitySection.tsx
index 02d5a4e9..3753beec 100644
--- a/components/CompatibilitySection.tsx
+++ b/components/CompatibilitySection.tsx
@@ -139,6 +139,13 @@ const agents: AgentEntry[] = [
     url: "https://jetbrains.com/junie",
     imageSrc: "/logos/junie.svg",
   },
+  {
+    name: "Loki Mode",
+    from: "Autonomi",
+    url: "https://github.com/asklokesh/loki-mode",
+    imageSrcLight: "/logos/loki-mode.svg",
+    imageSrcDark: "/logos/loki-mode.svg",
+  },
 ];
 
 const shuffleAgents = (items: AgentEntry[]) => {
diff --git a/public/logos/loki-mode.svg b/public/logos/loki-mode.svg
new file mode 100644
index 00000000..be1c3773
--- /dev/null
+++ b/public/logos/loki-mode.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
+  <!-- Loki Mode square icon: Autonomi A-mark reused as-is (purple square, white A, teal dot) -->
+  <!-- Brand palette: purple #553DE9, cream #FFFEFB, teal #1FC5A8 -->
+  <rect width="512" height="512" rx="0" fill="#553DE9"/>
+
+  <!-- Letter A - white elegant strokes (matches favicon.svg geometry) -->
+  <path d="M152 405 L242 120" stroke="#FFFEFB" stroke-width="28" stroke-linecap="round"/>
+  <path d="M360 405 L270 120" stroke="#FFFEFB" stroke-width="28" stroke-linecap="round"/>
+  <path d="M242 120 Q256 86 270 120" stroke="#FFFEFB" stroke-width="28" stroke-linecap="round" fill="none"/>
+
+  <!-- Teal verification dot -->
+  <circle cx="256" cy="295" r="20" fill="#1FC5A8"/>
+</svg>