diff --git a/e2e/App.tsx b/e2e/App.tsx
index 8d58d9220f..6e43709c1f 100644
--- a/e2e/App.tsx
+++ b/e2e/App.tsx
@@ -28,7 +28,10 @@ const pagesToRender = Object.keys(modules)
       ? {
           Component: lazy(
             // oxlint-disable-next-line typescript/no-unsafe-return
-            async () => import(`./tests/${path?.split('/')[2]}/render.tsx`),
+            async () =>
+              import(
+                `./tests/${path?.split('/')[2]}/${path?.split('/')[3]}/render.tsx`
+              ),
           ),
           name: path.replace('.tsx', ''),
         }
@@ -55,9 +58,9 @@ const WelcomePage = () => (
       {pagesToRender.map(path => (
         <li key={path?.name}>
           <ReactRouterLink
-            to={{ pathname: path?.name?.split('/')[2]?.toLowerCase() ?? '' }}
+            to={{ pathname: path?.name?.split('/')[3]?.toLowerCase() ?? '' }}
           >
-            {path?.name?.split('/')[2]?.toLowerCase()}
+            {path?.name?.split('/')[3]?.toLowerCase()}
           </ReactRouterLink>
         </li>
       ))}
@@ -79,7 +82,7 @@ const App = () => (
                 <Route
                   element={<Element />}
                   key={path?.name}
-                  path={path?.name?.split('/')[2]?.toLowerCase()}
+                  path={path?.name?.split('/')[3]?.toLowerCase()}
                 />
               )
             }
diff --git a/e2e/Dockerfile b/e2e/Dockerfile
new file mode 100644
index 0000000000..fd40865935
--- /dev/null
+++ b/e2e/Dockerfile
@@ -0,0 +1,17 @@
+# this dockerfile will be used to generate the same screenshot for our CI.
+FROM mcr.microsoft.com/playwright:v1.58.2-jammy
+
+WORKDIR /build
+
+ARG TURBO_TOKEN=
+
+ENV TURBO_TOKEN ${TURBO_TOKEN}
+ENV CI=true
+
+COPY . .
+
+RUN npm install -g corepack@0.31.0
+RUN corepack enable
+RUN pnpm install --frozen-lockfile
+
+ENTRYPOINT ["pnpm", "run", "test:e2e"]
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
index 957ffd996b..cd0dcf3272 100644
--- a/e2e/playwright.config.ts
+++ b/e2e/playwright.config.ts
@@ -19,21 +19,32 @@ export default defineConfig({
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
+      name: 'e2e-chromium',
+      testDir: './tests/e2e',
       use: { ...devices['Desktop Chrome'] },
     },
     {
-      name: 'firefox',
+      name: 'e2e-firefox',
+      testDir: './tests/e2e',
       use: { ...devices['Desktop Firefox'] },
     },
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: 'e2e-webkit',
+      testDir: './tests/e2e',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+    {
+      name: 'screenshots-chromium',
+      testDir: './tests/screenshots',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
     },
   ],
   reporter: 'line',
   retries: isCI ? 2 : 0,
-  testDir: './tests',
   timeout: isCI ? Number(times['1min']) : undefined,
   use: {
     baseURL,
@@ -45,6 +56,7 @@ export default defineConfig({
     stderr: 'pipe',
     stdout: 'ignore',
     url: baseURL,
+    reuseExistingServer: true,
   },
   workers: isCI ? 1 : undefined,
 })
