diff --git a/packages/ui-dashboard/package.json b/packages/ui-dashboard/package.json
index cb57e1a..dd68b15 100644
--- a/packages/ui-dashboard/package.json
+++ b/packages/ui-dashboard/package.json
@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@sentio/ui-dashboard",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Dashboard UI components for the Sentio platform, decoupled from backend services.",
   "exports": {
     ".": {
diff --git a/packages/ui-dashboard/src/charts/options/OptionPanels.stories.tsx b/packages/ui-dashboard/src/charts/options/OptionPanels.stories.tsx
index 253d7f5..cff82fa 100644
--- a/packages/ui-dashboard/src/charts/options/OptionPanels.stories.tsx
+++ b/packages/ui-dashboard/src/charts/options/OptionPanels.stories.tsx
@@ -4,11 +4,13 @@ import { LineControls } from './LineControls'
 import { LabelControls } from './LabelControls'
 import { PieChartControls } from './PieChartControls'
 import { BarGaugeControls } from './BarGaugeControls'
+import { ValueControls } from './ValueControls'
 import type {
   LineConfigLike,
   LabelConfigLike,
   PieConfigLike,
-  BarGaugeConfigLike
+  BarGaugeConfigLike,
+  ValueConfigLike
 } from '../../types'
 
 function Frame({
@@ -80,3 +82,25 @@ export const BarGauge: Story = () => {
   )
 }
 BarGauge.meta = { description: 'Bar-gauge direction/calculation/sort options' }
+
+export const Value: Story = () => {
+  const [config, setConfig] = useState<ValueConfigLike>({
+    valueFormatter: 'NumberFormatter',
+    style: 'Standard',
+    maxFractionDigits: 2
+  })
+  return (
+    <Frame value={config}>
+      <ValueControls
+        config={config}
+        onChange={setConfig}
+        defaultOpen
+        showPrefix
+        showSuffix
+      />
+    </Frame>
+  )
+}
+Value.meta = {
+  description: 'Value formatter (number/date/string mapping) + prefix/suffix'
+}
diff --git a/packages/ui-dashboard/src/charts/options/ValueControls.tsx b/packages/ui-dashboard/src/charts/options/ValueControls.tsx
new file mode 100644
index 0000000..526f9a9
--- /dev/null
+++ b/packages/ui-dashboard/src/charts/options/ValueControls.tsx
@@ -0,0 +1,77 @@
+import { defaults } from 'lodash'
+import { Checkbox, DisclosurePanel } from '@sentio/ui-core'
+import { produce } from 'immer'
+import {
+  ValueFormatters,
+  ValueOptions,
+  type ValueFormatter
+} from './ValueOptions'
+import type { ValueConfigLike } from '../../types'
+
+interface Props {
+  config?: ValueConfigLike
+  defaultOpen?: boolean
+  onChange: (config: ValueConfigLike) => void
+  formatters?: ValueFormatter[]
+  showPrefix?: boolean
+  showSuffix?: boolean
+}
+
+export const defaultConfig: ValueConfigLike = {
+  valueFormatter: 'NumberFormatter',
+  showValueLabel: false,
+  maxSignificantDigits: 3,
+  dateFormat: 'LLL',
+  mappingRules: [],
+  style: 'None',
+  maxFractionDigits: 2
+}
+
+export const ValueControls = ({
+  config,
+  defaultOpen,
+  onChange,
+  formatters = ValueFormatters,
+  showPrefix,
+  showSuffix
+}: Props) => {
+  config = defaults(config || {}, defaultConfig)
+  function toggleShowValueLabel(checked: boolean) {
+    config &&
+      onChange(
+        produce(config, (draft) => void (draft.showValueLabel = checked))
+      )
+  }
+  function toggleTooltipTotal(checked: boolean) {
+    config &&
+      onChange(produce(config, (draft) => void (draft.tooltipTotal = checked)))
+  }
+  return (
+    <DisclosurePanel
+      title="Value Options"
+      defaultOpen={defaultOpen}
+      containerClassName="w-full bg-default-bg"
+    >
+      <ValueOptions
+        onChange={onChange}
+        config={config}
+        formatters={formatters}
+        showPrefix={showPrefix}
+        showSuffix={showSuffix}
+      />
+
+      <div className="mt-2 flex items-center gap-2">
+        <Checkbox
+          checked={config?.showValueLabel}
+          onChange={toggleShowValueLabel}
+          label="Show value label"
+        />
+        <Checkbox
+          checked={config?.tooltipTotal}
+          onChange={toggleTooltipTotal}
+          label="Show total in tooltip"
+        />
+      </div>
+    </DisclosurePanel>
+  )
+}
diff --git a/packages/ui-dashboard/src/charts/options/ValueOptions.tsx b/packages/ui-dashboard/src/charts/options/ValueOptions.tsx
new file mode 100644
index 0000000..864a516
--- /dev/null
+++ b/packages/ui-dashboard/src/charts/options/ValueOptions.tsx
@@ -0,0 +1,321 @@
+import { produce } from 'immer'
+import { ComboInput, classNames } from '@sentio/ui-core'
+import { ValueStringMapping } from './ValueStringMapping'
+import type {
+  MappingRuleLike,
+  ValueConfigLike,
+  ValueFormatterLike,
+  ValueStyleLike
+} from '../../types'
+
+export interface ValueFormatter {
+  label: string
+  value: ValueFormatterLike
+}
+
+export const ValueFormatters: ValueFormatter[] = [
+  { label: 'Number', value: 'NumberFormatter' },
+  { label: 'Date', value: 'DateFormatter' },
+  { label: 'String', value: 'StringFormatter' }
+]
+
+interface Props {
+  config: ValueConfigLike
+  defaultOpen?: boolean
+  onChange: (config: ValueConfigLike) => void
+  formatters?: ValueFormatter[]
+  showPrefix?: boolean
+  showSuffix?: boolean
+}
+
+export const defaultConfig: ValueConfigLike = {
+  valueFormatter: 'NumberFormatter',
+  showValueLabel: false,
+  maxSignificantDigits: 3,
+  dateFormat: 'LLL',
+  mappingRules: [],
+  style: 'None'
+}
+
+const dateFormats = [
+  { label: 'Localized format', value: 'LLL' },
+  { label: 'ISO String', value: 'YYYY-MM-DDTHH:mm:ss.sssZ' }
+]
+
+const CurrencySymbols = [
+  { label: 'USD', value: '$' },
+  { label: 'EUR', value: '€' },
+  { label: 'GBP', value: '£' },
+  { label: 'CNY or JPY', value: '¥' },
+  { label: 'BTC', value: 'Ƀ' },
+  { label: 'ETH', value: 'Ξ' }
+]
+
+export const ValueOptions = ({
+  config,
+  onChange,
+  formatters = ValueFormatters,
+  showPrefix,
+  showSuffix
+}: Props) => {
+  function onChangeDateFormat(f: string) {
+    onChange(produce(config, (draft) => void (draft.dateFormat = f)))
+  }
+  function onChangeFormatter(f: ValueFormatterLike) {
+    onChange(produce(config, (draft) => void (draft.valueFormatter = f)))
+  }
+  function onChangeSymbol(symbol?: string) {
+    onChange(produce(config, (draft) => void (draft.currencySymbol = symbol)))
+  }
+  function onStyleChange(notation: ValueStyleLike) {
+    onChange(
+      produce(config, (draft) => {
+        draft.style = notation
+      })
+    )
+  }
+  function onDigitsChange(value: string, option: string) {
+    onChange(
+      produce(config, (draft) => {
+        const d = draft as Record<string, any>
+        if (value) {
+          const maxSignificantDigits = parseInt(value)
+          if (maxSignificantDigits >= 0 && maxSignificantDigits <= 20) {
+            d[option] = maxSignificantDigits
+          }
+        } else {
+          delete d[option]
+        }
+      })
+    )
+  }
+
+  function onMappingRulesChange(rules: MappingRuleLike[]) {
+    onChange(produce(config, (draft) => void (draft.mappingRules = rules)))
+  }
+
+  function onPrefixChange(value: string) {
+    onChange(
+      produce(config, (draft) => {
+        if (value) {
+          draft.prefix = value
+        } else {
+          delete draft.prefix
+        }
+      })
+    )
+  }
+
+  function onSuffixChange(value: string) {
+    onChange(
+      produce(config, (draft) => {
+        if (value) {
+          draft.suffix = value
+        } else {
+          delete draft.suffix
+        }
+      })
+    )
+  }
+
+  function numberAddons(style: ValueStyleLike) {
+    switch (style) {
+      case 'None':
+        return (
+          <>
+            <span className="sm:text-ilabel border-main inline-flex items-center border border-l-0 bg-gray-50 px-3 ">
+              Fraction Digits
+            </span>
+            <input
+              disabled
+              className="focus:border-primary-500 sm:text-ilabel min-w-20  border-main rounded-r-md border border-l-0  py-1"
+              value={''}
+            />
+          </>
+        )
+      case 'Percent':
+      case 'Standard':
+        return (
+          <>
+            <span className="sm:text-ilabel border-main inline-flex items-center border border-x-0 bg-gray-50 px-3 ">
+              Fraction Digits
+            </span>
+            <input
+              type="number"
+              min={0}
+              max={20}
+              className="focus:border-primary-500 sm:text-ilabel min-w-20 border-main focus:ring-3 focus:ring-primary-600/30 hover:border-primary-600 rounded-r-md border py-1"
+              value={config.maxFractionDigits}
+              placeholder={'0-20'}
+              onChange={(e) =>
+                onDigitsChange(e.target.value, 'maxFractionDigits')
+              }
+            />
+          </>
+        )
+      case 'Currency':
+        return (
+          <>
+            <span className="sm:text-ilabel border-main inline-flex items-center border border-r-0  bg-gray-50 px-3 ">
+              Symbol
+            </span>
+            <div className="w-28 ">
+              <ComboInput
+                onChange={onChangeSymbol}
+                options={CurrencySymbols.map((s) => s.value)}
+                displayFn={(s) => {
+                  const name = CurrencySymbols.find((c) => c.value === s)?.label
+                  return `${name} (${s})`
+                }}
+                placeholder={'$'}
+                value={config?.currencySymbol}
+              />
+            </div>
+            <span className="sm:text-ilabel border-main inline-flex items-center border  bg-gray-50 px-3 ">
+              Precision
+            </span>
+            <input
+              type="number"
+              min={0}
+              max={20}
+              className="focus:border-primary-500 sm:text-ilabel min-w-20  border-main rounded-r-md border border-l-0  py-1"
+              value={config.precision}
+              defaultValue={2}
+              placeholder={'0-20'}
+              onChange={(e) => onDigitsChange(e.target.value, 'precision')}
+            />
+          </>
+        )
+      default:
+        return (
+          <>
+            <span className="sm:text-ilabel border-main inline-flex items-center border border-x-0 bg-gray-50 px-3 ">
+              Max significant digits
+            </span>
+            <input
+              type="number"
+              min={1}
+              max={21}
+              className="focus:border-primary-600 sm:text-ilabel min-w-20 border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 rounded-r-md border py-1"
+              value={config.maxSignificantDigits}
+              placeholder={'1-21'}
+              onChange={(e) =>
+                onDigitsChange(e.target.value, 'maxSignificantDigits')
+              }
+            />
+          </>
+        )
+    }
+  }
+
+  return (
+    <>
+      <div>
+        <div className="flex">
+          <span className="sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ">
+            Value formatter
+          </span>
+          <select
+            value={config.valueFormatter}
+            className={classNames(
+              'sm:text-ilabel border-main text-text-foreground hover:border-primary-600 inline-flex items-center border py-1.5 pl-4 pr-7 focus:ring-0',
+              config.valueFormatter == 'StringFormatter' ? 'rounded-r-md' : ''
+            )}
+            onChange={(e) =>
+              onChangeFormatter(e.target.value as ValueFormatterLike)
+            }
+          >
+            {formatters.map((d) => {
+              return (
+                <option key={d.value} value={d.value}>
+                  {d.label}
+                </option>
+              )
+            })}
+          </select>
+          {config.valueFormatter == 'NumberFormatter' && (
+            <>
+              <span className="sm:text-ilabel border-main inline-flex items-center border border-l-0 border-r-0 bg-gray-50 px-3 ">
+                Style
+              </span>
+              <select
+                value={config.style}
+                className="sm:text-ilabel border-main text-text-foreground hover:border-primary-600 inline-flex items-center border py-1 pl-4 pr-7 focus:ring-0"
+                onChange={(e) =>
+                  onStyleChange(e.target.value as ValueStyleLike)
+                }
+              >
+                <option value={'None'}>None</option>
+                <option value={'Compact'}>Compact</option>
+                <option value={'Standard'}>Standard</option>
+                <option value={'Scientific'}>Scientific</option>
+                <option value={'Percent'}>Percent</option>
+                <option value={'Currency'}>Currency</option>
+              </select>
+              {config.style && numberAddons(config.style)}
+            </>
+          )}
+          {config.valueFormatter == 'DateFormatter' && (
+            <>
+              <span className="sm:text-ilabel border-main inline-flex items-center border border-l-0  bg-gray-50 px-3 ">
+                Date format
+              </span>
+              <select
+                value={config.dateFormat}
+                className="sm:text-ilabel border-main text-text-foreground inline-flex items-center rounded-r-md border  border-l-0  py-1  pl-4 pr-7"
+                onChange={(e) => onChangeDateFormat(e.target.value)}
+              >
+                {dateFormats.map((d) => {
+                  return (
+                    <option key={d.value} value={d.value}>
+                      {d.label}
+                    </option>
+                  )
+                })}
+              </select>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Prefix and Suffix Configuration */}
+      {(showPrefix || showSuffix) && (
+        <div>
+          <div className="mt-2 flex items-center gap-4">
+            {showPrefix && (
+              <div className="border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border">
+                <div className="h-7.5 leading-7.5 border-r px-3">Prefix</div>
+                <input
+                  type="text"
+                  className="border-0 px-3 py-1.5 focus:ring-0"
+                  value={config.prefix || ''}
+                  placeholder="e.g., $, #"
+                  onChange={(e) => onPrefixChange(e.target.value)}
+                />
+              </div>
+            )}
+            {showSuffix && (
+              <div className="border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border">
+                <div className="h-7.5 leading-7.5 border-r px-3">Suffix</div>
+                <input
+                  type="text"
+                  className="min-w-32 border-0 px-3 py-1.5 focus:ring-0"
+                  value={config.suffix || ''}
+                  placeholder="e.g., %, USD, tokens"
+                  onChange={(e) => onSuffixChange(e.target.value)}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {config.valueFormatter == 'StringFormatter' && (
+        <ValueStringMapping
+          rules={config.mappingRules || []}
+          onChange={onMappingRulesChange}
+        />
+      )}
+    </>
+  )
+}
diff --git a/packages/ui-dashboard/src/charts/options/ValueStringMapping.tsx b/packages/ui-dashboard/src/charts/options/ValueStringMapping.tsx
new file mode 100644
index 0000000..5ae8b4b
--- /dev/null
+++ b/packages/ui-dashboard/src/charts/options/ValueStringMapping.tsx
@@ -0,0 +1,161 @@
+import { LuPlus, LuTrash2 } from 'react-icons/lu'
+import { Button, classNames } from '@sentio/ui-core'
+import { produce } from 'immer'
+import type { MappingRuleLike } from '../../types'
+
+const operators = {
+  '>': 'greater than',
+  '>=': 'greater or equal',
+  '==': 'equal',
+  '!=': 'not equal',
+  '<': 'less than',
+  '<=': 'less or equal'
+}
+
+interface Props {
+  rules: MappingRuleLike[]
+  onChange: (rules: MappingRuleLike[]) => void
+}
+
+const renderTreeLine = (index: number, isLast: boolean) => {
+  return (
+    <div className="mr-2 flex h-12 w-3 flex-col items-center justify-center">
+      <div className="flex h-full w-full items-center">
+        <div
+          className={classNames(
+            'w-px bg-gray-300',
+            isLast
+              ? 'h-1/2 self-start'
+              : index === 0
+                ? 'h-full self-end'
+                : 'h-full'
+          )}
+        ></div>
+        <div className="h-px w-3 bg-gray-300"></div>
+        {/* <div className="w-1.5 h-1.5 bg-gray-400 rounded-full"></div> */}
+      </div>
+    </div>
+  )
+}
+
+export function ValueStringMapping({ rules, onChange }: Props) {
+  const addRule = () => {
+    onChange(
+      produce(rules, (draft) => {
+        draft = draft || []
+        draft.push({
+          comparison: '==',
+          value: 0,
+          text: ''
+        })
+      })
+    )
+  }
+
+  function removeRule(index: number) {
+    onChange(
+      produce(rules, (draft) => {
+        draft.splice(index, 1)
+      })
+    )
+  }
+
+  function changeRule(index: number, field: string, value: any) {
+    onChange(
+      produce(rules, (draft) => {
+        ;(draft[index] as Record<string, any>)[field] = value
+      })
+    )
+  }
+
+  return (
+    <div className="flex w-full flex-col rounded-md py-2">
+      {(rules || []).map((rule, index) => {
+        const isLast = index === (rules || []).length - 1
+        return (
+          <div
+            key={index}
+            className="text-text-foreground flex h-10 items-center py-1"
+          >
+            {renderTreeLine(index, isLast)}
+            <span className="sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium">
+              If value is
+            </span>
+            <select
+              value={rule.comparison}
+              onChange={(e) => changeRule(index, 'comparison', e.target.value)}
+              className="rounded-r-0 sm:text-ilabel border-main text-text-foreground focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 inline-flex h-full items-center rounded-l-md border border-r-0 bg-gray-50 py-1 pl-4 pr-7"
+            >
+              {Object.entries(operators).map(([op, display]) => {
+                return (
+                  <option key={op} value={op}>
+                    is {display}
+                  </option>
+                )
+              })}
+            </select>
+            <input
+              type="text"
+              name="value"
+              id="value"
+              className="w-30 rounded-l-0 sm:text-ilabel border-main hover:border-primary-600 focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 block h-full rounded-r-md border px-2 py-1"
+              placeholder="0"
+              value={rule.value}
+              onChange={(e) => {
+                changeRule(index, 'value', e.target.value)
+              }}
+            />
+            <span className="sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium">
+              , then show
+            </span>
+            <input
+              type="text"
+              name="text"
+              id="text"
+              className="sm:text-ilabel border-main hover:border-primary-600 focus:border-primary-600 focus:ring-3  focus:ring-primary-600/30 block h-full w-80 rounded-md px-2 py-1"
+              placeholder="Display text (e.g. High, Low, Normal)"
+              value={rule.text}
+              onChange={(e) => {
+                changeRule(index, 'text', e.target.value)
+              }}
+            />
+            {/* TODO: implement color mapping in data-grid component */}
+            {/* <span className="sm:text-ilabel  inline-flex h-full items-center rounded-none px-3 font-medium">
+              also set color
+            </span>
+            <span className="focus-within:ring-primary-500 rounded-md border border-main px-0.5 focus-within:border-transparent focus-within:ring-2">
+              <ColorSelect
+                value={rule.colorTheme}
+                onChange={(colorTheme) => {
+                  changeRule(index, 'colorTheme', colorTheme?.value)
+                }}
+              />
+            </span>
+            <div className="flex-1"></div> */}
+            <button
+              type="button"
+              className="mx-2"
+              aria-label="remove"
+              onClick={() => removeRule(index)}
+            >
+              <LuTrash2
+                className={'icon text-text-foreground-disabled'}
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+        )
+      })}
+      <Button
+        type="button"
+        role="secondary"
+        className="mt-1 w-fit flex-none"
+        aria-label="remove"
+        onClick={addRule}
+      >
+        <LuPlus className={classNames('h-4 w-4')} aria-hidden="true" />
+        Add Formatting Rule
+      </Button>
+    </div>
+  )
+}
diff --git a/packages/ui-dashboard/src/charts/options/index.ts b/packages/ui-dashboard/src/charts/options/index.ts
index 5c2bb8d..1ca50bd 100644
--- a/packages/ui-dashboard/src/charts/options/index.ts
+++ b/packages/ui-dashboard/src/charts/options/index.ts
@@ -1,5 +1,5 @@
 // Chart option panels (phase 3b). Data-coupled panels (Data/Series/TimeRange/
-// Table/Scatter/Yaxis/Xaxis, value-formatting trio) follow in later slices.
+// Table/Scatter/Yaxis/Xaxis) follow in later slices.
 export { LineControls } from './LineControls'
 export { LabelControls } from './LabelControls'
 export {
@@ -10,3 +10,14 @@ export {
   BarGaugeControls,
   defaultConfig as defaultBarGaugeConfig
 } from './BarGaugeControls'
+export {
+  ValueOptions,
+  ValueFormatters,
+  defaultConfig as defaultValueConfig,
+  type ValueFormatter
+} from './ValueOptions'
+export {
+  ValueControls,
+  defaultConfig as defaultValueControlsConfig
+} from './ValueControls'
+export { ValueStringMapping } from './ValueStringMapping'