diff --git a/package.json b/package.json
index eba33f3d5b1..b4c4b28ef55 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "remark-gfm": "^3.0.1",
     "swiper": "^11.1.10",
     "tailwind-merge": "^2.3.0",
+    "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "^3.1.0",
     "yaml-loader": "^0.8.0"
diff --git a/src/@chakra-ui/components/ReactSelect.ts b/src/@chakra-ui/components/ReactSelect.ts
deleted file mode 100644
index 17abb11362f..00000000000
--- a/src/@chakra-ui/components/ReactSelect.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react"
-
-import { reactSelectAnatomyKeys } from "@/components/Select/innerComponents"
-
-const $borderBaseWidth = cssVar("border-base-width")
-
-const { defineMultiStyleConfig, definePartsStyle } =
-  createMultiStyleConfigHelpers(reactSelectAnatomyKeys)
-
-const baseStyle = definePartsStyle({
-  container: {
-    [$borderBaseWidth.variable]: "borders.1px",
-    w: "full",
-    minH: 10.5,
-    cursor: "pointer",
-    position: "relative",
-    zIndex: 1,
-    "& > .react-select__menu": {
-      zIndex: -1,
-    },
-  },
-  control: {
-    border: $borderBaseWidth.reference,
-    borderColor: "currentColor",
-    outlineOffset: "-2px",
-    p: 2,
-    gap: 4,
-    _hover: {
-      color: "primary.base",
-      borderColor: "primary.lowContrast",
-    },
-    "&[data-expanded=true]": {
-      bg: "background.highlight",
-      color: "primary.base",
-      borderColor: "primary.lowContrast",
-    },
-    "&:focus-within:not([data-expanded=true])": {
-      outline: "3px solid",
-      outlineColor: "primary.hover",
-      borderColor: "transparent",
-    },
-  },
-  groupHeading: {
-    color: "body.medium",
-  },
-  indicatorIcon: {
-    fontSize: "sm",
-    transitionProperty: "common",
-    transitionDuration: "normal",
-    "*[data-expanded=true] &": {
-      transform: "rotate(180deg)",
-    },
-  },
-  menuList: {
-    bg: "background.highlight",
-    w: "full",
-    maxH: "xs",
-    overflowY: "auto",
-  },
-  option: {
-    color: "body.base",
-    p: 2,
-    "&[data-focused=true]": {
-      bg: "primary.lowContrast",
-      color: "primary.base",
-    },
-    "&[data-active=true]": {
-      bg: "body.light",
-      color: "primary.visited",
-    },
-  },
-})
-
-const $borderTopRadius = cssVar("border-top-radius")
-
-const variantFlushed = definePartsStyle({
-  container: {
-    [$borderTopRadius.variable]: "radii.base",
-    borderTopRadius: $borderTopRadius.reference,
-  },
-  control: {
-    borderTopRadius: $borderTopRadius.reference,
-    borderTopColor: "transparent",
-    borderInlineColor: "transparent",
-    _hover: {
-      borderTopColor: "transparent",
-      borderInlineColor: "transparent",
-    },
-    "&[data-expanded=true]": {
-      borderColor: "body.light",
-      borderBottomColor: "primary.base",
-    },
-  },
-  menuList: {
-    borderInline: $borderBaseWidth.reference,
-    borderBottom: $borderBaseWidth.reference,
-    borderColor: "body.light",
-    borderBottomRadius: "base",
-  },
-})
-
-const $borderOutlineRadius = cssVar("border-outline-radius")
-
-const variantOutline = definePartsStyle({
-  container: {
-    [$borderOutlineRadius.variable]: "radii.base",
-    borderRadius: $borderOutlineRadius.reference,
-  },
-  control: {
-    borderRadius: $borderOutlineRadius.reference,
-    "&[data-expanded=true]": {
-      borderBottomColor: "transparent",
-      borderBottomRadius: "none",
-    },
-  },
-  menuList: {
-    borderInline: $borderBaseWidth.reference,
-    borderBottom: $borderBaseWidth.reference,
-    borderColor: "primary.lowContrast",
-    borderBottomRadius: "base",
-  },
-})
-
-const variants = {
-  flushed: variantFlushed,
-  outline: variantOutline,
-}
-
-export const ReactSelect = defineMultiStyleConfig({
-  baseStyle,
-  variants,
-  defaultProps: {
-    variant: "flushed",
-  },
-})
diff --git a/src/@chakra-ui/components/index.ts b/src/@chakra-ui/components/index.ts
index 9cf99739fa5..1a1b20cefcf 100644
--- a/src/@chakra-ui/components/index.ts
+++ b/src/@chakra-ui/components/index.ts
@@ -22,7 +22,6 @@ import { Modal } from "./Modal"
 import { Popover } from "./Popover"
 import { Progress } from "./Progress"
 import { Radio } from "./Radio"
