diff --git a/apps/site/next.config.mjs b/apps/site/next.config.mjs
index 19b731e36d388..955a4926d8f44 100644
--- a/apps/site/next.config.mjs
+++ b/apps/site/next.config.mjs
@@ -84,7 +84,6 @@ const nextConfig = {
       '@radix-ui/react-accessible-icon',
       '@radix-ui/react-dropdown-menu',
       '@radix-ui/react-label',
-      '@radix-ui/react-scroll-area',
       '@radix-ui/react-select',
       '@radix-ui/react-slot',
       '@radix-ui/react-tabs',
diff --git a/package-lock.json b/package-lock.json
index 7b0a40f21c144..ac886e0c22a66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4960,37 +4960,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-scroll-area": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.3.tgz",
-      "integrity": "sha512-l7+NNBfBYYJa9tNqVcP2AGvxdE3lmE6kFTBXdvHgUaZuy+4wGCL1Cl2AfaR7RKyimj7lZURGLwFO59k4eBnDJQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/number": "1.1.0",
-        "@radix-ui/primitive": "1.1.1",
-        "@radix-ui/react-compose-refs": "1.1.1",
-        "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-direction": "1.1.0",
-        "@radix-ui/react-presence": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.2",
-        "@radix-ui/react-use-callback-ref": "1.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.6.tgz",
@@ -25382,7 +25351,6 @@
         "@radix-ui/react-dialog": "^1.1.7",
         "@radix-ui/react-dropdown-menu": "~2.1.6",
         "@radix-ui/react-label": "~2.1.2",
-        "@radix-ui/react-scroll-area": "~1.2.3",
         "@radix-ui/react-select": "~2.1.6",
         "@radix-ui/react-tabs": "~1.1.3",
         "@radix-ui/react-toast": "~1.2.6",
diff --git a/packages/ui-components/Common/Select/index.module.css b/packages/ui-components/Common/Select/index.module.css
index 55d76484b0989..ed4f05e834bdb 100644
--- a/packages/ui-components/Common/Select/index.module.css
+++ b/packages/ui-components/Common/Select/index.module.css
@@ -151,3 +151,11 @@
       rounded;
   }
 }
+
+.scrollIcon {
+  @apply mx-auto
+    my-1
+    size-4
+    text-neutral-700
+    dark:text-neutral-200;
+}
diff --git a/packages/ui-components/Common/Select/index.stories.tsx b/packages/ui-components/Common/Select/index.stories.tsx
index 23a1bede20d45..7af58fe7c5bee 100644
--- a/packages/ui-components/Common/Select/index.stories.tsx
+++ b/packages/ui-components/Common/Select/index.stories.tsx
@@ -21,6 +21,13 @@ export const WithoutLabel: Story = {
   },
 };
 
+export const WithScrollButtons: Story = {
+  args: {
+    values: Array.from({ length: 100 }, (_, i) => `Item ${i}`),
+    defaultValue: 'Item 50',
+  },
+};
+
 export const DropdownLabel: Story = {
   args: {
     values: [
diff --git a/packages/ui-components/Common/Select/index.tsx b/packages/ui-components/Common/Select/index.tsx
index 88df36658e897..66060a782dbe1 100644
--- a/packages/ui-components/Common/Select/index.tsx
+++ b/packages/ui-components/Common/Select/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import * as ScrollPrimitive from '@radix-ui/react-scroll-area';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import classNames from 'classnames';
 import { useEffect, useId, useMemo, useState } from 'react';
@@ -168,16 +167,15 @@ const Select = <T extends string>({
                 [styles.inline]: inline,
               })}
             >
-              <ScrollPrimitive.Root type="auto">
-                <SelectPrimitive.Viewport>
-                  <ScrollPrimitive.Viewport>
-                    {memoizedMappedValues}
-                  </ScrollPrimitive.Viewport>
-                </SelectPrimitive.Viewport>
-                <ScrollPrimitive.Scrollbar orientation="vertical">
-                  <ScrollPrimitive.Thumb />
-                </ScrollPrimitive.Scrollbar>
-              </ScrollPrimitive.Root>
+              <SelectPrimitive.ScrollUpButton>
+                <ChevronUpIcon className={styles.scrollIcon} />
+              </SelectPrimitive.ScrollUpButton>
+              <SelectPrimitive.Viewport>
+                {memoizedMappedValues}
+              </SelectPrimitive.Viewport>
+              <SelectPrimitive.ScrollDownButton>
+                <ChevronDownIcon className={styles.scrollIcon} />
+              </SelectPrimitive.ScrollDownButton>
             </SelectPrimitive.Content>
           </SelectPrimitive.Portal>
         </SelectPrimitive.Root>
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 6032e9b19ad96..d2f7820e1db31 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -21,7 +21,6 @@
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-dropdown-menu": "~2.1.6",
     "@radix-ui/react-label": "~2.1.2",
-    "@radix-ui/react-scroll-area": "~1.2.3",
     "@radix-ui/react-select": "~2.1.6",
     "@radix-ui/react-tabs": "~1.1.3",
     "@radix-ui/react-toast": "~1.2.6",