diff --git a/components/public/guide-shell.tsx b/components/public/guide-shell.tsx
index faa1794..12800d0 100644
--- a/components/public/guide-shell.tsx
+++ b/components/public/guide-shell.tsx
@@ -51,7 +51,7 @@ export function GuideShell({ snapshot }: { snapshot: PageSnapshot }) {
           </div>
           <ScrollableNav
             ariaLabel={`หน้าคู่มือ ${snapshot.character.nameTh}`}
-            className="min-h-11 border-t"
+            className="min-h-11 rounded-xl border bg-card p-2"
           >
             {snapshot.pages.map((page) => (
               <Link
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 1d3746e..d2322e8 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -92,25 +92,25 @@ export function StructuredGuideShell({
         </div>
         <ScrollableNav
           ariaLabel={`เมนูคู่มือ ${guide.name}`}
-          className="mx-auto min-h-11 w-full max-w-7xl px-4 sm:px-6"
+          className="mx-auto min-h-11 w-full max-w-7xl rounded-xl border bg-card p-2"
         >
           <Link
             href={`/${guide.slug}`}
             className={cn(
-              "flex shrink-0 items-center whitespace-nowrap rounded-md px-3 text-sm text-muted-foreground",
-              !section && "bg-muted text-foreground",
+              "flex min-h-8 shrink-0 items-center whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              !section ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
             )}
           >
             Overview
           </Link>
           {sections.map((item) => (
             <Link
-              key={item.id}
-              href={`/${guide.slug}/${item.slug}`}
-              className={cn(
-                "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm text-muted-foreground",
-                section === item.slug && "bg-muted text-foreground",
-              )}
+                key={item.id}
+                href={`/${guide.slug}/${item.slug}`}
+                className={cn(
+                "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                section === item.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                )}
             >
               {navigationIconPath(item.slug) ? <Image src={navigationIconPath(item.slug)!} alt="" width={20} height={20} className="size-5 object-contain" /> : null}
               {item.title}