diff --git a/packages/kit/src/components/TradingView/TradingViewV2/components/calendarControls/CalendarPanelPopover.tsx b/packages/kit/src/components/TradingView/TradingViewV2/components/calendarControls/CalendarPanelPopover.tsx
index 7fb882352b9f..70442011ff1e 100644
--- a/packages/kit/src/components/TradingView/TradingViewV2/components/calendarControls/CalendarPanelPopover.tsx
+++ b/packages/kit/src/components/TradingView/TradingViewV2/components/calendarControls/CalendarPanelPopover.tsx
@@ -649,7 +649,7 @@ export function CalendarPanelPopover({
       onOpenChange={handleOpenChange}
       showHeader={false}
       usingSheet={false}
-      placement="bottom-end"
+      placement="bottom-start"
       floatingPanelProps={{
         width: 328,
       }}
diff --git a/packages/kit/src/components/TradingView/TradingViewV2/components/chartType/ChartTypeSelect.tsx b/packages/kit/src/components/TradingView/TradingViewV2/components/chartType/ChartTypeSelect.tsx
index 1628e72234a8..dcaecca4fc13 100644
--- a/packages/kit/src/components/TradingView/TradingViewV2/components/chartType/ChartTypeSelect.tsx
+++ b/packages/kit/src/components/TradingView/TradingViewV2/components/chartType/ChartTypeSelect.tsx
@@ -56,7 +56,7 @@ export function ChartTypeSelect({
           onChartTypeChange(chartType);
         }
       }}
-      placement="bottom-end"
+      placement="bottom-start"
       floatingPanelProps={{
         width: '$56',
       }}
diff --git a/packages/kit/src/components/TradingView/TradingViewV2/components/indicatorControls/NativeIndicatorControls.tsx b/packages/kit/src/components/TradingView/TradingViewV2/components/indicatorControls/NativeIndicatorControls.tsx
index b3c540aa37f8..1978658eef60 100644
--- a/packages/kit/src/components/TradingView/TradingViewV2/components/indicatorControls/NativeIndicatorControls.tsx
+++ b/packages/kit/src/components/TradingView/TradingViewV2/components/indicatorControls/NativeIndicatorControls.tsx
@@ -16,7 +16,12 @@ import {
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
 
-import { HEADER_ICON_BUTTON_STYLE_PROPS } from '../utils/NativeChartControlsShared';
+import {
+  HEADER_ICON_BUTTON_STYLE_PROPS,
+  NATIVE_CHART_OPTION_GRID_GAP,
+  NATIVE_CHART_OPTION_PILL_LAYOUT_PROPS,
+  getNativeChartOptionPillColors,
+} from '../utils/NativeChartControlsShared';
 
 import {
   canToggleTradingViewNativeIndicatorOn,
@@ -33,14 +38,6 @@ import type {
 import type { GestureResponderEvent } from 'react-native';
 
 const INDICATOR_GRID_COLUMN_COUNT = 4;
-const INDICATOR_GRID_ITEM_LAYOUT_PROPS = {
-  flex: 1,
-  flexBasis: 0,
-  h: 32,
-  minWidth: 0,
-  px: '$2',
-  borderWidth: 1,
-} as const;
 export const TRADING_VIEW_NATIVE_INDICATOR_QUICK_BAR_HEIGHT = 31;
 const INDICATOR_QUICK_BAR_VERTICAL_PAN_THRESHOLD = 4;
 
@@ -87,17 +84,19 @@ function IndicatorPill({
   isDisabled: boolean;
   onPress?: () => void;
 }) {
+  const { color: textColor, ...pillColors } = getNativeChartOptionPillColors({
+    isHighlighted: isActive,
+    isDisabled,
+  });
+
   return (
     <XStack
       key={indicator.value}
       testID={buildIndicatorItemTestID(indicator.value)}
-      {...INDICATOR_GRID_ITEM_LAYOUT_PROPS}
-      borderRadius="$full"
-      borderCurve="continuous"
-      borderColor={isActive ? '$bgReverse' : 'transparent'}
+      {...NATIVE_CHART_OPTION_PILL_LAYOUT_PROPS}
+      {...pillColors}
       alignItems="center"
       justifyContent="center"
-      bg="$bgStrong"
       hoverStyle={{
         bg: '$bgStrongHover',
       }}
@@ -109,13 +108,7 @@ function IndicatorPill({
       userSelect="none"
       onPress={isDisabled ? undefined : onPress}
     >
-      <SizableText
-        size="$bodyMdMedium"
-        numberOfLines={1}
-        adjustsFontSizeToFit
-        minimumFontScale={0.82}
-        color={getIndicatorTextColor({ isActive, isDisabled })}
-      >
+      <SizableText size="$bodyMdMedium" numberOfLines={1} color={textColor}>
         {indicator.label}
       </SizableText>
     </XStack>
@@ -146,11 +139,14 @@ function IndicatorGrid({
   }, [indicators]);
 
   return (
-    <YStack gap="$2">
+    <YStack gap={NATIVE_CHART_OPTION_GRID_GAP}>
       {rows.map((row, rowIndex) => {
         const placeholderCount = INDICATOR_GRID_COLUMN_COUNT - row.length;
         return (
-          <XStack key={`indicator-row-${rowIndex}`} gap="$2">
+          <XStack
+            key={`indicator-row-${rowIndex}`}
+            gap={NATIVE_CHART_OPTION_GRID_GAP}
+          >
             {row.map((indicator) => {
               const isDisabled = !canToggleTradingViewNativeIndicatorOn({
                 indicatorValue: indicator.value,
@@ -171,8 +167,8 @@ function IndicatorGrid({
             {Array.from({ length: placeholderCount }).map((_, index) => (
               <Stack
                 key={`indicator-placeholder-${rowIndex}-${index}`}
-                {...INDICATOR_GRID_ITEM_LAYOUT_PROPS}
-                borderColor="transparent"
+                {...NATIVE_CHART_OPTION_PILL_LAYOUT_PROPS}
+                borderColor="$transparent"
                 opacity={0}
                 pointerEvents="none"
               />
@@ -547,7 +543,7 @@ function IndicatorListPopoverContent({
   );
 
   return (
-    <YStack p="$3" gap="$5">
+    <YStack p="$5" gap="$5">
       <IndicatorSection
         title={intl.formatMessage({
           id: ETranslations.market_main_chart_indicators,
@@ -595,7 +591,7 @@ export function IndicatorPopover({
       }}
       showHeader={false}
       usingSheet={false}
-      placement="bottom-end"
+      placement="bottom-start"
       floatingPanelProps={{
         width: 360,
       }}
diff --git a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalGrid.tsx b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalGrid.tsx
index 810ea0616b98..c6c6e4b51a2b 100644
--- a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalGrid.tsx
+++ b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalGrid.tsx
@@ -5,9 +5,14 @@ import { useIntl } from 'react-intl';
 
 import { Icon, SizableText, Stack, XStack, YStack } from '@onekeyhq/components';
 
+import {
+  NATIVE_CHART_OPTION_GRID_GAP,
+  NATIVE_CHART_OPTION_PILL_LAYOUT_PROPS,
+  getNativeChartOptionPillColors,
+} from '../utils/NativeChartControlsShared';
+
 import {
   INTERVAL_GRID_COLUMN_COUNT,
-  INTERVAL_GRID_ITEM_LAYOUT_PROPS,
   buildIntervalItemTestID,
   formatIntervalOptionDisplayLabel,
   isIntervalOptionDisabled,
@@ -34,26 +39,20 @@ function IntervalPill({
   disabled?: boolean;
   onPress: () => void;
 }) {
-  const isHighlighted = isActive || Boolean(isSelected);
-  let textColor = '$textSubdued';
-  if (disabled) {
-    textColor = '$textDisabled';
-  } else if (isHighlighted) {
-    textColor = '$text';
-  }
+  const { color: textColor, ...pillColors } = getNativeChartOptionPillColors({
+    isHighlighted: isActive || Boolean(isSelected),
+    isDisabled: disabled,
+  });
 
   return (
     <Stack
       key={option.value}
       testID={buildIntervalItemTestID(section, option.value)}
       position="relative"
-      {...INTERVAL_GRID_ITEM_LAYOUT_PROPS}
-      borderRadius="$full"
-      borderCurve="continuous"
-      borderColor={isHighlighted && !disabled ? '$bgReverse' : 'transparent'}
+      {...NATIVE_CHART_OPTION_PILL_LAYOUT_PROPS}
+      {...pillColors}
       alignItems="center"
       justifyContent="center"
-      bg="$bgStrong"
       overflow="hidden"
       hoverStyle={{
         bg: '$bgStrongHover',
@@ -66,29 +65,27 @@ function IntervalPill({
       userSelect="none"
       onPress={disabled ? undefined : onPress}
     >
-      <SizableText
-        size="$bodyLgMedium"
-        color={textColor}
-        numberOfLines={1}
-        adjustsFontSizeToFit
-        minimumFontScale={0.82}
-      >
+      <SizableText size="$bodyMdMedium" color={textColor} numberOfLines={1}>
         {displayLabel}
       </SizableText>
       {showCheckMark && !disabled ? (
         <Stack
           position="absolute"
-          right={-1}
-          top={-1}
-          w={19}
-          h={19}
-          borderBottomLeftRadius={12}
+          right={0}
+          top={0}
+          // The design draws a 16px badge offset by -3px behind a clipping
+          // parent, so only a 13px corner tab is ever visible.
+          w={13}
+          h={13}
+          borderBottomLeftRadius="$2"
           borderCurve="continuous"
-          bg="$bgReverse"
+          bg="$borderActive"
           alignItems="center"
           justifyContent="center"
         >
-          <Icon name="Checkmark1SmallOutline" size="$4" color="$iconInverse" />
+          {/* Checkmark1Small fills ~45% of its 24px viewBox, so $3 draws the
+              5.7px glyph the design specifies. */}
+          <Icon name="Checkmark1SmallOutline" size="$3" color="$iconInverse" />
         </Stack>
       ) : null}
     </Stack>
@@ -131,11 +128,14 @@ export function IntervalGrid({
   }, [options]);
 
   return (
-    <YStack gap="$2.5">
+    <YStack gap={NATIVE_CHART_OPTION_GRID_GAP}>
       {rows.map((row, rowIndex) => {
         const placeholderCount = INTERVAL_GRID_COLUMN_COUNT - row.length;
         return (
-          <XStack key={`${section}-row-${rowIndex}`} gap="$2.5">
+          <XStack
+            key={`${section}-row-${rowIndex}`}
+            gap={NATIVE_CHART_OPTION_GRID_GAP}
+          >
             {row.map((option) => {
               const isSelected = selectedValues?.has(option.value) ?? false;
               const isDisabled =
@@ -167,8 +167,8 @@ export function IntervalGrid({
             {Array.from({ length: placeholderCount }).map((_, index) => (
               <Stack
                 key={`${section}-placeholder-${rowIndex}-${index}`}
-                {...INTERVAL_GRID_ITEM_LAYOUT_PROPS}
-                borderColor="transparent"
+                {...NATIVE_CHART_OPTION_PILL_LAYOUT_PROPS}
+                borderColor="$transparent"
                 opacity={0}
                 pointerEvents="none"
               />
@@ -192,7 +192,7 @@ export function IntervalsDialogSection({
   return (
     <YStack gap="$3">
       <XStack alignItems="center" justifyContent="space-between">
-        <SizableText size="$bodyLg" color="$textSubdued">
+        <SizableText size="$bodyMd" color="$textSubdued">
           {title}
         </SizableText>
         {action}
diff --git a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalSelector.tsx b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalSelector.tsx
index 03303b9375f4..32c281687fac 100644
--- a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalSelector.tsx
+++ b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalSelector.tsx
@@ -127,6 +127,9 @@ export const TradingViewNativeIntervalSelector = memo(
         title: intl.formatMessage({ id: ETranslations.market_intervals }),
         showFooter: false,
         testID: 'trading-view-native-intervals-dialog',
+        // IntervalsDialogContent owns its own padding so the popover and the
+        // dialog share one layout; drop the default Dialog content padding.
+        contentContainerProps: { px: '$0', pb: '$0' },
         onClose: () => {
           handleIntervalsDialogClose(dialogInstance);
         },
@@ -174,6 +177,7 @@ export const TradingViewNativeIntervalSelector = memo(
         onIntervalChange={onIntervalChange}
         onPreferredValuesChange={handlePreferredValuesChange}
         onClose={closeIntervalsPopover}
+        mode={intervalControlMode}
         maxPreferredIntervalCount={
           intervalControlMode === 'popover'
             ? null
@@ -202,6 +206,9 @@ export const TradingViewNativeIntervalSelector = memo(
             onOpenChange={handleIntervalsPopoverOpenChange}
             floatingPanelProps={{
               width: 360,
+              // Without this the focus scope moves focus to the Edit button on
+              // open and it renders with a focus ring the user never asked for.
+              onOpenAutoFocus: (event) => event.preventDefault(),
             }}
             renderTrigger={
               <IntervalMoreTrigger
@@ -249,11 +256,14 @@ export const TradingViewNativeIntervalSelector = memo(
             activeTextColor="$text"
             inactiveTextColor="$textSubdued"
             h={30}
-            p="$0.5"
+            // No frame padding: the item has to fill the full 30px so its
+            // active/hover background matches the adjacent More trigger.
+            p="$0"
             segmentControlItemStyleProps={{
               minWidth: 42,
               px: '$2.5',
-              py: '$1',
+              py: '$0',
+              justifyContent: 'center',
             }}
           />
         ) : null}
diff --git a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalUtils.ts b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalUtils.ts
index 981bd509f1ea..5c2dba0744f5 100644
--- a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalUtils.ts
+++ b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalUtils.ts
@@ -7,14 +7,6 @@ import type { IntlShape } from 'react-intl';
 export const MAX_VISIBLE_INTERVAL_COUNT = 4;
 export const MAX_PREFERRED_INTERVAL_COUNT = 4;
 export const INTERVAL_GRID_COLUMN_COUNT = 4;
-export const INTERVAL_GRID_ITEM_LAYOUT_PROPS = {
-  flex: 1,
-  flexBasis: 0,
-  h: 32,
-  minWidth: 0,
-  px: '$3',
-  borderWidth: 1,
-} as const;
 
 const PREFERRED_INTERVAL_STORAGE_KEY =
   'trading_view_native_preferred_intervals_v1';
@@ -152,7 +144,14 @@ export function formatIntervalOptionDisplayLabel(
   return label;
 }
 
-export function getAllIntervalOptions(options: ITradingViewIntervalOption[]) {
+/**
+ * Orders the intervals the chart reported by the canonical template order and
+ * appends anything it reported outside that list. The chart owns the interval
+ * list, so a resolution it never reported is never surfaced.
+ */
+export function getOrderedIntervalOptions(
+  options: ITradingViewIntervalOption[],
+) {
   const optionsByLabel = new Map<string, ITradingViewIntervalOption>();
   const optionsByValue = new Map<string, ITradingViewIntervalOption>();
   options.forEach((option) => {
@@ -170,27 +169,23 @@ export function getAllIntervalOptions(options: ITradingViewIntervalOption[]) {
 
   const seenValues = new Set<string>();
   const seenLabels = new Set<string>();
-  const allOptions: ITradingViewIntervalOption[] =
-    ALL_INTERVAL_OPTION_TEMPLATES.map((template) => {
-      const normalizedLabel = normalizeIntervalLabel(template.label);
-      const matchedOption =
-        optionsByLabel.get(normalizedLabel) ??
-        optionsByValue.get(template.fallbackValue);
-      const option = matchedOption
-        ? {
-            ...matchedOption,
-            label: template.label,
-          }
-        : {
-            label: template.label,
-            value: template.fallbackValue,
-            disabled: true,
-          };
-
-      seenLabels.add(normalizedLabel);
-      seenValues.add(option.value);
-      return option;
+  const allOptions: ITradingViewIntervalOption[] = [];
+  ALL_INTERVAL_OPTION_TEMPLATES.forEach((template) => {
+    const normalizedLabel = normalizeIntervalLabel(template.label);
+    const matchedOption =
+      optionsByLabel.get(normalizedLabel) ??
+      optionsByValue.get(template.fallbackValue);
+    if (!matchedOption) {
+      return;
+    }
+
+    seenLabels.add(normalizedLabel);
+    seenValues.add(matchedOption.value);
+    allOptions.push({
+      ...matchedOption,
+      label: template.label,
     });
+  });
 
   options.forEach((option) => {
     const normalizedLabel = normalizeIntervalLabel(option.label);
diff --git a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalsDialogContent.tsx b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalsDialogContent.tsx
index 528e130e9e63..2dcd390b546d 100644
--- a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalsDialogContent.tsx
+++ b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/NativeIntervalsDialogContent.tsx
@@ -1,19 +1,16 @@
 import { useIntl } from 'react-intl';
 
-import {
-  Button,
-  Icon,
-  SizableText,
-  XStack,
-  YStack,
-} from '@onekeyhq/components';
+import { Button, SizableText, XStack, YStack } from '@onekeyhq/components';
 import type { IButtonProps } from '@onekeyhq/components';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 
+import { NATIVE_CHART_SECTION_ACTION_BUTTON_PROPS } from '../utils/NativeChartControlsShared';
+
 import { useNativeIntervalsDialogState } from './hooks/useNativeIntervalsDialogState';
 import { IntervalGrid, IntervalsDialogSection } from './NativeIntervalGrid';
 import { MAX_PREFERRED_INTERVAL_COUNT } from './NativeIntervalUtils';
 
+import type { ITradingViewNativeIntervalControlMode } from './hooks/useNativeIntervalSelector';
 import type { ITradingViewIntervalOption } from '../../types';
 
 export function IntervalsDialogContent({
@@ -27,6 +24,7 @@ export function IntervalsDialogContent({
   onClose,
   maxPreferredIntervalCount = MAX_PREFERRED_INTERVAL_COUNT,
   footerButtonSize = 'large',
+  mode = 'dialog',
 }: {
   options: ITradingViewIntervalOption[];
   editableOptions: ITradingViewIntervalOption[];
@@ -38,8 +36,16 @@ export function IntervalsDialogContent({
   onClose: () => void;
   maxPreferredIntervalCount?: number | null;
   footerButtonSize?: IButtonProps['size'];
+  mode?: ITradingViewNativeIntervalControlMode;
 }) {
   const intl = useIntl();
+  // The desktop popover is tighter than the mobile dialog: it has no header of
+  // its own, so it pads evenly and keeps the two groups closer together.
+  const isPopover = mode === 'popover';
+  const contentPadding = isPopover
+    ? ({ p: '$5' } as const)
+    : ({ px: '$5', pt: '$2', pb: '$8' } as const);
+  const sectionGap = isPopover ? '$5' : '$8';
   const {
     draftPreferredValueSet,
     editTitle,
@@ -64,22 +70,32 @@ export function IntervalsDialogContent({
   });
 
   if (isEditing) {
+    // The dialog keeps the 32px footer gap the indicator dialog uses; the
+    // popover is tighter at 20px.
     return (
-      <YStack gap="$5" p="$5">
-        <SizableText size="$bodyLg" color="$text">
-          {editTitle}
-        </SizableText>
-        <IntervalGrid
-          options={editableOptions}
-          activeInterval={activeInterval}
-          selectedValues={draftPreferredValueSet}
-          section="edit"
-          showSelectedCheckMarks
-          highlightActiveInterval={false}
-          maxSelectedCount={maxPreferredIntervalCount ?? undefined}
-          onIntervalPress={handleDraftIntervalPress}
-        />
-        <XStack gap="$3" pt="$2">
+      <YStack
+        gap={isPopover ? '$5' : '$8'}
+        px="$5"
+        pt={isPopover ? '$5' : '$2'}
+        pb="$5"
+      >
+        {/* Same title/grid rhythm as IntervalsDialogSection on the list page. */}
+        <YStack gap="$3">
+          <SizableText size="$bodyMdMedium" color="$text">
+            {editTitle}
+          </SizableText>
+          <IntervalGrid
+            options={editableOptions}
+            activeInterval={activeInterval}
+            selectedValues={draftPreferredValueSet}
+            section="edit"
+            showSelectedCheckMarks
+            highlightActiveInterval={false}
+            maxSelectedCount={maxPreferredIntervalCount ?? undefined}
+            onIntervalPress={handleDraftIntervalPress}
+          />
+        </YStack>
+        <XStack gap="$2.5">
           <Button
             flex={1}
             size={footerButtonSize}
@@ -104,13 +120,25 @@ export function IntervalsDialogContent({
     );
   }
 
+  const editAction = (
+    <Button
+      testID="trading-view-native-intervals-edit-button"
+      {...NATIVE_CHART_SECTION_ACTION_BUTTON_PROPS}
+      iconAfter="ChevronRightSmallOutline"
+      onPress={handleEditPress}
+    >
+      {intl.formatMessage({ id: ETranslations.global_edit })}
+    </Button>
+  );
+
   return (
-    <YStack gap="$6" p="$5">
+    <YStack gap={sectionGap} {...contentPadding}>
       {preferredOptions.length ? (
         <IntervalsDialogSection
           title={intl.formatMessage({
             id: ETranslations.market_preferred_intervals,
           })}
+          action={editAction}
         >
           <IntervalGrid
             options={preferredOptions}
@@ -123,29 +151,6 @@ export function IntervalsDialogContent({
 
       <IntervalsDialogSection
         title={intl.formatMessage({ id: ETranslations.market_all_intervals })}
-        action={
-          <XStack
-            testID="trading-view-native-intervals-edit-button"
-            alignItems="center"
-            gap="$1"
-            px="$1"
-            py="$1"
-            cursor="pointer"
-            userSelect="none"
-            onPress={handleEditPress}
-          >
-            <SizableText size="$bodyLg" color="$textSubdued">
-              {intl.formatMessage({
-                id: ETranslations.market_edit_preferred_intervals,
-              })}
-            </SizableText>
-            <Icon
-              name="ChevronRightSmallOutline"
-              size="$5"
-              color="$iconSubdued"
-            />
-          </XStack>
-        }
       >
         <IntervalGrid
           options={options}
diff --git a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/hooks/useNativeIntervalSelector.ts b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/hooks/useNativeIntervalSelector.ts
index 6b0bda4587aa..cb62698a21d4 100644
--- a/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/hooks/useNativeIntervalSelector.ts
+++ b/packages/kit/src/components/TradingView/TradingViewV2/components/intervalSelector/hooks/useNativeIntervalSelector.ts
@@ -9,9 +9,9 @@ import {
   MAX_PREFERRED_INTERVAL_COUNT,
   MAX_VISIBLE_INTERVAL_COUNT,
   formatIntervalOptionDisplayLabel,
-  getAllIntervalOptions,
   getDefaultPreferredIntervalValues,
   getOptionsByValues,
+  getOrderedIntervalOptions,
   isIntervalOptionDisabled,
   normalizeIntervalOptions,
   readStoredPreferredIntervalValues,
@@ -112,7 +112,7 @@ export function useNativeIntervalSelector({
   );
 
   const dialogOptions = useMemo(
-    () => getAllIntervalOptions(options),
+    () => getOrderedIntervalOptions(options),
     [options],
   );
 
diff --git a/packages/kit/src/components/TradingView/TradingViewV2/components/utils/NativeChartControlsShared.ts b/packages/kit/src/components/TradingView/TradingViewV2/components/utils/NativeChartControlsShared.ts
index 8392a9706858..4f8b7846987d 100644
--- a/packages/kit/src/components/TradingView/TradingViewV2/components/utils/NativeChartControlsShared.ts
+++ b/packages/kit/src/components/TradingView/TradingViewV2/components/utils/NativeChartControlsShared.ts
@@ -13,6 +13,48 @@ export type ITradingViewNativeIndicatorControlMode = 'dialog' | 'popover';
 export type ITradingViewNativePriceMarketCapControlMode = 'settings' | 'select';
 export type ITradingViewNativeControlsLayoutMode = 'mobile' | 'desktop';
 
+/**
+ * Shared chrome for the option grids in the interval and indicator popovers so
+ * the two stay visually identical.
+ */
+export const NATIVE_CHART_OPTION_GRID_GAP = '$2';
+export const NATIVE_CHART_OPTION_PILL_LAYOUT_PROPS = {
+  flex: 1,
+  flexBasis: 0,
+  h: 32,
+  minWidth: 0,
+  px: '$2.5',
+  borderWidth: 1,
+  borderRadius: '$2',
+  borderCurve: 'continuous',
+} as const;
+
+export function getNativeChartOptionPillColors({
+  isHighlighted,
+  isDisabled,
+}: {
+  isHighlighted: boolean;
+  isDisabled?: boolean;
+}) {
+  const showsHighlight = isHighlighted && !isDisabled;
+  return {
+    bg: showsHighlight ? ('$bgActive' as const) : ('$bgStrong' as const),
+    borderColor: showsHighlight
+      ? ('$borderActive' as const)
+      : ('$transparent' as const),
+    color: isDisabled ? ('$textDisabled' as const) : ('$text' as const),
+  };
+}
+
+/** Section header action that reads as a link rather than a filled button. */
+export const NATIVE_CHART_SECTION_ACTION_BUTTON_PROPS = {
+  size: 'small',
+  variant: 'tertiary',
+  hoverStyle: {
+    bg: '$transparent',
+  },
+} as const;
+
 export const HEADER_ICON_BUTTON_STYLE_PROPS = {
   m: '$0',
   bg: '$transparent',