diff --git a/.eslintrc.js b/.eslintrc.js
index 49c75eae427..32d1c18ba01 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,7 +21,7 @@ module.exports = {
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
   ],
-  ignorePatterns: ['./leaf-styles'],
+  ignorePatterns: ['./leather-styles'],
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'deprecation'],
   rules: {
     // This rule helps highlight areas of the code that use deprecated
@@ -100,7 +100,7 @@ module.exports = {
               {
                 name: '@radix-ui/themes',
                 importNames: ['Flex'],
-                message: 'Layout components should be imported from leaf-styles/jsx',
+                message: 'Layout components should be imported from leather-styles/jsx',
               },
             ],
           },
diff --git a/.gitignore b/.gitignore
index d3142f98ebc..8604e8ebf92 100755
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,6 @@ trace*
 /test-results/
 /playwright-report/
 /playwright/.cache/
-leaf-styles
+leather-styles
 .netlify
 ./.vscode/settings.json
diff --git a/package.json b/package.json
index 63bb11cae8c..a0a37f2dc29 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "lint:prettier": "prettier --check \"{src,tests,tests-legacy}/**/*.{ts,tsx}\" \"*.{js,json}\"",
     "lint:prettier:fix": "prettier --write \"{src,tests,tests-legacy}/**/*.{ts,tsx}\" *.js",
-    "lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=leaf-styles",
+    "lint:unused-exports": "ts-unused-exports tsconfig.json --ignoreFiles=leather-styles",
     "lint:remote-wallet-config": "npx ajv-cli validate -s config/wallet-config.schema.json -d config/wallet-config.json",
     "lint:deps": "dependency-cruise  --config .dependency-cruiser.js \"src/**/*.{ts,tsx}\"",
     "prod:ext": "yarn build",
diff --git a/panda.config.ts b/panda.config.ts
index 9d83b70ebdd..0bd672e3ca8 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -34,7 +34,7 @@ export default defineConfig({
       recipes: { button: buttonRecipe },
     },
   },
-  outdir: 'leaf-styles',
+  outdir: 'leather-styles',
   outExtension: 'js',
   minify: true,
 });
