diff --git a/.changeset/semantic-color-tokens.md b/.changeset/semantic-color-tokens.md
new file mode 100644
index 000000000..e0cef9738
--- /dev/null
+++ b/.changeset/semantic-color-tokens.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": minor
+---
+
+feat: Remove `bootstrap`, `react-bootstrap` and unused `react-bootstrap-range-slider`, adopt semantic tokens, and improve Mantine UI usage
diff --git a/packages/app/package.json b/packages/app/package.json
index 504515111..e79e0a29f 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -50,7 +50,6 @@
     "@uiw/codemirror-themes": "^4.23.3",
     "@uiw/react-codemirror": "^4.23.3",
     "@xyflow/react": "^12.9.0",
-    "bootstrap": "^5.1.3",
     "chrono-node": "^2.7.8",
     "classnames": "^2.3.1",
     "crypto-js": "^4.2.0",
@@ -76,8 +75,6 @@
     "nuqs": "^1.17.0",
     "object-hash": "^3.0.0",
     "react": "18.3.1",
-    "react-bootstrap": "^2.4.0",
-    "react-bootstrap-range-slider": "^3.0.8",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.3.1",
     "react-error-boundary": "^3.1.4",
diff --git a/packages/app/pages/_app.tsx b/packages/app/pages/_app.tsx
index 5d9086568..bac4fce90 100644
--- a/packages/app/pages/_app.tsx
+++ b/packages/app/pages/_app.tsx
@@ -5,7 +5,6 @@ import Head from 'next/head';
 import { NextAdapter } from 'next-query-params';
 import randomUUID from 'crypto-randomuuid';
 import { enableMapSet } from 'immer';
-import SSRProvider from 'react-bootstrap/SSRProvider';
 import { QueryParamProvider } from 'use-query-params';
 import HyperDX from '@hyperdx/browser';
 import { ColorSchemeScript } from '@mantine/core';
@@ -96,13 +95,11 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   }, []);
 
   useEffect(() => {
-    document.documentElement.className =
-      userPreferences.theme === 'dark' ? 'hdx-theme-dark' : 'hdx-theme-light';
     // TODO: Remove after migration to Mantine
     document.body.style.fontFamily = userPreferences.font
       ? `"${userPreferences.font}", sans-serif`
       : '"IBM Plex Mono"';
-  }, [userPreferences.theme, userPreferences.font]);
+  }, [userPreferences.font]);
 
   const getLayout = Component.getLayout ?? (page => page);
 
@@ -117,23 +114,26 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         />
         <meta name="theme-color" content="#25292e"></meta>
         <meta name="google" content="notranslate" />
-        <ColorSchemeScript forceColorScheme="dark" />
+        <ColorSchemeScript
+          forceColorScheme={userPreferences.theme === 'dark' ? 'dark' : 'light'}
+        />
       </Head>
 
-      <SSRProvider>
-        <HDXQueryParamProvider>
-          <QueryParamProvider adapter={NextAdapter}>
-            <QueryClientProvider client={queryClient}>
-              <ThemeWrapper fontFamily={userPreferences.font}>
-                {getLayout(<Component {...pageProps} />)}
-                {confirmModal}
-              </ThemeWrapper>
-              <ReactQueryDevtools initialIsOpen={true} />
-              {background}
-            </QueryClientProvider>
-          </QueryParamProvider>
-        </HDXQueryParamProvider>
-      </SSRProvider>
+      <HDXQueryParamProvider>
+        <QueryParamProvider adapter={NextAdapter}>
+          <QueryClientProvider client={queryClient}>
+            <ThemeWrapper
+              fontFamily={userPreferences.font}
+              colorScheme={userPreferences.theme === 'dark' ? 'dark' : 'light'}
+            >
+              {getLayout(<Component {...pageProps} />)}
+              {confirmModal}
+            </ThemeWrapper>
+            <ReactQueryDevtools initialIsOpen={true} />
+            {background}
+          </QueryClientProvider>
+        </QueryParamProvider>
+      </HDXQueryParamProvider>
     </React.Fragment>
   );
 }
diff --git a/packages/app/src/AlertsPage.tsx b/packages/app/src/AlertsPage.tsx
index cf1054904..ae3a1471f 100644
--- a/packages/app/src/AlertsPage.tsx
+++ b/packages/app/src/AlertsPage.tsx
@@ -58,7 +58,7 @@ function AlertHistoryCardList({ history }: { history: AlertHistory[] }) {
   return (
     <div className={styles.historyCardWrapper}>
       {paddingItems.map((_, index) => (
-        <Tooltip label="No data" color="dark" withArrow key={index}>
+        <Tooltip label="No data" withArrow key={index}>
           <div className={styles.historyCard} />
         </Tooltip>
       ))}
@@ -84,7 +84,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
           {alert.dashboard?.name}
           {tileName ? (
             <>
-              <i className="bi bi-chevron-right fs-8 mx-1 text-slate-400" />
+              <i className="bi bi-chevron-right fs-8 mx-1 " />
               {tileName}
             </>
           ) : null}
@@ -123,7 +123,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
       <>
         If value is {alert.thresholdType === 'above' ? 'over' : 'under'}{' '}
         <span className="fw-bold">{alert.threshold}</span>
-        <span className="text-slate-400">&middot;</span>
+        <span>&middot;</span>
       </>
     );
   }, [alert]);
@@ -172,16 +172,16 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
               className={styles.alertLink}
               title={linkTitle}
             >
-              <i className={`bi ${alertIcon} text-slate-200 me-2 fs-8`} />
+              <i className={`bi ${alertIcon} me-2 fs-8`} />
               {alertName}
             </Link>
           </div>
