diff --git a/packages/autocomplete-js/src/getDefaultOptions.ts b/packages/autocomplete-js/src/getDefaultOptions.ts
index b9463498c5..f35d8e8ccb 100644
--- a/packages/autocomplete-js/src/getDefaultOptions.ts
+++ b/packages/autocomplete-js/src/getDefaultOptions.ts
@@ -44,7 +44,7 @@ const defaultClassNames: AutocompleteClassNames = {
   list: 'aa-List',
   loadingIndicator: 'aa-LoadingIndicator',
   panel: 'aa-Panel',
-  panelLayout: 'aa-PanelLayout',
+  panelLayout: 'aa-PanelLayout aa-Panel--scrollable',
   root: 'aa-Autocomplete',
   source: 'aa-Source',
   sourceFooter: 'aa-SourceFooter',
diff --git a/packages/autocomplete-js/src/render.tsx b/packages/autocomplete-js/src/render.tsx
index f297fe4539..3c1767746a 100644
--- a/packages/autocomplete-js/src/render.tsx
+++ b/packages/autocomplete-js/src/render.tsx
@@ -178,7 +178,7 @@ export function renderPanel<TItem extends BaseItem>(
 
   const children = (
     <Fragment>
-      <div className="aa-PanelLayout aa-Panel--scrollable">{sections}</div>
+      <div className={classNames.panelLayout}>{sections}</div>
       <div className="aa-GradientBottom" />
     </Fragment>
   );