diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
index d7245a9bbcd..f7662eb89d2 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
@@ -7,7 +7,6 @@ import { selectors } from '@grafana/e2e-selectors';
 import { useStyles2, useTheme2 } from '../../../themes';
 import { getFocusStyles } from '../../../themes/mixins';
 import { t, Trans } from '../../../utils/i18n';
-import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';
 import { FilterInput } from '../../FilterInput/FilterInput';
 import { Icon } from '../../Icon/Icon';
 
@@ -88,12 +87,10 @@ export const TimePickerContentWithScreenSize = (props: PropsWithScreenSize) => {
                 placeholder={t('time-picker.content.filter-placeholder', 'Search quick ranges')}
               />
             </div>
-            <CustomScrollbar>
-              {!isFullscreen && <NarrowScreenForm {...props} historyOptions={historyOptions} />}
-              {!hideQuickRanges && (
-                <TimeRangeList options={filteredQuickOptions} onChange={onChangeTimeOption} value={timeOption} />
-              )}
-            </CustomScrollbar>
+            {!isFullscreen && <NarrowScreenForm {...props} historyOptions={historyOptions} />}
+            {!hideQuickRanges && (
+              <TimeRangeList options={filteredQuickOptions} onChange={onChangeTimeOption} value={timeOption} />
+            )}
           </div>
         )}
         {isFullscreen && (
@@ -295,6 +292,7 @@ const getStyles = (
     borderRight: `${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`}`,
     width: `${!hideQuickRanges ? '60%' : '100%'}`,
     overflow: 'auto',
+    scrollbarWidth: 'thin',
     order: isReversed ? 1 : 0,
   }),
   rightSide: css({
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
index 76676a5bba6..b47ed62cd22 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
@@ -55,6 +55,7 @@ const Options = ({ options, value, onChange, title }: Props) => {
         onKeyDown={handleKeys}
         ref={localRef}
         aria-roledescription={t('time-picker.time-range.aria-role', 'Time range selection')}
+        className={styles.list}
       >
         {options.map((option, index) => (
           <TimeRangeOption
@@ -96,4 +97,8 @@ const getOptionsStyles = () => ({
     flexGrow: 1,
     alignItems: 'flex-start',
   }),
+  list: css({
+    overflowY: 'auto',
+    scrollbarWidth: 'thin',
+  }),
 });