diff --git a/apps/guide/src/app/guide/layout.tsx b/apps/guide/src/app/guide/layout.tsx
index 97db6fca3..dab30f0a7 100644
--- a/apps/guide/src/app/guide/layout.tsx
+++ b/apps/guide/src/app/guide/layout.tsx
@@ -1,5 +1,5 @@
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import { baseOptions } from '@/app/layout.config';
 import { source } from '@/lib/source';
 
@@ -13,17 +13,18 @@ export default function Layout({ children }: { readonly children: ReactNode }) {
 						if (!meta || !node.icon) return option;
 
 						// category selection color based on path src/styles/base.css
-						const color = `var(--${meta.file.path.split('/')[0]}-color, var(--color-fd-foreground))`;
+						const color = `var(--${meta.path.split('/')[0]}-color, var(--color-fd-foreground))`;
 
 						return {
 							...option,
 							icon: (
 								<div
-									className="rounded-lg border p-1.5 shadow-lg md:mb-auto md:rounded-md md:p-1 [&_svg]:size-6 md:[&_svg]:size-5"
-									style={{
-										color,
-										backgroundColor: `color-mix(in oklab, ${color} 10%, transparent)`,
-									}}
+									className="size-full rounded-lg text-(--tab-color) max-md:border max-md:bg-(--tab-color)/10 max-md:p-1.5 [&_svg]:size-full"
+									style={
+										{
+											'--tab-color': color,
+										} as CSSProperties
+									}
 								>
 									{node.icon}
 								</div>