-          <div className="text-slate-400 fs-8 d-flex gap-2">
+          <div className="fs-8 d-flex gap-2">
             {alertType}
             {notificationMethod}
             {alert.createdBy && (
               <>
-                <span className="text-slate-400">&middot;</span>
+                <span>&middot;</span>
                 <span>
                   Created by {alert.createdBy.name || alert.createdBy.email}
                 </span>
@@ -219,7 +219,7 @@ function AlertCardList({ alerts }: { alerts: AlertsPageItem[] }) {
           <i className="bi bi-check-lg"></i> OK
         </div>
         {okData.length === 0 && (
-          <div className="text-center text-slate-400 my-4 fs-8">No alerts</div>
+          <div className="text-center my-4 fs-8">No alerts</div>
         )}
         {okData.map((alert, index) => (
           <AlertDetails key={index} alert={alert} />
@@ -243,7 +243,7 @@ export default function AlertsPage() {
       <div className="my-4">
         <Container maw={1500}>
           <Alert
-            icon={<i className="bi bi-info-circle-fill text-slate-400" />}
+            icon={<i className="bi bi-info-circle-fill " />}
             color="gray"
             py="xs"
             mt="md"
@@ -259,19 +259,15 @@ export default function AlertsPage() {
             from dashboard charts and saved searches.
           </Alert>
           {isLoading ? (
-            <div className="text-center text-slate-400 my-4 fs-8">
-              Loading...
-            </div>
+            <div className="text-center my-4 fs-8">Loading...</div>
           ) : isError ? (
-            <div className="text-center text-slate-400 my-4 fs-8">Error</div>
+            <div className="text-center my-4 fs-8">Error</div>
           ) : alerts?.length ? (
             <>
               <AlertCardList alerts={alerts} />
             </>
           ) : (
-            <div className="text-center text-slate-400 my-4 fs-8">
-              No alerts created yet
-            </div>
+            <div className="text-center my-4 fs-8">No alerts created yet</div>
           )}
         </Container>
       </div>
diff --git a/packages/app/src/AppNav.components.tsx b/packages/app/src/AppNav.components.tsx
index 620b31d0b..ef443349e 100644
--- a/packages/app/src/AppNav.components.tsx
+++ b/packages/app/src/AppNav.components.tsx
@@ -33,10 +33,8 @@ export const AppNavContext = React.createContext<{
 
 export const AppNavCloudBanner = () => {
   return (
-    <div className="my-3 bg-hdx-dark rounded p-2 text-center">
-      <span className="text-slate-300 fs-8">
-        Ready to deploy on ClickHouse Cloud?
-      </span>
+    <div className="my-3 bg-muted rounded p-2 text-center">
+      <span className="fs-8">Ready to deploy on ClickHouse Cloud?</span>
       <div className="mt-2 mb-2">
         <Link
           href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started#deploy-with-clickhouse-cloud"
@@ -84,16 +82,9 @@ export const AppNavUserMenu = ({
       <Menu.Target>
         <Paper
           data-testid="user-menu-trigger"
-          m="sm"
-          mt={8}
-          px={8}
-          py={4}
-          radius="md"
-          {...(isCollapsed && {
-            p: 2,
-            bg: 'transparent',
+          className={cx(styles.userMenuTrigger, {
+            [styles.userMenuTriggerCollapsed]: isCollapsed,
           })}
-          className={styles.appNavMenu}
         >
           <Group gap="xs" wrap="nowrap" miw={0}>
             <Avatar size="sm" radius="xl" color="green">
@@ -141,7 +132,7 @@ export const AppNavUserMenu = ({
                     </Text>
                   </div>
                 </Tooltip>
-                <Icon name="chevron-right" className="fs-8 text-slate-400" />
+                <Icon name="chevron-right" className="fs-8 " />
               </>
             )}
           </Group>
@@ -213,21 +204,13 @@ export const AppNavHelpMenu = ({
   ] = useDisclosure(false);
 
   // const isTeamHasNoData = useIsTeamHasNoData();
-  const size = 28;
 
   return (
     <>
       <Paper
-        mb={8}
-        ml="sm"
-        withBorder
-        w={size}
-        h={size}
-        radius="xl"
-        {...(isCollapsed && {
-          ml: 'sm',
+        className={cx(styles.helpMenuTrigger, {
+          [styles.helpMenuTriggerCollapsed]: isCollapsed,
         })}
-        className={styles.appNavMenu}
       >
         <Menu
           withArrow
@@ -237,12 +220,7 @@ export const AppNavHelpMenu = ({
         >
           <Menu.Target>
             <UnstyledButton data-testid="help-menu-trigger" w="100%">
-              <Group
-                align="center"
-                justify="center"
-                h={size}
-                className="text-slate-200 "
-              >
+              <Group align="center" justify="center" h={28}>
                 <Icon name="question-lg" />
               </Group>
             </UnstyledButton>
@@ -251,7 +229,7 @@ export const AppNavHelpMenu = ({
             <Menu.Label>
               Help{' '}
               {version && (
-                <Text size="xs" c="gray.7" component="span">
+                <Text size="xs" component="span">
                   v{version}
                 </Text>
               )}
@@ -295,7 +273,7 @@ export const AppNavHelpMenu = ({
 export const AppNavLink = ({
   className,
   label,
-  iconName,
+  icon,
   href,
   isExpanded,
   onToggle,
@@ -303,7 +281,7 @@ export const AppNavLink = ({
 }: {
   className?: string;
   label: React.ReactNode;
-  iconName: string;
+  icon: React.ReactNode;
   href: string;
   isExpanded?: boolean;
   onToggle?: () => void;
@@ -320,37 +298,26 @@ export const AppNavLink = ({
         data-testid={testId}
         href={href}
         className={cx(
+          styles.listLink,
+          { [styles.listLinkActive]: pathname?.includes(href) },
           className,
-          'text-decoration-none d-flex justify-content-between align-items-center fs-7 text-muted-hover',
-          { 'fw-600 text-success': pathname?.includes(href) },
         )}
+        style={{ display: 'flex', alignItems: 'center' }}
       >
-        <span>
-          <i className={`bi ${iconName} pe-2 text-slate-300`} />{' '}
-          {!isCollapsed && (
-            <span>
-              {label}
-              {isBeta && (
-                <Badge
-                  size="xs"
-                  ms="xs"
-                  color="gray.4"
-                  autoContrast
-                  radius="sm"
-                  className="align-text-bottom"
-                >
-                  Beta
-                </Badge>
-              )}
-            </span>
-          )}
+        <span style={{ display: 'flex', alignItems: 'center' }}>
+          <span className={styles.linkIcon}>{icon}</span>
+          {!isCollapsed && <span>{label}</span>}
         </span>
       </Link>
+      {!isCollapsed && isBeta && (
+        <Badge size="xs" radius="sm" color="gray" style={{ marginRight: 8 }}>
+          Beta
+        </Badge>
+      )}
       {!isCollapsed && onToggle && (
         <ActionIcon
           data-testid={`${testId}-toggle`}
           variant="subtle"
-          color="dark.2"
           size="sm"
           onClick={onToggle}
         >
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index 7dbc8977d..8bdab0395 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -13,6 +13,7 @@ import {
 import HyperDX from '@hyperdx/browser';
 import { AlertState } from '@hyperdx/common-utils/dist/types';
 import {
+  ActionIcon,
   Badge,
   Box,
   Button,
@@ -24,6 +25,16 @@ import {
   ScrollArea,
 } from '@mantine/core';
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
+import {
+  IconBell,
+  IconChartDots,
+  IconDeviceLaptop,
+  IconLayoutGrid,
+  IconLayoutSidebarLeftCollapse,
+  IconSettings,
+  IconSitemap,
+  IconTable,
+} from '@tabler/icons-react';
 
 import {
   useCreateDashboard,
@@ -66,10 +77,10 @@ function NewDashboardButton() {
         <Button
           data-testid="create-dashboard-button"
           variant="transparent"
+          color="var(--color-text)"
           py="0px"
           px="sm"
           fw={400}
-          color="gray.2"
         >
           <span className="pe-2">+</span> Create Dashboard
         </Button>
@@ -81,10 +92,10 @@ function NewDashboardButton() {
     <Button
       data-testid="create-dashboard-button"
       variant="transparent"
+      color="var(--color-text)"
       py="0px"
       px="sm"
       fw={400}
-      color="gray.2"
       onClick={() =>
         createDashboard.mutate(
           {
@@ -144,7 +155,7 @@ function SearchInput({
       placeholder={placeholder}
       value={value}
       onChange={e => onChange(e.currentTarget.value)}
-      leftSection={<i className="bi bi-search fs-8 ps-1 text-slate-400" />}
+      leftSection={<i className="bi bi-search fs-8 ps-1 " />}
       onKeyDown={handleKeyDown}
       rightSection={
         value ? (
@@ -461,8 +472,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         key={savedSearch.id}
         tabIndex={0}
         className={cx(
-          styles.listLink,
-          savedSearch.id === query.savedSearchId && styles.listLinkActive,
+          styles.nestedLink,
+          savedSearch.id === query.savedSearchId && styles.nestedLinkActive,
         )}
         title={savedSearch.name}
         draggable
@@ -524,8 +535,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         href={`/dashboards/${dashboard.id}`}
         key={dashboard.id}
         tabIndex={0}
-        className={cx(styles.listLink, {
-          [styles.listLinkActive]: dashboard.id === query.dashboardId,
+        className={cx(styles.nestedLink, {
+          [styles.nestedLinkActive]: dashboard.id === query.dashboardId,
         })}
         draggable
         data-dashboardid={dashboard.id}
@@ -606,7 +617,6 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                     <Badge
                       size="xs"
                       color="gray"
-                      bg="gray.8"
                       variant="light"
                       fw="normal"
                       title="Showing time in UTC"
@@ -617,19 +627,16 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                 </Group>
               )}
             </Link>
-            <Button
-              variant="subtle"
-              color="gray.4"
-              p={isCollapsed ? '0px' : '8px'}
-              h="32px"
-              size="md"
+            <ActionIcon
+              variant="transparent"
+              size="sm"
               className={isCollapsed ? 'mt-4' : ''}
-              style={{ marginRight: -4 }}
+              style={{ marginRight: -4, marginLeft: -4 }}
               title="Collapse/Expand Navigation"
               onClick={() => setIsPreferCollapsed((v: boolean) => !v)}
             >
-              <i className="bi bi-layout-sidebar"></i>
-            </Button>
+              <IconLayoutSidebarLeftCollapse size={16} />
+            </ActionIcon>
           </div>
         </div>
         <ScrollArea
@@ -647,7 +654,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
             <div className="mt-2">
               <AppNavLink
                 label="Search"
-                iconName="bi-layout-text-sidebar-reverse"
+                icon={<IconTable size={16} />}
                 href="/search"
                 className={cx({
                   'text-success fw-600':
@@ -667,13 +674,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                 <Collapse in={isSearchExpanded}>
                   <div className={styles.list}>
                     {isLogViewsLoading ? (
-                      <Loader
-                        color="gray.7"
-                        variant="dots"
-                        mx="md"
-                        my="xs"
-                        size="sm"
-                      />
+                      <Loader variant="dots" mx="md" my="xs" size="sm" />
                     ) : (
                       !IS_LOCAL_MODE && (
                         <>
@@ -719,28 +720,32 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
               <AppNavLink
                 label="Chart Explorer"
                 href="/chart"
-                iconName="bi-graph-up"
+                icon={<IconChartDots size={16} />}
               />
               {!IS_LOCAL_MODE && (
-                <AppNavLink label="Alerts" href="/alerts" iconName="bi-bell" />
+                <AppNavLink
+                  label="Alerts"
+                  href="/alerts"
+                  icon={<IconBell size={16} />}
+                />
               )}
               <AppNavLink
                 label="Client Sessions"
                 href="/sessions"
-                iconName="bi-laptop"
+                icon={<IconDeviceLaptop size={16} />}
               />
 
               <AppNavLink
                 label="Service Map"
                 href="/service-map"
-                iconName="bi-diagram-2-fill"
+                icon={<IconSitemap size={16} />}
                 isBeta
               />
 
               <AppNavLink
                 label="Dashboards"
                 href="/dashboards"
-                iconName="bi-grid-1x2"
+                icon={<IconLayoutGrid size={16} />}
                 isExpanded={isDashboardsExpanded}
                 onToggle={() => setIsDashboardExpanded(!isDashboardsExpanded)}
               />
@@ -751,13 +756,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                     <NewDashboardButton />
 
                     {isDashboardsLoading ? (
-                      <Loader
-                        color="gray.7"
-                        variant="dots"
-                        mx="md"
-                        my="xs"
-                        size="sm"
-                      />
+                      <Loader variant="dots" mx="md" my="xs" size="sm" />
                     ) : (
                       !IS_LOCAL_MODE && (
                         <>
@@ -811,8 +810,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                       <Link
                         href={`/clickhouse`}
                         tabIndex={0}
-                        className={cx(styles.listLink, {
-                          [styles.listLinkActive]:
+                        className={cx(styles.nestedLink, {
+                          [styles.nestedLinkActive]:
                             pathname.startsWith('/clickhouse'),
                         })}
                       >
@@ -821,8 +820,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                       <Link
                         href={`/services`}
                         tabIndex={0}
-                        className={cx(styles.listLink, {
-                          [styles.listLinkActive]:
+                        className={cx(styles.nestedLink, {
+                          [styles.nestedLinkActive]:
                             pathname.startsWith('/services'),
                         })}
                       >
@@ -832,8 +831,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                         <Link
                           href={`/kubernetes`}
                           tabIndex={0}
-                          className={cx(styles.listLink, {
-                            [styles.listLinkActive]:
+                          className={cx(styles.nestedLink, {
+                            [styles.nestedLinkActive]:
                               pathname.startsWith('/kubernetes'),
                           })}
                           data-testid="k8s-dashboard-nav-link"
@@ -851,7 +850,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
                   <AppNavLink
                     label="Team Settings"
                     href="/team"
-                    iconName="bi-gear"
+                    icon={<IconSettings size={16} />}
                   />
                 </Box>
               )}
@@ -871,11 +870,9 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         </ScrollArea>
 
         <div
+          className={styles.bottomSection}
           style={{
             width: navWidth,
-            position: 'absolute',
-            bottom: 0,
-            pointerEvents: 'none',
           }}
         >
           <AppNavHelpMenu
diff --git a/packages/app/src/AuthPage.tsx b/packages/app/src/AuthPage.tsx
index ff9137785..70f03870f 100644
--- a/packages/app/src/AuthPage.tsx
+++ b/packages/app/src/AuthPage.tsx
@@ -124,10 +124,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
       <LandingHeader activeKey={`/${action}`} fixed />
       <div className="d-flex justify-content-center align-items-center vh-100">
         <div style={{ width: '26rem' }}>
-          <div
-            className="text-center mb-2 fs-5 text-slate-300"
-            style={{ marginTop: -30 }}
-          >
+          <div className="text-center mb-2 fs-5 " style={{ marginTop: -30 }}>
             {config.IS_OSS && isRegister
               ? 'Setup '
               : isRegister
@@ -136,7 +133,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
             <span className="text-success fw-bold">HyperDX</span>
           </div>
           {action === 'login' && (
-            <div className="text-center mb-2 text-slate-300">Welcome back!</div>
+            <div className="text-center mb-2 ">Welcome back!</div>
           )}
           {isRegister && config.IS_OSS === true && (
             <div className="text-center mb-2 text-muted">
@@ -187,7 +184,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
                         placeholder="Confirm Password"
                         {...form.confirmPassword}
                       />
-                      <Notification color="gray.7" withCloseButton={false}>
+                      <Notification withCloseButton={false}>
                         <PasswordCheck password={currentPassword} />
                       </Notification>
                     </>
@@ -243,19 +240,13 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
               )}
 
               {isRegister && config.IS_OSS === false && (
-                <div
-                  data-test-id="login-link"
-                  className="text-center fs-8 text-slate-400"
-                >
+                <div data-test-id="login-link" className="text-center fs-8 ">
                   Already have an account? <Link href="/login">Log in</Link>{' '}
                   instead.
                 </div>
               )}
               {action === 'login' && config.IS_OSS === false && (
-                <div
-                  data-test-id="register-link"
-                  className="text-center fs-8 text-slate-400"
-                >
+                <div data-test-id="register-link" className="text-center fs-8 ">
                   Don{"'"}t have an account yet?{' '}
                   <Link href="/register">Register</Link> instead.
                 </div>
diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index 8ad602368..41afb53b9 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Fuse from 'fuse.js';
-import { OverlayTrigger } from 'react-bootstrap';
-import { Textarea, UnstyledButton } from '@mantine/core';
+import { Popover, Textarea, UnstyledButton } from '@mantine/core';
 
 import { useQueryHistory } from '@/utils';
 
@@ -131,210 +130,198 @@ export default function AutocompleteInput({
   const ref = useRef<HTMLDivElement>(null);
 
   return (
-    <OverlayTrigger
-      rootClose
-      onToggle={opened => {
-        // if opened is transitioning to false, but input is focused, ignore it
-        if (!opened && isSearchInputFocused) {
-          return;
-        }
-
-        setIsInputDropdownOpen(opened);
+    <Popover
+      opened={isInputDropdownOpen}
+      onChange={setIsInputDropdownOpen}
+      position="bottom-start"
+      offset={8}
+      width="target"
+      withinPortal
+      closeOnClickOutside
+      closeOnEscape
+      styles={{
+        dropdown: {
+          maxWidth:
+            (inputRef.current?.clientWidth || 0) > 300
+              ? inputRef.current?.clientWidth
+              : 720,
+          width: '100%',
+          zIndex,
+        },
       }}
-      show={isInputDropdownOpen}
-      placement="bottom-start"
-      delay={{ show: 0, hide: 0 }}
-      overlay={({ style, ...props }) => (
-        <div
-          className="bg-body border border-dark rounded"
+    >
+      <Popover.Target>
+        <Textarea
+          ref={inputRef}
+          placeholder={placeholder}
+          className="fs-8"
+          value={value}
+          size={size}
+          autosize
+          minRows={1}
+          maxRows={4}
           style={{
-            ...style,
-            maxWidth:
-              (inputRef.current?.clientWidth || 0) > 300
-                ? inputRef.current?.clientWidth
-                : 720,
-            width: '100%',
-            zIndex,
+            flexGrow: 1,
+            resize: 'none',
           }}
-          {...props}
-        >
-          {aboveSuggestions != null && (
-            <div className="d-flex p-2 flex-wrap px-3">{aboveSuggestions}</div>
-          )}
-          <div>
-            {suggestedProperties.length > 0 && (
-              <div className="border-top border-dark fs-8 py-2">
-                <div className="d-flex justify-content-between px-3 mb-2">
-                  <div className="me-2 text-light">{suggestionsHeader}</div>
-                  {suggestedProperties.length > suggestionsLimit && (
-                    <div className="text-muted">
-                      (Showing Top {suggestionsLimit})
-                    </div>
-                  )}
-                </div>
-                {suggestedProperties
-                  .slice(0, suggestionsLimit)
-                  .map(({ value, label }, i) => (
-                    <div
-                      className={`py-2 px-3 ${
-                        selectedAutocompleteIndex === i ? 'bg-hdx-dark' : ''
-                      }`}
-                      role="button"
-                      key={value}
-                      onMouseOver={() => {
-                        setSelectedAutocompleteIndex(i);
-                      }}
-                      onClick={() => {
-                        onAcceptSuggestion(value);
-                      }}
-                    >
-                      <span className="me-1">{label}</span>
-                    </div>
-                  ))}
-              </div>
-            )}
-          </div>
-          {belowSuggestions != null && (
-            <div className="border-top border-dark bg-body px-3 pt-2 pb-1 mt-2 fs-8 d-flex align-items-center text-muted flex-wrap">
-              {belowSuggestions}
-            </div>
-          )}
-          <div>
-            {showSearchHistory && (
-              <div className="border-top border-dark fs-8 py-2">
-                <div className="text-muted fs-8 fw-bold me-1 px-3">
-                  Search History:
-                </div>
-                {queryHistoryList.map(({ value, label }, i) => {
-                  return (
-                    <UnstyledButton
-                      className={`d-block w-100 text-start text-muted fw-normal px-3 py-2 fs-8 ${
-                        selectedQueryHistoryIndex === i ? 'bg-hdx-dark' : ''
-                      }`}
-                      key={value}
-                      onMouseOver={() => setSelectedQueryHistoryIndex(i)}
-                      onClick={() => onSelectSearchHistory(value)}
-                    >
-                      <span className="me-1 text-truncate">{label}</span>
-                    </UnstyledButton>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      popperConfig={{
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [0, 8],
-            },
-          },
-        ],
-      }}
-      trigger={[]}
-    >
-      <Textarea
-        ref={inputRef}
-        placeholder={placeholder}
-        className="fs-8"
-        value={value}
-        size={size}
-        autosize
-        minRows={1}
-        maxRows={4}
-        style={{
-          flexGrow: 1,
-          resize: 'none',
-        }}
-        data-testid={dataTestId}
-        onChange={e => onChange(e.target.value)}
-        onFocus={() => {
-          setSelectedAutocompleteIndex(-1);
-          setSelectedQueryHistoryIndex(-1);
-          setIsSearchInputFocused(true);
-        }}
-        onBlur={() => {
-          setSelectedAutocompleteIndex(-1);
-          setSelectedQueryHistoryIndex(-1);
-          setIsSearchInputFocused(false);
-        }}
-        onKeyDown={e => {
-          if (e.key === 'Escape' && e.target instanceof HTMLTextAreaElement) {
-            e.target.blur();
-          }
-
-          // Autocomplete Navigation/Acceptance Keys
-          if (e.key === 'Tab' && e.target instanceof HTMLTextAreaElement) {
-            if (
-              suggestedProperties.length > 0 &&
-              selectedAutocompleteIndex < suggestedProperties.length &&
-              selectedAutocompleteIndex >= 0
-            ) {
+          data-testid={dataTestId}
+          onChange={e => onChange(e.target.value)}
+          onFocus={() => {
+            setSelectedAutocompleteIndex(-1);
+            setSelectedQueryHistoryIndex(-1);
+            setIsSearchInputFocused(true);
+          }}
+          onBlur={() => {
+            setSelectedAutocompleteIndex(-1);
+            setSelectedQueryHistoryIndex(-1);
+            setIsSearchInputFocused(false);
+          }}
+          onKeyDown={e => {
+            if (e.key === 'Escape' && e.target instanceof HTMLTextAreaElement) {
               e.preventDefault();
-              onAcceptSuggestion(
-                suggestedProperties[selectedAutocompleteIndex].value,
-              );
+              setIsInputDropdownOpen(false);
+              e.target.blur();
             }
-          }
-          if (e.key === 'Enter' && e.target instanceof HTMLTextAreaElement) {
-            if (
-              suggestedProperties.length > 0 &&
-              selectedAutocompleteIndex < suggestedProperties.length &&
-              selectedAutocompleteIndex >= 0
-            ) {
-              e.preventDefault();
-              onAcceptSuggestion(
-                suggestedProperties[selectedAutocompleteIndex].value,
-              );
-            } else {
-              // Allow shift+enter to still create new lines
-              if (!e.shiftKey) {
+
+            // Autocomplete Navigation/Acceptance Keys
+            if (e.key === 'Tab' && e.target instanceof HTMLTextAreaElement) {
+              if (
+                suggestedProperties.length > 0 &&
+                selectedAutocompleteIndex < suggestedProperties.length &&
+                selectedAutocompleteIndex >= 0
+              ) {
+                e.preventDefault();
+                onAcceptSuggestion(
+                  suggestedProperties[selectedAutocompleteIndex].value,
+                );
+              }
+            }
+            if (e.key === 'Enter' && e.target instanceof HTMLTextAreaElement) {
+              if (
+                suggestedProperties.length > 0 &&
+                selectedAutocompleteIndex < suggestedProperties.length &&
+                selectedAutocompleteIndex >= 0
+              ) {
                 e.preventDefault();
-                if (queryHistoryType && value) {
-                  setQueryHistory(value);
+                onAcceptSuggestion(
+                  suggestedProperties[selectedAutocompleteIndex].value,
+                );
+              } else {
+                // Allow shift+enter to still create new lines
+                if (!e.shiftKey) {
+                  e.preventDefault();
+                  if (queryHistoryType && value) {
+                    setQueryHistory(value);
+                  }
+                  onSubmit?.();
                 }
-                onSubmit?.();
               }
             }
-          }
-          if (
-            e.key === 'ArrowDown' &&
-            e.target instanceof HTMLTextAreaElement
-          ) {
-            if (suggestedProperties.length > 0) {
-              setSelectedAutocompleteIndex(
-                Math.min(
-                  selectedAutocompleteIndex + 1,
-                  suggestedProperties.length - 1,
-                  suggestionsLimit - 1,
-                ),
-              );
+            if (
+              e.key === 'ArrowDown' &&
+              e.target instanceof HTMLTextAreaElement
+            ) {
+              if (suggestedProperties.length > 0) {
+                setSelectedAutocompleteIndex(
+                  Math.min(
+                    selectedAutocompleteIndex + 1,
+                    suggestedProperties.length - 1,
+                    suggestionsLimit - 1,
+                  ),
+                );
+              }
             }
-          }
-          if (e.key === 'ArrowUp' && e.target instanceof HTMLTextAreaElement) {
-            if (suggestedProperties.length > 0) {
-              setSelectedAutocompleteIndex(
-                Math.max(selectedAutocompleteIndex - 1, 0),
-              );
+            if (
+              e.key === 'ArrowUp' &&
+              e.target instanceof HTMLTextAreaElement
+            ) {
+              if (suggestedProperties.length > 0) {
+                setSelectedAutocompleteIndex(
+                  Math.max(selectedAutocompleteIndex - 1, 0),
+                );
+              }
             }
+          }}
+          rightSectionWidth={ref.current?.clientWidth ?? 'auto'}
+          rightSection={
+            language != null && onLanguageChange != null ? (
+              <div ref={ref}>
+                <InputLanguageSwitch
+                  showHotkey={showHotkey && isSearchInputFocused}
+                  language={language}
+                  onLanguageChange={onLanguageChange}
+                />
+              </div>
+            ) : undefined
           }
-        }}
-        rightSectionWidth={ref.current?.clientWidth ?? 'auto'}
-        rightSection={
-          language != null && onLanguageChange != null ? (
-            <div ref={ref}>
-              <InputLanguageSwitch
-                showHotkey={showHotkey && isSearchInputFocused}
-                language={language}
-                onLanguageChange={onLanguageChange}
-              />
+        />
+      </Popover.Target>
+      <Popover.Dropdown className="p-0">
+        {aboveSuggestions != null && (
+          <div className="d-flex p-2 flex-wrap px-3">{aboveSuggestions}</div>
+        )}
+        <div>
+          {suggestedProperties.length > 0 && (
+            <div className="border-top border-dark fs-8 py-2">
+              <div className="d-flex justify-content-between px-3 mb-2">
+                <div className="me-2 text-light">{suggestionsHeader}</div>
+                {suggestedProperties.length > suggestionsLimit && (
+                  <div className="text-muted">
+                    (Showing Top {suggestionsLimit})
+                  </div>
+                )}
+              </div>
+              {suggestedProperties
+                .slice(0, suggestionsLimit)
+                .map(({ value, label }, i) => (
+                  <div
+                    className={`py-2 px-3 ${
+                      selectedAutocompleteIndex === i ? 'bg-muted' : ''
+                    }`}
+                    role="button"
+                    key={value}
+                    onMouseOver={() => {
+                      setSelectedAutocompleteIndex(i);
+                    }}
+                    onClick={() => {
+                      onAcceptSuggestion(value);
+                    }}
+                  >
+                    <span className="me-1">{label}</span>
+                  </div>
+                ))}
             </div>
-          ) : undefined
-        }
-      />
-    </OverlayTrigger>
+          )}
+        </div>
+        {belowSuggestions != null && (
+          <div className="border-top px-3 pt-2 pb-1 fs-8 d-flex align-items-center text-muted flex-wrap">
+            {belowSuggestions}
+          </div>
+        )}
+        <div>
+          {showSearchHistory && (
+            <div className="border-top border-dark fs-8 py-2">
+              <div className="text-muted fs-8 fw-bold me-1 px-3">
+                Search History:
+              </div>
+              {queryHistoryList.map(({ value, label }, i) => {
+                return (
+                  <UnstyledButton
+                    className={`d-block w-100 text-start text-muted fw-normal px-3 py-2 fs-8 ${
+                      selectedQueryHistoryIndex === i ? 'bg-muted' : ''
+                    }`}
+                    key={value}
+                    onMouseOver={() => setSelectedQueryHistoryIndex(i)}
+                    onClick={() => onSelectSearchHistory(value)}
+                  >
+                    <span className="me-1 text-truncate">{label}</span>
+                  </UnstyledButton>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </Popover.Dropdown>
+    </Popover>
   );
 }
diff --git a/packages/app/src/BenchmarkPage.tsx b/packages/app/src/BenchmarkPage.tsx
index c4ae68e2c..127253123 100644
--- a/packages/app/src/BenchmarkPage.tsx
+++ b/packages/app/src/BenchmarkPage.tsx
@@ -235,9 +235,7 @@ function BenchmarkPage() {
           <Grid>
             <Grid.Col span={6}>
               <Stack>
-                <Text size="lg" c="gray.4">
-                  Query 1
-                </Text>
+                <Text size="lg">Query 1</Text>
                 <ConnectionSelectControlled
                   control={control}
                   name="connections.0"
@@ -247,9 +245,7 @@ function BenchmarkPage() {
             </Grid.Col>
             <Grid.Col span={6}>
               <Stack>
-                <Text size="lg" c="gray.4">
-                  Query 2
-                </Text>
+                <Text size="lg">Query 2</Text>
                 <ConnectionSelectControlled
                   control={control}
                   name="connections.1"
@@ -270,12 +266,8 @@ function BenchmarkPage() {
         <Grid mt="md">
           <Grid.Col span={12}>
             <Stack>
-              <Text size="lg" c="gray.2">
-                Query Estimate & Indexes
-              </Text>
-              <Text c="gray.4" size="sm">
-                Index utilization of your query
-              </Text>
+              <Text size="lg">Query Estimate & Indexes</Text>
+              <Text size="sm">Index utilization of your query</Text>
             </Stack>
           </Grid.Col>
           <Grid.Col span={6}>
diff --git a/packages/app/src/ClickhousePage.tsx b/packages/app/src/ClickhousePage.tsx
index 90d9dd9ae..88585ffeb 100644
--- a/packages/app/src/ClickhousePage.tsx
+++ b/packages/app/src/ClickhousePage.tsx
@@ -59,7 +59,7 @@ function InfrastructureTab({
     <Grid mt="md">
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             CPU Usage (Cores)
           </Text>
           <DBTimeChart
@@ -86,7 +86,7 @@ function InfrastructureTab({
       </Grid.Col>
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             Memory Usage
           </Text>
           <DBTimeChart
@@ -112,7 +112,7 @@ function InfrastructureTab({
       </Grid.Col>
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             Disk
           </Text>
           <DBTimeChart
@@ -146,7 +146,7 @@ function InfrastructureTab({
       </Grid.Col>
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             S3 Requests
           </Text>
           <DBTimeChart
@@ -198,10 +198,10 @@ function InfrastructureTab({
       </Grid.Col>
       <Grid.Col span={6}>
         <ChartBox style={{ minHeight: 400 }}>
-          <Text size="sm" c="gray.4" mb="xs">
+          <Text size="sm" mb="xs">
             Network
           </Text>
-          <Text size="xs" c="gray.4" mb="sm">
+          <Text size="xs" mb="sm">
             Network activity for the entire machine, not only Clickhouse.
           </Text>
           <DBTimeChart
@@ -249,7 +249,7 @@ function InsertsTab({
       <Grid.Col span={12}>
         <ChartBox style={{ minHeight: 400 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
+            <Text size="sm">
               Insert{' '}
               {insertsBy === 'queries'
                 ? 'Queries'
@@ -323,9 +323,7 @@ function InsertsTab({
       <Grid.Col span={12}>
         <ChartBox style={{ minHeight: 200, height: 200 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Max Active Parts per Partition
-            </Text>
+            <Text size="sm">Max Active Parts per Partition</Text>
           </Group>
           <DBTimeChart
             config={{
@@ -355,10 +353,10 @@ function InsertsTab({
       </Grid.Col>
       <Grid.Col span={12}>
         <ChartBox style={{ height: 400 }}>
-          <Text size="sm" c="gray.4" mb="sm">
+          <Text size="sm" mb="sm">
             Active Parts Per Partition
           </Text>
-          <Text size="xs" c="gray.4" mb="md">
+          <Text size="xs" mb="md">
             Recommended to stay under 300, ClickHouse will automatically
             throttle inserts after 1,000 parts per partition and stop inserts at
             3,000 parts per partition.
@@ -499,9 +497,7 @@ function ClickhousePage() {
       <OnboardingModal requireSource={false} />
       <Group justify="space-between">
         <Group>
-          <Text c="gray.4" size="xl">
-            Clickhouse Dashboard
-          </Text>
+          <Text size="xl">Clickhouse Dashboard</Text>
           <ConnectionSelectControlled
             control={control}
             name="connection"
@@ -557,7 +553,7 @@ function ClickhousePage() {
             {/* <Grid.Col span={12}>
           <ChartBox style={{ minHeight: 300, height: 300 }}>
             <Group justify="space-between" align="center" mb="md">
-              <Text size="sm" c="gray.4" ms="xs">
+              <Text size="sm"  ms="xs">
                 Select P95 Query Latency
               </Text>
               <SegmentedControl
@@ -600,14 +596,13 @@ function ClickhousePage() {
             <Grid.Col span={12}>
               <ChartBox style={{ height: 250 }}>
                 <Flex justify="space-between" align="center">
-                  <Text size="sm" c="gray.4" ms="xs">
+                  <Text size="sm" ms="xs">
                     Query Latency
                   </Text>
                   {latencyFilter.latencyMin != null ||
                   latencyFilter.latencyMax != null ? (
                     <Button
                       size="xs"
-                      color="gray.4"
                       variant="subtle"
                       onClick={() => {
                         // Clears the min/max latency filters that are used to filter the query results
@@ -657,7 +652,7 @@ function ClickhousePage() {
             </Grid.Col>
             <Grid.Col span={12}>
               <ChartBox style={{ height: 400 }}>
-                <Text size="sm" c="gray.4" mb="md">
+                <Text size="sm" mb="md">
                   Query Count by Table
                 </Text>
 
@@ -698,7 +693,7 @@ function ClickhousePage() {
             </Grid.Col>
             <Grid.Col span={12}>
               <ChartBox style={{ height: 400 }}>
-                <Text size="sm" c="gray.4" mb="md">
+                <Text size="sm" mb="md">
                   Most Time Consuming Query Patterns
                 </Text>
                 <DBTableChart
@@ -756,7 +751,7 @@ function ClickhousePage() {
             </Grid.Col>
             <Grid.Col span={12}>
               <ChartBox style={{ height: 400 }}>
-                <Text size="sm" c="gray.4" mb="md">
+                <Text size="sm" mb="md">
                   Slowest Queries
                 </Text>
                 <DBSqlRowTable
diff --git a/packages/app/src/Clipboard.tsx b/packages/app/src/Clipboard.tsx
index 34b1f626a..8b3f6fdab 100644
--- a/packages/app/src/Clipboard.tsx
+++ b/packages/app/src/Clipboard.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import cx from 'classnames';
-import { Button } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Button } from '@mantine/core';
 
 export default function Clipboard({
   text,
@@ -23,8 +23,11 @@ export default function Clipboard({
       }}
     >
       <Button
-        variant="link"
-        className={cx('px-0 text-decoration-none fs-7', className)}
+        variant="default"
+        p={0}
+        className={cx('text-decoration-none', className)}
+        size="xs"
+        fullWidth
       >
         {children({ isCopied })}
       </Button>
diff --git a/packages/app/src/DBChartPage.tsx b/packages/app/src/DBChartPage.tsx
index ffb8a6395..cefe165f4 100644
--- a/packages/app/src/DBChartPage.tsx
+++ b/packages/app/src/DBChartPage.tsx
@@ -119,14 +119,14 @@ function AIAssistant({
     return (
       <Box mb="sm">
         <Alert
-          color="dark.3"
+          color="dark"
           icon={<i className="bi bi-info-circle" />}
           variant="outline"
           withCloseButton
           onClose={() => setAlertDismissed(true)}
           p="xxs"
         >
-          <Text size="xs" c="dark.2" pt="2px">
+          <Text size="xs" pt="2px">
             New AI Assistant available, enable with configuring the{' '}
             <code>ANTHROPIC_API_KEY</code> environment variable on the HyperDX
             server.
@@ -223,7 +223,7 @@ function DBChartExplorerPage() {
   );
 
   return (
-    <Box data-testid="chart-explorer-page" p="sm" className="bg-hdx-dark">
+    <Box data-testid="chart-explorer-page" p="sm">
       <Head>
         <title>Chart Explorer - HyperDX</title>
       </Head>
diff --git a/packages/app/src/DBDashboardImportPage.tsx b/packages/app/src/DBDashboardImportPage.tsx
index de11ebb5a..8b71a9af8 100644
--- a/packages/app/src/DBDashboardImportPage.tsx
+++ b/packages/app/src/DBDashboardImportPage.tsx
@@ -3,7 +3,6 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { filter } from 'lodash';
-import { Container } from 'react-bootstrap';
 import { Controller, useForm } from 'react-hook-form';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { z } from 'zod';
@@ -13,6 +12,7 @@ import { DashboardTemplateSchema } from '@hyperdx/common-utils/dist/types';
 import {
   Button,
   Collapse,
+  Container,
   Group,
   Input,
   Stack,
@@ -110,21 +110,21 @@ function FileSelection({
                 <Dropzone.Accept>
                   <IconUpload
                     size={52}
-                    color="var(--mantine-color-green-4)"
+                    color="var(--color-text-success)"
                     stroke={1.5}
                   />
                 </Dropzone.Accept>
                 <Dropzone.Reject>
                   <IconX
                     size={52}
-                    color="var(--mantine-color-red-6)"
+                    color="var(--color-text-danger)"
                     stroke={1.5}
                   />
                 </Dropzone.Reject>
                 <Dropzone.Idle>
                   <IconFile
                     size={52}
-                    color="var(--mantine-color-dimmed)"
+                    color="var(--color-text-muted)"
                     stroke={1.5}
                   />
                 </Dropzone.Idle>
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index 299cc62be..6c9370e40 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -45,7 +45,7 @@ import {
 } from '@mantine/core';
 import { useHover } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
-import { IconFilterEdit } from '@tabler/icons-react';
+import { IconFilterEdit, IconPlayerPlay } from '@tabler/icons-react';
 
 import { ContactSupportText } from '@/components/ContactSupportText';
 import EditTimeChartForm from '@/components/DBEditTimeChartForm';
@@ -212,7 +212,7 @@ const Tile = forwardRef(
     return (
       <div
         data-testid={`dashboard-tile-${chart.id}`}
-        className={`p-2 ${className} d-flex flex-column ${
+        className={`p-2 ${className} d-flex flex-column bg-muted rounded ${
           isHighlighed && 'dashboard-chart-highlighted'
         }`}
         id={`chart-${chart.id}`}
@@ -221,9 +221,6 @@ const Tile = forwardRef(
         key={chart.id}
         ref={ref}
         style={{
-          background:
-            'linear-gradient(180deg, rgba(250,250,250,0.018) 0%, rgba(250,250,250,0.008) 100%)',
-          borderRadius: 2,
           ...style,
         }}
         onMouseDown={onMouseDown}
@@ -231,7 +228,7 @@ const Tile = forwardRef(
         onTouchEnd={onTouchEnd}
       >
         <div className="d-flex justify-content-between align-items-center mb-2 cursor-grab">
-          <Text size="sm" c="gray.2" ms="xs">
+          <Text size="sm" ms="xs">
             {chart.config.name}
           </Text>
           {hovered ? (
@@ -241,15 +238,13 @@ const Tile = forwardRef(
                   size={5}
                   zIndex={1}
                   color={alertIndicatorColor}
-                  label={
-                    !alert && <span className="text-slate-400 fs-8">+</span>
-                  }
+                  label={!alert && <span className="fs-8">+</span>}
                   mr={4}
                 >
                   <Button
                     data-testid={`tile-alerts-button-${chart.id}`}
                     variant="subtle"
-                    color="gray.4"
+                    color="gray"
                     size="xxs"
                     onClick={onEditClick}
                     title="Alerts"
@@ -262,7 +257,7 @@ const Tile = forwardRef(
               <Button
                 data-testid={`tile-duplicate-button-${chart.id}`}
                 variant="subtle"
-                color="gray.4"
+                color="gray"
                 size="xxs"
                 onClick={onDuplicateClick}
                 title="Duplicate"
@@ -272,8 +267,8 @@ const Tile = forwardRef(
               <Button
                 data-testid={`tile-edit-button-${chart.id}`}
                 variant="subtle"
+                color="gray"
                 size="xxs"
-                color="gray.4"
                 onClick={onEditClick}
                 title="Edit"
               >
@@ -282,8 +277,8 @@ const Tile = forwardRef(
               <Button
                 data-testid={`tile-delete-button-${chart.id}`}
                 variant="subtle"
+                color="gray"
                 size="xxs"
-                color="gray.4"
                 onClick={onDeleteClick}
                 title="Delete"
               >
@@ -481,7 +476,6 @@ function DashboardName({
               ms="xs"
               variant="subtle"
               size="xs"
-              color="gray.4"
               onClick={() => setEditing(true)}
             >
               <i className="bi bi-pencil"></i>
@@ -882,7 +876,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       {IS_LOCAL_MODE === false && isLocalDashboard && isLocalDashboardEmpty && (
         <Paper my="lg" p="md">
           <Flex justify="space-between" align="center">
-            <Text c="gray.4" size="sm">
+            <Text size="sm">
               This is a temporary dashboard and can not be saved.
             </Text>
             <Button
@@ -917,8 +911,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
               onChange={handleUpdateTags}
             >
               <Button
-                variant="outline"
-                color="dark.2"
+                variant="default"
                 px="xs"
                 size="xs"
                 style={{ flexShrink: 0 }}
@@ -932,7 +925,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
           {!isLocalDashboard /* local dashboards cant be "deleted" */ && (
             <Menu width={250}>
               <Menu.Target>
-                <Button variant="outline" color="dark.2" px="xs" size="xs">
+                <Button variant="default" px="xs" size="xs">
                   <i className="bi bi-three-dots-vertical" />
                 </Button>
               </Menu.Target>
@@ -993,7 +986,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             </Menu>
           )}
         </Group>
-        {/* <Button variant="outline" color="gray.4" size="sm">
+        {/* <Button variant="outline" size="sm">
           Save
         </Button> */}
       </Flex>
@@ -1058,10 +1051,9 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         >
           <Button
             onClick={() => setIsLive(prev => !prev)}
-            color={isLive ? 'green' : 'gray'}
             mr={6}
             size="sm"
-            variant="outline"
+            variant={isLive ? 'filled' : 'default'}
             title={isLive ? 'Disable auto-refresh' : 'Enable auto-refresh'}
           >
             Live
@@ -1072,9 +1064,8 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             onClick={refresh}
             loading={manualRefreshCooloff}
             disabled={manualRefreshCooloff}
-            color="gray"
             mr={6}
-            variant="outline"
+            variant="default"
             title="Refresh dashboard"
             px="xs"
           >
@@ -1083,8 +1074,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         </Tooltip>
         <Tooltip withArrow label="Edit Filters" fz="xs" color="gray">
           <Button
-            variant="outline"
-            color="gray"
+            variant="default"
             px="xs"
             mr={6}
             onClick={() => setShowFiltersModal(true)}
@@ -1092,8 +1082,12 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             <IconFilterEdit strokeWidth={1} />
           </Button>
         </Tooltip>
-        <Button variant="outline" type="submit" color="green">
-          <i className="bi bi-play"></i>
+        <Button
+          data-testid="search-submit-button"
+          variant="outline"
+          type="submit"
+        >
+          <IconPlayerPlay size={16} />
         </Button>
       </Flex>
       <DashboardFilters
@@ -1157,7 +1151,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         data-testid="add-new-tile-button"
         variant="outline"
         mt="sm"
-        color={dashboard?.tiles.length === 0 ? 'green' : 'dark.3'}
+        color={dashboard?.tiles.length === 0 ? 'green' : 'gray'}
         fw={400}
         onClick={onAddTile}
         w="100%"
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 90c83a3bc..07a76ebb6 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -57,6 +57,7 @@ import {
   useDocumentVisibility,
 } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
+import { IconPlayerPlay } from '@tabler/icons-react';
 import { useIsFetching } from '@tanstack/react-query';
 import { SortingState } from '@tanstack/react-table';
 import CodeMirror from '@uiw/react-codemirror';
@@ -177,7 +178,7 @@ function SearchNumRows({
 
   const numRows = data?.[0]?.rows;
   return (
-    <Text size="xs" c="gray.4" mb={4}>
+    <Text size="xs" mb={4}>
       {isLoading
         ? 'Scanned Rows ...'
         : error || !numRows
@@ -307,44 +308,36 @@ function SaveSearchModal({
         <Stack>
           {chartConfig != null ? (
             <Card withBorder>
-              <Text c="gray.4" size="xs" mb="xs">
+              <Text size="xs" mb="xs">
                 SELECT
               </Text>
-              <Text
-                mb="sm"
-                size="xs"
-                c="gray.2"
-              >{`${chartConfig.select}`}</Text>
-              <Text c="gray.4" size="xs" mb="xs">
+              <Text mb="sm" size="xs">{`${chartConfig.select}`}</Text>
+              <Text size="xs" mb="xs">
                 FROM
               </Text>
-              <Text mb="sm" size="xs" c="gray.2">
+              <Text mb="sm" size="xs">
                 {chartConfig?.from.databaseName}.{chartConfig?.from.tableName}
               </Text>
-              <Text c="gray.4" size="xs" mb="xs">
+              <Text size="xs" mb="xs">
                 WHERE
               </Text>
               {chartConfig.where ? (
-                <Text size="xs" c="gray.2">
-                  {chartConfig.where}
-                </Text>
+                <Text size="xs">{chartConfig.where}</Text>
               ) : (
-                <Text size="xxs" c="gray.4" fs="italic">
+                <Text size="xxs" fs="italic">
                   None
                 </Text>
               )}
-              <Text c="gray.4" size="xs" mb="xs" mt="sm">
+              <Text size="xs" mb="xs" mt="sm">
                 ORDER BY
               </Text>
-              <Text size="xs" c="gray.2">
-                {chartConfig.orderBy}
-              </Text>
+              <Text size="xs">{chartConfig.orderBy}</Text>
             </Card>
           ) : (
-            <Text c="gray.4">Loading Chart Config...</Text>
+            <Text>Loading Chart Config...</Text>
           )}
           <Box>
-            <Text c="gray.4" size="xs" mb="xs">
+            <Text size="xs" mb="xs">
               Name
             </Text>
             <InputControlled
@@ -355,7 +348,7 @@ function SaveSearchModal({
             />
           </Box>
           <Box mb="sm">
-            <Text c="gray.4" size="xs" mb="xs">
+            <Text size="xs" mb="xs">
               Tags
             </Text>
             <Group gap="xs" align="center" mb="xs">
@@ -1312,7 +1305,6 @@ function DBSearchPage() {
                 <ActionIcon
                   data-testid="source-settings-menu"
                   variant="subtle"
-                  color="dark.2"
                   size="sm"
                   title="Edit Source"
                 >
@@ -1381,9 +1373,7 @@ function DBSearchPage() {
               {!savedSearchId ? (
                 <Button
                   data-testid="save-search-button"
-                  variant="outline"
-                  color="dark.2"
-                  px="xs"
+                  variant="default"
                   size="xs"
                   onClick={onSaveSearch}
                   style={{ flexShrink: 0 }}
@@ -1393,9 +1383,7 @@ function DBSearchPage() {
               ) : (
                 <Button
                   data-testid="update-search-button"
-                  variant="outline"
-                  color="dark.2"
-                  px="xs"
+                  variant="default"
                   size="xs"
                   onClick={() => {
                     setSaveSearchModalState('update');
@@ -1408,9 +1396,7 @@ function DBSearchPage() {
               {!IS_LOCAL_MODE && (
                 <Button
                   data-testid="alerts-button"
-                  variant="outline"
-                  color="dark.2"
-                  px="xs"
+                  variant="default"
                   size="xs"
                   onClick={openAlertModal}
                   style={{ flexShrink: 0 }}
@@ -1427,8 +1413,7 @@ function DBSearchPage() {
                   >
                     <Button
                       data-testid="tags-button"
-                      variant="outline"
-                      color="dark.2"
+                      variant="default"
                       px="xs"
                       size="xs"
                       style={{ flexShrink: 0 }}
@@ -1551,9 +1536,9 @@ function DBSearchPage() {
             data-testid="search-submit-button"
             variant="outline"
             type="submit"
-            color={formState.isDirty ? 'green' : 'gray.4'}
+            color={formState.isDirty ? 'var(--color-text-success)' : 'gray'}
           >
-            <i className="bi bi-play"></i>
+            <IconPlayerPlay size={16} />
           </Button>
         </Flex>
       </form>
@@ -1570,12 +1555,12 @@ function DBSearchPage() {
       <Flex
         direction="column"
         style={{ overflow: 'hidden', height: '100%' }}
-        className="bg-hdx-dark"
+        className="bg-body"
       >
         {!queryReady ? (
           <Paper shadow="xs" p="xl" h="100%">
             <Center mih={100} h="100%">
-              <Text size="sm" c="gray.4">
+              <Text size="sm">
                 Please start by selecting a database, table, and timestamp
                 column above to view data.
               </Text>
diff --git a/packages/app/src/DBSearchPageAlertModal.tsx b/packages/app/src/DBSearchPageAlertModal.tsx
index 00c4aef53..900a43176 100644
--- a/packages/app/src/DBSearchPageAlertModal.tsx
+++ b/packages/app/src/DBSearchPageAlertModal.tsx
@@ -56,7 +56,7 @@ const SavedSearchAlertFormSchema = z
   .passthrough();
 
 const CHANNEL_ICONS = {
-  webhook: <i className="bi bi-slack fs-7 text-slate-400" />,
+  webhook: <i className="bi bi-slack fs-7 " />,
 };
 
 const AlertForm = ({
@@ -106,7 +106,7 @@ const AlertForm = ({
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Stack gap="xs">
-        <Paper px="md" py="sm" bg="dark.6" radius="xs">
+        <Paper px="md" py="sm" radius="xs">
           <Text size="xxs" opacity={0.5}>
             Trigger
           </Text>
@@ -158,7 +158,7 @@ const AlertForm = ({
             size="xs"
           />
         </Paper>
-        <Paper px="md" py="sm" bg="dark.6" radius="xs">
+        <Paper px="md" py="sm" radius="xs">
           <Text size="xxs" opacity={0.5} mb={4}>
             Send to
           </Text>
@@ -166,8 +166,8 @@ const AlertForm = ({
         </Paper>
         {groupBy && thresholdType === AlertThresholdType.BELOW && (
           <MantineAlert
-            icon={<i className="bi bi-info-circle-fill text-slate-400" />}
-            bg="dark.6"
+            icon={<i className="bi bi-info-circle-fill " />}
+            bg="dark"
             py="xs"
           >
             <Text size="sm" opacity={0.7}>
@@ -202,7 +202,7 @@ const AlertForm = ({
       </Accordion>
 
       {defaultValues?.createdBy && (
-        <Paper px="md" py="sm" bg="dark.6" radius="xs" mt="sm">
+        <Paper px="md" py="sm" radius="xs" mt="sm">
           <Text size="xxs" opacity={0.5} mb={4}>
             Created by
           </Text>
@@ -390,7 +390,7 @@ export const DBSearchPageAlertModal = ({
         />
         <Stack gap={0} mb="md">
           <Group>
-            <Text c="dark.1" size="sm">
+            <Text size="sm">
               Alerts for <strong>{savedSearch?.name}</strong>
             </Text>
             {!id && (
@@ -403,9 +403,7 @@ export const DBSearchPageAlertModal = ({
               />
             )}
           </Group>
-          <Text c="dark.2" size="xxs">
-            {savedSearch?.where}
-          </Text>
+          <Text size="xxs">{savedSearch?.where}</Text>
         </Stack>
 
         <Tabs value={activeIndex} onChange={setTab} mb="xs">
@@ -419,10 +417,7 @@ export const DBSearchPageAlertModal = ({
             ))}
             <Tabs.Tab value="stage">
               <Group gap={4}>
-                <i
-                  className="bi bi-plus fs-5 text-slate-400"
-                  style={{ marginLeft: -8 }}
-                />
+                <i className="bi bi-plus fs-5 " style={{ marginLeft: -8 }} />
                 New Alert
               </Group>
             </Tabs.Tab>
diff --git a/packages/app/src/DBServiceMapPage.tsx b/packages/app/src/DBServiceMapPage.tsx
index 6d381f50a..1ad2c9b3b 100644
--- a/packages/app/src/DBServiceMapPage.tsx
+++ b/packages/app/src/DBServiceMapPage.tsx
@@ -90,14 +90,12 @@ function DBServiceMapPage() {
     <Box
       data-testid="service-map-page"
       p="sm"
-      className="bg-hdx-dark"
+      className="bg-body"
       style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}
     >
       <Group mb="md" justify="space-between">
         <Group>
-          <Text c="gray.4" size="xl">
-            Service Map
-          </Text>
+          <Text size="xl">Service Map</Text>
           <SourceSelectControlled
             control={control}
             name="source"
@@ -109,7 +107,7 @@ function DBServiceMapPage() {
           />
         </Group>
         <Group justify="flex-end">
-          <Text c="gray.4" bg="inherit" size="sm">
+          <Text bg="inherit" size="sm">
             Sampling {samplingLabel}
           </Text>
           <div style={{ minWidth: '200px' }}>
diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx
index d19c44ad2..7ada3c501 100644
--- a/packages/app/src/DOMPlayer.tsx
+++ b/packages/app/src/DOMPlayer.tsx
@@ -43,13 +43,13 @@ const URLHoverCard = memo(({ url }: { url: string }) => {
           <table className="table fs-8 mb-0">
             <tr>
               <td>
-                <i className="bi bi-globe fs-8 text-slate-300"></i>
+                <i className="bi bi-globe fs-8 "></i>
               </td>
               <td>{parsedUrl?.host}</td>
             </tr>
             <tr>
               <td>
-                <i className="bi bi-link-45deg text-slate-300 fs-7"></i>
+                <i className="bi bi-link-45deg fs-7"></i>
               </td>
               <td>{parsedUrl?.pathname}</td>
             </tr>
@@ -470,7 +470,7 @@ export default function DOMPlayer({
         <ActionIcon
           onClick={() => setPlayerFullWidth(!playerFullWidth)}
           size="sm"
-          color="gray.7"
+          color="gray"
         >
           {playerFullWidth ? (
             <i className="bi bi-list"></i>
diff --git a/packages/app/src/DashboardFiltersModal.tsx b/packages/app/src/DashboardFiltersModal.tsx
index a912778cd..0f75ce13a 100644
--- a/packages/app/src/DashboardFiltersModal.tsx
+++ b/packages/app/src/DashboardFiltersModal.tsx
@@ -191,7 +191,7 @@ const DashboardFilterEditForm = ({
             </CustomInputWrapper>
 
             <Group justify="flex-end" my="xs">
-              <Button variant="outline" color="gray.2" onClick={onCancel}>
+              <Button variant="default" onClick={onCancel}>
                 Cancel
               </Button>
               <Button type="submit">Save filter</Button>
@@ -218,7 +218,7 @@ const EmptyState = ({ onCreateFilter, onClose }: EmptyStateProps) => {
           Add filters to let users quickly narrow data on key columns. Saved
           filters will stay with this dashboard.
         </Text>
-        <Button variant="outline" color="gray.2" onClick={onCreateFilter}>
+        <Button variant="filled" onClick={onCreateFilter}>
           Add new filter
         </Button>
       </Stack>
@@ -258,9 +258,9 @@ const DashboardFiltersList = ({
           <Paper
             key={filter.id}
             withBorder
-            bg={'dark.5'}
             className={styles.filterPaper}
             p="xs"
+            variant="muted"
           >
             <Group justify="space-between" className={styles.filterHeader}>
               <Text size="xs">{filter.name}</Text>
@@ -296,7 +296,7 @@ const DashboardFiltersList = ({
       </Stack>
 
       <Group justify="center" my="sm">
-        <Button variant="outline" color="gray.2" onClick={onAddNew}>
+        <Button variant="filled" onClick={onAddNew}>
           Add new filter
         </Button>
       </Group>
diff --git a/packages/app/src/HDXMultiSeriesTableChart.tsx b/packages/app/src/HDXMultiSeriesTableChart.tsx
index 1fb595d8d..1a40fd9ba 100644
--- a/packages/app/src/HDXMultiSeriesTableChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTableChart.tsx
@@ -196,17 +196,16 @@ export const Table = ({
   );
 
   return (
-    <div
-      className="overflow-auto h-100 fs-8 bg-inherit dark:bg-dark"
-      ref={tableContainerRef}
-    >
-      <table className="w-100 bg-inherit" style={{ tableLayout: 'fixed' }}>
+    <div className="overflow-auto h-100 fs-8" ref={tableContainerRef}>
+      <table
+        className="w-100"
+        style={{ tableLayout: 'fixed', borderCollapse: 'collapse' }}
+      >
         <thead
-          className="bg-inherit"
           style={{
-            background: 'inherit',
             position: 'sticky',
             top: 0,
+            background: 'var(--color-bg-body)',
           }}
         >
           {table.getHeaderGroups().map(headerGroup => (
@@ -229,7 +228,7 @@ export const Table = ({
                             <CsvExportButton
                               data={csvData}
                               filename="HyperDX_table_results"
-                              className="fs-8 text-muted-hover ms-2"
+                              className="fs-8 ms-2"
                               title="Download table as CSV"
                             >
                               <i className="bi bi-download" />
@@ -255,7 +254,7 @@ export const Table = ({
             return (
               <tr
                 key={virtualRow.key}
-                className="bg-default-dark-grey-hover"
+                className="bg-muted-hover"
                 data-index={virtualRow.index}
                 ref={rowVirtualizer.measureElement}
               >
diff --git a/packages/app/src/HDXMultiSeriesTimeChart.tsx b/packages/app/src/HDXMultiSeriesTimeChart.tsx
index a6ff8b802..fe1648fd5 100644
--- a/packages/app/src/HDXMultiSeriesTimeChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTimeChart.tsx
@@ -476,10 +476,7 @@ export const MemoChart = memo(function MemoChart({
           })}
         </defs>
         {isHovered && (
-          <CartesianGrid
-            strokeDasharray="3 3"
-            stroke="var(--mantine-color-dark-6)"
-          />
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
         )}
         <XAxis
           dataKey={timestampKey ?? 'ts_bucket'}
diff --git a/packages/app/src/Icon.tsx b/packages/app/src/Icon.tsx
index a5ad90b93..36fc35ee9 100644
--- a/packages/app/src/Icon.tsx
+++ b/packages/app/src/Icon.tsx
@@ -10,11 +10,11 @@ export default function Icon({ size = 16 }: { size?: number }) {
       <g clipPath="url(#clip0_614_1164)">
         <path
           d="M256 0L477.703 128V384L256 512L34.2975 384V128L256 0Z"
-          fill="#4FFA7A"
+          fill="var(--color-bg-brand)"
         />
         <path
           d="M311.365 84.4663C314.818 86.9946 316.431 92.1862 315.256 96.9926L284.313 223.563H341.409C344.836 223.563 347.936 226.127 349.295 230.086C350.655 234.046 350.014 238.644 347.665 241.786L210.211 425.598C207.472 429.26 203.089 430.062 199.635 427.534C196.182 425.005 194.569 419.814 195.744 415.007L226.686 288.437H169.591C166.164 288.437 163.064 285.873 161.705 281.914C160.345 277.954 160.986 273.356 163.335 270.214L300.789 86.4023C303.528 82.7403 307.911 81.938 311.365 84.4663Z"
-          fill="#080A0B"
+          fill="var(--color-text-inverted)"
         />
       </g>
       <defs>
diff --git a/packages/app/src/InstallInstructionsModal.tsx b/packages/app/src/InstallInstructionsModal.tsx
index 4c96cc63e..99fee6046 100644
--- a/packages/app/src/InstallInstructionsModal.tsx
+++ b/packages/app/src/InstallInstructionsModal.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Modal } from '@mantine/core';
 
 import api from './api';
 import Clipboard from './Clipboard';
@@ -12,12 +12,12 @@ function CopyableValue({
   value: string;
 }) {
   return (
-    <Clipboard text={value} className="d-block mx-auto p-0 w-100">
+    <Clipboard text={value} className="d-flex mx-auto p-0 w-100">
       {({ isCopied }) => {
         return (
           <div
             className={cx(
-              'd-flex fs-6 py-2 px-3 bg-grey rounded align-items-center justify-content-between cursor-pointer text-white-hover',
+              'd-flex w-100 py-2 px-2 gap-2 rounded align-items-center justify-content-between cursor-pointer',
               {
                 'text-success': isCopied,
               },
@@ -25,7 +25,7 @@ function CopyableValue({
           >
             <div className="fs-7 d-flex text-truncate align-items-center">
               {label}
-              <pre className="mb-0 user-select-all d-inline text-truncate fs-7 lh-1">
+              <pre className="m-0 user-select-all d-inline text-truncate fs-7 lh-1">
                 {value}
               </pre>
             </div>
@@ -36,7 +36,7 @@ function CopyableValue({
                   'bi-clipboard-check': isCopied,
                 })}
               ></i>
-              {isCopied ? 'Copied to Clipboard!' : 'Copy'}
+              {isCopied ? 'Copied!' : 'Copy'}
             </div>
           </div>
         );
@@ -56,14 +56,13 @@ export default function InstallInstructionModal({
 
   return (
     <Modal
-      aria-labelledby="contained-modal-title-vcenter"
-      centered
-      onHide={onHide}
-      show={show}
+      opened={show}
+      onClose={onHide}
+      title="Start Sending Telemetry"
       size="lg"
+      centered
     >
-      <Modal.Body className="bg-hdx-dark rounded inter">
-        <div className="fs-4 mb-4">Start Sending Telemetry</div>
+      <div className="inter">
         {team != null && (
           <div className="mb-4">
             <CopyableValue
@@ -80,106 +79,115 @@ export default function InstallInstructionModal({
           Click on a link below to view installation instructions for your
           application.
         </div>
-        <div className="fs-5 mb-2">Backend</div>
-        <div className="fs-6 mb-2">
+        <div className="fs-6 mb-2">Backend</div>
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/nodejs"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Node.js
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/golang"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Go
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/python"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Python
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/java"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Java
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/elixir"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Elixir
           </a>
           <span className="ms-2 text-muted">(Logs)</span>
         </div>
-        <div className="fs-6 mb-2">
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/ruby-on-rails"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Ruby on Rails
           </a>
           <span className="ms-2 text-muted">(Traces)</span>
         </div>
-        <div className="fs-5 mb-2 mt-4">Platform</div>
-        <div className="fs-6 mb-2">
+        <div className="fs-6 mb-2 mt-4">Platform</div>
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/ingesting-data/kubernetes"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             Kubernetes
           </a>
           <span className="ms-2 text-muted">(Logs + Metrics)</span>
         </div>
-        <div className="fs-5 mb-2 mt-4">Browser</div>
-        <div className="fs-6 mb-2">
+        <div className="fs-6 mb-2 mt-4">Browser</div>
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/sdks/browser"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             JavaScript/TypeScript
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
-        <div className="fs-5 mb-2 mt-4">Data Collector</div>
-        <div className="fs-6 mb-2">
+        <div className="fs-6 mb-2 mt-4">Data Collector</div>
+        <div className="mb-2">
           <a
             href="https://clickhouse.com/docs/use-cases/observability/clickstack/ingesting-data/opentelemetry#sending-otel-data"
             target="_blank"
             rel="noreferrer"
+            className="text-link"
           >
             OpenTelemetry
           </a>
           <span className="ms-2 text-muted">(Logs + Traces)</span>
         </div>
         <div className="mt-4">
-          <Button variant="dark" onClick={() => onHide()}>
+          <Button variant="default" onClick={() => onHide()}>
             Cancel
           </Button>
         </div>
-      </Modal.Body>
+      </div>
     </Modal>
   );
 }
diff --git a/packages/app/src/JoinTeamPage.tsx b/packages/app/src/JoinTeamPage.tsx
index a3f865c6d..1b99c7489 100644
--- a/packages/app/src/JoinTeamPage.tsx
+++ b/packages/app/src/JoinTeamPage.tsx
@@ -1,7 +1,6 @@
 import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
-import { Button, Form } from 'react-bootstrap';
-import { Paper } from '@mantine/core';
+import { Button, Paper, Text, TextInput } from '@mantine/core';
 
 export default function JoinTeam() {
   const router = useRouter();
@@ -17,32 +16,30 @@ export default function JoinTeam() {
           </div>
           <Paper p="xl" withBorder>
             <div className="text-center">
-              <Form
+              <form
                 className="text-start"
                 action={`/api/team/setup/${token}`}
                 method="POST"
               >
-                <Form.Label
-                  htmlFor="password"
-                  className="text-start text-muted fs-7 mb-1"
-                >
-                  Password
-                </Form.Label>
-                <Form.Control
+                <TextInput
                   id="password"
                   name="password"
                   type="password"
-                  className="border-0"
+                  label="Password"
+                  styles={{
+                    label: {
+                      fontSize: '0.875rem',
+                      color: 'var(--color-text-muted)',
+                      marginBottom: 4,
+                    },
+                  }}
                 />
                 {err != null && (
-                  <div
-                    className="text-danger mt-2"
-                    data-test-id="auth-error-msg"
-                  >
+                  <Text c="red" mt="sm" data-test-id="auth-error-msg">
                     {err === 'invalid'
                       ? 'Password is invalid'
                       : 'Unknown error occurred, please try again later.'}
-                  </div>
+                  </Text>
                 )}
                 <div className="text-center mt-4">
                   <Button
@@ -54,7 +51,7 @@ export default function JoinTeam() {
                     Setup a password
                   </Button>
                 </div>
-              </Form>
+              </form>
             </div>
           </Paper>
         </div>
diff --git a/packages/app/src/KubernetesDashboardPage.tsx b/packages/app/src/KubernetesDashboardPage.tsx
index b22ac0bc7..b5c9f81da 100644
--- a/packages/app/src/KubernetesDashboardPage.tsx
+++ b/packages/app/src/KubernetesDashboardPage.tsx
@@ -83,7 +83,7 @@ const Th = React.memo<{
       {children}
       {!!sort && (
         <i
-          className={`ps-1 text-slate-400 fs-8.5 bi bi-caret-${
+          className={`ps-1 fs-8.5 bi bi-caret-${
             sort === 'asc' ? 'up-fill' : 'down-fill'
           }`}
         />
@@ -357,13 +357,11 @@ export const InfraPodsStatusTable = ({
           {isLoading ? (
             <TableLoading />
           ) : isError ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               Unable to load pod metrics
             </div>
           ) : podsList.length === 0 ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
-              No pods found
-            </div>
+            <div className="p-4 text-center text-muted fs-8">No pods found</div>
           ) : (
             <Table horizontalSpacing="md" highlightOnHover>
               <Table.Thead className="muted-thead">
@@ -428,7 +426,7 @@ export const InfraPodsStatusTable = ({
                           >
                             <Text
                               span
-                              c={pod.cpuLimitUtilization ? undefined : 'gray.7'}
+                              c={pod.cpuLimitUtilization ? undefined : 'gray'}
                             >
                               {pod.cpuLimitUtilization
                                 ? formatNumber(
@@ -449,7 +447,7 @@ export const InfraPodsStatusTable = ({
                           >
                             <Text
                               span
-                              c={pod.memLimitUtilization ? undefined : 'gray.7'}
+                              c={pod.memLimitUtilization ? undefined : 'gray'}
                             >
                               {pod.memLimitUtilization
                                 ? formatNumber(
@@ -461,7 +459,7 @@ export const InfraPodsStatusTable = ({
                           </Tooltip>
                         </Table.Td>
                         <Table.Td>
-                          <Text span c={pod.uptime ? undefined : 'gray.7'}>
+                          <Text span c={pod.uptime ? undefined : 'gray'}>
                             {pod.uptime ? formatUptime(pod.uptime) : '–'}
                           </Text>
                         </Table.Td>
@@ -469,10 +467,10 @@ export const InfraPodsStatusTable = ({
                           <Text
                             color={
                               pod.restarts >= 10
-                                ? 'red.6'
+                                ? 'red'
                                 : pod.restarts >= 5
-                                  ? 'yellow.3'
-                                  : 'grey.7'
+                                  ? 'yellow'
+                                  : 'gray'
                             }
                           >
                             {pod.restarts}
@@ -603,11 +601,11 @@ const NodesTable = ({
           {isLoading ? (
             <TableLoading />
           ) : isError ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               Unable to load nodes
             </div>
           ) : nodesList.length === 0 ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               No nodes found
             </div>
           ) : (
@@ -800,11 +798,11 @@ const NamespacesTable = ({
           {isLoading ? (
             <TableLoading />
           ) : isError ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               Unable to load namespaces
             </div>
           ) : namespacesList.length === 0 ? (
-            <div className="p-4 text-center text-slate-500 fs-8">
+            <div className="p-4 text-center text-muted fs-8">
               No namespaces found
             </div>
           ) : (
@@ -1142,9 +1140,7 @@ function KubernetesDashboardPage() {
       )}
       <Group justify="space-between">
         <Group>
-          <Text c="gray.4" size="xl">
-            Kubernetes Dashboard
-          </Text>
+          <Text size="xl">Kubernetes Dashboard</Text>
           <SourceSelectControlled
             name="logSourceId"
             control={control}
diff --git a/packages/app/src/LandingHeader.tsx b/packages/app/src/LandingHeader.tsx
index b2adf9290..a6bf47ea9 100644
--- a/packages/app/src/LandingHeader.tsx
+++ b/packages/app/src/LandingHeader.tsx
@@ -1,11 +1,11 @@
 // @ts-nocheck TODO: remove this line
 
 import Link from 'next/link';
-import { Button, Container, Nav, Navbar, NavDropdown } from 'react-bootstrap';
+import { Anchor, Burger, Button, Container, Group } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 
 import api from './api';
 import Logo from './Logo';
-import NavHoverDropdown from './NavHoverDropdown';
 
 export default function LandingHeader({
   activeKey,
@@ -18,69 +18,149 @@ export default function LandingHeader({
   const isLoggedIn = Boolean(me);
 
   const { data: installation } = api.useInstallation();
+  const [opened, { toggle }] = useDisclosure(false);
 
   return (
     <>
-      <Navbar
-        collapseOnSelect
-        expand="lg"
-        variant="dark"
-        fixed="top"
-        style={{ background: '#0f1216b3', backdropFilter: 'blur(12px)' }}
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          background: 'var(--color-bg-body)',
+          backdropFilter: 'blur(12px)',
+          border: '1px solid var(--color-border)',
+          zIndex: 100,
+        }}
       >
-        <Container fluid className="mx-md-4 mt-3">
-          <Navbar.Brand href="/">
-            <Logo />
-          </Navbar.Brand>
-          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-          <Navbar.Collapse className="justify-content-end">
-            <Nav style={{ fontSize: 14 }} activeKey={activeKey}>
-              <Nav.Link href="https://hyperdx.io" className="mx-2">
+        <Container fluid px="xl" py="md">
+          <Group justify="space-between" align="center">
+            <Link href="/" style={{ textDecoration: 'none' }}>
+              <Logo />
+            </Link>
+
+            <Burger
+              opened={opened}
+              onClick={toggle}
+              hiddenFrom="lg"
+              color="white"
+            />
+
+            <Group gap="md" visibleFrom="lg" style={{ fontSize: 14 }}>
+              <Anchor
+                href="https://hyperdx.io"
+                c={activeKey === 'cloud' ? 'green' : 'gray'}
+                underline="never"
+                style={{ fontWeight: activeKey === 'cloud' ? 600 : 400 }}
+              >
                 HyperDX Cloud
-              </Nav.Link>
-              <Nav.Link
+              </Anchor>
+              <Anchor
                 href="https://clickhouse.com/docs/use-cases/observability/clickstack"
-                className="mx-2"
+                c={activeKey === 'docs' ? 'green' : 'gray'}
+                underline="never"
+                style={{ fontWeight: activeKey === 'docs' ? 600 : 400 }}
               >
                 Docs
-              </Nav.Link>
+              </Anchor>
               {!isLoggedIn && installation?.isTeamExisting === true && (
-                <Nav.Link
+                <Anchor
                   href="/login"
-                  active={activeKey === '/login'}
-                  className="mx-2"
+                  c={activeKey === '/login' ? 'green' : 'gray'}
+                  underline="never"
+                  style={{ fontWeight: activeKey === '/login' ? 600 : 400 }}
                 >
                   Login
-                </Nav.Link>
+                </Anchor>
               )}
               {!isLoggedIn &&
                 activeKey !== '/register' &&
                 installation?.isTeamExisting === false && (
-                  <div className="d-flex align-items-center mx-2">
-                    <Link href={'/register'} passHref legacyBehavior>
-                      <Button variant="outline-success" className="fs-7.5">
-                        Setup Account
-                      </Button>
-                    </Link>
-                  </div>
+                  <Link href="/register" passHref legacyBehavior>
+                    <Button
+                      component="a"
+                      variant="outline"
+                      color="green"
+                      size="sm"
+                    >
+                      Setup Account
+                    </Button>
+                  </Link>
                 )}
               {isLoggedIn && (
-                <div className="d-flex align-items-center mx-2">
-                  <Link href="/search" passHref legacyBehavior>
+                <Link href="/search" passHref legacyBehavior>
+                  <Button
+                    component="a"
+                    variant="outline"
+                    color="green"
+                    size="sm"
+                  >
+                    Go to Search
+                  </Button>
+                </Link>
+              )}
+            </Group>
+          </Group>
+
+          {/* Mobile menu */}
+          {opened && (
+            <Group gap="sm" mt="md" hiddenFrom="lg" style={{ fontSize: 14 }}>
+              <Anchor
+                href="https://hyperdx.io"
+                underline="never"
+                style={{ fontWeight: activeKey === 'cloud' ? 600 : 400 }}
+              >
+                HyperDX Cloud
+              </Anchor>
+              <Anchor
+                href="https://clickhouse.com/docs/use-cases/observability/clickstack"
+                underline="never"
+                style={{ fontWeight: activeKey === 'docs' ? 600 : 400 }}
+              >
+                Docs
+              </Anchor>
+              {!isLoggedIn && installation?.isTeamExisting === true && (
+                <Anchor
+                  href="/login"
+                  underline="never"
+                  style={{ fontWeight: activeKey === '/login' ? 600 : 400 }}
+                >
+                  Login
+                </Anchor>
+              )}
+              {!isLoggedIn &&
+                activeKey !== '/register' &&
+                installation?.isTeamExisting === false && (
+                  <Link href="/register" passHref legacyBehavior>
                     <Button
-                      variant="outline-success"
-                      className="px-3"
+                      component="a"
+                      variant="outline"
+                      color="green"
                       size="sm"
+                      fullWidth
                     >
-                      Go to Search
+                      Setup Account
                     </Button>
                   </Link>
-                </div>
+                )}
+              {isLoggedIn && (
+                <Link href="/search" passHref legacyBehavior>
+                  <Button
+                    component="a"
+                    variant="outline"
+                    color="green"
+                    size="sm"
+                    fullWidth
+                  >
+                    Go to Search
+                  </Button>
+                </Link>
               )}
-            </Nav>
-          </Navbar.Collapse>
+            </Group>
+          )}
         </Container>
-      </Navbar>
+      </div>
       {!fixed && <div style={{ height: 70 }} />}
     </>
   );
diff --git a/packages/app/src/LogSidePanelElements.tsx b/packages/app/src/LogSidePanelElements.tsx
index 96a8edfd6..01f5c2a9c 100644
--- a/packages/app/src/LogSidePanelElements.tsx
+++ b/packages/app/src/LogSidePanelElements.tsx
@@ -3,9 +3,8 @@ import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import cx from 'classnames';
 import { format } from 'date-fns';
-import { CloseButton } from 'react-bootstrap';
 import { JSONTree } from 'react-json-tree';
-import { Alert, Button, Text, Tooltip } from '@mantine/core';
+import { Alert, Button, CloseButton, Kbd, Text, Tooltip } from '@mantine/core';
 import { ColumnDef, Row, Table } from '@tanstack/react-table';
 
 import HyperJson from './components/HyperJson';
@@ -39,7 +38,7 @@ export const CollapsibleSection = ({
         onClick={() => setCollapsed(!collapsed)}
       >
         <i className={`bi bi-chevron-${collapsed ? 'right' : 'down'} me-2`}></i>
-        <div className="fs-7 text-slate-200">{title}</div>
+        <div className="fs-7">{title}</div>
       </div>
       {collapsed ? null : <div className="mb-4">{children}</div>}
     </div>
@@ -73,7 +72,7 @@ export const StacktraceValue = ({
         borderRight: '1px solid #ffffff20',
       }}
     >
-      <div className="text-slate-400">{label}</div>
+      <div>{label}</div>
       <div className="fs-7">{value}</div>
     </div>
   );
@@ -138,10 +137,7 @@ export const StacktraceRow = ({
               withArrow
               color="gray"
             >
-              <i
-                className="bi bi-box-seam text-slate-400 me-2"
-                title="in_app: false"
-              />
+              <i className="bi bi-box-seam me-2" title="in_app: false" />
             </Tooltip>
           )}
           {augmentedFrame && (
@@ -207,11 +203,7 @@ export const stacktraceColumns: ColumnDef<StacktraceFrame>[] = [
  * Breadcrumbs
  */
 
-const Url = ({ url }: { url?: string }) => (
-  <span className="text-slate-300" title={url}>
-    {url}
-  </span>
-);
+const Url = ({ url }: { url?: string }) => <span title={url}>{url}</span>;
 
 const StatusChip = React.memo(({ status }: { status?: number }) => {
   if (!status) {
@@ -240,7 +232,7 @@ const LevelChip = React.memo(({ level }: { level?: string }) => {
     ? 'text-danger bg-danger'
     : level.includes('warn') || level.includes('warning')
       ? 'text-warning bg-warning'
-      : 'text-slate-300 bg-grey';
+      : 'bg-muted';
 
   return (
     <span
@@ -257,7 +249,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
     header: 'Category',
     size: 180,
     cell: ({ row }) => (
-      <span className="text-slate-300 d-flex align-items-center gap-2">
+      <span className="d-flex align-items-center gap-2">
         {row.original.category}
         {row.original.category === 'console' && (
           <LevelChip level={row.original.level} />
@@ -283,7 +275,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         return (
           <div className="text-truncate">
             <span>{method} </span>
-            <span className="text-slate-300" title={url}>
+            <span title={url}>
               <Url url={url} />
             </span>
           </div>
@@ -295,11 +287,11 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         const { from, to } = row.original.data;
         return (
           <div className="text-truncate">
-            <span className="text-slate-300" title={from}>
+            <span title={from}>
               <Url url={from} />
             </span>
             <span>{' → '}</span>
-            <span className="text-slate-300" title={to}>
+            <span title={to}>
               <Url url={to} />
             </span>
           </div>
@@ -310,10 +302,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
       if (row.original.category === 'console') {
         const { message } = row.original;
         return (
-          <pre
-            className="text-slate-300 mb-0 text-truncate fs-8"
-            title={message}
-          >
+          <pre className="mb-0 text-truncate fs-8" title={message}>
             {message}
           </pre>
         );
@@ -323,14 +312,14 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         return <div className="text-truncate">{row.original.message}</div>;
       }
 
-      return <span className="text-slate-500">Empty</span>;
+      return <span className="text-muted">Empty</span>;
     },
   },
   {
     header: 'Timestamp',
     size: 220,
     cell: ({ row }) => (
-      <span className="text-slate-500">
+      <span className="text-muted">
         <FormatTime value={row.original.timestamp * 1000} format="withMs" />
       </span>
     ),
@@ -371,7 +360,7 @@ export const headerColumns: ColumnDef<[string, string]>[] = [
     header: 'Header',
     size: 260,
     cell: ({ row }) => (
-      <div className="text-slate-300 text-truncate" title={row.original[0]}>
+      <div className="text-truncate" title={row.original[0]}>
         {row.original[0]}
       </div>
     ),
@@ -395,9 +384,7 @@ export const networkColumns: ColumnDef<{
     accessorKey: 'label',
     header: 'Label',
     size: 260,
-    cell: ({ row }) => (
-      <span className="text-slate-300">{row.original.label}</span>
-    ),
+    cell: ({ row }) => <span>{row.original.label}</span>,
   },
   {
     size: UNDEFINED_WIDTH,
@@ -475,9 +462,9 @@ export const NetworkBody = ({
           )}
         </pre>
       ) : body === '' ? (
-        <div className="text-slate-400 px-4 py-3">{emptyMessage}</div>
+        <div className="px-4 py-3">{emptyMessage}</div>
       ) : (
-        <div className="text-slate-400 px-4 py-3">{notCollectedMessage}</div>
+        <div className="px-4 py-3">{notCollectedMessage}</div>
       )}
     </>
   );
@@ -486,10 +473,6 @@ export const NetworkBody = ({
 /**
  * Keyboard shortcuts
  */
-export const Kbd = ({ children }: { children: string }) => (
-  <div className={styles.kbd}>{children}</div>
-);
-
 export const LogSidePanelKbdShortcuts = () => {
   const [isDismissed, setDismissed] = useLocalStorage<boolean>(
     'kbd-shortcuts-dismissed',
@@ -509,8 +492,8 @@ export const LogSidePanelKbdShortcuts = () => {
       <div className="d-flex justify-content-between align-items-center ">
         <div className="d-flex align-items-center gap-3">
           <div>
-            Use <Kbd>←</Kbd>
-            <Kbd>→</Kbd> arrow keys or <Kbd>k</Kbd>
+            Use <Kbd className="me-1">←</Kbd>
+            <Kbd>→</Kbd> arrow keys or <Kbd className="me-1">k</Kbd>
             <Kbd>j</Kbd> to move through events
           </div>
           <div className={styles.kbdDivider} />
@@ -518,11 +501,7 @@ export const LogSidePanelKbdShortcuts = () => {
             <Kbd>ESC</Kbd> to close
           </div>
         </div>
-        <CloseButton
-          variant="white"
-          aria-label="Hide"
-          onClick={handleDismiss}
-        />
+        <CloseButton aria-label="Hide" onClick={handleDismiss} />
       </div>
     </div>
   );
@@ -546,7 +525,7 @@ export const SourceMapsFtux = () => {
       mt="xs"
       onClose={() => setIsDismissed(true)}
     >
-      <Text size="xs" c="gray.4">
+      <Text size="xs">
         <Icon name="code-square" /> Some of the stack frames are pointing to
         minified files. Use hyperdx-cli to upload your source maps and see the
         original code.
diff --git a/packages/app/src/Logo.tsx b/packages/app/src/Logo.tsx
index 181fd7662..ed2e755f5 100644
--- a/packages/app/src/Logo.tsx
+++ b/packages/app/src/Logo.tsx
@@ -31,16 +31,13 @@ export default function Logo({
   };
 
   return (
-    <div
-      className="align-items-center d-flex"
-      style={{
-        color: 'white',
-        userSelect: 'none',
-      }}
-    >
+    <div className="align-items-center d-flex">
       <div
         className="me-2"
-        style={{ marginBottom: configs[size].iconMarginBottom }}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+        }}
       >
         <Icon size={configs[size].iconSize} />
       </div>
diff --git a/packages/app/src/NamespaceDetailsSidePanel.tsx b/packages/app/src/NamespaceDetailsSidePanel.tsx
index f414309ec..4ca8cc16e 100644
--- a/packages/app/src/NamespaceDetailsSidePanel.tsx
+++ b/packages/app/src/NamespaceDetailsSidePanel.tsx
@@ -43,12 +43,10 @@ const PodDetailsProperty = React.memo(
     if (!value) return null;
     return (
       <div className="pe-4">
-        <Text size="xs" color="gray.6">
+        <Text size="xs" color="gray">
           {label}
         </Text>
-        <Text size="sm" color="gray.3">
-          {value}
-        </Text>
+        <Text size="sm">{value}</Text>
       </div>
     );
   },
diff --git a/packages/app/src/NavHoverDropdown.tsx b/packages/app/src/NavHoverDropdown.tsx
deleted file mode 100644
index 57856d760..000000000
--- a/packages/app/src/NavHoverDropdown.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useState } from 'react';
-import { NavDropdown } from 'react-bootstrap';
-
-export default function NavHoverDropdown(
-  props: React.ComponentProps<typeof NavDropdown>,
-) {
-  const [show, setShow] = useState(false);
-  return (
-    <NavDropdown
-      {...props}
-      show={show}
-      onClick={() => setShow(v => !v)}
-      onMouseEnter={() => setShow(true)}
-      onMouseLeave={() => setShow(false)}
-    />
-  );
-}
diff --git a/packages/app/src/NodeDetailsSidePanel.tsx b/packages/app/src/NodeDetailsSidePanel.tsx
index f45c28e57..56d14353b 100644
--- a/packages/app/src/NodeDetailsSidePanel.tsx
+++ b/packages/app/src/NodeDetailsSidePanel.tsx
@@ -47,12 +47,10 @@ const PodDetailsProperty = React.memo(
     if (!value) return null;
     return (
       <div className="pe-4">
-        <Text size="xs" color="gray.6">
+        <Text size="xs" color="gray">
           {label}
         </Text>
-        <Text size="sm" color="gray.3">
-          {value}
-        </Text>
+        <Text size="sm">{value}</Text>
       </div>
     );
   },
diff --git a/packages/app/src/OnboardingChecklist.tsx b/packages/app/src/OnboardingChecklist.tsx
index a805664f1..9d46f744d 100644
--- a/packages/app/src/OnboardingChecklist.tsx
+++ b/packages/app/src/OnboardingChecklist.tsx
@@ -146,19 +146,10 @@ const OnboardingChecklist = ({
   }
 
   return (
-    <Card
-      withBorder
-      p="xs"
-      mb="sm"
-      radius="md"
-      style={{
-        background: 'var(--mantine-color-dark-8)',
-        borderColor: 'var(--mantine-color-dark-4)',
-      }}
-    >
+    <Card withBorder p="xs" mb="sm" radius="md">
       <Group justify="space-between" align="center" mb={isCollapsed ? 0 : 'xs'}>
         <Group gap="xs" align="center">
-          <Text size="sm" fw="bold" c="gray.3">
+          <Text size="sm" fw="bold">
             Get Started
           </Text>
           <Badge
@@ -175,7 +166,7 @@ const OnboardingChecklist = ({
           onClick={() => setIsCollapsed(!isCollapsed)}
         >
           <i
-            className={`bi bi-chevron-${isCollapsed ? 'down' : 'up'} text-slate-400`}
+            className={`bi bi-chevron-${isCollapsed ? 'down' : 'up'} `}
             style={{ fontSize: 12 }}
           />
         </ActionIcon>
@@ -195,14 +186,14 @@ const OnboardingChecklist = ({
                     alignItems: 'center',
                     justifyContent: 'center',
                     border: step.isComplete
-                      ? '1px solid var(--mantine-color-green-6)'
-                      : 'none',
+                      ? '1px solid var(--color-text-success)'
+                      : '1px solid var(--color-border)',
                     backgroundColor: step.isComplete
                       ? 'transparent'
-                      : 'var(--mantine-color-dark-5)',
+                      : 'var(--color-bg-muted)',
                     color: step.isComplete
-                      ? 'var(--mantine-color-green-6)'
-                      : 'var(--mantine-color-gray-5)',
+                      ? 'var(--color-text-success)'
+                      : 'var(--color-text)',
                     flexShrink: 0,
                   }}
                 >
@@ -228,7 +219,6 @@ const OnboardingChecklist = ({
                   <Text
                     size="sm"
                     fw="500"
-                    c={step.isComplete ? 'gray.5' : 'gray.3'}
                     style={{
                       textDecoration: step.isComplete ? 'line-through' : 'none',
                       opacity: step.isComplete ? 0.8 : 1,
@@ -236,7 +226,7 @@ const OnboardingChecklist = ({
                   >
                     {step.title}
                   </Text>
-                  <Text size="xs" c="gray.6">
+                  <Text size="xs" c="dimmed">
                     {step.description}
                   </Text>
                 </div>
@@ -246,7 +236,7 @@ const OnboardingChecklist = ({
                     className="bi bi-arrow-right"
                     style={{
                       fontSize: 12,
-                      color: 'var(--mantine-color-gray-5)',
+                      color: 'var(--color-text-muted)',
                     }}
                   />
                 )}
@@ -267,7 +257,7 @@ const OnboardingChecklist = ({
                       borderRadius: 6,
                       cursor: 'pointer',
                       ':hover': {
-                        backgroundColor: 'var(--mantine-color-dark-7)',
+                        backgroundColor: 'var(--color-bg-muted)',
                       },
                     }}
                   >
@@ -288,7 +278,7 @@ const OnboardingChecklist = ({
                     borderRadius: 6,
                     cursor: 'pointer',
                     ':hover': {
-                      backgroundColor: 'var(--mantine-color-dark-7)',
+                      backgroundColor: 'var(--color-bg-hover)',
                     },
                   }}
                 >
diff --git a/packages/app/src/PlaybarSlider.tsx b/packages/app/src/PlaybarSlider.tsx
index 950324ad6..9fd01f558 100644
--- a/packages/app/src/PlaybarSlider.tsx
+++ b/packages/app/src/PlaybarSlider.tsx
@@ -61,10 +61,10 @@ export const PlaybarSlider = ({
             className={styles.markerDot}
             style={{
               backgroundColor: mark.isSuccess
-                ? 'var(--mantine-color-green-6)'
+                ? 'var(--color-text-success)'
                 : mark.isError
-                  ? 'var(--mantine-color-red-6)'
-                  : 'var(--mantine-color-gray-6)',
+                  ? 'var(--color-text-danger)'
+                  : 'var(--color-text-muted)',
               left: `${((mark.ts - min) / (max - min)) * 100}%`,
             }}
             onClick={() => onChange(mark.ts)}
@@ -87,7 +87,7 @@ export const PlaybarSlider = ({
     <div className={styles.wrapper}>
       <div className={styles.markers}>{markersContent}</div>
       <Slider
-        color={playerState === 'playing' ? 'green' : 'gray.5'}
+        color={playerState === 'playing' ? 'green' : 'gray'}
         size="sm"
         min={min}
         max={max}
diff --git a/packages/app/src/PodDetailsSidePanel.tsx b/packages/app/src/PodDetailsSidePanel.tsx
index 78faa643f..a8cdb492b 100644
--- a/packages/app/src/PodDetailsSidePanel.tsx
+++ b/packages/app/src/PodDetailsSidePanel.tsx
@@ -42,12 +42,10 @@ const PodDetailsProperty = React.memo(
     if (!value) return null;
     return (
       <div className="pe-4">
-        <Text size="xs" color="gray.6">
+        <Text size="xs" color="gray">
           {label}
         </Text>
-        <Text size="sm" color="gray.3">
-          {value}
-        </Text>
+        <Text size="sm">{value}</Text>
       </div>
     );
   },
diff --git a/packages/app/src/SearchInputV2.tsx b/packages/app/src/SearchInputV2.tsx
index e338c25d7..3fc1e99f4 100644
--- a/packages/app/src/SearchInputV2.tsx
+++ b/packages/app/src/SearchInputV2.tsx
@@ -118,7 +118,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Full Text:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -133,7 +133,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Substring:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -148,7 +148,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Exact:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -163,7 +163,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Not:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -178,7 +178,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Existence:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
@@ -193,7 +193,7 @@ export default function SearchInputV2({
           <div className="mb-2 me-2">
             <span className="me-1">Boolean:</span>
             <code
-              className="text-muted bg-body p-1 rounded border border-dark"
+              className="text-muted bg-highlighted p-1 rounded border border-dark"
               role="button"
               onClick={() => {
                 const newValue =
diff --git a/packages/app/src/ServicesDashboardPage.tsx b/packages/app/src/ServicesDashboardPage.tsx
index 8bc3a665a..8ded5055f 100644
--- a/packages/app/src/ServicesDashboardPage.tsx
+++ b/packages/app/src/ServicesDashboardPage.tsx
@@ -24,6 +24,7 @@ import {
   Text,
   Tooltip,
 } from '@mantine/core';
+import { IconPlayerPlay } from '@tabler/icons-react';
 
 import {
   ERROR_RATE_PERCENTAGE_NUMBER_FORMAT,
@@ -174,14 +175,12 @@ export function EndpointLatencyChart({
   return (
     <ChartBox style={{ height: 350 }}>
       <Group justify="space-between" align="center" mb="sm">
-        <Text size="sm" c="gray.4">
-          Request Latency
-        </Text>
+        <Text size="sm">Request Latency</Text>
         <Box>
           <Button.Group>
             <Button
               variant="subtle"
-              color={latencyChartType === 'line' ? 'green' : 'dark.2'}
+              color={latencyChartType === 'line' ? 'green' : 'gray'}
               size="xs"
               title="Line Chart"
               onClick={() => setLatencyChartType('line')}
@@ -191,7 +190,7 @@ export function EndpointLatencyChart({
 
             <Button
               variant="subtle"
-              color={latencyChartType === 'histogram' ? 'green' : 'dark.2'}
+              color={latencyChartType === 'histogram' ? 'green' : 'gray'}
               size="xs"
               title="Histogram"
               onClick={() => setLatencyChartType('histogram')}
@@ -302,9 +301,7 @@ function HttpTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Request Error Rate
-            </Text>
+            <Text size="sm">Request Error Rate</Text>
             <SegmentedControl
               size="xs"
               value={reqChartType}
@@ -354,9 +351,7 @@ function HttpTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Request Throughput
-            </Text>
+            <Text size="sm">Request Throughput</Text>
           </Group>
           {source && (
             <DBTimeChart
@@ -389,9 +384,7 @@ function HttpTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350, overflow: 'auto' }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              20 Top Most Time Consuming Endpoints
-            </Text>
+            <Text size="sm">20 Top Most Time Consuming Endpoints</Text>
           </Group>
 
           {source && (
@@ -466,7 +459,7 @@ function HttpTab({
       <Grid.Col span={12}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
+            <Text size="sm">
               Top 20{' '}
               {topEndpointsChartType === 'time'
                 ? 'Most Time Consuming'
@@ -569,9 +562,7 @@ function DatabaseTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Total Time Consumed per Query
-            </Text>
+            <Text size="sm">Total Time Consumed per Query</Text>
           </Group>
           {source && (
             <DBTimeChart
@@ -604,9 +595,7 @@ function DatabaseTab({
       <Grid.Col span={6}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Throughput per Query
-            </Text>
+            <Text size="sm">Throughput per Query</Text>
           </Group>
           {source && (
             <DBTimeChart
@@ -642,14 +631,12 @@ function DatabaseTab({
       <Grid.Col span={12}>
         <ChartBox style={{ height: 350, overflow: 'auto' }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Top 20 Most Time Consuming Queries
-            </Text>
+            <Text size="sm">Top 20 Most Time Consuming Queries</Text>
             <Box>
               <Button.Group>
                 <Button
                   variant="subtle"
-                  color={chartType === 'list' ? 'green' : 'dark.2'}
+                  color={chartType === 'list' ? 'green' : 'gray'}
                   size="xs"
                   title="List"
                   onClick={() => setChartType('list')}
@@ -659,7 +646,7 @@ function DatabaseTab({
 
                 <Button
                   variant="subtle"
-                  color={chartType === 'table' ? 'green' : 'dark.2'}
+                  color={chartType === 'table' ? 'green' : 'gray'}
                   size="xs"
                   title="Table"
                   onClick={() => setChartType('table')}
@@ -815,9 +802,7 @@ function ErrorsTab({
       <Grid.Col span={12}>
         <ChartBox style={{ height: 350 }}>
           <Group justify="space-between" align="center" mb="sm">
-            <Text size="sm" c="gray.4">
-              Error Events per Service
-            </Text>
+            <Text size="sm">Error Events per Service</Text>
           </Group>
           {source && (
             <DBTimeChart
@@ -1019,7 +1004,7 @@ function ServicesDashboardPage() {
               </Button>
             </Tooltip>
             <Button variant="outline" type="submit" px="sm">
-              <i className="bi bi-play"></i>
+              <IconPlayerPlay size={16} />
             </Button>
           </Group>
         </Group>
diff --git a/packages/app/src/SessionEventList.tsx b/packages/app/src/SessionEventList.tsx
index 3c1e8c2e4..a0ffe2a35 100644
--- a/packages/app/src/SessionEventList.tsx
+++ b/packages/app/src/SessionEventList.tsx
@@ -3,6 +3,7 @@ import cx from 'classnames';
 import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/types';
 import { ScrollArea, Skeleton, Stack } from '@mantine/core';
 import { useThrottledCallback, useThrottledValue } from '@mantine/hooks';
+import { IconPlayerPlay } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import useRowWhere from '@/hooks/useRowWhere';
@@ -78,7 +79,7 @@ const EventRow = React.forwardRef(
           </div>
         </div>
         <div className={styles.eventRowTimestamp} onClick={onTimeClick}>
-          <i className="bi bi-play-fill me-1 fs-8" />
+          <IconPlayerPlay size={12} className="me-1" />
           {event.formattedTimestamp}
         </div>
       </div>
diff --git a/packages/app/src/SessionSidePanel.tsx b/packages/app/src/SessionSidePanel.tsx
index 710242075..9b85871ff 100644
--- a/packages/app/src/SessionSidePanel.tsx
+++ b/packages/app/src/SessionSidePanel.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { Button } from 'react-bootstrap';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
@@ -8,6 +7,7 @@ import {
   SearchConditionLanguage,
   TSource,
 } from '@hyperdx/common-utils/dist/types';
+import { Button } from '@mantine/core';
 import { Drawer } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
@@ -85,11 +85,10 @@ export default function SessionSidePanel({
       styles={{
         body: {
           padding: 0,
-          background: '#0F1216',
           height: '100vh',
         },
       }}
-      className="border-start border-dark"
+      className="border-start"
     >
       <ZIndexContext.Provider value={zIndex}>
         <div className="d-flex flex-column h-100">
@@ -111,7 +110,7 @@ export default function SessionSidePanel({
                   <span>{session?.sessionCount} Events</span>
                 </div>
               </div>
-              <div className="d-flex">
+              <div className="d-flex gap-2">
                 <CopyToClipboard
                   text={window.location.href}
                   onCopy={() => {
@@ -122,19 +121,19 @@ export default function SessionSidePanel({
                   }}
                 >
                   <Button
-                    variant="dark"
-                    className="text-muted-hover mx-2 d-flex align-items-center fs-8"
+                    variant="default"
                     size="sm"
+                    leftSection={<i className="bi bi-link-45deg fs-7.5" />}
+                    style={{ fontSize: '12px' }}
                   >
-                    <i className="bi bi-link-45deg me-2 fs-7.5" />
                     Share Session
                   </Button>
                 </CopyToClipboard>
                 <Button
-                  variant="dark"
-                  className="text-muted-hover d-flex align-items-center"
+                  variant="default"
                   size="sm"
                   onClick={onClose}
+                  style={{ padding: '4px 8px' }}
                 >
                   <i className="bi bi-x-lg" />
                 </Button>
diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx
index 5cb51a7e7..a38ba6126 100644
--- a/packages/app/src/SessionSubpanel.tsx
+++ b/packages/app/src/SessionSubpanel.tsx
@@ -610,7 +610,7 @@ export default function SessionSubpanel({
                 {showRelativeTime ? (
                   <>
                     {formatmmss((focus?.ts ?? 0) - minTs)}
-                    <span className="fw-normal text-slate-300 ms-2">
+                    <span className="fw-normal ms-2">
                       {' / '}
                       {formatmmss(maxTs - minTs)}
                     </span>
@@ -625,7 +625,7 @@ export default function SessionSubpanel({
             <Tooltip label="Go 15 seconds back" color="gray">
               <ActionIcon
                 variant="filled"
-                color="gray.8"
+                color="gray"
                 size="md"
                 radius="xl"
                 onClick={skipBackward}
@@ -640,7 +640,7 @@ export default function SessionSubpanel({
             >
               <ActionIcon
                 variant="filled"
-                color="gray.8"
+                color="gray"
                 size="lg"
                 radius="xl"
                 onClick={togglePlayerState}
@@ -655,7 +655,7 @@ export default function SessionSubpanel({
             <Tooltip label="Skip 15 seconds" color="gray">
               <ActionIcon
                 variant="filled"
-                color="gray.8"
+                color="gray"
                 size="md"
                 radius="xl"
                 onClick={skipForward}
diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
index a8fcd2040..c9082b277 100644
--- a/packages/app/src/SessionsPage.tsx
+++ b/packages/app/src/SessionsPage.tsx
@@ -36,6 +36,7 @@ import {
   Text,
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
+import { IconPlayerPlay } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { SourceSelectControlled } from '@/components/SourceSelect';
@@ -53,6 +54,8 @@ import { useSource, useSources } from './source';
 import { FormatTime } from './useFormatTime';
 import { formatDistanceToNowStrictShort } from './utils';
 
+import styles from '../styles/SessionsPage.module.scss';
+
 function SessionCard({
   email,
   maxTime,
@@ -84,14 +87,11 @@ function SessionCard({
   return (
     <div
       data-testid={`session-card-${sessionId}`}
-      className="bg-hdx-dark rounded p-3 d-flex align-items-center justify-content-between text-white-hover-success-trigger"
+      className={`bg-muted rounded p-3 d-flex align-items-center justify-content-between ${styles.sessionCard}`}
       onClick={onClick}
       role="button"
     >
-      <div
-        style={{ width: '50%', maxWidth: 500 }}
-        className="child-hover-trigger"
-      >
+      <div style={{ width: '50%', maxWidth: 500 }} className={styles.emailText}>
         {email || `Anonymous Session ${sessionId}`}
       </div>
       <div>
@@ -491,7 +491,7 @@ export default function SessionsPage() {
                 }}
               />
               <Button variant="outline" type="submit" px="sm">
-                <i className="bi bi-play"></i>
+                <IconPlayerPlay size={16} />
               </Button>
             </Group>
           </Flex>
@@ -510,7 +510,7 @@ export default function SessionsPage() {
           <>
             {sessionSource && sessionSource.kind !== SourceKind.Session && (
               <Alert
-                icon={<i className="bi bi-info-circle-fill text-slate-400" />}
+                icon={<i className="bi bi-info-circle-fill " />}
                 color="gray"
                 py="xs"
                 mt="md"
@@ -544,7 +544,7 @@ function SessionSetupInstructions() {
   return (
     <>
       <Stack w={500} mx="auto" mt="xl" gap="xxs">
-        <i className="bi bi-laptop text-slate-600 fs-1"></i>
+        <i className="bi bi-laptop text-muted fs-1"></i>
         <Text c="gray" fw={500} size="xs">
           Instructions
         </Text>
diff --git a/packages/app/src/TabItem.tsx b/packages/app/src/TabItem.tsx
index 1a8da8641..1863bead1 100644
--- a/packages/app/src/TabItem.tsx
+++ b/packages/app/src/TabItem.tsx
@@ -23,11 +23,13 @@ export default function TabItem({
       {...props}
     >
       <span>{children}</span>
-      <div className="w-100 mt-2" style={{ height: 4 }}>
+      <div className="w-100 mt-2" style={{ height: 2 }}>
         <div
           className="h-100 w-100"
           style={{
-            background: active ? '#50FA7B' : '#242d33',
+            background: active
+              ? 'var(--color-bg-success)'
+              : 'var(--color-border)',
           }}
         ></div>
       </div>
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index b4f64b289..f4f461c20 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -1,7 +1,6 @@
 import { Fragment, useCallback, useMemo, useState } from 'react';
 import Head from 'next/head';
 import { HTTPError } from 'ky';
-import { Button as BSButton, Modal as BSModal } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { DEFAULT_METADATA_MAX_ROWS_TO_READ } from '@hyperdx/common-utils/dist/core/metadata';
@@ -18,7 +17,7 @@ import {
   Group,
   InputLabel,
   Loader,
-  Modal as MModal,
+  Modal,
   Stack,
   Table,
   Text,
@@ -72,7 +71,7 @@ function InviteTeamMemberForm({
           placeholder="you@company.com"
           withAsterisk={false}
         />
-        <div className="text-slate-300 fs-8">
+        <div className="fs-8">
           The invite link will automatically expire after 30 days.
         </div>
         <Button variant="light" type="submit" disabled={!email || isSubmitting}>
@@ -93,11 +92,9 @@ function ConnectionsSection() {
 
   return (
     <Box id="connections">
-      <Text size="md" c="gray.4">
-        Connections
-      </Text>
+      <Text size="md">Connections</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         <Stack mb="md">
           {connections?.map(c => (
             <Box key={c.id}>
@@ -119,7 +116,6 @@ function ConnectionsSection() {
                 {editedConnectionId !== c.id && (
                   <Button
                     variant="subtle"
-                    color="gray.4"
                     onClick={() => setEditedConnectionId(c.id)}
                     size="sm"
                   >
@@ -129,7 +125,6 @@ function ConnectionsSection() {
                 {editedConnectionId === c.id && (
                   <Button
                     variant="subtle"
-                    color="gray.4"
                     onClick={() => setEditedConnectionId(null)}
                     size="sm"
                   >
@@ -156,7 +151,6 @@ function ConnectionsSection() {
           (IS_LOCAL_MODE ? (connections?.length ?? 0) < 1 : true) && (
             <Button
               variant="outline"
-              color="gray.4"
               onClick={() => setIsCreatingConnection(true)}
             >
               Add Connection
@@ -193,11 +187,9 @@ function SourcesSection() {
 
   return (
     <Box id="sources">
-      <Text size="md" c="gray.4">
-        Sources
-      </Text>
+      <Text size="md">Sources</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         <Stack>
           {sources?.map(s => (
             <>
@@ -227,7 +219,6 @@ function SourcesSection() {
                 {editedSourceId !== s.id && (
                   <Button
                     variant="subtle"
-                    color="gray.4"
                     onClick={() => setEditedSourceId(s.id)}
                     size="sm"
                   >
@@ -237,7 +228,6 @@ function SourcesSection() {
                 {editedSourceId === s.id && (
                   <Button
                     variant="subtle"
-                    color="gray.4"
                     onClick={() => setEditedSourceId(null)}
                     size="sm"
                   >
@@ -264,11 +254,7 @@ function SourcesSection() {
             />
           )}
           {!IS_LOCAL_MODE && !isCreatingSource && (
-            <Button
-              variant="outline"
-              onClick={() => setIsCreatingSource(true)}
-              color="gray.4"
-            >
+            <Button variant="default" onClick={() => setIsCreatingSource(true)}>
               Add Source
             </Button>
           )}
@@ -467,15 +453,13 @@ function TeamMembersSection() {
 
   return (
     <Box id="team_members">
-      <Text size="md" c="gray.4">
-        Team
-      </Text>
+      <Text size="md">Team</Text>
       <Divider my="md" />
 
       <Card>
         <Card.Section withBorder py="sm" px="lg">
           <Group align="center" justify="space-between">
-            <div className="text-slate-300 fs-7">Team Members</div>
+            <div className="fs-7">Team Members</div>
             <Button
               variant="light"
               leftSection={<i className="bi bi-person-plus-fill" />}
@@ -506,7 +490,7 @@ function TeamMembersSection() {
                       <Group mt={4} fz="xs">
                         <div>{member.email}</div>
                         {member.hasPasswordAuth && (
-                          <div className="text-slate-300">
+                          <div>
                             <i className="bi bi-lock-fill" /> Password Auth
                           </div>
                         )}
@@ -566,7 +550,7 @@ function TeamMembersSection() {
                       </span>
                     </Table.Td>
                     <Table.Td>
-                      <Badge variant="dot" color="gray.6" fw="normal" tt="none">
+                      <Badge variant="dot" color="gray" fw="normal" tt="none">
                         Pending Invite
                       </Badge>
                       <CopyToClipboard text={invitation.url}>
@@ -602,7 +586,7 @@ function TeamMembersSection() {
         </Card.Section>
       </Card>
 
-      <MModal
+      <Modal
         centered
         onClose={() => setTeamInviteModalShow(false)}
         opened={teamInviteModalShow}
@@ -612,58 +596,56 @@ function TeamMembersSection() {
           onSubmit={onSubmitTeamInviteForm}
           isSubmitting={saveTeamInvitation.isPending}
         />
-      </MModal>
+      </Modal>
 
-      <BSModal
-        aria-labelledby="contained-modal-title-vcenter"
+      <Modal
         centered
-        onHide={() =>
+        onClose={() =>
           setDeleteTeamMemberConfirmationModalData({
             mode: null,
             id: null,
             email: null,
           })
         }
-        show={deleteTeamMemberConfirmationModalData.id != null}
+        opened={deleteTeamMemberConfirmationModalData.id != null}
         size="lg"
+        title="Delete Team Member"
       >
-        <BSModal.Body className="bg-grey rounded">
-          <h3 className="text-muted">Delete Team Member</h3>
-          <p className="text-muted">
+        <Stack>
+          <Text>
             Deleting this team member (
             {deleteTeamMemberConfirmationModalData.email}) will revoke their
             access to the team&apos;s resources and services. This action is not
             reversible.
-          </p>
-          <BSButton
-            variant="outline-secondary"
-            className="mt-2 px-4 ms-2 float-end"
-            size="sm"
-            onClick={() =>
-              setDeleteTeamMemberConfirmationModalData({
-                mode: null,
-                id: null,
-                email: null,
-              })
-            }
-          >
-            Cancel
-          </BSButton>
-          <BSButton
-            variant="outline-danger"
-            className="mt-2 px-4 float-end"
-            size="sm"
-            onClick={() =>
-              deleteTeamMemberConfirmationModalData.id &&
-              onConfirmDeleteTeamMember(
-                deleteTeamMemberConfirmationModalData.id,
-              )
-            }
-          >
-            Confirm
-          </BSButton>
-        </BSModal.Body>
-      </BSModal>
+          </Text>
+          <Group justify="flex-end" gap="xs">
+            <Button
+              variant="default"
+              onClick={() =>
+                setDeleteTeamMemberConfirmationModalData({
+                  mode: null,
+                  id: null,
+                  email: null,
+                })
+              }
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="outline"
+              color="red"
+              onClick={() =>
+                deleteTeamMemberConfirmationModalData.id &&
+                onConfirmDeleteTeamMember(
+                  deleteTeamMemberConfirmationModalData.id,
+                )
+              }
+            >
+              Confirm
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
     </Box>
   );
 }
@@ -741,11 +723,9 @@ function IntegrationsSection() {
 
   return (
     <Box id="integrations">
-      <Text size="md" c="gray.4">
-        Integrations
-      </Text>
+      <Text size="md">Integrations</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         <Text mb="xs">Webhooks</Text>
 
         <Stack>
@@ -770,7 +750,6 @@ function IntegrationsSection() {
                     <>
                       <Button
                         variant="subtle"
-                        color="gray.4"
                         onClick={() => setEditedWebhookId(webhook._id)}
                         size="compact-xs"
                         leftSection={<IconPencil size={14} />}
@@ -787,7 +766,6 @@ function IntegrationsSection() {
                   {editedWebhookId === webhook._id && (
                     <Button
                       variant="subtle"
-                      color="gray.4"
                       onClick={() => setEditedWebhookId(null)}
                       size="compact-xs"
                     >
@@ -812,7 +790,7 @@ function IntegrationsSection() {
         </Stack>
 
         {!isAddWebhookModalOpen ? (
-          <Button variant="outline" color="gray.4" onClick={openWebhookModal}>
+          <Button variant="outline" onClick={openWebhookModal}>
             Add Webhook
           </Button>
         ) : (
@@ -866,11 +844,9 @@ function TeamNameSection() {
   );
   return (
     <Box id="team_name">
-      <Text size="md" c="gray.4">
-        Team Name
-      </Text>
+      <Text size="md">Team Name</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         {isEditingTeamName ? (
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <Group gap="xs">
@@ -912,12 +888,12 @@ function TeamNameSection() {
           </form>
         ) : (
           <Group gap="lg">
-            <div className="text-slate-300 fs-7">{team.name}</div>
+            <div className="fs-7">{team.name}</div>
             {hasAdminAccess && (
               <Button
                 size="xs"
                 variant="default"
-                leftSection={<i className="bi bi-pencil text-slate-300" />}
+                leftSection={<i className="bi bi-pencil " />}
                 onClick={() => {
                   setIsEditingTeamName(true);
                 }}
@@ -1022,12 +998,10 @@ function ClickhouseSettingForm({
   return (
     <Stack gap="xs" mb="md">
       <Group gap="xs">
-        <InputLabel c="gray.3" size="md">
-          {label}
-        </InputLabel>
+        <InputLabel size="md">{label}</InputLabel>
         {tooltip && (
           <Tooltip label={tooltip}>
-            <Text c="gray.5" size="sm" style={{ cursor: 'help' }}>
+            <Text size="sm" style={{ cursor: 'help' }}>
               <i className="bi bi-question-circle" />
             </Text>
           </Tooltip>
@@ -1113,7 +1087,7 @@ function ClickhouseSettingForm({
             <Button
               size="xs"
               variant="default"
-              leftSection={<i className="bi bi-pencil text-slate-300" />}
+              leftSection={<i className="bi bi-pencil " />}
               onClick={() => setIsEditing(true)}
             >
               Change
@@ -1136,11 +1110,9 @@ function TeamQueryConfigSection() {
 
   return (
     <Box id="team_name">
-      <Text size="md" c="gray.4">
-        ClickHouse Client Settings
-      </Text>
+      <Text size="md">ClickHouse Client Settings</Text>
       <Divider my="md" />
-      <Card>
+      <Card variant="muted">
         <Stack>
           <ClickhouseSettingForm
             settingKey="searchRowLimit"
@@ -1202,7 +1174,7 @@ const APIKeyCopyButton = ({
         variant={copied ? 'light' : 'default'}
         color="gray"
         rightSection={
-          <div className="text-slate-300 ms-2 text-nowrap">
+          <div className="ms-2 text-nowrap">
             {copied ? (
               <i className="bi bi-check-lg me-2" />
             ) : (
@@ -1254,14 +1226,10 @@ function ApiKeysSection() {
 
   return (
     <Box id="api_keys">
-      <Text size="md" c="gray.4">
-        API Keys
-      </Text>
+      <Text size="md">API Keys</Text>
       <Divider my="md" />
-      <Card>
-        <Text c="gray.3" mb="md">
-          Ingestion API Key
-        </Text>
+      <Card variant="muted" mb="md">
+        <Text mb="md">Ingestion API Key</Text>
         <Group gap="xs">
           {team?.apiKey && (
             <APIKeyCopyButton value={team.apiKey} dataTestId="api-key" />
@@ -1276,7 +1244,7 @@ function ApiKeysSection() {
             </Button>
           )}
         </Group>
-        <MModal
+        <Modal
           aria-labelledby="contained-modal-title-vcenter"
           centered
           onClose={() => setRotateApiKeyConfirmationModalShow(false)}
@@ -1288,15 +1256,14 @@ function ApiKeysSection() {
             </Text>
           }
         >
-          <MModal.Body>
+          <Modal.Body>
             <Text size="md">
               Rotating the API key will invalidate your existing API key and
               generate a new one for you. This action is <b>not reversible</b>.
             </Text>
             <Group justify="end">
               <Button
-                variant="outline"
-                color="gray.5"
+                variant="default"
                 className="mt-2 px-4 ms-2 float-end"
                 size="sm"
                 onClick={() => setRotateApiKeyConfirmationModalShow(false)}
@@ -1305,7 +1272,7 @@ function ApiKeysSection() {
               </Button>
               <Button
                 variant="outline"
-                color="red.6"
+                color="red"
                 className="mt-2 px-4 float-end"
                 size="sm"
                 onClick={onConfirmUpdateTeamApiKey}
@@ -1313,15 +1280,13 @@ function ApiKeysSection() {
                 Confirm
               </Button>
             </Group>
-          </MModal.Body>
-        </MModal>
+          </Modal.Body>
+        </Modal>
       </Card>
       {!isLoadingMe && me != null && (
-        <Card>
+        <Card variant="muted">
           <Card.Section p="md">
-            <Text c="gray.3" mb="md">
-              Personal API Access Key
-            </Text>
+            <Text mb="md">Personal API Access Key</Text>
             <APIKeyCopyButton value={me.accessKey} dataTestId="api-key" />
           </Card.Section>
         </Card>
diff --git a/packages/app/src/ThemeWrapper.tsx b/packages/app/src/ThemeWrapper.tsx
index 0a700b02f..b1d1c1fed 100644
--- a/packages/app/src/ThemeWrapper.tsx
+++ b/packages/app/src/ThemeWrapper.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 import {
+  ActionIcon,
   Button,
   MantineProvider,
+  MantineTheme,
   MantineThemeOverride,
   rem,
   Select,
+  Text,
 } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 
@@ -13,11 +16,11 @@ const makeTheme = ({
 }: {
   fontFamily?: string;
 }): MantineThemeOverride => ({
-  defaultRadius: 'xs',
   cursorType: 'pointer',
   fontFamily,
   primaryColor: 'green',
   primaryShade: 8,
+  autoContrast: true,
   white: '#fff',
   fontSizes: {
     xxs: '11px',
@@ -37,18 +40,18 @@ const makeTheme = ({
     xl: 'calc(2rem * var(--mantine-scale))',
   },
   colors: {
-    // https://mantine.dev/colors-generator/?color=09D99C
+    // https://uicolors.app/generate/00c28a
     green: [
-      '#e2fff8',
-      '#cefef0',
-      '#a0fbe0',
-      '#6df9cf',
-      '#09D99C', // Toned Down
-      '#2ff5b8',
-      '#1ef5b3',
-      '#09da9d',
+      '#eafff6',
+      '#cdfee7',
+      '#a0fad5',
+      '#63f2bf',
+      '#25e2a5',
       '#00c28a',
-      '#00a875',
+      '#00a475',
+      '#008362',
+      '#00674e',
+      '#005542',
     ],
     // https://mantine.dev/colors-generator/?color=A1A1AA
     // Customized with FAFAFA, D7D8DB, A1A1AA
@@ -75,7 +78,6 @@ const makeTheme = ({
       '#1A1B1E',
       '#141517',
       '#101113',
-      '#14171b',
     ],
   },
   headings: {
@@ -104,24 +106,99 @@ const makeTheme = ({
     Select: Select.extend({
       styles: {
         input: {
-          border: '1px solid var(--mantine-color-gray-7)',
+          border: '1px solid var(--color-border)',
         },
       },
     }),
     Input: {
       styles: {
         input: {
-          border: '1px solid var(--mantine-color-gray-7)',
+          backgroundColor: 'var(--color-bg-field)',
+          border: '1px solid var(--color-border)',
         },
       },
     },
     Card: {
+      styles: (_theme: MantineTheme, props: { variant?: string }) => {
+        if (props.variant === 'muted') {
+          return {
+            root: {
+              backgroundColor: 'var(--color-bg-muted)',
+              border: '1px solid var(--color-border)',
+            },
+          };
+        }
+        return {
+          root: {
+            backgroundColor: 'var(--color-bg-body)',
+          },
+        };
+      },
+    },
+    Divider: {
       styles: {
         root: {
-          backgroundColor: '#191B1F',
+          borderColor: 'var(--color-border)',
+          borderTopColor: 'var(--color-border)',
+          '--divider-color': 'var(--color-border)',
+          '--item-border-color': 'var(--color-border)',
         },
       },
     },
+    Accordion: {
+      styles: {
+        control: {
+          '--item-border-color': 'var(--color-border)',
+        },
+        item: {
+          borderColor: 'var(--color-border)',
+        },
+      },
+    },
+    UnstyledButton: {
+      styles: {
+        root: {
+          '--item-border-color': 'var(--color-border)',
+        },
+      },
+    },
+    Paper: {
+      classNames: (_theme: MantineTheme, props: { variant?: string }) => {
+        if (props.variant === 'muted') {
+          return {
+            root: 'paper-muted',
+          };
+        }
+        return {};
+      },
+      styles: (_theme: MantineTheme, props: { variant?: string }) => {
+        if (props.variant === 'muted') {
+          return {
+            root: {
+              backgroundColor: 'var(--color-bg-muted)',
+              border: '1px solid var(--color-border)',
+            },
+          };
+        }
+        return {
+          root: {
+            border: '1px solid var(--color-border)',
+          },
+        };
+      },
+    },
+    Text: Text.extend({
+      styles: (theme, props) => {
+        if (props.variant === 'danger') {
+          return {
+            root: {
+              color: 'var(--color-text-danger)',
+            },
+          };
+        }
+        return {};
+      },
+    }),
     Button: Button.extend({
       vars: (theme, props) => {
         if (props.size === 'xxs') {
@@ -137,20 +214,64 @@ const makeTheme = ({
         return { root: {} };
       },
     }),
+    ActionIcon: ActionIcon.extend({
+      defaultProps: {
+        variant: 'subtle',
+        color: 'gray',
+      },
+      styles: (theme, props) => {
+        // Subtle variant stays transparent
+        if (props.variant === 'subtle') {
+          return {
+            root: {
+              backgroundColor: 'transparent',
+              color: 'var(--color-text)',
+              '&:hover': {
+                backgroundColor: 'var(--color-bg-hover)',
+              },
+              '&:active': {
+                backgroundColor: 'var(--color-bg-muted)',
+              },
+            },
+          };
+        }
+
+        // Default variant
+        if (props.variant === 'default') {
+          return {
+            root: {
+              backgroundColor: 'var(--color-bg-hover)',
+              color: 'var(--color-text)',
+              border: 'none',
+              '&:hover': {
+                backgroundColor: 'var(--color-bg-muted)',
+              },
+              '&:active': {
+                backgroundColor: 'var(--color-bg-muted)',
+              },
+            },
+          };
+        }
+
+        return {};
+      },
+    }),
   },
 });
 
 export const ThemeWrapper = ({
   fontFamily,
+  colorScheme = 'dark',
   children,
 }: {
   fontFamily?: string;
+  colorScheme?: 'dark' | 'light';
   children: React.ReactNode;
 }) => {
   const theme = React.useMemo(() => makeTheme({ fontFamily }), [fontFamily]);
 
   return (
-    <MantineProvider forceColorScheme="dark" theme={theme}>
+    <MantineProvider forceColorScheme={colorScheme} theme={theme}>
       <Notifications zIndex={999999} />
       {children}
     </MantineProvider>
diff --git a/packages/app/src/TimelineChart.tsx b/packages/app/src/TimelineChart.tsx
index 9884f56fb..6434a8cfa 100644
--- a/packages/app/src/TimelineChart.tsx
+++ b/packages/app/src/TimelineChart.tsx
@@ -2,6 +2,7 @@ import { memo, RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import cx from 'classnames';
 import { Tooltip } from '@mantine/core';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { color } from '@uiw/react-codemirror';
 
 import useResizable from './hooks/useResizable';
 import { useDrag, usePrevious } from './utils';
@@ -165,12 +166,10 @@ function TimelineXAxis({
           width: 1,
           marginRight: -1,
           marginLeft: i === 0 ? 0 : `${percSpacing.toFixed(6)}%`,
-          background: 'rgba(255, 255, 255, 0.08)',
+          background: 'var(--color-bg-surface)',
         }}
       >
-        <div className="ms-2 text-slate-400 fs-8.5">
-          {renderMs(i * interval)}
-        </div>
+        <div className="ms-2 fs-8.5">{renderMs(i * interval)}</div>
       </div>,
     );
   }
@@ -338,6 +337,7 @@ type Row = {
   style?: any;
   type?: string;
   className?: string;
+  isActive?: boolean;
 };
 
 export default function TimelineChart({
@@ -560,6 +560,7 @@ export default function TimelineChart({
                   'd-flex align-items-center overflow-hidden',
                   row.className,
                   styles.timelineRow,
+                  row.isActive && styles.timelineRowActive,
                 )}`}
                 style={{
                   // position: 'absolute',
@@ -582,7 +583,7 @@ export default function TimelineChart({
                   <div
                     className={resizeStyles.resizeHandle}
                     onMouseDown={startResize}
-                    style={{ backgroundColor: '#3a3a44' }}
+                    style={{ backgroundColor: 'var(--color-bg-neutral)' }}
                   />
                 </div>
                 <NewTimelineRow
@@ -590,10 +591,11 @@ export default function TimelineChart({
                   height={rowHeight}
                   maxVal={maxVal}
                   eventStyles={{
-                    boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.5)',
                     borderRadius: 2,
                     fontSize: rowHeight * 0.5,
-                    border: '1px solid #FFFFFF10',
+                    border: '1px solid var(--color-border)',
+                    backgroundColor: 'var(--color-bg-neutral)',
+                    color: 'var(--color-text)',
                   }}
                   scale={scale}
                   offset={offset}
diff --git a/packages/app/src/UserPreferencesModal.tsx b/packages/app/src/UserPreferencesModal.tsx
index 453578177..f5efcf8d7 100644
--- a/packages/app/src/UserPreferencesModal.tsx
+++ b/packages/app/src/UserPreferencesModal.tsx
@@ -63,7 +63,7 @@ const SettingContainer = ({
       <div style={{ flex: 1 }}>
         {label}
         {description && (
-          <Text c="gray.6" size="xs" mt={2}>
+          <Text size="xs" mt={2}>
             {description}
           </Text>
         )}
@@ -87,7 +87,7 @@ export const UserPreferencesModal = ({
       title={
         <>
           <span>Preferences</span>
-          <Text size="xs" c="gray.6" mt={6}>
+          <Text size="xs" mt={6}>
             Customize your experience
           </Text>
         </>
diff --git a/packages/app/src/components/ChartBox.tsx b/packages/app/src/components/ChartBox.tsx
index e5345dd7c..bb1cd6f8d 100644
--- a/packages/app/src/components/ChartBox.tsx
+++ b/packages/app/src/components/ChartBox.tsx
@@ -15,9 +15,9 @@ export function ChartBox({
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
-        background:
-          'linear-gradient(180deg, rgba(250,250,250,0.018) 0%, rgba(250,250,250,0.008) 100%)',
-        borderRadius: 2,
+        background: 'var(--color-bg-body)',
+        borderRadius: 'var(--mantine-radius-sm)',
+        border: '1px solid var(--color-border)',
         ...style,
       }}
     >
diff --git a/packages/app/src/components/ChartSQLPreview.tsx b/packages/app/src/components/ChartSQLPreview.tsx
index d3b00d671..c128a312b 100644
--- a/packages/app/src/components/ChartSQLPreview.tsx
+++ b/packages/app/src/components/ChartSQLPreview.tsx
@@ -4,6 +4,7 @@ import { sql } from '@codemirror/lang-sql';
 import { format } from '@hyperdx/common-utils/dist/sqlFormatter';
 import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import { Button, Paper } from '@mantine/core';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
 import CodeMirror from '@uiw/react-codemirror';
 
 import { useRenderedSqlChartConfig } from '@/hooks/useChartConfig';
@@ -19,20 +20,29 @@ function tryFormat(data?: string) {
   }
 }
 
-function CopyButton({ text = '' }: { text?: string }) {
+function CopyButton({
+  text = '',
+  size = 'md',
+}: {
+  text?: string;
+  size?: 'xs' | 'md';
+}) {
   const [copied, setCopied] = useState(false);
 
+  const iconSize = size === 'xs' ? 14 : 16;
+  const buttonSize = size === 'xs' ? 'compact-xs' : 'sm';
+
   return (
     <CopyToClipboard text={text ?? ''} onCopy={() => setCopied(true)}>
       <Button
-        variant={copied ? 'light' : 'outline'}
-        color="gray"
+        variant={copied ? 'light' : 'default'}
+        size={buttonSize}
         className="position-absolute top-0 end-0"
       >
         {copied ? (
-          <i className="bi bi-check-lg me-2" />
+          <IconCheck size={iconSize} className="me-2" />
         ) : (
-          <i className="bi bi-clipboard-fill me-2" />
+          <IconCopy size={iconSize} className="me-2" />
         )}
         {copied ? 'Copied!' : 'Copy'}
       </Button>
@@ -44,10 +54,12 @@ export function SQLPreview({
   data,
   formatData = true,
   enableCopy = false,
+  copyButtonSize = 'md',
 }: {
   data?: string;
   formatData?: boolean;
   enableCopy?: boolean;
+  copyButtonSize?: 'xs' | 'md';
 }) {
   const displayed = formatData ? tryFormat(data) : data;
 
@@ -66,7 +78,7 @@ export function SQLPreview({
         extensions={[sql()]}
         editable={false}
       />
-      {enableCopy && <CopyButton text={displayed} />}
+      {enableCopy && <CopyButton text={displayed} size={copyButtonSize} />}
     </div>
   );
 }
diff --git a/packages/app/src/components/ColorSwatchInput.tsx b/packages/app/src/components/ColorSwatchInput.tsx
index d52e7751f..83e0aca20 100644
--- a/packages/app/src/components/ColorSwatchInput.tsx
+++ b/packages/app/src/components/ColorSwatchInput.tsx
@@ -52,20 +52,15 @@ export const ColorSwatchInput = ({
           size="compact-xs"
           variant="light"
           color="gray"
-          bg="gray.8"
           onClick={() => setOpened(o => !o)}
         >
           {value ? (
             <Group gap="xs">
-              <Text size="xs" c="gray.5">
-                Color
-              </Text>
+              <Text size="xs">Color</Text>
               <ColorSwatch color={value} size={14} />
             </Group>
           ) : (
-            <Text size="xs" c="gray.5">
-              Choose color
-            </Text>
+            <Text size="xs">Choose color</Text>
           )}
         </Button>
       </Popover.Target>
diff --git a/packages/app/src/components/ConfirmDeleteMenu.tsx b/packages/app/src/components/ConfirmDeleteMenu.tsx
index 911964b7f..c0dfc71e1 100644
--- a/packages/app/src/components/ConfirmDeleteMenu.tsx
+++ b/packages/app/src/components/ConfirmDeleteMenu.tsx
@@ -8,7 +8,7 @@ export default function ConfirmDeleteMenu({
   return (
     <Menu withArrow>
       <Menu.Target>
-        <Button variant="outline" color="gray.4" size="xs">
+        <Button variant="outline" size="xs">
           Delete
         </Button>
       </Menu.Target>
diff --git a/packages/app/src/components/ConnectionForm.tsx b/packages/app/src/components/ConnectionForm.tsx
index fd23f52f9..b6ea1a2be 100644
--- a/packages/app/src/components/ConnectionForm.tsx
+++ b/packages/app/src/components/ConnectionForm.tsx
@@ -209,7 +209,7 @@ export function ConnectionForm({
     >
       <Stack gap="md">
         <Box>
-          <Text c="gray.4" size="xs" mb="xs">
+          <Text size="xs" mb="xs">
             Connection Name
           </Text>
           <InputControlled
@@ -221,7 +221,7 @@ export function ConnectionForm({
           />
         </Box>
         <Box>
-          <Text c="gray.4" size="xs" mb="xs">
+          <Text size="xs" mb="xs">
             Host
           </Text>
           <InputControlled
@@ -233,7 +233,7 @@ export function ConnectionForm({
           />
         </Box>
         <Box>
-          <Text c="gray.4" size="xs" mb="xs">
+          <Text size="xs" mb="xs">
             Username
           </Text>
           <InputControlled
@@ -244,14 +244,13 @@ export function ConnectionForm({
           />
         </Box>
         <Box>
-          <Text c="gray.4" size="xs" mb="xs">
+          <Text size="xs" mb="xs">
             Password
           </Text>
           {!showUpdatePassword && !isNew && (
             <Button
               data-testid="update-password-button"
               variant="outline"
-              color="gray.4"
               onClick={() => {
                 setShowUpdatePassword(true);
               }}
@@ -272,7 +271,6 @@ export function ConnectionForm({
                 <Button
                   data-testid="cancel-password-button"
                   variant="outline"
-                  color="gray.4"
                   onClick={() => {
                     setShowUpdatePassword(false);
                     resetField('password');
@@ -339,7 +337,7 @@ export function ConnectionForm({
             />
           )}
           {onClose && showCancelButton && (
-            <Button variant="outline" color="gray.4" onClick={onClose}>
+            <Button variant="outline" onClick={onClose}>
               Cancel
             </Button>
           )}
diff --git a/packages/app/src/components/ContextSidePanel.tsx b/packages/app/src/components/ContextSidePanel.tsx
index 7a520abb5..c0045e026 100644
--- a/packages/app/src/components/ContextSidePanel.tsx
+++ b/packages/app/src/components/ContextSidePanel.tsx
@@ -247,8 +247,6 @@ export default function ContextSubpanel({
         <Flex direction="column" mih="0px" style={{ flexGrow: 1 }}>
           <Group justify="space-between" p="sm">
             <SegmentedControl
-              bg="dark.7"
-              color="dark.5"
               size="xs"
               data={generateSegmentedControlData()}
               value={contextBy}
@@ -287,8 +285,6 @@ export default function ContextSubpanel({
               />
             )}
             <SegmentedControl
-              bg="dark.7"
-              color="dark.5"
               size="xs"
               data={[
                 { label: '100ms', value: ms('100ms').toString() },
diff --git a/packages/app/src/components/DBDeltaChart.tsx b/packages/app/src/components/DBDeltaChart.tsx
index df2ab35a3..262f970ea 100644
--- a/packages/app/src/components/DBDeltaChart.tsx
+++ b/packages/app/src/components/DBDeltaChart.tsx
@@ -166,7 +166,7 @@ const HDXBarChartTooltip = withErrorBoundary(
         <div className={styles.chartTooltip}>
           <div className={styles.chartTooltipContent}>
             {title && (
-              <Text size="xs" mb="xs" c="gray.4">
+              <Text size="xs" mb="xs">
                 {title}
               </Text>
             )}
@@ -212,7 +212,7 @@ function PropertyComparisonChart({
 
   return (
     <div style={{ width: 340, height: 120 }}>
-      <Text size="xs" c="gray.4" ta="center" title={name}>
+      <Text size="xs" ta="center" title={name}>
         {truncateMiddle(name, 32)}
       </Text>
       <ResponsiveContainer width="100%" height="100%">
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
index 47575089f..67b283d8a 100644
--- a/packages/app/src/components/DBEditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -47,6 +47,7 @@ import {
   Text,
   Textarea,
 } from '@mantine/core';
+import { IconPlayerPlay } from '@tabler/icons-react';
 
 import { AGG_FNS } from '@/ChartUtils';
 import { AlertChannelForm, getAlertReferenceLines } from '@/components/Alerts';
@@ -229,7 +230,6 @@ function ChartSeriesEditorComponent({
             )}
           </Group>
         }
-        c="dark.2"
         labelPosition="right"
         mb={8}
         mt="sm"
@@ -677,7 +677,7 @@ export default function EditTimeChartForm({
         )}
       />
       <Flex align="center" gap="sm" mb="sm">
-        <Text c="gray.4" size="sm" className="text-nowrap">
+        <Text size="sm" className="text-nowrap">
           Chart Name
         </Text>
         <InputControlled
@@ -704,7 +704,7 @@ export default function EditTimeChartForm({
               },
             }}
           />
-          <Box p="md" bg="dark.6" mb="md">
+          <Box p="md" mb="md">
             <HDXMarkdownChart
               config={{
                 markdown: watch('markdown') || 'Preview',
@@ -715,7 +715,7 @@ export default function EditTimeChartForm({
       ) : (
         <>
           <Flex mb="md" align="center" gap="sm">
-            <Text c="gray.4" pe="md" size="sm">
+            <Text pe="md" size="sm">
               Data Source
             </Text>
             <SourceSelectControlled
@@ -758,7 +758,6 @@ export default function EditTimeChartForm({
                   <Divider mt="md" mb="sm" />
                   <Flex align="center" mt="sm">
                     <Text
-                      c="gray.4"
                       me="sm"
                       size="sm"
                       style={{
@@ -888,7 +887,7 @@ export default function EditTimeChartForm({
       {alert && (
         <Paper my="sm">
           <Stack gap="xs">
-            <Paper px="md" py="sm" bg="dark.6" radius="xs">
+            <Paper px="md" py="sm" radius="xs">
               <Group gap="xs" justify="space-between">
                 <Group gap="xs">
                   <Text size="sm" opacity={0.7}>
@@ -962,7 +961,7 @@ export default function EditTimeChartForm({
           {onClose != null && (
             <Button
               variant="subtle"
-              color="dark.2"
+              color="dark"
               onClick={onClose}
               disabled={isSaving}
             >
@@ -994,10 +993,9 @@ export default function EditTimeChartForm({
               data-testid="chart-run-query-button"
               variant="outline"
               type="submit"
-              color="green"
               onClick={onSubmit}
             >
-              <i className="bi bi-play"></i>
+              <IconPlayerPlay size={16} />
             </Button>
           )}
         </Flex>
@@ -1005,7 +1003,7 @@ export default function EditTimeChartForm({
       {!queryReady && activeTab !== 'markdown' ? (
         <Paper shadow="xs" p="xl">
           <Center mih={400}>
-            <Text size="sm" c="gray.4">
+            <Text size="sm">
               Please start by selecting a database, table, and timestamp column
               above and then click the play button to query data.
             </Text>
diff --git a/packages/app/src/components/DBHeatmapChart.tsx b/packages/app/src/components/DBHeatmapChart.tsx
index ee0ee1c57..8aa2976ae 100644
--- a/packages/app/src/components/DBHeatmapChart.tsx
+++ b/packages/app/src/components/DBHeatmapChart.tsx
@@ -481,7 +481,7 @@ function HeatmapContainer({
   if (isLoading || isMinMaxLoading) {
     return (
       <Paper shadow="xs" p="xl">
-        <Text size="sm" c="gray.4" ta="center">
+        <Text size="sm" ta="center">
           Loading...
         </Text>
       </Paper>
@@ -539,7 +539,7 @@ function HeatmapContainer({
   if (time.length < 2 || generatedTsBuckets?.length < 2) {
     return (
       <Paper shadow="xs" p="xl">
-        <Text size="sm" c="gray.4" ta="center">
+        <Text size="sm" ta="center">
           Not enough data points to render heatmap. Try expanding your search
           criteria.
         </Text>
@@ -845,7 +845,7 @@ function Heatmap({
             }}
           />
           <div
-            className="px-2 py-1 fs-8 text-slate-200"
+            className="px-2 py-1 fs-8"
             style={{
               position: 'absolute',
               top: highlightedPoint.yCoord + 5,
@@ -885,7 +885,7 @@ function Heatmap({
       )}
       {selectingInfo != null && onFilter != null && (
         <div
-          className="px-2 py-1 text-slate-200 fs-8"
+          className="px-2 py-1 fs-8"
           style={{
             backdropFilter: 'blur(4px)',
             backgroundColor: 'rgba(#1A1D23 0.4)',
diff --git a/packages/app/src/components/DBHistogramChart.tsx b/packages/app/src/components/DBHistogramChart.tsx
index 81aa466ac..6fb506fa5 100644
--- a/packages/app/src/components/DBHistogramChart.tsx
+++ b/packages/app/src/components/DBHistogramChart.tsx
@@ -154,7 +154,7 @@ const HDXHistogramChartTooltip = (props: any) => {
 
     return (
       <div
-        className="bg-grey px-3 py-2 rounded fs-8"
+        className="bg-muted px-3 py-2 rounded fs-8"
         style={{ pointerEvents: 'auto' }}
       >
         <div className="mb-2">
diff --git a/packages/app/src/components/DBInfraPanel.tsx b/packages/app/src/components/DBInfraPanel.tsx
index 1b79c9ebd..7d074cc44 100644
--- a/packages/app/src/components/DBInfraPanel.tsx
+++ b/packages/app/src/components/DBInfraPanel.tsx
@@ -72,10 +72,8 @@ const InfraSubpanelGroup = ({
     <div data-testid={`infra-subpanel-${fieldPrefix}`}>
       <Group justify="space-between" align="center">
         <Group align="center">
-          <h4 className="text-slate-300 fs-6 m-0">{title}</h4>
+          <h4 className="fs-6 m-0">{title}</h4>
           <SegmentedControl
-            bg="dark.7"
-            color="dark.5"
             size="xs"
             data={[
               { label: '30m', value: '30m' },
@@ -88,8 +86,6 @@ const InfraSubpanelGroup = ({
         </Group>
         <Group align="center">
           <SegmentedControl
-            bg="dark.7"
-            color="dark.5"
             size="xs"
             data={[
               { label: 'SM', value: 'sm' },
diff --git a/packages/app/src/components/DBRowDataPanel.tsx b/packages/app/src/components/DBRowDataPanel.tsx
index d6535d72a..36e6258e7 100644
--- a/packages/app/src/components/DBRowDataPanel.tsx
+++ b/packages/app/src/components/DBRowDataPanel.tsx
@@ -192,7 +192,7 @@ export function RowDataPanel({
   const jsonColumns = getJSONColumnNames(data?.meta);
 
   return (
-    <div className="flex-grow-1 bg-body overflow-auto" data-testid={dataTestId}>
+    <div className="flex-grow-1 overflow-auto" data-testid={dataTestId}>
       <Box mx="md" my="sm">
         <DBRowJsonViewer data={firstRow} jsonColumns={jsonColumns} />
       </Box>
diff --git a/packages/app/src/components/DBRowJsonViewer.tsx b/packages/app/src/components/DBRowJsonViewer.tsx
index 585b747a0..1a051b424 100644
--- a/packages/app/src/components/DBRowJsonViewer.tsx
+++ b/packages/app/src/components/DBRowJsonViewer.tsx
@@ -76,7 +76,7 @@ function HyperJsonMenu() {
   return (
     <Group>
       <UnstyledButton
-        color="gray.0"
+        color="gray"
         onClick={() =>
           setJsonOptions({ ...jsonOptions, lineWrap: !jsonOptions.lineWrap })
         }
@@ -403,7 +403,7 @@ export function DBRowJsonViewer({
   const jsonOptions = useAtomValue(viewerOptionsAtom);
 
   return (
-    <div className="flex-grow-1 bg-body overflow-auto">
+    <div className="flex-grow-1 overflow-auto">
       <Box py="xs">
         <Group gap="xs">
           <Input
diff --git a/packages/app/src/components/DBRowOverviewPanel.tsx b/packages/app/src/components/DBRowOverviewPanel.tsx
index 34b90262c..4b57956ec 100644
--- a/packages/app/src/components/DBRowOverviewPanel.tsx
+++ b/packages/app/src/components/DBRowOverviewPanel.tsx
@@ -160,7 +160,7 @@ export function RowOverviewPanel({
       : undefined;
 
   return (
-    <div className="flex-grow-1 bg-body overflow-auto" data-testid={dataTestId}>
+    <div className="flex-grow-1 overflow-auto" data-testid={dataTestId}>
       {!hideHeader && (
         <Box px="32px" pt="md">
           <DBRowSidePanelHeader
@@ -187,7 +187,7 @@ export function RowOverviewPanel({
         {isHttpRequest && (
           <Accordion.Item value="network">
             <Accordion.Control>
-              <Text size="sm" c="gray.2" ps="md">
+              <Text size="sm" ps="md">
                 HTTP Request
               </Text>
             </Accordion.Control>
@@ -206,7 +206,7 @@ export function RowOverviewPanel({
         {hasException && (
           <Accordion.Item value="exception">
             <Accordion.Control>
-              <Text size="sm" c="gray.2" ps="md">
+              <Text size="sm" ps="md">
                 Exception
               </Text>
             </Accordion.Control>
@@ -227,7 +227,7 @@ export function RowOverviewPanel({
         {hasSpanEvents && (
           <Accordion.Item value="spanEvents">
             <Accordion.Control>
-              <Text size="sm" c="gray.2" ps="md">
+              <Text size="sm" ps="md">
                 Span Events
               </Text>
             </Accordion.Control>
@@ -242,7 +242,7 @@ export function RowOverviewPanel({
         {Object.keys(topLevelAttributes).length > 0 && (
           <Accordion.Item value="topLevelAttributes">
             <Accordion.Control>
-              <Text size="sm" c="gray.2" ps="md">
+              <Text size="sm" ps="md">
                 Top Level Attributes
               </Text>
             </Accordion.Control>
@@ -259,7 +259,7 @@ export function RowOverviewPanel({
 
         <Accordion.Item value="eventAttributes">
           <Accordion.Control>
-            <Text size="sm" c="gray.2" ps="md">
+            <Text size="sm" ps="md">
               {source.kind === 'log' ? 'Log' : 'Span'} Attributes
             </Text>
           </Accordion.Control>
@@ -275,7 +275,7 @@ export function RowOverviewPanel({
 
         <Accordion.Item value="resourceAttributes">
           <Accordion.Control>
-            <Text size="sm" c="gray.2" ps="md">
+            <Text size="sm" ps="md">
               Resource Attributes
             </Text>
           </Accordion.Control>
diff --git a/packages/app/src/components/DBRowSidePanel.tsx b/packages/app/src/components/DBRowSidePanel.tsx
index cb0f1d8b3..6270f7fd1 100644
--- a/packages/app/src/components/DBRowSidePanel.tsx
+++ b/packages/app/src/components/DBRowSidePanel.tsx
@@ -567,7 +567,7 @@ export default function DBRowSidePanelErrorBoundary({
                   An error occurred while rendering this event.
                 </div>
 
-                <div className="px-2 py-1 m-2 fs-7 font-monospace bg-dark-grey p-4">
+                <div className="px-2 py-1 m-2 fs-7 font-monospace bg-body p-4">
                   {error?.error?.message}
                 </div>
               </Stack>
diff --git a/packages/app/src/components/DBRowSidePanelHeader.tsx b/packages/app/src/components/DBRowSidePanelHeader.tsx
index 5975a6452..6b9c13102 100644
--- a/packages/app/src/components/DBRowSidePanelHeader.tsx
+++ b/packages/app/src/components/DBRowSidePanelHeader.tsx
@@ -89,7 +89,7 @@ function BreadcrumbNavigation({
             onClick={() => handleBreadcrumbItemClick(index)}
             style={{ textDecoration: 'none' }}
           >
-            <Text size="sm" c="blue.4" style={{ cursor: 'pointer' }}>
+            <Text size="sm" c="blue" style={{ cursor: 'pointer' }}>
               {index === 0 ? 'Original Event' : crumb.label}
             </Text>
           </UnstyledButton>
@@ -99,7 +99,7 @@ function BreadcrumbNavigation({
 
     // Add current level
     items.push(
-      <Text key="current" size="sm" c="gray.2">
+      <Text key="current" size="sm">
         Selected Event
       </Text>,
     );
@@ -198,12 +198,12 @@ export default function DBRowSidePanelHeader({
       <Flex>
         {severityText && <LogLevel level={severityText} />}
         {severityText && isValidDate(date) && (
-          <Text size="xs" mx="xs" c="gray.4">
+          <Text size="xs" mx="xs">
             &middot;
           </Text>
         )}
         {isValidDate(date) && (
-          <Text c="gray.4" size="xs">
+          <Text size="xs">
             <FormatTime value={date} /> &middot;{' '}
             {formatDistanceToNowStrictShort(date)} ago
           </Text>
@@ -211,7 +211,6 @@ export default function DBRowSidePanelHeader({
       </Flex>
       {mainContent ? (
         <Paper
-          bg="dark.7"
           p="xs"
           mt="sm"
           style={{
@@ -222,15 +221,12 @@ export default function DBRowSidePanelHeader({
           ref={headerRef}
         >
           <Flex justify="space-between" mb="xs">
-            <Text size="xs" c="gray.4">
-              {mainContentHeader}
-            </Text>
+            <Text size="xs">{mainContentHeader}</Text>
             {/* Toggles expanded sidebar header*/}
             {headerHeight >= maxBoxHeight && (
               <Button
                 size="compact-xs"
                 variant="subtle"
-                color="gray.3"
                 onClick={() =>
                   setUserPreference({
                     ...userPreferences,
@@ -262,8 +258,8 @@ export default function DBRowSidePanelHeader({
           )}
         </Paper>
       ) : (
-        <Paper bg="dark.7" p="xs" mt="sm">
-          <Text size="xs" c="gray.4" mb="xs">
+        <Paper p="xs" mt="sm">
+          <Text size="xs" mb="xs">
             [Empty]
           </Text>
         </Paper>
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index 3d2fae54c..ee96ebca0 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -720,7 +720,7 @@ export const RawLogTable = memo(
     return (
       <div
         data-testid="search-results-table"
-        className="overflow-auto h-100 fs-8 bg-inherit"
+        className="overflow-auto h-100 fs-8"
         onScroll={e => {
           fetchMoreOnBottomReached(e.target as HTMLDivElement);
 
@@ -740,7 +740,7 @@ export const RawLogTable = memo(
             config={config}
           />
         )}
-        <table className={cx('w-100 bg-inherit', styles.table)} id={tableId}>
+        <table className={cx('w-100', styles.table)} id={tableId}>
           <thead className={styles.tableHead}>
             {table.getHeaderGroups().map(headerGroup => (
               <tr key={headerGroup.id}>
@@ -946,7 +946,7 @@ export const RawLogTable = memo(
             })}
             <tr>
               <td colSpan={800}>
-                <div className="rounded fs-7 bg-grey text-center d-flex align-items-center justify-content-center mt-3">
+                <div className="rounded fs-7 bg-muted text-center d-flex align-items-center justify-content-center mt-3">
                   {isLoading ? (
                     <div className="my-3">
                       <div className="spin-animate d-inline-block">
@@ -1020,12 +1020,12 @@ export const RawLogTable = memo(
                     dedupedRows.length === 0 ? (
                     <div className="my-3" data-testid="db-row-table-no-results">
                       No results found.
-                      <Text mt="sm" c="gray.3">
+                      <Text mt="sm">
                         Try checking the query explainer in the search bar if
                         there are any search syntax issues.
                       </Text>
                       {dateRange?.[0] != null && dateRange?.[1] != null ? (
-                        <Text mt="sm" c="gray.3">
+                        <Text mt="sm">
                           Searched Time Range:{' '}
                           {formatDistance(dateRange?.[1], dateRange?.[0])} {'('}
                           <FormatTime
@@ -1389,14 +1389,12 @@ function DBSqlRowTableComponent({
           </Text>
           <Box mah={100} style={{ overflow: 'auto' }}>
             {noisyPatterns.data?.map(p => (
-              <Text c="gray.3" fz="xs" key={p.id}>
+              <Text fz="xs" key={p.id}>
                 {p.pattern}
               </Text>
             ))}
             {noisyPatternIds.length === 0 && (
-              <Text c="gray.3" fz="xs">
-                No noisy patterns found
-              </Text>
+              <Text fz="xs">No noisy patterns found</Text>
             )}
           </Box>
         </Box>
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 1e0eb21be..146d88f1e 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -104,7 +104,7 @@ export const TextButton = ({
       className={classes.textButton}
       data-testid={dataTestId}
     >
-      <Text size="xxs" c="gray.6" lh={1} ms={ms}>
+      <Text size="xxs" lh={1} ms={ms}>
         {label}
       </Text>
     </UnstyledButton>
@@ -125,7 +125,7 @@ const FilterPercentage = ({ percentage, isLoading }: FilterPercentageProps) => {
         : `~${Math.round(percentage)}%`;
 
   return (
-    <Text size="xs" c="gray.3" className={isLoading ? 'effect-pulse' : ''}>
+    <Text size="xs" className={isLoading ? 'effect-pulse' : ''}>
       {formattedPercentage}
     </Text>
   );
@@ -154,7 +154,6 @@ export const FilterCheckbox = ({
         onClick={() => onChange?.(!value)}
         style={{ minWidth: 0 }}
         wrap="nowrap"
-        align="flex-start"
       >
         <Checkbox
           checked={!!value}
@@ -184,7 +183,11 @@ export const FilterCheckbox = ({
           >
             <Text
               size="xs"
-              c={value === 'excluded' ? 'red.4' : 'gray.3'}
+              c={
+                value === 'excluded'
+                  ? 'var(--color-text-danger)'
+                  : 'var(--color-text)'
+              }
               truncate="end"
               flex={1}
               title={label}
@@ -222,7 +225,7 @@ export const FilterCheckbox = ({
         />
       </div>
       {pinned && (
-        <Text size="xxs" c="gray.6">
+        <Text size="xxs">
           <i className="bi bi-pin-angle-fill"></i>
         </Text>
       )}
@@ -457,6 +460,7 @@ export const FilterGroup = ({
               component={UnstyledButton}
               flex="1"
               p="0"
+              pr="xxxs"
               data-testid="filter-group-control"
               classNames={{
                 chevron: 'm-0',
@@ -488,15 +492,8 @@ export const FilterGroup = ({
                     }
                   }}
                   styles={{ input: { transition: 'padding 0.2s' } }}
-                  rightSectionWidth={isExpanded ? 20 : 2}
-                  rightSection={
-                    <IconSearch
-                      size={15}
-                      stroke={2}
-                      className={`${isExpanded ? 'opacity-100' : 'opacity-0'}`}
-                      style={{ transition: 'opacity 0.4s 0.2s' }}
-                    />
-                  }
+                  rightSectionWidth={20}
+                  rightSection={<IconSearch size={12} stroke={2} />}
                   classNames={{
                     input: 'ps-0.5',
                   }}
@@ -581,7 +578,7 @@ export const FilterGroup = ({
               ))}
               {optionsLoading ? (
                 <Group m={6} gap="xs">
-                  <Loader size={12} color="gray.6" />
+                  <Loader size={12} color="gray" />
                   <Text c="dimmed" size="xs">
                     Loading...
                   </Text>
@@ -624,7 +621,7 @@ export const FilterGroup = ({
                   <div className="d-flex m-1">
                     {loadMoreLoading ? (
                       <Group m={6} gap="xs">
-                        <Loader size={12} color="gray.6" />
+                        <Loader size={12} color="gray" />
                         <Text c="dimmed" size="xs">
                           Loading more...
                         </Text>
@@ -961,15 +958,15 @@ const DBSearchPageFiltersComponent = ({
             placement="right"
           >
             <Tabs.List w="100%">
-              <Tabs.Tab value="results" size="xs" c="gray.4" h="24px">
+              <Tabs.Tab value="results" size="xs" h="24px">
                 <Text size="xs">Results Table</Text>
               </Tabs.Tab>
               {showDelta && (
-                <Tabs.Tab value="delta" size="xs" c="gray.4" h="24px">
+                <Tabs.Tab value="delta" size="xs" h="24px">
                   <Text size="xs">Event Deltas</Text>
                 </Tabs.Tab>
               )}
-              <Tabs.Tab value="pattern" size="xs" c="gray.4" h="24px">
+              <Tabs.Tab value="pattern" size="xs" h="24px">
                 <Text size="xs">Event Patterns</Text>
               </Tabs.Tab>
             </Tabs.List>
@@ -1014,7 +1011,7 @@ const DBSearchPageFiltersComponent = ({
                   withArrow
                   label="Denoise results will visually remove events matching common event patterns from the results table."
                 >
-                  <Text size="xs" c="gray.3" mt="-1px">
+                  <Text size="xs" mt="-1px">
                     <i className="bi bi-noise-reduction"></i> Denoise Results
                   </Text>
                 </Tooltip>
@@ -1052,9 +1049,7 @@ const DBSearchPageFiltersComponent = ({
             </Flex>
           ) : (
             shownFacets.length === 0 && (
-              <Text size="xxs" c="gray.6">
-                No filters available
-              </Text>
+              <Text size="xxs">No filters available</Text>
             )
           )}
           {/* Show facets even when loading to ensure pinned filters are visible while loading */}
@@ -1118,10 +1113,10 @@ const DBSearchPageFiltersComponent = ({
 
           {showMoreFields && (
             <div>
-              <Text size="xs" c="gray.6" fw="bold">
+              <Text size="xs" fw="bold">
                 Not seeing a filter?
               </Text>
-              <Text size="xxs" c="gray.6">
+              <Text size="xxs">
                 {`Try searching instead (e.g. column:foo)`}
               </Text>
             </div>
diff --git a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
index 89d8f632f..564268422 100644
--- a/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
+++ b/packages/app/src/components/DBSqlRowTableWithSidebar.tsx
@@ -138,7 +138,7 @@ function RowOverviewPanelWrapper({
 
   return (
     <div className="position-relative">
-      <div className="bg-body px-3 pt-2 position-relative">
+      <div className="px-3 pt-2 position-relative">
         <TabBar
           className="fs-8"
           items={[
@@ -155,7 +155,7 @@ function RowOverviewPanelWrapper({
           onClick={setActiveTab}
         />
       </div>
-      <div className="bg-body">
+      <div>
         {activeTab === InlineTab.Overview && (
           <div className="inline-overview-panel">
             <RowOverviewPanel source={source} rowId={rowId} />
diff --git a/packages/app/src/components/DBTable/TableHeader.tsx b/packages/app/src/components/DBTable/TableHeader.tsx
index e25338df9..11199c1e5 100644
--- a/packages/app/src/components/DBTable/TableHeader.tsx
+++ b/packages/app/src/components/DBTable/TableHeader.tsx
@@ -9,6 +9,8 @@ import { flexRender, Header } from '@tanstack/react-table';
 
 import { UNDEFINED_WIDTH } from '@/tableUtils';
 
+import styles from '../Table.module.scss';
+
 export default function TableHeader({
   isLast,
   header,
@@ -20,7 +22,7 @@ export default function TableHeader({
 }) {
   return (
     <th
-      className="overflow-hidden bg-hdx-dark"
+      className="overflow-hidden"
       key={header.id}
       colSpan={header.colSpan}
       style={{
@@ -47,7 +49,7 @@ export default function TableHeader({
           >
             <>
               {header.isPlaceholder ? null : (
-                <Text truncate="end" size="xs" flex="1" c="white">
+                <Text truncate="end" size="xs" flex="1">
                   {flexRender(
                     header.column.columnDef.header,
                     header.getContext(),
@@ -83,7 +85,7 @@ export default function TableHeader({
               onMouseDown={header.getResizeHandler()}
               onTouchStart={header.getResizeHandler()}
               className={cx(
-                `resizer text-gray-600 cursor-col-resize`,
+                `resizer ${styles.cursorColResize}`,
                 header.column.getIsResizing() && 'isResizing',
               )}
             >
diff --git a/packages/app/src/components/DBTimeChart.tsx b/packages/app/src/components/DBTimeChart.tsx
index b29a141bf..8b09f2c86 100644
--- a/packages/app/src/components/DBTimeChart.tsx
+++ b/packages/app/src/components/DBTimeChart.tsx
@@ -264,7 +264,7 @@ function DBTimeChartComponent({
         // only View Events for single series
         (!Array.isArray(config.select) || config.select.length === 1) ? (
           <div
-            className="bg-grey px-3 py-2 rounded fs-8"
+            className="bg-muted px-3 py-2 rounded fs-8"
             style={{
               zIndex: 5,
               position: 'absolute',
@@ -290,7 +290,7 @@ function DBTimeChartComponent({
         ) : null}
         {/* {totalGroups > groupKeys.length ? (
                 <div
-                  className="bg-grey px-3 py-2 rounded fs-8"
+                  className="bg-muted px-3 py-2 rounded fs-8"
                   style={{
                     zIndex: 5,
                     position: 'absolute',
@@ -310,7 +310,7 @@ function DBTimeChartComponent({
                 ) : null*/}
         {showDisplaySwitcher && (
           <div
-            className="bg-grey px-3 py-2 rounded fs-8"
+            className="bg-muted px-3 py-2 rounded fs-8"
             style={{
               zIndex: 5,
               position: 'absolute',
diff --git a/packages/app/src/components/DBTracePanel.tsx b/packages/app/src/components/DBTracePanel.tsx
index 4ff92c0cc..cf66819f4 100644
--- a/packages/app/src/components/DBTracePanel.tsx
+++ b/packages/app/src/components/DBTracePanel.tsx
@@ -127,14 +127,13 @@ export default function DBTracePanel({
     <div data-testid={dataTestId}>
       <Flex align="center" justify="space-between" mb="sm">
         <Flex align="center">
-          <Text c="dark.2" size="xs" me="xs">
+          <Text size="xs" me="xs">
             {parentSourceData?.traceIdExpression}:{' '}
             {traceId || 'No trace id found for event'}
           </Text>
           {traceId != null && (
             <Button
               variant="subtle"
-              color="gray.4"
               size="xs"
               onClick={() => setShowTraceIdInput(v => !v)}
             >
@@ -143,7 +142,7 @@ export default function DBTracePanel({
           )}
         </Flex>
         <Group gap="sm">
-          <Text size="sm" c="gray.4">
+          <Text size="sm">
             {parentSourceData?.kind === SourceKind.Log
               ? 'Trace Source'
               : 'Correlated Log Source'}
@@ -153,9 +152,7 @@ export default function DBTracePanel({
       </Flex>
       {(showTraceIdInput || !traceId) && parentSourceId != null && (
         <Stack gap="xs">
-          <Text c="gray.4" size="xs">
-            Trace ID Expression
-          </Text>
+          <Text size="xs">Trace ID Expression</Text>
           <Flex>
             <SQLInlineEditorControlled
               tableConnection={tcFromSource(parentSourceData)}
@@ -185,7 +182,6 @@ export default function DBTracePanel({
             <Button
               ms="sm"
               variant="outline"
-              color="gray.4"
               onClick={() => setShowTraceIdInput(false)}
               size="xs"
             >
@@ -209,7 +205,7 @@ export default function DBTracePanel({
       )}
       {traceSourceData != null && eventRowWhere != null && (
         <>
-          <Text size="sm" c="dark.2" my="sm">
+          <Text size="sm" my="sm">
             Event Details
           </Text>
           <TabBar
@@ -252,9 +248,7 @@ export default function DBTracePanel({
       {traceSourceData != null && !eventRowWhere && (
         <Paper shadow="xs" p="xl" mt="md">
           <Center mih={100}>
-            <Text size="sm" c="gray.4">
-              Please select a span above to view details.
-            </Text>
+            <Text size="sm">Please select a span above to view details.</Text>
           </Center>
         </Paper>
       )}
diff --git a/packages/app/src/components/DBTraceWaterfallChart.tsx b/packages/app/src/components/DBTraceWaterfallChart.tsx
index 0633a1803..ebae6f6e7 100644
--- a/packages/app/src/components/DBTraceWaterfallChart.tsx
+++ b/packages/app/src/components/DBTraceWaterfallChart.tsx
@@ -480,7 +480,7 @@ export function DBTraceWaterfallChartContainer({
               <div
                 key={index}
                 style={{
-                  borderLeft: '1px solid var(--mantine-color-dark-4)',
+                  borderLeft: '1px solid var(--color-border)',
                   marginLeft: 5,
                   width: 8,
                   minWidth: 8,
@@ -490,7 +490,6 @@ export function DBTraceWaterfallChartContainer({
               ></div>
             ))}
             <Text
-              c="dark.2"
               span
               me="xxs"
               style={{
@@ -506,7 +505,7 @@ export function DBTraceWaterfallChartContainer({
                 }`}
               />{' '}
             </Text>
-            <Text span size="xxs" c="dark.2" me="xs" pt="2px">
+            <Text span size="xxs" me="xs" pt="2px">
               {result.children.length > 0 ? `(${result.children.length})` : ''}
             </Text>
             <Text
@@ -535,8 +534,8 @@ export function DBTraceWaterfallChartContainer({
       style: {
         // paddingTop: 1,
         marginTop: i === 0 ? 32 : 0,
-        backgroundColor: isHighlighted ? '#202127' : undefined,
       },
+      isActive: isHighlighted,
       events: [
         {
           id,
diff --git a/packages/app/src/components/EventTag.tsx b/packages/app/src/components/EventTag.tsx
index 60a5bf73e..5c3789f77 100644
--- a/packages/app/src/components/EventTag.tsx
+++ b/packages/app/src/components/EventTag.tsx
@@ -29,7 +29,7 @@ export default function EventTag({
 
   if (!hasActions) {
     return (
-      <div key={name} className="bg-hdx-dark px-2 py-0.5 me-1 my-1">
+      <div key={name} className="bg-highlighted px-2 py-0.5 me-1 my-1">
         {displayedKey || name}: {value}
       </div>
     );
@@ -46,7 +46,7 @@ export default function EventTag({
       <Popover.Target>
         <div
           key={name}
-          className="text-muted-hover bg-hdx-dark px-2 py-0.5 me-1 my-1 cursor-pointer"
+          className="bg-highlighted px-2 py-0.5 me-1 my-1 cursor-pointer"
           onClick={() => setOpened(!opened)}
         >
           {displayedKey || name}: {value}
diff --git a/packages/app/src/components/ExceptionSubpanel.tsx b/packages/app/src/components/ExceptionSubpanel.tsx
index 72ac4f385..8d78b0343 100644
--- a/packages/app/src/components/ExceptionSubpanel.tsx
+++ b/packages/app/src/components/ExceptionSubpanel.tsx
@@ -62,17 +62,17 @@ export const StacktraceFrame = ({
   return (
     <Group gap="xs" display="inline-flex">
       <div
-        className="text-slate-200 fs-8"
+        className=" fs-8"
         style={{
           opacity: isLoading ? 0.8 : 1,
           filter: isLoading ? 'blur(1px)' : 'none',
         }}
       >
         {filename}
-        <span className="text-slate-400">
+        <span>
           :{lineno}:{colno}
         </span>
-        <span className="text-slate-400">{' in '}</span>
+        <span>{' in '}</span>
         {functionName && (
           <span
             style={{
@@ -127,7 +127,7 @@ export const CollapsibleSection = ({
         onClick={() => setCollapsed(!collapsed)}
       >
         <i className={`bi bi-chevron-${collapsed ? 'right' : 'down'} me-2`}></i>
-        <div className="fs-7 text-slate-200">{title}</div>
+        <div className="fs-7">{title}</div>
       </div>
       {collapsed ? null : <div className="mb-4">{children}</div>}
     </div>
@@ -161,7 +161,7 @@ export const StacktraceValue = ({
         borderRight: '1px solid #ffffff20',
       }}
     >
-      <div className="text-slate-400">{label}</div>
+      <div>{label}</div>
       <div className="fs-7">{value}</div>
     </div>
   );
@@ -226,10 +226,7 @@ export const StacktraceRow = ({
               withArrow
               color="gray"
             >
-              <i
-                className="bi bi-box-seam text-slate-400 me-2"
-                title="in_app: false"
-              />
+              <i className="bi bi-box-seam me-2" title="in_app: false" />
             </Tooltip>
           )}
           {augmentedFrame && (
@@ -295,11 +292,7 @@ export const stacktraceColumns: ColumnDef<TStacktraceFrame>[] = [
  * Breadcrumbs
  */
 
-const Url = ({ url }: { url?: string }) => (
-  <span className="text-slate-300" title={url}>
-    {url}
-  </span>
-);
+const Url = ({ url }: { url?: string }) => <span title={url}>{url}</span>;
 
 const StatusChip = React.memo(({ status }: { status?: number }) => {
   if (!status) {
@@ -328,7 +321,7 @@ const LevelChip = React.memo(({ level }: { level?: string }) => {
     ? 'text-danger bg-danger'
     : level.includes('warn') || level.includes('warning')
       ? 'text-warning bg-warning'
-      : 'text-slate-300 bg-grey';
+      : 'bg-muted';
 
   return (
     <span
@@ -345,7 +338,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
     header: 'Category',
     size: 180,
     cell: ({ row }) => (
-      <span className="text-slate-300 d-flex align-items-center gap-2">
+      <span className="d-flex align-items-center gap-2">
         {row.original.category}
         {row.original.category === 'console' && (
           <LevelChip level={row.original.level} />
@@ -371,7 +364,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         return (
           <div className="text-truncate">
             <span>{method} </span>
-            <span className="text-slate-300" title={url}>
+            <span title={url}>
               <Url url={url} />
             </span>
           </div>
@@ -383,11 +376,11 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         const { from, to } = row.original.data;
         return (
           <div className="text-truncate">
-            <span className="text-slate-300" title={from}>
+            <span title={from}>
               <Url url={from} />
             </span>
             <span>{' → '}</span>
-            <span className="text-slate-300" title={to}>
+            <span title={to}>
               <Url url={to} />
             </span>
           </div>
@@ -398,10 +391,7 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
       if (row.original.category === 'console') {
         const { message } = row.original;
         return (
-          <pre
-            className="text-slate-300 mb-0 text-truncate fs-8"
-            title={message}
-          >
+          <pre className="mb-0 text-truncate fs-8" title={message}>
             {message}
           </pre>
         );
@@ -411,14 +401,14 @@ export const breadcrumbColumns: ColumnDef<StacktraceBreadcrumb>[] = [
         return <div className="text-truncate">{row.original.message}</div>;
       }
 
-      return <span className="text-slate-500">Empty</span>;
+      return <span className="text-muted">Empty</span>;
     },
   },
   {
     header: 'Timestamp',
     size: 220,
     cell: ({ row }) => (
-      <span className="text-slate-500">
+      <span className="text-muted">
         <FormatTime value={row.original.timestamp * 1000} format="withMs" />
       </span>
     ),
@@ -540,7 +530,7 @@ export const ExceptionSubpanel = ({
           firstException && (
             <>
               <div>
-                <Text fw="bold" component="span" size="sm" c="red.6">
+                <Text fw="bold" component="span" size="sm" variant="danger">
                   {firstException.type}:{' '}
                 </Text>
                 <span className="text-muted">{firstException.value}</span>
@@ -621,8 +611,7 @@ export const ExceptionSubpanel = ({
 
         {stacktraceHiddenRowsCount ? (
           <Button
-            variant="outline"
-            color="gray.6"
+            variant="default"
             size="xs"
             m="xs"
             onClick={handleStacktraceToggleMoreRows}
@@ -651,8 +640,7 @@ export const ExceptionSubpanel = ({
             />
             {breadcrumbHiddenRowsCount ? (
               <Button
-                variant="outline"
-                color="gray.6"
+                variant="default"
                 size="xs"
                 m="xs"
                 onClick={handleBreadcrumbToggleMoreRows}
diff --git a/packages/app/src/components/ExpandableRowTable.tsx b/packages/app/src/components/ExpandableRowTable.tsx
index 4f0468653..a2ac254b2 100644
--- a/packages/app/src/components/ExpandableRowTable.tsx
+++ b/packages/app/src/components/ExpandableRowTable.tsx
@@ -51,7 +51,7 @@ export const ExpandedLogRow = memo(
         <td colSpan={columnsLength} className="p-0 border-0">
           <div className={cx('mx-2 mb-2 rounded', styles.expandedRowContent)}>
             <div className="position-relative">
-              <div className="bg-body px-3 pt-2 position-relative">
+              <div className="px-3 pt-2 position-relative">
                 {openSidebar && (
                   <button
                     type="button"
diff --git a/packages/app/src/components/HyperJson.module.scss b/packages/app/src/components/HyperJson.module.scss
index 799158044..09156b588 100644
--- a/packages/app/src/components/HyperJson.module.scss
+++ b/packages/app/src/components/HyperJson.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable */
 .container {
   display: flex;
   height: 100%;
@@ -29,15 +30,13 @@
   display: flex;
   gap: 10px;
   padding: 2px 8px;
-
-  // margin: 0 -10px;margin
   align-items: flex-start;
   border-radius: 3px;
   position: relative;
   overflow: hidden;
 
   &:hover {
-    background-color: #26282b;
+    background-color: var(--color-bg-muted);
 
     .lineMenu {
       display: flex;
@@ -47,7 +46,7 @@
   &.expanded {
     .object,
     .array {
-      color: #999;
+      color: var(--color-text-muted);
     }
   }
 
@@ -64,7 +63,7 @@
     }
 
     &:active {
-      background-color: #1e1f21;
+      background-color: var(--color-bg-highlighted);
     }
   }
 }
@@ -77,34 +76,30 @@
   top: 0;
   height: calc(100% + 1px);
   max-height: 24px;
-  border-bottom: 1px solid #34373e;
+  border-bottom: 1px solid var(color-border);
 }
 
 .lineMenuBtn {
   border: 0;
   background-color: rgb(0 0 0 / 20%);
   backdrop-filter: blur(4px);
-  color: #b8b7c9;
-  border-left: 1px solid #444;
+  color: var(--color-text);
+  border-left: 1px solid var(--color-border);
   padding: 0 8px;
   height: 100%;
 
   &:hover {
-    background-color: #34373e;
+    background-color: var(--color-bg-highlighted);
   }
 
   &:active {
-    background-color: #1e1f21;
+    background-color: var(--color-bg-muted);
   }
 }
 
-.nestedLine {
-  // margin-bottom: 8px;margin-bottom
-}
-
 .clickable {
   &:active {
-    background-color: #1e1f21;
+    background-color: var(--color-bg-highlighted);
   }
 }
 
@@ -119,7 +114,7 @@
 
   &:hover,
   &:focus {
-    background-color: #26282b;
+    background-color: var(--color-bg-muted);
 
     .hoverContent {
       display: flex;
@@ -129,7 +124,7 @@
   .hoverContent {
     position: absolute;
     left: 100%;
-    background-color: #26282b;
+    background-color: var(--color-bg-muted);
     padding-right: 8px;
     padding-left: 4px;
   }
@@ -141,26 +136,25 @@
 
 .jsonBtn {
   display: block;
-  color: #b8b7c9;
+  color: var(--color-text-secondary);
   cursor: pointer;
-  background-color: #26282b;
+  background-color: var(--color-bg-muted);
   font-size: 11px;
-  border: 1px solid #444;
+  border: 1px solid var(--color-border);
   border-radius: 3px;
   padding: 0 6px;
   margin-bottom: 2px;
 
   &:hover {
-    background-color: #444;
+    background-color: var(--color-border);
   }
 
   &:active {
-    background-color: #1e1f21;
+    background-color: var(--color-bg-highlighted);
   }
 }
 
 .keyContainer {
-  // min-width: 160px;min-width
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -169,7 +163,7 @@
 .key {
   align-items: center;
   width: auto;
-  color: #8378ff;
+  color: var(--color-json-key);
   cursor: pointer;
   display: flex;
   gap: 6px;
@@ -178,7 +172,7 @@
   // @extend .clickable;
 
   i {
-    color: #555;
+    color: var(--color-json-punctuation);
     margin-right: -4px;
   }
 }
@@ -203,37 +197,36 @@
 }
 
 .string {
-  color: #a6e22e;
+  color: var(--color-json-string);
   word-break: break-all;
 
-  // margin-left: -6px;margin-left
   &::before,
   &::after {
     content: '"';
-    color: #888;
+    color: var(--color-json-punctuation);
   }
 }
 
 .number {
-  color: #f90;
+  color: var(--color-json-number);
 }
 
 .boolean {
-  color: #f90;
+  color: var(--color-json-boolean);
 }
 
 .object {
-  color: #a6e22e;
+  color: var(--color-json-object);
   font-size: 11px;
 }
 
 .array {
-  color: #a6e22e;
+  color: var(--color-json-array);
   font-size: 11px;
 }
 
 .expandMoreProps {
-  color: #f90;
+  color: var(--color-json-number);
   font-weight: 500;
 
   i {
diff --git a/packages/app/src/components/HyperJson.tsx b/packages/app/src/components/HyperJson.tsx
index 91de551bb..a691afeff 100644
--- a/packages/app/src/components/HyperJson.tsx
+++ b/packages/app/src/components/HyperJson.tsx
@@ -408,11 +408,7 @@ const HyperJson = ({
             [styles.withLineWrap]: lineWrap,
           })}
         >
-          {isEmpty ? (
-            <div className="text-slate-400">Empty</div>
-          ) : (
-            <TreeNode data={data} />
-          )}
+          {isEmpty ? <div>Empty</div> : <TreeNode data={data} />}
         </div>
       </HydrateAtoms>
     </Provider>
diff --git a/packages/app/src/components/InputLanguageSwitch.tsx b/packages/app/src/components/InputLanguageSwitch.tsx
index 06f556df6..b79ced8a9 100644
--- a/packages/app/src/components/InputLanguageSwitch.tsx
+++ b/packages/app/src/components/InputLanguageSwitch.tsx
@@ -12,25 +12,32 @@ export default function InputLanguageSwitch({
   return (
     <Flex wrap="nowrap" gap="xxxs" px="sm">
       {showHotkey && (
-        <Text c="gray.3" size="xxs" bg="gray.8" px={4} py={0} mr={4} lh={1.4}>
+        <Text
+          size="xxs"
+          bg="var(--color-bg-neutral)"
+          c="white"
+          px={4}
+          py={0}
+          mr={4}
+          lh={1.4}
+        >
           /
         </Text>
       )}
       <Text
-        c={language === 'sql' ? 'green' : 'dark.0'}
+        c={language === 'sql' ? 'var(--color-text-success)' : 'gray'}
         onClick={() => onLanguageChange('sql')}
         size="xs"
         role="button"
       >
         SQL
       </Text>
-      <Text c="dark.2" size="xs">
-        |
-      </Text>
+      <Text size="xs">|</Text>
       <Text
         size="xs"
         role="button"
-        c={language === 'lucene' ? 'green' : 'dark.0'}
+        fw={500}
+        c={language === 'lucene' ? 'var(--color-text-success)' : 'gray'}
         onClick={() => onLanguageChange('lucene')}
       >
         Lucene
diff --git a/packages/app/src/components/KubeComponents.tsx b/packages/app/src/components/KubeComponents.tsx
index d8edf4184..8e348b807 100644
--- a/packages/app/src/components/KubeComponents.tsx
+++ b/packages/app/src/components/KubeComponents.tsx
@@ -131,7 +131,7 @@ const renderKubeEvent = (source: TSource) => (event: KubeEvent) => {
   return (
     <Timeline.Item key={event.id}>
       <Link href={href} passHref legacyBehavior>
-        <Anchor size="xs" fz={11} c="gray.6" title={event.timestamp}>
+        <Anchor size="xs" fz={11} title={event.timestamp}>
           <FormatTime value={event.timestamp} />
         </Anchor>
       </Link>
@@ -285,7 +285,7 @@ export const KubeTimeline = ({
       <Timeline bulletSize={12} lineWidth={1}>
         {podEventsAfterAnchor.map(renderKubeEvent(logSource))}
         <Timeline.Item key={anchorEvent.timestamp} ref={anchorRef}>
-          <Text size="xs" fz={11} c="gray.6" title={anchorEvent.timestamp}>
+          <Text size="xs" fz={11} title={anchorEvent.timestamp}>
             <FormatTime value={anchorEvent.timestamp} />
           </Text>
           <Group gap="xs" my={4}>
diff --git a/packages/app/src/components/LogLevel.tsx b/packages/app/src/components/LogLevel.tsx
index c3d148416..9cb1af3eb 100644
--- a/packages/app/src/components/LogLevel.tsx
+++ b/packages/app/src/components/LogLevel.tsx
@@ -17,7 +17,7 @@ export default function LogLevel({
           ? 'red'
           : levelClass === 'warn'
             ? 'yellow'
-            : 'gray.4'
+            : 'gray'
       }
       {...props}
     >
diff --git a/packages/app/src/components/NetworkPropertyPanel.tsx b/packages/app/src/components/NetworkPropertyPanel.tsx
index fc20a96b6..4d41a1bb9 100644
--- a/packages/app/src/components/NetworkPropertyPanel.tsx
+++ b/packages/app/src/components/NetworkPropertyPanel.tsx
@@ -179,9 +179,9 @@ export const NetworkBody = ({
           )}
         </pre>
       ) : body === '' ? (
-        <div className="text-slate-400 px-4 py-3">{emptyMessage}</div>
+        <div className="px-4 py-3">{emptyMessage}</div>
       ) : (
-        <div className="text-slate-400 px-4 py-3">{notCollectedMessage}</div>
+        <div className="px-4 py-3">{notCollectedMessage}</div>
       )}
     </>
   );
@@ -232,7 +232,7 @@ export function NetworkPropertySubpanel({
             });
           }}
         >
-          <Button size="xs" color="gray.4" variant="light">
+          <Button size="xs" variant="light">
             <i className="bi bi-terminal-plus me-2" />
             Copy Request as Curl
           </Button>
diff --git a/packages/app/src/components/NumberFormat.tsx b/packages/app/src/components/NumberFormat.tsx
index 32da916b2..8a9e41987 100644
--- a/packages/app/src/components/NumberFormat.tsx
+++ b/packages/app/src/components/NumberFormat.tsx
@@ -115,9 +115,8 @@ export const NumberFormatForm: React.VFC<{
         </div>
 
         <div style={{ marginTop: -6 }}>
-          <Paper p="xs" py={4} bg="dark.8">
+          <Paper p="xs" py={4}>
             <div
-              className="text-slate-400"
               style={{
                 fontSize: 11,
               }}
@@ -130,9 +129,7 @@ export const NumberFormatForm: React.VFC<{
 
         {values.output !== 'time' && (
           <div>
-            <div className="text-slate-300 fs-8 mt-2 fw-bold mb-1">
-              Decimals
-            </div>
+            <div className="fs-8 mt-2 fw-bold mb-1">Decimals</div>
             <Slider
               mb="xl"
               min={0}
diff --git a/packages/app/src/components/OnboardingModal.tsx b/packages/app/src/components/OnboardingModal.tsx
index fffb33bf5..3f4f1f33a 100644
--- a/packages/app/src/components/OnboardingModal.tsx
+++ b/packages/app/src/components/OnboardingModal.tsx
@@ -366,7 +366,7 @@ export default function OnboardingModal({
             />
           )}
           {!IS_LOCAL_MODE && (
-            <Text size="xs" mt="md" c="gray.4">
+            <Text size="xs" mt="md">
               You can always add and edit connections later.
             </Text>
           )}
@@ -375,7 +375,6 @@ export default function OnboardingModal({
             data-testid="demo-server-button"
             variant="outline"
             w="100%"
-            color="gray.4"
             onClick={handleDemoServerClick}
           >
             Connect to Demo Server
@@ -386,7 +385,6 @@ export default function OnboardingModal({
         <>
           <Button
             variant="subtle"
-            color="gray.4"
             onClick={() => setStep('connection')}
             p="xs"
             mb="md"
@@ -403,7 +401,7 @@ export default function OnboardingModal({
               setStep(undefined);
             }}
           />
-          <Text size="xs" mt="lg" c="gray.4">
+          <Text size="xs" mt="lg">
             You can always add and edit sources later.
           </Text>
         </>
diff --git a/packages/app/src/components/PageHeader.module.scss b/packages/app/src/components/PageHeader.module.scss
index 7a557e2bd..7bcaadbbc 100644
--- a/packages/app/src/components/PageHeader.module.scss
+++ b/packages/app/src/components/PageHeader.module.scss
@@ -1,10 +1,8 @@
-@import '../../styles/variables';
-
 .header {
   align-items: center;
-  background-color: $body-bg;
-  border-bottom: 1px solid $slate-950;
-  color: $slate-200;
+  background-color: var(--color-bg-body);
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-default);
   display: flex;
   font-weight: 500;
   height: 60px;
diff --git a/packages/app/src/components/SQLEditor.tsx b/packages/app/src/components/SQLEditor.tsx
index beb0434eb..7f3463e9c 100644
--- a/packages/app/src/components/SQLEditor.tsx
+++ b/packages/app/src/components/SQLEditor.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { acceptCompletion, startCompletion } from '@codemirror/autocomplete';
 import { sql, SQLDialect } from '@codemirror/lang-sql';
-import { Flex, Group, Paper, Text } from '@mantine/core';
+import { Flex, Group, Paper, Text, useMantineColorScheme } from '@mantine/core';
 import CodeMirror, {
   Compartment,
   EditorView,
@@ -34,6 +34,7 @@ export default function SQLEditor({
   placeholder,
   value,
 }: SQLInlineEditorProps) {
+  const { colorScheme } = useMantineColorScheme();
   const ref = useRef<ReactCodeMirrorRef>(null);
 
   const compartmentRef = useRef<Compartment>(new Compartment());
@@ -42,9 +43,8 @@ export default function SQLEditor({
     <Paper
       flex="auto"
       shadow="none"
-      bg="dark.6"
       style={{
-        border: '1px solid var(--mantine-color-gray-7)',
+        bg: 'var(--color-bg-field)',
         display: 'flex',
         alignItems: 'center',
       }}
@@ -56,7 +56,7 @@ export default function SQLEditor({
           ref={ref}
           value={value}
           onChange={onChange}
-          theme={'dark'}
+          theme={colorScheme === 'dark' ? 'dark' : 'light'}
           minHeight={'100px'}
           extensions={[
             styleTheme,
diff --git a/packages/app/src/components/SQLInlineEditor.tsx b/packages/app/src/components/SQLInlineEditor.tsx
index 686f53a96..90ae1251b 100644
--- a/packages/app/src/components/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLInlineEditor.tsx
@@ -13,7 +13,13 @@ import {
   Field,
   TableConnectionChoice,
 } from '@hyperdx/common-utils/dist/core/metadata';
-import { Flex, Paper, Text, Tooltip } from '@mantine/core';
+import {
+  Flex,
+  Paper,
+  Text,
+  Tooltip,
+  useMantineColorScheme,
+} from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import CodeMirror, {
   Compartment,
@@ -136,6 +142,46 @@ const createStyleTheme = (allowMultiline: boolean = false) =>
       whiteSpace: 'nowrap',
       wordWrap: 'break-word',
       maxWidth: '100%',
+      backgroundColor: 'var(--color-bg-field) !important',
+      border: '1px solid var(--color-border) !important',
+      borderRadius: '8px',
+      boxShadow:
+        '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      padding: '4px',
+    },
+    '& .cm-tooltip-autocomplete > ul': {
+      fontFamily: 'inherit',
+      maxHeight: '300px',
+    },
+    '& .cm-tooltip-autocomplete > ul > li': {
+      padding: '4px 8px',
+      borderRadius: '4px',
+      cursor: 'pointer',
+      color: 'var(--color-text)',
+    },
+    '& .cm-tooltip-autocomplete > ul > li[aria-selected]': {
+      backgroundColor: 'var(--color-bg-field-highlighted) !important',
+      color: 'var(--color-text-muted) !important',
+    },
+    '& .cm-tooltip-autocomplete .cm-completionLabel': {
+      color: 'var(--color-text)',
+    },
+    '& .cm-tooltip-autocomplete .cm-completionDetail': {
+      color: 'var(--color-text-muted)',
+      fontStyle: 'normal',
+      marginLeft: '8px',
+    },
+    '& .cm-tooltip-autocomplete .cm-completionInfo': {
+      backgroundColor: 'var(--color-bg-field)',
+      border: '1px solid var(--color-border)',
+      borderRadius: '4px',
+      padding: '8px',
+      color: 'var(--color-text)',
+    },
+    '& .cm-completionIcon': {
+      width: '16px',
+      marginRight: '6px',
+      opacity: 0.7,
     },
     '& .cm-scroller': {
       overflowX: 'hidden',
@@ -167,6 +213,7 @@ export default function SQLInlineEditor({
   parentRef,
   allowMultiline = false,
 }: SQLInlineEditorProps & TableConnectionChoice) {
+  const { colorScheme } = useMantineColorScheme();
   const _tableConnections = tableConnection
     ? [tableConnection]
     : tableConnections;
@@ -309,9 +356,9 @@ export default function SQLInlineEditor({
     <Paper
       flex="auto"
       shadow="none"
-      bg="dark.6"
       style={{
-        border: `1px solid ${error ? 'var(--mantine-color-red-7)' : 'var(--mantine-color-gray-7)'}`,
+        backgroundColor: 'var(--color-bg-field)',
+        border: `1px solid ${error ? 'var(--color-bg-danger)' : 'var(--color-border)'}`,
         display: 'flex',
         alignItems: 'center',
         minHeight: size === 'xs' ? 30 : 36,
@@ -320,7 +367,6 @@ export default function SQLInlineEditor({
     >
       {label != null && (
         <Text
-          c="gray.4"
           mx="4px"
           size="xs"
           fw="bold"
@@ -343,7 +389,7 @@ export default function SQLInlineEditor({
           ref={ref}
           value={value}
           onChange={onChange}
-          theme={'dark'}
+          theme={colorScheme === 'dark' ? 'dark' : 'light'}
           onFocus={() => {
             setIsFocused(true);
           }}
diff --git a/packages/app/src/components/Search/DBSearchHeatmapChart.tsx b/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
index 09d288594..c0806cc84 100644
--- a/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
+++ b/packages/app/src/components/Search/DBSearchHeatmapChart.tsx
@@ -124,7 +124,7 @@ export function DBSearchHeatmapChart({
       ) : (
         <Paper shadow="xs" p="xl" h="100%">
           <Center mih={100} h="100%">
-            <Text size="sm" c="gray.4">
+            <Text size="sm">
               Please highlight an outlier range in the heatmap to view the delta
               chart.
             </Text>
diff --git a/packages/app/src/components/SearchPageActionBar.tsx b/packages/app/src/components/SearchPageActionBar.tsx
index 95f2b0b78..ea62adb55 100644
--- a/packages/app/src/components/SearchPageActionBar.tsx
+++ b/packages/app/src/components/SearchPageActionBar.tsx
@@ -12,7 +12,7 @@ export default function SearchPageActionBar({
       <Menu.Target>
         <Button
           variant="outline"
-          color="dark.2"
+          color="gray"
           px="xs"
           size="xs"
           style={{ flexShrink: 0 }}
diff --git a/packages/app/src/components/SearchTotalCountChart.tsx b/packages/app/src/components/SearchTotalCountChart.tsx
index 52166cc22..2f706b68d 100644
--- a/packages/app/src/components/SearchTotalCountChart.tsx
+++ b/packages/app/src/components/SearchTotalCountChart.tsx
@@ -59,7 +59,7 @@ export default function SearchTotalCountChart({
   );
 
   return (
-    <Text size="xs" c="gray.4" mb={4}>
+    <Text size="xs" mb={4}>
       {isLoading ? (
         <span className="effect-pulse">&middot;&middot;&middot; Results</span>
       ) : totalCount !== null && !isError ? (
diff --git a/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx b/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx
index 21f424257..c17f1b31c 100644
--- a/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx
+++ b/packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx
@@ -95,9 +95,7 @@ export default function ServiceDashboardDbQuerySidePanel({
               <Grid.Col span={6}>
                 <ChartBox style={{ height: 350 }}>
                   <Group justify="space-between" align="center" mb="sm">
-                    <Text size="sm" c="gray.4">
-                      Total Query Time
-                    </Text>
+                    <Text size="sm">Total Query Time</Text>
                   </Group>
                   {source && (
                     <DBTimeChart
@@ -125,9 +123,7 @@ export default function ServiceDashboardDbQuerySidePanel({
               <Grid.Col span={6}>
                 <ChartBox style={{ height: 350 }}>
                   <Group justify="space-between" align="center" mb="sm">
-                    <Text size="sm" c="gray.4">
-                      Query Throughput
-                    </Text>
+                    <Text size="sm">Query Throughput</Text>
                   </Group>
                   {source && (
                     <DBTimeChart
diff --git a/packages/app/src/components/ServiceDashboardEndpointPerformanceChart.tsx b/packages/app/src/components/ServiceDashboardEndpointPerformanceChart.tsx
index 19dcd94dc..5618faa92 100644
--- a/packages/app/src/components/ServiceDashboardEndpointPerformanceChart.tsx
+++ b/packages/app/src/components/ServiceDashboardEndpointPerformanceChart.tsx
@@ -88,9 +88,7 @@ export default function ServiceDashboardEndpointPerformanceChart({
   return (
     <ChartBox style={{ height: 350, overflow: 'auto' }}>
       <Group justify="space-between" align="center" mb="sm">
-        <Text size="sm" c="gray.4">
-          20 Top Most Time Consuming Operations
-        </Text>
+        <Text size="sm">20 Top Most Time Consuming Operations</Text>
       </Group>
       {source && (
         <DBListBarChart
diff --git a/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx b/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx
index 9a8e3990a..7834dda41 100644
--- a/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx
+++ b/packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx
@@ -100,9 +100,7 @@ export default function ServiceDashboardEndpointSidePanel({
               <Grid.Col span={6}>
                 <ChartBox style={{ height: 350 }}>
                   <Group justify="space-between" align="center" mb="sm">
-                    <Text size="sm" c="gray.4">
-                      Request Error Rate
-                    </Text>
+                    <Text size="sm">Request Error Rate</Text>
                   </Group>
                   {source && (
                     <DBTimeChart
@@ -134,9 +132,7 @@ export default function ServiceDashboardEndpointSidePanel({
               <Grid.Col span={6}>
                 <ChartBox style={{ height: 350 }}>
                   <Group justify="space-between" align="center" mb="sm">
-                    <Text size="sm" c="gray.4">
-                      Request Throughput
-                    </Text>
+                    <Text size="sm">Request Throughput</Text>
                   </Group>
                   {source && (
                     <DBTimeChart
diff --git a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
index 81fd5f11c..eeff9d15d 100644
--- a/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
+++ b/packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx
@@ -64,12 +64,8 @@ export default function SlowestEventsTile({
   return (
     <ChartBox style={{ height }}>
       <Group justify="space-between" align="center" mb="sm">
-        <Text size="sm" c="gray.4">
-          {title}
-        </Text>
-        <Text size="xs" c="dark.2">
-          (Slower than {roundedP95}ms)
-        </Text>
+        <Text size="sm">{title}</Text>
+        <Text size="xs">(Slower than {roundedP95}ms)</Text>
       </Group>
       {isLoading && !data ? (
         <div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
diff --git a/packages/app/src/components/ServiceMap/ServiceMapSidePanel.tsx b/packages/app/src/components/ServiceMap/ServiceMapSidePanel.tsx
index dfe192719..74d187eab 100644
--- a/packages/app/src/components/ServiceMap/ServiceMapSidePanel.tsx
+++ b/packages/app/src/components/ServiceMap/ServiceMapSidePanel.tsx
@@ -20,17 +20,10 @@ export default function ServiceMapSidePanel({
   return (
     <Stack w="100%">
       <Group gap={0}>
-        <Text size="sm" c="gray.2" ps="sm">
+        <Text size="sm" ps="sm">
           Service Map
         </Text>
-        <Badge
-          size="xs"
-          ms="xs"
-          color="gray.4"
-          autoContrast
-          radius="sm"
-          className="align-text-bottom"
-        >
+        <Badge size="xs" ms="xs" color="gray" autoContrast radius="sm">
           Beta
         </Badge>
       </Group>
diff --git a/packages/app/src/components/SourceForm.tsx b/packages/app/src/components/SourceForm.tsx
index 184aca33e..c5cad69c7 100644
--- a/packages/app/src/components/SourceForm.tsx
+++ b/packages/app/src/components/SourceForm.tsx
@@ -112,7 +112,7 @@ function FormRow({
         }}
       >
         {typeof label === 'string' ? (
-          <Text tt="capitalize" c="gray.6" size="sm">
+          <Text tt="capitalize" size="sm">
             {label}
           </Text>
         ) : (
@@ -120,7 +120,6 @@ function FormRow({
         )}
       </Stack>
       <Text
-        c="gray.4"
         me="sm"
         style={{
           ...(!helpText ? { opacity: 0, pointerEvents: 'none' } : {}),
@@ -196,7 +195,6 @@ export function LogTableModelForm({ control, watch }: TableModelProps) {
               underline="always"
               onClick={() => setShowOptionalFields(true)}
               size="xs"
-              c="gray.4"
             >
               <Text me="sm" span>
                 <i className="bi bi-gear" />
@@ -209,7 +207,6 @@ export function LogTableModelForm({ control, watch }: TableModelProps) {
               onClick={() => setShowOptionalFields(false)}
               size="xs"
               variant="subtle"
-              color="gray.4"
             >
               Hide Optional Fields
             </Button>
@@ -1126,15 +1123,10 @@ export function TableSourceForm({
     >
       <Stack gap="md" mb="md">
         <Flex justify="space-between" align="center" mb="lg">
-          <Text c="gray.4">Source Settings</Text>
+          <Text>Source Settings</Text>
           <Group>
             {onCancel && (
-              <Button
-                variant="outline"
-                color="gray.4"
-                onClick={onCancel}
-                size="xs"
-              >
+              <Button variant="outline" onClick={onCancel} size="xs">
                 Cancel
               </Button>
             )}
diff --git a/packages/app/src/components/SourceSchemaPreview.tsx b/packages/app/src/components/SourceSchemaPreview.tsx
index 7b8a73f4b..9aa01aa22 100644
--- a/packages/app/src/components/SourceSchemaPreview.tsx
+++ b/packages/app/src/components/SourceSchemaPreview.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { MetricsDataType, TSource } from '@hyperdx/common-utils/dist/types';
-import { Modal, Paper, Tabs, TextProps, Tooltip } from '@mantine/core';
+import { Modal, Paper, Tabs, Text, TextProps, Tooltip } from '@mantine/core';
 import { IconCode } from '@tabler/icons-react';
 
 import { useTableMetadata } from '@/hooks/useMetadata';
@@ -32,16 +32,18 @@ const SourceSchemaInfoIcon = ({
     <Tooltip
       label={tooltipText}
       color="dark"
-      c="white"
       position="right"
       onClick={() => isEnabled && onClick()}
     >
       {variant === 'text' ? (
-        <span
+        <Text
+          fw={500}
+          size="xs"
+          className="text-sucess-hover"
           style={{ cursor: isEnabled ? 'pointer' : 'default', ...iconStyles }}
         >
           Schema
-        </span>
+        </Text>
       ) : (
         <IconCode size={16} />
       )}
@@ -67,7 +69,13 @@ const TableSchemaPreview = ({
   });
 
   return (
-    <Paper flex="auto" shadow="none" radius="sm" style={{ overflow: 'hidden' }}>
+    <Paper
+      flex="auto"
+      shadow="none"
+      radius="sm"
+      p="xs"
+      style={{ overflow: 'hidden' }}
+    >
       {isLoading ? (
         <div className="spin-animate d-inline-block">
           <i className="bi bi-arrow-repeat" />
@@ -76,6 +84,7 @@ const TableSchemaPreview = ({
         <SQLPreview
           data={data?.create_table_query ?? 'Schema is not available'}
           enableCopy={!!data?.create_table_query}
+          copyButtonSize="xs"
         />
       )}
     </Paper>
diff --git a/packages/app/src/components/SpanEventsSubpanel.tsx b/packages/app/src/components/SpanEventsSubpanel.tsx
index ff18ee724..65f5c7bbb 100644
--- a/packages/app/src/components/SpanEventsSubpanel.tsx
+++ b/packages/app/src/components/SpanEventsSubpanel.tsx
@@ -22,7 +22,7 @@ const spanEventColumns: ColumnDef<SpanEventData>[] = [
     header: 'Timestamp',
     size: 120,
     cell: ({ row }) => (
-      <span className="text-slate-500">
+      <span className="text-muted">
         <FormatTime
           value={new Date(row.original.Timestamp).getTime()}
           format="withMs"
@@ -35,7 +35,7 @@ const spanEventColumns: ColumnDef<SpanEventData>[] = [
     header: 'Name',
     size: 180,
     cell: ({ row }) => (
-      <span className="text-slate-300 d-flex align-items-center gap-2">
+      <span className="d-flex align-items-center gap-2">
         {row.original.Name}
       </span>
     ),
@@ -53,7 +53,7 @@ const spanEventColumns: ColumnDef<SpanEventData>[] = [
           </Box>
         );
       }
-      return <span className="text-slate-500">Empty</span>;
+      return <span className="text-muted">Empty</span>;
     },
   },
 ];
@@ -93,7 +93,7 @@ export const SpanEventsSubpanel = ({
 
   if (!sortedEvents || sortedEvents.length === 0) {
     return (
-      <div className="p-3 text-slate-500 fs-7">
+      <div className="p-3 text-muted fs-7">
         No span events available for this trace
       </div>
     );
@@ -124,7 +124,6 @@ export const SpanEventsSubpanel = ({
             variant="default"
             size="xs"
             my="sm"
-            c="gray.4"
             onClick={handleToggleMoreRows}
           >
             {isExpanded ? (
diff --git a/packages/app/src/components/StacktraceFrame.tsx b/packages/app/src/components/StacktraceFrame.tsx
index 1079f83be..5849f646f 100644
--- a/packages/app/src/components/StacktraceFrame.tsx
+++ b/packages/app/src/components/StacktraceFrame.tsx
@@ -16,17 +16,17 @@ export const StacktraceFrame = ({
   return (
     <Group gap="xs" display="inline-flex">
       <div
-        className="text-slate-200 fs-8"
+        className=" fs-8"
         style={{
           opacity: isLoading ? 0.8 : 1,
           filter: isLoading ? 'blur(1px)' : 'none',
         }}
       >
         {filename}
-        <span className="text-slate-400">
+        <span>
           :{lineno}:{colno}
         </span>
-        <span className="text-slate-400">{' in '}</span>
+        <span>{' in '}</span>
         {functionName && (
           <span
             style={{
diff --git a/packages/app/src/components/Table.module.scss b/packages/app/src/components/Table.module.scss
index 09a7193c3..9bde9cb56 100644
--- a/packages/app/src/components/Table.module.scss
+++ b/packages/app/src/components/Table.module.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables';
-
 $compactVerticalPadding: 6px;
 $normalVerticalPadding: 10px;
 $comfortableVerticalPadding: 14px;
@@ -22,7 +20,7 @@ $horizontalPadding: 12px;
     }
 
     tr {
-      border-bottom: 1px solid $slate-950;
+      border-bottom: 1px solid var(--color-border);
     }
 
     tbody {
@@ -32,7 +30,7 @@ $horizontalPadding: 12px;
     }
 
     th {
-      color: $slate-300;
+      color: red;
       text-transform: uppercase;
       font-size: 9px;
       font-weight: 500;
@@ -103,7 +101,7 @@ $horizontalPadding: 12px;
 }
 
 .emptyMessage {
-  color: $slate-500;
+  color: var(--color-text);
   text-align: center;
   padding: 10px;
 }
@@ -112,19 +110,25 @@ $horizontalPadding: 12px;
   display: flex;
   gap: 4px;
   border-radius: 4px;
-  background-color: $slate-950;
-  border: 1px solid $slate-900;
-  color: $slate-300;
+  background-color: var(--color-bg-field);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
   text-align: center;
   font-size: 11px;
 
   &:hover {
-    background-color: $slate-900;
-    border-color: $slate-800;
+    background-color: var(--color-bg-field-highlighted);
+    border-color: var(--color-border);
   }
 
   &:active {
-    background-color: $slate-950;
-    border-color: $slate-950;
+    background-color: var(--color-bg-field-highlighted);
+    border-color: var(--color-border);
   }
 }
+
+.cursorColResize {
+  cursor: col-resize;
+  display: flex;
+  align-items: center;
+}
diff --git a/packages/app/src/components/Tags.tsx b/packages/app/src/components/Tags.tsx
index 55310796f..20f9dac8c 100644
--- a/packages/app/src/components/Tags.tsx
+++ b/packages/app/src/components/Tags.tsx
@@ -101,7 +101,7 @@ export const Tags = React.memo(
               color="gray"
               style={{ cursor: 'pointer' }}
             >
-              <i className="bi bi-tags text-slate-300 fs-7" />
+              <i className="bi bi-tags fs-7" />
             </ActionIcon>
           )}
         </Popover.Target>
@@ -127,11 +127,10 @@ export const Tags = React.memo(
           />
           <ScrollArea viewportProps={{ style: { maxHeight: 200 } }}>
             {filtered.length === 0 && (
-              <div className="pt-3 px-4 fs-8 text-slate-400 text-center">
+              <div className="pt-3 px-4 fs-8 text-center">
                 {allowCreate ? (
                   <>
-                    Type and press <span className="text-slate-300">Enter</span>{' '}
-                    to create new tag
+                    Type and press <span>Enter</span> to create new tag
                   </>
                 ) : (
                   'No tags found'
@@ -171,9 +170,7 @@ export const Tags = React.memo(
             </Checkbox.Group>
           </ScrollArea>
           <div className="p-2 border-top border-dark d-flex justify-content-between align-items-center">
-            <div className="ms-2 fs-8 text-slate-400">
-              {values.length || 'None'} selected
-            </div>
+            <div className="ms-2 fs-8 ">{values.length || 'None'} selected</div>
             {values.length >= 1 && (
               <Button
                 variant="default"
diff --git a/packages/app/src/components/TeamSettings/WebhookForm.tsx b/packages/app/src/components/TeamSettings/WebhookForm.tsx
index 1c1b6f14e..a328a923f 100644
--- a/packages/app/src/components/TeamSettings/WebhookForm.tsx
+++ b/packages/app/src/components/TeamSettings/WebhookForm.tsx
@@ -373,7 +373,7 @@ export function WebhookForm({
             />
           </div>,
           <Alert
-            icon={<i className="bi bi-info-circle-fill text-slate-400" />}
+            icon={<i className="bi bi-info-circle-fill " />}
             key="5"
             className="mb-4"
             color="gray"
diff --git a/packages/app/src/components/TimePicker/TimePicker.tsx b/packages/app/src/components/TimePicker/TimePicker.tsx
index f4a623942..52c03f255 100644
--- a/packages/app/src/components/TimePicker/TimePicker.tsx
+++ b/packages/app/src/components/TimePicker/TimePicker.tsx
@@ -22,11 +22,10 @@ import {
 } from '@mantine/core';
 import { DateInput, DateInputProps } from '@mantine/dates';
 import { useDisclosure } from '@mantine/hooks';
+import { IconBolt, IconCalendarFilled } from '@tabler/icons-react';
 
 import { useUserPreferences } from '@/useUserPreferences';
 
-import { Icon } from '../Icon';
-
 import { TimePickerMode } from './types';
 import { useTimePickerForm } from './useTimePickerForm';
 import {
@@ -224,24 +223,21 @@ export const TimePicker = ({
           data-testid="time-picker-input"
           leftSection={
             isLiveMode ? (
-              <Icon
-                name="lightning-charge-fill"
-                className="fs-8 text-success"
-              />
+              <IconBolt size={16} className="text-success" />
             ) : (
-              <Icon name="calendar-fill" className="fs-8" />
+              <IconCalendarFilled size={16} />
             )
           }
           styles={{
             input: {
               color: isLiveMode
-                ? 'var(--mantine-color-green-5)'
-                : 'var(--mantine-color-gray-1)',
+                ? 'var(--color-text-success)'
+                : 'var(--color-text)',
             },
           }}
           rightSection={
             opened && (
-              <Text size="xxs" bg="gray.8" px={4}>
+              <Text size="xxs" bg="var(--color-bg-neutral)" px={4} c="white">
                 d
               </Text>
             )
@@ -322,7 +318,7 @@ export const TimePicker = ({
               <Stack gap={0} p="xs">
                 {relativeTimeOptions.map((item, index) =>
                   item === 'divider' ? (
-                    <Divider key={index} my={4} color="gray.9" />
+                    <Divider key={index} my={4} />
                   ) : (
                     <Button
                       key={item[0]}
@@ -445,7 +441,7 @@ export const TimePicker = ({
                 </>
               )}
             </Stack>
-            <Text size="xxs" lh={1.2} c="gray.7">
+            <Text size="xxs" lh={1.2}>
               You can use natural language to select dates (e.g. yesterday, last
               monday at 5pm)
             </Text>
@@ -454,7 +450,7 @@ export const TimePicker = ({
               justify="flex-end"
               mt={8}
               pt={8}
-              style={{ borderTop: '1px solid #282828' }}
+              style={{ borderTop: '1px solid var(--color-border)' }}
             >
               <Button
                 data-testid="time-picker-apply"
diff --git a/packages/app/styles/AlertsPage.module.scss b/packages/app/styles/AlertsPage.module.scss
index 375fc2244..1bb663088 100644
--- a/packages/app/styles/AlertsPage.module.scss
+++ b/packages/app/styles/AlertsPage.module.scss
@@ -1,11 +1,9 @@
-@import './variables';
-
 .sectionHeader {
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--color-border);
   margin-top: 30px;
   padding-bottom: 10px;
   font-size: 14px;
-  color: $slate-400;
+  color: var(--color-text-muted);
 }
 
 .historyCardWrapper {
@@ -22,7 +20,7 @@
 .historyCard {
   width: 4px;
   height: 16px;
-  background-color: $slate-950;
+  background-color: var(--color-bg-muted);
   border-radius: 2px;
   margin: 0 1px;
   cursor: pointer;
@@ -34,11 +32,11 @@
   }
 
   &.ok {
-    background-color: #00d474;
+    background-color: var(--color-success);
   }
 
   &.alarm {
-    background-color: #e74c3c;
+    background-color: var(--color-danger);
   }
 }
 
@@ -48,15 +46,15 @@
   justify-content: space-between;
   gap: 16px;
   padding: 12px 0;
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .alertLink {
   font-weight: 500;
-  color: $slate-200;
+  color: var(--color-text-secondary);
   text-decoration: none;
 
   &:hover {
-    color: #fff;
+    color: var(--color-text);
   }
 }
diff --git a/packages/app/styles/AppNav.module.scss b/packages/app/styles/AppNav.module.scss
index cbd4c0943..16bc37445 100644
--- a/packages/app/styles/AppNav.module.scss
+++ b/packages/app/styles/AppNav.module.scss
@@ -1,4 +1,4 @@
-@import './variables';
+/* stylelint-disable */
 
 .wrapper {
   height: 100vh;
@@ -6,13 +6,12 @@
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
-  border-right: 1px solid $slate-950;
+  border-right: 1px solid var(--color-border);
+  background: var(--color-bg-sidebar);
 }
 
 .list {
-  // background-color: #00000030;
-  // border-bottom: 1px solid $slate-950;
-  border-top: 1px solid $slate-950;
+  border-top: 1px solid var(--color-border);
   overflow-x: hidden;
   max-width: 100%;
   padding: 4px 16px;
@@ -21,7 +20,7 @@
 
 .scrollbar {
   .thumb {
-    background-color: var(--mantine-color-gray-9);
+    background-color: var(--color-border);
   }
 }
 
@@ -32,21 +31,20 @@
 }
 
 .listGroupName {
-  color: $slate-400;
+  color: var(--color-text-muted);
   text-transform: uppercase;
   font-size: 11px;
   letter-spacing: 1px;
-  margin-bottom: 6px;
+  margin-bottom: 2x;
+  margin-top: 6px;
   padding-left: 16px;
   width: 100%;
   display: flex;
   align-items: center;
-
-  // justify-content: space-between;
   gap: 6px;
 
   &:hover {
-    color: $slate-300;
+    color: var(--color-text);
     cursor: pointer;
   }
 }
@@ -55,55 +53,82 @@
   display: flex;
   justify-content: space-between;
   text-decoration: none;
-  color: $slate-200;
-  font-size: 13px;
-  margin-bottom: 4px;
+  color: var(--color-text);
+  font-size: 14px;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-left: 16px;
   user-select: none;
   gap: 10px;
 
   &:hover {
-    color: $slate-100;
+    color: var(--color-text-success);
   }
 
   &:focus-visible {
     outline: none;
-    border-left: 2px solid $green;
+    background: var(--color-bg-muted);
   }
+}
 
-  &:last-of-type {
-    margin-bottom: 12px;
+.linkIcon {
+  margin-right: 8px;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    color: var(--color-text-success);
   }
 }
 
 .listEmptyMsg {
-  color: $slate-400;
+  color: var(--color-text-muted);
   font-size: 12px;
   margin: 8px 16px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.listLinkActive {
-  // color: $green;
-  color: var(--mantine-color-green-3);
-  font-weight: 500;
+.nestedLink {
+  display: block;
+  color: var(--color-text);
+  text-decoration: none;
+  font-size: 13px;
+  padding-left: 16px;
+  padding-block: 2px;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
-  &:hover {
-    // color: $green;
-    color: var(--mantine-color-green-3);
+   &:hover {
+    color: var(--color-text-success);
   }
+
+  &:focus-visible {
+    outline: none;
+    background: var(--color-bg-muted);
+  }
+}
+
+.nestedLinkActive {
+  color: var(--color-text-success);
+  font-weight: 500;
+}
+
+.listLinkActive {
+  color: var(--color-text-success);
+  font-weight: 500;
 }
 
 .kbd {
   white-space: nowrap;
   letter-spacing: -1px;
-  color: $slate-400;
-  background: $slate-950;
+  color: var(--color-text-muted);
+  background: var(--color-bg-surface);
   border-radius: 4px;
   padding: 0 4px;
   font-size: 10px;
@@ -118,18 +143,90 @@
   }
 }
 
-.appNavMenu {
+
+// User menu trigger styling
+.userMenuTrigger {
+  pointer-events: all;
+  cursor: pointer;
+  margin: 8px 0.875rem 0.875rem;
+  padding: 4px 8px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+  max-width: 100%;
+  overflow: hidden;
+
+  &:hover {
+    background: var(--color-bg-muted);
+  }
+
+  &:active {
+    transform: translate(0, 1px);
+  }
+
+  &Collapsed {
+    padding: 2px;
+    margin: 8px auto 0.875rem;
+    background: transparent;
+    border: none !important;
+    width: fit-content;
+
+    &:hover {
+      background: var(--color-bg-muted);
+    }
+
+    &:active {
+      transform: translate(0, 1px);
+    }
+  }
+}
+
+// Help menu trigger styling
+.helpMenuTrigger {
   pointer-events: all;
   cursor: pointer;
-  box-shadow: 0 5px 10px 10px #0f1215e0;
-  background: var(--mantine-color-gray-9);
+  margin: 0 0.875rem 8px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 1px solid var(--color-border);
+  transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &:hover {
-    background: var(--mantine-color-gray-8);
+    background: var(--color-bg-muted);
+    border-color: var(--color-border);
   }
 
   &:active {
-    // background: var(--mantine-color-gray-9);
     transform: translate(0, 1px);
   }
+
+  &Collapsed {
+    margin: 0 auto 8px;
+    border: none;
+    background: transparent;
+
+    &:hover {
+      background: var(--color-bg-muted);
+    }
+
+    &:active {
+      transform: translate(0, 1px);
+    }
+  }
+}
+
+// Bottom section with gradient overlay
+.bottomSection {
+  position: absolute;
+  bottom: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to top,
+    var(--color-bg-sidebar) 50%,
+    transparent 100%
+  );
+  padding-top: 40px;
 }
diff --git a/packages/app/styles/DashboardFiltersModal.module.scss b/packages/app/styles/DashboardFiltersModal.module.scss
index 0b6f39841..10ba0c9ea 100644
--- a/packages/app/styles/DashboardFiltersModal.module.scss
+++ b/packages/app/styles/DashboardFiltersModal.module.scss
@@ -1,8 +1,8 @@
 .filtersContainer {
   max-height: 400px;
   overflow-y: auto;
-  border-top: 1px solid var(--mantine-color-dark-4);
-  border-bottom: 1px solid var(--mantine-color-dark-4);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
   padding: var(--mantine-spacing-sm) 0;
   margin-bottom: var(--mantine-spacing-xs) 0;
 }
@@ -18,6 +18,6 @@
 
 .deleteButton {
   &:hover {
-    color: var(--mantine-color-red-4);
+    color: var(--color-text-danger);
   }
 }
diff --git a/packages/app/styles/EndpointSubpanel.module.scss b/packages/app/styles/EndpointSubpanel.module.scss
index 0a0af3926..e90235cea 100644
--- a/packages/app/styles/EndpointSubpanel.module.scss
+++ b/packages/app/styles/EndpointSubpanel.module.scss
@@ -1,11 +1,9 @@
-@import './variables';
-
 .panel {
   display: flex;
   flex-direction: column;
   font-size: 12px;
   height: 100%;
-  background-color: $body-bg;
+  background: var(--color-bg-surface);
   box-shadow: 0 0 100px 40px rgb(0 0 0 / 70%);
-  border-left: 1px solid $slate-900;
+  border-left: 1px solid var(--color-border);
 }
diff --git a/packages/app/styles/HDXLineChart.module.scss b/packages/app/styles/HDXLineChart.module.scss
index 99ebea253..c5821545a 100644
--- a/packages/app/styles/HDXLineChart.module.scss
+++ b/packages/app/styles/HDXLineChart.module.scss
@@ -1,5 +1,4 @@
-@import './variables';
-
+/* stylelint-disable */
 .legend {
   display: flex;
   flex-wrap: wrap;
@@ -22,10 +21,9 @@
 }
 
 .legendMoreLink {
-  color: $slate-400;
+  color: var(--color-text-muted);
   cursor: pointer;
   text-decoration: underline;
-  text-decoration-color: $slate-700;
 }
 
 .legendTooltipContent {
@@ -39,20 +37,15 @@
 
 .chartTooltip {
   backdrop-filter: blur(8px);
-  background-color: rgba(#1a1d23, 0.75);
-  border: 1px solid #5f6776;
+  background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   border-radius: 2px;
-
-  // background-color: rgb(0 0 0 / 80%);
-  // backdrop-filter: blur(2px);
-  // border-radius: 4px;
   font-size: 11px;
 }
 
 .chartTooltipHeader {
   padding: 2px 12px;
-  color: $slate-200;
-  border-bottom: 1px solid var(--mantine-color-dark-4);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .chartTooltipContent {
diff --git a/packages/app/styles/LogSidePanel.module.scss b/packages/app/styles/LogSidePanel.module.scss
index 3e000c436..bf98a091d 100644
--- a/packages/app/styles/LogSidePanel.module.scss
+++ b/packages/app/styles/LogSidePanel.module.scss
@@ -1,16 +1,14 @@
-@import './variables';
+/* stylelint-disable */
 
-// TODO: Use variables for spacings;
-$padding-x: 24px;
 
 .panel {
   display: flex;
   flex-direction: column;
   font-size: 12px;
   height: 100%;
-  background-color: $body-bg;
+  background: var(--color-bg-body);
   box-shadow: 0 0 100px 40px rgb(0 0 0 / 70%);
-  border-left: 1px solid $slate-900;
+  border-left: 1px solid var(--color-border);
 }
 
 .panelDragBar {
@@ -21,7 +19,7 @@ $padding-x: 24px;
   background-color: transparent;
 
   &:hover {
-    background-color: $slate-900;
+    background-color: var(--color-border);
     transition: background-color 0.2s ease-in-out;
   }
 }
@@ -30,12 +28,12 @@ $padding-x: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid $slate-900;
-  padding: 12px $padding-x;
+  border-bottom: 1px solid var(--color-border);
+  padding: 12px var(--mantine-spacing-xl);
 }
 
 .panelDetails {
-  padding: $padding-x;
+  padding: var(--mantine-spacing-xl);
   padding-bottom: 16px;
   display: flex;
   flex-direction: column;
@@ -43,49 +41,49 @@ $padding-x: 24px;
 }
 
 .panelContent {
-  padding: 0 $padding-x;
+  padding: 0 var(--mantine-spacing-xl);
 }
 
 .severityChip {
-  background: $slate-800;
+  background: var(--color-bg-surface);
   padding: 4px 12px;
   border-radius: 16px;
   margin-right: 8px;
 }
 
 .loadingState {
-  color: $slate-600;
+  color: var(--color-text-muted);
   width: 100%;
-  margin: $padding-x;
+  margin: var(--mantine-spacing-xl);
   font-size: 16px;
   text-align: center;
   flex-grow: 1;
 }
 
 .panelSectionWrapper {
-  background-color: #14171b;
+  border: 1px solid var(--color-border);
   margin: 12px 0;
   border-radius: 6px;
 }
 
 .panelSectionWrapperTitle {
   padding: 18px 24px;
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .kbdShortcuts {
-  background: $slate-950;
-  border-top: 1px solid $slate-900;
-  padding: 12px $padding-x;
-  color: $slate-300;
+  background: var(--color-bg-muted);
+  border-top: 1px solid var(--color-border);
+  padding: 12px var(--mantine-spacing-xl);
+  color: var(--color-text-secondary);
   font-size: 11px;
 }
 
 .kbd {
   display: inline-block;
-  background: $slate-900;
+  background: var(--color-bg-surface);
   letter-spacing: 0.5px;
-  border: 1px solid $slate-500;
+  border: 1px solid var(--color-border);
   border-radius: 4px;
   padding: 1px 6px;
   margin: 0 2px;
@@ -94,25 +92,25 @@ $padding-x: 24px;
 .kbdDivider {
   height: 21px;
   width: 1px;
-  background: $slate-800;
+  background: var(--color-border);
 }
 
 .lineContext {
-  color: $slate-300;
-  background-color: #ffffff08;
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-hover);
   padding: 8px 0;
   border-radius: 4px;
   margin-top: 8px;
 }
 
 .lineContextCurrentLine {
-  background-color: $slate-800;
-  color: $slate-100;
+  background-color: var(--color-bg-muted);
+  color: var(--color-text);
   font-weight: 600;
 
   .lineContextLineNo {
-    color: $slate-100;
-    border-right-color: $slate-600;
+    color: var(--color-text);
+    border-right-color: var(--color-border);
   }
 }
 
@@ -120,13 +118,13 @@ $padding-x: 24px;
   display: inline-block;
   width: 60px;
   text-align: right;
-  border-right: 1px solid $slate-950;
+  border-right: 1px solid var(--color-border);
   padding-right: 12px;
   margin-right: 12px;
 }
 
 .emptyMessage {
-  color: $slate-500;
+  color: var(--color-text-muted);
   text-align: center;
   padding: 10px;
 }
@@ -151,10 +149,10 @@ $padding-x: 24px;
   cursor: pointer;
 
   &:hover {
-    background-color: #ffffff08;
+    background-color: var(--color-bg-hover);
   }
 
   &:active {
-    background-color: #ffffff12;
+    background-color: var(--color-bg-muted);
   }
 }
diff --git a/packages/app/styles/LogTable.module.scss b/packages/app/styles/LogTable.module.scss
index 177b7d60a..ae28a6c14 100644
--- a/packages/app/styles/LogTable.module.scss
+++ b/packages/app/styles/LogTable.module.scss
@@ -1,15 +1,14 @@
-@import './variables';
-
 $button-height: 18px;
 
 .table {
   table-layout: fixed;
   border-spacing: 0;
   border-collapse: separate;
+  background: var(--color-bg-body);
 }
 
 .tableHead {
-  background: var(--mantine-color-dark-8);
+  background: var(--color-bg-body);
   position: sticky;
   top: 0;
   z-index: 1;
@@ -20,7 +19,7 @@ $button-height: 18px;
   position: relative;
 
   &__selected {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
     font-weight: bold;
   }
 
@@ -29,7 +28,7 @@ $button-height: 18px;
   }
 
   &:hover .rowContentButton {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
   }
 
   &:has(.expandButton:hover) .rowButtons {
@@ -44,8 +43,7 @@ $button-height: 18px;
 .expandedRowContent {
   max-height: 400px;
   overflow: auto;
-  background-color: $slate-950;
-  padding: 12px;
+  background-color: var(--color-bg-muted);
 }
 
 .expandButton {
@@ -62,19 +60,19 @@ $button-height: 18px;
   min-height: $button-height;
 
   &:hover {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
   }
 
   &:focus,
   &:focus-visible {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
     outline: none;
   }
 
   &:active {
     outline: none;
     box-shadow: none;
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
   }
 
   svg {
@@ -90,7 +88,7 @@ $button-height: 18px;
 .expandButtonSeparator {
   width: 1px;
   height: calc($button-height - 8px);
-  border-right: 1px solid var(--mantine-color-dark-4);
+  border-right: 1px solid var(--color-border);
   margin-left: 2px;
   margin-right: 2px;
   display: inline-block;
@@ -119,14 +117,14 @@ $button-height: 18px;
 
   &:focus,
   &:focus-visible {
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
     outline: none;
   }
 
   &:active {
     outline: none;
     box-shadow: none;
-    background-color: var(--mantine-color-dark-5);
+    background-color: var(--color-bg-muted);
   }
 
   &.isWrapped {
@@ -159,8 +157,8 @@ $button-height: 18px;
 .iconActionButton {
   padding: 4px;
   border-radius: 4px;
-  background-color: var(--mantine-color-dark-4);
-  border: 1px solid var(--mantine-color-dark-3);
+  background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border);
   width: 20px;
   height: 20px;
   display: flex;
@@ -174,7 +172,7 @@ $button-height: 18px;
   }
 
   &.copied {
-    color: var(--mantine-color-green-6);
+    color: var(--color-success);
   }
 }
 
@@ -192,11 +190,7 @@ $button-height: 18px;
 
   > span:hover {
     border-radius: 4px;
-    background-color: color-mix(
-      in srgb,
-      var(--mantine-color-dark-2) 30%,
-      transparent
-    );
+    background-color: var(--color-bg-highlighted);
   }
 
   &.chart {
diff --git a/packages/app/styles/ResizablePanel.module.scss b/packages/app/styles/ResizablePanel.module.scss
index f0934951d..f6b2e5e44 100644
--- a/packages/app/styles/ResizablePanel.module.scss
+++ b/packages/app/styles/ResizablePanel.module.scss
@@ -10,11 +10,11 @@
 
   &:hover,
   &:active {
-    background-color: var(--mantine-color-dark-3);
+    background-color: var(--color-bg-neutral);
   }
 
   &:active {
-    background-color: var(--mantine-color-dark-4);
+    background-color: var(--color-bg-neutral);
     width: 8px;
     margin-right: -1px;
   }
@@ -32,11 +32,11 @@
 
   &:hover,
   &:active {
-    background-color: var(--mantine-color-dark-3);
+    background-color: var(--color-bg-neutral);
   }
 
   &:active {
-    background-color: var(--mantine-color-dark-4);
+    background-color: var(--color-bg-neutral);
     height: 8px;
     margin-bottom: -1px;
   }
diff --git a/packages/app/styles/SearchPage.module.scss b/packages/app/styles/SearchPage.module.scss
index 3ae43cf25..1d344fd27 100644
--- a/packages/app/styles/SearchPage.module.scss
+++ b/packages/app/styles/SearchPage.module.scss
@@ -1,5 +1,3 @@
-@import './variables';
-
 /* stylelint-disable selector-pseudo-class-no-unknown */
 .filtersPanel {
   position: relative;
@@ -8,11 +6,11 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #00000030;
+  background-color: var(--color-bg-muted);
   word-break: break-all;
   flex-shrink: 0;
   flex-grow: 0;
-  border-right: 1px solid var(--mantine-color-dark-6);
+  border-right: 1px solid var(--color-border);
   overflow: hidden;
   z-index: 3; // higher z-index to be above other elements
 
@@ -25,12 +23,11 @@
       height: 20px;
       min-height: 20px;
       background-color: transparent;
-      border: none !important;
-      color: var(--mantine-color-gray-3);
+      color: var(--color-text-secondary);
       font-size: var(--mantine-font-size-xs);
 
       &::placeholder {
-        color: var(--mantine-color-gray-6);
+        color: var(--color-text-muted);
         font-weight: bold;
       }
 
@@ -48,11 +45,11 @@
 
   &:hover {
     cursor: pointer;
-    color: $slate-300 !important;
+    color: var(--color-text-muted) !important;
   }
 
   &:active {
-    color: $slate-500 !important;
+    color: var(--color-text-muted) !important;
   }
 }
 
@@ -83,20 +80,20 @@
     align-items: center;
     padding: 0 4px;
     gap: 4px;
-    background-color: $slate-950;
+    background-color: var(--color-bg-body);
 
     .textButton {
       padding: 2px 4px;
       border-radius: 3px;
 
       &:hover {
-        background-color: $slate-800;
-        color: $slate-200;
+        background-color: var(--color-bg-muted);
+        color: var(--color-text-secondary);
       }
 
       &:active {
-        background-color: $slate-700;
-        color: $slate-100;
+        background-color: var(--color-bg-muted);
+        color: var(--color-text);
       }
     }
   }
@@ -106,7 +103,7 @@
       opacity: 1;
     }
 
-    background-color: $slate-950;
+    background-color: var(--color-bg-surface);
 
     .filterActions {
       display: flex;
@@ -137,12 +134,12 @@
 
 @keyframes highlight {
   0% {
-    background-color: $slate-950;
+    background-color: var(--color-bg-body);
     transform: scale(1.02);
   }
 
   50% {
-    background-color: $slate-900;
+    background-color: var(--color-bg-body);
     transform: scale(1.01);
   }
 
@@ -153,14 +150,14 @@
 }
 
 .searchStatsContainer {
-  background-color: $bg-hdx-dark;
+  background-color: var(--color-bg-body);
   padding-inline: var(--mantine-spacing-xs);
   padding-block: var(--mantine-spacing-xxs);
   z-index: 3;
 }
 
 .timeChartContainer {
-  background-color: $bg-hdx-dark;
+  background-color: var(--color-bg-body);
   padding-inline: var(--mantine-spacing-xs);
   padding-block: var(--mantine-spacing-xxs);
   height: 120px;
@@ -168,7 +165,8 @@
 }
 
 .searchForm {
-  background-color: $body-bg;
+  background: var(--color-bg-body);
   z-index: 4;
   padding-bottom: var(--mantine-spacing-xs);
+  border-bottom: 1px solid var(--color-border);
 }
diff --git a/packages/app/styles/SessionSubpanelV2.module.scss b/packages/app/styles/SessionSubpanelV2.module.scss
index 1abf3b4fe..513a1ca54 100644
--- a/packages/app/styles/SessionSubpanelV2.module.scss
+++ b/packages/app/styles/SessionSubpanelV2.module.scss
@@ -1,5 +1,3 @@
-@import './variables';
-
 .wrapper {
   height: 100%;
   width: 100%;
@@ -10,7 +8,7 @@
 
 .eventList {
   width: 300px;
-  border-right: 1px solid $slate-950;
+  border-right: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -22,7 +20,7 @@
   flex-direction: column;
   gap: 6px;
   padding: 8px;
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .eventListContainer {
@@ -32,7 +30,7 @@
 
 .eventRow {
   padding: 6px 12px;
-  border-bottom: 1px solid $slate-950;
+  border-bottom: 1px solid var(--color-border);
   cursor: pointer;
   font-size: 12px;
   display: flex;
@@ -43,17 +41,17 @@
 
 .eventRowError {
   .eventRowIcon {
-    background: $red;
+    background: var(--color-bg-danger);
   }
 
   .eventRowTitle {
-    color: $red;
+    color: var(--color-text-danger);
   }
 }
 
 .eventRowSuccess {
   .eventRowIcon {
-    background: $green;
+    background: var(--color-bg-success);
 
     i {
       color: #000;
@@ -61,17 +59,17 @@
   }
 
   .eventRowTitle {
-    color: $green;
+    color: var(--color-text-success);
   }
 }
 
 .eventRowHighlighted {
-  background-color: #ffffff20;
+  background-color: var(--color-bg-muted);
   padding-left: 20px;
 }
 
 .eventRowIcon {
-  background: $slate-800;
+  background: var(--color-bg-neutral);
   width: 26px;
   height: 26px;
   display: flex;
@@ -100,7 +98,7 @@
   border-radius: 2px;
 
   &:hover {
-    background: #ffffff15;
+    background: var(--color-bg-highlighted);
   }
 }
 
@@ -108,22 +106,22 @@
   padding: 2px;
   margin: -2px;
   border-radius: 2px;
-  color: $slate-300;
+  color: var(--color-text-muted);
   font-size: 11px;
   align-self: center;
 
   &:hover {
-    background: #ffffff15;
+    background: var(--color-bg-highlighted);
   }
 }
 
 .eventRowTitle {
   font-size: 12px;
   font-weight: bold;
-  color: $slate-200;
+  color: var(--color-text);
 
   span {
-    color: $slate-400 !important;
+    color: var(--color-text-secondary) !important;
     font-size: 11px;
     font-weight: normal;
 
@@ -137,7 +135,7 @@
 
 .eventRowDescription {
   font-size: 11px;
-  color: $slate-300;
+  color: var(--color-text-muted);
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
@@ -160,8 +158,8 @@
   justify-content: space-between;
   align-items: center;
   padding: 6px 12px;
-  background-color: $slate-950;
-  border-bottom: 1px solid $slate-900;
+  background-color: var(--color-bg-surface);
+  border-bottom: 1px solid var(--color-border);
   width: 100%;
   max-width: 100%;
   gap: 12px;
@@ -169,7 +167,7 @@
 
 .playerHeaderUrl {
   font-size: 11px;
-  color: $slate-200;
+  color: var(--color-text);
   width: 100%;
   max-width: 100%;
   overflow: hidden;
@@ -182,16 +180,16 @@
   overflow: hidden;
   background: repeating-linear-gradient(
     45deg,
-    #ffffff10,
-    #ffffff10 15px,
-    $slate-950 15px,
-    $slate-950 30px
+    var(--color-bg-hover),
+    var(--color-bg-hover) 15px,
+    var(--color-bg-surface) 15px,
+    var(--color-bg-surface) 30px
   );
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
-  color: $slate-300;
+  color: var(--color-text-muted);
 }
 
 .domPlayerWrapper {
@@ -219,7 +217,7 @@
   display: flex;
   padding: 6px 12px;
   align-items: center;
-  border-top: 1px solid $slate-950;
+  border-top: 1px solid var(--color-border);
 }
 
 .playerToolbar {
@@ -227,7 +225,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 14px 20px;
-  border-top: 1px solid $slate-950;
+  border-top: 1px solid var(--color-border);
 
   > div {
     flex: 1;
diff --git a/packages/app/styles/SessionsPage.module.scss b/packages/app/styles/SessionsPage.module.scss
new file mode 100644
index 000000000..c79d2cf8f
--- /dev/null
+++ b/packages/app/styles/SessionsPage.module.scss
@@ -0,0 +1,11 @@
+.sessionCard {
+  &:hover {
+    .emailText {
+      color: var(--color-text-success);
+    }
+  }
+}
+
+.emailText {
+  transition: color 0.2s ease;
+}
diff --git a/packages/app/styles/SourceSelectControlled.module.scss b/packages/app/styles/SourceSelectControlled.module.scss
index b8a438c99..efc8e37e6 100644
--- a/packages/app/styles/SourceSelectControlled.module.scss
+++ b/packages/app/styles/SourceSelectControlled.module.scss
@@ -1,13 +1,12 @@
 .sourceSchemaPreviewButton {
   pointer-events: all;
   font-size: var(--mantine-font-size-xxs);
-  background-color: var(--mantine-color-gray-9);
-  color: var(--mantine-color-gray-2);
+  color: var(--color-text-success);
   padding-inline: var(--mantine-spacing-xxxs);
   border-radius: var(--mantine-radius-xs);
 
   &:hover {
-    color: var(--mantine-color-gray-1);
+    color: var(--color-text-success-hover);
     cursor: pointer;
   }
 }
diff --git a/packages/app/styles/TimelineChart.module.scss b/packages/app/styles/TimelineChart.module.scss
index 4836aeef6..fbcb44282 100644
--- a/packages/app/styles/TimelineChart.module.scss
+++ b/packages/app/styles/TimelineChart.module.scss
@@ -2,10 +2,14 @@
   cursor: pointer;
 
   &:hover {
-    background-color: #aaaaff07;
+    background-color: var(--color-bg-muted);
   }
 }
 
+.timelineRowActive {
+  background-color: var(--color-bg-surface);
+}
+
 .labelContainer {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/app/styles/_bootstrap-utilities.scss b/packages/app/styles/_bootstrap-utilities.scss
new file mode 100644
index 000000000..2d70a7f98
--- /dev/null
+++ b/packages/app/styles/_bootstrap-utilities.scss
@@ -0,0 +1,1016 @@
+/* stylelint-disable */
+// Custom layout utility classes to replace Bootstrap
+// 
+// WHY THIS FILE EXISTS:
+// This project migrated from Bootstrap to Mantine UI components, but Bootstrap utility
+// classes (d-flex, p-3, m-2, etc.) are used extensively throughout the codebase in 
+// hundreds of components. Rather than refactoring all components to use Mantine's prop-based
+// styling system (which would be a massive undertaking), we've recreated the most commonly 
+// used Bootstrap utilities here using Mantine's spacing variables.
+//
+// FUTURE CONSIDERATION:
+// As components are refactored, prefer using Mantine's native props:
+// - <Box p="md" /> instead of <div className="p-3" />
+// - <Flex gap="sm" /> instead of <div className="d-flex gap-2" />
+// - <Stack /> instead of <div className="d-flex flex-column" />
+//
+// This file provides classes like d-flex, flex-column, m-*, p-*, etc.
+
+// Display utilities
+.d-none {
+  display: none !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+// Flexbox utilities
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.flex-fill {
+  flex: 1 1 auto !important;
+}
+
+.flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+// Justify content
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.justify-content-evenly {
+  justify-content: space-evenly !important;
+}
+
+// Align items
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  align-items: stretch !important;
+}
+
+// Align content
+.align-content-start {
+  align-content: flex-start !important;
+}
+
+.align-content-end {
+  align-content: flex-end !important;
+}
+
+.align-content-center {
+  align-content: center !important;
+}
+
+.align-content-between {
+  align-content: space-between !important;
+}
+
+.align-content-around {
+  align-content: space-around !important;
+}
+
+.align-content-stretch {
+  align-content: stretch !important;
+}
+
+// Align self
+.align-self-auto {
+  align-self: auto !important;
+}
+
+.align-self-start {
+  align-self: flex-start !important;
+}
+
+.align-self-end {
+  align-self: flex-end !important;
+}
+
+.align-self-center {
+  align-self: center !important;
+}
+
+.align-self-baseline {
+  align-self: baseline !important;
+}
+
+.align-self-stretch {
+  align-self: stretch !important;
+}
+
+// Gap utilities (using Mantine spacing)
+.gap-0 {
+  gap: 0 !important;
+}
+
+.gap-1 {
+  gap: var(--mantine-spacing-xs) !important;
+}
+
+.gap-2 {
+  gap: var(--mantine-spacing-sm) !important;
+}
+
+.gap-3 {
+  gap: var(--mantine-spacing-md) !important;
+}
+
+.gap-4 {
+  gap: var(--mantine-spacing-lg) !important;
+}
+
+.gap-5 {
+  gap: var(--mantine-spacing-xl) !important;
+}
+
+// Margin utilities (using Mantine spacing as base unit: 1rem)
+// Bootstrap scale: 0.25rem increments (m-1 = 0.25rem, m-2 = 0.5rem, etc.)
+.m-0 {
+  margin: 0 !important;
+}
+
+.m-0\.5 {
+  margin: calc(var(--mantine-spacing-md) * 0.125) !important; // 0.125rem
+}
+
+.m-1 {
+  margin: calc(var(--mantine-spacing-md) * 0.25) !important; // 0.25rem
+}
+
+.m-2 {
+  margin: calc(var(--mantine-spacing-md) * 0.5) !important; // 0.5rem
+}
+
+.m-3 {
+  margin: var(--mantine-spacing-md) !important; // 1rem
+}
+
+.m-4 {
+  margin: calc(var(--mantine-spacing-md) * 1.5) !important; // 1.5rem
+}
+
+.m-4\.5 {
+  margin: calc(var(--mantine-spacing-md) * 2) !important; // 2rem
+}
+
+.m-5 {
+  margin: calc(var(--mantine-spacing-md) * 3) !important; // 3rem
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+// Margin top
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mt-0\.5 {
+  margin-top: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.mt-1 {
+  margin-top: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.mt-2 {
+  margin-top: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.mt-3 {
+  margin-top: var(--mantine-spacing-md) !important;
+}
+
+.mt-4 {
+  margin-top: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.mt-4\.5 {
+  margin-top: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.mt-5 {
+  margin-top: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+// Margin bottom
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-0\.5 {
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.mb-1 {
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.mb-2 {
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.mb-3 {
+  margin-bottom: var(--mantine-spacing-md) !important;
+}
+
+.mb-4 {
+  margin-bottom: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.mb-4\.5 {
+  margin-bottom: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.mb-5 {
+  margin-bottom: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+// Margin start (left in LTR)
+.ms-0 {
+  margin-inline-start: 0 !important;
+}
+
+.ms-0\.5 {
+  margin-inline-start: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.ms-1 {
+  margin-inline-start: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.ms-2 {
+  margin-inline-start: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.ms-3 {
+  margin-inline-start: var(--mantine-spacing-md) !important;
+}
+
+.ms-4 {
+  margin-inline-start: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.ms-4\.5 {
+  margin-inline-start: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.ms-5 {
+  margin-inline-start: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+.ms-auto {
+  margin-inline-start: auto !important;
+}
+
+// Margin end (right in LTR)
+.me-0 {
+  margin-inline-end: 0 !important;
+}
+
+.me-0\.5 {
+  margin-inline-end: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.me-1 {
+  margin-inline-end: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.me-2 {
+  margin-inline-end: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.me-3 {
+  margin-inline-end: var(--mantine-spacing-md) !important;
+}
+
+.me-4 {
+  margin-inline-end: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.me-4\.5 {
+  margin-inline-end: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.me-5 {
+  margin-inline-end: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+.me-auto {
+  margin-inline-end: auto !important;
+}
+
+// Margin x-axis
+.mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.mx-0\.5 {
+  margin-left: calc(var(--mantine-spacing-md) * 0.125) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.mx-1 {
+  margin-left: calc(var(--mantine-spacing-md) * 0.25) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.mx-2 {
+  margin-left: calc(var(--mantine-spacing-md) * 0.5) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.mx-3 {
+  margin-left: var(--mantine-spacing-md) !important;
+  margin-right: var(--mantine-spacing-md) !important;
+}
+
+.mx-4 {
+  margin-left: calc(var(--mantine-spacing-md) * 1.5) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.mx-4\.5 {
+  margin-left: calc(var(--mantine-spacing-md) * 2) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.mx-5 {
+  margin-left: calc(var(--mantine-spacing-md) * 3) !important;
+  margin-right: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+// Margin y-axis
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.my-0\.5 {
+  margin-top: calc(var(--mantine-spacing-md) * 0.125) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.my-1 {
+  margin-top: calc(var(--mantine-spacing-md) * 0.25) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.my-2 {
+  margin-top: calc(var(--mantine-spacing-md) * 0.5) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.my-3 {
+  margin-top: var(--mantine-spacing-md) !important;
+  margin-bottom: var(--mantine-spacing-md) !important;
+}
+
+.my-4 {
+  margin-top: calc(var(--mantine-spacing-md) * 1.5) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.my-4\.5 {
+  margin-top: calc(var(--mantine-spacing-md) * 2) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.my-5 {
+  margin-top: calc(var(--mantine-spacing-md) * 3) !important;
+  margin-bottom: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+// Padding utilities (using Mantine spacing as base unit: 1rem)
+// Bootstrap scale: 0.25rem increments (p-1 = 0.25rem, p-2 = 0.5rem, etc.)
+.p-0 {
+  padding: 0 !important;
+}
+
+.p-0\.5 {
+  padding: calc(var(--mantine-spacing-md) * 0.125) !important; // 0.125rem
+}
+
+.p-1 {
+  padding: calc(var(--mantine-spacing-md) * 0.25) !important; // 0.25rem
+}
+
+.p-2 {
+  padding: calc(var(--mantine-spacing-md) * 0.5) !important; // 0.5rem
+}
+
+.p-3 {
+  padding: var(--mantine-spacing-md) !important; // 1rem
+}
+
+.p-4 {
+  padding: calc(var(--mantine-spacing-md) * 1.5) !important; // 1.5rem
+}
+
+.p-4\.5 {
+  padding: calc(var(--mantine-spacing-md) * 2) !important; // 2rem
+}
+
+.p-5 {
+  padding: calc(var(--mantine-spacing-md) * 3) !important; // 3rem
+}
+
+// Padding bottom
+.pb-0 {
+    padding-bottom: 0!important
+}
+
+.pb-0\.5 {
+    padding-bottom: calc(var(--mantine-spacing-md) * 0.125)!important
+}
+
+.pb-1 {
+    padding-bottom: calc(var(--mantine-spacing-md) * 0.25)!important
+}
+
+.pb-2 {
+    padding-bottom: calc(var(--mantine-spacing-md) * 0.5)!important
+}
+
+.pb-3 {
+    padding-bottom: var(--mantine-spacing-md)!important
+}
+
+.pb-4 {
+    padding-bottom: calc(var(--mantine-spacing-md) * 1.5)!important
+}
+
+.pb-4\.5 {
+    padding-bottom: calc(var(--mantine-spacing-md) * 2)!important
+}
+
+.pb-5 {
+    padding-bottom: calc(var(--mantine-spacing-md) * 3)!important
+}
+
+// Padding top
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pt-0\.5 {
+  padding-top: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.pt-1 {
+  padding-top: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.pt-2 {
+  padding-top: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.pt-3 {
+  padding-top: var(--mantine-spacing-md) !important;
+}
+
+.pt-4 {
+  padding-top: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.pt-4\.5 {
+  padding-top: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.pt-5 {
+  padding-top: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+// Padding start (left in LTR)
+.ps-0 {
+  padding-inline-start: 0 !important;
+}
+
+.ps-0\.5 {
+  padding-inline-start: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.ps-1 {
+  padding-inline-start: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.ps-2 {
+  padding-inline-start: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.ps-3 {
+  padding-inline-start: var(--mantine-spacing-md) !important;
+}
+
+.ps-4 {
+  padding-inline-start: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.ps-4\.5 {
+  padding-inline-start: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.ps-5 {
+  padding-inline-start: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+// Padding end (right in LTR)
+.pe-0 {
+  padding-inline-end: 0 !important;
+}
+
+.pe-0\.5 {
+  padding-inline-end: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.pe-1 {
+  padding-inline-end: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.pe-2 {
+  padding-inline-end: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.pe-3 {
+  padding-inline-end: var(--mantine-spacing-md) !important;
+}
+
+.pe-4 {
+  padding-inline-end: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.pe-4\.5 {
+  padding-inline-end: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.pe-5 {
+  padding-inline-end: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+// Padding x-axis
+.px-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.px-0\.5 {
+  padding-left: calc(var(--mantine-spacing-md) * 0.125) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.px-1 {
+  padding-left: calc(var(--mantine-spacing-md) * 0.25) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.px-2 {
+  padding-left: calc(var(--mantine-spacing-md) * 0.5) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.px-3 {
+  padding-left: var(--mantine-spacing-md) !important;
+  padding-right: var(--mantine-spacing-md) !important;
+}
+
+.px-4 {
+  padding-left: calc(var(--mantine-spacing-md) * 1.5) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.px-4\.5 {
+  padding-left: calc(var(--mantine-spacing-md) * 2) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.px-5 {
+  padding-left: calc(var(--mantine-spacing-md) * 3) !important;
+  padding-right: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+// Padding y-axis
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.py-0\.5 {
+  padding-top: calc(var(--mantine-spacing-md) * 0.125) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 0.125) !important;
+}
+
+.py-1 {
+  padding-top: calc(var(--mantine-spacing-md) * 0.25) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 0.25) !important;
+}
+
+.py-2 {
+  padding-top: calc(var(--mantine-spacing-md) * 0.5) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 0.5) !important;
+}
+
+.py-3 {
+  padding-top: var(--mantine-spacing-md) !important;
+  padding-bottom: var(--mantine-spacing-md) !important;
+}
+
+.py-4 {
+  padding-top: calc(var(--mantine-spacing-md) * 1.5) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 1.5) !important;
+}
+
+.py-4\.5 {
+  padding-top: calc(var(--mantine-spacing-md) * 2) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 2) !important;
+}
+
+.py-5 {
+  padding-top: calc(var(--mantine-spacing-md) * 3) !important;
+  padding-bottom: calc(var(--mantine-spacing-md) * 3) !important;
+}
+
+// Width utilities
+.w-25 {
+  width: 25% !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-75 {
+  width: 75% !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+// Height utilities
+.h-25 {
+  height: 25% !important;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.h-75 {
+  height: 75% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+// Viewport height/width
+.vh-100 {
+  height: 100vh !important;
+}
+
+.vw-100 {
+  width: 100vw !important;
+}
+
+.min-vh-100 {
+  min-height: 100vh !important;
+}
+
+.min-vw-100 {
+  min-width: 100vw !important;
+}
+
+// Min/Max width
+.mw-100 {
+  max-width: 100% !important;
+}
+
+.min-w-0 {
+  min-width: 0 !important;
+}
+
+// Position utilities
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: sticky !important;
+}
+
+// Position values
+.top-0 {
+  top: 0 !important;
+}
+
+.top-50 {
+  top: 50% !important;
+}
+
+.top-100 {
+  top: 100% !important;
+}
+
+.bottom-0 {
+  bottom: 0 !important;
+}
+
+.bottom-50 {
+  bottom: 50% !important;
+}
+
+.bottom-100 {
+  bottom: 100% !important;
+}
+
+.start-0 {
+  left: 0 !important;
+}
+
+.start-50 {
+  left: 50% !important;
+}
+
+.start-100 {
+  left: 100% !important;
+}
+
+.end-0 {
+  right: 0 !important;
+}
+
+.end-50 {
+  right: 50% !important;
+}
+
+.end-100 {
+  right: 100% !important;
+}
+
+// Fixed positioning helpers
+.fixed-top {
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: 0 !important;
+  z-index: 1030 !important;
+}
+
+.fixed-bottom {
+  position: fixed !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  z-index: 1030 !important;
+}
+
+// Overflow utilities
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+// Text utilities
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+// Pointer events
+.pe-none {
+  pointer-events: none !important;
+}
+
+.pe-auto {
+  pointer-events: auto !important;
+}
+
+// Cursor
+.cursor-pointer {
+  cursor: pointer !important;
+}
+
+// Visibility
+.visible {
+  visibility: visible !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+// Table utilities
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  color: var(--color-text);
+  vertical-align: top;
+  border-color: var(--color-border);
+}
+
+// Text alignment
+.text-start {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-end {
+  text-align: right !important;
+}
+
+// Text wrapping
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+// Font size utilities
+.fs-1 {
+  font-size: 2.5rem !important; // 40px
+}
+
+.fs-2 {
+  font-size: 2rem !important; // 32px
+}
+
+.fs-3 {
+  font-size: 1.75rem !important; // 28px
+}
+
+.fs-4 {
+  font-size: 1.5rem !important; // 24px
+}
+
+.fs-5 {
+  font-size: 1.25rem !important; // 20px
+}
+
+.fs-6 {
+  font-size: 1rem !important; // 16px (base)
+}
+
+.fs-7 {
+  font-size: 0.875rem !important; // 14px
+}
+
+.fs-8 {
+  font-size: 0.75rem !important; // 12px
+}
+
+.fs-9 {
+  font-size: 0.625rem !important; // 10px
+}
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
new file mode 100644
index 000000000..b7ec5e15b
--- /dev/null
+++ b/packages/app/styles/_semantic-colors.scss
@@ -0,0 +1,130 @@
+/* Dark Mode (default) */
+[data-mantine-color-scheme='dark'] {
+  /* Backgrounds */
+  --color-bg-body: var(--mantine-color-dark-8);
+  --color-bg-surface: var(--mantine-color-dark-5);
+  --color-bg-muted: var(--mantine-color-dark-7);
+  --color-bg-highlighted: var(--mantine-color-dark-5);
+  --color-bg-sidebar: var(--mantine-color-dark-8);
+  --color-bg-header: var(--mantine-color-dark-8);
+  --color-bg-hover: var(--mantine-color-dark-6);
+  --color-bg-active: var(--mantine-color-dark-5);
+  --color-bg-field: var(--mantine-color-dark-6);
+  --color-bg-field-highlighted: var(--mantine-color-dark-4);
+  --color-bg-neutral: var(--mantine-color-dark-4);
+  --color-bg-success: var(--mantine-color-green-5);
+  --color-bg-danger: var(--mantine-color-red-5);
+  --color-bg-warning: var(--mantine-color-orange-5);
+  --color-bg-brand: #4ffa7a;
+
+  /* Borders & Dividers */
+  --color-border: var(--mantine-color-dark-5);
+
+  /* Text */
+  --color-text: var(--mantine-color-dark-0);
+  --color-text-inverted: var(--mantine-color-dark-9);
+  --color-text-primary: var(--mantine-color-green-4);
+  --color-text-primary-hover: var(--mantine-color-green-3);
+  --color-text-secondary: var(--mantine-color-dark-2);
+  --color-text-muted: var(--mantine-color-dark-2);
+  --color-text-muted-hover: var(--mantine-color-dark-1);
+  --color-text-success: var(--mantine-color-green-4);
+  --color-text-success-hover: var(--mantine-color-green-3);
+  --color-text-danger: var(--mantine-color-red-4);
+
+  /* Icons */
+  --color-icon-primary: var(--mantine-color-dark-1);
+  --color-icon-muted: var(--mantine-color-dark-4);
+
+  /* Overlay & Backdrop */
+  --color-overlay: rgb(0 0 0 / 50%);
+  --color-backdrop: rgb(0 0 0 / 30%);
+
+  /* States */
+  --color-state-hover: var(--mantine-color-dark-6);
+  --color-state-selected: var(--mantine-color-dark-5);
+  --color-state-focus: var(--mantine-color-dark-4);
+
+  /* Code / Misc UI */
+  --color-bg-code: var(--mantine-color-dark-8);
+  --color-border-code: var(--mantine-color-dark-6);
+  --color-bg-kbd: var(--mantine-color-dark-9);
+
+  /* JSON Syntax Highlighting */
+  --color-json-string: var(--mantine-color-green-4);
+  --color-json-number: var(--mantine-color-orange-4);
+  --color-json-boolean: var(--mantine-color-orange-4);
+  --color-json-key: var(--mantine-color-violet-4);
+  --color-json-object: var(--mantine-color-green-4);
+  --color-json-array: var(--mantine-color-green-4);
+  --color-json-punctuation: var(--mantine-color-dark-4);
+
+  /* Mantine Overrides */
+  --mantine-color-body: var(--color-bg-body) !important;
+}
+
+/* Light Mode */
+[data-mantine-color-scheme='light'] {
+  /* Mantine Overrides */
+  --mantine-color-body: var(--color-bg-body);
+
+  /* Backgrounds - inverted (dark becomes light) */
+  --color-bg-body: var(--mantine-color-white);
+  --color-bg-surface: var(--mantine-color-white);
+  --color-bg-muted: #f6f6fa;
+  --color-bg-highlighted: #e6e8ed;
+  --color-bg-sidebar: var(--mantine-color-white);
+  --color-bg-header: var(--mantine-color-gray-1);
+  --color-bg-modal: var(--mantine-color-white);
+  --color-bg-hover: var(--mantine-color-gray-3);
+  --color-bg-active: var(--mantine-color-gray-4);
+  --color-bg-field: #ececf5;
+  --color-bg-field-highlighted: var(--mantine-color-gray-1);
+  --color-bg-neutral: var(--mantine-color-gray-5);
+  --color-bg-success: var(--mantine-color-green-8);
+  --color-bg-danger: var(--mantine-color-red-8);
+  --color-bg-warning: var(--mantine-color-orange-8);
+  --color-bg-brand: var(--mantine-color-green-8);
+
+  /* Borders & Dividers - inverted */
+  --color-border: var(--mantine-color-gray-2);
+
+  /* Text - inverted */
+  --color-text: var(--mantine-color-dark-9);
+  --color-text-inverted: var(--mantine-color-white);
+  --color-text-primary: var(--mantine-color-green-8);
+  --color-text-primary-hover: var(--mantine-color-green-9);
+  --color-text-secondary: var(--mantine-color-gray-5);
+  --color-text-muted: var(--mantine-color-dark-6);
+  --color-text-muted-hover: var(--mantine-color-dark-9);
+  --color-text-success: var(--mantine-color-green-8);
+  --color-text-success-hover: var(--mantine-color-green-9);
+  --color-text-danger: var(--mantine-color-red-7);
+
+  /* Icons - inverted */
+  --color-icon-primary: var(--mantine-color-dark-8);
+  --color-icon-muted: var(--mantine-color-dark-5);
+
+  /* Overlay & Backdrop */
+  --color-overlay: rgb(0 0 0 / 30%);
+  --color-backdrop: rgb(0 0 0 / 10%);
+
+  /* States - inverted */
+  --color-state-hover: var(--mantine-color-dark-3);
+  --color-state-selected: var(--mantine-color-dark-4);
+  --color-state-focus: var(--mantine-color-dark-5);
+
+  /* Code / Misc UI - inverted */
+  --color-bg-code: var(--mantine-color-dark-1);
+  --color-border-code: var(--mantine-color-dark-3);
+  --color-bg-kbd: var(--mantine-color-dark-0);
+
+  /* JSON Syntax Highlighting */
+  --color-json-string: var(--mantine-color-green-9);
+  --color-json-number: var(--mantine-color-orange-7);
+  --color-json-boolean: var(--mantine-color-orange-7);
+  --color-json-key: var(--mantine-color-violet-9);
+  --color-json-object: var(--mantine-color-green-7);
+  --color-json-array: var(--mantine-color-green-7);
+  --color-json-punctuation: var(--mantine-color-dark-5);
+}
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
new file mode 100644
index 000000000..65e2e7130
--- /dev/null
+++ b/packages/app/styles/_utilities.scss
@@ -0,0 +1,179 @@
+// Custom utility classes for HyperDX
+// These are HyperDX-specific utilities using semantic color tokens
+// Layout utilities (spacing, display, flexbox, etc.) are in _bootstrap-utilities.scss
+
+// Background utilities
+.bg-surface {
+  background-color: var(--color-bg-surface) !important;
+}
+
+.bg-body {
+  background-color: var(--color-bg-body) !important;
+}
+
+.bg-muted {
+  background-color: var(--color-bg-muted);
+}
+
+.bg-muted-hover {
+  &:hover {
+    background-color: var(--color-bg-muted);
+  }
+}
+
+.bg-highlighted {
+  background-color: var(--color-bg-highlighted);
+}
+
+.bg-highlighted-hover {
+  &:hover {
+    background-color: var(--color-bg-highlighted);
+  }
+}
+
+.bg-danger-transparent {
+  background-color: color-mix(
+    in srgb,
+    var(--mantine-color-red-5) 15%,
+    transparent
+  );
+}
+
+// Border utilities
+.border {
+  border: 1px solid var(--color-border) !important;
+}
+
+.border-top {
+  border-top: 1px solid var(--color-border) !important;
+}
+
+.border-bottom {
+  border-bottom: 1px solid var(--color-border) !important;
+}
+
+.border-start {
+  border-left: 1px solid var(--color-border) !important;
+}
+
+.border-end {
+  border-right: 1px solid var(--color-border) !important;
+}
+
+.border-dark {
+  border-color: var(--color-border) !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+// Rounded utilities
+.rounded {
+  border-radius: var(--mantine-radius-default) !important;
+}
+
+.rounded-sm {
+  border-radius: var(--mantine-radius-sm) !important;
+}
+
+.rounded-lg {
+  border-radius: var(--mantine-radius-lg) !important;
+}
+
+.rounded-0 {
+  border-radius: 0 !important;
+}
+
+// Text color utilities
+.text-muted {
+  color: var(--color-text-muted) !important;
+}
+
+.text-muted-hover {
+  color: var(--color-text-muted);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-text-muted-hover);
+  }
+}
+
+.text-light {
+  color: var(--color-text) !important;
+}
+
+.text-success {
+  color: var(--color-text-success) !important;
+}
+
+.text-success-hover {
+  color: var(--color-text-success);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-text-success-hover);
+  }
+}
+
+.text-link {
+  color: var(--color-text-primary) !important;
+}
+
+.text-danger {
+  color: var(--color-text-danger) !important;
+}
+
+.text-warning {
+  color: var(--color-text-warning) !important;
+}
+
+// Font size utilities
+.fs-8 {
+  font-size: var(--mantine-font-size-xs) !important;
+}
+
+.fs-7 {
+  font-size: var(--mantine-font-size-sm) !important;
+}
+
+// Font weight utilities
+.fw-normal {
+  font-weight: 400 !important;
+}
+
+.fw-bold {
+  font-weight: 700 !important;
+}
+
+.fw-500 {
+  font-weight: 500 !important;
+}
+
+.fw-600 {
+  font-weight: 600 !important;
+}
+
+.cursor-default {
+  cursor: default;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-col-resize {
+  cursor: col-resize;
+}
+
+.cursor-zoom-in {
+  cursor: zoom-in !important;
+}
+
+.cursor-crosshair {
+  cursor: crosshair !important;
+}
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 061ad7d55..aa1a8b029 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -1,7 +1,12 @@
 /* stylelint-disable */
+@import './_semantic-colors';
+
+// Bootstrap utilities only (d-flex, flex-column, m-*, p-*, etc.)
+@import './_bootstrap-utilities';
+
+// Custom utilities (bg-surface, border-dark, etc.)
+@import './_utilities';
 
-@import './variables';
-@import '~bootstrap/scss/bootstrap';
 @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@@ -21,147 +26,6 @@
   font-family: 'IBM Plex Mono', monospace;
 }
 
-html,
-body,
-html[class~='dark'] body {
-  background-color: $body-bg;
-}
-.bg-body {
-  background-color: $body-bg;
-}
-.bg-hdx-dark {
-  background-color: $bg-hdx-dark;
-}
-
-.bg-grey {
-  background-color: $bg-grey;
-}
-
-.bg-light-grey {
-  background-color: #37414d;
-}
-.bg-light-grey-hover {
-  background-color: #37414d;
-  &:hover {
-    background-color: #4e5c6d;
-  }
-}
-
-.bg-inherit {
-  background-color: inherit;
-}
-
-.bg-dark-grey {
-  background-color: $bg-dark-grey;
-}
-.bg-default-dark-grey-hover {
-  &:hover {
-    background-color: $bg-dark-grey;
-  }
-}
-
-.border-grey-top {
-  border-top: 1px solid #393939;
-}
-.border-grey-bottom {
-  border-bottom: 1px solid #393939;
-}
-.border-grey {
-  border-color: #393939 !important;
-}
-.border-grey-gradient {
-  box-shadow: 0 0 0 1px rgb(82 82 82 / 60%);
-}
-
-.fw-500 {
-  font-weight: 500;
-}
-.fw-600 {
-  font-weight: 600;
-}
-
-.text-success {
-  color: var(--mantine-color-green-3) !important;
-}
-
-// Darker than text-muted
-.text-gray-600 {
-  color: $gray-600;
-}
-
-.text-slate-700 {
-  color: $slate-700;
-}
-
-.text-slate-600 {
-  color: $slate-600;
-}
-
-.text-slate-500 {
-  color: $slate-500;
-}
-
-.text-slate-400 {
-  color: $slate-400;
-}
-
-.text-slate-300 {
-  color: $slate-300;
-}
-
-.text-slate-200 {
-  color: $slate-200;
-}
-
-.text-muted-hover {
-  color: $text-muted;
-  transition: color 0.2s ease;
-  &:hover {
-    color: #fff;
-  }
-}
-
-.text-muted-hover-black {
-  color: $text-muted;
-  transition: color 0.2s ease;
-  &:hover {
-    color: black;
-  }
-}
-
-.text-white-hover {
-  color: $white;
-  transition: color 0.2s ease;
-  &:hover {
-    color: $text-muted;
-  }
-}
-
-.text-white-hover-green {
-  color: $white;
-  transition: color 0.2s ease;
-  &:hover {
-    color: $green;
-  }
-}
-
-.text-purple-hover {
-  color: $text-purple;
-  transition: color 0.2s ease;
-  &:hover {
-    color: darken($text-purple, 5);
-  }
-}
-
-.text-white-hover-success-trigger {
-  transition: color 0.2s ease;
-  .child-hover-trigger {
-    color: $white;
-  }
-  &:hover .child-hover-trigger {
-    color: $green;
-  }
-}
 
 :root {
   --mantine-webkit-font-smoothing: inherit;
@@ -171,7 +35,7 @@ html[class~='dark'] body {
 
 body {
   font-family: 'IBM Plex Mono', monospace;
-  font-size: $font-size-base * 0.875;
+  font-size: var(--mantine-font-size-sm);
 }
 
 .accordion-button,
@@ -183,206 +47,12 @@ body {
   }
 }
 
-.cursor-default {
-  cursor: default;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.cursor-grab {
-  cursor: grab;
-}
-
-.cursor-col-resize {
-  cursor: col-resize;
-}
-
-.cursor-zoom-in {
-  cursor: zoom-in !important;
-}
-
-.cursor-crosshair {
-  cursor: crosshair !important;
-}
-
 .nav-link.active {
   font-weight: 500;
 }
 
-.btn-brand-primary {
-  // @include button-variant(#fff, #8256d0, #ffffff00);
-  @include button-variant($purple, #ffffff00, white);
-  background-image: linear-gradient(
-    89.91deg,
-    $purple 0.06%,
-    #245ab2 99.9%
-  ) !important;
-  border: 0;
-  font-weight: 500;
-  box-shadow: 0px 0px 10px 0px #8256d0b2;
-
-  transition: opacity 0.2s;
-
-  &:hover {
-    opacity: 0.9;
-    border: 0;
-  }
-  &:focus {
-    box-shadow: none;
-  }
-}
-.btn-outline-brand-primary {
-  // @include button-outline-variant(white, white, #8256d0, #8256d0);
-  position: relative;
-
-  $border: 2px;
-  color: #fff;
-  background: $body-bg;
-  background-clip: padding-box; /* !importanté */
-  border: solid $border transparent; /* !importanté */
-
-  &:hover {
-    color: $text-muted;
-    &:before {
-      background: $purple;
-    }
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: -$border; /* !importanté */
-    border-radius: inherit; /* !importanté */
-    background: linear-gradient(89.91deg, $purple 0.06%, #245ab2 99.9%);
-    z-index: -1;
-  }
-
-  .btn-check:focus + &,
-  &:focus {
-    box-shadow: 0 0 0 $btn-focus-width rgba($purple, 0.5);
-  }
-}
-.btn-dark {
-  background: #151515af;
-  &:hover {
-    background: #4d4d4d;
-  }
-}
-
-.outline-green-gradient {
-  position: relative;
-
-  $border: 1px;
-  background-clip: padding-box; /* !importanté */
-  border: solid $border transparent; /* !importanté */
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: -$border; /* !importanté */
-    border-radius: inherit; /* !importanté */
-    background: linear-gradient(
-      300.9deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(0, 202, 51, 0.144) 100%
-    );
-    z-index: -1;
-  }
-}
-
-.primary-text {
-  background: linear-gradient(91.75deg, $purple 2.76%, #317bf5 93.09%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.fs-0 {
-  @include font-size(3rem);
-  @include rfs(3.5rem, line-height);
-  // @include font-size(3rem);
-  // font-size: 48px;
-}
-
-.bg-purple {
-  background-color: $bg-purple;
-}
-.bg-purple-active {
-  background-color: $bg-purple-active;
-}
-.bg-warning-transparent {
-  background-color: rgba($yellow, 0.15);
-}
-.bg-danger-transparent {
-  background-color: rgba($red, 0.15);
-}
-
-.transition-width {
-  transition: width 0.2s ease-in-out;
-}
-
-.transition-height {
-  transition: height 0.2s ease-in-out;
-}
-
-.min-height-65vh {
-  min-height: 65vh;
-}
-
-.gradient-divider {
-  height: 1px;
-  background: radial-gradient(
-    50% 243.6% at 50% 50%,
-    #3788f6 0%,
-    rgba(130, 86, 208, 0) 100%
-  );
-  opacity: 0.6;
-  transform: matrix(1, 0, 0, -1, 0, 0);
-}
-
-.opacity-90 {
-  opacity: 0.9;
-}
-
-.rotate-90 {
-  transform: rotate(90deg);
-}
-
-.rounded-10 {
-  border-radius: 25px;
-}
-
-/* Overwrite boostrap table */
-.table > :not(:first-child) {
-  border-top: none;
-}
-.table th {
-  font-weight: 500;
-}
-.table-dark {
-  --bs-table-bg: transparent;
-  --bs-table-striped-bg: #2c3034;
-  --bs-table-striped-color: #fff;
-  --bs-table-active-bg: #373b3e;
-  --bs-table-active-color: #fff;
-  --bs-table-hover-bg: #323539;
-  --bs-table-hover-color: #fff;
-  color: #fff;
-  border-color: #373b3e;
-}
 
 /* Custom Components */
-
 .player-skipping-overlay {
   position: absolute;
   z-index: 10;
@@ -403,7 +73,7 @@ body {
     width: 15px;
     height: 15px;
     background-color: rgba(#fff, 0.5);
-    border: 2px solid rgba($gray-100, 0.75);
+    border: 2px solid var(--color-border);
     border-radius: 50%;
     position: absolute;
     pointer-events: none; // Make sure the rrweb mouse doesn't obscure elements below it for the inspector
@@ -470,18 +140,6 @@ body {
   }
 }
 
-.TimelineEventTooltip {
-  .tooltip {
-    z-index: 9999 !important;
-  }
-  .tooltip-inner {
-    max-width: 300px;
-    background: $bg-purple-active;
-  }
-  .tooltip-arrow::before {
-    border-top-color: $bg-purple-active;
-  }
-}
 
 @keyframes animatedglow {
   0% {
@@ -509,14 +167,7 @@ body {
 
 .ds-table.table-hover {
   tr.data-row:hover {
-    background-color: #151515af;
-  }
-}
-
-// Backend logs debugger UI
-.LogEvent {
-  code {
-    color: $text-muted;
+    background-color: var(--color-bg-muted);
   }
 }
 
@@ -542,39 +193,36 @@ body {
   }
 
   &.input-bg .ds-react-select__control {
-    background: $input-bg;
+    background: var(--color-bg-field);
   }
 
   .ds-react-select__control {
-    // background: $bg-dark;
-    background: transparent;
-    border: 1px solid #212223;
-    // @apply bg-white dark:bg-neutral-700 border-2 border-neutral-300 dark:border-neutral-700 hover:border-neutral-400 dark:hover:border-neutral-500;
-  }
-
-  .ds-react-select__control--is-focused {
-    // @apply border-neutral-500 hover:border-neutral-500 dark:border-neutral-400 dark:hover:border-neutral-400 shadow-none;
+    background: var(--color-bg-field);
+    border: 1px solid var(--color-border);
   }
 
   .ds-react-select__menu {
-    background: $bg-hdx-dark;
-    border: 1px solid $text-muted;
-    // @apply bg-neutral-100 dark:bg-neutral-700 border-2 border-neutral-300 dark:border-neutral-600;
+    background: var(--color-bg-field);
+    border: 1px solid var(--color-border);
   }
 
   .ds-react-select__option {
-    color: $text-light;
-    // background: $bg-dark;
-    // @apply text-neutral-600 dark:text-neutral-200 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-800;
+    color: var(--color-text);
   }
+
   .ds-react-select__option--is-focused {
-    background: $gray-900;
+    background: var(--color-bg-muted);
   }
+
+  .ds-react-select__option--is-selected {
+    background: var(--color-bg-muted);
+  }
+
   .ds-react-select__multi-value {
-    background: $gray-900;
+    background: var(--color-bg-field);
 
     .ds-react-select__multi-value__label {
-      color: $text-light;
+      color: var(--color-text);
     }
   }
 
@@ -582,14 +230,14 @@ body {
     width: 0;
   }
   .ds-react-select__indicator {
-    color: $text-muted;
+    color: var(--color-text-muted);
   }
 
   .ds-react-select__input-container,
   .ds-react-select__placeholder,
   .ds-react-select__single-value {
     // @apply text-neutral-600 dark:text-neutral-200;
-    color: $text-muted;
+    color: var(--color-text);
     // background: $bg-dark;
     background: transparent;
   }
@@ -598,17 +246,18 @@ body {
 // React Grid for Dashboarding
 .react-grid-item.react-grid-placeholder {
   // Override the default placeholder color from red
-  background: rgba(#A1A1AA, 0.05) !important;
-  border: 1px solid rgba(#FAFAFA, 0.4) !important;
-  opacity: 1 !important;
+  background: var(--color-bg-muted) !important;
+  border: 1px solid var(--color-border) !important;
+  opacity: 0.4 !important;
 }
 .react-grid-item > .react-resizable-handle::after {
-  // border-color: rgba($green, 0.4) !important;
-  border-color: rgba(#FAFAFA, 0.8) !important;
-  right: -4px;
+  border-color: var(--color-text) !important;
+  right: -4px ;
   bottom: -4px;
   width: 4px;
   height: 4px;
+  border-right: 2px solid var(--color-text) !important;
+  border-bottom: 2px solid var(--color-text) !important;
 }
 
 // Nextra Overrides
@@ -636,30 +285,6 @@ body {
   fill: rgba(204, 204, 204, 0.2) !important;
 }
 
-.white-text-gradient {
-  background: linear-gradient(180deg, #ffffff 0%, #c1c1c1 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  text-fill-color: transparent;
-}
-// For the landing green->purple bg gradient card
-.fancy-card-bg {
-  background:
-    radial-gradient(
-        79.84% 219.18% at 89.97% 87.4%,
-        rgba(80, 250, 219, 0.06) 0%,
-        rgba(164, 42, 238, 0.051) 100%
-      )
-      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
-    linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.075) 0%,
-      rgba(255, 255, 255, 0.045) 100%
-    );
-  border-radius: 4px;
-}
-
 .effect-pulse {
   animation: pulse 1s infinite;
 }
@@ -715,11 +340,7 @@ body {
   pointer-events: none;
 }
 
-html.hdx-theme-light {
-  filter: invert(1) hue-rotate(180deg) brightness(1.05);
-}
-
-html.hdx-theme-light .hdx-background-image {
+[data-mantine-color-scheme='light'] .hdx-background-image {
   display: none;
 }
 
@@ -734,8 +355,9 @@ a.mantine-focus-auto:hover {
   }
 }
 
-.u-select {
-  border: 1px solid #50fa7b;
-  background: #50fa7a0d !important;
-  color: #2E224788;
+// Global cursor pointer for interactive elements
+button,
+a,
+[role='button'] {
+  cursor: pointer;
 }
diff --git a/packages/app/styles/variables.scss b/packages/app/styles/variables.scss
deleted file mode 100644
index e0b1219f7..000000000
--- a/packages/app/styles/variables.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
-  Colors
-*/
-
-$text-muted: #dadada;
-$text-purple: #9357ff; // This isn't a bootstrap variable
-$text-light: #f8f8f2;
-$green: #50fa7b;
-$red: #ff5d5b;
-$blue: #3788f6;
-$purple: #8f57f3;
-$gray-100: #f8f9fa;
-$body-color: $gray-100;
-$bg-hdx-dark: #1a1d23;
-$bg-dark-grey: #1f2429;
-$bg-grey: #21272e;
-$bg-purple: #2e273b;
-$bg-purple-active: #4a4eb5;
-$body-bg: #0f1215;
-$code-color: #4bb74a;
-$info: $purple;
-
-// TODO: Adjust contrast ratios
-$slate-50: #f6f7f9;
-$slate-100: #eceef2;
-$slate-200: #d5dae2;
-$slate-300: #b1bbc8;
-$slate-400: #8695aa;
-$slate-500: #677890;
-$slate-600: #526077;
-$slate-700: #434e61;
-$slate-800: #3a4352;
-$slate-900: #343a46;
-$slate-950: #25292e;
-
-/**
-  Spacing
-*/
-$spacer: 1rem;
-$spacers: (
-  0: 0,
-  0\.5: $spacer * 0.125,
-  1: $spacer * 0.25,
-  2: $spacer * 0.5,
-  2\.5: $spacer * 0.75,
-  3: $spacer,
-  4: $spacer * 1.5,
-  4\.5: $spacer * 2,
-  5: $spacer * 3,
-  6: $spacer * 4,
-  7: $spacer * 5,
-  8: $spacer * 8,
-  10: $spacer * 10,
-  14: $spacer * 14,
-  16: $spacer * 16,
-);
-$navbar-dark-active-color: $green;
-$navbar-dark-color: rgba(#fff, 0.75);
-$navbar-dark-hover-color: rgba(#fff, 1);
-$dropdown-dark-bg: $bg-grey;
-$popover-bg: $bg-purple;
-$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
-
-// scss-docs-end font-variables
-
-// scss-docs-start font-sizes
-$font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  5\.5: $font-size-base * 1.125,
-  6: $h6-font-size,
-  7: $font-size-base * 0.875,
-  7\.5: $font-size-base * 0.8125,
-  8: $font-size-base * 0.75,
-  8\.5: $font-size-base * 0.625,
-  9: $font-size-base * 0.5,
-) !default;
-
-// scss-docs-end font-sizes
-
-$input-bg: #ffffff1a;
-$input-border-width: 0;
-$input-group-addon-bg: $input-bg;
-$form-select-indicator-color: $body-color;
-$accordion-button-bg: $bg-purple;
-$accordion-button-active-bg: $bg-purple-active;
-$accordion-button-active-color: $body-color;
-$accordion-bg: $body-bg;
-$accordion-border-radius: 5px;
diff --git a/packages/app/tests/e2e/features/dashboard.spec.ts b/packages/app/tests/e2e/features/dashboard.spec.ts
index b3ef269fe..21c1d6db8 100644
--- a/packages/app/tests/e2e/features/dashboard.spec.ts
+++ b/packages/app/tests/e2e/features/dashboard.spec.ts
@@ -187,7 +187,7 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
 
       const runButton = page
         .locator(
-          '[data-testid="search-submit-button"], button:has-text("Search"), i.bi-play',
+          '[data-testid="search-submit-button"], button:has-text("Search")',
         )
         .first();
       await expect(runButton).toBeVisible();
diff --git a/yarn.lock b/yarn.lock
index aa74ee958..e7ab304f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2750,7 +2750,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.2.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.21.0
   resolution: "@babel/runtime@npm:7.21.0"
   dependencies:
@@ -4453,7 +4453,6 @@ __metadata:
     "@uiw/codemirror-themes": "npm:^4.23.3"
     "@uiw/react-codemirror": "npm:^4.23.3"
     "@xyflow/react": "npm:^12.9.0"
-    bootstrap: "npm:^5.1.3"
     chrono-node: "npm:^2.7.8"
     classnames: "npm:^2.3.1"
     crypto-js: "npm:^4.2.0"
@@ -4489,8 +4488,6 @@ __metadata:
     postcss-preset-mantine: "npm:^1.15.0"
     prettier: "npm:^3.3.2"
     react: "npm:18.3.1"
-    react-bootstrap: "npm:^2.4.0"
-    react-bootstrap-range-slider: "npm:^3.0.8"
     react-copy-to-clipboard: "npm:^5.1.0"
     react-dom: "npm:18.3.1"
     react-error-boundary: "npm:^3.1.4"
@@ -7963,48 +7960,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-aria/ssr@npm:^3.4.1":
-  version: 3.5.0
-  resolution: "@react-aria/ssr@npm:3.5.0"
-  dependencies:
-    "@swc/helpers": "npm:^0.4.14"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
-  checksum: 10c0/d81b7bf30b5fc20e315ff17a4d4daff5535194ac483dee502314dc0cae21fb50954e0fe8a632cc766bf7a16616088f7583d601522dd86b9c3acae2261d115b37
-  languageName: node
-  linkType: hard
-
-"@restart/hooks@npm:^0.4.6, @restart/hooks@npm:^0.4.7":
-  version: 0.4.9
-  resolution: "@restart/hooks@npm:0.4.9"
-  dependencies:
-    dequal: "npm:^2.0.2"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 10c0/2f34918bc3174a399b9d7f0f43abec505a494da33f787e612581a35b71fdc3ca5064772e991ac4a6991db31ce3e1fde0e1facbe24e80489a44e1a09f79d7a619
-  languageName: node
-  linkType: hard
-
-"@restart/ui@npm:^1.4.1":
-  version: 1.6.1
-  resolution: "@restart/ui@npm:1.6.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.20.7"
-    "@popperjs/core": "npm:^2.11.6"
-    "@react-aria/ssr": "npm:^3.4.1"
-    "@restart/hooks": "npm:^0.4.7"
-    "@types/warning": "npm:^3.0.0"
-    dequal: "npm:^2.0.3"
-    dom-helpers: "npm:^5.2.0"
-    uncontrollable: "npm:^7.2.1"
-    warning: "npm:^4.0.3"
-  peerDependencies:
-    react: ">=16.14.0"
-    react-dom: ">=16.14.0"
-  checksum: 10c0/1e0def88033d00ad6b216ad95e292d253271ace3b5ae2e965b4acfbec687b1bc33509072848a535130825c6d72c7b47695a178b28caf4dc4a10a618a9ff9a7d0
-  languageName: node
-  linkType: hard
-
 "@rollup/rollup-android-arm-eabi@npm:4.35.0":
   version: 4.35.0
   resolution: "@rollup/rollup-android-arm-eabi@npm:4.35.0"
@@ -9210,15 +9165,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:^0.4.14":
-  version: 0.4.14
-  resolution: "@swc/helpers@npm:0.4.14"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/a8bd2e291fca73aa35ff316fb1aa9fb9554856518c8bf64ab5a355fb587d79d04d67f95033012fcdc94f507d22484871d95dc72efdd9ff13cc5d0ac68dfba999
-  languageName: node
-  linkType: hard
-
 "@tabler/icons-react@npm:^3.5.0":
   version: 3.5.0
   resolution: "@tabler/icons-react@npm:3.5.0"
@@ -10413,7 +10359,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-transition-group@npm:^4.4.0, @types/react-transition-group@npm:^4.4.4":
+"@types/react-transition-group@npm:^4.4.0":
   version: 4.4.5
   resolution: "@types/react-transition-group@npm:4.4.5"
   dependencies:
@@ -10599,13 +10545,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/warning@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "@types/warning@npm:3.0.0"
-  checksum: 10c0/e2936be93a02b1027e10dfe61e64e426a6996adeff736221a4c3ba47f6e25a1566f65d5183d70992cf5c13ec844280cafc872884b389c02bf04cd86042e2be7b
-  languageName: node
-  linkType: hard
-
 "@types/webidl-conversions@npm:*":
   version: 7.0.0
   resolution: "@types/webidl-conversions@npm:7.0.0"
@@ -12427,15 +12366,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bootstrap@npm:^5.1.3":
-  version: 5.2.3
-  resolution: "bootstrap@npm:5.2.3"
-  peerDependencies:
-    "@popperjs/core": ^2.11.6
-  checksum: 10c0/3db5d1e1047fb17ee5b62d830597424179f9cffd2139a89e932ee6bb66b7ec5bdb519028ec07d633bb1926a7fea6c4b5625846478da272f6aacd74d4920dbeb9
-  languageName: node
-  linkType: hard
-
 "bowser@npm:^2.11.0":
   version: 2.11.0
   resolution: "bowser@npm:2.11.0"
@@ -14718,7 +14648,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-helpers@npm:^5.0.1, dom-helpers@npm:^5.2.0, dom-helpers@npm:^5.2.1":
+"dom-helpers@npm:^5.0.1":
   version: 5.2.1
   resolution: "dom-helpers@npm:5.2.1"
   dependencies:
@@ -24147,18 +24077,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types-extra@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "prop-types-extra@npm:1.1.1"
-  dependencies:
-    react-is: "npm:^16.3.2"
-    warning: "npm:^4.0.0"
-  peerDependencies:
-    react: ">=0.14.0"
-  checksum: 10c0/5521568f331f0ba426681fe368f8d43d58f5f3d7a82cd63411abad579d4ac2e6667dff0f76ace6bf7d61468c490c4201a1f658020fad0fb6bbf77e7902604380
-  languageName: node
-  linkType: hard
-
 "prop-types@npm:15.x, prop-types@npm:^15.0.0, prop-types@npm:^15.5.7, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
@@ -24525,47 +24443,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-bootstrap-range-slider@npm:^3.0.8":
-  version: 3.0.8
-  resolution: "react-bootstrap-range-slider@npm:3.0.8"
-  dependencies:
-    classnames: "npm:^2.3.1"
-    prop-types: "npm:^15.7.2"
-  peerDependencies:
-    react: ">=17.0.0"
-    react-bootstrap: ">=1.0.0"
-    react-dom: ">=17.0.0"
-  checksum: 10c0/508d90bc7e6e15b6d45b95c3805c55f5c1809882b138fe5ed908def3a90ed381195f926f4c6bcc5ff1cf4c94b4a745a8fb256abd1fc0cd3e01494471e06cd5c3
-  languageName: node
-  linkType: hard
-
-"react-bootstrap@npm:^2.4.0":
-  version: 2.7.2
-  resolution: "react-bootstrap@npm:2.7.2"
-  dependencies:
-    "@babel/runtime": "npm:^7.17.2"
-    "@restart/hooks": "npm:^0.4.6"
-    "@restart/ui": "npm:^1.4.1"
-    "@types/react-transition-group": "npm:^4.4.4"
-    classnames: "npm:^2.3.1"
-    dom-helpers: "npm:^5.2.1"
-    invariant: "npm:^2.2.4"
-    prop-types: "npm:^15.8.1"
-    prop-types-extra: "npm:^1.1.0"
-    react-transition-group: "npm:^4.4.2"
-    uncontrollable: "npm:^7.2.1"
-    warning: "npm:^4.0.3"
-  peerDependencies:
-    "@types/react": ">=16.14.8"
-    react: ">=16.14.0"
-    react-dom: ">=16.14.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 10c0/712c98ed14bea14f4aa4fb7af686b959c5d31c57ad95333fdc6ca75a822b3ce948785b89f38465e34687fab75f76f56e6ab765d9e99ba510d451abed41d3898b
-  languageName: node
-  linkType: hard
-
 "react-colorful@npm:^5.1.2":
   version: 5.6.1
   resolution: "react-colorful@npm:5.6.1"
@@ -24744,7 +24621,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1, react-is@npm:^16.3.2, react-is@npm:^16.7.0":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
@@ -24788,13 +24665,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-lifecycles-compat@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "react-lifecycles-compat@npm:3.0.4"
-  checksum: 10c0/1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27
-  languageName: node
-  linkType: hard
-
 "react-markdown@npm:^8.0.4":
   version: 8.0.5
   resolution: "react-markdown@npm:8.0.5"
@@ -25038,7 +24908,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:4.4.5, react-transition-group@npm:^4.3.0, react-transition-group@npm:^4.4.2, react-transition-group@npm:^4.4.5":
+"react-transition-group@npm:4.4.5, react-transition-group@npm:^4.3.0, react-transition-group@npm:^4.4.5":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"
   dependencies:
@@ -28589,20 +28459,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uncontrollable@npm:^7.2.1":
-  version: 7.2.1
-  resolution: "uncontrollable@npm:7.2.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.6.3"
-    "@types/react": "npm:>=16.9.11"
-    invariant: "npm:^2.2.4"
-    react-lifecycles-compat: "npm:^3.0.4"
-  peerDependencies:
-    react: ">=15.0.0"
-  checksum: 10c0/81473e892027a99f1ead6b9afd16db65097651cd36c4b6db710728f206f1fc4b82ba9170ecb4a1127a23857e01ba51c0194d0a7cfeecfea61ba9418e0276cb56
-  languageName: node
-  linkType: hard
-
 "undefsafe@npm:^2.0.5":
   version: 2.0.5
   resolution: "undefsafe@npm:2.0.5"
@@ -29303,15 +29159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.0, warning@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "warning@npm:4.0.3"
-  dependencies:
-    loose-envify: "npm:^1.0.0"
-  checksum: 10c0/aebab445129f3e104c271f1637fa38e55eb25f968593e3825bd2f7a12bd58dc3738bb70dc8ec85826621d80b4acfed5a29ebc9da17397c6125864d72301b937e
-  languageName: node
-  linkType: hard
-
 "watchpack@npm:^2.2.0, watchpack@npm:^2.4.1":
   version: 2.4.1
   resolution: "watchpack@npm:2.4.1"