diff --git a/documentation-ui/src/custom/docs/QuantinuumLogo.tsx b/documentation-ui/src/custom/docs/QuantinuumLogo.tsx
index 28fc66a..00803c6 100644
--- a/documentation-ui/src/custom/docs/QuantinuumLogo.tsx
+++ b/documentation-ui/src/custom/docs/QuantinuumLogo.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps } from "react"
-import { cn } from "src"
+import { cn } from "@/utils"
 
 export const QuantinuumLogo = (props: ComponentProps<'svg'>) => {
     return (
diff --git a/documentation-ui/src/custom/docs/components/footer/index.tsx b/documentation-ui/src/custom/docs/components/footer/index.tsx
index ec6a546..bf78ff1 100644
--- a/documentation-ui/src/custom/docs/components/footer/index.tsx
+++ b/documentation-ui/src/custom/docs/components/footer/index.tsx
@@ -1,4 +1,4 @@
-import { QuantinuumLogo } from "../../QuantinuumLogo";
+import { QuantinuumLogo } from "@/custom/docs/QuantinuumLogo";
 import { Separator } from "@quantinuum/quantinuum-ui";
 
 const footerConfig = {
diff --git a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieConditional/CookieConditional.tsx b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieConditional/CookieConditional.tsx
index ee234ab..36fa29e 100644
--- a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieConditional/CookieConditional.tsx
+++ b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieConditional/CookieConditional.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { type PropsWithChildren, type ReactNode } from 'react'
-import { useCookieConsent } from '../../contexts/useCookieConsent'
-import { type CookieCategoryName } from '../../types'
+import { useCookieConsent } from '@/custom/docs/components/gdpr/contexts/useCookieConsent'
+import { type CookieCategoryName } from '@/custom/docs/components/gdpr/types'
 
 type CookieConditionalProps = PropsWithChildren<{
   category: CookieCategoryName
diff --git a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsDialog/CookieSettingsDialog.tsx b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsDialog/CookieSettingsDialog.tsx
index fc74995..6d3d4e9 100644
--- a/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsDialog/CookieSettingsDialog.tsx
+++ b/documentation-ui/src/custom/docs/components/gdpr/_components/CookieSettingsDialog/CookieSettingsDialog.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { CookieCategories } from '../../cookies-consent.config'
-import { retrieveConsentCategoriesFromCookies } from '../../service/cookie-consent-service'
-import { type CookieCategory, CookieConsent } from '../../types'
+import { CookieCategories } from '@/custom/docs/components/gdpr/cookies-consent.config'
+import { retrieveConsentCategoriesFromCookies } from '@/custom/docs/components/gdpr/service/cookie-consent-service'
+import { type CookieCategory, CookieConsent } from '@/custom/docs/components/gdpr/types'
 import {
   Accordion,
   AccordionContent,
diff --git a/documentation-ui/src/custom/docs/components/triplecard/Card.tsx b/documentation-ui/src/custom/docs/components/triplecard/Card.tsx
index c6ab309..2bcc328 100644
--- a/documentation-ui/src/custom/docs/components/triplecard/Card.tsx
+++ b/documentation-ui/src/custom/docs/components/triplecard/Card.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from 'src'
+import { cn } from '@/utils'
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
diff --git a/documentation-ui/src/custom/docs/scripts/nav/index.tsx b/documentation-ui/src/custom/docs/scripts/nav/index.tsx
index 4d55140..106428e 100644
--- a/documentation-ui/src/custom/docs/scripts/nav/index.tsx
+++ b/documentation-ui/src/custom/docs/scripts/nav/index.tsx
@@ -1,6 +1,6 @@
 
 import {createRoot} from "react-dom/client" 
-import { NavBar } from "../../components/navmenu";
+import { NavBar } from "@/custom/docs/components/navmenu";
 
   (() => {
     const mountElement = document.querySelector('.nexus-nav')
diff --git a/documentation-ui/src/custom/use-theme.ts b/documentation-ui/src/custom/use-theme.ts
index 4a1d146..fbbbdc6 100644
--- a/documentation-ui/src/custom/use-theme.ts
+++ b/documentation-ui/src/custom/use-theme.ts
@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import { getTheme, setTheme, subscribeToTheme } from 'src/utils/darkMode'
+import { getTheme, setTheme, subscribeToTheme } from '@/utils/darkMode'
 
 export const useTheme = () => {
   const [theme, setLocalTheme] = React.useState(
diff --git a/documentation-ui/tsconfig.json b/documentation-ui/tsconfig.json
index 065fbbf..3eaa363 100644
--- a/documentation-ui/tsconfig.json
+++ b/documentation-ui/tsconfig.json
@@ -19,6 +19,7 @@
     "baseUrl": ".",
     "moduleResolution": "bundler",
     "paths": {
+      "@/*": ["./src/*"],
       "src": ["./src/index.ts"],
       "src/*": ["./src/*"]
     },
diff --git a/documentation-ui/tsconfig.storybook.json b/documentation-ui/tsconfig.storybook.json
index 52dd54d..accdd1b 100644
--- a/documentation-ui/tsconfig.storybook.json
+++ b/documentation-ui/tsconfig.storybook.json
@@ -15,6 +15,7 @@
     "baseUrl": ".",
     "moduleResolution": "bundler",
     "paths": {
+      "@/*": ["./src/*"],
       "src": ["./src/index.ts"],
       "src/*": ["./src/*"]
     },
diff --git a/documentation-ui/vite.config.ts b/documentation-ui/vite.config.ts
index 16d5eb3..4f41898 100644
--- a/documentation-ui/vite.config.ts
+++ b/documentation-ui/vite.config.ts
@@ -5,6 +5,7 @@ export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
+      "@": "/src",
       src: "/src",
     },
   },