diff --git a/ui/src/components/card/card.styles.ts b/ui/src/components/card/card.styles.ts
index a91234f..aff24f5 100644
--- a/ui/src/components/card/card.styles.ts
+++ b/ui/src/components/card/card.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export abstract class CardStyles {
   static readonly Container = styled('div', {
diff --git a/ui/src/components/core/avatar/avatar.styles.ts b/ui/src/components/core/avatar/avatar.styles.ts
index c50b444..6a78ba5 100644
--- a/ui/src/components/core/avatar/avatar.styles.ts
+++ b/ui/src/components/core/avatar/avatar.styles.ts
@@ -1,8 +1,6 @@
 import * as Avatar from '@radix-ui/react-avatar';
 
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export abstract class AvatarStyles {
   static readonly Root = styled(Avatar.Root, {
diff --git a/ui/src/components/core/button/button-content.styles.ts b/ui/src/components/core/button/button-content.styles.ts
index 17a72f6..5572748 100644
--- a/ui/src/components/core/button/button-content.styles.ts
+++ b/ui/src/components/core/button/button-content.styles.ts
@@ -1,7 +1,6 @@
-import { dripStitches } from '../../../theme'; //TODO replace with absolute path
-import { Flex, Grid } from '../../layout';
+import { styled } from '@/theme';
 
-const { styled } = dripStitches;
+import { Flex, Grid } from '../../layout';
 
 export const StyledButtonContentGrid = styled(Grid, {
   gap: '$0h',
diff --git a/ui/src/components/core/button/button-icon.styles.ts b/ui/src/components/core/button/button-icon.styles.ts
index 963ac12..b3fa47e 100644
--- a/ui/src/components/core/button/button-icon.styles.ts
+++ b/ui/src/components/core/button/button-icon.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '../../../theme'; //TODO replace with absolute path
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export const StyledButtonIconSpan = styled('span', {
   all: 'unset',
diff --git a/ui/src/components/core/button/button-spinner.styles.ts b/ui/src/components/core/button/button-spinner.styles.ts
index f552377..eb81976 100644
--- a/ui/src/components/core/button/button-spinner.styles.ts
+++ b/ui/src/components/core/button/button-spinner.styles.ts
@@ -1,7 +1,6 @@
-import { dripStitches } from '../../../theme'; //TODO replace with absolute path
-import { Flex, Grid } from '../../layout';
+import { styled } from '@/theme';
 
-const { styled } = dripStitches;
+import { Flex, Grid } from '../../layout';
 
 export const StyledButtonSpinnerBox = styled(Flex, {
   alignItems: 'center',
diff --git a/ui/src/components/core/button/button-spinner.tsx b/ui/src/components/core/button/button-spinner.tsx
index c1b0663..0b1c9b5 100644
--- a/ui/src/components/core/button/button-spinner.tsx
+++ b/ui/src/components/core/button/button-spinner.tsx
@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, useMemo } from 'react';
 
-import { dripStitches } from '../../../theme'; //TODO replace with absolute path
+import { keyframes } from '@/theme';
+
 import {
   ButtonSpinnerProps,
   StyledButtonSpinnerBox,
@@ -35,8 +36,6 @@ export const ButtonSpinner: React.FC<ButtonSpinnerProps> = (props) => {
   );
 };
 
-const { keyframes } = dripStitches;
-
 const blink = keyframes({
   '0%': { opacity: 0.2 },
   '50%': { opacity: 1 },
diff --git a/ui/src/components/core/button/button.styles.ts b/ui/src/components/core/button/button.styles.ts
index b757325..9259bca 100644
--- a/ui/src/components/core/button/button.styles.ts
+++ b/ui/src/components/core/button/button.styles.ts
@@ -1,6 +1,6 @@
 import { CSS } from '@stitches/react';
 
-import { dripStitches } from '../../../theme';
+import { styled } from '@/theme';
 
 type StyledButtonProps = React.ComponentPropsWithRef<typeof StyledButton>;
 export interface ButtonProps extends StyledButtonProps {
@@ -149,8 +149,6 @@ const getButtonCompoundVariant = ({
   }
 };
 
-const { styled } = dripStitches;
-
 export const StyledButton = styled('button', {
   all: 'unset',
   cursor: 'pointer',
diff --git a/ui/src/components/core/icon/icon.styles.ts b/ui/src/components/core/icon/icon.styles.ts
index 4fc36e5..7abca7f 100644
--- a/ui/src/components/core/icon/icon.styles.ts
+++ b/ui/src/components/core/icon/icon.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '../../../theme'; //TODO replace for absolute path
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export abstract class IconStyles {
   static readonly Container = styled('span', {
diff --git a/ui/src/components/core/input/input-file.styles.ts b/ui/src/components/core/input/input-file.styles.ts
index ecf65ef..03fd26a 100644
--- a/ui/src/components/core/input/input-file.styles.ts
+++ b/ui/src/components/core/input/input-file.styles.ts
@@ -1,7 +1,5 @@
 import { Flex } from '@/components/layout';
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export abstract class InputFileStyles {
   static readonly Container = styled(Flex, {
diff --git a/ui/src/components/core/input/input.styles.ts b/ui/src/components/core/input/input.styles.ts
index 4827e4c..a2a9a4d 100644
--- a/ui/src/components/core/input/input.styles.ts
+++ b/ui/src/components/core/input/input.styles.ts
@@ -1,7 +1,6 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
 
 import { Icon } from '../icon';
-const { styled } = dripStitches;
 
 const styles = {
   all: 'unset',
diff --git a/ui/src/components/core/separator.styles.ts b/ui/src/components/core/separator.styles.ts
index 6a7ad86..812fc0c 100644
--- a/ui/src/components/core/separator.styles.ts
+++ b/ui/src/components/core/separator.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export const Separator = styled('hr', {
   borderTop: '1px solid $slate6',
diff --git a/ui/src/components/core/text/text.styles.ts b/ui/src/components/core/text/text.styles.ts
index c5e24df..55e1118 100644
--- a/ui/src/components/core/text/text.styles.ts
+++ b/ui/src/components/core/text/text.styles.ts
@@ -1,5 +1,3 @@
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export const Text = styled('span');
diff --git a/ui/src/components/form/form.styles.ts b/ui/src/components/form/form.styles.ts
index 5440e54..a30416f 100644
--- a/ui/src/components/form/form.styles.ts
+++ b/ui/src/components/form/form.styles.ts
@@ -1,7 +1,7 @@
-import { dripStitches } from '../../theme';
+import { styled } from '@/theme';
+
 import { Flex } from '../layout';
 
-const { styled } = dripStitches;
 export abstract class FormStyles {
   static readonly Field = styled(Flex, {
     flexDirection: 'column',
diff --git a/ui/src/components/layout/flex.styles.ts b/ui/src/components/layout/flex.styles.ts
index 144b5e2..e59a6ea 100644
--- a/ui/src/components/layout/flex.styles.ts
+++ b/ui/src/components/layout/flex.styles.ts
@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { dripStitches } from '../../theme'; //TODO replace with absolute path
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export const Flex = styled('div', {
   display: 'flex',
diff --git a/ui/src/components/layout/grid.styles.ts b/ui/src/components/layout/grid.styles.ts
index 3527960..6775bce 100644
--- a/ui/src/components/layout/grid.styles.ts
+++ b/ui/src/components/layout/grid.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '../../theme'; //TODO replace with absolute path
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export const Grid = styled('div', {
   display: 'grid',
diff --git a/ui/src/components/layout/nav-bar/nav-bar.styles.ts b/ui/src/components/layout/nav-bar/nav-bar.styles.ts
index eb0370f..f4e7885 100644
--- a/ui/src/components/layout/nav-bar/nav-bar.styles.ts
+++ b/ui/src/components/layout/nav-bar/nav-bar.styles.ts
@@ -1,8 +1,7 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
 
 import { Flex } from '../flex.styles';
 
-const { styled } = dripStitches;
 export abstract class NavBarStyles {
   static readonly Container = styled('header', {
     position: 'sticky',
diff --git a/ui/src/components/layout/page/page.styles.ts b/ui/src/components/layout/page/page.styles.ts
index 78b3d7a..affeb29 100644
--- a/ui/src/components/layout/page/page.styles.ts
+++ b/ui/src/components/layout/page/page.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export abstract class PageStyles {
   public static readonly Container = styled('div', {
diff --git a/ui/src/components/layout/skeleton.styles.ts b/ui/src/components/layout/skeleton.styles.ts
index b54f820..a727b73 100644
--- a/ui/src/components/layout/skeleton.styles.ts
+++ b/ui/src/components/layout/skeleton.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
-
-const { styled, keyframes } = dripStitches;
+import { keyframes, styled } from '@/theme';
 
 const SkeletonKeyframes = keyframes({
   '0%': {
diff --git a/ui/src/components/layout/stepper/stepper.styles.ts b/ui/src/components/layout/stepper/stepper.styles.ts
index 4222f3a..6e9fc94 100644
--- a/ui/src/components/layout/stepper/stepper.styles.ts
+++ b/ui/src/components/layout/stepper/stepper.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '../../../theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export abstract class StepperStyles {
   static readonly Rail = styled('div', {
diff --git a/ui/src/components/logo/logo.styles.ts b/ui/src/components/logo/logo.styles.ts
index d0bd958..7adcc6d 100644
--- a/ui/src/components/logo/logo.styles.ts
+++ b/ui/src/components/logo/logo.styles.ts
@@ -1,8 +1,7 @@
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
 
 import { Flex } from '../layout';
 
-const { styled } = dripStitches;
 export abstract class LogoStyles {
   static readonly Container = styled(Flex, {
     cursor: 'pointer',
diff --git a/ui/src/components/nfa-card/nfa-card.styles.ts b/ui/src/components/nfa-card/nfa-card.styles.ts
index 11cca30..920a460 100644
--- a/ui/src/components/nfa-card/nfa-card.styles.ts
+++ b/ui/src/components/nfa-card/nfa-card.styles.ts
@@ -1,11 +1,9 @@
 import { Link } from 'react-router-dom';
 
-import { dripStitches } from '@/theme';
+import { styled } from '@/theme';
 
 import { Skeleton } from '../layout';
 
-const { styled } = dripStitches;
-
 export const NFACardStyles = {
   Container: styled(Link, {
     display: 'flex',
diff --git a/ui/src/components/nfa-preview/nfa-preview.tsx b/ui/src/components/nfa-preview/nfa-preview.tsx
index 7a393f6..5167fe1 100644
--- a/ui/src/components/nfa-preview/nfa-preview.tsx
+++ b/ui/src/components/nfa-preview/nfa-preview.tsx
@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
 
-import { dripStitches, forwardStyledRef } from '@/theme';
-
-const { styled } = dripStitches;
+import { forwardStyledRef, styled } from '@/theme';
 
 const StyledSVG = styled('svg');
 
diff --git a/ui/src/components/spinner/spinner.styles.ts b/ui/src/components/spinner/spinner.styles.ts
index ea09fc6..625220b 100644
--- a/ui/src/components/spinner/spinner.styles.ts
+++ b/ui/src/components/spinner/spinner.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export abstract class SpinnerStyles {
   static readonly Container = styled('svg', {
diff --git a/ui/src/components/toast/toast.styles.tsx b/ui/src/components/toast/toast.styles.tsx
index 0507389..205da5c 100644
--- a/ui/src/components/toast/toast.styles.tsx
+++ b/ui/src/components/toast/toast.styles.tsx
@@ -1,12 +1,10 @@
 import * as ToastLib from '@radix-ui/react-toast';
 
-import { dripStitches } from '@/theme';
+import { keyframes, styled } from '@/theme';
 
 import { Icon, IconButton } from '../core';
 import { Flex } from '../layout';
 
-const { styled, keyframes } = dripStitches;
-
 export abstract class ToastStyles {
   static readonly Provider = ToastLib.Provider;
 
diff --git a/ui/src/theme/key-frames.ts b/ui/src/theme/key-frames.ts
index 4c09aac..a932621 100644
--- a/ui/src/theme/key-frames.ts
+++ b/ui/src/theme/key-frames.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from './themes';
-
-const { keyframes } = dripStitches;
+import { keyframes } from './themes';
 
 export const KeyFrames = {
   slideUpAndFade: keyframes({
diff --git a/ui/src/theme/themes.ts b/ui/src/theme/themes.ts
index c42f9c7..6cd2c5d 100644
--- a/ui/src/theme/themes.ts
+++ b/ui/src/theme/themes.ts
@@ -30,7 +30,7 @@ export interface CreateDripStitchesConfig<
   utils?: ConfigType.Utils<Utils>;
 }
 
-export const createDripStitches = <
+const createDripStitches = <
   Prefix extends string = '',
   Media extends {} = {},
   Theme extends {} = {},
@@ -131,4 +131,17 @@ export const createDripStitches = <
   };
 };
 
-export const dripStitches = createDripStitches();
+export const {
+  styled,
+  css,
+  config,
+  globalCss,
+  createTheme,
+  darkTheme,
+  darkThemeSelector,
+  getCssText,
+  keyframes,
+  prefix,
+  theme,
+  reset,
+} = createDripStitches();
diff --git a/ui/src/views/explore/explore.styles.ts b/ui/src/views/explore/explore.styles.ts
index 15ed79b..a539975 100644
--- a/ui/src/views/explore/explore.styles.ts
+++ b/ui/src/views/explore/explore.styles.ts
@@ -1,7 +1,5 @@
 import { Flex } from '@/components';
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export abstract class Explore {
   static readonly Container = styled(Flex, {
diff --git a/ui/src/views/explore/header.styles.ts b/ui/src/views/explore/header.styles.ts
index fdfc715..0433a46 100644
--- a/ui/src/views/explore/header.styles.ts
+++ b/ui/src/views/explore/header.styles.ts
@@ -1,7 +1,5 @@
 import { Flex } from '@/components';
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export abstract class Header {
   static readonly Container = styled(Flex, {
diff --git a/ui/src/views/explore/list-nfas/results.styles.ts b/ui/src/views/explore/list-nfas/results.styles.ts
index e44ff19..ef48426 100644
--- a/ui/src/views/explore/list-nfas/results.styles.ts
+++ b/ui/src/views/explore/list-nfas/results.styles.ts
@@ -1,6 +1,4 @@
-import { dripStitches } from '@/theme';
-
-const { styled } = dripStitches;
+import { styled } from '@/theme';
 
 export const ResultsContainer = styled('div', {
   fontSize: '$xl',