diff --git a/apps/dashboard/src/app/(dashboard)/integrations/page.tsx b/apps/dashboard/src/app/(dashboard)/integrations/page.tsx
index 086083b..8f2066a 100644
--- a/apps/dashboard/src/app/(dashboard)/integrations/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/integrations/page.tsx
@@ -1,28 +1,17 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@ds-project/components';
+import { MainContent } from '@/components';
 import { GithubProvider } from './providers/github/_components';
 import { FigmaProvider } from './providers/figma/_components';
 
 export default function Page() {
   return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle size="2xl" weight="medium">
-          <h1>Integrations</h1>
-        </CardTitle>
-        <CardDescription>
-          <p>Authorize and manage integrations</p>
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
+    <MainContent
+      description="Authorize and manage integrations"
+      title="Integrations"
+    >
+      <div className="flex flex-col gap-2">
         <GithubProvider />
         <FigmaProvider />
-      </CardContent>
-    </Card>
+      </div>
+    </MainContent>
   );
 }
diff --git a/apps/dashboard/src/app/(dashboard)/integrations/providers/github/_components/provider.tsx b/apps/dashboard/src/app/(dashboard)/integrations/providers/github/_components/provider.tsx
index 8b0d195..d378c99 100644
--- a/apps/dashboard/src/app/(dashboard)/integrations/providers/github/_components/provider.tsx
+++ b/apps/dashboard/src/app/(dashboard)/integrations/providers/github/_components/provider.tsx
@@ -56,30 +56,32 @@ export async function GithubProvider() {
         </Text>
       </div>
 
-      <form action={selectRepository} className="flex gap-2">
-        <Select
-          defaultValue={installation?.data.repositoryId?.toString()}
-          name="repositoryId"
-        >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Repositories" />
-          </SelectTrigger>
-          <SelectContent>
-            {repositories?.map((repository) => (
-              <SelectItem key={repository.id} value={String(repository.id)}>
-                {repository.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Input
-          name="installationId"
-          type="hidden"
-          value={installation?.data.installationId}
-        />
+      {installation ? (
+        <form action={selectRepository} className="flex gap-2">
+          <Select
+            defaultValue={installation.data.repositoryId?.toString()}
+            name="repositoryId"
+          >
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Repositories" />
+            </SelectTrigger>
+            <SelectContent>
+              {repositories?.map((repository) => (
+                <SelectItem key={repository.id} value={String(repository.id)}>
+                  {repository.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Input
+            name="installationId"
+            type="hidden"
+            value={installation.data.installationId}
+          />
 
-        <Button type="submit">Update</Button>
-      </form>
+          <Button type="submit">Update</Button>
+        </form>
+      ) : null}
 
       <Button asChild variant={isInstallationActive ? 'outline' : 'default'}>
         <Link href={installationUrl}>
@@ -87,9 +89,9 @@ export async function GithubProvider() {
         </Link>
       </Button>
 
-      <Button>
+      {/* <Button>
         <Link href="/integrations/providers/github">Tokens</Link>
-      </Button>
+      </Button> */}
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(dashboard)/layout.tsx b/apps/dashboard/src/app/(dashboard)/layout.tsx
index da24a8f..e1f18c1 100644
--- a/apps/dashboard/src/app/(dashboard)/layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/layout.tsx
@@ -21,8 +21,10 @@ export default async function RootLayout({
   return (
     <html lang="en">
       <body className={cn('flex flex-col items-center', inter.className)}>
-        <Navigation className="mt-6 px-2" projects={projects} />
-        <main className="flex min-h-screen w-full flex-col items-center p-24">
+        <header className="sticky top-0 w-full">
+          <Navigation className="px-2 pt-2" projects={projects} />
+        </header>
+        <main className="flex min-h-screen w-full flex-col items-center py-2">
           {children}
         </main>
       </body>
diff --git a/apps/dashboard/src/app/(dashboard)/tokens/_actions/fetch-release-tokens.action.ts b/apps/dashboard/src/app/(dashboard)/tokens/_actions/fetch-release-tokens.action.ts
new file mode 100644
index 0000000..b010a37
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/tokens/_actions/fetch-release-tokens.action.ts
@@ -0,0 +1,130 @@
+'use server';
+import type { DesignTokens } from 'style-dictionary/types';
+import type { Octokit } from '@octokit/core';
+import {
+  getGithubInstallation,
+  getGithubIntegration,
+  getGithubRepository,
+} from '@/lib/github';
+import { isAuthenticated } from '@/lib/supabase/server/utils/is-authenticated';
+import { config } from '@/config';
+
+async function searchFileSha({
+  installation,
+  owner,
+  path,
+  repo,
+  treeSha,
+  index = 0,
+}: {
+  installation: Octokit;
+  owner: string;
+  repo: string;
+  treeSha: string;
+  path: string[];
+  index?: number;
+}) {
+  const { data: treeData } = await installation.request(
+    'GET /repos/{owner}/{repo}/git/trees/{tree_sha}',
+    {
+      owner,
+      repo,
+      tree_sha: treeSha,
+    }
+  );
+
+  const treeOrFile = treeData.tree.find(
+    (treeItem) => treeItem.path === path[index]
+  );
+  if (!treeOrFile?.sha) {
+    return null;
+  }
+  if (index === path.length - 1) {
+    return treeOrFile.sha;
+  }
+
+  return searchFileSha({
+    installation,
+    owner,
+    repo,
+    treeSha: treeOrFile.sha,
+    path,
+    index: index + 1,
+  });
+}
+
+export async function fetchReleaseTokens(releaseId: number) {
+  if (!(await isAuthenticated())) {
+    throw new Error('Not authenticated');
+  }
+
+  const repository = await getGithubRepository();
+  const integration = await getGithubIntegration();
+  const installation = await getGithubInstallation(integration);
+
+  const { data: release } = await installation.request(
+    'GET /repos/{owner}/{repo}/releases/{release_id}',
+    {
+      owner: repository.owner.login,
+      repo: repository.name,
+      release_id: releaseId,
+    }
+  );
+
+  const { data: tagName } = await installation.request(
+    'GET /repos/{owner}/{repo}/git/ref/{ref}',
+    {
+      owner: repository.owner.login,
+      repo: repository.name,
+      ref: `tags/${release.tag_name}`,
+    }
+  );
+
+  // First, get the file sha from the commit
+  const { data: tagSha } = await installation.request(
+    'GET /repos/{owner}/{repo}/git/tags/{tag_sha}',
+    {
+      owner: repository.owner.login,
+      repo: repository.name,
+      tag_sha: tagName.object.sha,
+    }
+  );
+
+  const { data: commitSha } = await installation.request(
+    'GET /repos/{owner}/{repo}/git/commits/{commit_sha}',
+    {
+      owner: repository.owner.login,
+      repo: repository.name,
+      commit_sha: tagSha.object.sha,
+    }
+  );
+
+  const tokensPath = [...config.gitTokensPath.split('/'), 'tokens.json'];
+  const fileSha = await searchFileSha({
+    installation,
+    owner: repository.owner.login,
+    treeSha: commitSha.tree.sha,
+    repo: repository.name,
+    path: tokensPath,
+  });
+
+  if (!fileSha) {
+    throw new Error('File not found');
+  }
+
+  const { data: file } = await installation.request(
+    'GET /repos/{owner}/{repo}/git/blobs/{file_sha}',
+    {
+      owner: repository.owner.login,
+      repo: repository.name,
+      file_sha: fileSha,
+    }
+  );
+
+  const tokens = Buffer.from(
+    file.content,
+    file.encoding as BufferEncoding
+  ).toString();
+
+  return JSON.parse(tokens) as DesignTokens;
+}
diff --git a/apps/dashboard/src/app/(dashboard)/tokens/_actions/fetch-releases.action.ts b/apps/dashboard/src/app/(dashboard)/tokens/_actions/fetch-releases.action.ts
new file mode 100644
index 0000000..af4a26b
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/tokens/_actions/fetch-releases.action.ts
@@ -0,0 +1,27 @@
+'use server';
+import {
+  getGithubInstallation,
+  getGithubIntegration,
+  getGithubRepository,
+} from '@/lib/github';
+import { isAuthenticated } from '@/lib/supabase/server/utils/is-authenticated';
+
+export async function fetchReleases() {
+  if (!(await isAuthenticated())) {
+    throw new Error('Not authenticated');
+  }
+
+  const repository = await getGithubRepository();
+  const integration = await getGithubIntegration();
+  const installation = await getGithubInstallation(integration);
+
+  const { data } = await installation.request(
+    'GET /repos/{owner}/{repo}/releases',
+    {
+      owner: repository.owner.login,
+      repo: repository.name,
+    }
+  );
+
+  return data;
+}
diff --git a/apps/dashboard/src/app/(dashboard)/tokens/_actions/index.ts b/apps/dashboard/src/app/(dashboard)/tokens/_actions/index.ts
index 91d26bc..6323d8f 100644
--- a/apps/dashboard/src/app/(dashboard)/tokens/_actions/index.ts
+++ b/apps/dashboard/src/app/(dashboard)/tokens/_actions/index.ts
@@ -1,2 +1,2 @@
-export * from './update-tokens.action';
+export * from './fetch-releases.action';
 export * from './tokens.action';
diff --git a/apps/dashboard/src/app/(dashboard)/tokens/_actions/update-tokens.action.ts b/apps/dashboard/src/app/(dashboard)/tokens/_actions/update-tokens.action.ts
deleted file mode 100644
index bcfaf18..0000000
--- a/apps/dashboard/src/app/(dashboard)/tokens/_actions/update-tokens.action.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-'use server';
-
-import type { DesignTokens } from 'style-dictionary/types';
-import { revalidatePath } from 'next/cache';
-import { pushFile } from '@/lib/github';
-import { isAuthenticated } from '@/lib/supabase/server/utils/is-authenticated';
-import { config } from '@/config';
-
-export async function updateTokens(newTokens: DesignTokens) {
-  if (!(await isAuthenticated())) {
-    throw new Error('Not authenticated');
-  }
-
-  const base64Content = btoa(JSON.stringify(newTokens, null, 2));
-  await pushFile({
-    content: base64Content,
-    encoding: 'base64',
-    name: `${config.gitTokensPath}/tokens.json`,
-  });
-
-  revalidatePath('/tokens');
-}
diff --git a/apps/dashboard/src/app/(dashboard)/tokens/_components/index.ts b/apps/dashboard/src/app/(dashboard)/tokens/_components/index.ts
index 4fd7a2c..5705139 100644
--- a/apps/dashboard/src/app/(dashboard)/tokens/_components/index.ts
+++ b/apps/dashboard/src/app/(dashboard)/tokens/_components/index.ts
@@ -1 +1 @@
-export * from './push-button';
+export * from './select-releases';
diff --git a/apps/dashboard/src/app/(dashboard)/tokens/_components/push-button.tsx b/apps/dashboard/src/app/(dashboard)/tokens/_components/push-button.tsx
deleted file mode 100644
index f0f5753..0000000
--- a/apps/dashboard/src/app/(dashboard)/tokens/_components/push-button.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-'use client';
-
-import { Button } from '@ds-project/components';
-import { useCallback } from 'react';
-import type { DesignTokens } from 'style-dictionary/types';
-import { updateTokens } from '../_actions/update-tokens.action';
-
-export function PushButton({ tokens }: { tokens: DesignTokens }) {
-  const onClickHandler = useCallback(() => {
-    void updateTokens(tokens);
-  }, [tokens]);
-
-  return <Button onClick={onClickHandler}>Push changes</Button>;
-}
diff --git a/apps/dashboard/src/app/(dashboard)/tokens/_components/select-releases.tsx b/apps/dashboard/src/app/(dashboard)/tokens/_components/select-releases.tsx
new file mode 100644
index 0000000..2d158e4
--- /dev/null
+++ b/apps/dashboard/src/app/(dashboard)/tokens/_components/select-releases.tsx
@@ -0,0 +1,72 @@
+'use client';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@ds-project/components';
+import { useCallback, useEffect, useState } from 'react';
+import type { DesignTokens } from 'style-dictionary/types';
+import { InstallRelease, JsonBlock } from '@/components';
+import type { fetchReleases } from '../_actions';
+import { fetchReleaseTokens } from '../_actions/fetch-release-tokens.action';
+
+interface SelectReleasesProps {
+  releases: Awaited<ReturnType<typeof fetchReleases>>;
+}
+
+export function SelectReleases({ releases }: SelectReleasesProps) {
+  const [selectedRelease, setSelectedRelease] =
+    useState<SelectReleasesProps['releases'][number]>();
+  const [tokens, setTokens] = useState<DesignTokens>();
+
+  const onReleaseChange = useCallback(
+    (selectedReleaseId: string) => {
+      const newSelectedRelease = releases.find(
+        (release) => String(release.id) === selectedReleaseId
+      );
+      setSelectedRelease(newSelectedRelease);
+    },
+    [releases]
+  );
+
+  useEffect(() => {
+    if (!selectedRelease?.id) return;
+
+    fetchReleaseTokens(selectedRelease.id)
+      .then((_tokens) => {
+        setTokens(_tokens);
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console -- TODO: replace with monitoring
+        console.error('Error fetching release tokens', error);
+      });
+  }, [selectedRelease?.id]);
+
+  return (
+    <>
+      <div className="flex justify-between">
+        <Select
+          onValueChange={onReleaseChange}
+          value={selectedRelease?.id.toString()}
+        >
+          <SelectTrigger className="max-w-sm">
+            <SelectValue placeholder="Release" />
+          </SelectTrigger>
+          <SelectContent>
+            {releases.map((release) => (
+              <SelectItem key={release.id} value={String(release.id)}>
+                {release.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {selectedRelease?.name ? (
+          <InstallRelease packageName={selectedRelease.name} />
+        ) : null}
+      </div>
+      {tokens ? <JsonBlock src={tokens} /> : null}
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/tokens/page.tsx b/apps/dashboard/src/app/(dashboard)/tokens/page.tsx
index 7a88678..9bd25be 100644
--- a/apps/dashboard/src/app/(dashboard)/tokens/page.tsx
+++ b/apps/dashboard/src/app/(dashboard)/tokens/page.tsx
@@ -1,54 +1,18 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Text,
-} from '@ds-project/components';
-import { equals } from 'rambda';
-import { DiffBlock } from '@/components/diff-block/diff-block';
-import { requestTokens } from '../integrations/providers/github/_actions';
-import { fetchTokens } from './_actions';
-import { PushButton } from './_components';
+import { MainContent } from '@/components';
+import { fetchReleases } from './_actions';
+import { SelectReleases } from './_components';
 
 export default async function Tokens() {
-  const tokens = await fetchTokens();
-  const githubTokens = await requestTokens();
-
-  const areTokensEqual = equals(tokens, githubTokens);
+  const releases = await fetchReleases();
 
   return (
-    <main className="flex min-h-screen w-full flex-col items-center p-24">
-      <Card className="w-full">
-        <CardHeader>
-          <CardTitle size="2xl" weight="medium">
-            <h1>Tokens</h1>
-          </CardTitle>
-          <CardDescription>
-            <p>
-              This is a list of all tokens used in Figma converted to Style
-              Dictionary format.
-            </p>
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          {Boolean(tokens) && Boolean(githubTokens) ? (
-            <DiffBlock
-              newValue={JSON.stringify(tokens, null, 2)}
-              oldValue={JSON.stringify(githubTokens, null, 2)}
-            />
-          ) : (
-            <Text>
-              <p>No tokens found</p>
-            </Text>
-          )}
-        </CardContent>
-        <CardFooter className="justify-end">
-          {!areTokensEqual && tokens ? <PushButton tokens={tokens} /> : null}
-        </CardFooter>
-      </Card>
-    </main>
+    <MainContent
+      description="Inspect the design tokens releases."
+      title="Design Tokens"
+    >
+      <div className="flex flex-col gap-4">
+        <SelectReleases releases={releases} />
+      </div>
+    </MainContent>
   );
 }
diff --git a/apps/dashboard/src/app/api/figma/design-tokens/route.ts b/apps/dashboard/src/app/api/figma/design-tokens/route.ts
index 0e6b1f6..1e46c53 100644
--- a/apps/dashboard/src/app/api/figma/design-tokens/route.ts
+++ b/apps/dashboard/src/app/api/figma/design-tokens/route.ts
@@ -3,6 +3,8 @@ import { eq } from 'drizzle-orm';
 import { database } from '@/lib/drizzle';
 import { insertResourcesSchema, resourcesTable } from '@/lib/drizzle/schema';
 import { isAuthenticated } from '@/lib/supabase/server/utils/is-authenticated';
+import { pushFile } from '@/lib/github';
+import { config } from '@/config';
 
 export async function POST(request: NextRequest) {
   if (!(await isAuthenticated(request))) {
@@ -14,12 +16,23 @@ export async function POST(request: NextRequest) {
       .pick({ designTokens: true, projectId: true })
       .parse(await request.json());
 
+    // Update database
     await database
       .update(resourcesTable)
       .set({
         designTokens: validatedData.designTokens,
       })
       .where(eq(resourcesTable.projectId, validatedData.projectId));
+
+    // Update Github - TODO: turn into "update integrations" actions
+    const base64Content = btoa(
+      JSON.stringify(validatedData.designTokens, null, 2)
+    );
+    await pushFile({
+      content: base64Content,
+      encoding: 'base64',
+      name: `${config.gitTokensPath}/tokens.json`,
+    });
   } catch (error) {
     return new Response(JSON.stringify(error), { status: 400 });
   }
diff --git a/apps/dashboard/src/components/home-button/home-button.tsx b/apps/dashboard/src/components/home-button/home-button.tsx
index 50c11dd..8ad3e64 100644
--- a/apps/dashboard/src/components/home-button/home-button.tsx
+++ b/apps/dashboard/src/components/home-button/home-button.tsx
@@ -6,7 +6,11 @@ import logo from './logo.svg';
 
 export function HomeButton({ className }: { className?: string }) {
   return (
-    <Button asChild className={cn(className)} variant="ghost">
+    <Button
+      asChild
+      className={cn('border border-slate-200', className)}
+      variant="ghost"
+    >
       <Link href="/">
         <Image alt="Home" height={32} src={logo} width={32} />
       </Link>
diff --git a/apps/dashboard/src/components/index.ts b/apps/dashboard/src/components/index.ts
index fc7ff75..2865cf5 100644
--- a/apps/dashboard/src/components/index.ts
+++ b/apps/dashboard/src/components/index.ts
@@ -1,4 +1,6 @@
+export * from './diff-block';
 export * from './home-button';
+export * from './install-release';
 export * from './json-block';
+export * from './main-content';
 export * from './navigation';
-export * from './diff-block';
diff --git a/apps/dashboard/src/components/install-release/index.ts b/apps/dashboard/src/components/install-release/index.ts
new file mode 100644
index 0000000..a72083e
--- /dev/null
+++ b/apps/dashboard/src/components/install-release/index.ts
@@ -0,0 +1 @@
+export * from './install-release';
diff --git a/apps/dashboard/src/components/install-release/install-release.tsx b/apps/dashboard/src/components/install-release/install-release.tsx
new file mode 100644
index 0000000..516f086
--- /dev/null
+++ b/apps/dashboard/src/components/install-release/install-release.tsx
@@ -0,0 +1,22 @@
+import { Button, Icons, Text } from '@ds-project/components';
+
+interface InstallReleaseProps {
+  packageName: string;
+}
+export function InstallRelease({ packageName }: InstallReleaseProps) {
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-md bg-black px-3 py-2 text-white">
+      <Text family="mono" size="sm">
+        <code>
+          <Text weight="bold">
+            <span>pnpm</span>
+          </Text>{' '}
+          add {packageName}
+        </code>
+      </Text>
+      <Button size="icon" variant="ghost">
+        <Icons.CopyIcon />
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/json-block/json-block.tsx b/apps/dashboard/src/components/json-block/json-block.tsx
index cb72463..02adb1a 100644
--- a/apps/dashboard/src/components/json-block/json-block.tsx
+++ b/apps/dashboard/src/components/json-block/json-block.tsx
@@ -14,5 +14,9 @@ const DynamicReactJson = dynamic(() => import('react-json-view'), {
 });
 
 export function JsonBlock(props: ComponentProps<typeof DynamicReactJson>) {
-  return <DynamicReactJson {...props} />;
+  return (
+    <div className="rounded-md border border-slate-100 p-4">
+      <DynamicReactJson {...props} />
+    </div>
+  );
 }
diff --git a/apps/dashboard/src/components/main-content/index.ts b/apps/dashboard/src/components/main-content/index.ts
new file mode 100644
index 0000000..812910c
--- /dev/null
+++ b/apps/dashboard/src/components/main-content/index.ts
@@ -0,0 +1 @@
+export * from './main-content';
diff --git a/apps/dashboard/src/components/main-content/main-content.tsx b/apps/dashboard/src/components/main-content/main-content.tsx
new file mode 100644
index 0000000..a50547e
--- /dev/null
+++ b/apps/dashboard/src/components/main-content/main-content.tsx
@@ -0,0 +1,32 @@
+import { Text } from '@ds-project/components';
+import type { ReactNode } from 'react';
+
+interface MainContentProps {
+  title: string;
+  description: string;
+  children: ReactNode;
+}
+
+export function MainContent({
+  title,
+  description,
+  children,
+}: MainContentProps) {
+  return (
+    <div className="flex w-full flex-col items-center gap-2">
+      <div className="flex w-full flex-col items-center gap-2 border-b border-slate-200 px-4 py-8">
+        <div className="flex w-full max-w-screen-xl flex-col">
+          <Text size="3xl" weight="medium">
+            <h1>{title}</h1>
+          </Text>
+          <Text mood="muted" size="sm">
+            <p>{description}</p>
+          </Text>
+        </div>
+      </div>
+      <div className="flex w-full flex-col items-center px-4">
+        <div className="flex w-full max-w-screen-xl flex-col">{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/navigation/navigation.tsx b/apps/dashboard/src/components/navigation/navigation.tsx
index 8572670..c1699c6 100644
--- a/apps/dashboard/src/components/navigation/navigation.tsx
+++ b/apps/dashboard/src/components/navigation/navigation.tsx
@@ -22,7 +22,12 @@ interface NavigationProps {
 
 export function Navigation({ className, projects }: NavigationProps) {
   return (
-    <nav className={cn('flex w-full justify-start gap-2', className)}>
+    <nav
+      className={cn(
+        'flex w-full justify-start gap-2 border-b border-slate-200 bg-white pb-2',
+        className
+      )}
+    >
       <HomeButton />
       <DropdownMenu>
         <DropdownMenuTrigger className="flex items-center gap-2 rounded-md border border-[hsl(var(--input))] p-2">
diff --git a/package.json b/package.json
index 3ea0708..908b37d 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "build": "turbo run build",
     "dev": "turbo run dev",
     "lint": "turbo run lint",
+    "type-check": "turbo run type-check",
     "clean": "turbo run clean && rm -rf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
diff --git a/packages/components/src/text/text.tsx b/packages/components/src/text/text.tsx
index 99b586b..3a76251 100644
--- a/packages/components/src/text/text.tsx
+++ b/packages/components/src/text/text.tsx
@@ -6,10 +6,6 @@ import { forwardRef } from 'react';
 import { cn } from '../lib/utils';
 
 const textVariations = cva('', {
-  defaultVariants: {
-    size: 'base',
-    family: 'sans',
-  },
   variants: {
     size: {
       xs: 'ds-fluid-text-xs',
@@ -38,6 +34,7 @@ const textVariations = cva('', {
     },
     family: {
       sans: 'ds-font-sans',
+      mono: 'ds-font-mono'
     },
     mood: {
       default: "ds-text-foreground",
diff --git a/packages/eslint-config/next.js b/packages/eslint-config/next.js
index fc16994..7140d10 100644
--- a/packages/eslint-config/next.js
+++ b/packages/eslint-config/next.js
@@ -1,6 +1,6 @@
-const { resolve } = require("node:path");
+const { resolve } = require('node:path');
 
-const project = resolve(process.cwd(), "tsconfig.json");
+const project = resolve(process.cwd(), 'tsconfig.json');
 
 /*
  * This is a custom ESLint configuration for use with
@@ -13,50 +13,50 @@ const project = resolve(process.cwd(), "tsconfig.json");
 
 module.exports = {
   extends: [
-    "@vercel/style-guide/eslint/node",
-    "@vercel/style-guide/eslint/typescript",
-    "@vercel/style-guide/eslint/browser",
-    "@vercel/style-guide/eslint/react",
-    "@vercel/style-guide/eslint/next",
-    "eslint-config-turbo",
+    '@vercel/style-guide/eslint/node',
+    '@vercel/style-guide/eslint/typescript',
+    '@vercel/style-guide/eslint/browser',
+    '@vercel/style-guide/eslint/react',
+    '@vercel/style-guide/eslint/next',
+    'eslint-config-turbo',
   ].map(require.resolve),
-  plugins: ["unused-imports", "tailwindcss"],
+  plugins: ['unused-imports', 'tailwindcss'],
   parserOptions: { project },
-  globals: { React: true, JSX: true },
+  globals: { React: true, JSX: true, BufferEncoding: 'readonly' },
   settings: {
-    "import/resolver": {
+    'import/resolver': {
       typescript: { project },
-      node: { extensions: [".mjs", ".js", ".jsx", ".ts", ".tsx"] },
+      node: { extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx'] },
     },
     tailwindcss: {
-      callees: ["cn", "clsx", "cva"],
+      callees: ['cn', 'clsx', 'cva'],
     },
   },
-  ignorePatterns: ["node_modules/", "dist/", ".eslintrc.js", "**/*.css"],
+  ignorePatterns: ['node_modules/', 'dist/', '.eslintrc.js', '**/*.css'],
   rules: {
-    "import/no-default-export": "off",
-    "no-unused-vars": "off",
-    "unused-imports/no-unused-imports": "error",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-misused-promises": [
-      "error",
+    'import/no-default-export': 'off',
+    'no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-misused-promises': [
+      'error',
       { checksVoidReturn: { attributes: false } },
     ],
-    "react/jsx-boolean-value": "error",
+    'react/jsx-boolean-value': 'error',
 
-    "tailwindcss/classnames-order": "warn",
-    "tailwindcss/enforces-negative-arbitrary-values": "warn",
-    "tailwindcss/enforces-shorthand": "warn",
-    "tailwindcss/migration-from-tailwind-2": "warn",
-    "tailwindcss/no-arbitrary-value": "off",
-    "tailwindcss/no-custom-classname": "warn",
-    "tailwindcss/no-contradicting-classname": "error",
-    "tailwindcss/no-unnecessary-arbitrary-value": "warn",
+    'tailwindcss/classnames-order': 'warn',
+    'tailwindcss/enforces-negative-arbitrary-values': 'warn',
+    'tailwindcss/enforces-shorthand': 'warn',
+    'tailwindcss/migration-from-tailwind-2': 'warn',
+    'tailwindcss/no-arbitrary-value': 'off',
+    'tailwindcss/no-custom-classname': 'warn',
+    'tailwindcss/no-contradicting-classname': 'error',
+    'tailwindcss/no-unnecessary-arbitrary-value': 'warn',
 
-    "arrow-body-style": "error",
-    "prefer-arrow-callback": "error",
-    "react/function-component-definition": "off",
+    'arrow-body-style': 'error',
+    'prefer-arrow-callback': 'error',
+    'react/function-component-definition': 'off',
 
-    "jsx-a11y/heading-has-content": [2, { components: ["CardTitle"] }],
+    'jsx-a11y/heading-has-content': [2, { components: ['CardTitle'] }],
   },
 };
diff --git a/turbo.json b/turbo.json
index f5b86bd..f0aae1d 100644
--- a/turbo.json
+++ b/turbo.json
@@ -27,6 +27,9 @@
       "cache": false,
       "persistent": true
     },
+    "type-check": {
+      "cache": false
+    },
     "clean": {
       "cache": false
     }