diff --git a/panda.config.ts b/panda.config.ts
index 35954dc1f63..c04aba3f239 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from '@pandacss/dev';
 
-import { leatherCss } from './src/app/components/global-styles/global-styles';
 import { breakpoints } from './theme/breakpoints';
+import { globalCss } from './theme/global/global';
 import { keyframes } from './theme/keyframes';
 import { buttonRecipe } from './theme/recipes/button';
 import { semanticTokens } from './theme/semantic-tokens';
@@ -38,5 +38,5 @@ export default defineConfig({
   outdir: 'leather-styles',
   outExtension: 'js',
   minify: true,
-  globalCss: leatherCss,
+  globalCss,
 });
diff --git a/src/app/app.tsx b/src/app/app.tsx
index f340d6fcd10..1cdabdd4ede 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -8,7 +8,6 @@ import { PersistGate } from 'redux-persist/integration/react';
 
 import { queryClient } from '@app/common/persistence';
 import { theme } from '@app/common/theme';
-// import { GlobalStyles } from '@app/components/global-styles/global-styles';
 import { FullPageLoadingSpinner } from '@app/components/loading-spinner';
 import { Devtools } from '@app/features/devtool/devtools';
 import { AppErrorBoundary } from '@app/features/errors/app-error-boundary';
@@ -29,8 +28,6 @@ export function App() {
         {/* TODO - this works but investigate importing radixBaseCSS in panda layer config */}
         <ThemeProvider theme={theme} css={radixBaseCSS}>
           <ThemeSwitcherProvider>
-            {/* Remove stacks-ui reset - write our own */}
-            {/* <GlobalStyles /> */}
             <QueryClientProvider client={queryClient}>
               <Suspense fallback={<FullPageLoadingSpinner />}>
                 <AppErrorBoundary>
diff --git a/src/app/components/drawer/base-drawer.tsx b/src/app/components/drawer/base-drawer.tsx
index 39d003ab588..3c95ee55dfb 100644
--- a/src/app/components/drawer/base-drawer.tsx
+++ b/src/app/components/drawer/base-drawer.tsx
@@ -10,7 +10,6 @@ import { noop } from '@shared/utils';
 import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside';
 import { useThemeSwitcher } from '@app/common/theme-provider';
 
-import { hideScrollbarClassName } from '../global-styles/hide-scrollbar';
 import { DrawerHeader } from './components/drawer-header';
 
 function useDrawer(isShowing: boolean, onClose: () => void, pause?: boolean) {
@@ -104,12 +103,13 @@ export const BaseDrawer = memo((props: BaseDrawerProps) => {
         maxHeight={['calc(100vh - 24px)', 'calc(100vh - 96px)']}
       >
         <Box
-          className={[
-            css({
-              overflowY: 'scroll',
-            }),
-            hideScrollbarClassName,
-          ].join(' ')}
+          css={css({
+            overflowY: 'scroll',
+
+            '&::-webkit-scrollbar': {
+              display: 'none',
+            },
+          })}
         >
           <DrawerHeader
             enableGoBack={enableGoBack}
diff --git a/src/app/components/global-styles/hide-scrollbar.tsx b/src/app/components/global-styles/hide-scrollbar.tsx
deleted file mode 100644
index 833d3f80bfb..00000000000
--- a/src/app/components/global-styles/hide-scrollbar.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { css } from 'leather-styles/css';
-
-export const hideScrollbarClassName = css({
-  '&::-webkit-scrollbar': {
-    display: 'none',
-  },
-});
diff --git a/src/app/components/global-styles/radix-styles.tsx b/src/app/components/global-styles/radix-styles.tsx
deleted file mode 100644
index e5ff840b0b2..00000000000
--- a/src/app/components/global-styles/radix-styles.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { token } from 'leather-styles/tokens';
-
-export const radixStyles = {
-  '.radix-themes': {
-    '--font-size-7': '32px',
-    '--font-size-8': '44px',
-    '--font-size-9': '53px',
-
-    '--default-font-family': '"Diatype", "Helvetica Neue", sans-serif',
-    '--heading-font-family': '"Marche", "Helvetica Neue", sans-serif',
-
-    '--letter-spacing-1': 0,
-    '--letter-spacing-2': 0,
-    '--letter-spacing-3': 0,
-    '--letter-spacing-4': 0,
-    '--letter-spacing-5': 0,
-    '--letter-spacing-6': 0,
-    '--letter-spacing-7': 0,
-    '--letter-spacing-8': 0,
-    '--letter-spacing-9': 0,
-
-    // Configured to Diatype
-    '--font-weight-light': 400,
-    '--font-weight-regular': 400,
-    '--font-weight-medium': 500,
-    '--font-weight-bold': 500,
-
-    '--color-overlay': 'rgba(0, 0, 0, 0.3)', //check this
-  },
-
-  ':root, .light, .light-theme': {
-    '--brown-1': token('colors.brown.1'),
-    '--brown-2': token('colors.brown.2'),
-    '--brown-3': token('colors.brown.3'),
-    '--brown-4': token('colors.brown.4'),
-    '--brown-5': token('colors.brown.5'),
-    '--brown-6': token('colors.brown.6'),
-    '--brown-7': token('colors.brown.7'),
-    '--brown-8': token('colors.brown.8'),
-    '--brown-9': token('colors.brown.9'),
-    '--brown-10': token('colors.brown.10'),
-    '--brown-11': token('colors.brown.11'),
-    '--brown-12': token('colors.brown.12'),
-
-    '--gray-1': token('colors.ink.1'),
-    '--gray-2': token('colors.ink.2'),
-    '--gray-3': token('colors.ink.3'),
-    '--gray-4': token('colors.ink.4'),
-    '--gray-5': token('colors.ink.5'),
-    '--gray-6': token('colors.ink.6'),
-    '--gray-7': token('colors.ink.7'),
-    '--gray-8': token('colors.ink.8'),
-    '--gray-9': token('colors.ink.9'),
-    '--gray-10': token('colors.ink.10'),
-    '--gray-11': token('colors.ink.11'),
-    '--gray-12': token('colors.ink.12'),
-  },
-  '.dark, .dark-theme': {
-    '--brown-1': token('colors.brown.1'),
-    '--brown-2': token('colors.brown.2'),
-    '--brown-3': token('colors.brown.3'),
-    '--brown-4': token('colors.brown.4'),
-    '--brown-5': token('colors.brown.5'),
-    '--brown-6': token('colors.brown.6'),
-    '--brown-7': token('colors.brown.7'),
-    '--brown-8': token('colors.brown.8'),
-    '--brown-9': token('colors.brown.9'),
-    '--brown-10': token('colors.brown.10'),
-    '--brown-11': token('colors.brown.11'),
-    '--brown-12': token('colors.brown.12'),
-
-    '--gray-1': token('colors.ink.1'),
-    '--gray-2': token('colors.ink.2'),
-    '--gray-3': token('colors.ink.3'),
-    '--gray-4': token('colors.ink.4'),
-    '--gray-5': token('colors.ink.5'),
-    '--gray-6': token('colors.ink.6'),
-    '--gray-7': token('colors.ink.7'),
-    '--gray-8': token('colors.ink.8'),
-    '--gray-9': token('colors.ink.9'),
-    '--gray-10': token('colors.ink.10'),
-    '--gray-11': token('colors.ink.11'),
-    '--gray-12': token('colors.ink.12'),
-  },
-};
-
-// override the radix tabs color
-export const radixTabStyles = {
-  '.rt-TabsList.rt-r-size-2': {
-    height: 'auto',
-    '--tabs-trigger-inner-padding-y': token('spacing.space.04'),
-  },
-  '.rt-TabsTrigger': {
-    flex: 1,
-  },
-  '.rt-TabsTriggerInner': {
-    width: '100%',
-  },
-  '.rt-TabsTrigger[data-state="active"]::before': {
-    backgroundColor: token('colors.brown.12'),
-  },
-};
diff --git a/src/app/components/global-styles/full-page-styles.tsx b/theme/global/full-page-styles.ts
similarity index 100%
rename from src/app/components/global-styles/full-page-styles.tsx
rename to theme/global/full-page-styles.ts
diff --git a/src/app/components/global-styles/global-styles.tsx b/theme/global/global.ts
similarity index 61%
rename from src/app/components/global-styles/global-styles.tsx
rename to theme/global/global.ts
index 5313dedfe64..55423a2a497 100644
--- a/src/app/components/global-styles/global-styles.tsx
+++ b/theme/global/global.ts
@@ -1,8 +1,4 @@
-import { memo } from 'react';
-
 import { defineGlobalStyles } from '@pandacss/dev';
-import { CSSReset } from '@stacks/ui';
-import { token } from 'leather-styles/tokens';
 
 import { fullPageStyles } from './full-page-styles';
 import { popupCenterStyles } from './popup-center-styles';
@@ -10,23 +6,17 @@ import { popupStyles } from './popup-styles';
 import { radixStyles, radixTabStyles } from './radix-styles';
 import { tippyStyles } from './tippy-styles';
 
-// Keeping this temporarily but it's not used anywhere
-// need to backfill some Stacks UI base - cursor pointer
 // ts-unused-exports:disable-next-line
-export const GlobalStyles = memo(() => {
-  return <>{CSSReset}</>;
-});
-
-export const leatherCss = defineGlobalStyles({
+export const globalCss = defineGlobalStyles({
   'html, body': {
-    backgroundColor: token('colors.brown.1'),
+    backgroundColor: 'accent.background-secondary',
   },
   button: {
     cursor: 'pointer',
   },
   '@media (min-width: 600px)': {
     'html, body': {
-      backgroundColor: token('colors.brown.2'),
+      backgroundColor: 'accent.background-secondary',
     },
   },
   body: {
diff --git a/src/app/components/global-styles/popup-center-styles.tsx b/theme/global/popup-center-styles.ts
similarity index 100%
rename from src/app/components/global-styles/popup-center-styles.tsx
rename to theme/global/popup-center-styles.ts
diff --git a/src/app/components/global-styles/popup-styles.tsx b/theme/global/popup-styles.ts
similarity index 100%
rename from src/app/components/global-styles/popup-styles.tsx
rename to theme/global/popup-styles.ts
diff --git a/theme/global/radix-styles.ts b/theme/global/radix-styles.ts
new file mode 100644
index 00000000000..f203f6bec0b
--- /dev/null
+++ b/theme/global/radix-styles.ts
@@ -0,0 +1,101 @@
+export const radixStyles = {
+  '.radix-themes': {
+    '--font-size-7': '32px',
+    '--font-size-8': '44px',
+    '--font-size-9': '53px',
+
+    '--default-font-family': '"Diatype", "Helvetica Neue", sans-serif',
+    '--heading-font-family': '"Marche", "Helvetica Neue", sans-serif',
+
+    '--letter-spacing-1': 0,
+    '--letter-spacing-2': 0,
+    '--letter-spacing-3': 0,
+    '--letter-spacing-4': 0,
+    '--letter-spacing-5': 0,
+    '--letter-spacing-6': 0,
+    '--letter-spacing-7': 0,
+    '--letter-spacing-8': 0,
+    '--letter-spacing-9': 0,
+
+    // Configured to Diatype
+    '--font-weight-light': 400,
+    '--font-weight-regular': 400,
+    '--font-weight-medium': 500,
+    '--font-weight-bold': 500,
+
+    '--color-overlay': 'rgba(0, 0, 0, 0.3)', //check this
+  },
+
+  // TODO check if these are being set properly
+  ':root, .light, .light-theme': {
+    '--brown-1': 'brown.1',
+    '--brown-2': 'brown.2',
+    '--brown-3': 'brown.3',
+    '--brown-4': 'brown.4',
+    '--brown-5': 'brown.5',
+    '--brown-6': 'brown.6',
+    '--brown-7': 'brown.7',
+    '--brown-8': 'brown.8',
+    '--brown-9': 'brown.9',
+    '--brown-10': 'brown.10',
+    '--brown-11': 'brown.11',
+    '--brown-12': 'brown.12',
+
+    '--gray-1': 'ink.1',
+    '--gray-2': 'ink.2',
+    '--gray-3': 'ink.3',
+    '--gray-4': 'ink.4',
+    '--gray-5': 'ink.5',
+    '--gray-6': 'ink.6',
+    '--gray-7': 'ink.7',
+    '--gray-8': 'ink.8',
+    '--gray-9': 'ink.9',
+    '--gray-10': 'ink.10',
+    '--gray-11': 'ink.11',
+    '--gray-12': 'ink.12',
+  },
+  '.dark, .dark-theme': {
+    '--brown-1': 'brown.1',
+    '--brown-2': 'brown.2',
+    '--brown-3': 'brown.3',
+    '--brown-4': 'brown.4',
+    '--brown-5': 'brown.5',
+    '--brown-6': 'brown.6',
+    '--brown-7': 'brown.7',
+    '--brown-8': 'brown.8',
+    '--brown-9': 'brown.9',
+    '--brown-10': 'brown.10',
+    '--brown-11': 'brown.11',
+    '--brown-12': 'brown.12',
+
+    '--gray-1': 'ink.1',
+    '--gray-2': 'ink.2',
+    '--gray-3': 'ink.3',
+    '--gray-4': 'ink.4',
+    '--gray-5': 'ink.5',
+    '--gray-6': 'ink.6',
+    '--gray-7': 'ink.7',
+    '--gray-8': 'ink.8',
+    '--gray-9': 'ink.9',
+    '--gray-10': 'ink.10',
+    '--gray-11': 'ink.11',
+    '--gray-12': 'ink.12',
+  },
+};
+
+// override the radix tabs color
+export const radixTabStyles = {
+  '.rt-TabsList.rt-r-size-2': {
+    height: 'auto',
+    '--tabs-trigger-inner-padding-y': 'spacing.space.04',
+  },
+  '.rt-TabsTrigger': {
+    flex: 1,
+  },
+  '.rt-TabsTriggerInner': {
+    width: '100%',
+  },
+  '.rt-TabsTrigger[data-state="active"]::before': {
+    backgroundColor: 'accent.text-primary',
+  },
+};
diff --git a/src/app/components/global-styles/tippy-styles.tsx b/theme/global/tippy-styles.ts
similarity index 100%
rename from src/app/components/global-styles/tippy-styles.tsx
rename to theme/global/tippy-styles.ts
diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js
index 7be51e4c2ff..c2554fe3bf9 100755
--- a/webpack/webpack.config.base.js
+++ b/webpack/webpack.config.base.js
@@ -135,7 +135,7 @@ const config = {
       {
         test: /\.(ts|tsx)$/,
         exclude: /node_modules/,
-        // TODO investigate removing babel
+        // #4164 TODO investigate removing babel
         use: {
           loader: 'babel-loader',
           options: {