-import { ReactSelect } from "./ReactSelect"
 import { Switch } from "./Switch"
 import { Table } from "./Table"
 import { Tabs } from "./Tabs"
@@ -52,7 +51,6 @@ export default {
   Popover,
   Progress,
   Radio,
-  ReactSelect,
   Spinner: spinnerDefaultTheme,
   Switch,
   Table,
diff --git a/src/components/CentralizedExchanges/index.tsx b/src/components/CentralizedExchanges/index.tsx
index 64e4444005d..4898ddd01ad 100644
--- a/src/components/CentralizedExchanges/index.tsx
+++ b/src/components/CentralizedExchanges/index.tsx
@@ -9,7 +9,7 @@ import Emoji from "@/components/Emoji"
 import InlineLink from "@/components/Link"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
-import Select from "@/components/Select"
+import Select from "@/components/ui/Select"
 
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
diff --git a/src/components/FindWallet/LanguageSupportFilter.tsx b/src/components/FindWallet/LanguageSupportFilter.tsx
index fe425fd92de..36f3c567e29 100644
--- a/src/components/FindWallet/LanguageSupportFilter.tsx
+++ b/src/components/FindWallet/LanguageSupportFilter.tsx
@@ -12,7 +12,7 @@ import {
   Text,
 } from "@chakra-ui/react"
 
-import Select from "@/components/Select"
+import Select from "@/components/ui/Select"
 
 import { getLanguageCodeName } from "@/lib/utils/intl"
 import { trackCustomEvent } from "@/lib/utils/matomo"
diff --git a/src/components/Layer2/Layer2Onboard.tsx b/src/components/Layer2/Layer2Onboard.tsx
index cfce20bb152..309abd4de59 100644
--- a/src/components/Layer2/Layer2Onboard.tsx
+++ b/src/components/Layer2/Layer2Onboard.tsx
@@ -26,7 +26,7 @@ import { ButtonLink } from "../Buttons"
 import InlineLink from "../Link"
 import OldHeading from "../OldHeading"
 import Text from "../OldText"
-import Select, { SelectOnChange } from "../Select"
+import Select, { SelectOnChange } from "../ui/Select"
 
 const Flex50 = (props: ChildOnlyProp) => (
   <Box flex={{ base: "100%", md: "50%" }} {...props} />
diff --git a/src/components/Select/context.ts b/src/components/Select/context.ts
deleted file mode 100644
index e579cdcf622..00000000000
--- a/src/components/Select/context.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createStylesContext, type SystemStyleObject } from "@chakra-ui/react"
-
-import { reactSelectAnatomyKeys } from "./innerComponents"
-
-const [ReactSelectStylesProvider, useReactSelectStyles] =
-  createStylesContext("ReactSelect")
-
-export const SelectStylesProvider = ReactSelectStylesProvider
-
-export const useSelectStyles = useReactSelectStyles as () => Record<
-  (typeof reactSelectAnatomyKeys)[number],
-  SystemStyleObject
->
diff --git a/src/components/Select/innerComponents.tsx b/src/components/Select/innerComponents.tsx
deleted file mode 100644
index f9ba42f5aec..00000000000
--- a/src/components/Select/innerComponents.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import * as React from "react"
-import { FaChevronDown } from "react-icons/fa"
-import type {
-  ContainerProps,
-  ControlProps,
-  DropdownIndicatorProps,
-  GroupBase,
-  GroupProps,
-  MenuListProps,
-  OptionProps,
-} from "react-select"
-import { Box, Center, HStack, Icon } from "@chakra-ui/react"
-
-import { useSelectStyles } from "./context"
-
-export const reactSelectAnatomyKeys = [
-  "container",
-  "control",
-  "indicatorIcon",
-  "menuList",
-  "option",
-  "groupHeading",
-] as const
-
-export const nullop = () => null
-
-/*
- * Note on the Generic declarations:
- * Because the custom components are being created outside of the `components`
- * prop, generics sent to the respective props have to be redeclared, else type
- * errors throw for incompatibility.
- */
-
-const SelectContainer = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
->(
-  props: ContainerProps<Option, IsMulti, Group>
-) => {
-  const { innerProps, children, className, selectProps } = props
-  const { menuIsOpen } = selectProps
-
-  const styles = useSelectStyles()
-  return (
-    <Box
-      className={className}
-      data-expanded={menuIsOpen}
-      {...innerProps}
-      id="react-select-container"
-      sx={styles.container}
-    >
-      {children}
-    </Box>
-  )
-}
-
-const Control = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
->(
-  props: ControlProps<Option, IsMulti, Group>
-) => {
-  const { innerProps, innerRef, children, menuIsOpen } = props
-
-  const styles = useSelectStyles()
-  return (
-    <HStack
-      ref={innerRef}
-      data-expanded={menuIsOpen}
-      sx={styles.control}
-      {...innerProps}
-      id="react-select-control"
-    >
-      {children}
-    </HStack>
-  )
-}
-
-const DropdownIndicator = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
->(
-  props: DropdownIndicatorProps<Option, IsMulti, Group>
-) => {
-  const { innerProps } = props
-  const styles = useSelectStyles()
-  return (
-    <Center
-      {...innerProps}
-      id="react-select-dropdown-indicator"
-      sx={styles.indicatorIcon}
-    >
-      <Icon as={FaChevronDown} />
-    </Center>
-  )
-}
-const MenuList = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
->(
-  props: MenuListProps<Option, IsMulti, Group>
-) => {
-  const { innerProps, innerRef, children } = props
-  const styles = useSelectStyles()
-  return (
-    <Box
-      ref={innerRef}
-      {...innerProps}
-      id="react-select-menu-list"
-      sx={styles.menuList}
-    >
-      {children}
-    </Box>
-  )
-}
-
-const Option = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
->(
-  props: OptionProps<Option, IsMulti, Group>
-) => {
-  const { innerProps, innerRef, children, isSelected, isFocused } = props
-
-  const styles = useSelectStyles()
-  return (
-    <Box
-      ref={innerRef}
-      data-focused={isFocused}
-      data-active={isSelected}
-      {...innerProps}
-      id="react-select-option"
-      sx={styles.option}
-    >
-      {children}
-    </Box>
-  )
-}
-
-const Group = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option>,
->(
-  props: GroupProps<Option, IsMulti, Group>
-) => {
-  const { children, headingProps, label } = props
-
-  const styles = useSelectStyles()
-
-  const notFirstGroupStyles = {
-    _notFirst: {
-      borderTop: "1px",
-      borderColor: "primary.lowContrast",
-    },
-  }
-
-  const PARENT_ID = "react-select-group"
-
-  if (!label) {
-    return (
-      <Box id={PARENT_ID} {...notFirstGroupStyles}>
-        {children}
-      </Box>
-    )
-  }
-
-  return (
-    <Box id={PARENT_ID} p={2} {...notFirstGroupStyles}>
-      <Box fontSize="sm">
-        <Box id={headingProps.id} sx={styles.groupHeading}>
-          {label}
-        </Box>
-      </Box>
-      {children}
-    </Box>
-  )
-}
-
-export const components = {
-  SelectContainer,
-  Control,
-  // Essentially removes this component from default render
-  IndicatorSeparator: nullop,
-  DropdownIndicator,
-  MenuList,
-  Option,
-  Group,
-}
diff --git a/src/components/Staking/StakingLaunchpadWidget.tsx b/src/components/Staking/StakingLaunchpadWidget.tsx
index 803d79afbe0..4d8ccb7dfd8 100644
--- a/src/components/Staking/StakingLaunchpadWidget.tsx
+++ b/src/components/Staking/StakingLaunchpadWidget.tsx
@@ -9,7 +9,7 @@ import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
-import Select, { type SelectOnChange } from "../Select"
+import Select, { type SelectOnChange } from "../ui/Select"
 
 type StakingDataOption = { label: string; value: string }
 
diff --git a/src/components/Select/index.tsx b/src/components/ui/Select/index.tsx
similarity index 71%
rename from src/components/Select/index.tsx
rename to src/components/ui/Select/index.tsx
index 3e611a532cb..8f907c8a57c 100644
--- a/src/components/Select/index.tsx
+++ b/src/components/ui/Select/index.tsx
@@ -1,8 +1,15 @@
-import ReactSelect, { ActionMeta, GroupBase, Props } from "react-select"
-import { ThemingProps, useMultiStyleConfig } from "@chakra-ui/react"
+import ReactSelect, {
+  type ActionMeta,
+  type GroupBase,
+  type Props,
+} from "react-select"
 
-import { SelectStylesProvider } from "./context"
-import { components } from "./innerComponents"
+import {
+  components,
+  SelectStylesContext,
+  type SelectVariants,
+  selectVariants,
+} from "./innerComponents"
 
 /**
  * Type for onChange handler in the `Select` component
@@ -23,11 +30,11 @@ export type SelectOnChange<Option> = (
 /**
  * Custom Built Version of the `react-select` single-select component.
  *
- * A styles provider wraps the original `Select` to send Chakra styles straight to the
+ * A styles provider wraps the original `Select` to send Tailwind styles straight to the
  * custom internal components which are code-split into their own file.
  * See `./innerComponents.tsx`
  *
- * You can use the Chakra `variant` prop to declare a variant from the extended theme,
+ * You can use the `variant` prop from tailwind-variants to declare a variant from the extended theme,
  * and use any valid props sent to the `Select` component.
  *
  * @see {@link https://react-select.com/props#select-props} for the list of valid props
@@ -41,14 +48,11 @@ const Select = <
 >({
   variant,
   ...rest
-}: Omit<Props<Option, IsMulti, Group>, "unstyled" | "menuPlacement"> & {
-  variant?: ThemingProps<"ReactSelect">["variant"]
-}) => {
-  const styles = useMultiStyleConfig("ReactSelect", {
-    variant,
-  })
+}: Omit<Props<Option, IsMulti, Group>, "unstyled" | "menuPlacement"> &
+  SelectVariants) => {
+  const styles = selectVariants({ variant })
   return (
-    <SelectStylesProvider value={styles}>
+    <SelectStylesContext.Provider value={styles}>
       <ReactSelect
         components={components}
         styles={{
@@ -63,7 +67,7 @@ const Select = <
         unstyled
         menuPlacement="bottom"
       />
-    </SelectStylesProvider>
+    </SelectStylesContext.Provider>
   )
 }
 
diff --git a/src/components/ui/Select/innerComponents.tsx b/src/components/ui/Select/innerComponents.tsx
new file mode 100644
index 00000000000..a3d0212f3d9
--- /dev/null
+++ b/src/components/ui/Select/innerComponents.tsx
@@ -0,0 +1,248 @@
+import { createContext, useContext } from "react"
+import { FaChevronDown } from "react-icons/fa"
+import type {
+  ContainerProps,
+  ControlProps,
+  DropdownIndicatorProps,
+  GroupBase,
+  GroupProps,
+  MenuListProps,
+  MenuProps,
+  OptionProps,
+} from "react-select"
+import { tv, type VariantProps } from "tailwind-variants"
+
+import { cn } from "@/lib/utils/cn"
+
+export const selectVariants = tv({
+  slots: {
+    container:
+      "w-full min-h-10.5 [--border-base-width:1px] relative z-[1] cursor-pointer",
+    control:
+      "p-2 flex items-center gap-4 border-[length:var(--border-base-width)] border-current text-[color:var(--my-var)] not-[[data-expanded=true]]:focus-within:outline-3 not-[[data-expanded=true]]:focus-within:outline-primary-hover not-[[data-expanded=true]]:focus-within:outline -outline-offset-2 [&[data-expanded=true]]:bg-background-highlight [&[data-expanded=true]]:text-primary [&[data-expanded=true]]:border-primary-low-contrast hover:text-primary hover:border-primary-low-contrast",
+    indicatorIcon:
+      "text-sm leading-none transition-transform [*[data-expanded=true]_&]:rotate-180",
+    menu: "-z-[1] absolute w-full",
+    menuList:
+      "overflow-y-auto bg-background-highlight w-full max-h-80 border-x-[length:--border-base-width] border-b-[length:--border-base-width] rounded-b",
+    option:
+      "text-body p-2 [&[data-focused=true]]:bg-primary-low-contrast [&[data-focused=true]]:text-primary [&[data-active=true]]:bg-body-light [&[data-active=true]]:text-primary-visited",
+    groupHeading: "text-body-medium text-xs",
+  },
+  variants: {
+    variant: {
+      flushed: {
+        container: "[--border-top-radius:4px] rounded-t-[--border-top-radius]",
+        control:
+          "border-t-transparent border-x-transparent rounded-t-[--border-top-radius] hover:border-t-transparent hover:border-x-transparent [&[data-expanded=true]]:border-body-light [&[data-expanded=true]]:border-b-primary",
+        menuList: "border-body-light",
+      },
+      outline: {
+        container:
+          "[--border-outline-radius:4px] rounded-[--border-outline-radius]",
+        control:
+          "rounded-[--border-outline-radius] [&[data-expanded=true]]:border-b-transparent [&[data-expanded=true]]:rounded-b-none",
+        menuList: "border-primary-low-contrast",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "flushed",
+  },
+})
+
+export type SelectVariants = VariantProps<typeof selectVariants>
+
+export const SelectStylesContext = createContext(selectVariants())
+
+const useSelectStyles = () => useContext(SelectStylesContext)
+
+export const nullop = () => null
+
+/*
+ * Note on the Generic declarations:
+ * Because the custom components are being created outside of the `components`
+ * prop, generics sent to the respective props have to be redeclared, else type
+ * errors throw for incompatibility.
+ */
+
+const SelectContainer = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>(
+  props: ContainerProps<Option, IsMulti, Group>
+) => {
+  const { innerProps, children, className, selectProps } = props
+  const { menuIsOpen } = selectProps
+
+  const { container } = useSelectStyles()
+  return (
+    <div
+      className={cn(container(), className)}
+      data-expanded={menuIsOpen}
+      {...innerProps}
+      id="react-select-container"
+    >
+      {children}
+    </div>
+  )
+}
+
+const Control = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>(
+  props: ControlProps<Option, IsMulti, Group>
+) => {
+  const { innerProps, innerRef, children, menuIsOpen } = props
+
+  const { control } = useSelectStyles()
+  return (
+    <div
+      ref={innerRef}
+      className={control()}
+      data-expanded={menuIsOpen}
+      {...innerProps}
+      id="react-select-control"
+    >
+      {children}
+    </div>
+  )
+}
+
+const DropdownIndicator = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>(
+  props: DropdownIndicatorProps<Option, IsMulti, Group>
+) => {
+  const { innerProps } = props
+  const { indicatorIcon } = useSelectStyles()
+  return (
+    <div
+      {...innerProps}
+      className={indicatorIcon()}
+      id="react-select-dropdown-indicator"
+    >
+      <FaChevronDown />
+    </div>
+  )
+}
+
+const Menu = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>({
+  children,
+  innerProps,
+  innerRef,
+}: MenuProps<Option, IsMulti, Group>) => {
+  const { menu } = useSelectStyles()
+  return (
+    <div
+      ref={innerRef}
+      className={menu()}
+      id="react-select-menu"
+      {...innerProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+const MenuList = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>(
+  props: MenuListProps<Option, IsMulti, Group>
+) => {
+  const { innerProps, innerRef, children } = props
+  const { menuList } = useSelectStyles()
+  return (
+    <div
+      ref={innerRef}
+      {...innerProps}
+      className={menuList()}
+      id="react-select-menu-list"
+    >
+      {children}
+    </div>
+  )
+}
+
+const Option = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>(
+  props: OptionProps<Option, IsMulti, Group>
+) => {
+  const { innerProps, innerRef, children, isSelected, isFocused } = props
+
+  const { option } = useSelectStyles()
+  return (
+    <div
+      ref={innerRef}
+      data-focused={isFocused}
+      data-active={isSelected}
+      {...innerProps}
+      className={option()}
+      id="react-select-option"
+    >
+      {children}
+    </div>
+  )
+}
+
+const Group = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>(
+  props: GroupProps<Option, IsMulti, Group>
+) => {
+  const { children, headingProps, label } = props
+
+  const { groupHeading } = useSelectStyles()
+
+  const notFirstGroupClasses =
+    "not-[:first-of-type]:border-t-[1px] not-[:first-of-type]:border-primary-low-contrast"
+
+  const PARENT_ID = "react-select-group"
+
+  if (!label) {
+    return (
+      <div id={PARENT_ID} className={notFirstGroupClasses}>
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <div id={PARENT_ID} className={cn("p-2", notFirstGroupClasses)}>
+      <div className="text-sm">
+        <div id={headingProps.id} className={groupHeading()}>
+          {label}
+        </div>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export const components = {
+  SelectContainer,
+  Control,
+  // Essentially removes this component from default render
+  IndicatorSeparator: nullop,
+  DropdownIndicator,
+  Menu,
+  MenuList,
+  Option,
+  Group,
+}
diff --git a/src/components/Select/Select.stories.tsx b/src/components/ui/__stories__/Select.stories.tsx
similarity index 76%
rename from src/components/Select/Select.stories.tsx
rename to src/components/ui/__stories__/Select.stories.tsx
index 48e35ad2b28..1a270d5b091 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/ui/__stories__/Select.stories.tsx
@@ -1,16 +1,20 @@
-import { Box, HStack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import Select from "."
+import { HStack } from "../flex"
+import Select from "../Select"
 
 const meta = {
   title: "Atoms / Form / Dropdown",
   component: Select,
+  parameters: {
+    // TODO: Remove this when this story file becomes the primary one
+    chromatic: { disableSnapshot: true },
+  },
   decorators: [
     (Story) => (
-      <Box w="lg">
+      <div className="w-[32rem]">
         <Story />
-      </Box>
+      </div>
     ),
   ],
 } satisfies Meta<typeof Select>
@@ -40,7 +44,7 @@ export const Dropdown: Story = {
     ],
   },
   render: (args) => (
-    <HStack spacing={4}>
+    <HStack className="gap-4">
       <Select {...args} />
       <Select {...args} variant="outline" />
     </HStack>
diff --git a/src/hooks/useCentralizedExchanges.ts b/src/hooks/useCentralizedExchanges.ts
index c4122926eeb..e864dc4b907 100644
--- a/src/hooks/useCentralizedExchanges.ts
+++ b/src/hooks/useCentralizedExchanges.ts
@@ -12,7 +12,7 @@ import { useTranslation } from "next-i18next"
 // import squarelink from "@/public/images/wallets/squarelink.png"
 // import trust from "@/public/images/wallets/trust.png"
 import type { ImageProps } from "@/components/Image"
-import { SelectOnChange } from "@/components/Select"
+import { SelectOnChange } from "@/components/ui/Select"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
diff --git a/yarn.lock b/yarn.lock
index 3b7c075e1a8..9e79c0da5d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13088,6 +13088,7 @@ prelude-ls@^1.2.1:
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
 "prettier-fallback@npm:prettier@^3", prettier@^3.1.1:
+  name prettier-fallback
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a"
   integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==
@@ -14726,11 +14727,23 @@ swiper@^11.1.10:
   resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.1.10.tgz#4d3df50ff8afc4960e9644ed6e5828d35ab38853"
   integrity sha512-pAVM6vCb6bumj2B9aSh67l3wP1j5YR8dPQM1YhQKMpnBc33vs+RpyVz6NZYZl/ZopCBSYbbWK5nvESwbmU0QXQ==
 
+tailwind-merge@^2.2.0:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.2.tgz#000f05a703058f9f9f3829c644235f81d4c08a1f"
+  integrity sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==
+
 tailwind-merge@^2.3.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.4.0.tgz#1345209dc1f484f15159c9180610130587703042"
   integrity sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==
 
+tailwind-variants@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tailwind-variants/-/tailwind-variants-0.2.1.tgz#132f2537b0150819036f6c4f47d5c50b929b758d"
+  integrity sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==
+  dependencies:
+    tailwind-merge "^2.2.0"
+
 tailwindcss-animate@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"