diff --git a/e2e/tests/componentsWithinModal/render.tsx b/e2e/tests/e2e/componentsWithinModal/render.tsx
similarity index 96%
rename from e2e/tests/componentsWithinModal/render.tsx
rename to e2e/tests/e2e/componentsWithinModal/render.tsx
index 37368a423c..bbe93bbb76 100644
--- a/e2e/tests/componentsWithinModal/render.tsx
+++ b/e2e/tests/e2e/componentsWithinModal/render.tsx
@@ -7,7 +7,7 @@ import {
 import { Button, Modal, Stack, Text, TextInput } from '@ultraviolet/ui'
 import { useState } from 'react'
 
-import { mockErrors } from '../../mocks/mockErrors'
+import { mockErrors } from '../../../mocks/mockErrors'
 
 const Render = () => {
   const methods = useForm<{ lastName: ''; color: '' }>()
diff --git a/e2e/tests/componentsWithinModal/test.spec.ts b/e2e/tests/e2e/componentsWithinModal/test.spec.ts
similarity index 100%
rename from e2e/tests/componentsWithinModal/test.spec.ts
rename to e2e/tests/e2e/componentsWithinModal/test.spec.ts
diff --git a/e2e/tests/selectableCardComplexChildren/CheckboxSelectableCard.tsx b/e2e/tests/e2e/selectableCardComplexChildren/CheckboxSelectableCard.tsx
similarity index 100%
rename from e2e/tests/selectableCardComplexChildren/CheckboxSelectableCard.tsx
rename to e2e/tests/e2e/selectableCardComplexChildren/CheckboxSelectableCard.tsx
diff --git a/e2e/tests/selectableCardComplexChildren/RadioSelectableCard.tsx b/e2e/tests/e2e/selectableCardComplexChildren/RadioSelectableCard.tsx
similarity index 100%
rename from e2e/tests/selectableCardComplexChildren/RadioSelectableCard.tsx
rename to e2e/tests/e2e/selectableCardComplexChildren/RadioSelectableCard.tsx
diff --git a/e2e/tests/selectableCardComplexChildren/ToggleSelectableCard.tsx b/e2e/tests/e2e/selectableCardComplexChildren/ToggleSelectableCard.tsx
similarity index 100%
rename from e2e/tests/selectableCardComplexChildren/ToggleSelectableCard.tsx
rename to e2e/tests/e2e/selectableCardComplexChildren/ToggleSelectableCard.tsx
diff --git a/e2e/tests/selectableCardComplexChildren/render.tsx b/e2e/tests/e2e/selectableCardComplexChildren/render.tsx
similarity index 100%
rename from e2e/tests/selectableCardComplexChildren/render.tsx
rename to e2e/tests/e2e/selectableCardComplexChildren/render.tsx
diff --git a/e2e/tests/selectableCardComplexChildren/test.spec.ts b/e2e/tests/e2e/selectableCardComplexChildren/test.spec.ts
similarity index 100%
rename from e2e/tests/selectableCardComplexChildren/test.spec.ts
rename to e2e/tests/e2e/selectableCardComplexChildren/test.spec.ts
diff --git a/e2e/tests/template/render.tsx b/e2e/tests/e2e/template/render.tsx
similarity index 100%
rename from e2e/tests/template/render.tsx
rename to e2e/tests/e2e/template/render.tsx
diff --git a/e2e/tests/template/test.spec.ts b/e2e/tests/e2e/template/test.spec.ts
similarity index 100%
rename from e2e/tests/template/test.spec.ts
rename to e2e/tests/e2e/template/test.spec.ts
diff --git a/e2e/tests/screenshots/ui-components-showcase/render.tsx b/e2e/tests/screenshots/ui-components-showcase/render.tsx
new file mode 100644
index 0000000000..aa67b95378
--- /dev/null
+++ b/e2e/tests/screenshots/ui-components-showcase/render.tsx
@@ -0,0 +1,455 @@
+import {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Chip,
+  DateInput,
+  Drawer,
+  EmptyState,
+  ExpandableCard,
+  Label,
+  Link,
+  List,
+  Loader,
+  Modal,
+  Notice,
+  NumberInput,
+  Pagination,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  Row,
+  SearchInput,
+  SelectInput,
+  Separator,
+  Skeleton,
+  Slider,
+  Stack,
+  Status,
+  StepList,
+  Stepper,
+  Table,
+  Tabs,
+  Tag,
+  Text,
+  TextArea,
+  TextInput,
+  TimeInput,
+  Toggle,
+  Tooltip,
+} from '@ultraviolet/ui'
+import { useState } from 'react'
+
+const UIComponentsShowcase = () => {
+  const [checkboxChecked, setCheckboxChecked] = useState(false)
+  const [radioValue, setRadioValue] = useState('option1')
+  const [toggleChecked, setToggleChecked] = useState(false)
+  const [sliderValue, setSliderValue] = useState(50)
+  const [selectValue, setSelectValue] = useState('')
+  const [textInputValue, setTextInputValue] = useState('')
+  const [numberValue, setNumberValue] = useState<number | null>(0)
+  const [dateValue, setDateValue] = useState<Date | null>(null)
+  const [timeValue, setTimeValue] = useState<Date | null>(null)
+  const [activeTab, setActiveTab] = useState('1')
+  const [searchValue, setSearchValue] = useState('')
+  const [expandedCard, setExpandedCard] = useState<string | null>(null)
+
+  return (
+    <Stack
+      gap={4}
+      style={{ padding: '40px', maxWidth: '1400px', margin: '0 auto' }}
+    >
+      <Text
+        as="h1"
+        variant="headingLarge"
+        style={{ textAlign: 'center', marginBottom: '40px' }}
+      >
+        UI Components Showcase
+      </Text>
+
+      {/* Basic Components */}
+      <Card>
+        <Stack gap={2}>
+          <Text as="h2" variant="heading">
+            Basic Components
+          </Text>
+          <Row templateColumns="1fr 1fr 1fr" gap={2}>
+            <Stack gap={2}>
+              <Label>Buttons</Label>
+              <Stack direction="row" gap={1}>
+                <Button variant="filled">Primary</Button>
+                <Button variant="outlined">Secondary</Button>
+                <Button variant="ghost">Tertiary</Button>
+              </Stack>
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>Badges & Tags</Label>
+              <Stack direction="row" gap={1}>
+                <Badge sentiment="primary">Primary</Badge>
+                <Badge sentiment="success">Success</Badge>
+                <Badge sentiment="warning">Warning</Badge>
+                <Badge sentiment="danger">Danger</Badge>
+              </Stack>
+              <Stack direction="row" gap={1}>
+                <Tag>Tag 1</Tag>
+                <Tag>Tag 2</Tag>
+              </Stack>
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>Avatars & Status</Label>
+              <Stack direction="row" gap={1}>
+                <Avatar shape="circle" text="UV" variant="text" />
+                <Avatar shape="circle" size="large" text="JD" variant="text" />
+              </Stack>
+              <Stack direction="row" gap={1}>
+                <Status sentiment="success" tooltip="Success" />
+                <Status sentiment="danger" tooltip="Error" />
+                <Status sentiment="warning" tooltip="Warning" />
+              </Stack>
+            </Stack>
+          </Row>
+        </Stack>
+      </Card>
+
+      {/* Form Components */}
+      <Card>
+        <Stack gap={2}>
+          <Text as="h2" variant="heading">
+            Form Components
+          </Text>
+          <Row templateColumns="1fr 1fr" gap={2}>
+            <Stack gap={2}>
+              <Label>Text Inputs</Label>
+              <TextInput
+                label="Text Input"
+                value={textInputValue}
+                onChangeValue={setTextInputValue}
+                placeholder="Enter text"
+              />
+              <TextArea
+                label="Text Area"
+                value={textInputValue}
+                onChange={setTextInputValue}
+                placeholder="Enter description"
+                rows={3}
+              />
+              <SearchInput
+                value={searchValue}
+                onChangeValue={setSearchValue}
+                onSearch={() => {}}
+                placeholder="Search..."
+              />
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>Number & Date Inputs</Label>
+              <NumberInput
+                label="Number Input"
+                value={numberValue}
+                onChange={setNumberValue}
+              />
+              <DateInput
+                label="Date Input"
+                value={dateValue}
+                onChange={setDateValue}
+              />
+              <TimeInput
+                label="Time Input"
+                value={timeValue}
+                onChange={date => date && setTimeValue(date)}
+              />
+              <SelectInput
+                label="Select"
+                value={selectValue}
+                onChange={setSelectValue}
+                options={[
+                  { value: 'option1', label: 'Option 1' },
+                  { value: 'option2', label: 'Option 2' },
+                  { value: 'option3', label: 'Option 3' },
+                ]}
+                placeholder="Select an option"
+              />
+            </Stack>
+          </Row>
+        </Stack>
+      </Card>
+
+      {/* Selection Controls */}
+      <Card>
+        <Stack gap={2}>
+          <Text as="h2" variant="heading">
+            Selection Controls
+          </Text>
+          <Row templateColumns="1fr 1fr 1fr 1fr" gap={2}>
+            <Stack gap={2}>
+              <Label>Checkbox</Label>
+              <Checkbox
+                checked={checkboxChecked}
+                onChange={() => setCheckboxChecked(!checkboxChecked)}
+              >
+                Checkbox label
+              </Checkbox>
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>Radio Group</Label>
+              <RadioGroup
+                value={radioValue}
+                onChange={e => setRadioValue(e.target.value)}
+              >
+                <Radio value="option1" label="Option 1" onChange={() => {}} />
+                <Radio value="option2" label="Option 2" onChange={() => {}} />
+                <Radio value="option3" label="Option 3" onChange={() => {}} />
+              </RadioGroup>
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>Toggle</Label>
+              <Toggle
+                checked={toggleChecked}
+                onChange={() => setToggleChecked(!toggleChecked)}
+                label="Toggle"
+              />
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>Slider</Label>
+              <Slider
+                value={sliderValue}
+                onChange={setSliderValue}
+                min={0}
+                max={100}
+                step={1}
+              />
+            </Stack>
+          </Row>
+        </Stack>
+      </Card>
+
+      {/* Feedback Components */}
+      <Card>
+        <Stack gap={2}>
+          <Text as="h2" variant="heading">
+            Feedback & Status
+          </Text>
+          <Stack gap={2}>
+            <Alert sentiment="info">This is an info alert</Alert>
+            <Alert sentiment="success">This is a success alert</Alert>
+            <Alert sentiment="warning">This is a warning alert</Alert>
+            <Alert sentiment="danger">This is an error alert</Alert>
+          </Stack>
+
+          <Row templateColumns="1fr 1fr 1fr" gap={2}>
+            <Stack gap={2}>
+              <Label>Notice</Label>
+              <Notice>Notice message</Notice>
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>Progress & Loaders</Label>
+              <ProgressBar value={60} label="Progress" />
+              <Stack direction="row" gap={2}>
+                <Loader size="small" />
+                <Loader size="medium" />
+                <Loader size="large" />
+              </Stack>
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>Skeleton</Label>
+              <Skeleton variant="blocks" length={1} />
+              <Skeleton variant="blocks" length={2} />
+              <Skeleton variant="blocks" length={3} />
+            </Stack>
+          </Row>
+        </Stack>
+      </Card>
+
+      {/* Navigation & Layout */}
+      <Card>
+        <Stack gap={2}>
+          <Text as="h2" variant="heading">
+            Navigation & Layout
+          </Text>
+          <Stack gap={2}>
+            <Tabs
+              selected={activeTab}
+              onChange={value => setActiveTab(String(value))}
+            >
+              <Tabs.Tab key="1" label="Tab 1">
+                Tab 1 content
+              </Tabs.Tab>
+              <Tabs.Tab key="2" label="Tab 2">
+                Tab 2 content
+              </Tabs.Tab>
+              <Tabs.Tab key="3" label="Tab 3">
+                Tab 3 content
+              </Tabs.Tab>
+            </Tabs>
+
+            <StepList>
+              <StepList.Item sentiment="success">Step 1</StepList.Item>
+              <StepList.Item sentiment="primary">Step 2</StepList.Item>
+              <StepList.Item sentiment="neutral">Step 3</StepList.Item>
+            </StepList>
+
+            <Stepper selected={2}>
+              <Stepper.Step title="Step 1" />
+              <Stepper.Step title="Step 2" />
+              <Stepper.Step title="Step 3" />
+            </Stepper>
+
+            <Pagination page={1} pageCount={10} onChange={() => {}} />
+          </Stack>
+        </Stack>
+      </Card>
+
+      {/* Data Display */}
+      <Card>
+        <Stack gap={2}>
+          <Text as="h2" variant="heading">
+            Data Display
+          </Text>
+          <Row templateColumns="1fr 1fr" gap={2}>
+            <Stack gap={2}>
+              <Label>Table</Label>
+              <Table
+                columns={[
+                  { label: 'Name' },
+                  { label: 'Age' },
+                  { label: 'Status' },
+                ]}
+              >
+                <Table.Body>
+                  <Table.Row id="1">
+                    <Table.Cell>John Doe</Table.Cell>
+                    <Table.Cell>28</Table.Cell>
+                    <Table.Cell>Active</Table.Cell>
+                  </Table.Row>
+                  <Table.Row id="2">
+                    <Table.Cell>Jane Smith</Table.Cell>
+                    <Table.Cell>34</Table.Cell>
+                    <Table.Cell>Inactive</Table.Cell>
+                  </Table.Row>
+                </Table.Body>
+              </Table>
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>List & Empty State</Label>
+              <List columns={[{ label: 'Title' }, { label: 'Description' }]}>
+                <List.Row id="1">
+                  <List.Cell>Item 1</List.Cell>
+                  <List.Cell>Description 1</List.Cell>
+                </List.Row>
+                <List.Row id="2">
+                  <List.Cell>Item 2</List.Cell>
+                  <List.Cell>Description 2</List.Cell>
+                </List.Row>
+                <List.Row id="3">
+                  <List.Cell>Item 3</List.Cell>
+                  <List.Cell>Description 3</List.Cell>
+                </List.Row>
+              </List>
+              <EmptyState
+                title="No data"
+                description="There is no data to display"
+              >
+                <Button variant="filled">Add Item</Button>
+              </EmptyState>
+            </Stack>
+          </Row>
+        </Stack>
+      </Card>
+
+      {/* Interactive Components */}
+      <Card>
+        <Stack gap={2}>
+          <Text as="h2" variant="heading">
+            Interactive Components
+          </Text>
+          <Row templateColumns="1fr 1fr" gap={2}>
+            <Stack gap={2}>
+              <Label>Expandable Cards</Label>
+              <ExpandableCard
+                expanded={expandedCard === '1'}
+                onToggleExpand={() =>
+                  setExpandedCard(expandedCard === '1' ? null : '1')
+                }
+                header="Expandable Card 1"
+              >
+                This is the content of expandable card 1
+              </ExpandableCard>
+              <ExpandableCard
+                expanded={expandedCard === '2'}
+                onToggleExpand={() =>
+                  setExpandedCard(expandedCard === '2' ? null : '2')
+                }
+                header="Expandable Card 2"
+              >
+                This is the content of expandable card 2
+              </ExpandableCard>
+            </Stack>
+
+            <Stack gap={2}>
+              <Label>Chips & Links</Label>
+              <Stack direction="row" gap={1}>
+                <Chip>Chip 1</Chip>
+                <Chip>Chip 2</Chip>
+              </Stack>
+              <Separator />
+              <Link href="#">Click me</Link>
+              <Separator />
+              <Tooltip text="This is a tooltip">
+                <Button variant="outlined">Hover me</Button>
+              </Tooltip>
+            </Stack>
+          </Row>
+        </Stack>
+      </Card>
+
+      {/* Modals & Overlays */}
+      <Card>
+        <Stack gap={2}>
+          <Text as="h2" variant="heading">
+            Modals & Overlays
+          </Text>
+          <Stack direction="row" gap={2}>
+            <Modal disclosure={<Button variant="filled">Open Modal</Button>}>
+              <Stack gap={2}>
+                <Text as="h3" variant="heading">
+                  Modal Title
+                </Text>
+                <Text as="p" variant="body">
+                  This is a modal dialog
+                </Text>
+                <TextInput label="Name" value="" onChangeValue={() => {}} />
+              </Stack>
+            </Modal>
+
+            <Drawer
+              disclosure={<Button variant="outlined">Open Drawer</Button>}
+            >
+              <Stack gap={2}>
+                <Text as="h3" variant="heading">
+                  Drawer Title
+                </Text>
+                <Text as="p" variant="body">
+                  This is a drawer
+                </Text>
+                <TextInput label="Field" value="" onChangeValue={() => {}} />
+              </Stack>
+            </Drawer>
+          </Stack>
+        </Stack>
+      </Card>
+    </Stack>
+  )
+}
+
+export default UIComponentsShowcase
diff --git a/e2e/tests/screenshots/ui-components-showcase/test.spec.ts b/e2e/tests/screenshots/ui-components-showcase/test.spec.ts
new file mode 100644
index 0000000000..b2083936dc
--- /dev/null
+++ b/e2e/tests/screenshots/ui-components-showcase/test.spec.ts
@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test'
+
+test('UI components showcase screenshot', async ({ page, baseURL }) => {
+  await page.goto(`${baseURL}/ui-components-showcase`)
+
+  // Wait for all components to load
+  await page.waitForLoadState('networkidle')
+
+  // Take a full page screenshot
+  await expect(page).toHaveScreenshot('ui-components-showcase-full.png', {
+    fullPage: true,
+    animations: 'disabled',
+  })
+})
diff --git a/e2e/tests/screenshots/ui-components-showcase/test.spec.ts-snapshots/ui-components-showcase-full-screenshots-chromium-darwin.png b/e2e/tests/screenshots/ui-components-showcase/test.spec.ts-snapshots/ui-components-showcase-full-screenshots-chromium-darwin.png
new file mode 100644
index 0000000000..94eb70f888
Binary files /dev/null and b/e2e/tests/screenshots/ui-components-showcase/test.spec.ts-snapshots/ui-components-showcase-full-screenshots-chromium-darwin.png differ
diff --git a/packages/themes/global.d.ts b/packages/themes/global.d.ts
new file mode 100644
index 0000000000..98e1d57c3c
--- /dev/null
+++ b/packages/themes/global.d.ts
@@ -0,0 +1,4 @@
+declare module '@ultraviolet/themes/global' {
+  const content: string
+  export default content
+}
diff --git a/packages/themes/package.json b/packages/themes/package.json
index ba335a4ed9..5e78edbc05 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -19,8 +19,7 @@
   ],
   "type": "module",
   "sideEffects": [
-    "**/*.css",
-    "**/*.css.ts"
+    "/global"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -36,7 +35,10 @@
       "import": "./dist/themes/console/*/index.js",
       "require": "./dist/themes/console/*/index.js"
     },
-    "./global": "./dist/themes.css",
+    "./global": {
+      "types": "./global.d.ts",
+      "default": "./dist/themes.css"
+    },
     "./theme.css": "./dist/themes.css"
   },
   "publishConfig": {