diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index a944590..90ba5ad 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -46,7 +46,7 @@ export function Sidebar() {
       {/* Logo / Brand */}
       <div className="mb-8">
         <div className="flex h-8 w-8 items-center justify-center rounded-sm border border-white/20 bg-white/10">
-          <Terminal size={16} className="text-agent-cyan" />
+          <Terminal size={16} className="text-agent-cyan" aria-hidden="true" />
         </div>
       </div>
 
@@ -60,15 +60,18 @@ export function Sidebar() {
               href={item.href}
               aria-label={item.label}
               className={cn(
-                "group relative flex items-center justify-center rounded-md p-3 transition-all duration-300",
+                "group relative flex items-center justify-center rounded-md p-3 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
                 isActive
                   ? "bg-white/10 text-white shadow-[0_0_15px_rgba(255,255,255,0.1)]"
                   : "text-white/40 hover:bg-white/5 hover:text-white"
               )}
             >
-              <item.icon size={20} />
+              <item.icon size={20} aria-hidden="true" />
               {/* Tooltip on Hover */}
-              <span className="pointer-events-none absolute left-14 z-50 rounded border border-white/10 bg-black/80 px-2 py-1 text-xs whitespace-nowrap opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100">
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute left-14 z-50 rounded border border-white/10 bg-black/80 px-2 py-1 text-xs whitespace-nowrap opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100"
+              >
                 {item.label}
               </span>
             </Link>
@@ -80,11 +83,14 @@ export function Sidebar() {
       <div className="mt-auto flex w-full flex-col items-center gap-3 px-4">
         <button
           onClick={toggleLanguage}
-          className="group relative mb-2 rounded-md p-3 text-white/40 transition-all hover:bg-white/5 hover:text-white"
+          className="group relative mb-2 rounded-md p-3 text-white/40 transition-all hover:bg-white/5 hover:text-white focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none"
           aria-label="Toggle Language"
         >
-          <Globe size={20} />
-          <span className="pointer-events-none absolute left-14 z-50 rounded border border-white/10 bg-black/80 px-2 py-1 font-mono text-[10px] whitespace-nowrap uppercase opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100">
+          <Globe size={20} aria-hidden="true" />
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute left-14 z-50 rounded border border-white/10 bg-black/80 px-2 py-1 font-mono text-[10px] whitespace-nowrap uppercase opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100"
+          >
             Toggle EN/TH
           </span>
         </button>
@@ -94,7 +100,9 @@ export function Sidebar() {
         {activeAgents.map((agent) => (
           <div
             key={agent.name}
-            className="group relative flex w-full justify-center"
+            className="group relative flex w-full justify-center rounded-sm focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none"
+            tabIndex={0}
+            aria-label={`${agent.name} status: ${agent.status}`}
             data-testid="agent-status-indicator"
           >
             <div
@@ -106,7 +114,10 @@ export function Sidebar() {
                   : "opacity-30"
               )}
             />
-            <span className="pointer-events-none absolute top-1/2 left-10 z-50 -translate-y-1/2 rounded border border-white/10 bg-black/80 px-2 py-1 font-mono text-[10px] whitespace-nowrap opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100">
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute top-1/2 left-10 z-50 -translate-y-1/2 rounded border border-white/10 bg-black/80 px-2 py-1 font-mono text-[10px] whitespace-nowrap opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100"
+            >
               {agent.name}: {agent.status.toUpperCase()}
             </span>
           </div>