diff --git a/src/app/common/hooks/use-media-query.ts b/src/app/common/hooks/use-media-query.ts
index 538c77dc7ab..1d9249726cc 100644
--- a/src/app/common/hooks/use-media-query.ts
+++ b/src/app/common/hooks/use-media-query.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { BreakpointToken, token } from 'leaf-styles/tokens';
+import { BreakpointToken, token } from 'leather-styles/tokens';
 
 function useMediaQuery(query: string) {
   const [matches, setMatches] = useState(false);
diff --git a/src/app/components/account-total-balance.tsx b/src/app/components/account-total-balance.tsx
index ef9fa718be8..4dfb1a5622f 100644
--- a/src/app/components/account-total-balance.tsx
+++ b/src/app/components/account-total-balance.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
 
diff --git a/src/app/components/account/account-list-item-layout.tsx b/src/app/components/account/account-list-item-layout.tsx
index b2e36c13403..69d20b5d662 100644
--- a/src/app/components/account/account-list-item-layout.tsx
+++ b/src/app/components/account/account-list-item-layout.tsx
@@ -1,7 +1,7 @@
 import { Flex, Spinner, Stack, StackProps, color, useMediaQuery } from '@stacks/ui';
 import { truncateMiddle } from '@stacks/ui-utils';
 import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { useConfigBitcoinEnabled } from '@app/query/common/remote-config/remote-config.query';
 
diff --git a/src/app/components/account/account-name.tsx b/src/app/components/account/account-name.tsx
index 0b7011baddd..5ae67b4a2bd 100644
--- a/src/app/components/account/account-name.tsx
+++ b/src/app/components/account/account-name.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { BoxProps } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
diff --git a/src/app/components/address-displayer/address-displayer.layout.tsx b/src/app/components/address-displayer/address-displayer.layout.tsx
index 4be1888e991..0690efec359 100644
--- a/src/app/components/address-displayer/address-displayer.layout.tsx
+++ b/src/app/components/address-displayer/address-displayer.layout.tsx
@@ -1,4 +1,4 @@
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 interface AddressDisplayerLayoutProps {
   isEven: boolean;
diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx
index 522da388a06..596bf7cbab2 100644
--- a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx
+++ b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx
@@ -3,7 +3,7 @@ import { Dispatch, SetStateAction, useCallback, useRef } from 'react';
 import { Link } from '@radix-ui/themes';
 import { Stack } from '@stacks/ui';
 import { Form, Formik } from 'formik';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 import * as yup from 'yup';
 
 import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model';
diff --git a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
index 87ce48b02e2..b789f4c3680 100644
--- a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
+++ b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, Text, color, transition } from '@stacks/ui';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 interface FeesListItemProps {
   arrivesIn: string;
diff --git a/src/app/components/button/button.tsx b/src/app/components/button/button.tsx
index 33ce9bff96f..80b5945eb97 100644
--- a/src/app/components/button/button.tsx
+++ b/src/app/components/button/button.tsx
@@ -1,5 +1,5 @@
-import { styled } from 'leaf-styles/jsx';
-import { type ButtonVariantProps, button as buttonRecipe } from 'leaf-styles/recipes';
+import { styled } from 'leather-styles/jsx';
+import { type ButtonVariantProps, button as buttonRecipe } from 'leather-styles/recipes';
 
 const StyledButton = styled('button');
 
diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
index c6d96d6c4c7..7801397c1cd 100644
--- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
@@ -1,6 +1,6 @@
 import { BoxProps, Flex } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import type { Money } from '@shared/models/money.model';
 
diff --git a/src/app/components/crypto-assets/components/asset-caption.tsx b/src/app/components/crypto-assets/components/asset-caption.tsx
index dd779cb2dc8..224c29ed36b 100644
--- a/src/app/components/crypto-assets/components/asset-caption.tsx
+++ b/src/app/components/crypto-assets/components/asset-caption.tsx
@@ -1,7 +1,7 @@
 import { FiInfo } from 'react-icons/fi';
 
 import { Box, Flex, Stack, Tooltip, color } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 interface AssetCaptionProps {
   caption: string;
diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
index 94ad22a7f7a..eda54fc9d90 100644
--- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -2,7 +2,7 @@ import { Flex, StackProps } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
 import { truncateMiddle } from '@stacks/ui-utils';
 import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { CryptoCurrencies } from '@shared/models/currencies.model';
 import { Money } from '@shared/models/money.model';
diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
index ae3f774618e..c94b1a1280e 100644
--- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
@@ -1,6 +1,6 @@
 import { BoxProps } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
-import { Flex, styled } from 'leaf-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import type { Money } from '@shared/models/money.model';
 
diff --git a/src/app/components/disclaimer.tsx b/src/app/components/disclaimer.tsx
index 8270b139ccb..4debf7747a7 100644
--- a/src/app/components/disclaimer.tsx
+++ b/src/app/components/disclaimer.tsx
@@ -1,4 +1,4 @@
-import { Box, BoxProps, styled } from 'leaf-styles/jsx';
+import { Box, BoxProps, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 
diff --git a/src/app/components/drawer/base-drawer.tsx b/src/app/components/drawer/base-drawer.tsx
index ed8a80d3212..39d003ab588 100644
--- a/src/app/components/drawer/base-drawer.tsx
+++ b/src/app/components/drawer/base-drawer.tsx
@@ -2,8 +2,8 @@ import { ReactNode, Suspense, memo, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Box, Flex, FlexProps, transition, useEventListener } from '@stacks/ui';
-import { css } from 'leaf-styles/css';
-import { token } from 'leaf-styles/tokens';
+import { css } from 'leather-styles/css';
+import { token } from 'leather-styles/tokens';
 
 import { noop } from '@shared/utils';
 
diff --git a/src/app/components/drawer/components/drawer-header.tsx b/src/app/components/drawer/components/drawer-header.tsx
index 36624985fb7..b36ddf4df06 100644
--- a/src/app/components/drawer/components/drawer-header.tsx
+++ b/src/app/components/drawer/components/drawer-header.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 import { useHover } from 'use-events';
 
 import { ArrowLeftIcon } from '@app/components/icons/arrow-left-icon';
diff --git a/src/app/components/drawer/components/header-action-button.tsx b/src/app/components/drawer/components/header-action-button.tsx
index df45ce32b9b..654e7b8f69f 100644
--- a/src/app/components/drawer/components/header-action-button.tsx
+++ b/src/app/components/drawer/components/header-action-button.tsx
@@ -1,6 +1,6 @@
 import { Box, Grid, transition } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 interface HeaderActionButtonProps {
   icon?: React.JSX.Element;
diff --git a/src/app/components/edit-nonce-button.tsx b/src/app/components/edit-nonce-button.tsx
index e258d31d260..0b2d1a63461 100644
--- a/src/app/components/edit-nonce-button.tsx
+++ b/src/app/components/edit-nonce-button.tsx
@@ -1,5 +1,5 @@
 import { BoxProps } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { Caption } from '@app/components/typography';
 
diff --git a/src/app/components/generic-error/generic-error.layout.tsx b/src/app/components/generic-error/generic-error.layout.tsx
index edcab05ca68..d07d7535589 100644
--- a/src/app/components/generic-error/generic-error.layout.tsx
+++ b/src/app/components/generic-error/generic-error.layout.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import GenericError from '@assets/images/generic-error.png';
 import { Box, Text, color } from '@stacks/ui';
-import { Flex, FlexProps, HStack, styled } from 'leaf-styles/jsx';
+import { Flex, FlexProps, HStack, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 
diff --git a/src/app/components/global-styles/global-styles.tsx b/src/app/components/global-styles/global-styles.tsx
index 5c203162c17..7e9cabef8b9 100644
--- a/src/app/components/global-styles/global-styles.tsx
+++ b/src/app/components/global-styles/global-styles.tsx
@@ -3,7 +3,7 @@ import { memo } from 'react';
 import { Global, css } from '@emotion/react';
 import { radixBaseCSS } from '@radix-ui/themes/styles.css';
 import { CSSReset } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { fullPageStyles } from './full-page-styles';
 import { popupCenterStyles } from './popup-center-styles';
diff --git a/src/app/components/global-styles/hide-scrollbar.tsx b/src/app/components/global-styles/hide-scrollbar.tsx
index c0614ad4740..833d3f80bfb 100644
--- a/src/app/components/global-styles/hide-scrollbar.tsx
+++ b/src/app/components/global-styles/hide-scrollbar.tsx
@@ -1,4 +1,4 @@
-import { css } from 'leaf-styles/css';
+import { css } from 'leather-styles/css';
 
 export const hideScrollbarClassName = css({
   '&::-webkit-scrollbar': {
diff --git a/src/app/components/global-styles/radix-styles.tsx b/src/app/components/global-styles/radix-styles.tsx
index a78aefba13c..bbe7f4d0d5b 100644
--- a/src/app/components/global-styles/radix-styles.tsx
+++ b/src/app/components/global-styles/radix-styles.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 export const radixStyles = css`
   .radix-themes {
diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
index bd474fd1a8f..c826ddb7eee 100644
--- a/src/app/components/header.tsx
+++ b/src/app/components/header.tsx
@@ -5,7 +5,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Box, Flex, FlexProps, IconButton, Stack, Text, useMediaQuery } from '@stacks/ui';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { SettingsMenuSelectors } from '@tests/selectors/settings.selectors';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { BRANCH_NAME, COMMIT_SHA } from '@shared/environment';
 import { RouteUrls } from '@shared/route-urls';
diff --git a/src/app/components/hiro-wallet-logo.tsx b/src/app/components/hiro-wallet-logo.tsx
index 7e91d308e48..26c8b3879ef 100644
--- a/src/app/components/hiro-wallet-logo.tsx
+++ b/src/app/components/hiro-wallet-logo.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { Stack, StackProps, color } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { LeatherIcon } from './icons/leather-icon';
 
diff --git a/src/app/components/icons/leather-lettermark.tsx b/src/app/components/icons/leather-lettermark.tsx
index 9e28f9c4baa..8d3a5f40ca3 100644
--- a/src/app/components/icons/leather-lettermark.tsx
+++ b/src/app/components/icons/leather-lettermark.tsx
@@ -1,4 +1,4 @@
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 export function LeatherLettermark(props: React.ComponentProps<typeof styled.svg>) {
   return (
diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx
index f80fefe2db5..8146bc58744 100644
--- a/src/app/components/info-card/info-card.tsx
+++ b/src/app/components/info-card/info-card.tsx
@@ -1,6 +1,6 @@
 import { Box, Flex, FlexProps, Stack, StackProps } from '@stacks/ui';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { isString } from '@shared/utils';
 
diff --git a/src/app/components/info-label.tsx b/src/app/components/info-label.tsx
index 3838526b843..e757df1b164 100644
--- a/src/app/components/info-label.tsx
+++ b/src/app/components/info-label.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { Flex, FlexProps, Stack, styled } from 'leaf-styles/jsx';
+import { Flex, FlexProps, Stack, styled } from 'leather-styles/jsx';
 
 interface InfoLabelProps extends FlexProps {
   children: ReactNode | undefined;
diff --git a/src/app/components/item-hover.tsx b/src/app/components/item-hover.tsx
index 495c34296df..536234e12ed 100644
--- a/src/app/components/item-hover.tsx
+++ b/src/app/components/item-hover.tsx
@@ -1,5 +1,5 @@
 import { Box, BoxProps, transition } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 import { useFocus, useHover } from 'use-events';
 
 function ItemHover({
diff --git a/src/app/components/json.tsx b/src/app/components/json.tsx
index 61a490cb6a6..f53b9b9ac10 100644
--- a/src/app/components/json.tsx
+++ b/src/app/components/json.tsx
@@ -1,6 +1,6 @@
 import { bytesToHex } from '@stacks/common';
 import { Box } from '@stacks/ui';
-import { css } from 'leaf-styles/css';
+import { css } from 'leather-styles/css';
 
 import { isBigInt, isTypedArray } from '@shared/utils';
 
diff --git a/src/app/components/modal-header.tsx b/src/app/components/modal-header.tsx
index 76d7fb22ceb..dbab370c6ca 100644
--- a/src/app/components/modal-header.tsx
+++ b/src/app/components/modal-header.tsx
@@ -2,8 +2,8 @@ import { FiArrowLeft, FiX } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 
 import { Box, IconButton } from '@stacks/ui';
-import { Flex, styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { Flex, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { RouteUrls } from '@shared/route-urls';
 
diff --git a/src/app/components/network-mode-badge.tsx b/src/app/components/network-mode-badge.tsx
index cdfa276f5bc..549af5392d5 100644
--- a/src/app/components/network-mode-badge.tsx
+++ b/src/app/components/network-mode-badge.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { ChainID } from '@stacks/transactions';
 import { Flex, FlexProps, Text } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { RouteUrls } from '@shared/route-urls';
 
diff --git a/src/app/components/no-fees-warning-row.tsx b/src/app/components/no-fees-warning-row.tsx
index ca122825d0e..c538c8152e1 100644
--- a/src/app/components/no-fees-warning-row.tsx
+++ b/src/app/components/no-fees-warning-row.tsx
@@ -1,5 +1,5 @@
 import { ChainID } from '@stacks/transactions';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { whenStacksChainId } from '@app/common/utils';
 import { SpaceBetween } from '@app/components/layout/space-between';
diff --git a/src/app/components/pill.tsx b/src/app/components/pill.tsx
index 2d7d134a425..d64ce7121f1 100644
--- a/src/app/components/pill.tsx
+++ b/src/app/components/pill.tsx
@@ -1,4 +1,4 @@
-import { Box, BoxProps, styled } from 'leaf-styles/jsx';
+import { Box, BoxProps, styled } from 'leather-styles/jsx';
 
 import { Tooltip } from './tooltip';
 
diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
index fb4fef975a7..1f214c5e4c3 100644
--- a/src/app/components/request-password.tsx
+++ b/src/app/components/request-password.tsx
@@ -2,8 +2,8 @@ import { FormEvent, useCallback, useState } from 'react';
 
 import { Box, Input, Stack } from '@stacks/ui';
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
diff --git a/src/app/components/requester-flag.tsx b/src/app/components/requester-flag.tsx
index a7d0ef3cff7..38e391a3730 100644
--- a/src/app/components/requester-flag.tsx
+++ b/src/app/components/requester-flag.tsx
@@ -1,4 +1,4 @@
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { Favicon } from './favicon';
 import { Flag } from './layout/flag';
diff --git a/src/app/components/tabs.tsx b/src/app/components/tabs.tsx
index 1f9da16169f..29a40472d9a 100644
--- a/src/app/components/tabs.tsx
+++ b/src/app/components/tabs.tsx
@@ -1,5 +1,5 @@
 import { Box as RBox, Tabs as RTabs } from '@radix-ui/themes';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { capitalize } from '@app/common/utils';
 
diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx
index 6446117305d..31b6fff1586 100644
--- a/src/app/components/text-input-field.tsx
+++ b/src/app/components/text-input-field.tsx
@@ -3,8 +3,8 @@ import { Ref, useRef } from 'react';
 import { Box, Flex, FlexProps, Input, Text, color } from '@stacks/ui';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { useField } from 'formik';
-import { css } from 'leaf-styles/css';
-import { token } from 'leaf-styles/tokens';
+import { css } from 'leather-styles/css';
+import { token } from 'leather-styles/tokens';
 
 import { useShowFieldError } from '@app/common/form-utils';
 import { capitalize } from '@app/common/utils';
diff --git a/src/app/components/warning-label.tsx b/src/app/components/warning-label.tsx
index b767e64f739..1e726da35d0 100644
--- a/src/app/components/warning-label.tsx
+++ b/src/app/components/warning-label.tsx
@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 
 import { Box, BoxProps } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { AlertIcon } from './icons/alert-icon';
 import { Flag } from './layout/flag';
diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
index 7a175e4c67e..0d63c0a222c 100644
--- a/src/app/features/add-network/add-network.tsx
+++ b/src/app/features/add-network/add-network.tsx
@@ -5,7 +5,7 @@ import { ChainID } from '@stacks/transactions';
 import { Input, Stack } from '@stacks/ui';
 import { NetworkSelectors } from '@tests-legacy/integration/network.selectors';
 import { Formik } from 'formik';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { DefaultNetworkConfigurations } from '@shared/constants';
 import { RouteUrls } from '@shared/route-urls';
diff --git a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
index 7c7016020eb..b2b9e5593ff 100644
--- a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
+++ b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { Box, Stack } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model';
 import { Money } from '@shared/models/money.model';
diff --git a/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx b/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx
index f75d437c7fe..c4e275c8718 100644
--- a/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx
+++ b/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx
@@ -1,4 +1,4 @@
-import { Flex } from 'leaf-styles/jsx';
+import { Flex } from 'leather-styles/jsx';
 
 import { LoadingSpinner } from '@app/components/loading-spinner';
 
diff --git a/src/app/features/bitcoin-choose-fee/components/choose-fee-subtitle.tsx b/src/app/features/bitcoin-choose-fee/components/choose-fee-subtitle.tsx
index 82abb396997..83f1db18e15 100644
--- a/src/app/features/bitcoin-choose-fee/components/choose-fee-subtitle.tsx
+++ b/src/app/features/bitcoin-choose-fee/components/choose-fee-subtitle.tsx
@@ -1,4 +1,4 @@
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 export function ChooseFeeSubtitle({ isSendingMax }: { isSendingMax: boolean }) {
   const subtitle = isSendingMax ? (
diff --git a/src/app/features/collectibles/components/add-collectible.tsx b/src/app/features/collectibles/components/add-collectible.tsx
index 655f10b1ec4..d4124706180 100644
--- a/src/app/features/collectibles/components/add-collectible.tsx
+++ b/src/app/features/collectibles/components/add-collectible.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import { Box } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { RouteUrls } from '@shared/route-urls';
 
diff --git a/src/app/features/collectibles/components/collectible-item.layout.tsx b/src/app/features/collectibles/components/collectible-item.layout.tsx
index 3430d8075a2..c1c00a076bc 100644
--- a/src/app/features/collectibles/components/collectible-item.layout.tsx
+++ b/src/app/features/collectibles/components/collectible-item.layout.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { Box, Button, Stack, Text } from '@stacks/ui';
 import type { BoxProps } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 import { useHover } from 'use-events';
 
 import { figmaTheme } from '@app/common/utils/figma-theme';
diff --git a/src/app/features/current-account/current-account-name.tsx b/src/app/features/current-account/current-account-name.tsx
index 5fb52c42b5b..7123cf4658f 100644
--- a/src/app/features/current-account/current-account-name.tsx
+++ b/src/app/features/current-account/current-account-name.tsx
@@ -2,7 +2,7 @@ import { Suspense, memo } from 'react';
 
 import { memoWithAs } from '@stacks/ui-core';
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
-import { Box, BoxProps, styled } from 'leaf-styles/jsx';
+import { Box, BoxProps, styled } from 'leather-styles/jsx';
 
 import { HasChildren } from '@app/common/has-children';
 import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names';
diff --git a/src/app/features/current-account/popup-header.tsx b/src/app/features/current-account/popup-header.tsx
index fb8e812a21a..aba44a86d92 100644
--- a/src/app/features/current-account/popup-header.tsx
+++ b/src/app/features/current-account/popup-header.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 
 import { Box, Stack, color } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { BtcBalance } from '@app/components/balance-btc';
 import { StxBalance } from '@app/components/balance-stx';
diff --git a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx
index 072cc256203..a9ee2479a95 100644
--- a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx
+++ b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx
@@ -2,7 +2,7 @@ import { FormEvent, memo } from 'react';
 
 import { Input } from '@stacks/ui';
 import { useField } from 'formik';
-import { Stack, StackProps, styled } from 'leaf-styles/jsx';
+import { Stack, StackProps, styled } from 'leather-styles/jsx';
 
 import { ErrorLabel } from '@app/components/error-label';
 
diff --git a/src/app/features/edit-nonce-drawer/components/edit-nonce-form.tsx b/src/app/features/edit-nonce-drawer/components/edit-nonce-form.tsx
index a1b16ec4bd8..37a5d5b7532 100644
--- a/src/app/features/edit-nonce-drawer/components/edit-nonce-form.tsx
+++ b/src/app/features/edit-nonce-drawer/components/edit-nonce-form.tsx
@@ -1,4 +1,4 @@
-import { HStack } from 'leaf-styles/jsx';
+import { HStack } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 
diff --git a/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx b/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx
index c4197867938..845934bcd39 100644
--- a/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx
+++ b/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useFormikContext } from 'formik';
-import { Stack, styled } from 'leaf-styles/jsx';
+import { Stack, styled } from 'leather-styles/jsx';
 
 import { StacksSendFormValues, StacksTransactionFormValues } from '@shared/models/form.model';
 
diff --git a/src/app/features/leather-intro-dialog/leather-intro-steps.tsx b/src/app/features/leather-intro-dialog/leather-intro-steps.tsx
index fb21c2625f9..b37c0f87163 100644
--- a/src/app/features/leather-intro-dialog/leather-intro-steps.tsx
+++ b/src/app/features/leather-intro-dialog/leather-intro-steps.tsx
@@ -3,7 +3,7 @@ import Confetti from 'react-dom-confetti';
 
 import { Dialog } from '@radix-ui/themes';
 import { Inset } from '@radix-ui/themes';
-import { Box, Flex, Stack, styled } from 'leaf-styles/jsx';
+import { Box, Flex, Stack, styled } from 'leather-styles/jsx';
 
 import { HasChildren } from '@app/common/has-children';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
diff --git a/src/app/features/message-signer/hash-drawer.tsx b/src/app/features/message-signer/hash-drawer.tsx
index b64bf967e42..2eeabe42fc9 100644
--- a/src/app/features/message-signer/hash-drawer.tsx
+++ b/src/app/features/message-signer/hash-drawer.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
 import { Flex } from '@stacks/ui';
-import { Box, styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { Box, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { ChevronDownIcon } from '@app/components/icons/chevron-down-icon';
 import { ChevronUpIcon } from '@app/components/icons/chevron-up-icon';
diff --git a/src/app/features/message-signer/message-preview-box.tsx b/src/app/features/message-signer/message-preview-box.tsx
index 284ae69e799..efa0ffe7409 100644
--- a/src/app/features/message-signer/message-preview-box.tsx
+++ b/src/app/features/message-signer/message-preview-box.tsx
@@ -1,5 +1,5 @@
 import { Stack, color } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { HashDrawer } from './hash-drawer';
 
diff --git a/src/app/features/message-signer/message-signing-header.tsx b/src/app/features/message-signer/message-signing-header.tsx
index 6ff737e51d8..09c91f0e4df 100644
--- a/src/app/features/message-signer/message-signing-header.tsx
+++ b/src/app/features/message-signer/message-signing-header.tsx
@@ -1,4 +1,4 @@
-import { Stack, styled } from 'leaf-styles/jsx';
+import { Stack, styled } from 'leather-styles/jsx';
 
 import { addPortSuffix, getUrlHostname } from '@app/common/utils';
 import { Favicon } from '@app/components/favicon';
diff --git a/src/app/features/message-signer/message-signing-request.layout.tsx b/src/app/features/message-signer/message-signing-request.layout.tsx
index 928d55d3a6e..6c4a300e65f 100644
--- a/src/app/features/message-signer/message-signing-request.layout.tsx
+++ b/src/app/features/message-signer/message-signing-request.layout.tsx
@@ -1,4 +1,4 @@
-import { Stack } from 'leaf-styles/jsx';
+import { Stack } from 'leather-styles/jsx';
 
 interface MessageSigningRequestLayoutProps {
   children: React.ReactNode;
diff --git a/src/app/features/message-signer/stacks-sign-message-action.tsx b/src/app/features/message-signer/stacks-sign-message-action.tsx
index fa9baa41a07..034bf320af7 100644
--- a/src/app/features/message-signer/stacks-sign-message-action.tsx
+++ b/src/app/features/message-signer/stacks-sign-message-action.tsx
@@ -1,4 +1,4 @@
-import { HStack } from 'leaf-styles/jsx';
+import { HStack } from 'leather-styles/jsx';
 
 import { useWalletType } from '@app/common/use-wallet-type';
 import { LeatherButton } from '@app/components/button/button';
diff --git a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-list/components/psbt-input-list.layout.tsx b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-list/components/psbt-input-list.layout.tsx
index c5c6798c2d7..b8101f53f71 100644
--- a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-list/components/psbt-input-list.layout.tsx
+++ b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-list/components/psbt-input-list.layout.tsx
@@ -1,4 +1,4 @@
-import { Box } from 'leaf-styles/jsx';
+import { Box } from 'leather-styles/jsx';
 
 import { HasChildren } from '@app/common/has-children';
 
diff --git a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx
index ecdf2e78b7a..260e5704b7e 100644
--- a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx
+++ b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx
@@ -1,5 +1,5 @@
 import { useClipboard } from '@stacks/ui';
-import { Box, Flex, styled } from 'leaf-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { LeatherButton } from '@app/components/button/button';
diff --git a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-output-list/components/psbt-output-list.layout.tsx b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-output-list/components/psbt-output-list.layout.tsx
index 47286dc61b2..c0fce6551ab 100644
--- a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-output-list/components/psbt-output-list.layout.tsx
+++ b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-output-list/components/psbt-output-list.layout.tsx
@@ -1,4 +1,4 @@
-import { Box } from 'leaf-styles/jsx';
+import { Box } from 'leather-styles/jsx';
 
 import { HasChildren } from '@app/common/has-children';
 
diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx
index 92449a7ae20..6441c0f41d1 100644
--- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx
+++ b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx
@@ -1,5 +1,5 @@
 import { useClipboard } from '@stacks/ui';
-import { Box, HStack, styled } from 'leaf-styles/jsx';
+import { Box, HStack, styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 import { BtcIcon } from '@app/components/icons/btc-icon';
diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx
index 10e9dfa9158..0289bda378b 100644
--- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx
+++ b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx
@@ -1,5 +1,5 @@
 import { color } from '@stacks/ui-utils';
-import { Box } from 'leaf-styles/jsx';
+import { Box } from 'leather-styles/jsx';
 
 import { Hr } from '@app/components/hr';
 import { usePsbtSignerContext } from '@app/features/psbt-signer/psbt-signer.context';
diff --git a/src/app/features/psbt-signer/components/psbt-request-actions.tsx b/src/app/features/psbt-signer/components/psbt-request-actions.tsx
index 261564a208e..5c127793a72 100644
--- a/src/app/features/psbt-signer/components/psbt-request-actions.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-actions.tsx
@@ -1,5 +1,5 @@
 import { Box, color } from '@stacks/ui';
-import { HStack } from 'leaf-styles/jsx';
+import { HStack } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 
diff --git a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
index 8aac0260b5e..53c7f15db36 100644
--- a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx
@@ -1,6 +1,6 @@
 import { Box, Stack } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { LockIcon } from '@app/components/icons/lock-icon';
 import { UnlockIcon } from '@app/components/icons/unlock-icon';
diff --git a/src/app/features/psbt-signer/components/psbt-request-details-section-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-section-header.tsx
index 4c05281ec89..34dab15284e 100644
--- a/src/app/features/psbt-signer/components/psbt-request-details-section-header.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-details-section-header.tsx
@@ -1,4 +1,4 @@
-import { HStack, styled } from 'leaf-styles/jsx';
+import { HStack, styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 import { ArrowUpIcon } from '@app/components/icons/arrow-up-icon';
diff --git a/src/app/features/psbt-signer/components/psbt-request-details.layout.tsx b/src/app/features/psbt-signer/components/psbt-request-details.layout.tsx
index 4b119232025..a491b77955d 100644
--- a/src/app/features/psbt-signer/components/psbt-request-details.layout.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-details.layout.tsx
@@ -1,4 +1,4 @@
-import { Stack } from 'leaf-styles/jsx';
+import { Stack } from 'leather-styles/jsx';
 
 import { HasChildren } from '@app/common/has-children';
 
diff --git a/src/app/features/psbt-signer/components/psbt-request-fee.tsx b/src/app/features/psbt-signer/components/psbt-request-fee.tsx
index c622102e59f..ef2f22e43b5 100644
--- a/src/app/features/psbt-signer/components/psbt-request-fee.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-fee.tsx
@@ -1,4 +1,4 @@
-import { Stack, styled } from 'leaf-styles/jsx';
+import { Stack, styled } from 'leather-styles/jsx';
 
 import { Money } from '@shared/models/money.model';
 
diff --git a/src/app/features/psbt-signer/components/psbt-request-header.tsx b/src/app/features/psbt-signer/components/psbt-request-header.tsx
index 490f5ecbf8d..4b9151e078f 100644
--- a/src/app/features/psbt-signer/components/psbt-request-header.tsx
+++ b/src/app/features/psbt-signer/components/psbt-request-header.tsx
@@ -1,4 +1,4 @@
-import { Flex, styled } from 'leaf-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { Favicon } from '@app/components/favicon';
 import { Flag } from '@app/components/layout/flag';
diff --git a/src/app/features/secret-key-displayer/components/secret-key-word.tsx b/src/app/features/secret-key-displayer/components/secret-key-word.tsx
index 69f4e3fc9f0..00554c2e21a 100644
--- a/src/app/features/secret-key-displayer/components/secret-key-word.tsx
+++ b/src/app/features/secret-key-displayer/components/secret-key-word.tsx
@@ -1,5 +1,5 @@
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { Flex, FlexProps, styled } from 'leaf-styles/jsx';
+import { Flex, FlexProps, styled } from 'leather-styles/jsx';
 
 interface SecretKeyWordProps extends FlexProps {
   word: string;
diff --git a/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx b/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx
index 30cb557d1ed..8b39bfff276 100644
--- a/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx
+++ b/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
-import { Box, Flex, Stack, styled } from 'leaf-styles/jsx';
+import { Box, Flex, Stack, styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 
diff --git a/src/app/features/settings-dropdown/components/settings-menu-item.tsx b/src/app/features/settings-dropdown/components/settings-menu-item.tsx
index b91a4300bcc..8f1f9215d70 100644
--- a/src/app/features/settings-dropdown/components/settings-menu-item.tsx
+++ b/src/app/features/settings-dropdown/components/settings-menu-item.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { BoxProps, Text, color } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 export const SettingsMenuItem = memo((props: BoxProps) => {
   const { onClick, children, ...rest } = props;
diff --git a/src/app/features/switch-account-drawer/components/create-account-action.tsx b/src/app/features/switch-account-drawer/components/create-account-action.tsx
index 9e16500dce3..3d8ca2e192a 100644
--- a/src/app/features/switch-account-drawer/components/create-account-action.tsx
+++ b/src/app/features/switch-account-drawer/components/create-account-action.tsx
@@ -1,4 +1,4 @@
-import { Flex } from 'leaf-styles/jsx';
+import { Flex } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 
diff --git a/src/app/features/theme-drawer/theme-list-item-layout.tsx b/src/app/features/theme-drawer/theme-list-item-layout.tsx
index 04168c376f1..27529c15e5f 100644
--- a/src/app/features/theme-drawer/theme-list-item-layout.tsx
+++ b/src/app/features/theme-drawer/theme-list-item-layout.tsx
@@ -1,5 +1,5 @@
 import { Box, BoxProps, Flex } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { CheckmarkIcon } from '@app/components/icons/checkmark-icon';
 import { Title } from '@app/components/typography';
diff --git a/src/app/pages/choose-account/choose-account.tsx b/src/app/pages/choose-account/choose-account.tsx
index 89abaa46723..d0783287e1e 100644
--- a/src/app/pages/choose-account/choose-account.tsx
+++ b/src/app/pages/choose-account/choose-account.tsx
@@ -1,7 +1,7 @@
 import { memo, useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 
-import { Flex, Stack, styled } from 'leaf-styles/jsx';
+import { Flex, Stack, styled } from 'leather-styles/jsx';
 
 import { useCancelAuthRequest } from '@app/common/authentication/use-cancel-auth-request';
 import { useAppDetails } from '@app/common/hooks/auth/use-app-details';
diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
index 93e5c6fd49e..4118e48cee4 100644
--- a/src/app/pages/choose-account/components/accounts.tsx
+++ b/src/app/pages/choose-account/components/accounts.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { Virtuoso } from 'react-virtuoso';
 
 import { Box, BoxProps, FlexProps, Stack, Text } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { RouteUrls } from '@shared/route-urls';
 
diff --git a/src/app/pages/fund/components/fund-account-tile.tsx b/src/app/pages/fund/components/fund-account-tile.tsx
index 1f894eea42f..79621af6c01 100644
--- a/src/app/pages/fund/components/fund-account-tile.tsx
+++ b/src/app/pages/fund/components/fund-account-tile.tsx
@@ -1,7 +1,7 @@
 import { Box, Stack, color, transition } from '@stacks/ui';
 import { FundPageSelectors } from '@tests-legacy/page-objects/fund.selectors';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 interface FundAccountTileProps {
   attributes?: React.JSX.Element;
diff --git a/src/app/pages/fund/fund.layout.tsx b/src/app/pages/fund/fund.layout.tsx
index 616c044fa51..23f5eb681ab 100644
--- a/src/app/pages/fund/fund.layout.tsx
+++ b/src/app/pages/fund/fund.layout.tsx
@@ -1,6 +1,6 @@
 import { Flex, Stack, useMediaQuery } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { PageTitle } from '@app/components/page-title';
 import { Text } from '@app/components/typography';
diff --git a/src/app/pages/home/components/account-actions.tsx b/src/app/pages/home/components/account-actions.tsx
index c611f5ec70c..ce69f840895 100644
--- a/src/app/pages/home/components/account-actions.tsx
+++ b/src/app/pages/home/components/account-actions.tsx
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { HomePageSelectorsLegacy } from '@tests-legacy/page-objects/home.selectors';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
-import { Flex, FlexProps } from 'leaf-styles/jsx';
+import { Flex, FlexProps } from 'leather-styles/jsx';
 
 import { RouteUrls } from '@shared/route-urls';
 
diff --git a/src/app/pages/home/components/account-info-card.tsx b/src/app/pages/home/components/account-info-card.tsx
index ad7a054e7a5..a925b707b62 100644
--- a/src/app/pages/home/components/account-info-card.tsx
+++ b/src/app/pages/home/components/account-info-card.tsx
@@ -1,6 +1,6 @@
 import { useMediaQuery } from '@stacks/ui';
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
-import { Box, Divider, Flex, styled } from 'leaf-styles/jsx';
+import { Box, Divider, Flex, styled } from 'leather-styles/jsx';
 
 import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
diff --git a/src/app/pages/home/components/action-button.tsx b/src/app/pages/home/components/action-button.tsx
index 38183894586..f14dc827d34 100644
--- a/src/app/pages/home/components/action-button.tsx
+++ b/src/app/pages/home/components/action-button.tsx
@@ -1,4 +1,4 @@
-import { Flex, styled } from 'leaf-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 
diff --git a/src/app/pages/home/components/home.layout.tsx b/src/app/pages/home/components/home.layout.tsx
index 3266d9446db..e66b919172a 100644
--- a/src/app/pages/home/components/home.layout.tsx
+++ b/src/app/pages/home/components/home.layout.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useMediaQuery } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
-import { Stack } from 'leaf-styles/jsx';
+import { Stack } from 'leather-styles/jsx';
 
 import { AccountInfoCard } from './account-info-card';
 
diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
index 5ade300f1be..ac43b3c1478 100644
--- a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
+++ b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
@@ -2,7 +2,7 @@ import { FiCheck } from 'react-icons/fi';
 
 import { Dialog } from '@radix-ui/themes';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { Box, Flex, HStack, Stack, styled } from 'leaf-styles/jsx';
+import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 import { LeatherIcon } from '@app/components/icons/leather-icon';
diff --git a/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.layout.tsx b/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.layout.tsx
index 96a336acba6..436accd6d96 100644
--- a/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.layout.tsx
+++ b/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.layout.tsx
@@ -1,6 +1,6 @@
 import { useMediaQuery } from '@stacks/ui';
-import { Box, Flex, Stack, styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { Box, Flex, Stack, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { BackUpSecretKeyActions } from './components/back-up-secret-key-actions';
 
diff --git a/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key-actions.tsx b/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key-actions.tsx
index 5cb4db6917b..7eb9190f324 100644
--- a/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key-actions.tsx
+++ b/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key-actions.tsx
@@ -2,7 +2,7 @@ import { FiEyeOff, FiLock, FiRotateCcw } from 'react-icons/fi';
 
 import { Box, Stack } from '@stacks/ui';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 
diff --git a/src/app/pages/onboarding/set-password/components/password-field.tsx b/src/app/pages/onboarding/set-password/components/password-field.tsx
index bf0ca67217e..4e222d31b4a 100644
--- a/src/app/pages/onboarding/set-password/components/password-field.tsx
+++ b/src/app/pages/onboarding/set-password/components/password-field.tsx
@@ -4,7 +4,7 @@ import { FiEye, FiEyeOff } from 'react-icons/fi';
 import { Box, Button, Flex, Input, color } from '@stacks/ui';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { useField } from 'formik';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { ValidatedPassword } from '@app/common/validation/validate-password';
 import { Caption } from '@app/components/typography';
diff --git a/src/app/pages/onboarding/set-password/set-password.tsx b/src/app/pages/onboarding/set-password/set-password.tsx
index 6417b2037d6..f435262b760 100644
--- a/src/app/pages/onboarding/set-password/set-password.tsx
+++ b/src/app/pages/onboarding/set-password/set-password.tsx
@@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom';
 
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { Form, Formik } from 'formik';
-import { Flex, Stack, styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { Flex, Stack, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 import { debounce } from 'ts-debounce';
 import * as yup from 'yup';
 
diff --git a/src/app/pages/onboarding/sign-in/sign-in.tsx b/src/app/pages/onboarding/sign-in/sign-in.tsx
index 6de3dcce6cf..6fa61ccec72 100644
--- a/src/app/pages/onboarding/sign-in/sign-in.tsx
+++ b/src/app/pages/onboarding/sign-in/sign-in.tsx
@@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom';
 
 import { Grid, Input } from '@stacks/ui';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { Box, Flex, Stack, styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { Box, Flex, Stack, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 import { useFocus } from 'use-events';
 
 import { RouteUrls } from '@shared/route-urls';
diff --git a/src/app/pages/onboarding/welcome/welcome.layout.tsx b/src/app/pages/onboarding/welcome/welcome.layout.tsx
index 6f3334632f2..9842895ae2e 100644
--- a/src/app/pages/onboarding/welcome/welcome.layout.tsx
+++ b/src/app/pages/onboarding/welcome/welcome.layout.tsx
@@ -1,5 +1,5 @@
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { Flex, styled } from 'leaf-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { LeatherButton } from '@app/components/button/button';
diff --git a/src/app/pages/receive/components/receive-btc-warning.tsx b/src/app/pages/receive/components/receive-btc-warning.tsx
index 5cb5b898838..fd5179ad537 100644
--- a/src/app/pages/receive/components/receive-btc-warning.tsx
+++ b/src/app/pages/receive/components/receive-btc-warning.tsx
@@ -1,4 +1,4 @@
-import { Flex, styled } from 'leaf-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 export function ReceiveBtcModalWarning({ message }: { message: string }) {
   return (
diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx
index 914ad9bfdd3..1a2a3d9ac42 100644
--- a/src/app/pages/receive/components/receive-item.tsx
+++ b/src/app/pages/receive/components/receive-item.tsx
@@ -1,5 +1,5 @@
 import { truncateMiddle } from '@stacks/ui-utils';
-import { Flex, HStack, Stack, styled } from 'leaf-styles/jsx';
+import { Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 import { CopyIcon } from '@app/components/icons/copy-icon';
diff --git a/src/app/pages/receive/components/receive-items.tsx b/src/app/pages/receive/components/receive-items.tsx
index 4b370445940..f9775e4442c 100644
--- a/src/app/pages/receive/components/receive-items.tsx
+++ b/src/app/pages/receive/components/receive-items.tsx
@@ -1,4 +1,4 @@
-import { Divider, Stack, styled } from 'leaf-styles/jsx';
+import { Divider, Stack, styled } from 'leather-styles/jsx';
 
 interface ReceiveItemListProps {
   children: React.ReactNode;
diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx
index a931e08a2da..9ed80ed1976 100644
--- a/src/app/pages/receive/components/receive-tokens.layout.tsx
+++ b/src/app/pages/receive/components/receive-tokens.layout.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
-import { Box, Flex, styled } from 'leaf-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { RouteUrls } from '@shared/route-urls';
 
diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx
index eb5027940c1..2e56ba1acc3 100644
--- a/src/app/pages/receive/receive-modal.tsx
+++ b/src/app/pages/receive/receive-modal.tsx
@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import { useClipboard } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
-import { Box, styled } from 'leaf-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { RouteUrls } from '@shared/route-urls';
diff --git a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
index 5c772bade1e..008f5f53220 100644
--- a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
+++ b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, styled } from 'leaf-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 import { LIcon } from '@app/components/icons/l-icon';
diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
index 7487bdd3698..cc9a5606cda 100644
--- a/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
+++ b/src/app/pages/rpc-send-transfer/components/send-transfer-details.tsx
@@ -1,6 +1,6 @@
 import { Stack, color } from '@stacks/ui';
 import { truncateMiddle } from '@stacks/ui-utils';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { SpaceBetween } from '@app/components/layout/space-between';
 
diff --git a/src/app/pages/rpc-send-transfer/components/send-transfer-header.tsx b/src/app/pages/rpc-send-transfer/components/send-transfer-header.tsx
index 37b99cfaf17..a9821b59145 100644
--- a/src/app/pages/rpc-send-transfer/components/send-transfer-header.tsx
+++ b/src/app/pages/rpc-send-transfer/components/send-transfer-header.tsx
@@ -1,5 +1,5 @@
 import { Flex } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { Favicon } from '@app/components/favicon';
 import { Flag } from '@app/components/layout/flag';
diff --git a/src/app/pages/select-network/components/add-network-button.tsx b/src/app/pages/select-network/components/add-network-button.tsx
index b340f80699b..1664af6f24a 100644
--- a/src/app/pages/select-network/components/add-network-button.tsx
+++ b/src/app/pages/select-network/components/add-network-button.tsx
@@ -1,6 +1,6 @@
 import { ButtonProps } from '@stacks/ui';
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
-import { Flex } from 'leaf-styles/jsx';
+import { Flex } from 'leather-styles/jsx';
 
 import { LeatherButton } from '@app/components/button/button';
 
diff --git a/src/app/pages/select-network/components/network-list-item.layout.tsx b/src/app/pages/select-network/components/network-list-item.layout.tsx
index 7893d3721e1..4b4470a8879 100644
--- a/src/app/pages/select-network/components/network-list-item.layout.tsx
+++ b/src/app/pages/select-network/components/network-list-item.layout.tsx
@@ -2,8 +2,8 @@ import { FiTrash2 } from 'react-icons/fi';
 
 import { Box, BoxProps, Button, Flex, Stack } from '@stacks/ui';
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { NetworkConfiguration } from '@shared/constants';
 
diff --git a/src/app/pages/send/choose-crypto-asset/components/choose-crypto-asset.layout.tsx b/src/app/pages/send/choose-crypto-asset/components/choose-crypto-asset.layout.tsx
index d556664740e..962ca9fcd25 100644
--- a/src/app/pages/send/choose-crypto-asset/components/choose-crypto-asset.layout.tsx
+++ b/src/app/pages/send/choose-crypto-asset/components/choose-crypto-asset.layout.tsx
@@ -1,5 +1,5 @@
 import { Flex, StackProps } from '@stacks/ui';
-import { Box, styled } from 'leaf-styles/jsx';
+import { Box, styled } from 'leather-styles/jsx';
 
 export function ChooseCryptoAssetLayout({ children }: StackProps) {
   return (
diff --git a/src/app/pages/send/send-container.tsx b/src/app/pages/send/send-container.tsx
index ede5367c2c6..90605fea69d 100644
--- a/src/app/pages/send/send-container.tsx
+++ b/src/app/pages/send/send-container.tsx
@@ -1,7 +1,7 @@
 import { Outlet } from 'react-router-dom';
 
 import { Flex } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { whenPageMode } from '@app/common/utils';
diff --git a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx
index 68da58b1fe4..7d7d3b0df50 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Flex, Input, Stack, Text, color } from '@stacks/ui';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { useField } from 'formik';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 import { STX_DECIMALS, TOKEN_NAME_LENGTH } from '@shared/constants';
 import { Money } from '@shared/models/money.model';
diff --git a/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx b/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx
index 810dfa155a0..cdaea427002 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@stacks/ui';
-import { Flex } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { Flex } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { Money } from '@shared/models/money.model';
 
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
index 3ec8432d4aa..585e75988bb 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx
@@ -1,7 +1,7 @@
 import { FiChevronDown } from 'react-icons/fi';
 
 import { Box, Text, color } from '@stacks/ui';
-import { token } from 'leaf-styles/tokens';
+import { token } from 'leather-styles/tokens';
 
 const labels = ['Address', 'BNS Name'];
 const testLabels = ['address', 'bns-name'];
diff --git a/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx
index bf6716d69b6..7c17ab2157f 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx
@@ -1,7 +1,7 @@
 import { Flex } from '@stacks/ui';
 import { Field, useField } from 'formik';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { Flag } from '@app/components/layout/flag';
diff --git a/src/app/pages/send/send-crypto-asset-form/components/send-fiat-value.tsx b/src/app/pages/send/send-crypto-asset-form/components/send-fiat-value.tsx
index f5eaab10476..f6429a20c0b 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/send-fiat-value.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/send-fiat-value.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { useField } from 'formik';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { MarketData } from '@shared/models/market.model';
 import { Money, createMoneyFromDecimal } from '@shared/models/money.model';
diff --git a/src/app/pages/send/send-crypto-asset-form/components/tx-done.tsx b/src/app/pages/send/send-crypto-asset-form/components/tx-done.tsx
index 1bc6c4c814f..c24c0149b37 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/tx-done.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/tx-done.tsx
@@ -1,5 +1,5 @@
 import WaxSeal from '@assets/illustrations/wax-seal.png';
-import { Flex, styled } from 'leaf-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 export function TxDone() {
   return (
diff --git a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx
index 3d575e8b503..da6aad99024 100644
--- a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx
@@ -1,5 +1,5 @@
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
-import { Box } from 'leaf-styles/jsx';
+import { Box } from 'leather-styles/jsx';
 
 import { Money } from '@shared/models/money.model';
 
diff --git a/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx b/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx
index a63965217cb..a44a8dc4d49 100644
--- a/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx
+++ b/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx
@@ -1,8 +1,8 @@
 import { Flex } from '@stacks/ui';
 import { SettingsSelectors } from '@tests-legacy/integration/settings.selectors';
 import { useFormik } from 'formik';
-import { Box, HStack, styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { Box, HStack, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { useWalletType } from '@app/common/use-wallet-type';
 import { LeatherButton } from '@app/components/button/button';
diff --git a/src/app/pages/stacks-message-signing-request/components/structured-data-box.tsx b/src/app/pages/stacks-message-signing-request/components/structured-data-box.tsx
index c65d3ce89a4..cbdece433ae 100644
--- a/src/app/pages/stacks-message-signing-request/components/structured-data-box.tsx
+++ b/src/app/pages/stacks-message-signing-request/components/structured-data-box.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { ClarityValue } from '@stacks/transactions';
 import { Stack, color } from '@stacks/ui';
-import { Box, Divider, styled } from 'leaf-styles/jsx';
+import { Box, Divider, styled } from 'leather-styles/jsx';
 
 import { StructuredMessageDataDomain } from '@shared/signature/signature-types';
 
diff --git a/src/app/pages/swap/components/swap-container.layout.tsx b/src/app/pages/swap/components/swap-container.layout.tsx
index 5bd14883a85..a92d82c9d5d 100644
--- a/src/app/pages/swap/components/swap-container.layout.tsx
+++ b/src/app/pages/swap/components/swap-container.layout.tsx
@@ -1,4 +1,4 @@
-import { Flex } from 'leaf-styles/jsx';
+import { Flex } from 'leather-styles/jsx';
 
 import { HasChildren } from '@app/common/has-children';
 
diff --git a/src/app/pages/transaction-request/components/minimal-error-message.tsx b/src/app/pages/transaction-request/components/minimal-error-message.tsx
index 4f3982b3229..47ed61278b5 100644
--- a/src/app/pages/transaction-request/components/minimal-error-message.tsx
+++ b/src/app/pages/transaction-request/components/minimal-error-message.tsx
@@ -2,7 +2,7 @@ import { Suspense, memo } from 'react';
 
 import { Stack, StackProps, color } from '@stacks/ui';
 import { TransactionSigningSelectors } from '@tests-legacy/page-objects/transaction-signing.selectors';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { ErrorIcon } from '@app/components/icons/error-icon';
 import { TransactionErrorReason } from '@app/pages/transaction-request/components/transaction-error/transaction-error';
diff --git a/src/app/pages/transaction-request/components/page-top.tsx b/src/app/pages/transaction-request/components/page-top.tsx
index 6e79cd8d7ad..ea541dabd00 100644
--- a/src/app/pages/transaction-request/components/page-top.tsx
+++ b/src/app/pages/transaction-request/components/page-top.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 import { Stack } from '@stacks/ui';
 import { TransactionSigningSelectors } from '@tests-legacy/page-objects/transaction-signing.selectors';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { useDefaultRequestParams } from '@app/common/hooks/use-default-request-search-params';
 import { addPortSuffix, getUrlHostname } from '@app/common/utils';
diff --git a/src/app/pages/transaction-request/components/transaction-error/error-message.tsx b/src/app/pages/transaction-request/components/transaction-error/error-message.tsx
index 46d83a800eb..4f371536c42 100644
--- a/src/app/pages/transaction-request/components/transaction-error/error-message.tsx
+++ b/src/app/pages/transaction-request/components/transaction-error/error-message.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { Stack, StackProps, color } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { ErrorIcon } from '@app/components/icons/error-icon';
 
diff --git a/src/app/pages/unlock.tsx b/src/app/pages/unlock.tsx
index 2ea558d5d99..a70b6414e39 100644
--- a/src/app/pages/unlock.tsx
+++ b/src/app/pages/unlock.tsx
@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
 
 import { Stack } from '@stacks/ui';
-import { Box } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { Box } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { WALLET_ENVIRONMENT } from '@shared/environment';
 import { RouteUrls } from '@shared/route-urls';
diff --git a/src/app/pages/view-secret-key/view-secret-key.tsx b/src/app/pages/view-secret-key/view-secret-key.tsx
index f00466bf424..b15c292fea6 100644
--- a/src/app/pages/view-secret-key/view-secret-key.tsx
+++ b/src/app/pages/view-secret-key/view-secret-key.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Stack } from '@stacks/ui';
-import { styled } from 'leaf-styles/jsx';
-import { token } from 'leaf-styles/tokens';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
 import { RouteUrls } from '@shared/route-urls';
 
diff --git a/theme/keyframes.ts b/theme/keyframes.ts
index 7eeedbc8b4a..fbebb5392ce 100644
--- a/theme/keyframes.ts
+++ b/theme/keyframes.ts
@@ -1,4 +1,4 @@
-import { CssKeyframes } from 'leaf-styles/types/system-types';
+import { CssKeyframes } from 'leather-styles/types/system-types';
 
 // ts-unused-exports:disable-next-line
 export const keyframes: CssKeyframes = {
diff --git a/theme/recipes/button.ts b/theme/recipes/button.ts
index 3e168be4000..a0469bcc9b9 100644
--- a/theme/recipes/button.ts
+++ b/theme/recipes/button.ts
@@ -1,5 +1,5 @@
 import { defineRecipe } from '@pandacss/dev';
-import { ColorToken } from 'leaf-styles/tokens';
+import { ColorToken } from 'leather-styles/tokens';
 
 const basePesudoOutlineProps = {
   content: '""',
diff --git a/tsconfig.json b/tsconfig.json
index 96cec269aad..c10bacda81b 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,7 +30,7 @@
       "@app/*": ["app/*"],
       "@tests/*": ["../tests/*"],
       "@tests-legacy/*": ["../tests-legacy/*"],
-      "leaf-styles/*": ["../leaf-styles/*"]
+      "leather-styles/*": ["../leather-styles/*"]
     },
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
@@ -42,7 +42,7 @@
     "./tests/**/*",
     "./tests-legacy/**/*",
     "./scripts-ts/**/*",
-    "leaf-styles",
+    "leather-styles",
     "theme"
   ],
   "exclude": ["test-app"]
diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js
index dcaba4efd11..e9644659797 100755
--- a/webpack/webpack.config.base.js
+++ b/webpack/webpack.config.base.js
@@ -70,7 +70,7 @@ const aliases = {
   '@stacks/transactions': '@stacks/transactions/dist/esm',
   '@stacks/wallet-sdk': '@stacks/wallet-sdk/dist/esm',
   'lottie-web': path.resolve('node_modules/lottie-web/build/player/lottie_light.js'),
-  'leaf-styles': path.resolve('leaf-styles'),
+  'leather-styles': path.resolve('leather-styles'),
 };
 
 const config = {