diff --git a/packages/design-system/src/components/select.tsx b/packages/design-system/src/components/select.tsx
index b069833161..d3c88bf62b 100644
--- a/packages/design-system/src/components/select.tsx
+++ b/packages/design-system/src/components/select.tsx
@@ -7,8 +7,7 @@ import {
   forwardRef,
   useState,
 } from "react";
-import { ChevronDownIcon, ChevronUpIcon } from "@webstudio-is/icons";
-import { rawTheme, styled, theme } from "../stitches.config";
+import { styled, theme } from "../stitches.config";
 import {
   menuCss,
   menuItemCss,
@@ -19,6 +18,7 @@ import {
 } from "./menu";
 import { SelectButton } from "./select-button";
 import { Box } from "./box";
+import { ScrollArea } from "./scroll-area";
 
 export const SelectContent = styled(Primitive.Content, menuCss, {
   "&[data-side=top]": {
@@ -243,41 +243,43 @@ const SelectBase = <Option,>(
       </Primitive.Trigger>
       <Primitive.Portal>
         <SelectContent position="popper">
-          <SelectScrollUpButton css={{ order: 1 }}>
-            <ChevronUpIcon />
-          </SelectScrollUpButton>
-
-          <SelectViewport style={{ order: 1, maxHeight: rawTheme.spacing[34] }}>
-            {children ||
-              options.map((option, index) => {
-                const value = getValue(option) ?? "";
-                const { textValue, ...rest } = getItemProps?.(option) ?? {};
-                return (
-                  <SelectItem
-                    key={value ?? index}
-                    value={value}
-                    textValue={textValue ?? value}
-                    onFocus={() => {
-                      onItemHighlight?.(option);
-                      setHighlightedItem(option);
-                    }}
-                    onBlur={() => {
-                      onItemHighlight?.(undefined);
-                      setHighlightedItem(undefined);
-                    }}
-                    text="sentence"
-                    {...rest}
-                  >
-                    {getLabel(option)}
-                  </SelectItem>
-                );
-              })}
-          </SelectViewport>
-
-          <SelectScrollDownButton css={{ order: 2 }}>
-            <ChevronDownIcon />
-          </SelectScrollDownButton>
-
+          <Box
+            css={{
+              display: "flex",
+              flexDirection: "column",
+              maxHeight: theme.spacing[34],
+              order: 1,
+            }}
+          >
+            <ScrollArea>
+              <SelectViewport>
+                {children ||
+                  options.map((option, index) => {
+                    const value = getValue(option) ?? "";
+                    const { textValue, ...rest } = getItemProps?.(option) ?? {};
+                    return (
+                      <SelectItem
+                        key={value ?? index}
+                        value={value}
+                        textValue={textValue ?? value}
+                        onFocus={() => {
+                          onItemHighlight?.(option);
+                          setHighlightedItem(option);
+                        }}
+                        onBlur={() => {
+                          onItemHighlight?.(undefined);
+                          setHighlightedItem(undefined);
+                        }}
+                        text="sentence"
+                        {...rest}
+                      >
+                        {getLabel(option)}
+                      </SelectItem>
+                    );
+                  })}
+              </SelectViewport>
+            </ScrollArea>
+          </Box>
           {description && (
             <SelectItemDescription descriptions={descriptions}>
               {description}