diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdownMenuButton.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdownMenuButton.tsx
index 781565d29d..dac4f076ec 100644
--- a/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdownMenuButton.tsx
+++ b/packages/smarthr-ui/src/components/AppNavi/AppNaviDropdownMenuButton.tsx
@@ -10,7 +10,7 @@ import { tv } from 'tailwind-variants'
 
 import { AnchorButton, Button, UnstyledButton } from '../Button'
 import { RemoteDialogTrigger } from '../Dialog'
-import { Dropdown, DropdownContent, DropdownScrollArea, DropdownTrigger } from '../Dropdown'
+import { Dropdown, DropdownContent, DropdownTrigger } from '../Dropdown'
 import { dropdownMenuButton } from '../Dropdown/DropdownMenuButton/DropdownMenuButton'
 import { FaCaretDownIcon } from '../Icon'
 
@@ -69,9 +69,7 @@ export const AppNaviDropdownMenuButton: FC<AppNaviDropdownMenuButtonProps> = ({
         </UnstyledButton>
       </DropdownTrigger>
       <DropdownContent>
-        <DropdownScrollArea as="ul" className={actionListStyle()}>
-          {actualChildren}
-        </DropdownScrollArea>
+        <ul className={actionListStyle()}>{actualChildren}</ul>
       </DropdownContent>
     </Dropdown>
   )
diff --git a/packages/smarthr-ui/src/components/Dropdown/Dropdown.stories.tsx b/packages/smarthr-ui/src/components/Dropdown/Dropdown.stories.tsx
index 38a8cbd692..0ab26346b5 100644
--- a/packages/smarthr-ui/src/components/Dropdown/Dropdown.stories.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/Dropdown.stories.tsx
@@ -17,7 +17,6 @@ import { Dropdown } from './Dropdown'
 import { DropdownCloser } from './DropdownCloser'
 import { DropdownContent } from './DropdownContent'
 import { DropdownMenuButton } from './DropdownMenuButton'
-import { DropdownScrollArea } from './DropdownScrollArea'
 import { DropdownTrigger } from './DropdownTrigger'
 import { FilterDropdown } from './FilterDropdown'
 import { SortDropdown } from './SortDropdown'
@@ -32,7 +31,6 @@ export default {
     DropdownTrigger,
     DropdownContent,
     DropdownCloser,
-    DropdownScrollArea,
   },
   parameters: {
     withTheming: true,
@@ -72,65 +70,61 @@ export const ControllableDropdown = () => {
           <TriggerButton data-test="controlled-dropdown-trigger">制御された Dropdown</TriggerButton>
         </DropdownTrigger>
         <DropdownContent controllable>
-          <DropdownScrollArea>
-            <ControllableBoxDiv>
-              <Fieldset title="Dropdown内部">
-                <Text as="p">
-                  `DropdownControllableContent` を使うとドロップダウン制御できます。
-                </Text>
-                <Text as="p">
-                  制御されたドロップダウン内のコンテンツをクリックしても、ドロップダウンは閉じません。
-                  <br />
-                  ドロップダウンを閉じたいときは、`DropdownCloser` を使います。
-                </Text>
-                <Stack align="flex-start">
-                  <RadioButtonList>
-                    <li>
-                      <RadioButton name="hoge" checked={value === 'hoge'} onChange={onChangeValue}>
-                        hoge
-                      </RadioButton>
-                    </li>
-                    <li>
-                      <RadioButton name="fuga" checked={value === 'fuga'} onChange={onChangeValue}>
-                        fuga
-                      </RadioButton>
-                    </li>
-                    <li>
-                      <RadioButton name="piyo" checked={value === 'piyo'} onChange={onChangeValue}>
-                        piyo
-                      </RadioButton>
-                    </li>
-                  </RadioButtonList>
-                  <Input name="test" value={text} onChange={onChangeText} title="test" />
-                  <DropdownCloser>
-                    <Button
-                      onClick={() => setIsDialogOpen(true)}
-                      aria-controls="dropdown-dialog"
-                      aria-haspopup="dialog"
-                      data-test="dropdown-dialog-trigger"
-                    >
-                      ダイアログを開く
-                    </Button>
-                  </DropdownCloser>
-                </Stack>
-              </Fieldset>
-            </ControllableBoxDiv>
-            <ControllableBoxBottom>
-              <Cluster justify="flex-end">
-                <DropdownCloser>
-                  <Button>Close only</Button>
-                </DropdownCloser>
+          <ControllableBoxDiv>
+            <Fieldset title="Dropdown内部">
+              <Text as="p">`DropdownControllableContent` を使うとドロップダウン制御できます。</Text>
+              <Text as="p">
+                制御されたドロップダウン内のコンテンツをクリックしても、ドロップダウンは閉じません。
+                <br />
+                ドロップダウンを閉じたいときは、`DropdownCloser` を使います。
+              </Text>
+              <Stack align="flex-start">
+                <RadioButtonList>
+                  <li>
+                    <RadioButton name="hoge" checked={value === 'hoge'} onChange={onChangeValue}>
+                      hoge
+                    </RadioButton>
+                  </li>
+                  <li>
+                    <RadioButton name="fuga" checked={value === 'fuga'} onChange={onChangeValue}>
+                      fuga
+                    </RadioButton>
+                  </li>
+                  <li>
+                    <RadioButton name="piyo" checked={value === 'piyo'} onChange={onChangeValue}>
+                      piyo
+                    </RadioButton>
+                  </li>
+                </RadioButtonList>
+                <Input name="test" value={text} onChange={onChangeText} title="test" />
                 <DropdownCloser>
-                  <Button variant="primary" onClick={action('clicked button 1')}>
-                    Action and close
+                  <Button
+                    onClick={() => setIsDialogOpen(true)}
+                    aria-controls="dropdown-dialog"
+                    aria-haspopup="dialog"
+                    data-test="dropdown-dialog-trigger"
+                  >
+                    ダイアログを開く
                   </Button>
                 </DropdownCloser>
-                <Button variant="primary" onClick={action('clicked button 2')}>
-                  Action only
+              </Stack>
+            </Fieldset>
+          </ControllableBoxDiv>
+          <ControllableBoxBottom>
+            <Cluster justify="flex-end">
+              <DropdownCloser>
+                <Button>Close only</Button>
+              </DropdownCloser>
+              <DropdownCloser>
+                <Button variant="primary" onClick={action('clicked button 1')}>
+                  Action and close
                 </Button>
-              </Cluster>
-            </ControllableBoxBottom>
-          </DropdownScrollArea>
+              </DropdownCloser>
+              <Button variant="primary" onClick={action('clicked button 2')}>
+                Action only
+              </Button>
+            </Cluster>
+          </ControllableBoxBottom>
         </DropdownContent>
       </Dropdown>
       <Dialog isOpen={isDialogOpen} id="dropdown-dialog">
@@ -173,29 +167,25 @@ const Template: StoryFn = () => (
             <Button>入れ子にできる Dropdown</Button>
           </DropdownTrigger>
           <DropdownContent controllable>
-            <DropdownScrollArea>
-              <ControllableBoxDiv>
-                <Dropdown>
-                  <DropdownTrigger>
-                    <Button>さらに入れ子にできる Dropdown</Button>
-                  </DropdownTrigger>
-                  <DropdownContent controllable>
-                    <DropdownScrollArea>
-                      <ControllableBoxDiv>
-                        <Dropdown>
-                          <DropdownTrigger>
-                            <TriggerButton>いくらでも入れ子にできる Dropdown</TriggerButton>
-                          </DropdownTrigger>
-                          <DropdownContent>
-                            <ListMenu />
-                          </DropdownContent>
-                        </Dropdown>
-                      </ControllableBoxDiv>
-                    </DropdownScrollArea>
-                  </DropdownContent>
-                </Dropdown>
-              </ControllableBoxDiv>
-            </DropdownScrollArea>
+            <ControllableBoxDiv>
+              <Dropdown>
+                <DropdownTrigger>
+                  <Button>さらに入れ子にできる Dropdown</Button>
+                </DropdownTrigger>
+                <DropdownContent controllable>
+                  <ControllableBoxDiv>
+                    <Dropdown>
+                      <DropdownTrigger>
+                        <TriggerButton>いくらでも入れ子にできる Dropdown</TriggerButton>
+                      </DropdownTrigger>
+                      <DropdownContent>
+                        <ListMenu />
+                      </DropdownContent>
+                    </Dropdown>
+                  </ControllableBoxDiv>
+                </DropdownContent>
+              </Dropdown>
+            </ControllableBoxDiv>
           </DropdownContent>
         </Dropdown>
       </li>
diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownCloser.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownCloser.tsx
index a3a666c53b..38e9bb0fbc 100644
--- a/packages/smarthr-ui/src/components/Dropdown/DropdownCloser.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/DropdownCloser.tsx
@@ -16,18 +16,18 @@ const closer = tv({
 type Props = PropsWithChildren<ComponentProps<'div'>>
 
 export const DropdownCloser: React.FC<Props> = ({ children, className }) => {
-  const { onClickCloser, controllable, scrollable } = useContext(DropdownContentContext)
+  const { onClickCloser, controllable } = useContext(DropdownContentContext)
   const { maxHeight } = useContext(DropdownContentInnerContext)
 
   const styleProps = useMemo(() => {
-    const maxHeightStyle = !controllable && scrollable ? maxHeight : undefined
+    const maxHeightStyle = controllable ? undefined : maxHeight
     return {
       className: closer({ controllable, className }),
       style: {
         maxHeight: maxHeightStyle,
       },
     }
-  }, [className, controllable, maxHeight, scrollable])
+  }, [className, controllable, maxHeight])
 
   return (
     // eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation
diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownContent.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownContent.tsx
index e6959b6324..75ab7938ea 100644
--- a/packages/smarthr-ui/src/components/Dropdown/DropdownContent.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/DropdownContent.tsx
@@ -6,13 +6,11 @@ import { DropdownContentInner, ElementProps as InnerElementProps } from './Dropd
 export const DropdownContentContext = React.createContext<{
   onClickCloser: () => void
   controllable: boolean
-  scrollable: boolean
 }>({
   onClickCloser: () => {
     /* noop */
   },
   controllable: false,
-  scrollable: true,
 })
 
 type Props = PropsWithChildren<{
@@ -21,28 +19,20 @@ type Props = PropsWithChildren<{
    *  この場合は、 `DropdownCloser` を用いてドロップダウンを閉じることができる。
    */
   controllable?: boolean
-  /** `true` のとき、ウィンドウサイズに応じてドロップダウン内が自動的にスクロール可能になる */
-  scrollable?: boolean
 }>
 
 type ElementProps = Omit<InnerElementProps, keyof Props>
 
 export const DropdownContent: React.FC<Props & ElementProps> = ({
   controllable = false,
-  scrollable = true,
   ...props
 }) => {
   const { DropdownContentRoot, triggerRect, onClickCloser } = useContext(DropdownContext)
 
   return (
     <DropdownContentRoot>
-      <DropdownContentContext.Provider value={{ onClickCloser, controllable, scrollable }}>
-        <DropdownContentInner
-          {...props}
-          triggerRect={triggerRect}
-          scrollable={scrollable}
-          controllable={controllable}
-        />
+      <DropdownContentContext.Provider value={{ onClickCloser, controllable }}>
+        <DropdownContentInner {...props} triggerRect={triggerRect} controllable={controllable} />
       </DropdownContentContext.Provider>
     </DropdownContentRoot>
   )
diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownContentInner.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownContentInner.tsx
index 6801234d3e..0ae12b6190 100644
--- a/packages/smarthr-ui/src/components/Dropdown/DropdownContentInner.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/DropdownContentInner.tsx
@@ -17,26 +17,17 @@ import { ContentBoxStyle, Rect, getContentBoxStyle } from './dropdownHelper'
 import { useKeyboardNavigation } from './useKeyboardNavigation'
 
 const contentInner = tv({
-  slots: {
-    wrapper:
-      'smarthr-ui-Dropdown-content shr-absolute shr-z-overlap-base shr-flex shr-break-words shr-rounded-m shr-bg-white shr-shadow-layer-3',
-    controllableWrapper: 'shr-flex shr-flex-col',
-  },
+  base: 'smarthr-ui-Dropdown-content shr-absolute shr-z-overlap-base shr-break-words shr-rounded-m shr-bg-white shr-shadow-layer-3 shr-overflow-y-auto',
   variants: {
     isActive: {
-      true: {
-        wrapper: 'shr-visible',
-      },
-      false: {
-        wrapper: 'shr-invisible',
-      },
+      true: 'shr-visible',
+      false: 'shr-invisible',
     },
   },
 })
 
 type Props = PropsWithChildren<{
   triggerRect: Rect
-  scrollable: boolean
   controllable: boolean
 }>
 
@@ -52,7 +43,6 @@ export const DropdownContentInnerContext = createContext<DropdownContentInnerCon
 
 export const DropdownContentInner: FC<Props & ElementProps> = ({
   triggerRect,
-  scrollable,
   children,
   className,
   controllable,
@@ -66,8 +56,6 @@ export const DropdownContentInner: FC<Props & ElementProps> = ({
   const wrapperRef = useRef<HTMLDivElement>(null)
   const focusTargetRef = useRef<HTMLDivElement>(null)
 
-  const { wrapper, controllableWrapper } = useMemo(() => contentInner(), [])
-
   const wrapperStyleProps = useMemo(() => {
     const leftMargin = contentBox.left === undefined ? spacing[0.5] : `max(${contentBox.left}, 0px)`
     const rightMargin =
@@ -75,7 +63,7 @@ export const DropdownContentInner: FC<Props & ElementProps> = ({
     const maxWidthStyle = `calc(100% - ${leftMargin} - ${rightMargin})`
 
     return {
-      className: `${wrapper({ isActive, className })}`,
+      className: contentInner({ isActive, className }),
       style: {
         insetBlockStart: contentBox.top,
         insetInlineStart: contentBox.left || undefined,
@@ -83,15 +71,14 @@ export const DropdownContentInner: FC<Props & ElementProps> = ({
         maxWidth: maxWidthStyle,
       },
     }
-  }, [className, contentBox.left, contentBox.right, contentBox.top, isActive, spacing, wrapper])
+  }, [className, contentBox.left, contentBox.right, contentBox.top, isActive])
   const controllableWrapperStyleProps = useMemo(
     () => ({
-      className: controllableWrapper(),
       style: {
-        maxHeight: contentBox.maxHeight && scrollable ? contentBox.maxHeight : 'initial',
+        maxHeight: contentBox.maxHeight || undefined,
       },
     }),
-    [contentBox.maxHeight, scrollable, controllableWrapper],
+    [contentBox.maxHeight],
   )
 
   useEffect(() => {
diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx
index d83508cfe5..a77a56ce88 100644
--- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx
@@ -10,7 +10,7 @@ import React, {
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
-import { Dropdown, DropdownContent, DropdownScrollArea, DropdownTrigger } from '..'
+import { Dropdown, DropdownContent, DropdownTrigger } from '..'
 import { AnchorButton, Button, BaseProps as ButtonProps } from '../../Button'
 import { RemoteDialogTrigger } from '../../Dialog'
 import { FaCaretDownIcon, FaEllipsisIcon } from '../../Icon'
@@ -74,7 +74,7 @@ export const DropdownMenuButton: FC<Props & ElementProps> = ({
   className,
   ...props
 }) => {
-  const containerRef = React.useRef<HTMLDivElement>(null)
+  const containerRef = React.useRef<HTMLUListElement>(null)
 
   const triggerLabel = useMemo(() => {
     const Icon = TriggerIcon || FaEllipsisIcon
@@ -114,13 +114,13 @@ export const DropdownMenuButton: FC<Props & ElementProps> = ({
         </Button>
       </DropdownTrigger>
       <DropdownContent>
-        <DropdownScrollArea as="ul" ref={containerRef} className={actionListStyle}>
+        <ul ref={containerRef} className={actionListStyle}>
           {React.Children.map(children, (item, i) =>
             // MEMO: {flag && <Button/>}のような書き方に対応させる為、型を変換する
             // itemの存在チェックでfalsyな値は弾かれている想定
             item ? <li key={i}>{actionItem(item as ActionItemTruthyType)}</li> : null,
           )}
-        </DropdownScrollArea>
+        </ul>
       </DropdownContent>
     </Dropdown>
   )
diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownScrollArea.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownScrollArea.tsx
deleted file mode 100644
index 24ca55fe04..0000000000
--- a/packages/smarthr-ui/src/components/Dropdown/DropdownScrollArea.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { ComponentProps, ElementType, PropsWithChildren, forwardRef, useMemo } from 'react'
-import { tv } from 'tailwind-variants'
-
-type Props = PropsWithChildren<ComponentProps<'div'>> & {
-  as?: ElementType
-}
-
-const scrollArea = tv({
-  base: 'smarthr-ui-Dropdown-scrollArea shr-flex-auto shr-overflow-y-auto',
-})
-
-export const DropdownScrollArea = forwardRef<HTMLDivElement, Props>(
-  ({ as: Component = 'div', className, ...props }, ref) => {
-    const styles = useMemo(() => scrollArea({ className }), [className])
-
-    return <Component {...props} ref={ref} className={styles} />
-  },
-)
diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
index 505876a9d1..44f109fb22 100644
--- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx
@@ -9,7 +9,6 @@ import { ResponseMessage } from '../../ResponseMessage'
 import { Dropdown } from '../Dropdown'
 import { DropdownCloser } from '../DropdownCloser'
 import { DropdownContent } from '../DropdownContent'
-import { DropdownScrollArea } from '../DropdownScrollArea'
 import { DropdownTrigger } from '../DropdownTrigger'
 
 import type { DecoratorType, DecoratorsType, ResponseMessageType } from '../../../types'
@@ -48,7 +47,7 @@ const filterDropdown = tv({
     ],
     fileteredIcon: 'shr-h-[0.5em] shr-w-[0.5em]',
     inner: 'shr-p-1.5',
-    actionArea: 'shr-border-t-shorthand shr-px-1.5 shr-py-1',
+    actionArea: 'shr-sticky shr-bottom-0 shr-border-t-shorthand shr-bg-white shr-px-1.5 shr-py-1',
     resetButtonArea: '-shr-ms-0.5',
     rightButtonArea: 'shr-ms-auto',
     message: 'shr-text-right',
@@ -156,9 +155,7 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
         </Button>
       </DropdownTrigger>
       <DropdownContent controllable>
-        <DropdownScrollArea>
-          <div className={innerStyle}>{children}</div>
-        </DropdownScrollArea>
+        <div className={innerStyle}>{children}</div>
         <Stack gap={0.5} className={actionAreaStyle}>
           <Cluster gap={1} align="center" justify="space-between">
             {onReset && (
diff --git a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
index db164de3ba..e4856d4941 100644
--- a/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/SortDropdown/SortDropdown.tsx
@@ -10,7 +10,6 @@ import { Select } from '../../Select'
 import { Dropdown } from '../Dropdown'
 import { DropdownCloser } from '../DropdownCloser'
 import { DropdownContent } from '../DropdownContent'
-import { DropdownScrollArea } from '../DropdownScrollArea'
 import { DropdownTrigger } from '../DropdownTrigger'
 
 import { useSortDropdown } from './useSortDropdown'
@@ -85,48 +84,46 @@ export const SortDropdown: FC<Props & ElementProps> = ({
         </Button>
       </DropdownTrigger>
       <DropdownContent controllable>
-        <DropdownScrollArea>
-          <Stack className={bodyStyle}>
-            <FormControl title={sortFieldLabel}>
-              <Select
-                name="sortFields"
-                options={innerFields}
-                onChange={handleChange}
-                className={selectStyle}
-              />
-            </FormControl>
-            <Fieldset title={sortOrderLabel} innerMargin={0.5}>
-              <Cluster gap={1.25}>
-                <RadioButton
-                  name="sortOrder"
-                  value="asc"
-                  defaultChecked={innerCheckedOrder === 'asc'}
-                  onChange={() => setCheckedInnerOrder('asc')}
-                >
-                  {ascLabel}
-                </RadioButton>
-                <RadioButton
-                  name="sortOrder"
-                  value="desc"
-                  defaultChecked={innerCheckedOrder === 'desc'}
-                  onChange={() => setCheckedInnerOrder('desc')}
-                >
-                  {descLabel}
-                </RadioButton>
-              </Cluster>
-            </Fieldset>
-          </Stack>
-          <Cluster gap={1} align="center" justify="flex-end" as="footer" className={footerStyle}>
-            <DropdownCloser>
-              <Button onClick={onCancel}>{cancelButtonLabel}</Button>
-            </DropdownCloser>
-            <DropdownCloser>
-              <Button variant="primary" onClick={handleApply}>
-                {applyButtonLabel}
-              </Button>
-            </DropdownCloser>
-          </Cluster>
-        </DropdownScrollArea>
+        <Stack className={bodyStyle}>
+          <FormControl title={sortFieldLabel}>
+            <Select
+              name="sortFields"
+              options={innerFields}
+              onChange={handleChange}
+              className={selectStyle}
+            />
+          </FormControl>
+          <Fieldset title={sortOrderLabel} innerMargin={0.5}>
+            <Cluster gap={1.25}>
+              <RadioButton
+                name="sortOrder"
+                value="asc"
+                defaultChecked={innerCheckedOrder === 'asc'}
+                onChange={() => setCheckedInnerOrder('asc')}
+              >
+                {ascLabel}
+              </RadioButton>
+              <RadioButton
+                name="sortOrder"
+                value="desc"
+                defaultChecked={innerCheckedOrder === 'desc'}
+                onChange={() => setCheckedInnerOrder('desc')}
+              >
+                {descLabel}
+              </RadioButton>
+            </Cluster>
+          </Fieldset>
+        </Stack>
+        <Cluster gap={1} align="center" justify="flex-end" as="footer" className={footerStyle}>
+          <DropdownCloser>
+            <Button onClick={onCancel}>{cancelButtonLabel}</Button>
+          </DropdownCloser>
+          <DropdownCloser>
+            <Button variant="primary" onClick={handleApply}>
+              {applyButtonLabel}
+            </Button>
+          </DropdownCloser>
+        </Cluster>
       </DropdownContent>
     </Dropdown>
   )
diff --git a/packages/smarthr-ui/src/components/Dropdown/VRTDropdown.stories.tsx b/packages/smarthr-ui/src/components/Dropdown/VRTDropdown.stories.tsx
index 82cf0b7754..051b83b166 100644
--- a/packages/smarthr-ui/src/components/Dropdown/VRTDropdown.stories.tsx
+++ b/packages/smarthr-ui/src/components/Dropdown/VRTDropdown.stories.tsx
@@ -9,7 +9,6 @@ import { Dropdown } from './Dropdown'
 import { All, ControllableDropdown } from './Dropdown.stories'
 import { DropdownCloser } from './DropdownCloser'
 import { DropdownContent } from './DropdownContent'
-import { DropdownScrollArea } from './DropdownScrollArea'
 import { DropdownTrigger } from './DropdownTrigger'
 
 export default {
@@ -19,7 +18,6 @@ export default {
     DropdownTrigger,
     DropdownContent,
     DropdownCloser,
-    DropdownScrollArea,
   },
   parameters: {
     withTheming: true,
diff --git a/packages/smarthr-ui/src/components/Dropdown/index.ts b/packages/smarthr-ui/src/components/Dropdown/index.ts
index 191818ac2f..dfc1189a83 100644
--- a/packages/smarthr-ui/src/components/Dropdown/index.ts
+++ b/packages/smarthr-ui/src/components/Dropdown/index.ts
@@ -2,7 +2,6 @@ export { Dropdown } from './Dropdown'
 export { DropdownTrigger } from './DropdownTrigger'
 export { DropdownContent } from './DropdownContent'
 export { DropdownCloser } from './DropdownCloser'
-export { DropdownScrollArea } from './DropdownScrollArea'
 export { FilterDropdown } from './FilterDropdown'
 export { DropdownMenuButton } from './DropdownMenuButton'
 export { SortDropdown } from './SortDropdown'
diff --git a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
index 5fca4fa42e..54ee30962d 100644
--- a/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
+++ b/packages/smarthr-ui/src/components/Header/AppLauncher/AppLauncher.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes, ReactNode, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { Button } from '../../Button'
-import { Dropdown, DropdownContent, DropdownScrollArea, DropdownTrigger } from '../../Dropdown'
+import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { Heading } from '../../Heading'
 import { FaToolboxIcon } from '../../Icon'
 import { Cluster, Stack } from '../../Layout'
@@ -75,34 +75,32 @@ export const AppLauncher: React.FC<Props & ElementProps> = ({
       <DropdownContent controllable>
         {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}
         <Stack as="nav" gap={1.5} className={contentWrapper()}>
-          <DropdownScrollArea>
-            <Stack gap={1.5}>
-              {baseApps && (
-                <Section>
+          <Stack gap={1.5}>
+            {baseApps && (
+              <Section>
+                <Stack gap={0.5} className={category()}>
+                  <Heading type="subSubBlockTitle">{baseApps.heading}</Heading>
+                  {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}
+                  <Cluster as="ul" gap={1} className={appList()}>
+                    {appItems(baseApps.items, link())}
+                  </Cluster>
+                </Stack>
+              </Section>
+            )}
+            <Cluster gap={1.5}>
+              {others.map(({ heading, items }, i) => (
+                <Section key={i}>
                   <Stack gap={0.5} className={category()}>
-                    <Heading type="subSubBlockTitle">{baseApps.heading}</Heading>
+                    <Heading type="subSubBlockTitle">{heading}</Heading>
                     {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}
-                    <Cluster as="ul" gap={1} className={appList()}>
-                      {appItems(baseApps.items, link())}
-                    </Cluster>
+                    <Stack gap={0.5} as="ul" className={appList()}>
+                      {appItems(items, link())}
+                    </Stack>
                   </Stack>
                 </Section>
-              )}
-              <Cluster gap={1.5}>
-                {others.map(({ heading, items }, i) => (
-                  <Section key={i}>
-                    <Stack gap={0.5} className={category()}>
-                      <Heading type="subSubBlockTitle">{heading}</Heading>
-                      {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}
-                      <Stack gap={0.5} as="ul" className={appList()}>
-                        {appItems(items, link())}
-                      </Stack>
-                    </Stack>
-                  </Section>
-                ))}
-              </Cluster>
-            </Stack>
-          </DropdownScrollArea>
+              ))}
+            </Cluster>
+          </Stack>
 
           {urlToShowAll && (
             <div className={footer()}>
diff --git a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
index d3c8931225..3aeaab1674 100644
--- a/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
+++ b/packages/smarthr-ui/src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'
 
 import { tabbable } from '../../../libs/tabbable'
 import { Button } from '../../Button'
-import { Dropdown, DropdownContent, DropdownScrollArea, DropdownTrigger } from '../../Dropdown'
+import { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'
 import { FaCaretDownIcon, FaCheckIcon, FaGlobeIcon } from '../../Icon'
 
 import type { DecoratorsType, LocaleMap } from '../../../types'
@@ -128,7 +128,7 @@ export const LanguageSwitcher: React.FC<Props & ElementProps> = ({
     <Dropdown {...props}>
       <DropdownTrigger>{narrow ? NarrowTrigger : Trigger}</DropdownTrigger>
       <DropdownContent onKeyDown={handleKeyDown} role="presentation">
-        <DropdownScrollArea as="ul" className={languageItemsList()}>
+        <ul className={languageItemsList()}>
           {locales.map(([code, label]) => {
             const isCurrent = currentLang === code
             return (
@@ -144,7 +144,7 @@ export const LanguageSwitcher: React.FC<Props & ElementProps> = ({
               </li>
             )
           })}
-        </DropdownScrollArea>
+        </ul>
       </DropdownContent>
     </Dropdown>
   )
diff --git a/packages/smarthr-ui/src/index.ts b/packages/smarthr-ui/src/index.ts
index b090451790..2056786eda 100644
--- a/packages/smarthr-ui/src/index.ts
+++ b/packages/smarthr-ui/src/index.ts
@@ -7,7 +7,6 @@ export {
   DropdownTrigger,
   DropdownContent,
   DropdownCloser,
-  DropdownScrollArea,
   FilterDropdown,
   DropdownMenuButton,
   SortDropdown,