diff --git a/packages/gitbook-v2/package.json b/packages/gitbook-v2/package.json
index cfa6e71b9..0255b2b31 100644
--- a/packages/gitbook-v2/package.json
+++ b/packages/gitbook-v2/package.json
@@ -25,7 +25,7 @@
     },
     "scripts": {
         "generate": "rm -rf ./public && cp -r ../gitbook/public ./public",
-        "dev:v2": "env-cmd --silent -f ../../.env.local next --turbopack",
+        "dev:v2": "env-cmd --silent -f ../../.env.local next",
         "build": "next build",
         "build:v2": "next build",
         "start": "next start",
diff --git a/packages/gitbook/src/components/PageBody/PageHeader.tsx b/packages/gitbook/src/components/PageBody/PageHeader.tsx
index 780b4f2ae..58a141fae 100644
--- a/packages/gitbook/src/components/PageBody/PageHeader.tsx
+++ b/packages/gitbook/src/components/PageBody/PageHeader.tsx
@@ -9,7 +9,7 @@ import type { GitBookSiteContext } from '@v2/lib/context';
 import { PageIcon } from '../PageIcon';
 import { StyledLink } from '../primitives';
 
-import style from './pageBody.module.css';
+import styles from './pageBody.module.css';
 
 export async function PageHeader(props: {
     context: GitBookSiteContext;
@@ -42,7 +42,7 @@ export async function PageHeader(props: {
                             return (
                                 <Fragment key={breadcrumb.id}>
                                     <li key={breadcrumb.id}>
-                                        <StyledLink href={href} className={style.headerLink}>
+                                        <StyledLink href={href} className={styles.headerLink}>
                                             <PageIcon
                                                 page={breadcrumb}
                                                 style="flex size-4 items-center justify-center text-base leading-none"
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
index 22944eb05..a46758c0a 100644
--- a/packages/gitbook/src/components/RootLayout/globals.css
+++ b/packages/gitbook/src/components/RootLayout/globals.css
@@ -151,18 +151,6 @@
             z-index: 20;
         }
     }
-
-    .styled-link {
-        @apply underline decoration-[max(0.07em,1px)] underline-offset-2 links-accent:underline-offset-4 links-default:decoration-primary/6 links-default:text-primary-subtle links-default:hover:text-primary-strong links-default:contrast-more:text-primary links-default:contrast-more:hover:text-primary-strong links-accent:decoration-primary-subtle links-accent:hover:decoration-[3px] links-accent:hover:[text-decoration-skip-ink:none] transition-all duration-100;
-    }
-
-    .styled-card {
-        @apply flex flex-row justify-between items-center gap-4 ring-1 ring-tint-subtle rounded straight-corners:rounded-none circular-corners:rounded-2xl px-5 py-3 transition-shadow hover:ring-primary-hover;
-    }
-
-    .styled-button {
-        @apply inline-flex items-center gap-2 rounded-md straight-corners:rounded-none circular-corners:rounded-full ring-1 ring-tint hover:ring-tint-hover shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none depth-flat:shadow-none contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12 hover:scale-104 depth-flat:hover:scale-100 active:scale-100 transition-all grow-0 shrink-0 truncate;
-    }
 }
 
 html {
diff --git a/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx
index ca3b55903..4f8aaf2a3 100644
--- a/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx
+++ b/packages/gitbook/src/components/TableOfContents/PageLinkItem.tsx
@@ -8,7 +8,7 @@ import { tcls } from '@/lib/tailwind';
 
 import { TOCPageIcon } from './TOCPageIcon';
 
-import style from './toc.module.css';
+import styles from './toc.module.css';
 
 export async function PageLinkItem(props: { page: RevisionPageLink; context: GitBookSiteContext }) {
     const { page, context } = props;
@@ -19,7 +19,7 @@ export async function PageLinkItem(props: { page: RevisionPageLink; context: Git
         <li className={tcls('flex', 'flex-col')}>
             <Link
                 href={resolved?.href ?? '#'}
-                className={style.pageLinkItem}
+                className={styles.pageLinkItem}
                 insights={{
                     type: 'link_click',
                     link: {
diff --git a/packages/gitbook/src/components/primitives/Button.tsx b/packages/gitbook/src/components/primitives/Button.tsx
index 0c176737e..31d6b2652 100644
--- a/packages/gitbook/src/components/primitives/Button.tsx
+++ b/packages/gitbook/src/components/primitives/Button.tsx
@@ -7,6 +7,8 @@ import { type ClassValue, tcls } from '@/lib/tailwind';
 import { Icon, type IconName } from '@gitbook/icons';
 import { Link, type LinkInsightsProps } from './Link';
 
+import styles from './button.module.css';
+
 type ButtonProps = {
     href?: string;
     variant?: 'primary' | 'secondary' | 'blank';
@@ -19,33 +21,14 @@ type ButtonProps = {
     HTMLAttributes<HTMLElement>;
 
 const variantClasses = {
-    primary: [
-        'bg-primary-solid',
-        'text-contrast-primary-solid',
-        'hover:bg-primary-solid-hover',
-        'hover:text-contrast-primary-solid-hover',
-        'ring-0',
-        'contrast-more:ring-1',
-    ],
-    blank: [
-        'bg-transparent',
-        'text-tint',
-        'ring-0',
-        'shadow-none',
-        'hover:bg-primary-hover',
-        'hover:text-primary',
-        'hover:scale-1',
-        'hover:shadow-none',
-        'contrast-more:bg-tint-subtle',
-    ],
+    primary: [styles.primary],
+    blank: [styles.blank, 'hover:scale-1'],
     secondary: [
-        'bg-tint',
-        'depth-flat:bg-transparent',
-        'text-tint',
-        'hover:bg-tint-hover',
-        'depth-flat:hover:bg-tint-hover',
-        'hover:text-primary',
-        'contrast-more:bg-tint-subtle',
+        styles.secondary,
+        'bg-secondary-solid',
+        'text-contrast-secondary-solid',
+        'hover:bg-secondary-solid-hover',
+        'hover:text-contrast-secondary-solid-hover',
     ],
 };
 
@@ -62,14 +45,14 @@ export function Button({
     ...rest
 }: ButtonProps & { target?: HTMLAttributeAnchorTarget }) {
     const sizes = {
-        default: ['text-base', 'font-semibold', 'px-5', 'py-2', 'circular-corners:px-6'],
-        medium: ['text-sm', 'px-3.5', 'py-1.5', 'circular-corners:px-4'],
-        small: ['text-xs', 'py-2', iconOnly ? 'px-2' : 'px-3'],
+        default: [styles.default],
+        medium: [styles.medium],
+        small: [styles.small, iconOnly ? 'px-2' : 'px-3'],
     };
 
     const sizeClasses = sizes[size] || sizes.default;
 
-    const domClassName = tcls('styled-button', variantClasses[variant], sizeClasses, className);
+    const domClassName = tcls(styles.styledButton, variantClasses[variant], sizeClasses, className);
 
     if (href) {
         return (
diff --git a/packages/gitbook/src/components/primitives/Card.tsx b/packages/gitbook/src/components/primitives/Card.tsx
index 364213577..df78c39a3 100644
--- a/packages/gitbook/src/components/primitives/Card.tsx
+++ b/packages/gitbook/src/components/primitives/Card.tsx
@@ -4,6 +4,8 @@ import { type ClassValue, tcls } from '@/lib/tailwind';
 
 import { Link, type LinkInsightsProps } from './Link';
 
+import styles from './card.module.css';
+
 export async function Card(
     props: {
         href: string;
@@ -17,7 +19,7 @@ export async function Card(
     const { title, leadingIcon, href, preTitle, postTitle, style, insights } = props;
 
     return (
-        <Link href={href} className={tcls('group', 'styled-card', style)} insights={insights}>
+        <Link href={href} className={tcls('group', styles.styledCard, style)} insights={insights}>
             {leadingIcon}
             <span className={tcls('flex', 'flex-col', 'flex-1')}>
                 {preTitle ? (
diff --git a/packages/gitbook/src/components/primitives/StyledLink.tsx b/packages/gitbook/src/components/primitives/StyledLink.tsx
index dd873f7b5..b8ede07b9 100644
--- a/packages/gitbook/src/components/primitives/StyledLink.tsx
+++ b/packages/gitbook/src/components/primitives/StyledLink.tsx
@@ -2,6 +2,8 @@ import { type ClassValue, tcls } from '@/lib/tailwind';
 
 import { Link, type LinkProps } from '../primitives/Link';
 
+import styles from './styledLink.module.css';
+
 export const linkStyles = [
     'underline',
     'decoration-[max(0.07em,1px)]', // Set the underline to be proportional to the font size, with a minimum. The default is too thin.
@@ -29,7 +31,7 @@ export function StyledLink(props: Omit<LinkProps, 'style'> & { className?: Class
     const { className, ...rest } = props;
 
     return (
-        <Link {...rest} className={tcls('styled-link', className)}>
+        <Link {...rest} className={tcls(styles.styledLink, className)}>
             {props.children}
         </Link>
     );
diff --git a/packages/gitbook/src/components/primitives/button.module.css b/packages/gitbook/src/components/primitives/button.module.css
new file mode 100644
index 000000000..720bb22ca
--- /dev/null
+++ b/packages/gitbook/src/components/primitives/button.module.css
@@ -0,0 +1,40 @@
+.styledButton {
+    @apply inline-flex items-center gap-2 rounded-md straight-corners:rounded-none circular-corners:rounded-full ring-1 ring-tint hover:ring-tint-hover shadow-sm shadow-tint dark:shadow-tint-1 hover:shadow-md active:shadow-none depth-flat:shadow-none contrast-more:ring-tint-12 contrast-more:hover:ring-2 contrast-more:hover:ring-tint-12 hover:scale-104 depth-flat:hover:scale-100 active:scale-100 transition-all grow-0 shrink-0 truncate;
+}
+
+.primary {
+    @apply bg-primary-solid
+        text-contrast-primary-solid
+        hover:bg-primary-solid-hover
+        hover:text-contrast-primary-solid-hover
+        ring-0
+        contrast-more:ring-1;
+}
+
+.blank {
+    @apply bg-transparent
+        text-tint
+        ring-0
+        shadow-none
+        hover:bg-primary-hover
+        hover:text-primary
+        hover:shadow-none
+        contrast-more:bg-tint-subtle;
+}
+
+.secondary {
+    @apply ring-0
+        contrast-more:ring-1;
+}
+
+.default {
+    @apply text-base font-semibold px-5 py-2 circular-corners:px-6;
+}
+
+.medium {
+    @apply text-sm px-3.5 py-1.5 circular-corners:px-4;
+}
+
+.small {
+    @apply text-xs py-2;
+}
diff --git a/packages/gitbook/src/components/primitives/card.module.css b/packages/gitbook/src/components/primitives/card.module.css
new file mode 100644
index 000000000..b94085fd3
--- /dev/null
+++ b/packages/gitbook/src/components/primitives/card.module.css
@@ -0,0 +1,3 @@
+.styledCard {
+    @apply flex flex-row justify-between items-center gap-4 ring-1 ring-tint-subtle rounded straight-corners:rounded-none circular-corners:rounded-2xl px-5 py-3 transition-shadow hover:ring-primary-hover;
+}
diff --git a/packages/gitbook/src/components/primitives/styledLink.module.css b/packages/gitbook/src/components/primitives/styledLink.module.css
new file mode 100644
index 000000000..2742d7152
--- /dev/null
+++ b/packages/gitbook/src/components/primitives/styledLink.module.css
@@ -0,0 +1,3 @@
+.styledLink {
+    @apply underline decoration-[max(0.07em,1px)] underline-offset-2 links-accent:underline-offset-4 links-default:decoration-primary/6 links-default:text-primary-subtle links-default:hover:text-primary-strong links-default:contrast-more:text-primary links-default:contrast-more:hover:text-primary-strong links-accent:decoration-primary-subtle links-accent:hover:decoration-[3px] links-accent:hover:[text-decoration-skip-ink:none] transition-all duration-100;
+}