diff --git a/apps/mobile/src/app/(home)/generating-wallet.tsx b/apps/mobile/src/app/(home)/generating-wallet.tsx
index b22e90ab2..a436819ce 100644
--- a/apps/mobile/src/app/(home)/generating-wallet.tsx
+++ b/apps/mobile/src/app/(home)/generating-wallet.tsx
@@ -15,7 +15,7 @@ export default function GeneratingWalletScreen() {
         bottom={height / 2}
         left={0}
         right={0}
-        zIndex={10}
+        zIndex="10"
         justifyContent="center"
         alignItems="center"
       >
diff --git a/apps/mobile/src/app/(home)/recover-wallet.tsx b/apps/mobile/src/app/(home)/recover-wallet.tsx
index 07874cb95..c0943521f 100644
--- a/apps/mobile/src/app/(home)/recover-wallet.tsx
+++ b/apps/mobile/src/app/(home)/recover-wallet.tsx
@@ -126,7 +126,7 @@ export default function RecoverWallet() {
             {!hidePasteButton && (
               <Button
                 onPress={pasteFromClipboard}
-                style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 100 }}
+                style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 20 }}
                 buttonState="default"
                 title={t({
                   id: 'recover_wallet.paste_button',
diff --git a/apps/mobile/src/components/draggable.tsx b/apps/mobile/src/components/draggable.tsx
index 10da21d8b..28bd3430e 100644
--- a/apps/mobile/src/components/draggable.tsx
+++ b/apps/mobile/src/components/draggable.tsx
@@ -48,7 +48,7 @@ export function Draggable({
   const animatedStyles = useAnimatedStyle(() => ({
     transform: [{ translateY: translationY.value }, { scale: zoom.value }],
     position: isAnimatedShared.value ? 'absolute' : 'relative',
-    zIndex: isAnimatedShared.value ? 100 : 1,
+    zIndex: isAnimatedShared.value ? 20 : 1,
     width: '100%',
     top: isAnimatedShared.value ? thisItemPosition.value.y : 0,
     left: isAnimatedShared.value ? thisItemPosition.value.x : 0,
diff --git a/apps/mobile/src/components/headers/header.layout.tsx b/apps/mobile/src/components/headers/header.layout.tsx
index 8be33bdc0..2f8aefb1d 100644
--- a/apps/mobile/src/components/headers/header.layout.tsx
+++ b/apps/mobile/src/components/headers/header.layout.tsx
@@ -36,13 +36,7 @@ export function HeaderLayout({
         py="3"
         px="3"
       >
-        <Box
-          alignItems="flex-start"
-          flexGrow={1}
-          height="100%"
-          justifyContent="center"
-          zIndex={100}
-        >
+        <Box alignItems="flex-start" flexGrow={1} height="100%" justifyContent="center" zIndex="20">
           {leftElement}
         </Box>
         <Box
@@ -56,7 +50,7 @@ export function HeaderLayout({
         >
           {centerElement}
         </Box>
-        <Box alignItems="flex-end" flexGrow={1} height="100%" justifyContent="center" zIndex={100}>
+        <Box alignItems="flex-end" flexGrow={1} height="100%" justifyContent="center" zIndex="20">
           {rightElement}
         </Box>
       </Box>
diff --git a/apps/mobile/src/components/toast/index.tsx b/apps/mobile/src/components/toast/index.tsx
index 82f4763ed..e864aaf9e 100644
--- a/apps/mobile/src/components/toast/index.tsx
+++ b/apps/mobile/src/components/toast/index.tsx
@@ -99,7 +99,7 @@ export function Toast({ toastRef }: ToastProps) {
         alignSelf="center"
         gap="3"
         flexDirection="row"
-        zIndex={9999}
+        zIndex="100"
         justifyContent="center"
         alignItems="center"
         testID={TestId.toastContainer}
diff --git a/packages/panda-preset/src/preset.ts b/packages/panda-preset/src/preset.ts
index 3371e68c6..0d7338d74 100644
--- a/packages/panda-preset/src/preset.ts
+++ b/packages/panda-preset/src/preset.ts
@@ -9,6 +9,7 @@ import { tokens } from './tokens';
 import { textStyles } from './typography';
 
 export default definePreset({
+  name: 'leather',
   theme: {
     extend: {
       semanticTokens,
diff --git a/packages/panda-preset/src/tokens.ts b/packages/panda-preset/src/tokens.ts
index da2dc170f..bb491bc70 100644
--- a/packages/panda-preset/src/tokens.ts
+++ b/packages/panda-preset/src/tokens.ts
@@ -1,10 +1,15 @@
 import { defineTokens } from '@pandacss/dev';
 
-import { tokens as leatherTokens } from '@leather.io/tokens';
+import { tokens as leatherTokens, zIndices } from '@leather.io/tokens';
 
 import { colors } from './colors';
 
+function transformZIndices(zIndices: Record<string, number>) {
+  return Object.fromEntries(Object.entries(zIndices).map(([key, value]) => [key, { value }]));
+}
+
 export const tokens = defineTokens({
   ...leatherTokens,
   colors,
+  zIndex: transformZIndices(zIndices),
 });
diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts
index 3515c7b39..0e483f366 100644
--- a/packages/tokens/src/index.ts
+++ b/packages/tokens/src/index.ts
@@ -4,4 +4,5 @@ export type { AllThemePalette } from './colors';
 export { keyframes } from './keyframes';
 export { semanticTokens } from './semantic-tokens';
 export { getWebTextVariants, getMobileTextVariants } from './typography';
+export { zIndices } from './z-indices';
 export { tokens } from './tokens';
diff --git a/packages/tokens/src/z-indices.ts b/packages/tokens/src/z-indices.ts
new file mode 100644
index 000000000..581d107ba
--- /dev/null
+++ b/packages/tokens/src/z-indices.ts
@@ -0,0 +1,15 @@
+export const zIndices = {
+  '-1': -1,
+  '0': 0,
+  '10': 10,
+  '20': 20,
+  '30': 30,
+  '40': 40,
+  '50': 50,
+  '60': 60,
+  '70': 70,
+  '80': 80,
+  '90': 90,
+  '100': 100,
+  max: 9999,
+};
diff --git a/packages/tokens/tsup.config.ts b/packages/tokens/tsup.config.ts
index c67629b71..df72178af 100644
--- a/packages/tokens/tsup.config.ts
+++ b/packages/tokens/tsup.config.ts
@@ -1,6 +1,6 @@
-import { defineConfig } from 'tsup';
+import { type Options, defineConfig } from 'tsup';
 
-export default defineConfig({
+export default defineConfig(<Options>{
   entry: ['src/index.ts'],
   sourcemap: true,
   clean: false,
diff --git a/packages/ui/src/components/sheet/components/sheet-header.native.tsx b/packages/ui/src/components/sheet/components/sheet-header.native.tsx
index 49c7c2d2c..d5d640d1f 100644
--- a/packages/ui/src/components/sheet/components/sheet-header.native.tsx
+++ b/packages/ui/src/components/sheet/components/sheet-header.native.tsx
@@ -20,7 +20,7 @@ export function SheetHeader({ title, icon, onPressSupport }: SheetHeaderProps) {
         </Box>
       </Box>
       <Box alignItems="flex-end" flex={1}>
-        <TouchableOpacity onPress={onPressSupport} zIndex={10}>
+        <TouchableOpacity onPress={onPressSupport} zIndex="10">
           <QuestionCircleIcon variant="small" />
         </TouchableOpacity>
       </Box>
diff --git a/packages/ui/src/theme-native/theme.tsx b/packages/ui/src/theme-native/theme.tsx
index 789a2a4a3..23690dc00 100644
--- a/packages/ui/src/theme-native/theme.tsx
+++ b/packages/ui/src/theme-native/theme.tsx
@@ -2,7 +2,7 @@ import { ColorSchemeName } from 'react-native';
 
 import { ThemeProvider as ThemeProviderRestyle, createTheme } from '@shopify/restyle';
 
-import { colorThemes, getMobileTextVariants } from '@leather.io/tokens';
+import { colorThemes, getMobileTextVariants, zIndices } from '@leather.io/tokens';
 
 const textVariants = getMobileTextVariants();
 
@@ -27,8 +27,7 @@ export function generateTheme(colorScheme: ColorSchemeName) {
       round: 9999,
     },
     textVariants,
-    // Temporary workaround for type errors. TODO: Add a zIndex scale.
-    zIndices: undefined,
+    zIndices: zIndices,
     breakpoints: {},
   });
 }