diff --git a/src/components/color-picker/gradient-select/GradientSelect.tsx b/src/components/color-picker/gradient-select/GradientSelect.tsx
index 11376ebd..5ba4c095 100644
--- a/src/components/color-picker/gradient-select/GradientSelect.tsx
+++ b/src/components/color-picker/gradient-select/GradientSelect.tsx
@@ -1,7 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import * as Select from '@radix-ui/react-select';
+import { Button, MenuItem } from '@blueprintjs/core';
+import { ItemRenderer, Select } from '@blueprintjs/select';
 import * as scaleChromatic from 'd3-scale-chromatic';
 import { FaChevronDown } from 'react-icons/fa';
 
@@ -53,86 +54,58 @@ export interface GradientSelectProps {
   value: GradientScaleName;
   onChange: (value: GradientScaleName) => void;
 }
-
+const renderItem: ItemRenderer<GradientScaleName> = (
+  option,
+  { handleClick, handleFocus, modifiers },
+) => {
+  if (!modifiers.matchesPredicate) {
+    return null;
+  }
+  return (
+    <MenuItem
+      active={modifiers.active}
+      key={option}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      roleStructure="listoption"
+      text={
+        <div>
+          {option}
+          <GradientSelectOption>
+            <div style={{ height: 15 }}>
+              <FixedGradientPreview gradient={option} />
+            </div>
+          </GradientSelectOption>
+        </div>
+      }
+    />
+  );
+};
 export function GradientSelect(props: GradientSelectProps) {
   const { value, onChange } = props;
   return (
     <GradientSelectListbox>
-      <Select.Root value={value} onValueChange={onChange}>
-        <Select.Trigger
+      <Select
+        popoverProps={{ matchTargetWidth: true }}
+        activeItem={value}
+        onItemSelect={onChange}
+        items={scaleOptions}
+        itemRenderer={renderItem}
+        filterable={false}
+        fill
+      >
+        <Button
           css={css`
             width: 100%;
             height: 30px;
             padding: 4px;
+            display: block;
           `}
         >
-          <Select.Value>
-            <FixedGradientPreview gradient={value} />
-            <GradientSelectChevron />
-          </Select.Value>
-        </Select.Trigger>
-        <Select.Portal>
-          <Select.Content
-            position="popper"
-            sideOffset={10}
-            css={css`
-              background-color: white;
-              width: var(--radix-select-trigger-width);
-              border: 1px solid darkgray;
-              border-radius: 0.25rem;
-              padding: 4px;
-            `}
-          >
-            <Select.Viewport>
-              {scaleOptions.map((option) => (
-                <Select.Item
-                  key={option}
-                  value={option}
-                  css={css`
-                    outline: none;
-                    padding: 8px 0 8px 0;
-                    cursor: pointer;
-                    margin-left: 20px;
-                    &[data-state='checked'] {
-                      font-weight: bold;
-                    }
-                    &[data-state='unchecked'] {
-                      opacity: 1;
-                    }
-
-                    &:not([data-highlighted]) span {
-                      margin-left: 12px;
-                    }
-                    &[data-highlighted] {
-                      span {
-                        margin-left: 4px;
-                      }
-                      ::before {
-                        content: '';
-                        display: inline-block;
-                        width: 8px;
-                        height: 8px;
-                        border-radius: 1px;
-                        filter: brightness(60%);
-                        background-color: dimgray;
-                      }
-                    }
-                  `}
-                >
-                  <Select.ItemText>
-                    {option}
-                    <GradientSelectOption>
-                      <div style={{ height: 15 }}>
-                        <FixedGradientPreview gradient={option} />
-                      </div>
-                    </GradientSelectOption>
-                  </Select.ItemText>
-                </Select.Item>
-              ))}
-            </Select.Viewport>
-          </Select.Content>
-        </Select.Portal>
-      </Select.Root>
+          <FixedGradientPreview gradient={value} />
+          <GradientSelectChevron />
+        </Button>
+      </Select>
     </GradientSelectListbox>
   );
 }