diff --git a/projects/sdk/src/constants/addresses.ts b/projects/sdk/src/constants/addresses.ts
index 3ac0a7243e..edb309b2d1 100644
--- a/projects/sdk/src/constants/addresses.ts
+++ b/projects/sdk/src/constants/addresses.ts
@@ -15,7 +15,7 @@ export const addresses = {
   DEPOT: Address.make("0xDEb0f00071497a5cc9b4A6B96068277e57A82Ae2"),
   PIPELINE: Address.make("0xb1bE0000C6B3C62749b5F0c92480146452D15423"),
   ROOT: Address.make("0x77700005BEA4DE0A78b956517f099260C2CA9a26"),
-  USD_ORACLE: Address.make("0xE0AdBED7e2ac72bc7798c5DC33aFD77B068db7Fd"),
+  USD_ORACLE: Address.make("0xb24a70b71e4cca41eb114c2f61346982aa774180"),
   UNWRAP_AND_SEND_ETH_JUNCTION: Address.make("0x737Cad465B75CDc4c11B3E312Eb3fe5bEF793d96"),
 
   // ----------------------------------------
diff --git a/projects/ui/.eslintrc.js b/projects/ui/.eslintrc.js
index 3fbec13c29..1cb064bc03 100644
--- a/projects/ui/.eslintrc.js
+++ b/projects/ui/.eslintrc.js
@@ -86,7 +86,7 @@ module.exports = {
     'no-trailing-spaces': 0,
 
     // -- Emotion css prop on DOM element override - https://emotion.sh/docs/eslint-plugin-react
-    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
 
     // -- Other (to categorize)
     'react/button-has-type': 0,
@@ -101,8 +101,17 @@ module.exports = {
     'no-continue': 0,
     'import/extensions': 0,
     'newline-per-chained-call': 0,
-    'no-use-before-define': 0,
-    '@typescript-eslint/no-use-before-define': 'error',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': [
+      'error',
+      {
+        functions: false,
+        classes: true,
+        variables: true,
+        typedefs: true,
+        allowNamedExports: true,
+      },
+    ],
     'import/prefer-default-export': 0,
     'react/jsx-props-no-spreading': 0,
     'jsx-a11y/label-has-associated-control': 0,
diff --git a/projects/ui/.prettierignore b/projects/ui/.prettierignore
new file mode 100644
index 0000000000..5bf8b8a237
--- /dev/null
+++ b/projects/ui/.prettierignore
@@ -0,0 +1,7 @@
+./src/generated
+./src/graph/graphql.schema.json
+./src/graph/schema-bean.graphql
+./src/graph/schema-beanft.graphql
+./src/graph/schema-beanstalk.graphql
+./src/graph/schema-snapshot1.graphql
+./src/graph/schema-snapshot2.graphql
diff --git a/projects/ui/src/components/Analytics/AdvancedChart.tsx b/projects/ui/src/components/Analytics/AdvancedChart.tsx
index 3c04e6a35a..a673a78de2 100644
--- a/projects/ui/src/components/Analytics/AdvancedChart.tsx
+++ b/projects/ui/src/components/Analytics/AdvancedChart.tsx
@@ -13,14 +13,16 @@ import SelectDialog from './SelectDialog';
 import { useChartSetupData } from './useChartSetupData';
 import CalendarButton from './CalendarButton';
 
-type QueryData = {
-  time: Time,
-  value: number,
+export type ChartQueryData = {
+  time: Time;
+  value: number;
   customValues: {
-    season: number
+    season: number;
   };
 };
 
+type QueryData = ChartQueryData;
+
 const AdvancedChart: FC<{ isMobile?: boolean }> = ({ isMobile = false }) => {
   const season = useSeason();
   const chartSetupData = useChartSetupData();
@@ -92,17 +94,20 @@ const AdvancedChart: FC<{ isMobile?: boolean }> = ({ isMobile = false }) => {
                           && timestamps.get(seasonData.season - 1) !== timestamps.get(seasonData.season)
                         ) {
                           const formattedTime = timestamps.get(seasonData.season);
+                          const dataFormatter = chartSetupData[chartId].dataFormatter;
+                          const _seasonData = dataFormatter ? dataFormatter(seasonData) : seasonData;
+
                           const formattedValue = chartSetupData[
                             chartId
                           ].valueFormatter(
-                            seasonData[chartSetupData[chartId].priceScaleKey]
+                            _seasonData[chartSetupData[chartId].priceScaleKey]
                           );
                           if (formattedTime > 0) {
-                            output[chartId][seasonData.season] = {
-                              time: formattedTime,
+                            output[chartId][_seasonData.season] = {
+                              time: formattedTime, 
                               value: formattedValue,
                               customValues: {
-                                season: seasonData.season
+                                season: _seasonData.season
                               }
                             };
                           };
diff --git a/projects/ui/src/components/Analytics/CalendarButton.tsx b/projects/ui/src/components/Analytics/CalendarButton.tsx
index fbb611c99b..77d46b7579 100644
--- a/projects/ui/src/components/Analytics/CalendarButton.tsx
+++ b/projects/ui/src/components/Analytics/CalendarButton.tsx
@@ -37,9 +37,8 @@ import CloseIcon from '@mui/icons-material/Close';
 import { Range, Time } from 'lightweight-charts';
 
 type CalendarProps = {
-  setTimePeriod: React.Dispatch<
-    React.SetStateAction<Range<Time> | undefined>
-  >;
+  setTimePeriod: React.Dispatch<React.SetStateAction<Range<Time> | undefined>>;
+  storageKeyPrefix?: string;
 };
 
 type CalendarContentProps = {
@@ -47,13 +46,10 @@ type CalendarContentProps = {
   isMobile: boolean;
   range: DateRange | undefined;
   selectedPreset: string;
-  handleChange: (
-    newRange?: DateRange,
-    _preset?: string
-  ) => void;
+  handleChange: (newRange?: DateRange, _preset?: string) => void;
 };
 
-const presetRanges: {
+export const CalendarPresetRanges: {
   key: string;
   from: Date | undefined;
   to: Date | undefined;
@@ -161,7 +157,7 @@ const CalendarContent: FC<CalendarContentProps> = ({
     if (type === 'date') {
       const currentValue = inputValue;
       const currentTime = inputTime;
-      
+
       setInputValue({
         from: target === 'from' ? value : currentValue.from,
         to: target === 'to' ? value : currentValue.to,
@@ -179,20 +175,30 @@ const CalendarContent: FC<CalendarContentProps> = ({
         minutes: 5,
       });
 
-      const currentDateFrom = currentValue.from ? parse(currentValue.from, 'MM/dd/yyyy', new Date()) : undefined;
-      const currentDateTo = currentValue.to ? parse(currentValue.to, 'MM/dd/yyyy', new Date()) : undefined;
+      const currentDateFrom = currentValue.from
+        ? parse(currentValue.from, 'MM/dd/yyyy', new Date())
+        : undefined;
+      const currentDateTo = currentValue.to
+        ? parse(currentValue.to, 'MM/dd/yyyy', new Date())
+        : undefined;
 
       if (isValid(parsedDate)) {
-        handleChange({
-          from: target === 'from' ? parsedDate : currentDateFrom,
-          to: target === 'to' ? parsedDate : currentDateTo,
-        }, 'CUSTOM');
+        handleChange(
+          {
+            from: target === 'from' ? parsedDate : currentDateFrom,
+            to: target === 'to' ? parsedDate : currentDateTo,
+          },
+          'CUSTOM'
+        );
         setMonth(parsedDate);
       } else {
-        handleChange({
-          from: undefined,
-          to: undefined,
-        }, 'ALL');
+        handleChange(
+          {
+            from: undefined,
+            to: undefined,
+          },
+          'ALL'
+        );
       }
     } else if (type === 'time') {
       const currentValue = inputTime;
@@ -266,65 +272,75 @@ const CalendarContent: FC<CalendarContentProps> = ({
         }}
       >
         {['from', 'to'].map((inputType) => {
-          
           const dateRange = range?.[inputType as keyof typeof inputValue];
-          const formattedDate = dateRange ? format(dateRange, 'MM/dd/yyy') : undefined;
-          const formattedHour = dateRange ? format(dateRange, 'HH:mm') : undefined;
+          const formattedDate = dateRange
+            ? format(dateRange, 'MM/dd/yyy')
+            : undefined;
+          const formattedHour = dateRange
+            ? format(dateRange, 'HH:mm')
+            : undefined;
 
-        return (
-          <Box
-            display="flex"
-            key={`timeInputField-${inputType}`}
-            paddingX={1.6}
-            maxWidth={isMobile ? undefined : 310}
-            gap={0.8}
-          >
-            <TextField
-              sx={{
-                display: isMobile ? 'flex' : undefined,
-                flexGrow: isMobile ? 1 : undefined,
-                width: isMobile ? undefined : 160,
-                '& .MuiOutlinedInput-root': {
-                  height: 32,
-                  borderRadius: 0.6,
-                },
-              }}
-              value={inputValue[inputType as keyof typeof inputValue] || formattedDate}
-              placeholder="MM/DD/YYYY"
-              size="small"
-              color="primary"
-              onChange={(e) => {
-                handleInputChange('date', inputType, e.target.value);
-              }}
-            />
-            <TextField
-              sx={{
-                width: isMobile ? 140 : 120,
-                '& .MuiOutlinedInput-root': {
-                  height: 32,
-                  borderRadius: 0.6,
-                },
-              }}
-              value={inputTime[inputType as keyof typeof inputTime] || formattedHour}
-              placeholder="00:00"
-              size="small"
-              color="primary"
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end" sx={{ ml: 0, mr: -0.5 }}>
-                    <AccessTimeIcon sx={{ scale: '80%' }} />
-                  </InputAdornment>
-                ),
-              }}
-              onChange={(e) => {
-                handleInputChange('time', inputType, e.target.value);
-              }}
-              onBlur={(e) => {
-                formatInputTimeOnBlur(inputType, e.target.value);
-              }}
-            />
-          </Box>
-        )})}
+          return (
+            <Box
+              display="flex"
+              key={`timeInputField-${inputType}`}
+              paddingX={1.6}
+              maxWidth={isMobile ? undefined : 310}
+              gap={0.8}
+            >
+              <TextField
+                sx={{
+                  display: isMobile ? 'flex' : undefined,
+                  flexGrow: isMobile ? 1 : undefined,
+                  width: isMobile ? undefined : 160,
+                  '& .MuiOutlinedInput-root': {
+                    height: 32,
+                    borderRadius: 0.6,
+                  },
+                }}
+                value={
+                  inputValue[inputType as keyof typeof inputValue] ||
+                  formattedDate
+                }
+                placeholder="MM/DD/YYYY"
+                size="small"
+                color="primary"
+                onChange={(e) => {
+                  handleInputChange('date', inputType, e.target.value);
+                }}
+              />
+              <TextField
+                sx={{
+                  width: isMobile ? 140 : 120,
+                  '& .MuiOutlinedInput-root': {
+                    height: 32,
+                    borderRadius: 0.6,
+                  },
+                }}
+                value={
+                  inputTime[inputType as keyof typeof inputTime] ||
+                  formattedHour
+                }
+                placeholder="00:00"
+                size="small"
+                color="primary"
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end" sx={{ ml: 0, mr: -0.5 }}>
+                      <AccessTimeIcon sx={{ scale: '80%' }} />
+                    </InputAdornment>
+                  ),
+                }}
+                onChange={(e) => {
+                  handleInputChange('time', inputType, e.target.value);
+                }}
+                onBlur={(e) => {
+                  formatInputTimeOnBlur(inputType, e.target.value);
+                }}
+              />
+            </Box>
+          );
+        })}
       </Box>
       <Divider
         sx={{
@@ -426,7 +442,7 @@ const CalendarContent: FC<CalendarContentProps> = ({
             flexGrow={1}
             justifyContent="space-between"
           >
-            {presetRanges.map((preset) => (
+            {CalendarPresetRanges.map((preset) => (
               <Button
                 key={`timePeriodPreset${preset.key}`}
                 variant={
@@ -446,10 +462,13 @@ const CalendarContent: FC<CalendarContentProps> = ({
                 }}
                 disableRipple
                 onClick={() => {
-                  handleChange({
-                    from: preset.from,
-                    to: preset.to,
-                  }, preset.key);
+                  handleChange(
+                    {
+                      from: preset.from,
+                      to: preset.to,
+                    },
+                    preset.key
+                  );
                 }}
               >
                 {preset.key}
@@ -462,7 +481,10 @@ const CalendarContent: FC<CalendarContentProps> = ({
   );
 };
 
-const CalendarButton: FC<CalendarProps> = ({ setTimePeriod }) => {
+const CalendarButton: FC<CalendarProps> = ({
+  storageKeyPrefix = 'advancedChart',
+  setTimePeriod,
+}) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -480,30 +502,40 @@ const CalendarButton: FC<CalendarProps> = ({ setTimePeriod }) => {
     setAnchorEl(null);
   }, []);
 
-  const storedSetting1 = localStorage.getItem('advancedChartRange');
+  const storedSetting1 = localStorage.getItem(`${storageKeyPrefix}Range`);
   const storedRange = storedSetting1 ? JSON.parse(storedSetting1) : undefined;
 
-  const storedSetting2 = localStorage.getItem('advancedChartPreset');
+  const storedSetting2 = localStorage.getItem(`${storageKeyPrefix}Preset`);
   const storedPreset = storedSetting2 ? JSON.parse(storedSetting2) : undefined;
 
-  const [range, setRange] = useState<DateRange>(storedRange || initialRange);
   const [selectedPreset, setPreset] = useState<string>(storedPreset || '1W');
+  const [range, setRange] = useState<DateRange>(storedRange || initialRange);
 
   const handleChange = (newRange?: DateRange, _preset?: string) => {
     if (newRange) {
       const newTimePeriod = {
-        from: (newRange?.from || 0).valueOf() / 1000 as Time,
-        to: (newRange?.to || Date.now()).valueOf() / 1000 as Time,
+        from: ((newRange.from || 0).valueOf() / 1000) as Time,
+        to: ((newRange.to || Date.now()).valueOf() / 1000) as Time,
       };
       setRange(newRange);
       setTimePeriod(newTimePeriod);
-      localStorage.setItem('advancedChartRange', JSON.stringify(newRange));
-      localStorage.setItem('advancedChartTimePeriod', JSON.stringify(newTimePeriod));
-    };
+
+      localStorage.setItem(
+        `${storageKeyPrefix}Range`,
+        JSON.stringify(newRange)
+      );
+      localStorage.setItem(
+        `${storageKeyPrefix}TimePeriod`,
+        JSON.stringify(newTimePeriod)
+      );
+    }
     if (_preset) {
       setPreset(_preset);
-      localStorage.setItem('advancedChartPreset', JSON.stringify(_preset));
-    };
+      localStorage.setItem(
+        `${storageKeyPrefix}Preset`,
+        JSON.stringify(_preset)
+      );
+    }
   };
 
   return (
@@ -511,7 +543,7 @@ const CalendarButton: FC<CalendarProps> = ({ setTimePeriod }) => {
       <Box sx={{ display: 'flex' }}>
         <Box sx={{ display: 'flex', gap: 0.5 }}>
           {!isMobile &&
-            presetRanges.map((preset) => (
+            CalendarPresetRanges.map((preset) => (
               <Button
                 key={`timePeriodPreset${preset.key}`}
                 variant="text"
@@ -527,10 +559,13 @@ const CalendarButton: FC<CalendarProps> = ({ setTimePeriod }) => {
                 }}
                 disableRipple
                 onClick={() => {
-                  handleChange({
-                    from: preset.from,
-                    to: preset.to,
-                  }, preset.key);
+                  handleChange(
+                    {
+                      from: preset.from,
+                      to: preset.to,
+                    },
+                    preset.key
+                  );
                 }}
               >
                 {preset.key}
diff --git a/projects/ui/src/components/Analytics/ChartV2.tsx b/projects/ui/src/components/Analytics/ChartV2.tsx
index 6a17d951f8..4148a86e4d 100644
--- a/projects/ui/src/components/Analytics/ChartV2.tsx
+++ b/projects/ui/src/components/Analytics/ChartV2.tsx
@@ -27,7 +27,7 @@ import { VertLine } from '~/util/lightweight-charts-plugins/vertical-line/vertic
 import { useChartSetupData } from './useChartSetupData';
 import { chartColors } from './chartColors';
 
-type ChartV2DataProps = {
+export type ChartV2DataProps = {
   /** 
    * Series of timestampped values to be charted.
    * Must be in ascending order.
diff --git a/projects/ui/src/components/Analytics/MiniCharts.tsx b/projects/ui/src/components/Analytics/MiniCharts.tsx
index a0ccd2f151..cdd0a25009 100644
--- a/projects/ui/src/components/Analytics/MiniCharts.tsx
+++ b/projects/ui/src/components/Analytics/MiniCharts.tsx
@@ -8,10 +8,10 @@ import ChartV2 from './ChartV2';
 import { useChartSetupData } from './useChartSetupData';
 
 type QueryData = {
-  time: Time,
-  value: number,
+  time: Time;
+  value: number;
   customValues: {
-    season: number
+    season: number;
   };
 };
 
@@ -48,7 +48,7 @@ const MiniCharts: FC<{}> = () => {
       const output: any[] = [];
       const timestamps = new Map();
 
-      const maxRetries = 8
+      const maxRetries = 8;
       for (let retries = 0; retries < maxRetries; retries += 1) {
         console.debug('[MiniChart] Fetching data...');
         try {
@@ -60,9 +60,13 @@ const MiniCharts: FC<{}> = () => {
 
             const currentSeason = season.toNumber();
 
-            const iterations = getAllData ? Math.ceil(currentSeason / 1000) + 1 : 1;
+            const iterations = getAllData
+              ? Math.ceil(currentSeason / 1000) + 1
+              : 1;
             for (let j = 0; j < iterations; j += 1) {
-              const startSeason = getAllData ? currentSeason - j * 1000 : 999999999;
+              const startSeason = getAllData
+                ? currentSeason - j * 1000
+                : 999999999;
               if (startSeason <= 0) continue;
               promises.push(
                 apolloClient
@@ -86,28 +90,34 @@ const MiniCharts: FC<{}> = () => {
                         if (!timestamps.has(seasonData.season)) {
                           timestamps.set(
                             seasonData.season,
-                            Number(seasonData[chartSetupData[chartId].timeScaleKey])
+                            Number(
+                              seasonData[chartSetupData[chartId].timeScaleKey]
+                            )
                           );
                         }
-                        const formattedTime = timestamps.get(seasonData.season);
+                        const fmt = chartSetupData[chartId]?.dataFormatter;
+                        const _seasonData = fmt?.(seasonData) || seasonData;
+                        const formattedTime = timestamps.get(
+                          _seasonData.season
+                        );
                         const formattedValue = chartSetupData[
                           chartId
                         ].valueFormatter(
-                          seasonData[chartSetupData[chartId].priceScaleKey]
+                          _seasonData[chartSetupData[chartId].priceScaleKey]
                         );
-                        output[chartId][seasonData.season] = {
+                        output[chartId][_seasonData.season] = {
                           time: formattedTime,
                           value: formattedValue,
                           customValues: {
-                            season: seasonData.season
-                          }
+                            season: _seasonData.season,
+                          },
                         };
                       }
                     });
                   })
               );
-            };
-          };
+            }
+          }
           await Promise.all(promises);
           output.forEach((dataSet, index) => {
             output[index] = dataSet.filter(Boolean);
@@ -120,10 +130,10 @@ const MiniCharts: FC<{}> = () => {
           console.error(e);
           if (retries === maxRetries - 1) {
             setError(true);
-          };
-        };
-      };
-    };
+          }
+        }
+      }
+    }
 
     setLoading(true);
     getSeasonData();
@@ -134,7 +144,10 @@ const MiniCharts: FC<{}> = () => {
     <>
       <Box display="flex" flexDirection="row" gap={2}>
         {selectedCharts.map((chart, index) => (
-          <Card key={`selectedMiniChart${index}`} sx={{ width: '100%', height: '15vh', minHeight: 150 }}>
+          <Card
+            key={`selectedMiniChart${index}`}
+            sx={{ width: '100%', height: '15vh', minHeight: 150 }}
+          >
             {loading ? (
               <Box
                 sx={{
@@ -146,8 +159,7 @@ const MiniCharts: FC<{}> = () => {
               >
                 <CircularProgress variant="indeterminate" />
               </Box>
-            ) : 
-            error ? (
+            ) : error ? (
               <Box
                 sx={{
                   display: 'flex',
@@ -158,8 +170,7 @@ const MiniCharts: FC<{}> = () => {
               >
                 Error fetching data
               </Box>
-            ) :
-            (
+            ) : (
               <ChartV2
                 formattedData={queryData}
                 selected={[chart]}
diff --git a/projects/ui/src/components/Analytics/SingleAdvancedChart.tsx b/projects/ui/src/components/Analytics/SingleAdvancedChart.tsx
new file mode 100644
index 0000000000..e5fab0a219
--- /dev/null
+++ b/projects/ui/src/components/Analytics/SingleAdvancedChart.tsx
@@ -0,0 +1,555 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  ClickAwayListener,
+  Grow,
+  IconButton,
+  Popper,
+  Stack,
+  useTheme,
+} from '@mui/material';
+import {
+  createChart,
+  CreatePriceLineOptions,
+  IChartApi,
+  ISeriesApi,
+  MouseEventParams,
+  Range,
+  TickMarkType,
+  Time,
+} from 'lightweight-charts';
+import { VertLine } from '~/util/lightweight-charts-plugins/vertical-line/vertical-line';
+import SettingsIcon from '@mui/icons-material/Settings';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import useChartTimePeriodState from '~/hooks/display/useChartTimePeriodState';
+import CalendarButton from './CalendarButton';
+import { ChartV2DataProps } from './ChartV2';
+import { chartColors } from './chartColors';
+import { ChartQueryData } from './AdvancedChart';
+import ChartInfoOverlay from '../Common/Charts/ChartInfoOverlay';
+
+const ChartErrorState = () => (
+  <Box
+    sx={{
+      display: 'flex',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}
+  >
+    Error fetching data
+  </Box>
+);
+
+const ChartLoadingState = () => (
+  <Box
+    sx={{
+      display: 'flex',
+      height: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}
+  >
+    <CircularProgress variant="indeterminate" />
+  </Box>
+);
+
+const getTimezoneCorrectedTime = (
+  utcTime: Date,
+  tickMarkType: TickMarkType
+) => {
+  const timestamp =
+    utcTime instanceof Date ? utcTime.getTime() / 1000 : utcTime;
+  const correctedTime = new Date(timestamp * 1000);
+  let options = {};
+  switch (tickMarkType) {
+    case TickMarkType.Year:
+      options = {
+        year: 'numeric',
+      };
+      break;
+    case TickMarkType.Month:
+      options = {
+        month: 'short',
+      };
+      break;
+    case TickMarkType.DayOfMonth:
+      options = {
+        day: '2-digit',
+      };
+      break;
+    case TickMarkType.Time:
+      options = {
+        hour: '2-digit',
+        minute: '2-digit',
+      };
+      break;
+    default:
+      options = {
+        hour: '2-digit',
+        minute: '2-digit',
+        seconds: '2-digit',
+      };
+  }
+  return correctedTime.toLocaleString('en-GB', options);
+};
+
+const priceScaleModes = [
+  'Normal',
+  'Logarithmic',
+  'Percentage',
+  'Indexed to 100',
+];
+
+type OmmitedV2DataProps = Omit<
+  ChartV2DataProps,
+  'timePeriod' | 'selected' | 'formattedData' | 'size'
+>;
+
+type ChartProps = OmmitedV2DataProps & {
+  seriesData: ChartQueryData[];
+  tickFormatter: (v: number) => string | undefined;
+  timeState: ReturnType<typeof useChartTimePeriodState>;
+  valueAxisType: string;
+  tooltipHoverText: string;
+  tooltipTitle: string;
+  storageKeyPrefix?: string;
+  queryLoading?: boolean;
+  queryError?: boolean;
+};
+
+type DataPoint = {
+  time: string | null;
+  value: number | null;
+  season: number | null;
+  timestamp: string | number | Object;
+};
+
+const Chart = ({
+  drawPegLine,
+  drawExploitLine = true,
+  seriesData,
+  timeState,
+  queryLoading,
+  queryError,
+  tooltipHoverText,
+  storageKeyPrefix,
+  tooltipTitle,
+  tickFormatter,
+}: ChartProps) => {
+  const chartContainerRef = useRef<HTMLDivElement | null>(null);
+  const chart = useRef<IChartApi>();
+  const areaSeries = useRef<ISeriesApi<'Line'>>();
+
+  const [lastDataPoint, setLastDataPoint] = useState<DataPoint>();
+  const [firstDataPoint, setFirstDataPoint] = useState<DataPoint>();
+  const [dataPoint, setDataPoint] = useState<DataPoint>();
+
+  const [timePeriod, setTimePeriod] = timeState;
+
+  const theme = useTheme();
+
+  // Menu
+  const [rightAnchorEl, setRightAnchorEl] = useState<null | HTMLElement>(null);
+  const rightMenuVisible = Boolean(rightAnchorEl);
+
+  const [rightPriceScaleMode, setRightPriceScaleMode] = useState(0);
+
+  const handleToggleMenu = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      setRightAnchorEl(rightAnchorEl ? null : event.currentTarget);
+    },
+    [rightAnchorEl]
+  );
+
+  const handleSetVisibleRange = useCallback(
+    (params?: { first?: DataPoint; last?: DataPoint }) => {
+      if (!chart.current) return;
+      try {
+        if (timePeriod?.to && timePeriod?.from) {
+          chart.current.timeScale().setVisibleRange(timePeriod);
+        } else if (params?.first?.time && params?.last?.time) {
+          chart.current.timeScale().setVisibleRange({
+            from: params.first.time,
+            to: params.last.time,
+          });
+        } else {
+          // Fallback to fit content
+          chart.current.timeScale().fitContent();
+        }
+      } catch (error) {
+        console.error('Error setting time period');
+        chart.current.timeScale().fitContent();
+      }
+    },
+    [timePeriod]
+  );
+
+  useEffect(() => {
+    if (!chartContainerRef.current) return;
+
+    const chartOptions = {
+      layout: {
+        fontFamily: theme.typography.fontFamily,
+        background: { color: 'rgba(0, 0, 0, 0)' },
+      },
+      grid: {
+        vertLines: { color: theme.palette.divider, visible: false },
+        horzLines: { color: theme.palette.divider, visible: false },
+      },
+      crosshair: {
+        vertLine: {
+          labelBackgroundColor: theme.palette.text.primary,
+        },
+        horzLine: {
+          labelBackgroundColor: theme.palette.primary.main,
+        },
+      },
+      localization: {
+        timeFormatter: (timestamp: number) =>
+          new Date(timestamp * 1000).toLocaleString('en-GB', {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+          }),
+      },
+      timeScale: {
+        timeVisible: true,
+        secondsVisible: false,
+        borderVisible: false,
+        minBarSpacing: 0.001,
+        tickMarkFormatter: (time: Date, tickMarkType: TickMarkType) =>
+          getTimezoneCorrectedTime(time, tickMarkType),
+      },
+      rightPriceScale: {
+        borderVisible: false,
+        alignLabels: true,
+        mode: 0,
+      },
+      overlayPriceScale: {
+        scaleMargins: {
+          top: 0.8, // highest point of the series will be 80% away from the top
+          bottom: 0.2,
+        },
+      },
+    };
+
+    chart.current = createChart(chartContainerRef.current, chartOptions);
+    areaSeries.current = chart.current.addLineSeries({
+      color: chartColors[0].lineColor,
+      lineWidth: 2,
+      priceScaleId: 'right',
+      priceFormat: {
+        type: 'custom',
+        formatter: tickFormatter,
+      },
+    });
+
+    if (drawPegLine) {
+      const pegLine: CreatePriceLineOptions = {
+        price: 1,
+        color: theme.palette.primary.dark,
+        lineWidth: 1,
+        lineStyle: 3, // LineStyle.Dashed
+        axisLabelVisible: false,
+      };
+      areaSeries.current.createPriceLine(pegLine);
+    }
+
+    if (drawExploitLine) {
+      const exploitTimestamp = 1650196810 as Time;
+      const vertLine = new VertLine(
+        chart.current,
+        areaSeries.current,
+        exploitTimestamp,
+        { width: 0.5 }
+      );
+      areaSeries.current.attachPrimitive(vertLine);
+    }
+
+    const handleResize = () => {
+      if (!chartContainerRef.current || !chart.current) return;
+      chart.current.applyOptions({
+        width: chartContainerRef.current.clientWidth,
+        height: chartContainerRef.current.clientHeight,
+      });
+    };
+
+    const handleVisibilityChange = () => {
+      if (
+        !document.hidden &&
+        chart.current &&
+        areaSeries.current &&
+        chartContainerRef.current
+      ) {
+        chart.current.applyOptions({
+          width: chartContainerRef.current?.clientWidth,
+          height: chartContainerRef.current?.clientHeight,
+        });
+        areaSeries.current.setData(seriesData);
+        handleSetVisibleRange();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    window.addEventListener('resize', handleResize);
+
+    handleVisibilityChange();
+    handleResize();
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      window.removeEventListener('resize', handleResize);
+      chart.current?.remove();
+    };
+  }, [
+    theme,
+    seriesData,
+    drawPegLine,
+    drawExploitLine,
+    tickFormatter,
+    handleSetVisibleRange,
+  ]);
+
+  // Handle right axis scale mode changes
+  useEffect(() => {
+    chart.current?.applyOptions({
+      rightPriceScale: { mode: rightPriceScaleMode },
+    });
+  }, [rightPriceScaleMode]);
+
+  useEffect(() => {
+    if (!areaSeries.current || !chart.current) {
+      return;
+    }
+
+    const getDataPoint = (mode: string) => {
+      if (!seriesData.length) return;
+      const dataIndex = mode === 'last' ? seriesData.length - 1 : 0;
+      const time = seriesData[dataIndex].time?.valueOf() as number;
+      const season = seriesData[dataIndex].customValues.season;
+      const value = seriesData[dataIndex].value;
+
+      return {
+        time: new Date(time * 1000)?.toLocaleString(undefined, {
+          dateStyle: 'short',
+          timeStyle: 'short',
+        }),
+        value: value,
+        season: season,
+        timestamp: time,
+      };
+    };
+
+    const crosshairMoveHandler = (param: MouseEventParams) => {
+      if (!areaSeries.current) return;
+      const datum = param.seriesData.get(areaSeries.current);
+
+      if (!param.time || !datum || !('value' in datum) || !datum.customValues) {
+        setDataPoint(undefined);
+        return;
+      }
+
+      const timestamp = new Date((param.time.valueOf() as number) * 1000);
+      setDataPoint({
+        time: timestamp.toLocaleString(undefined, {
+          dateStyle: 'short',
+          timeStyle: 'short',
+        }),
+        value: datum.value,
+        season: (datum.customValues.season || 0) as number,
+        timestamp: param.time.valueOf(),
+      });
+    };
+
+    const timeRangeChangeHandler = (param: Range<Time> | null) => {
+      const lastItem =
+        param && seriesData.find((value) => value.time === param.to);
+      if (!lastItem) return;
+
+      const lastTimestamp = new Date((param.to.valueOf() as number) * 1000);
+
+      setLastDataPoint({
+        time: lastTimestamp.toLocaleString('en-US', {
+          dateStyle: 'short',
+          timeStyle: 'short',
+        }),
+        value: lastItem.value,
+        season: lastItem.customValues.season,
+        timestamp: param.to.valueOf(),
+      });
+    };
+
+    areaSeries.current.setData(seriesData);
+
+    const firstData = getDataPoint('first');
+    const lastData = getDataPoint('last');
+
+    handleSetVisibleRange({ first: firstData, last: lastData });
+
+    lastData && setLastDataPoint(lastData);
+    firstData && setFirstDataPoint(firstData);
+
+    chart.current.subscribeCrosshairMove(crosshairMoveHandler);
+    chart.current
+      .timeScale()
+      .subscribeVisibleTimeRangeChange(timeRangeChangeHandler);
+
+    return () => {
+      chart.current?.unsubscribeCrosshairMove(crosshairMoveHandler);
+      chart.current
+        ?.timeScale()
+        .unsubscribeVisibleTimeRangeChange(timeRangeChangeHandler);
+    };
+  }, [seriesData, handleSetVisibleRange]);
+
+  const beforeFirstSeason =
+    dataPoint && firstDataPoint
+      ? dataPoint.timestamp < firstDataPoint?.timestamp
+      : false;
+
+  const currDataPoint = dataPoint || lastDataPoint;
+
+  const currValue = !beforeFirstSeason && currDataPoint?.value;
+  const currSeason = !beforeFirstSeason && currDataPoint?.season;
+  const currTimestamp = !beforeFirstSeason && currDataPoint?.time;
+
+  return (
+    <Box sx={{ position: 'relative', height: '100%' }}>
+      <Box>
+        <Stack
+          direction="row"
+          alignItems="flex-start"
+          justifyContent="space-between"
+          gap={2}
+        >
+          <ChartInfoOverlay
+            isLoading={queryLoading || false}
+            gap={0}
+            title={tooltipTitle}
+            titleTooltip={tooltipHoverText}
+            amount={
+              <>{currValue ? tickFormatter(currValue)?.toString() : '0'}</>
+            }
+            subtitle={`Season ${currSeason || '--'}`}
+            secondSubtitle={`${currTimestamp || '--'}`}
+          />
+          <CalendarButton
+            storageKeyPrefix={storageKeyPrefix}
+            setTimePeriod={setTimePeriod}
+          />
+        </Stack>
+      </Box>
+      <Box ref={chartContainerRef} sx={{ height: 'calc(100% - 85px)' }}>
+        {queryLoading && <ChartLoadingState />}
+        {queryError && <ChartErrorState />}
+      </Box>
+      <ClickAwayListener onClickAway={() => setRightAnchorEl(null)}>
+        <Box>
+          <IconButton
+            disableRipple
+            onClick={handleToggleMenu}
+            sx={{
+              p: 0,
+              position: 'absolute',
+              bottom: 0,
+              right: 0,
+            }}
+          >
+            <SettingsIcon
+              sx={{
+                fontSize: 20,
+                color: 'text.primary',
+                transform: `rotate(${rightAnchorEl ? 30 : 0}deg)`,
+                transition: 'transform 150ms ease-in-out',
+              }}
+            />
+          </IconButton>
+          <Popper
+            anchorEl={rightAnchorEl}
+            open={rightMenuVisible}
+            sx={{ zIndex: 79 }}
+            placement="bottom-end"
+            transition
+          >
+            {({ TransitionProps }) => (
+              <Grow
+                {...TransitionProps}
+                timeout={200}
+                style={{ transformOrigin: 'top right' }}
+              >
+                <Box
+                  sx={{
+                    borderWidth: 2,
+                    borderColor: 'divider',
+                    borderStyle: 'solid',
+                    backgroundColor: 'white',
+                    borderRadius: 1,
+                    '& .MuiInputBase-root:after, before': {
+                      borderColor: 'primary.main',
+                    },
+                    overflow: 'clip',
+                  }}
+                >
+                  <Stack gap={0}>
+                    {priceScaleModes.map((mode, index) => (
+                      <Button
+                        variant="text"
+                        sx={{
+                          fontWeight: 400,
+                          color: 'text.primary',
+                          paddingY: 0.5,
+                          paddingX: 1,
+                          height: 'auto',
+                          justifyContent: 'space-between',
+                          borderRadius: 0,
+                          width: '150px',
+                          backgroundColor:
+                            rightPriceScaleMode === index
+                              ? 'primary.light'
+                              : undefined,
+                          '&:hover': {
+                            backgroundColor: '#F5F5F5',
+                            cursor: 'pointer',
+                          },
+                        }}
+                        onClick={() => setRightPriceScaleMode(index)}
+                      >
+                        {mode}
+                        {rightPriceScaleMode === index && (
+                          <CheckRoundedIcon fontSize="inherit" />
+                        )}
+                      </Button>
+                    ))}
+                  </Stack>
+                </Box>
+              </Grow>
+            )}
+          </Popper>
+        </Box>
+      </ClickAwayListener>
+    </Box>
+  );
+};
+
+export type SingleAdvancedChartProps = {
+  seriesData: ChartQueryData[];
+  queryLoading?: boolean;
+  queryError?: boolean;
+} & OmmitedV2DataProps &
+  ChartProps;
+
+const SingleAdvancedChart = (props: SingleAdvancedChartProps) => (
+  <Stack
+    sx={{
+      width: '100%',
+      height: '250px',
+      overflow: 'clip',
+    }}
+  >
+    <Chart {...props} />
+  </Stack>
+);
+
+export default SingleAdvancedChart;
diff --git a/projects/ui/src/components/Analytics/formatters.ts b/projects/ui/src/components/Analytics/formatters.ts
index 023180e84a..3c18cbab90 100644
--- a/projects/ui/src/components/Analytics/formatters.ts
+++ b/projects/ui/src/components/Analytics/formatters.ts
@@ -16,4 +16,6 @@ export const tickFormatUSD = (v: NumberLike) => `$${tickFormatTruncated(v)}`;
 export const tickFormatBeanPrice = (v: NumberLike) => `$${v.valueOf().toLocaleString('en-us', { minimumFractionDigits: 4 })}`;
 export const tickFormatRRoR = (value: any) => `${(parseFloat(value) * 100).toFixed(2)}`;
 export const valueFormatBeanAmount = (value: any) => Number(formatUnits(value, 6));
-export const tickFormatBeanAmount = (value: number) => value.toLocaleString('en-US', { maximumFractionDigits: 0 });
\ No newline at end of file
+export const tickFormatBeanAmount = (value: number) => value.toLocaleString('en-US', { maximumFractionDigits: 0 });
+export const tickFormatSmallBN = (decimals?: number) => 
+  (v: NumberLike) => new BigNumber(v.valueOf()).toExponential(decimals || 4)
\ No newline at end of file
diff --git a/projects/ui/src/components/Analytics/useChartSetupData.tsx b/projects/ui/src/components/Analytics/useChartSetupData.tsx
index f7553de4bd..3babd375ce 100644
--- a/projects/ui/src/components/Analytics/useChartSetupData.tsx
+++ b/projects/ui/src/components/Analytics/useChartSetupData.tsx
@@ -1,4 +1,3 @@
-
 import React, { useMemo } from 'react';
 import {
   LiquiditySupplyRatioDocument,
@@ -97,6 +96,10 @@ type ChartSetupBase = {
    * price scales.
    */
   shortTickFormatter: (v: number) => string | undefined;
+  /**
+   *
+   */
+  dataFormatter?: (v: any) => any;
 };
 
 type ChartSetup = ChartSetupBase & {
diff --git a/projects/ui/src/components/App/index.tsx b/projects/ui/src/components/App/index.tsx
index afef37f8c9..480fb7ddba 100644
--- a/projects/ui/src/components/App/index.tsx
+++ b/projects/ui/src/components/App/index.tsx
@@ -61,6 +61,7 @@ import FarmerDelegationsUpdater from '~/state/farmer/delegations/updater';
 import VotingPowerPage from '~/pages/governance/votingPower';
 import MorningUpdater from '~/state/beanstalk/sun/morning';
 import MorningFieldUpdater from '~/state/beanstalk/field/morning';
+import BeanstalkCaseUpdater from '~/state/beanstalk/case/updater';
 // import Snowflakes from './theme/winter/Snowflakes';
 
 BigNumber.set({ EXPONENTIAL_AT: [-12, 20] });
@@ -121,6 +122,7 @@ export default function App() {
       <MorningUpdater />
       <MorningFieldUpdater />
       <GovernanceUpdater />
+      <BeanstalkCaseUpdater />
       {/* -----------------------
        * Farmer Updaters
        * ----------------------- */}
diff --git a/projects/ui/src/components/Balances/SiloBalancesHistory.tsx b/projects/ui/src/components/Balances/SiloBalancesHistory.tsx
index 3924cb0c28..909d4b563a 100644
--- a/projects/ui/src/components/Balances/SiloBalancesHistory.tsx
+++ b/projects/ui/src/components/Balances/SiloBalancesHistory.tsx
@@ -11,10 +11,10 @@ import {
   SEASON_RANGE_TO_COUNT,
   SeasonRange,
 } from '~/hooks/beanstalk/useSeasonsQuery';
+import useFarmerSiloHistory from '~/hooks/farmer/useFarmerSiloHistory';
 import MockPlot from '../Silo/MockPlot';
 import BlurComponent from '../Common/ZeroState/BlurComponent';
 import WalletButton from '../Common/Connection/WalletButton';
-import useFarmerSiloHistory from '~/hooks/farmer/useFarmerSiloHistory';
 
 const SiloBalancesHistory: React.FC<{}> = () => {
   //
@@ -60,14 +60,16 @@ const SiloBalancesHistory: React.FC<{}> = () => {
           height={300}
           StatProps={{
             title: 'Value Deposited',
-            titleTooltip:
+            titleTooltip: (
               <>
-                  The historical USD value of your Silo Deposits at the beginning of every Season. <br />
+                The historical USD value of your Silo Deposits at the beginning
+                of every Season. <br />
                 <Typography variant="bodySmall">
-                  Note: Unripe assets are valued based on the current Chop Rate. Earned Beans are shown upon Plant.
+                  Note: Unripe assets are valued based on the current Chop Rate.
+                  Earned Beans are shown upon Plant.
                 </Typography>
               </>
-            ,
+            ),
             gap: 0.25,
           }}
           timeTabParams={timeTabParams}
diff --git a/projects/ui/src/components/Nav/Buttons/PriceButton.tsx b/projects/ui/src/components/Nav/Buttons/PriceButton.tsx
index def578050f..fbb269a02d 100644
--- a/projects/ui/src/components/Nav/Buttons/PriceButton.tsx
+++ b/projects/ui/src/components/Nav/Buttons/PriceButton.tsx
@@ -32,6 +32,7 @@ import wstETHLogo from '~/img/tokens/wsteth-logo.svg';
 import { FC } from '~/types';
 import useDataFeedTokenPrices from '~/hooks/beanstalk/useDataFeedTokenPrices';
 import useSdk from '~/hooks/sdk';
+import useTwaDeltaB from '~/hooks/beanstalk/useTwaDeltaB';
 import FolderMenu from '../FolderMenu';
 
 const poolLinks: { [key: string]: string } = {
@@ -56,6 +57,9 @@ const PriceButton: FC<ButtonProps> = ({ ...props }) => {
     (state) => state._bean.pools
   );
 
+  const { data: twaDeltaBs } = useTwaDeltaB();
+  const twaDeltaB = twaDeltaBs?.total || ZERO_BN;
+
   const toggleDisplayedPools = (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -155,7 +159,7 @@ const PriceButton: FC<ButtonProps> = ({ ...props }) => {
                     Total TWA deltaB:{' '}
                     <strong>
                       {beanTokenData.deltaB.gte(0) && '+'}
-                      {displayBN(beanTokenData.deltaB, true)}
+                      {displayBN(twaDeltaB, true)}
                     </strong>
                   </>
                 ) : (
diff --git a/projects/ui/src/components/Nav/Buttons/SeasonalLiquidityAndPriceByPool.graphql b/projects/ui/src/components/Nav/Buttons/SeasonalLiquidityAndPriceByPool.graphql
new file mode 100644
index 0000000000..e2ad50c298
--- /dev/null
+++ b/projects/ui/src/components/Nav/Buttons/SeasonalLiquidityAndPriceByPool.graphql
@@ -0,0 +1,27 @@
+query SeasonalLiquidityAndPriceByPool(
+  $first: Int,
+  $season_lte: Int!
+  $season_gte: Int!
+  $pools: [String!]
+) {
+  seasons: poolHourlySnapshots(
+    first: $first
+    orderBy: season
+    orderDirection: desc
+    where: {
+      season_lte: $season_lte, 
+      season_gte: $season_gte, 
+      liquidityUSD_not: "0", 
+      pool_in: $pools
+    }
+  ) {
+    id
+    season
+    pool {
+      id
+      lastPrice
+      liquidityUSD
+    }
+    createdAt
+  }
+}
diff --git a/projects/ui/src/components/Nav/Buttons/SunButton.graphql b/projects/ui/src/components/Nav/Buttons/SunButton.graphql
index 0ea0aeabc8..9e94f1dc76 100644
--- a/projects/ui/src/components/Nav/Buttons/SunButton.graphql
+++ b/projects/ui/src/components/Nav/Buttons/SunButton.graphql
@@ -1,27 +1,47 @@
-query SunButton {
+query SunButton($season_lte: Int!) {
   seasons(
-    first: 24,
-    orderBy: season,
+    # 25 to get data for the 24th
+    first: 25
+    orderBy: season
     orderDirection: desc
+    where: { season_lte: $season_lte }
   ) {
     id
     season
     price
-    deltaBeans # total change in supply
-    rewardBeans # amount from Reward on Sunrise
+    deltaBeans
+    rewardBeans
+    beans
+    deltaB
   }
   fields: fieldHourlySnapshots(
-    first: 24,
-    where: { 
+    first: 25
+    where: {
       field: "0xc1e088fc1323b20bcbee9bd1b9fc9546db5624c5"
+      season_lte: $season_lte
+      caseId_not: null
     }
-    orderBy: season,
+    orderBy: season
     orderDirection: desc
   ) {
     id
     season
     issuedSoil
-		temperature
+    temperature
     podRate
+    soilSoldOut
+    blocksToSoldOutSoil
+    sownBeans
+    caseId
+  }
+  silo: siloHourlySnapshots(
+    first: 25
+    orderBy: season
+    orderDirection: desc
+    where: { season_lte: $season_lte, beanToMaxLpGpPerBdvRatio_gt: 0 }
+  ) {
+    id
+    season
+    beanToMaxLpGpPerBdvRatio
   }
 }
\ No newline at end of file
diff --git a/projects/ui/src/components/Nav/Buttons/SunButton.tsx b/projects/ui/src/components/Nav/Buttons/SunButton.tsx
index e580260529..dc88c63ee3 100644
--- a/projects/ui/src/components/Nav/Buttons/SunButton.tsx
+++ b/projects/ui/src/components/Nav/Buttons/SunButton.tsx
@@ -1,212 +1,365 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import {
   ButtonProps,
   Stack,
-  Typography,
-  useMediaQuery,
-  Box,
   Grid,
   Divider,
+  Breakpoint,
+  GridProps,
+  Typography,
+  Box,
+  useTheme,
 } from '@mui/material';
 import BigNumber from 'bignumber.js';
-import { useSelector } from 'react-redux';
 import drySeasonIcon from '~/img/beanstalk/sun/dry-season.svg';
 import rainySeasonIcon from '~/img/beanstalk/sun/rainy-season.svg';
-import SunriseButton from '~/components/Sun/SunriseButton';
-import { SunButtonQuery, useSunButtonQuery } from '~/generated/graphql';
 import useSeason from '~/hooks/beanstalk/useSeason';
-import { toTokenUnitsBN } from '~/util';
-import { BEAN } from '~/constants/tokens';
-import { NEW_BN } from '~/constants';
-import { AppState } from '~/state';
+import { NEW_BN, ZERO_BN } from '~/constants';
+import { useAppSelector } from '~/state';
+import { FC } from '~/types';
+import useSeasonsSummary, {
+  SeasonSummary,
+} from '~/hooks/beanstalk/useSeasonsSummary';
+import Row from '~/components/Common/Row';
+import { IconSize } from '~/components/App/muiTheme';
+import SunriseButton from '~/components/Sun/SunriseButton';
+import { LibCases } from '~/lib/Beanstalk/LibCases';
 import FolderMenu from '../FolderMenu';
 import SeasonCard from '../../Sun/SeasonCard';
-import usePeg from '~/hooks/beanstalk/usePeg';
-import { FC } from '~/types';
 
-const castField = (data: SunButtonQuery['fields'][number]) => ({
-  season: new BigNumber(data.season),
-  issuedSoil: toTokenUnitsBN(data.issuedSoil, BEAN[1].decimals),
-  temperature: new BigNumber(data.temperature),
-  podRate: new BigNumber(data.podRate),
-});
-const castSeason = (data: SunButtonQuery['seasons'][number]) => ({
-  season: new BigNumber(data.season),
-  price: new BigNumber(data.price),
-  rewardBeans: toTokenUnitsBN(
-    data.season <= 6074 ? data.deltaBeans : data.rewardBeans,
-    BEAN[1].decimals
-  ),
-});
+type GridConfigProps = Pick<GridProps, Breakpoint>;
 
-const MAX_ITEMS = 8;
+export type SeasonSummaryColumn = {
+  title: string;
+  widths: GridConfigProps;
+  subtitle?: string;
+  align?: 'left' | 'right';
+  render: (d: SeasonSummary) => string | JSX.Element;
+};
 
-const PriceButton: FC<ButtonProps> = ({ ...props }) => {
-  /// DATA
-  const season = useSeason();
-  const awaiting = useSelector<AppState, boolean>(
-    (state) => state._beanstalk.sun.sunrise.awaiting
-  );
-  const { data } = useSunButtonQuery({ fetchPolicy: 'cache-and-network' });
-  const beanstalkField = useSelector<AppState, AppState['_beanstalk']['field']>(
-    (state) => state._beanstalk.field
-  );
-  const peg = usePeg();
+const getDelta = (value: BigNumber | undefined) => {
+  if (!value) return '';
+  return value.gte(0) ? '+' : '-';
+};
 
-  const bySeason = useMemo(() => {
-    if (data?.fields && data?.seasons) {
-      type MergedSeason = ReturnType<typeof castField> &
-        ReturnType<typeof castSeason>;
+const maxBean2MaxLPRatio = new BigNumber(
+  LibCases.MAX_BEAN_MAX_LP_GP_PER_BDV_RATIO
+).div(1e18);
+const minBean2MaxLPRatio = new BigNumber(
+  LibCases.MIN_BEAN_MAX_LP_GP_PER_BDV_RATIO
+).div(1e18);
 
-      // Build mapping of season => data
-      const merged: { [key: number]: MergedSeason } = {};
-      data.fields.forEach((_f) => {
-        // fixme: need intermediate type?
-        // @ts-ignore
-        if (_f) merged[_f.season] = { ...castField(_f) };
-      });
-      data.seasons.forEach((_s) => {
-        if (_s) merged[_s.season] = { ...merged[_s.season], ...castSeason(_s) };
-      });
+const colConfig: Record<string, SeasonSummaryColumn> = {
+  season: {
+    title: 'Season',
+    align: 'left',
+    widths: { xs: 0.65 },
+    render: ({ beanMints, season }) => (
+      <Row justifyContent="flex-start" spacing={0.5} height="100%">
+        {beanMints.value && beanMints.value?.lte(0) ? (
+          <img src={drySeasonIcon} height={IconSize.small} alt="" />
+        ) : (
+          <img src={rainySeasonIcon} height={IconSize.small} alt="" />
+        )}
+        <Typography variant="bodySmall">
+          {season.value?.toString() || '-'}
+        </Typography>
+      </Row>
+    ),
+  },
+  beanMints: {
+    title: 'New Beans',
+    subtitle: 'Beans minted',
+    widths: { xs: 1.15 },
+    render: ({ beanMints: { value } }) => (
+      <Stack justifyContent="center" height="100%">
+        <Typography variant="bodySmall" align="right">
+          {`${value?.gt(0) ? '+' : ''}${value?.abs().toFormat(0) || 0}`}
+        </Typography>
+      </Stack>
+    ),
+  },
+  maxSoil: {
+    title: 'Max Soil',
+    subtitle: 'Beans to lend',
+    widths: { xs: 1.35 },
+    render: ({ maxSoil }) => (
+      <Typography variant="bodySmall" align="right">
+        {maxSoil.value?.abs().toFormat(2) || 0}
+      </Typography>
+    ),
+  },
+  maxTemperature: {
+    title: 'Max Temperature',
+    subtitle: 'Max interest rate',
+    widths: { xs: 1.65 },
+    render: ({ maxTemperature }) => (
+      <Stack justifyContent="center" alignItems="flex-end">
+        <Typography variant="bodySmall" align="right">
+          {maxTemperature.value?.abs().toFormat(0) || '-'}%{' '}
+          <Typography
+            component="span"
+            variant="bodySmall"
+            color="text.secondary"
+          >
+            {`(${getDelta(maxTemperature.delta)}${maxTemperature?.delta?.abs().toFormat() || '-'}%)`}
+          </Typography>
+        </Typography>
+        {maxTemperature.display && (
+          <Typography variant="bodySmall" align="right" color="text.tertiary">
+            {maxTemperature.display}
+          </Typography>
+        )}
+      </Stack>
+    ),
+  },
+  bean2MaxLPScalar: {
+    title: 'Bean:Max LP Ratio',
+    subtitle: 'Relative reward for Dep. Bean',
+    widths: { xs: 1.65 },
+    render: ({ bean2MaxLPRatio }) => {
+      const isAtMinOrMax =
+        bean2MaxLPRatio.value?.eq(maxBean2MaxLPRatio) ||
+        bean2MaxLPRatio.value?.eq(minBean2MaxLPRatio);
 
-      // Sort latest season first and return as array
-      return Object.keys(merged)
-        .sort((a, b) => parseInt(b, 10) - parseInt(a, 10))
-        .reduce<MergedSeason[]>((prev, curr) => {
-          prev.push(merged[curr as unknown as number]);
-          return prev;
-        }, []);
-    }
-    return [];
-  }, [data]);
+      const delta = isAtMinOrMax
+        ? ZERO_BN
+        : bean2MaxLPRatio?.delta?.div(100).abs();
+
+      return (
+        <Stack justifyContent="center" alignItems="flex-end">
+          <Typography variant="bodySmall" align="right">
+            {bean2MaxLPRatio.value?.toFormat(1) || '-'}{' '}
+            {bean2MaxLPRatio.delta && (
+              <Typography
+                component="span"
+                variant="bodySmall"
+                color="text.secondary"
+              >
+                {`(${getDelta(bean2MaxLPRatio.delta)}${
+                  delta?.toFormat() || '-'
+                }%)`}
+              </Typography>
+            )}
+          </Typography>
+          {bean2MaxLPRatio.display && (
+            <Typography variant="bodySmall" align="right" color="text.tertiary">
+              {bean2MaxLPRatio.display}
+            </Typography>
+          )}
+        </Stack>
+      );
+    },
+  },
+  price: {
+    title: 'Price',
+    subtitle: 'Price of Bean',
+    widths: { xs: 1.5 },
+    render: ({ price }) => (
+      <Stack justifyContent="center" alignItems="flex-end">
+        <Typography variant="bodySmall" align="right">
+          ${price.value?.toFixed(2) || '-'}
+        </Typography>
+        <Typography variant="bodySmall" color="text.tertiary" align="right">
+          {price.display || '-'}
+        </Typography>
+      </Stack>
+    ),
+  },
+  l2sr: {
+    title: 'Liquidity to Supply Ratio',
+    subtitle: 'Amount of Liquidity / Supply',
+    widths: { xs: 1.7 },
+    render: ({ l2sr }) => (
+      <Stack justifyContent="center" alignItems="flex-end">
+        <Typography variant="bodySmall" align="right">
+          {l2sr.value?.times(100).toFormat(0) || '-'}%
+        </Typography>
+        <Typography variant="bodySmall" color="text.tertiary" align="right">
+          {l2sr.display || '-'}
+        </Typography>
+      </Stack>
+    ),
+  },
+  podRate: {
+    title: 'Pod Rate',
+    subtitle: 'Debt ratio',
+    widths: { xs: 1.25 },
+    render: ({ podRate }) => (
+      <Stack justifyContent="center" alignItems="flex-end">
+        <Typography variant="bodySmall" align="right">
+          {`${podRate.value?.times(100).toFormat(0) || '-'}%`}
+        </Typography>
+        <Typography variant="bodySmall" color="text.tertiary" align="right">
+          {podRate.display || '-'}
+        </Typography>
+      </Stack>
+    ),
+  },
+  deltaPodDemand: {
+    title: 'Delta Demand',
+    subtitle: 'Change in Soil',
+    widths: { xs: 1.1 },
+    render: ({ deltaPodDemand }) => (
+      <Stack justifyContent="center" alignItems="flex-end">
+        <Typography variant="bodySmall" color="text.tertiary" align="right">
+          {deltaPodDemand.display || '-'}
+        </Typography>
+      </Stack>
+    ),
+  },
+};
 
-  /// Theme
-  const isTiny = useMediaQuery('(max-width:350px)');
+const MAX_ITEMS = 5;
 
-  /// Button Content
-  const isLoading = season.eq(NEW_BN);
-  const startIcon = isTiny ? undefined : (
-    <img
-      src={
-        bySeason[0]?.rewardBeans.eq(0) || awaiting
-          ? drySeasonIcon
-          : rainySeasonIcon
-      }
-      css={{
-        width: 25,
-        height: 25,
-        animationName: awaiting ? 'rotate' : 'none',
-        animationTimingFunction: 'linear',
-        animationDuration: '3000ms',
-        animationIterationCount: 'infinite',
-      }}
-      alt=""
-    />
-  );
+const MAX_TABLE_WIDTH = 1568;
 
-  /// Table Content
-  const tableContent = (
-    <Box sx={{ overflow: 'hidden' }}>
-      {/* Past Seasons */}
-      <Stack
-        gap={1}
-        sx={{
-          width: '100%',
-          pt: 1,
-          px: 1,
-          maxHeight: `${(37.5 + 10) * MAX_ITEMS - 10}px`,
-          overflowY: 'auto',
-        }}
-      >
-        {/* table header */}
-        <Box px={1}>
-          <Grid container>
-            <Grid item xs={1.5} md={1.25}>
-              <Typography variant="bodySmall">Season</Typography>
-            </Grid>
-            <Grid item xs={3} md={2} textAlign="right">
-              <Typography variant="bodySmall">New Beans</Typography>
-            </Grid>
-            <Grid item xs={3} md={2} textAlign="right">
-              <Typography variant="bodySmall">Max Soil</Typography>
-            </Grid>
-            <Grid item xs={4} md={2.75}>
-              <Stack alignItems="flex-end">
-                <Typography variant="bodySmall">Max Temperature</Typography>
-              </Stack>
-            </Grid>
-            <Grid
-              item
-              xs={0}
-              md={2}
-              display={{ xs: 'none', md: 'block' }}
-              textAlign="right"
+const SeasonTable = ({
+  forecast: nextSeasonForecast,
+  seasonsSummary,
+}: ReturnType<typeof useSeasonsSummary>) => (
+  <Box
+    sx={(t) => ({
+      position: 'relative',
+      width: `min(calc(100vw - 20px), ${MAX_TABLE_WIDTH}px)`,
+      [t.breakpoints.up('lg')]: {
+        width: `min(calc(100vw - 40px), ${MAX_TABLE_WIDTH}px)`,
+      },
+    })}
+  >
+    <Stack gap={1}>
+      <Stack gap={1} px={1} pt={1}>
+        <Box sx={{ overflowX: 'auto' }}>
+          <Stack gap={1} sx={{ minWidth: `${MAX_TABLE_WIDTH - 20}px` }}>
+            {/* Header */}
+            <Box
+              sx={{
+                position: 'sticky',
+                top: 0,
+                zIndex: 1,
+                background: 'white',
+              }}
             >
-              <Typography variant="bodySmall">Pod Rate</Typography>
-            </Grid>
-            <Grid
-              item
-              xs={0}
-              md={2}
-              display={{ xs: 'none', md: 'block' }}
-              textAlign="right"
+              <Grid container px={1}>
+                {Object.values(colConfig).map((col) => (
+                  <Grid
+                    item
+                    key={`sun-button-table-header-${col.title}`}
+                    {...col.widths}
+                  >
+                    <Stack justifyContent="center">
+                      <Typography
+                        variant="bodySmall"
+                        align={col.align || 'right'}
+                      >
+                        {col.title}
+                      </Typography>
+                      {col.subtitle && (
+                        <Typography
+                          color="text.tertiary"
+                          variant="bodySmall"
+                          align={col.align || 'right'}
+                        >
+                          {col.subtitle}
+                        </Typography>
+                      )}
+                    </Stack>
+                  </Grid>
+                ))}
+              </Grid>
+            </Box>
+            {/* Rows */}
+            <Stack
+              gap={1}
+              sx={{
+                maxHeight: `${(57 + 10) * MAX_ITEMS}px`,
+                overflowY: 'auto',
+              }}
             >
-              <Typography variant="bodySmall">Delta Demand</Typography>
-            </Grid>
-          </Grid>
+              <SeasonCard
+                index={-1}
+                summary={nextSeasonForecast}
+                columns={colConfig}
+                isNew
+              />
+              {seasonsSummary.map((summary, i) => (
+                <SeasonCard
+                  key={`season-card-row-${i}`}
+                  index={i}
+                  summary={summary}
+                  columns={colConfig}
+                />
+              ))}
+            </Stack>
+          </Stack>
         </Box>
-        <SeasonCard
-          season={season.plus(1)}
-          rewardBeans={peg.rewardBeans}
-          issuedSoil={peg.soilStart}
-          podRate={NEW_BN}
-          temperature={beanstalkField.temperature.max.plus(
-            peg.deltaTemperature
-          )} // FIXME expected
-          deltaDemand={peg.deltaPodDemand}
-          deltaTemperature={peg.deltaTemperature}
-          isNew
-        />
-        {bySeason.map((s, i) => {
-          const deltaTemperature =
-            bySeason[i + 1]?.temperature && s.temperature
-              ? s.temperature.minus(bySeason[i + 1].temperature)
-              : undefined;
-          return (
-            <SeasonCard
-              key={s.season.toString()}
-              season={s.season}
-              // Season
-              rewardBeans={s.rewardBeans}
-              // Field
-              temperature={s.temperature}
-              deltaTemperature={deltaTemperature}
-              deltaDemand={undefined}
-              issuedSoil={s.issuedSoil}
-              podRate={s.podRate}
-            />
-          );
-        })}
       </Stack>
       <Divider sx={{ borderBottomWidth: 0, borderColor: 'divider' }} />
-      <Box sx={{ p: 1, display: 'flex', gap: '5px', flexDirection: 'column' }}>
+      <Box px={1} pb={1}>
         <SunriseButton />
       </Box>
+    </Stack>
+  </Box>
+);
+
+const SeasonIcon = ({ beanMints }: { beanMints: BigNumber | undefined }) => {
+  const awaiting = useAppSelector((s) => s._beanstalk.sun.sunrise.awaiting);
+  return (
+    <Box
+      sx={{
+        '@media (max-width: 350px)': {
+          display: 'none',
+        },
+      }}
+    >
+      <img
+        src={beanMints?.eq(0) || awaiting ? drySeasonIcon : rainySeasonIcon}
+        css={{
+          width: 25,
+          height: 25,
+          animationName: awaiting ? 'rotate' : 'none',
+          animationTimingFunction: 'linear',
+          animationDuration: '3000ms',
+          animationIterationCount: 'infinite',
+        }}
+        alt=""
+      />
     </Box>
   );
+};
+
+const PriceButton: FC<ButtonProps> = ({ ...props }) => {
+  /// DATA
+  const season = useSeason();
+  const theme = useTheme();
+  const summary = useSeasonsSummary();
+
+  /// Button Content
+  const isLoading = season.eq(NEW_BN) || summary.loading;
 
   return (
     <FolderMenu
-      startIcon={startIcon}
+      startIcon={
+        <SeasonIcon beanMints={summary.seasonsSummary?.[0]?.beanMints.value} />
+      }
       buttonContent={<>{isLoading ? '0000' : season.toFixed()}</>}
-      drawerContent={<Box sx={{ p: 1 }}>{tableContent}</Box>}
-      popoverContent={tableContent}
+      drawerContent={
+        <Box sx={{ p: 1 }}>
+          <SeasonTable {...summary} />
+        </Box>
+      }
+      popoverContent={<SeasonTable {...summary} />}
       hideTextOnMobile
-      popperWidth="700px"
+      popperWidth="100%"
       hotkey="opt+2, alt+2"
-      zIndex={997}
+      zIndex={100}
       zeroTopLeftRadius
       zeroTopRightRadius
+      popperSx={{
+        [`@media (min-width: ${theme.breakpoints.values.lg - 1}px)`]: {
+          paddingRight: '20px',
+        },
+      }}
       {...props}
     />
   );
diff --git a/projects/ui/src/components/Nav/FolderMenu.tsx b/projects/ui/src/components/Nav/FolderMenu.tsx
index 1dbf22d540..fced56e075 100644
--- a/projects/ui/src/components/Nav/FolderMenu.tsx
+++ b/projects/ui/src/components/Nav/FolderMenu.tsx
@@ -9,6 +9,8 @@ import {
   PopperPlacementType,
   Typography,
   useMediaQuery,
+  Theme,
+  SxProps,
 } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import DropdownIcon from '~/components/Common/DropdownIcon';
@@ -45,6 +47,7 @@ const FolderMenu: FC<
     zeroTopLeftRadius?: boolean;
     popoverPlacement?: PopperPlacementType;
     navDrawer?: boolean;
+    popperSx?: SxProps<Theme>;
   } & ButtonProps
 > = ({
   startIcon,
@@ -63,6 +66,7 @@ const FolderMenu: FC<
   zeroTopLeftRadius,
   popoverPlacement,
   navDrawer,
+  popperSx,
   ...buttonProps
 }) => {
   // Theme
@@ -116,6 +120,7 @@ const FolderMenu: FC<
     }
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -186,6 +191,7 @@ const FolderMenu: FC<
         placement={popoverPlacement || 'bottom-start'}
         disablePortal
         sx={{
+          ...popperSx,
           zIndex: zIndex,
           visibility: mobileWindow ? 'hidden' : 'visible',
         }}
@@ -206,7 +212,7 @@ const FolderMenu: FC<
         onResizeCapture={undefined}
       >
         <Box
-          sx={(_theme) => ({
+          sx={{
             background: BeanstalkPalette.white,
             width: popperWidth !== undefined ? popperWidth : '325px',
             borderBottomLeftRadius: borderRadius * 1,
@@ -217,13 +223,11 @@ const FolderMenu: FC<
             borderWidth: 1,
             borderStyle: 'solid',
             boxSizing: 'border-box',
-            // px: 1,
-            // py: 1,
-            boxShadow: _theme.shadows[0],
+            boxShadow: theme.shadows[0],
             // Should be below the zIndex of the Button.
             zIndex: zIndex,
             mt: '-1px',
-          })}
+          }}
         >
           {popoverContent}
         </Box>
diff --git a/projects/ui/src/components/Silo/Actions/Withdraw.tsx b/projects/ui/src/components/Silo/Actions/Withdraw.tsx
index e6473cdb41..9bc805e939 100644
--- a/projects/ui/src/components/Silo/Actions/Withdraw.tsx
+++ b/projects/ui/src/components/Silo/Actions/Withdraw.tsx
@@ -101,11 +101,12 @@ const WithdrawForm: FC<
   );
 
   const claimableTokens = useMemo(
-    // FIXME: Temporarily disabled Withdraws of Bean:ETH LP in Bean/WETH, needs routing code
+    // FIXME: Disable remove single sided liquidity for Well tokens for now.
     () => [
       whitelistedToken,
       ...((whitelistedToken.isLP &&
         whitelistedToken !== sdk.tokens.BEAN_ETH_WELL_LP &&
+        whitelistedToken !== sdk.tokens.BEAN_WSTETH_WELL_LP &&
         pool?.tokens) ||
         []),
     ],
diff --git a/projects/ui/src/components/Silo/Overview.tsx b/projects/ui/src/components/Silo/Overview.tsx
index a6430ec63c..72ab48cdc7 100644
--- a/projects/ui/src/components/Silo/Overview.tsx
+++ b/projects/ui/src/components/Silo/Overview.tsx
@@ -74,7 +74,7 @@ const Overview: FC<{
 
     const _season = dataPoint ? dataPoint.season : season;
     const _date = dataPoint ? dataPoint.date : latestData ? latestData.date : '';
-    const _value = dataPoint ? BigNumber(dataPoint.value) : breakdown.states.deposited.value;
+    const _value = BigNumber(dataPoint?.value ?? latestData?.value ?? 0);
 
     return (
       <Stat
@@ -97,7 +97,7 @@ const Overview: FC<{
         sx={{ ml: 0 }}
       />
     )},
-    [breakdown.states.deposited.value, data.deposits, season]
+    [data.deposits, season]
   );
 
   const stalkStats = useCallback((dataPoint: BaseDataPoint | undefined) => {
diff --git a/projects/ui/src/components/Silo/SeedGauge/Bean2MaxLPRatio.tsx b/projects/ui/src/components/Silo/SeedGauge/Bean2MaxLPRatio.tsx
new file mode 100644
index 0000000000..7857caafff
--- /dev/null
+++ b/projects/ui/src/components/Silo/SeedGauge/Bean2MaxLPRatio.tsx
@@ -0,0 +1,253 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box, Link, Stack, Typography } from '@mui/material';
+import useSeedGauge from '~/hooks/beanstalk/useSeedGauge';
+import useSdk from '~/hooks/sdk';
+import TokenIcon from '~/components/Common/TokenIcon';
+import useElementDimensions from '~/hooks/display/useElementDimensions';
+import { BeanstalkPalette } from '~/components/App/muiTheme';
+import useBeanstalkCaseData from '~/hooks/beanstalk/useBeanstalkCaseData';
+import { displayFullBN } from '~/util';
+import { ZERO_BN } from '~/constants';
+import BigNumber from 'bignumber.js';
+
+type IBean2MaxLPRatio = {
+  data: ReturnType<typeof useSeedGauge>['data'];
+};
+
+const BAR_WIDTH = 8;
+const BAR_HEIGHT = 55;
+const SELECTED_BAR_HEIGHT = 65;
+const MIN_SPACING = 10;
+const MAX_SPACING = 12;
+
+const Bar = ({
+  isSelected,
+  isFlashing,
+}: {
+  isSelected: boolean;
+  isFlashing: boolean;
+}) => (
+  <Box
+    sx={{
+      borderRadius: 10,
+      height: `${isSelected ? SELECTED_BAR_HEIGHT : BAR_HEIGHT}px`,
+      width: `${BAR_WIDTH}px`,
+      background: BeanstalkPalette.logoGreen,
+      opacity: isSelected || isFlashing ? 1 : 0.3,
+      animation: isFlashing ? 'blink 2500ms linear infinite' : undefined,
+      '@keyframes blink': {
+        '0%': { opacity: 1 },
+        '50%': { opacity: 0.1 },
+        '100%': { opacity: 1 },
+      },
+    }}
+  />
+);
+
+/*
+ * We calculate the number of bars with spacing using the formula:
+ *
+ * w = component width
+ * b = bar width
+ * s = spacing
+ * x = number of bars
+ *
+ * w = b(x) + s(x - 1)
+ * x = Floor((w + s) / (b + s))
+ */
+const calculateNumBarsWithSpacing = (width: number, spacing: number) => {
+  const relativeWidth = width + spacing;
+  const unitWidth = BAR_WIDTH + spacing;
+  return Math.floor(relativeWidth / unitWidth);
+};
+
+const getBarIndex = (
+  min: BigNumber,
+  max: BigNumber,
+  value: BigNumber,
+  numBars: number
+) => {
+  const normalizedValue = value.minus(min).div(max.minus(min));
+  const barIndex = normalizedValue.times(numBars - 1);
+
+  return Math.floor(barIndex.toNumber());
+};
+
+const LPRatioShiftChart = ({ data }: IBean2MaxLPRatio) => {
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const { width } = useElementDimensions(containerRef);
+  const [minBars, setMinBars] = useState(0);
+  const [maxBars, setMaxBars] = useState(0);
+  const [numBars, setNumBars] = useState(0);
+
+  const caseData = useBeanstalkCaseData();
+
+  const setValues = (values: [min: number, max: number, num: number]) => {
+    setMinBars(values[0]);
+    setMaxBars(values[1]);
+    setNumBars(values[2]);
+  };
+
+  useEffect(() => {
+    const _maxBars = calculateNumBarsWithSpacing(width, MIN_SPACING);
+    const _minBars = calculateNumBarsWithSpacing(width, MAX_SPACING);
+
+    const values = [_minBars, _maxBars, undefined];
+
+    if (numBars === 0 || maxBars <= _minBars) {
+      values[2] = _maxBars;
+    } else if (minBars >= _maxBars) {
+      values[2] = _minBars;
+    }
+
+    if (values[2] !== undefined) {
+      setValues(values as [number, number, number]);
+    }
+  }, [numBars, width, minBars, maxBars]);
+
+  const arr = Array.from({ length: numBars });
+
+  const bean2MaxLP = data.bean2MaxLPRatio.value;
+  const bean2MaxLPScalar = caseData?.delta.bean2MaxLPGPPerBdvScalar;
+  const min = data.bean2MaxLPRatio.min;
+  const max = data.bean2MaxLPRatio.max;
+
+  const isAtMax = bean2MaxLP && bean2MaxLP.eq(data.bean2MaxLPRatio.max);
+  const isAtMin = bean2MaxLP && bean2MaxLP.eq(data.bean2MaxLPRatio.min);
+
+  const increasing = !isAtMax && bean2MaxLPScalar?.gt(0);
+  const decreasing = !isAtMin && bean2MaxLPScalar?.lt(0);
+
+  const selectedIndex =
+    bean2MaxLP && getBarIndex(min, max, bean2MaxLP, numBars);
+
+  const addIndex = increasing ? 1 : decreasing ? -1 : 0;
+
+  const neighborIndex =
+    (increasing || decreasing) && selectedIndex && selectedIndex + addIndex;
+
+  const deltaPct = isAtMax || isAtMin ? ZERO_BN : bean2MaxLPScalar;
+
+  const SubTitle = () => {
+    let displayStr = '';
+    if (isAtMax || isAtMin) {
+      displayStr = `Already at ${isAtMin ? 'minimum' : 'maximum'}`;
+    } else {
+      displayStr = `Expected ${!decreasing ? 'increase' : 'decrease'} of ${
+        deltaPct?.eq(0) ? '0' : deltaPct?.abs().toFormat(1)
+      }% next Season`;
+    }
+
+    return <Typography color="text.secondary">{displayStr}</Typography>;
+  };
+
+  return (
+    <Stack width="100%" ref={containerRef}>
+      <Stack>
+        <Typography variant="h3">
+          {bean2MaxLP ? displayFullBN(bean2MaxLP, 2) : '--'}%{' '}
+          <Typography component="span" variant="h4">
+            Bean to Max LP Ratio
+          </Typography>
+        </Typography>
+        <SubTitle />
+      </Stack>
+      <Stack
+        pt={2}
+        pb={1}
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        width="100%"
+      >
+        {arr.map((_, i) => {
+          const isSelected = !!(bean2MaxLP && selectedIndex === i);
+          const flashing = !!(bean2MaxLP && neighborIndex === i);
+          return (
+            <Bar
+              key={`bar-${i}`}
+              isFlashing={flashing}
+              isSelected={isSelected}
+            />
+          );
+        })}
+      </Stack>
+      <Stack direction="row" justifyContent="space-between" width="100%">
+        <Stack textAlign="left">
+          <Typography variant="subtitle2">
+            {data.bean2MaxLPRatio.min.toFormat(0)}%
+          </Typography>
+          <Typography color="text.secondary">Minimum</Typography>
+        </Stack>
+        <Stack textAlign="right">
+          <Typography variant="subtitle2">
+            {data.bean2MaxLPRatio.max.toFormat(0)}%
+          </Typography>
+          <Typography color="text.secondary">Maximum</Typography>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+const Bean2MaxLPRatio = ({ data }: IBean2MaxLPRatio) => {
+  const sdk = useSdk();
+
+  const maxLP = useMemo(() => {
+    if (!data?.gaugeData) return;
+    const arr = Object.entries(data.gaugeData);
+    const sorted = [...arr].sort(([_ak, a], [_bk, b]) => {
+      const diff = Number(
+        b.gaugePointsPerBdv.minus(a.gaugePointsPerBdv).toString()
+      );
+      return diff;
+    });
+
+    return sdk.tokens.findByAddress(sorted[0][0] || '');
+  }, [data?.gaugeData, sdk]);
+
+  return (
+    <Box>
+      <Box sx={{ borderBottom: '1px solid', borderColor: 'divider' }}>
+        <Stack gap={2} py={2} px={1.5}>
+          <Stack>
+            <Typography variant="h4">
+              Seed reward for Deposited Beans as a % of the Seed reward for the
+              Max LP token
+            </Typography>
+            <Typography color="text.secondary">
+              Beanstalk adjusts the Seed reward of Beans and LP each Season to
+              change the incentives for Conversions, which contributes to peg
+              maintenance.
+            </Typography>
+          </Stack>
+          <Stack direction="row" alignItems="center" gap={0.5}>
+            {maxLP && (
+              <TokenIcon
+                token={maxLP}
+                css={{ height: '24px', width: '24px', marginTop: '-2px' }}
+              />
+            )}
+            <Typography>
+              {maxLP?.symbol || '--'} is currently the Max LP, i.e., the LP
+              token with the highest Gauge Points per BDV.
+            </Typography>
+          </Stack>
+          <Link
+            href="https://docs.bean.money/almanac/peg-maintenance/bean-to-max-lp-seed-ratio"
+            target="_blank"
+            underline="always"
+            color="primary.main"
+          >
+            Read more about the Bean to Max LP Ratio
+          </Link>
+        </Stack>
+      </Box>
+      <Box px={1.5} py={2}>
+        <LPRatioShiftChart data={data} />
+      </Box>
+    </Box>
+  );
+};
+
+export default Bean2MaxLPRatio;
diff --git a/projects/ui/src/components/Silo/SeedGauge/SeasonsToCatchUpInfo.tsx b/projects/ui/src/components/Silo/SeedGauge/SeasonsToCatchUpInfo.tsx
new file mode 100644
index 0000000000..f64f3291e5
--- /dev/null
+++ b/projects/ui/src/components/Silo/SeedGauge/SeasonsToCatchUpInfo.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  Box,
+  Divider,
+  Link as MuiLink,
+  Stack,
+  Typography,
+} from '@mui/material';
+import SingleAdvancedChart from '~/components/Analytics/SingleAdvancedChart';
+import { ChartQueryData } from '~/components/Analytics/AdvancedChart';
+import useChartTimePeriodState from '~/hooks/display/useChartTimePeriodState';
+import BigNumber from 'bignumber.js';
+
+type SeasonsToCatchUpInfoProps = {
+  seriesData: ChartQueryData[];
+  queryLoading: boolean;
+  queryError: boolean;
+  timeState: ReturnType<typeof useChartTimePeriodState>;
+};
+
+const SeasonsToCatchUpInfo = (props: SeasonsToCatchUpInfoProps) => (
+  <Stack>
+    <Stack gap={1} py={2} px={1.5}>
+      <Box>
+        <Typography variant="h4">
+          Target Seasons to Catch Up is set to 4320 Seasons, or 6 months.
+        </Typography>
+        <Typography color="text.secondary">
+          This determines the rate at which new Depositors catch up to existing
+          Depositors in terms of Grown Stalk per BDV.
+        </Typography>
+      </Box>
+      <Typography>
+        During periods of many new Deposits, the Grown Stalk per BDV will
+        decrease. During periods of few new Deposits, the Grown Stalk per BDV
+        will increase.
+      </Typography>
+      <MuiLink
+        href="https://docs.bean.money/almanac/farm/silo/seed-gauge-system#grown-stalk-inflation-rate"
+        target="_blank"
+        underline="always"
+        color="primary.main"
+      >
+        Read more about the Target Seasons to Catch Up
+      </MuiLink>
+    </Stack>
+    <Divider />
+    <Stack p={1.5} width="100%">
+      <SingleAdvancedChart
+        storageKeyPrefix="silo-avg-seeds-per-bdv"
+        tooltipTitle="Average Seeds per BDV"
+        tooltipHoverText="The number of Stalk issued per Season per BDV in the Silo."
+        valueAxisType="stalk"
+        tickFormatter={(val) => new BigNumber(val).toFormat(6)}
+        drawPegLine={false}
+        {...props}
+      />
+    </Stack>
+  </Stack>
+);
+export default SeasonsToCatchUpInfo;
diff --git a/projects/ui/src/components/Silo/SeedGauge/SeedGaugeTable.tsx b/projects/ui/src/components/Silo/SeedGauge/SeedGaugeTable.tsx
new file mode 100644
index 0000000000..ab6b66cd88
--- /dev/null
+++ b/projects/ui/src/components/Silo/SeedGauge/SeedGaugeTable.tsx
@@ -0,0 +1,479 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Box,
+  Breakpoint,
+  Card,
+  Chip,
+  Grid,
+  GridProps,
+  Stack,
+  Switch,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import { ERC20Token } from '@beanstalk/sdk';
+import BigNumber from 'bignumber.js';
+import useSdk from '~/hooks/sdk';
+import { displayFullBN } from '~/util';
+import useSeedGauge, {
+  TokenSeedGaugeInfo,
+} from '~/hooks/beanstalk/useSeedGauge';
+import {
+  IconSize,
+  BeanstalkPalette as Palette,
+} from '~/components/App/muiTheme';
+import { ArrowDownward, ArrowUpward, ArrowRight } from '@mui/icons-material';
+import logo from '~/img/tokens/bean-logo.svg';
+import { Link as RouterLink } from 'react-router-dom';
+import { ZERO_BN } from '~/constants';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+
+type GridConfigProps = Pick<GridProps, Breakpoint>;
+
+type ISeedGaugeRow = {
+  token: ERC20Token;
+  gaugePointRatio: BigNumber;
+} & TokenSeedGaugeInfo;
+
+type ISeedGaugeColumn = {
+  key: string;
+  header: string;
+  headerTooltip?: string;
+  render: (data: ISeedGaugeRow) => string | JSX.Element;
+  align?: 'left' | 'right';
+  mobileAlign?: 'left' | 'right';
+};
+
+const GridConfig: Record<
+  string,
+  {
+    advanced: GridConfigProps;
+    // basic is optional b/c the default view limits which ones are shown
+    basic?: GridConfigProps;
+  }
+> = {
+  token: {
+    advanced: { xs: 2, lg: 2 },
+    basic: { xs: 2, sm: 4.5 },
+  },
+  totalBDV: {
+    advanced: { xs: 2 },
+  },
+  gaugePoints: {
+    advanced: { xs: 2 },
+  },
+  gaugePointsPerBDV: {
+    advanced: { xs: 2 },
+  },
+  optimalBDVPct: {
+    advanced: { xs: 2, lg: 2 },
+    basic: { xs: 5, sm: 3 },
+  },
+  currentLPBDVPct: {
+    advanced: { xs: 2 },
+    basic: { xs: 5, sm: 4.5 },
+  },
+};
+
+const displayBNValue = (
+  value: BigNumber | undefined,
+  defaultValue?: string | number
+) => {
+  if (!value || value.eq(0)) return defaultValue?.toString() || 'N/A';
+  return displayFullBN(value, 2);
+};
+
+const isNonZero = (value: BigNumber | undefined) => value && !value.eq(0);
+
+const TokenColumn: ISeedGaugeColumn = {
+  key: 'token',
+  header: 'Token',
+  align: 'left',
+  render: ({ token }) => (
+    <Stack direction="row" gap={1} alignItems="center">
+      <Box
+        component="img"
+        src={token.logo}
+        alt={token.name}
+        height={IconSize.medium}
+      />
+      <Typography color="text.primary">{token.symbol}</Typography>
+    </Stack>
+  ),
+};
+
+const chipSx = {
+  '& .MuiChip-label': {
+    padding: '4px',
+  },
+  height: 'unset',
+  width: 'unset',
+  borderRadius: '4px',
+  fontSize: '16px', // set manually
+  lineHeight: '16px', // set manually
+  background: Palette.lightestGreen,
+  color: Palette.logoGreen,
+};
+
+const BDVPctColumns: ISeedGaugeColumn[] = [
+  {
+    key: 'optimalBDVPct',
+    header: 'Optimal LP BDV %',
+    headerTooltip:
+      'The Beanstalk DAO sets an optimal distribution of Deposited LP BDV amongst whitelisted LP tokens. Seed rewards adjust for a given whitelisted LP token based on the difference between the current and optimal distribution.',
+    render: ({ optimalPctDepositedBdv }) => {
+      if (optimalPctDepositedBdv.eq(0)) {
+        return <Typography color="text.tertiary">N/A</Typography>;
+      }
+      return (
+        <Chip
+          variant="filled"
+          label={`${displayBNValue(optimalPctDepositedBdv, '0')}%`}
+          sx={chipSx}
+        />
+      );
+    },
+  },
+  {
+    key: 'currentLPBDVPct',
+    header: 'Current LP BDV %',
+    render: ({
+      optimalPctDepositedBdv,
+      currentPctDepositedBdv,
+      isAllocatedGP,
+    }) => {
+      if (!isAllocatedGP) {
+        return <Typography color="text.tertiary">N/A</Typography>;
+      }
+      const isOptimal = currentPctDepositedBdv.eq(optimalPctDepositedBdv);
+
+      return (
+        <Chip
+          variant="filled"
+          label={`${currentPctDepositedBdv.toFormat(2, BigNumber.ROUND_HALF_UP)}%`}
+          sx={{
+            ...chipSx,
+            color: isOptimal ? Palette.logoGreen : Palette.theme.winter.red,
+            background: isOptimal ? Palette.lightestGreen : Palette.lightestRed,
+          }}
+        />
+      );
+    },
+  },
+];
+
+const basicViewColumns: ISeedGaugeColumn[] = [TokenColumn, ...BDVPctColumns];
+
+const advancedViewColumns: ISeedGaugeColumn[] = [
+  TokenColumn,
+  {
+    key: 'totalBDV',
+    header: 'Total BDV',
+    render: ({ totalBdv }) => (
+      <Stack direction="row" alignItems="center" gap={0.25}>
+        <img src={logo} style={{ width: 'auto', height: '.85rem' }} alt="" />
+        <Typography
+          color={isNonZero(totalBdv) ? 'text.primary' : 'text.tertiary'}
+        >
+          {displayBNValue(totalBdv, 0)}
+        </Typography>
+      </Stack>
+    ),
+  },
+  {
+    key: 'gaugePoints',
+    header: 'Gauge Points',
+    headerTooltip:
+      'Gauge Points determine how the Grown Stalk issued in a Season should be distributed between whitelisted LP tokens.',
+    render: ({ gaugePoints, isAllocatedGP }) => (
+      <Typography color={isAllocatedGP ? 'text.primary' : 'text.tertiary'}>
+        {isAllocatedGP ? displayBNValue(gaugePoints, 0) : 'N/A'}
+      </Typography>
+    ),
+  },
+  {
+    key: 'gaugePointsPerBDV',
+    header: 'Gauge Points per BDV',
+    headerTooltip:
+      'The whitelisted LP token with the highest Gauge Points per BDV is the Max LP token.',
+    render: ({ gaugePointsPerBdv, isAllocatedGP }) => (
+      <Typography color={isAllocatedGP ? 'text.primary' : 'text.tertiary'}>
+        {isAllocatedGP
+          ? gaugePointsPerBdv.eq(0)
+            ? 0
+            : gaugePointsPerBdv.lte(0.0001)
+              ? '<0.0001'
+              : gaugePointsPerBdv.toFormat(4)
+          : 'N/A'}
+      </Typography>
+    ),
+  },
+  ...BDVPctColumns,
+];
+
+const useTableConfig = (
+  advancedView: boolean,
+  gaugeData: ReturnType<typeof useSeedGauge>['data']
+) => {
+  const sdk = useSdk();
+  const rowData = useMemo(() => {
+    const baseTokens = [...sdk.tokens.siloWhitelistedWellLP] as ERC20Token[];
+    const tokens = advancedView
+      ? [
+          sdk.tokens.BEAN,
+          ...baseTokens,
+          sdk.tokens.UNRIPE_BEAN,
+          sdk.tokens.UNRIPE_BEAN_WSTETH,
+        ]
+      : baseTokens;
+
+    const totalGaugePoints = Object.values(
+      gaugeData.gaugeData
+    ).reduce<BigNumber>(
+      (prev, curr) => prev.plus(curr.gaugePoints || 0),
+      ZERO_BN
+    );
+
+    const mappedData = tokens.reduce<ISeedGaugeRow[]>((prev, token) => {
+      const gaugeInfo = gaugeData?.gaugeData?.[token.address];
+
+      if (gaugeInfo) {
+        const ratio = gaugeInfo.gaugePoints.div(totalGaugePoints);
+
+        prev.push({
+          token,
+          ...gaugeInfo,
+          gaugePointRatio: totalGaugePoints.gt(0) ? ratio : ZERO_BN,
+        });
+      }
+
+      return prev;
+    }, []);
+
+    return mappedData;
+  }, [sdk, advancedView, gaugeData?.gaugeData]);
+
+  return rowData;
+};
+
+const ExpectedSeedRewardDirection = (row: ISeedGaugeRow) => {
+  const delta = row.optimalPctDepositedBdv
+    .minus(row.currentPctDepositedBdv)
+    .abs();
+
+  // Gauge points don't change if between 0.01%
+  const optimal = delta.lt(0.01);
+
+  // seed rewards don't increase if every well has all gauge points
+  const maxed = row.gaugePointRatio.eq(1);
+
+  if (!row.gaugePoints || row.gaugePoints.lte(0) || optimal || maxed) {
+    return null;
+  }
+
+  const isBelow = row.currentPctDepositedBdv?.lt(row.optimalPctDepositedBdv);
+
+  const direction = isBelow ? 'increase' : 'decrease';
+  const Arrow = isBelow ? ArrowUpward : ArrowDownward;
+  return (
+    <Stack
+      direction="row"
+      justifyContent="flex-end"
+      alignItems="center"
+      pr={2}
+      gap={0.25}
+      display={{ xs: 'none', md: 'flex' }}
+    >
+      <Arrow sx={{ fontSize: '0.9rem', color: 'text.secondary' }} />
+      <Typography color="text.secondary">
+        Expected Seed Reward {direction} next Season
+      </Typography>
+    </Stack>
+  );
+};
+
+const GridColumn = ({
+  column,
+  isAdvanced,
+  ...gridProps
+}: {
+  column: ISeedGaugeColumn;
+  isAdvanced: boolean;
+} & GridProps) => {
+  const configKey = isAdvanced ? 'advanced' : 'basic';
+  const config = GridConfig[column.key];
+  const selectedConfig = config?.[configKey];
+
+  if (!(column.key in GridConfig) || !selectedConfig) return null;
+
+  return (
+    <Grid
+      item
+      display="flex"
+      textAlign={column.align || 'right'}
+      alignItems="center"
+      justifyContent={column.align === 'left' ? 'flex-start' : 'flex-end'}
+      {...selectedConfig}
+      {...gridProps}
+      sx={({ breakpoints }) => ({
+        [breakpoints.down('lg')]: {
+          textAlign: column.mobileAlign || column.align || 'right',
+          justifyContent:
+            (column.mobileAlign || column.align) === 'left'
+              ? 'flex-start'
+              : 'flex-end',
+        },
+        ...gridProps.sx,
+      })}
+    />
+  );
+};
+
+const ARROW_WIDTH = '20px';
+
+const RowSx = {
+  display: 'flex',
+  py: 1.5,
+  px: 2,
+  borderWidth: '0.5px',
+  borderColor: 'divider',
+  background: 'white',
+  '&:hover': {
+    borderColor: 'primary.main',
+    backgroundColor: 'primary.light',
+  },
+};
+
+const lastChildSx = {
+  '&:last-child': {
+    pr: {
+      xs: 0,
+      md: ARROW_WIDTH,
+    },
+  },
+};
+
+const ArrowRightAdornment = () => (
+  <Stack
+    display={{ xs: 'none', md: 'block' }}
+    sx={{ width: ARROW_WIDTH }}
+    alignItems="center"
+  >
+    <ArrowRight
+      sx={{
+        color: 'secondary.main',
+        position: 'relative',
+        top: '3px',
+        marginRight: '-3px',
+      }}
+    />
+  </Stack>
+);
+
+const SeedGaugeTable = ({
+  data,
+  onToggleAdvancedMode,
+}: {
+  data: ReturnType<typeof useSeedGauge>['data'];
+  onToggleAdvancedMode: (v: boolean) => void;
+}) => {
+  const [isAdvanced, setIsAdvanced] = useState(false);
+  const rows = useTableConfig(isAdvanced, data);
+  const cols = isAdvanced ? advancedViewColumns : basicViewColumns;
+
+  return (
+    <Box sx={{ overflowX: 'auto' }}>
+      <Stack sx={{ minWidth: isAdvanced ? '1100px' : 0 }}>
+        <Box sx={{ borderBottom: '0.5px solid', borderColor: 'divider' }}>
+          <Stack px={3}>
+            {/* Show Advanced */}
+            <Stack pt={1.5} direction="row" alignItems="center" gap={1}>
+              <Typography variant="bodySmall">
+                Show additional information
+              </Typography>
+              <Switch
+                size="small"
+                value={isAdvanced}
+                onChange={() => {
+                  setIsAdvanced((prev) => !prev);
+                  onToggleAdvancedMode(isAdvanced);
+                }}
+                inputProps={{ 'aria-label': 'controlled' }}
+              />
+            </Stack>
+
+            {/* Headers */}
+            <Stack pt={1} pb={1.5}>
+              <Grid container direction="row">
+                {cols.map((column) => (
+                  <GridColumn
+                    column={column}
+                    isAdvanced={isAdvanced}
+                    key={`sg-header-${column.key}`}
+                    sx={lastChildSx}
+                  >
+                    <Typography
+                      color="text.secondary"
+                      align="inherit"
+                      textAlign="inherit"
+                    >
+                      {column.header}
+                      {column.headerTooltip ? (
+                        <Tooltip title={column.headerTooltip} placement="top">
+                          <HelpOutlineIcon
+                            sx={{
+                              display: 'inline',
+                              mb: 0.5,
+                              fontSize: '11px',
+                              color: 'text.secondary',
+                            }}
+                          />
+                        </Tooltip>
+                      ) : null}
+                    </Typography>
+                  </GridColumn>
+                ))}
+              </Grid>
+            </Stack>
+          </Stack>
+        </Box>
+
+        {/* Rows */}
+        <Stack p={1} gap={1}>
+          {rows.map((row, i) => (
+            <Box
+              key={`seed-gauge-row-${i}-${row.token.symbol}`}
+              component={RouterLink}
+              to={`/silo/${row.token.address}`}
+              sx={{ textDecoration: 'none' }}
+            >
+              <Card>
+                <Box sx={RowSx}>
+                  <Stack width="100%">
+                    <Grid container>
+                      {cols.map((column, j) => (
+                        <GridColumn
+                          key={`sgr-${i}-${row.token.symbol}-${j}`}
+                          column={column}
+                          isAdvanced={isAdvanced}
+                        >
+                          <Stack direction="row" alignItems="center">
+                            {column.render(row)}
+                            {j === cols.length - 1 && <ArrowRightAdornment />}
+                          </Stack>
+                        </GridColumn>
+                      ))}
+                    </Grid>
+                    <ExpectedSeedRewardDirection {...row} />
+                  </Stack>
+                </Box>
+              </Card>
+            </Box>
+          ))}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};
+
+export default SeedGaugeTable;
diff --git a/projects/ui/src/components/Silo/SeedGauge/index.tsx b/projects/ui/src/components/Silo/SeedGauge/index.tsx
new file mode 100644
index 0000000000..dbd2cf4016
--- /dev/null
+++ b/projects/ui/src/components/Silo/SeedGauge/index.tsx
@@ -0,0 +1,286 @@
+import { Box, Card, Grid, Stack, Typography } from '@mui/material';
+import React, { useEffect, useMemo, useState } from 'react';
+import DropdownIcon from '~/components/Common/DropdownIcon';
+import useSeedGauge, {
+  TokenSeedGaugeInfo,
+} from '~/hooks/beanstalk/useSeedGauge';
+import { displayFullBN } from '~/util';
+import { ZERO_BN } from '~/constants';
+import useSdk from '~/hooks/sdk';
+import { Token } from '@beanstalk/sdk';
+import BeanProgressIcon from '~/components/Common/BeanProgressIcon';
+import useChartTimePeriodState from '~/hooks/display/useChartTimePeriodState';
+import useAvgSeedsPerBDV from '~/hooks/beanstalk/useAvgSeedsPerBDV';
+import SeasonsToCatchUpInfo from './SeasonsToCatchUpInfo';
+import SeedGaugeTable from './SeedGaugeTable';
+import Bean2MaxLPRatio from './Bean2MaxLPRatio';
+
+const TARGET_SEASONS_TO_CATCH_UP = 4320;
+const MONTHS_TO_CATCH_UP = 6;
+
+interface ISeedGaugeCardInfo {
+  title: string;
+  subtitle: string | JSX.Element;
+}
+
+interface ISeedGaugeInfoCardProps extends ISeedGaugeCardInfo {
+  active: boolean;
+  loading?: boolean;
+  setActive: () => void;
+}
+
+const scrollToBottom = () => {
+  window.scrollTo({
+    top: document.body.scrollHeight,
+    behavior: 'smooth',
+  });
+};
+
+const SeedGaugeInfoCard = ({
+  title,
+  subtitle,
+  active,
+  loading,
+  setActive,
+}: ISeedGaugeInfoCardProps) => (
+  <Card
+    onClick={!loading ? setActive : () => {}}
+    sx={({ breakpoints }) => ({
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%',
+      cursor: 'pointer',
+      borderColor: active && 'primary.main',
+      ':hover': {
+        borderColor: 'primary.main',
+        backgroundColor: 'primary.light',
+      },
+      [breakpoints.down('md')]: {
+        backgroundColor: 'light.main',
+      },
+    })}
+  >
+    <Stack
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      py={{ xs: 1, md: 2 }}
+      px={{ xs: 1, md: 1.5 }}
+      height="100%"
+    >
+      <Stack gap={0.5} alignSelf="flex-start">
+        <Typography variant="h4">{title}</Typography>
+        {typeof subtitle === 'string' ? (
+          <Typography>{subtitle}</Typography>
+        ) : (
+          subtitle
+        )}
+      </Stack>
+      <Box alignSelf="center">
+        {loading ? (
+          <BeanProgressIcon size={10} enabled variant="indeterminate" />
+        ) : (
+          <DropdownIcon open={active} sx={{ fontSize: '1.25rem' }} />
+        )}
+      </Box>
+    </Stack>
+  </Card>
+);
+
+const SeedGaugeSelect = ({
+  gaugeQuery: { data, isLoading },
+  activeIndex,
+  setActiveIndex,
+}: {
+  gaugeQuery: ReturnType<typeof useSeedGauge>;
+  activeIndex: number;
+  setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+}) => {
+  const sdk = useSdk();
+
+  const handleSetActiveIndex = (index: number) => {
+    const newIndex = activeIndex === index ? -1 : index;
+    setActiveIndex(newIndex);
+  };
+
+  const cardData = useMemo(() => {
+    const arr: ISeedGaugeCardInfo[] = [];
+
+    arr.push({
+      title: 'Target Seasons to Catch Up',
+      subtitle: (
+        <Typography color="text.primary">
+          {TARGET_SEASONS_TO_CATCH_UP} Seasons, ~{MONTHS_TO_CATCH_UP} months
+        </Typography>
+      ),
+    });
+
+    arr.push({
+      title: 'Bean to Max LP Ratio',
+      subtitle: (
+        <Typography color="text.secondary">
+          <Typography component="span" color="text.primary">
+            {data?.bean2MaxLPRatio.value?.toFormat(1) || '--'}%
+          </Typography>{' '}
+          Seed for Beans vs. the Max LP token
+        </Typography>
+      ),
+    });
+
+    type TokenWithGP = {
+      token: Token;
+    } & TokenSeedGaugeInfo;
+
+    const tokensWithGP: TokenWithGP[] = [];
+
+    if (data?.gaugeData) {
+      // filter out tokens with 0 optimalPercentDepositedBdv
+      for (const token of [...sdk.tokens.siloWhitelist]) {
+        const setting = data.gaugeData[token.address];
+        if (setting?.optimalPctDepositedBdv?.gt(0)) {
+          tokensWithGP.push({ token: token, ...setting });
+        }
+      }
+      // sort by optimalPercentDepositedBdv
+      tokensWithGP.sort(
+        (a, b) =>
+          b.optimalPctDepositedBdv
+            ?.minus(a.optimalPctDepositedBdv || ZERO_BN)
+            .toNumber() || 0
+      );
+    }
+
+    const clipped = tokensWithGP.slice(0, 2);
+    arr.push({
+      title: 'Optimal Distribution of LP',
+      subtitle: (
+        <Typography color="text.secondary">
+          {clipped.length
+            ? clipped.map((datum, i) => {
+                const symbol = datum.token.symbol;
+                const pct = datum.optimalPctDepositedBdv;
+
+                return (
+                  <React.Fragment key={`gp-text-${i}`}>
+                    {symbol}{' '}
+                    <Typography component="span" color="text.primary">
+                      {pct ? displayFullBN(pct, 0) : '-'}%
+                    </Typography>
+                    {i !== clipped.length - 1 ? ', ' : ''}
+                    {/* hacky implementation */}
+                    {tokensWithGP.length > clipped.length &&
+                    i === clipped.length - 1
+                      ? '...'
+                      : ''}
+                  </React.Fragment>
+                );
+              })
+            : '--'}
+        </Typography>
+      ),
+    });
+    return arr;
+  }, [sdk, data]);
+
+  return (
+    <Grid container direction={{ xs: 'column', md: 'row' }} spacing={2}>
+      {cardData.map((info, i) => (
+        <Grid item xs={12} md={4} key={`sgi-${i}`}>
+          <SeedGaugeInfoCard
+            active={activeIndex === i}
+            setActive={() => {
+              handleSetActiveIndex(i);
+            }}
+            loading={isLoading}
+            {...info}
+          />
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+
+const allowedTabs = new Set([0, 1, 2]);
+
+const SeedGaugeInfoSelected = ({
+  activeIndex,
+  data,
+  setWhitelistVisible,
+}: {
+  activeIndex: number;
+  data: ReturnType<typeof useSeedGauge>['data'];
+  setWhitelistVisible: (val: boolean, callback?: () => void) => void;
+}) => {
+  // load the data at the top level
+  const [skip, setSkip] = useState(true);
+
+  const timeState = useChartTimePeriodState('silo-avg-seeds-per-bdv');
+
+  const [seriesData, isLoading, isError] = useAvgSeedsPerBDV(
+    timeState[0],
+    skip
+  );
+
+  useEffect(() => {
+    // Fetch only if we open the seasonsToCatchUp Tab
+    if (activeIndex === 0 && skip) {
+      setSkip(false);
+    }
+  }, [activeIndex, skip]);
+
+  if (!allowedTabs.has(activeIndex)) return null;
+
+  return (
+    <Card>
+      {activeIndex === 0 ? (
+        <SeasonsToCatchUpInfo
+          timeState={timeState}
+          seriesData={seriesData}
+          queryLoading={isLoading}
+          queryError={isError}
+        />
+      ) : null}
+      {activeIndex === 1 ? <Bean2MaxLPRatio data={data} /> : null}
+      {activeIndex === 2 ? (
+        <SeedGaugeTable
+          data={data}
+          onToggleAdvancedMode={setWhitelistVisible}
+        />
+      ) : null}
+    </Card>
+  );
+};
+
+const SeedGaugeDetails = ({
+  setWhitelistVisible,
+}: {
+  setWhitelistVisible: (val: boolean, callback?: () => void) => void;
+}) => {
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
+  const query = useSeedGauge();
+
+  useEffect(() => {
+    if (activeIndex !== 2) {
+      setWhitelistVisible(true, scrollToBottom);
+    }
+  }, [activeIndex, setWhitelistVisible]);
+
+  return (
+    <Stack gap={2}>
+      <SeedGaugeSelect
+        key="seed-gauge-select"
+        activeIndex={activeIndex}
+        gaugeQuery={query}
+        setActiveIndex={setActiveIndex}
+      />
+      <SeedGaugeInfoSelected
+        activeIndex={activeIndex}
+        data={query.data}
+        setWhitelistVisible={setWhitelistVisible}
+      />
+    </Stack>
+  );
+};
+
+export default SeedGaugeDetails;
diff --git a/projects/ui/src/components/Silo/Whitelist.tsx b/projects/ui/src/components/Silo/Whitelist.tsx
index 8ec4215f64..f145b6f99d 100644
--- a/projects/ui/src/components/Silo/Whitelist.tsx
+++ b/projects/ui/src/components/Silo/Whitelist.tsx
@@ -95,653 +95,310 @@ const Whitelist: FC<{
 
   return (
     <Card>
-      {/* Header */}
-      <Box
-        display="flex"
-        sx={{
-          px: 3, // 1 + 2 from Table Body
-          pt: '14px', // manually adjusted
-          pb: '14px', // manually adjusted
-          borderBottomStyle: 'solid',
-          borderBottomColor: 'divider',
-          borderBottomWidth: 1,
-        }}
-      >
-        <Grid container alignItems="center">
-          <Grid item md={2.25} xs={4}>
-            <Typography color="text.secondary">Token</Typography>
-          </Grid>
-          <Grid item md={1} xs={0} display={{ xs: 'none', md: 'block' }}>
-            <Tooltip title="The amount of Stalk and Seeds earned for each 1 Bean Denominated Value (BDV) Deposited in the Silo.">
-              <Typography color="text.secondary">Rewards</Typography>
-            </Tooltip>
-          </Grid>
-          <Grid
-            item
-            md={2.25}
-            xs={0}
-            display={{ xs: 'none', md: 'flex' }}
-            justifyContent="center"
-          >
-            <Tooltip title="Estimated annual Beans earned by a Stalkholder for Depositing an asset.">
-              <Chip
-                variant="filled"
-                color="primary"
-                label={
-                  <Row gap={0.5}>
-                    <TokenIcon token={BEAN[1]} />
-                    vAPY 24H
-                    <Typography color="white" marginTop={-0.25}>
-                      |
-                    </Typography>
-                    7D
-                    <Typography color="white" marginTop={-0.25}>
-                      |
-                    </Typography>
-                    30D
-                  </Row>
-                }
-                onClick={undefined}
-                size="small"
-              />
-            </Tooltip>
-          </Grid>
-          <Grid
-            item
-            md={1.25}
-            xs={0}
-            display={{ xs: 'none', md: 'flex' }}
-            justifyContent="center"
-          >
-            <Tooltip title="Estimated annual growth in Stalk for Depositing an asset.">
-              <Typography color="text.primary">
-                <TokenIcon
-                  token={{ symbol: 'Stalk', logo: stalkIcon } as Token}
-                />{' '}
-                vAPY
-              </Typography>
-            </Tooltip>
-          </Grid>
-          <Grid item md={1} xs={0} display={{ xs: 'none', md: 'block' }}>
-            <Tooltip title="Total Value Deposited in the Silo.">
-              <Typography color="text.secondary">TVD</Typography>
-            </Tooltip>
-          </Grid>
-          <Grid item md={2.75} xs={0} display={{ xs: 'none', md: 'block' }}>
-            <Typography color="text.secondary">Amount Deposited</Typography>
-          </Grid>
-          <Grid
-            item
-            md={1.5}
-            xs={8}
+      <Box sx={{ overflowX: 'auto' }}>
+        <Box sx={{ minWidth: '1100px' }}>
+          {/* Header */}
+          <Box
+            display="flex"
             sx={{
-              textAlign: 'right',
-              paddingRight: { xs: 0, md: `${ARROW_CONTAINER_WIDTH}px` },
+              px: 3, // 1 + 2 from Table Body
+              pt: '14px', // manually adjusted
+              pb: '14px', // manually adjusted
+              borderBottomStyle: 'solid',
+              borderBottomColor: 'divider',
+              borderBottomWidth: 1,
             }}
           >
-            <Tooltip
-              title={
-                <>
-                  The value of your Silo deposits for each whitelisted token,
-                  denominated in {denomination === 'bdv' ? 'Beans' : 'USD'}.
-                  <br />
-                  <Typography
-                    color="text.secondary"
-                    fontSize={FontSize.sm}
-                    fontStyle="italic"
-                  >
-                    Switch to {denomination === 'bdv' ? 'USD' : 'Beans'}: Option
-                    + F
+            <Grid container alignItems="center">
+              <Grid item xs={2.25}>
+                <Typography color="text.secondary">Token</Typography>
+              </Grid>
+              <Grid item xs={1}>
+                <Tooltip title="The amount of Stalk and Seeds earned for each 1 Bean Denominated Value (BDV) Deposited in the Silo.">
+                  <Typography color="text.secondary">Rewards</Typography>
+                </Tooltip>
+              </Grid>
+              <Grid item xs={2.25} justifyContent="center">
+                <Tooltip title="Estimated annual Beans earned by a Stalkholder for Depositing an asset.">
+                  <Chip
+                    variant="filled"
+                    color="primary"
+                    label={
+                      <Row gap={0.5}>
+                        <TokenIcon token={BEAN[1]} />
+                        vAPY 24H
+                        <Typography color="white" marginTop={-0.25}>
+                          |
+                        </Typography>
+                        7D
+                        <Typography color="white" marginTop={-0.25}>
+                          |
+                        </Typography>
+                        30D
+                      </Row>
+                    }
+                    onClick={undefined}
+                    size="small"
+                  />
+                </Tooltip>
+              </Grid>
+              <Grid item xs={1.25} justifyContent="center">
+                <Tooltip title="Estimated annual growth in Stalk for Depositing an asset.">
+                  <Typography color="text.primary">
+                    <TokenIcon
+                      token={{ symbol: 'Stalk', logo: stalkIcon } as Token}
+                    />{' '}
+                    vAPY
                   </Typography>
-                </>
-              }
-            >
-              <Typography color="text.secondary">Value Deposited</Typography>
-            </Tooltip>
-          </Grid>
-        </Grid>
-      </Box>
-      {/* Rows */}
-      <Stack gap={1} p={1}>
-        {config.whitelist.map((token) => {
-          const deposited = farmerSilo.balances[token.address]?.deposited;
-          const isUnripe = token === urBean || token === urBeanWstETH;
-          const isUnripeLP =
-            isUnripe && token.address === UNRIPE_BEAN_WSTETH[1].address;
-          const isDeprecated = checkIfDeprecated(token.address);
-
-          // Unripe data
-          const underlyingToken = isUnripe
-            ? unripeUnderlyingTokens[token.address]
-            : null;
-          const pctUnderlyingDeposited = isUnripe
-            ? (
-                beanstalkSilo.balances[token.address]?.deposited.amount ||
-                ZERO_BN
-              ).div(unripeTokens[token.address]?.supply || ONE_BN)
-            : ONE_BN;
-
-          const wlSx = {
-            textAlign: 'left',
-            px: 2,
-            py: 1.5,
-            borderColor: 'divider',
-            borderWidth: '0.5px',
-            background: BeanstalkPalette.white,
-            '&:hover': {
-              borderColor: 'primary.main',
-              backgroundColor: 'primary.light',
-            },
-          };
-
-          const depSx = {
-            textAlign: 'left',
-            px: 2,
-            py: 1.5,
-            height: '90px',
-            borderColor: '#d2ebfd',
-            borderWidth: '0.5px',
-            background: BeanstalkPalette.white,
-            '&:hover': {
-              borderColor: '#dae8f2',
-              backgroundColor: 'primary.light',
-            },
-          };
-
-          return (
-            <Box key={`${token.address}-${token.chainId}`}>
-              <Button
-                component={RouterLink}
-                to={`/silo/${token.address}`}
-                fullWidth
-                variant="outlined"
-                color="primary"
-                size="large"
-                sx={isDeprecated ? depSx : wlSx}
+                </Tooltip>
+              </Grid>
+              <Grid item xs={1}>
+                <Tooltip title="Total Value Deposited in the Silo.">
+                  <Typography color="text.secondary">TVD</Typography>
+                </Tooltip>
+              </Grid>
+              <Grid item xs={2.75}>
+                <Typography color="text.secondary">Amount Deposited</Typography>
+              </Grid>
+              <Grid
+                item
+                xs={1.5}
+                sx={{
+                  textAlign: 'right',
+                  paddingRight: { xs: 0, md: `${ARROW_CONTAINER_WIDTH}px` },
+                }}
               >
-                <Grid container alignItems="center">
-                  {/**
-                   * Cell: Token
-                   */}
-                  <Grid
-                    item
-                    md={isDeprecated ? 6.75 : 2.25}
-                    xs={isDeprecated ? 7 : 7}
-                  >
-                    <Row gap={1}>
-                      <Box
-                        component="img"
-                        src={token.logo}
-                        alt={token.name}
-                        css={{
-                          height: IconSize.medium,
-                          display: 'inline',
-                          opacity: isDeprecated ? 0.2 : 1,
-                        }}
-                      />
-                      <Typography
-                        display="inline"
-                        color={isDeprecated ? 'text.tertiary' : 'text.primary'}
-                      >
-                        {token.name}
-                      </Typography>
-                    </Row>
-                    {isDeprecated && (
-                      <Chip
-                        icon={<ReportGmailerrorred />}
-                        variant="outlined"
-                        sx={{
-                          border: 'none',
-                          color: '#9ca3ad',
-                          backgroundColor: '#f2f7fd',
-                          marginTop: '5px',
-                          padding: '15px 10px',
-                        }}
-                        size="small"
-                        label="Removed from Deposit Whitelist in BIP-45"
-                      />
-                    )}
-                  </Grid>
-                  {!isDeprecated && (
-                    /**
-                     * Cell: Rewards
-                     */
-                    <Grid
-                      item
-                      md={1}
-                      xs={0}
-                      display={{ xs: 'none', md: 'block' }}
-                    >
-                      <Row gap={0.75}>
-                        <Tooltip
-                          placement="right"
-                          title={
-                            <Stack gap={0.25}>
-                              1 {token.symbol} = {displayFullBN(getBDV(token))}{' '}
-                              BDV
-                              <Row gap={0.2}>
-                                <TokenIcon
-                                  token={STALK}
-                                  css={{ height: '0.8em', marginTop: '-1px' }}
-                                />
-                                <Typography color="text.primary" mr={0.2}>
-                                  {token.rewards?.stalk}
-                                </Typography>
-                                <TokenIcon token={SEEDS} />
-                                <Typography color="text.primary">
-                                  {token.rewards?.seeds || 0}
-                                </Typography>
-                              </Row>
-                            </Stack>
-                          }
-                        >
-                          <Box>
-                            <Row gap={0.2}>
-                              <TokenIcon
-                                token={STALK}
-                                css={{ height: '0.8em', marginTop: '-1px' }}
-                              />
-                              <Typography color="text.primary" mr={0.2}>
-                                {token.rewards?.stalk}
-                              </Typography>
-                              <TokenIcon token={SEEDS} />
-                              <Typography color="text.primary">
-                                {roundWithDecimals(token.rewards?.seeds, 3)}
-                              </Typography>
-                            </Row>
-                          </Box>
-                        </Tooltip>
-                      </Row>
-                    </Grid>
-                  )}
-                  {/**
-                   * Cell: Bean APY
-                   */}
-                  {!isDeprecated && (
-                    <Grid
-                      item
-                      md={2.25}
-                      xs={0}
-                      display={{ xs: 'none', md: 'flex' }}
-                      justifyContent="center"
-                    >
-                      <SiloAssetApyChip token={token} metric="bean" />
-                    </Grid>
-                  )}
-                  {/**
-                   * Cell: Stalk APY
-                   */}
-                  {!isDeprecated && (
-                    <Grid
-                      item
-                      md={1.25}
-                      xs={0}
-                      display={{ xs: 'none', md: 'flex' }}
-                      justifyContent="center"
-                    >
-                      <SiloAssetApyChip token={token} metric="stalk" />
-                    </Grid>
-                  )}
-                  {/**
-                   * Cell: TVD
-                   */}
-                  <Grid
-                    item
-                    md={1}
-                    xs={0}
-                    display={{ xs: 'none', md: 'block' }}
-                  >
-                    <Tooltip
-                      placement="right"
-                      componentsProps={TOOLTIP_COMPONENT_PROPS}
-                      title={
-                        isUnripe ? (
-                          <Stack gap={0.5}>
-                            <Stack
-                              direction={{ xs: 'column', md: 'row' }}
-                              gap={{ xs: 0, md: 1 }}
-                              alignItems="stretch"
-                            >
-                              <Row display={{ xs: 'none', md: 'flex' }}>=</Row>
-                              <Box sx={{ px: 1, py: 0.5, maxWidth: 215 }}>
-                                <Stat
-                                  title={
-                                    <Row gap={0.5}>
-                                      <TokenIcon token={underlyingToken!} />{' '}
-                                      Ripe {underlyingToken!.symbol}
-                                    </Row>
-                                  }
-                                  gap={0.25}
-                                  variant="h4"
-                                  amount={
-                                    <Fiat
-                                      token={underlyingToken!}
-                                      amount={
-                                        unripeTokens[token.address]
-                                          ?.underlying || ZERO_BN
-                                      }
-                                      chop={false}
-                                    />
-                                  }
-                                  subtitle={`The ${denomination.toUpperCase()} value of the ${
-                                    underlyingToken!.symbol
-                                  } underlying all ${token.symbol}.`}
-                                />
-                              </Box>
-                              <Row>×</Row>
-                              <Box sx={{ px: 1, py: 0.5, maxWidth: 245 }}>
-                                <Stat
-                                  title="% Deposited"
-                                  gap={0.25}
-                                  variant="h4"
-                                  amount={`${pctUnderlyingDeposited
-                                    .times(100)
-                                    .toFixed(2)}%`}
-                                  subtitle={
-                                    <>
-                                      The percentage of all {token.symbol} that
-                                      is currently Deposited in the Silo.
-                                    </>
-                                  }
-                                />
-                              </Box>
-                            </Stack>
-                            <Divider sx={{ borderColor: 'divider' }} />
-                            <Box sx={{ pl: { xs: 0, md: 2.7 } }}>
-                              <Typography
-                                variant="bodySmall"
-                                color="text.tertiary"
-                                textAlign="left"
-                              >
-                                Total Amount Deposited:{' '}
-                                {displayFullBN(
-                                  beanstalkSilo.balances[token.address]
-                                    ?.deposited.amount || ZERO_BN,
-                                  token.displayDecimals
-                                )}{' '}
-                                {token.symbol}
-                                <br />
-                                Total Supply:{' '}
-                                {displayFullBN(
-                                  unripeTokens[token.address]?.supply || ZERO_BN
-                                )}{' '}
-                                {token.symbol}
-                                <br />
-                              </Typography>
-                            </Box>
-                          </Stack>
-                        ) : (
-                          <Stack
-                            direction={{ xs: 'column', md: 'row' }}
-                            gap={{ xs: 0, md: 1 }}
-                            alignItems="stretch"
-                          >
-                            <Row display={{ xs: 'none', md: 'flex' }}>=</Row>
-                            <Box sx={{ px: 1, py: 0.5, maxWidth: 245 }}>
-                              <Stat
-                                title={
-                                  <Row gap={0.5}>
-                                    <TokenIcon token={token} /> Total Deposited{' '}
-                                    {token.symbol}
-                                  </Row>
-                                }
-                                gap={0.25}
-                                variant="h4"
-                                amount={displayTokenAmount(
-                                  beanstalkSilo.balances[token.address]?.TVD ||
-                                    ZERO_BN,
-                                  token,
-                                  { showName: false }
-                                )}
-                                subtitle={
-                                  <>
-                                    The total number of {token.symbol} Deposited
-                                    in the Silo.
-                                  </>
-                                }
-                              />
-                            </Box>
-                            <Row>×</Row>
-                            <Box sx={{ px: 1, py: 0.5 }}>
-                              <Stat
-                                title={`${token.symbol} Price`}
-                                gap={0.25}
-                                variant="h4"
-                                amount={<Fiat token={token} amount={ONE_BN} />}
-                                subtitle={`The current price of ${token.symbol}.`}
-                              />
-                            </Box>
-                          </Stack>
-                        )
-                      }
-                    >
+                <Tooltip
+                  title={
+                    <>
+                      The value of your Silo deposits for each whitelisted
+                      token, denominated in{' '}
+                      {denomination === 'bdv' ? 'Beans' : 'USD'}.
+                      <br />
                       <Typography
-                        display="inline"
-                        color={isDeprecated ? 'text.tertiary' : 'text.primary'}
+                        color="text.secondary"
+                        fontSize={FontSize.sm}
+                        fontStyle="italic"
                       >
-                        {isUnripe ? (
-                          <>
-                            <Fiat
-                              token={underlyingToken!}
-                              amount={pctUnderlyingDeposited.times(
-                                unripeTokens[token.address]?.underlying ||
-                                  ZERO_BN
-                              )}
-                              truncate
-                              chop={false}
-                            />
-                            <Typography
-                              display="inline"
-                              color={BeanstalkPalette.theme.winter.red}
-                            >
-                              *
-                            </Typography>
-                          </>
-                        ) : (
-                          <Fiat
-                            token={token}
-                            amount={beanstalkSilo.balances[token.address]?.TVD}
-                            truncate
-                          />
-                        )}
+                        Switch to {denomination === 'bdv' ? 'USD' : 'Beans'}:
+                        Option + F
                       </Typography>
-                    </Tooltip>
-                  </Grid>
+                    </>
+                  }
+                >
+                  <Typography color="text.secondary">
+                    Value Deposited
+                  </Typography>
+                </Tooltip>
+              </Grid>
+            </Grid>
+          </Box>
+          {/* Rows */}
+          <Stack gap={1} p={1}>
+            {config.whitelist.map((token) => {
+              const deposited = farmerSilo.balances[token.address]?.deposited;
+              const isUnripe = token === urBean || token === urBeanWstETH;
+              const isUnripeLP =
+                isUnripe && token.address === UNRIPE_BEAN_WSTETH[1].address;
+              const isDeprecated = checkIfDeprecated(token.address);
 
-                  {farmerSilo.error ? (
-                    <Grid item md={5}>
-                      <Typography color="error.main">
-                        {farmerSilo.error}
-                      </Typography>
-                    </Grid>
-                  ) : (
-                    <>
+              // Unripe data
+              const underlyingToken = isUnripe
+                ? unripeUnderlyingTokens[token.address]
+                : null;
+              const pctUnderlyingDeposited = isUnripe
+                ? (
+                    beanstalkSilo.balances[token.address]?.deposited.amount ||
+                    ZERO_BN
+                  ).div(unripeTokens[token.address]?.supply || ONE_BN)
+                : ONE_BN;
+
+              const wlSx = {
+                textAlign: 'left',
+                px: 2,
+                py: 1.5,
+                borderColor: 'divider',
+                borderWidth: '0.5px',
+                background: BeanstalkPalette.white,
+                '&:hover': {
+                  borderColor: 'primary.main',
+                  backgroundColor: 'primary.light',
+                },
+              };
+
+              const depSx = {
+                textAlign: 'left',
+                px: 2,
+                py: 1.5,
+                height: '90px',
+                borderColor: '#d2ebfd',
+                borderWidth: '0.5px',
+                background: BeanstalkPalette.white,
+                '&:hover': {
+                  borderColor: '#dae8f2',
+                  backgroundColor: 'primary.light',
+                },
+              };
+
+              return (
+                <Box key={`${token.address}-${token.chainId}`}>
+                  <Button
+                    component={RouterLink}
+                    to={`/silo/${token.address}`}
+                    fullWidth
+                    variant="outlined"
+                    color="primary"
+                    size="large"
+                    sx={isDeprecated ? depSx : wlSx}
+                  >
+                    <Grid container alignItems="center">
                       {/**
-                       * Cell: Deposited Amount
+                       * Cell: Token
                        */}
-                      <Grid
-                        item
-                        md={2.5}
-                        xs={0}
-                        display={{ xs: 'none', md: 'block' }}
-                      >
-                        <Typography
-                          color={
-                            isDeprecated ? 'text.tertiary' : 'text.primary'
-                          }
-                        >
-                          {/* If this is the entry for Bean deposits,
-                           * display Earned Beans and Deposited Beans separately.
-                           * Internally they are both considered "Deposited". */}
-                          <Tooltip
-                            placement="right"
-                            title={
-                              token.equals(Bean) &&
-                              farmerSilo.beans.earned.gt(0) ? (
-                                <>
-                                  {displayFullBN(
-                                    deposited?.amount || ZERO_BN,
-                                    token.displayDecimals
-                                  )}{' '}
-                                  Deposited BEAN
-                                  <br />
-                                  +&nbsp;
-                                  <Typography display="inline" color="primary">
-                                    {displayFullBN(
-                                      farmerSilo.beans.earned || ZERO_BN,
-                                      token.displayDecimals
-                                    )}
-                                  </Typography>{' '}
-                                  Earned BEAN
-                                  <br />
-                                  <Divider
-                                    sx={{
-                                      my: 0.5,
-                                      opacity: 0.7,
-                                      borderBottomWidth: 0,
-                                      borderColor: 'divider',
-                                    }}
-                                  />
-                                  ={' '}
-                                  {displayFullBN(
-                                    farmerSilo.beans.earned.plus(
-                                      deposited?.amount || ZERO_BN
-                                    ),
-                                    token.displayDecimals
-                                  )}{' '}
-                                  BEAN
-                                  <br />
-                                </>
-                              ) : (
-                                !token.equals(Bean) &&
-                                deposited?.amount.gt(0) && (
-                                  <Stack gap={0.5}>
-                                    <StatHorizontal label="Current BDV:">
-                                      {displayFullBN(
-                                        deposited?.amount.multipliedBy(
-                                          getBDV(token)
-                                        ) || ZERO_BN,
-                                        token.displayDecimals
-                                      )}
-                                    </StatHorizontal>
-                                    <StatHorizontal label="Recorded BDV:">
-                                      {displayFullBN(
-                                        deposited?.bdv || ZERO_BN,
-                                        token.displayDecimals
-                                      )}
-                                    </StatHorizontal>
-                                  </Stack>
-                                )
-                              )
+                      <Grid item xs={isDeprecated ? 6.75 : 2.25}>
+                        <Row gap={1}>
+                          <Box
+                            component="img"
+                            src={token.logo}
+                            alt={token.name}
+                            css={{
+                              height: IconSize.medium,
+                              display: 'inline',
+                              opacity: isDeprecated ? 0.2 : 1,
+                            }}
+                          />
+                          <Typography
+                            display="inline"
+                            color={
+                              isDeprecated ? 'text.tertiary' : 'text.primary'
                             }
                           >
-                            {/*
-                             * There are multiple states here:
-                             * - No wallet connected. Show Zero
-                             * - Wallet connected, but we haven't even started loading, ie deposited.amount is undefined. Show Loader
-                             * - Loading: farmerSilo.loading. Show Loader
-                             * - We have data: deposited.amount is defined. Show value
-                             */}
-
-                            {farmerSilo.loading ? (
-                              <BeanProgressIcon
-                                size={10}
-                                enabled
-                                variant="indeterminate"
-                              />
-                            ) : deposited?.amount ? (
-                              <span>
-                                {displayFullBN(
-                                  deposited?.amount || ZERO_BN,
-                                  token.displayDecimals
-                                )}
-                                {token.equals(Bean) &&
-                                farmerSilo.beans.earned.gt(0) ? (
-                                  <Typography
-                                    component="span"
-                                    color="primary.main"
-                                  >
-                                    {' + '}
-                                    {displayFullBN(
-                                      farmerSilo.beans.earned,
-                                      token.displayDecimals
-                                    )}
-                                  </Typography>
-                                ) : null}
-                                &nbsp;{token.symbol}
-                              </span>
-                            ) : // Connected and fetcher ran. We must have undefined. Show zero
-                            account.isConnected && farmerSilo.ran ? (
-                              <>0 {token.symbol}</>
-                            ) : // Connected but fetcher hasn't run yet. Show loader preemptively
-                            account.isConnected && !farmerSilo.ran ? (
-                              <BeanProgressIcon
-                                size={10}
-                                enabled
-                                variant="indeterminate"
-                              />
-                            ) : // Not connected. Show Zero in the correct denomination.
-                            denomination === 'bdv' ? (
-                              <>
-                                <Box
-                                  component="img"
-                                  src={logo}
-                                  alt="BEAN"
-                                  sx={{
-                                    height: '1em',
-                                    marginRight: '0.25em',
-                                    display: 'inline',
-                                    position: 'relative',
-                                    top: 0,
-                                    left: 0,
-                                  }}
-                                />
-                                <span>0</span>
-                              </>
-                            ) : (
-                              <span>$0</span>
-                            )}
-                          </Tooltip>
-                        </Typography>
+                            {token.name}
+                          </Typography>
+                        </Row>
+                        {isDeprecated && (
+                          <Chip
+                            icon={<ReportGmailerrorred />}
+                            variant="outlined"
+                            sx={{
+                              border: 'none',
+                              color: '#9ca3ad',
+                              backgroundColor: '#f2f7fd',
+                              marginTop: '5px',
+                              padding: '15px 10px',
+                            }}
+                            size="small"
+                            label="Removed from Deposit Whitelist in BIP-45"
+                          />
+                        )}
                       </Grid>
-
+                      {!isDeprecated && (
+                        /**
+                         * Cell: Rewards
+                         */
+                        <Grid item xs={1}>
+                          <Row gap={0.75}>
+                            <Tooltip
+                              placement="right"
+                              title={
+                                <Stack gap={0.25}>
+                                  1 {token.symbol} ={' '}
+                                  {displayFullBN(getBDV(token))} BDV
+                                  <Row gap={0.2}>
+                                    <TokenIcon
+                                      token={STALK}
+                                      css={{
+                                        height: '0.8em',
+                                        marginTop: '-1px',
+                                      }}
+                                    />
+                                    <Typography color="text.primary" mr={0.2}>
+                                      {token.rewards?.stalk}
+                                    </Typography>
+                                    <TokenIcon token={SEEDS} />
+                                    <Typography color="text.primary">
+                                      {token.rewards?.seeds || 0}
+                                    </Typography>
+                                  </Row>
+                                </Stack>
+                              }
+                            >
+                              <Box>
+                                <Row gap={0.2}>
+                                  <TokenIcon
+                                    token={STALK}
+                                    css={{ height: '0.8em', marginTop: '-1px' }}
+                                  />
+                                  <Typography color="text.primary" mr={0.2}>
+                                    {token.rewards?.stalk}
+                                  </Typography>
+                                  <TokenIcon token={SEEDS} />
+                                  <Typography color="text.primary">
+                                    {roundWithDecimals(token.rewards?.seeds, 3)}
+                                  </Typography>
+                                </Row>
+                              </Box>
+                            </Tooltip>
+                          </Row>
+                        </Grid>
+                      )}
                       {/**
-                       * Cell: My Deposits
+                       * Cell: Bean APY
                        */}
-                      <Grid item md={1.75} xs={5}>
-                        <Row justifyContent="flex-end">
-                          <Tooltip
-                            placement="left"
-                            componentsProps={TOOLTIP_COMPONENT_PROPS}
-                            title={
-                              isUnripe ? (
+                      {!isDeprecated && (
+                        <Grid item xs={2.25} justifyContent="center">
+                          <SiloAssetApyChip token={token} metric="bean" />
+                        </Grid>
+                      )}
+                      {/**
+                       * Cell: Stalk APY
+                       */}
+                      {!isDeprecated && (
+                        <Grid item xs={1.25} justifyContent="center">
+                          <SiloAssetApyChip token={token} metric="stalk" />
+                        </Grid>
+                      )}
+                      {/**
+                       * Cell: TVD
+                       */}
+                      <Grid item xs={1}>
+                        <Tooltip
+                          placement="right"
+                          componentsProps={TOOLTIP_COMPONENT_PROPS}
+                          title={
+                            isUnripe ? (
+                              <Stack gap={0.5}>
                                 <Stack
                                   direction={{ xs: 'column', md: 'row' }}
                                   gap={{ xs: 0, md: 1 }}
                                   alignItems="stretch"
                                 >
-                                  <Box sx={{ px: 1, py: 0.5 }}>
+                                  <Row display={{ xs: 'none', md: 'flex' }}>
+                                    =
+                                  </Row>
+                                  <Box sx={{ px: 1, py: 0.5, maxWidth: 215 }}>
                                     <Stat
                                       title={
                                         <Row gap={0.5}>
-                                          <TokenIcon token={token} />{' '}
-                                          {token.symbol}
+                                          <TokenIcon token={underlyingToken!} />{' '}
+                                          Ripe {underlyingToken!.symbol}
                                         </Row>
                                       }
                                       gap={0.25}
                                       variant="h4"
-                                      amount={displayTokenAmount(
-                                        deposited?.amount || ZERO_BN,
-                                        token,
-                                        { showName: false }
-                                      )}
-                                      subtitle={
-                                        <>
-                                          The number of {token.symbol}
-                                          <br />
-                                          you have Deposited in the Silo.
-                                        </>
+                                      amount={
+                                        <Fiat
+                                          token={underlyingToken!}
+                                          amount={
+                                            unripeTokens[token.address]
+                                              ?.underlying || ZERO_BN
+                                          }
+                                          chop={false}
+                                        />
                                       }
+                                      subtitle={`The ${denomination.toUpperCase()} value of the ${
+                                        underlyingToken!.symbol
+                                      } underlying all ${token.symbol}.`}
                                     />
                                   </Box>
                                   <Row>×</Row>
@@ -793,47 +450,218 @@ const Whitelist: FC<{
                                   <Row>×</Row>
                                   <Box sx={{ px: 1, py: 0.5, maxWidth: 215 }}>
                                     <Stat
-                                      title={`${
-                                        unripeUnderlyingTokens[token.address]
-                                      } Price`}
+                                      title="% Deposited"
                                       gap={0.25}
                                       variant="h4"
-                                      amount={
-                                        <Fiat
-                                          token={
-                                            unripeUnderlyingTokens[
-                                              token.address
-                                            ]
-                                          }
-                                          amount={ONE_BN}
-                                          chop={false}
-                                        />
+                                      amount={`${pctUnderlyingDeposited
+                                        .times(100)
+                                        .toFixed(2)}%`}
+                                      subtitle={
+                                        <>
+                                          The percentage of all {token.symbol}{' '}
+                                          that is currently Deposited in the
+                                          Silo.
+                                        </>
                                       }
-                                      subtitle={`The current price of ${
-                                        unripeUnderlyingTokens[token.address]
-                                          .symbol
-                                      }.`}
                                     />
                                   </Box>
-                                  <Stack
-                                    display={{ xs: 'none', md: 'flex' }}
-                                    alignItems="center"
-                                    justifyContent="center"
-                                  >
-                                    =
-                                  </Stack>
                                 </Stack>
-                              ) : (
-                                ''
-                              )
+                                <Divider sx={{ borderColor: 'divider' }} />
+                                <Box sx={{ pl: { xs: 0, md: 2.7 } }}>
+                                  <Typography
+                                    variant="bodySmall"
+                                    color="text.tertiary"
+                                    textAlign="left"
+                                  >
+                                    Total Amount Deposited:{' '}
+                                    {displayFullBN(
+                                      beanstalkSilo.balances[token.address]
+                                        ?.deposited.amount || ZERO_BN,
+                                      token.displayDecimals
+                                    )}{' '}
+                                    {token.symbol}
+                                    <br />
+                                    Total Supply:{' '}
+                                    {displayFullBN(
+                                      unripeTokens[token.address]?.supply ||
+                                        ZERO_BN
+                                    )}{' '}
+                                    {token.symbol}
+                                    <br />
+                                  </Typography>
+                                </Box>
+                              </Stack>
+                            ) : (
+                              <Stack
+                                direction={{ xs: 'column', md: 'row' }}
+                                gap={{ xs: 0, md: 1 }}
+                                alignItems="stretch"
+                              >
+                                <Row display={{ xs: 'none', md: 'flex' }}>
+                                  =
+                                </Row>
+                                <Box sx={{ px: 1, py: 0.5, maxWidth: 245 }}>
+                                  <Stat
+                                    title={
+                                      <Row gap={0.5}>
+                                        <TokenIcon token={token} /> Total
+                                        Deposited {token.symbol}
+                                      </Row>
+                                    }
+                                    gap={0.25}
+                                    variant="h4"
+                                    amount={displayTokenAmount(
+                                      beanstalkSilo.balances[token.address]
+                                        ?.TVD || ZERO_BN,
+                                      token,
+                                      { showName: false }
+                                    )}
+                                    subtitle={
+                                      <>
+                                        The total number of {token.symbol}{' '}
+                                        Deposited in the Silo.
+                                      </>
+                                    }
+                                  />
+                                </Box>
+                                <Row>×</Row>
+                                <Box sx={{ px: 1, py: 0.5 }}>
+                                  <Stat
+                                    title={`${token.symbol} Price`}
+                                    gap={0.25}
+                                    variant="h4"
+                                    amount={
+                                      <Fiat token={token} amount={ONE_BN} />
+                                    }
+                                    subtitle={`The current price of ${token.symbol}.`}
+                                  />
+                                </Box>
+                              </Stack>
+                            )
+                          }
+                        >
+                          <Typography
+                            display="inline"
+                            color={
+                              isDeprecated ? 'text.tertiary' : 'text.primary'
                             }
                           >
+                            {isUnripe ? (
+                              <>
+                                <Fiat
+                                  token={underlyingToken!}
+                                  amount={pctUnderlyingDeposited.times(
+                                    unripeTokens[token.address]?.underlying ||
+                                      ZERO_BN
+                                  )}
+                                  truncate
+                                  chop={false}
+                                />
+                                <Typography
+                                  display="inline"
+                                  color={BeanstalkPalette.theme.winter.red}
+                                >
+                                  *
+                                </Typography>
+                              </>
+                            ) : (
+                              <Fiat
+                                token={token}
+                                amount={
+                                  beanstalkSilo.balances[token.address]?.TVD
+                                }
+                                truncate
+                              />
+                            )}
+                          </Typography>
+                        </Tooltip>
+                      </Grid>
+
+                      {farmerSilo.error ? (
+                        <Grid item xs={5}>
+                          <Typography color="error.main">
+                            {farmerSilo.error}
+                          </Typography>
+                        </Grid>
+                      ) : (
+                        <>
+                          {/**
+                           * Cell: Deposited Amount
+                           */}
+                          <Grid item xs={2.5}>
                             <Typography
                               color={
                                 isDeprecated ? 'text.tertiary' : 'text.primary'
                               }
                             >
-                              <Row gap={0.3}>
+                              {/* If this is the entry for Bean deposits,
+                               * display Earned Beans and Deposited Beans separately.
+                               * Internally they are both considered "Deposited". */}
+                              <Tooltip
+                                placement="right"
+                                title={
+                                  token.equals(Bean) &&
+                                  farmerSilo.beans.earned.gt(0) ? (
+                                    <>
+                                      {displayFullBN(
+                                        deposited?.amount || ZERO_BN,
+                                        token.displayDecimals
+                                      )}{' '}
+                                      Deposited BEAN
+                                      <br />
+                                      +&nbsp;
+                                      <Typography
+                                        display="inline"
+                                        color="primary"
+                                      >
+                                        {displayFullBN(
+                                          farmerSilo.beans.earned || ZERO_BN,
+                                          token.displayDecimals
+                                        )}
+                                      </Typography>{' '}
+                                      Earned BEAN
+                                      <br />
+                                      <Divider
+                                        sx={{
+                                          my: 0.5,
+                                          opacity: 0.7,
+                                          borderBottomWidth: 0,
+                                          borderColor: 'divider',
+                                        }}
+                                      />
+                                      ={' '}
+                                      {displayFullBN(
+                                        farmerSilo.beans.earned.plus(
+                                          deposited?.amount || ZERO_BN
+                                        ),
+                                        token.displayDecimals
+                                      )}{' '}
+                                      BEAN
+                                      <br />
+                                    </>
+                                  ) : (
+                                    !token.equals(Bean) &&
+                                    deposited?.amount.gt(0) && (
+                                      <Stack gap={0.5}>
+                                        <StatHorizontal label="Current BDV:">
+                                          {displayFullBN(
+                                            deposited?.amount.multipliedBy(
+                                              getBDV(token)
+                                            ) || ZERO_BN,
+                                            token.displayDecimals
+                                          )}
+                                        </StatHorizontal>
+                                        <StatHorizontal label="Recorded BDV:">
+                                          {displayFullBN(
+                                            deposited?.bdv || ZERO_BN,
+                                            token.displayDecimals
+                                          )}
+                                        </StatHorizontal>
+                                      </Stack>
+                                    )
+                                  )
+                                }
+                              >
                                 {/*
                                  * There are multiple states here:
                                  * - No wallet connected. Show Zero
@@ -841,91 +669,309 @@ const Whitelist: FC<{
                                  * - Loading: farmerSilo.loading. Show Loader
                                  * - We have data: deposited.amount is defined. Show value
                                  */}
+
                                 {farmerSilo.loading ? (
-                                  // Data is loading, show spinner
                                   <BeanProgressIcon
                                     size={10}
                                     enabled
                                     variant="indeterminate"
                                   />
-                                ) : (
-                                  // Data is not loading. Note: this could be either before it starts loading, or after
+                                ) : deposited?.amount ? (
+                                  <span>
+                                    {displayFullBN(
+                                      deposited?.amount || ZERO_BN,
+                                      token.displayDecimals
+                                    )}
+                                    {token.equals(Bean) &&
+                                    farmerSilo.beans.earned.gt(0) ? (
+                                      <Typography
+                                        component="span"
+                                        color="primary.main"
+                                      >
+                                        {' + '}
+                                        {displayFullBN(
+                                          farmerSilo.beans.earned,
+                                          token.displayDecimals
+                                        )}
+                                      </Typography>
+                                    ) : null}
+                                    &nbsp;{token.symbol}
+                                  </span>
+                                ) : // Connected and fetcher ran. We must have undefined. Show zero
+                                account.isConnected && farmerSilo.ran ? (
+                                  <>0 {token.symbol}</>
+                                ) : // Connected but fetcher hasn't run yet. Show loader preemptively
+                                account.isConnected && !farmerSilo.ran ? (
+                                  <BeanProgressIcon
+                                    size={10}
+                                    enabled
+                                    variant="indeterminate"
+                                  />
+                                ) : // Not connected. Show Zero in the correct denomination.
+                                denomination === 'bdv' ? (
                                   <>
-                                    {deposited?.amount ? (
-                                      <>
-                                        <Fiat
-                                          token={token}
-                                          amount={deposited?.amount}
+                                    <Box
+                                      component="img"
+                                      src={logo}
+                                      alt="BEAN"
+                                      sx={{
+                                        height: '1em',
+                                        marginRight: '0.25em',
+                                        display: 'inline',
+                                        position: 'relative',
+                                        top: 0,
+                                        left: 0,
+                                      }}
+                                    />
+                                    <span>0</span>
+                                  </>
+                                ) : (
+                                  <span>$0</span>
+                                )}
+                              </Tooltip>
+                            </Typography>
+                          </Grid>
+
+                          {/**
+                           * Cell: My Deposits
+                           */}
+                          <Grid item xs={1.75}>
+                            <Row justifyContent="flex-end">
+                              <Tooltip
+                                placement="left"
+                                componentsProps={TOOLTIP_COMPONENT_PROPS}
+                                title={
+                                  isUnripe ? (
+                                    <Stack
+                                      direction={{ xs: 'column', md: 'row' }}
+                                      gap={{ xs: 0, md: 1 }}
+                                      alignItems="stretch"
+                                    >
+                                      <Box sx={{ px: 1, py: 0.5 }}>
+                                        <Stat
+                                          title={
+                                            <Row gap={0.5}>
+                                              <TokenIcon token={token} />{' '}
+                                              {token.symbol}
+                                            </Row>
+                                          }
+                                          gap={0.25}
+                                          variant="h4"
+                                          amount={displayTokenAmount(
+                                            deposited?.amount || ZERO_BN,
+                                            token,
+                                            { showName: false }
+                                          )}
+                                          subtitle={
+                                            <>
+                                              The number of {token.symbol}
+                                              <br />
+                                              you have Deposited in the Silo.
+                                            </>
+                                          }
                                         />
-                                        {isUnripe ? (
-                                          <Typography
-                                            display="inline"
-                                            color={
-                                              BeanstalkPalette.theme.winter.red
+                                      </Box>
+                                      <Row>×</Row>
+                                      <Box
+                                        sx={{ px: 1, py: 0.5, maxWidth: 215 }}
+                                      >
+                                        {isUnripeLP ? (
+                                          <Stat
+                                            title="Chop Amount"
+                                            gap={0.25}
+                                            variant="h4"
+                                            // After Chop Change, update this to: recap rate * Total LP Underlying urBEANETH * BeanEth LP Price
+                                            amount={`${unripeTokens[token.address]?.penalty?.times(100).toFixed(3)}%`}
+                                            subtitle="The amount of BEANETH received for Chopping 1 urBEANETH."
+                                          />
+                                        ) : (
+                                          <Stat
+                                            title="Chop Rate"
+                                            gap={0.25}
+                                            variant="h4"
+                                            amount={`1 - ${(
+                                              unripeTokens[token.address]
+                                                ?.chopPenalty || ZERO_BN
+                                            ).toFixed(4)}%`}
+                                            subtitle={
+                                              <>
+                                                The current penalty for Chopping
+                                                <br />
+                                                {token.symbol} for{' '}
+                                                {
+                                                  unripeUnderlyingTokens[
+                                                    token.address
+                                                  ].symbol
+                                                }
+                                                .{' '}
+                                                <Link
+                                                  href="https://docs.bean.money/almanac/farm/barn#chopping"
+                                                  target="_blank"
+                                                  rel="noreferrer"
+                                                  underline="hover"
+                                                  onClick={(e) => {
+                                                    e.stopPropagation();
+                                                  }}
+                                                >
+                                                  Learn more
+                                                </Link>
+                                              </>
                                             }
-                                          >
-                                            *
-                                          </Typography>
-                                        ) : null}
-                                      </>
-                                    ) : account.isConnected &&
-                                      farmerSilo.ran ? (
-                                      // Connected, the fetch() ran, but we have no data. (usually we have 0 as a default)
-                                      // But in this case we must have undefined or null. Show zero
-                                      <Fiat token={token} amount={ZERO_BN} />
-                                    ) : account.isConnected &&
-                                      !farmerSilo.ran ? (
-                                      // Connected but haven't started loading. Show loader anyway
+                                          />
+                                        )}
+                                      </Box>
+                                      <Row>×</Row>
+                                      <Box
+                                        sx={{ px: 1, py: 0.5, maxWidth: 215 }}
+                                      >
+                                        <Stat
+                                          title={`${
+                                            unripeUnderlyingTokens[
+                                              token.address
+                                            ]
+                                          } Price`}
+                                          gap={0.25}
+                                          variant="h4"
+                                          amount={
+                                            <Fiat
+                                              token={
+                                                unripeUnderlyingTokens[
+                                                  token.address
+                                                ]
+                                              }
+                                              amount={ONE_BN}
+                                              chop={false}
+                                            />
+                                          }
+                                          subtitle={`The current price of ${
+                                            unripeUnderlyingTokens[
+                                              token.address
+                                            ].symbol
+                                          }.`}
+                                        />
+                                      </Box>
+                                      <Stack
+                                        display={{ xs: 'none', md: 'flex' }}
+                                        alignItems="center"
+                                        justifyContent="center"
+                                      >
+                                        =
+                                      </Stack>
+                                    </Stack>
+                                  ) : (
+                                    ''
+                                  )
+                                }
+                              >
+                                <Typography
+                                  color={
+                                    isDeprecated
+                                      ? 'text.tertiary'
+                                      : 'text.primary'
+                                  }
+                                >
+                                  <Row gap={0.3}>
+                                    {/*
+                                     * There are multiple states here:
+                                     * - No wallet connected. Show Zero
+                                     * - Wallet connected, but we haven't even started loading, ie deposited.amount is undefined. Show Loader
+                                     * - Loading: farmerSilo.loading. Show Loader
+                                     * - We have data: deposited.amount is defined. Show value
+                                     */}
+                                    {farmerSilo.loading ? (
+                                      // Data is loading, show spinner
                                       <BeanProgressIcon
                                         size={10}
                                         enabled
                                         variant="indeterminate"
                                       />
-                                    ) : // Not connected. Show Zero in the correct denomination.
-                                    denomination === 'bdv' ? (
+                                    ) : (
+                                      // Data is not loading. Note: this could be either before it starts loading, or after
                                       <>
-                                        <Box
-                                          component="img"
-                                          src={logo}
-                                          alt="BEAN"
-                                          sx={{
-                                            height: '1em',
-                                            marginRight: '0.25em',
-                                            display: 'inline',
-                                            position: 'relative',
-                                            top: 0,
-                                            left: 0,
-                                          }}
-                                        />
-                                        <span>0</span>
+                                        {deposited?.amount ? (
+                                          <>
+                                            <Fiat
+                                              token={token}
+                                              amount={deposited?.amount}
+                                            />
+                                            {isUnripe ? (
+                                              <Typography
+                                                display="inline"
+                                                color={
+                                                  BeanstalkPalette.theme.winter
+                                                    .red
+                                                }
+                                              >
+                                                *
+                                              </Typography>
+                                            ) : null}
+                                          </>
+                                        ) : account.isConnected &&
+                                          farmerSilo.ran ? (
+                                          // Connected, the fetch() ran, but we have no data. (usually we have 0 as a default)
+                                          // But in this case we must have undefined or null. Show zero
+                                          <Fiat
+                                            token={token}
+                                            amount={ZERO_BN}
+                                          />
+                                        ) : account.isConnected &&
+                                          !farmerSilo.ran ? (
+                                          // Connected but haven't started loading. Show loader anyway
+                                          <BeanProgressIcon
+                                            size={10}
+                                            enabled
+                                            variant="indeterminate"
+                                          />
+                                        ) : // Not connected. Show Zero in the correct denomination.
+                                        denomination === 'bdv' ? (
+                                          <>
+                                            <Box
+                                              component="img"
+                                              src={logo}
+                                              alt="BEAN"
+                                              sx={{
+                                                height: '1em',
+                                                marginRight: '0.25em',
+                                                display: 'inline',
+                                                position: 'relative',
+                                                top: 0,
+                                                left: 0,
+                                              }}
+                                            />
+                                            <span>0</span>
+                                          </>
+                                        ) : (
+                                          <span>$0</span>
+                                        )}
                                       </>
-                                    ) : (
-                                      <span>$0</span>
                                     )}
-                                  </>
-                                )}
-                              </Row>
-                            </Typography>
-                          </Tooltip>
-                          <Stack
-                            display={{ xs: 'none', md: 'block' }}
-                            sx={{ width: ARROW_CONTAINER_WIDTH }}
-                            alignItems="center"
-                          >
-                            <ArrowRightIcon
-                              sx={{ color: 'secondary.main', marginTop: '3px' }}
-                            />
-                          </Stack>
-                        </Row>
-                      </Grid>
-                    </>
-                  )}
-                </Grid>
-              </Button>
-            </Box>
-          );
-        })}
-      </Stack>
+                                  </Row>
+                                </Typography>
+                              </Tooltip>
+                              <Stack
+                                // display={{ xs: 'none', md: 'block' }}
+                                sx={{ width: ARROW_CONTAINER_WIDTH }}
+                                alignItems="center"
+                              >
+                                <ArrowRightIcon
+                                  sx={{
+                                    color: 'secondary.main',
+                                    marginTop: '3px',
+                                  }}
+                                />
+                              </Stack>
+                            </Row>
+                          </Grid>
+                        </>
+                      )}
+                    </Grid>
+                  </Button>
+                </Box>
+              );
+            })}
+          </Stack>
+        </Box>
+      </Box>
     </Card>
   );
 };
diff --git a/projects/ui/src/components/Sun/SeasonCard.tsx b/projects/ui/src/components/Sun/SeasonCard.tsx
index 3e2f0538cd..93de1a6e0c 100644
--- a/projects/ui/src/components/Sun/SeasonCard.tsx
+++ b/projects/ui/src/components/Sun/SeasonCard.tsx
@@ -1,36 +1,27 @@
 import React from 'react';
-import { Typography, Box, Grid } from '@mui/material';
-import BigNumber from 'bignumber.js';
-import rainySeasonIcon from '~/img/beanstalk/sun/rainy-season.svg';
-import drySeasonIcon from '~/img/beanstalk/sun/dry-season.svg';
-import { displayBN, displayFullBN } from '../../util';
-import { FontSize, IconSize } from '../App/muiTheme';
+import { Typography, Box, Grid, Stack } from '@mui/material';
 import Row from '~/components/Common/Row';
 
 import { FC } from '~/types';
+import { SeasonSummary } from '~/hooks/beanstalk/useSeasonsSummary';
+import { FontSize } from '../App/muiTheme';
+import { SeasonSummaryColumn } from '../Nav/Buttons/SunButton';
 
-export interface SeasonCardProps {
-  season: BigNumber;
-  rewardBeans: BigNumber | undefined;
-  issuedSoil: BigNumber | undefined;
-  temperature: BigNumber | undefined;
-  deltaTemperature: BigNumber | undefined;
-  podRate: BigNumber;
-  deltaDemand: BigNumber | undefined;
+export type SeasonCardProps = {
+  // pass in index to ensure that the key is unique
+  index: number;
+  summary: SeasonSummary;
+  columns: Record<string, SeasonSummaryColumn>;
   isNew?: boolean;
-}
+};
 
 const SeasonCard: FC<SeasonCardProps> = ({
-  season,
-  rewardBeans,
-  issuedSoil,
-  podRate,
-  temperature,
-  deltaTemperature,
-  deltaDemand,
+  index,
+  summary,
+  columns,
   isNew = false,
 }) => (
-  <div>
+  <Box>
     <Box
       sx={{
         '&:hover > .next-season': { display: 'block' },
@@ -63,8 +54,8 @@ const SeasonCard: FC<SeasonCardProps> = ({
               textAlign="left"
               color="text.primary"
             >
-              The forecast for Season {season.toString()} is based on data in
-              the current Season.
+              The forecast for Season {summary.season.value?.toString() || '--'}{' '}
+              is based on data in the current Season.
             </Typography>
           </Row>
         </Box>
@@ -80,83 +71,17 @@ const SeasonCard: FC<SeasonCardProps> = ({
         }}
       >
         <Grid container>
-          {/* Season */}
-          <Grid item xs={1.5} md={1.25}>
-            <Row justifyContent="flex-start" spacing={0.5}>
-              {rewardBeans && rewardBeans.lte(0) ? (
-                <img src={drySeasonIcon} height={IconSize.small} alt="" />
-              ) : (
-                <img src={rainySeasonIcon} height={IconSize.small} alt="" />
-              )}
-              <Typography variant="bodySmall">
-                {season?.toString() || '-'}
-              </Typography>
-            </Row>
-          </Grid>
-          {/* New Beans */}
-          <Grid item xs={3} md={2} textAlign="right">
-            <Typography variant="bodySmall">
-              {rewardBeans ? `+ ${displayBN(rewardBeans)}` : '-'}
-            </Typography>
-          </Grid>
-          {/* Soil */}
-          <Grid item xs={3} md={2} textAlign="right">
-            <Typography variant="bodySmall">
-              {issuedSoil
-                ? issuedSoil.lt(0.01)
-                  ? '<0.01'
-                  : displayFullBN(issuedSoil, 2, 2)
-                : '-'}
-            </Typography>
-          </Grid>
-          {/* Temperature */}
-          <Grid item xs={4.5} md={2.75}>
-            <Row justifyContent="flex-end" spacing={0.5}>
-              <Typography variant="bodySmall">
-                {temperature ? `${displayBN(temperature)}%` : '-'}
-              </Typography>
-              <Typography
-                variant="bodySmall"
-                color="text.secondary"
-                sx={{ whiteSpace: 'nowrap' }}
-              >
-                (&nbsp;{deltaTemperature && deltaTemperature.lt(0) ? '-' : '+'}
-                {deltaTemperature?.abs().toString() || '0'}%&nbsp;)
-              </Typography>
-            </Row>
-          </Grid>
-          {/* Pod Rate */}
-          <Grid
-            item
-            xs={0}
-            md={2}
-            display={{ xs: 'none', md: 'block' }}
-            textAlign="right"
-          >
-            <Typography color="text.primary" variant="bodySmall">
-              {podRate?.gt(0) ? `${displayBN(podRate.times(100))}%` : '-'}
-            </Typography>
-          </Grid>
-          {/* Delta Demand */}
-          <Grid
-            item
-            xs={0}
-            md={2}
-            display={{ xs: 'none', md: 'block' }}
-            textAlign="right"
-          >
-            <Typography variant="bodySmall">
-              {deltaDemand
-                ? deltaDemand.lt(-10_000 / 100) || deltaDemand.gt(10_000 / 100)
-                  ? `${deltaDemand.lt(0) ? '-' : ''}∞`
-                  : `${displayBN(deltaDemand.div(100), true)}%`
-                : '-'}
-            </Typography>
-          </Grid>
+          {Object.values(columns).map((col, i) => (
+            <Grid key={`season-card-${index}-${i}`} item {...col.widths}>
+              <Stack height="100%" justifyContent="center">
+                {col.render(summary)}
+              </Stack>
+            </Grid>
+          ))}
         </Grid>
       </Box>
     </Box>
-  </div>
+  </Box>
 );
 
 export default SeasonCard;
diff --git a/projects/ui/src/constants/abi/Beanstalk/abiSnippets.ts b/projects/ui/src/constants/abi/Beanstalk/abiSnippets.ts
new file mode 100644
index 0000000000..1d78cfb03c
--- /dev/null
+++ b/projects/ui/src/constants/abi/Beanstalk/abiSnippets.ts
@@ -0,0 +1,92 @@
+const getGaugePointsPerBdvForToken = [
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'token',
+        type: 'address',
+      },
+    ],
+    name: 'getGaugePointsPerBdvForToken',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+] as const;
+
+const tokenSettings = [
+  {
+    inputs: [{ internalType: 'address', name: 'token', type: 'address' }],
+    name: 'tokenSettings',
+    outputs: [
+      {
+        components: [
+          { internalType: 'bytes4', name: 'selector', type: 'bytes4' },
+          {
+            internalType: 'uint32',
+            name: 'stalkEarnedPerSeason',
+            type: 'uint32',
+          },
+          { internalType: 'uint32', name: 'stalkIssuedPerBdv', type: 'uint32' },
+          { internalType: 'uint32', name: 'milestoneSeason', type: 'uint32' },
+          { internalType: 'int96', name: 'milestoneStem', type: 'int96' },
+          { internalType: 'bytes1', name: 'encodeType', type: 'bytes1' },
+          {
+            internalType: 'int24',
+            name: 'deltaStalkEarnedPerSeason',
+            type: 'int24',
+          },
+          { internalType: 'bytes4', name: 'gpSelector', type: 'bytes4' },
+          { internalType: 'bytes4', name: 'lwSelector', type: 'bytes4' },
+          { internalType: 'uint128', name: 'gaugePoints', type: 'uint128' },
+          {
+            internalType: 'uint64',
+            name: 'optimalPercentDepositedBdv',
+            type: 'uint64',
+          },
+        ],
+        internalType: 'struct Storage.SiloSettings',
+        name: '',
+        type: 'tuple',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+] as const;
+
+const poolDeltaB = [
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'pool',
+        type: 'address',
+      },
+    ],
+    name: 'poolDeltaB',
+    outputs: [
+      {
+        internalType: 'int256',
+        name: '',
+        type: 'int256',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+] as const;
+
+const BEANSTALK_ABI_SNIPPETS = {
+  getGaugePointsPerBdvForToken: getGaugePointsPerBdvForToken,
+  tokenSettings: tokenSettings,
+  poolDeltaB: poolDeltaB,
+} as const;
+
+export default BEANSTALK_ABI_SNIPPETS;
diff --git a/projects/ui/src/constants/index.ts b/projects/ui/src/constants/index.ts
index 04c4a9848f..2771f1dab2 100644
--- a/projects/ui/src/constants/index.ts
+++ b/projects/ui/src/constants/index.ts
@@ -2,6 +2,7 @@ import BigNumber from 'bignumber.js';
 
 import Pool from '~/classes/Pool';
 import Token from '~/classes/Token';
+import BEANSTALK_ABI_SNIPPETS from '~/constants/abi/Beanstalk/abiSnippets';
 
 // --------------
 // Utilities
@@ -58,3 +59,4 @@ export * from './links';
 export * from './values';
 export * from './rpc';
 export * from './tooltips';
+export { BEANSTALK_ABI_SNIPPETS as ABISnippets };
diff --git a/projects/ui/src/graph/client.ts b/projects/ui/src/graph/client.ts
index 66db9bac62..86186ad7a4 100644
--- a/projects/ui/src/graph/client.ts
+++ b/projects/ui/src/graph/client.ts
@@ -98,7 +98,7 @@ const mergeUsingSeasons: (keyArgs: string[]) => FieldPolicy = (keyArgs) => ({
     // merged[2] = ...
     for (let i = 0; i < incoming.length; i += 1) {
       const season = readField('season', incoming[i]);
-      if (((season as number) - 1) < 0) continue;
+      if ((season as number) - 1 < 0) continue;
       if (!season) throw new Error('Seasons queried without season');
       // Season 1 = Index 0
       merged[(season as number) - 1] = incoming[i];
@@ -193,6 +193,7 @@ const beanftLink = new HttpLink({
 /// ///////////////////////// Client ////////////////////////////
 
 export const apolloClient = new ApolloClient({
+  connectToDevTools: true,
   link: ApolloLink.split(
     (operation) => operation.getContext().subgraph === 'bean',
     beanLink, // true
diff --git a/projects/ui/src/graph/graphql.schema.json b/projects/ui/src/graph/graphql.schema.json
index 44d20282a0..94333f469b 100644
--- a/projects/ui/src/graph/graphql.schema.json
+++ b/projects/ui/src/graph/graphql.schema.json
@@ -177174,7 +177174,9 @@
         "name": "derivedFrom",
         "description": "creates a virtual field on the entity that may be queried but cannot be set manually through the mappings API.",
         "isRepeatable": false,
-        "locations": ["FIELD_DEFINITION"],
+        "locations": [
+          "FIELD_DEFINITION"
+        ],
         "args": [
           {
             "name": "field",
@@ -177198,14 +177200,20 @@
         "name": "entity",
         "description": "Marks the GraphQL type as indexable entity.  Each type that should be an entity is required to be annotated with this directive.",
         "isRepeatable": false,
-        "locations": ["OBJECT"],
+        "locations": [
+          "OBJECT"
+        ],
         "args": []
       },
       {
         "name": "include",
         "description": "Directs the executor to include this field or fragment only when the `if` argument is true.",
         "isRepeatable": false,
-        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
+        "locations": [
+          "FIELD",
+          "FRAGMENT_SPREAD",
+          "INLINE_FRAGMENT"
+        ],
         "args": [
           {
             "name": "if",
@@ -177229,7 +177237,11 @@
         "name": "skip",
         "description": "Directs the executor to skip this field or fragment when the `if` argument is true.",
         "isRepeatable": false,
-        "locations": ["FIELD", "FRAGMENT_SPREAD", "INLINE_FRAGMENT"],
+        "locations": [
+          "FIELD",
+          "FRAGMENT_SPREAD",
+          "INLINE_FRAGMENT"
+        ],
         "args": [
           {
             "name": "if",
@@ -177253,7 +177265,9 @@
         "name": "specifiedBy",
         "description": "Exposes a URL that specifies the behavior of this scalar.",
         "isRepeatable": false,
-        "locations": ["SCALAR"],
+        "locations": [
+          "SCALAR"
+        ],
         "args": [
           {
             "name": "url",
@@ -177277,7 +177291,9 @@
         "name": "subgraphId",
         "description": "Defined a Subgraph ID for an object type",
         "isRepeatable": false,
-        "locations": ["OBJECT"],
+        "locations": [
+          "OBJECT"
+        ],
         "args": [
           {
             "name": "id",
@@ -177299,4 +177315,4 @@
       }
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/projects/ui/src/hooks/beanstalk/useAvgSeedsPerBDV.ts b/projects/ui/src/hooks/beanstalk/useAvgSeedsPerBDV.ts
new file mode 100644
index 0000000000..9e92a36bff
--- /dev/null
+++ b/projects/ui/src/hooks/beanstalk/useAvgSeedsPerBDV.ts
@@ -0,0 +1,360 @@
+import { BigNumber } from 'bignumber.js';
+import { useCallback, useEffect, useState } from 'react';
+import { DocumentNode, gql } from '@apollo/client';
+import { BeanstalkSDK, Token } from '@beanstalk/sdk';
+import { Time, Range } from 'lightweight-charts';
+
+import { ChartQueryData } from '~/components/Analytics/AdvancedChart';
+import useSdk from '~/hooks/sdk';
+import { apolloClient } from '~/graph/client';
+import { toBNWithDecimals } from '~/util';
+import { ZERO_BN } from '~/constants';
+
+type SeasonMap<T> = { [season: number]: T };
+
+type SiloAssetsReturn = {
+  season: number;
+  depositedBDV: string;
+  createdAt: string;
+};
+
+type WhitelistReturn = {
+  season: number;
+  stalkEarnedPerSeason: string;
+  createdAt: string;
+};
+
+type MergedQueryData = {
+  season: number;
+  depositedBDV: BigNumber;
+  grownStalkPerSeason: BigNumber;
+  createdAt: string;
+  grownStalkPerBDV: BigNumber;
+  totalBDV: BigNumber;
+};
+
+type SiloTokenDataBySeason = SeasonMap<{
+  [address: string]: Partial<MergedQueryData>;
+}>;
+
+const MAX_DATA_PER_QUERY = 1000;
+
+const SEED_GAUGE_DEPLOYMENT_SEASON = 21798;
+
+const SEED_GAUGE_DEPLOYMENT_TIMESTAMP = 1716408000;
+
+const apolloFetch = async (
+  document: DocumentNode,
+  first: number,
+  season: number
+) =>
+  apolloClient.query({
+    query: document,
+    variables: { first, season_lte: season },
+    fetchPolicy: 'no-cache',
+    notifyOnNetworkStatusChange: true,
+  });
+
+// Main hook with improved error handling and performance
+const useAvgSeedsPerBDV = (
+  range: Range<Time> | undefined,
+  skip = false
+): readonly [
+  seriesData: ChartQueryData[],
+  isLoading: boolean,
+  isError: boolean,
+] => {
+  const [queryData, setQueryData] = useState<ChartQueryData[]>([]);
+  const [numQueries, setNumQueries] = useState<number>(getNumQueries(range));
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const iterations = getNumQueries(range);
+    setNumQueries((prevNumQueries) => Math.max(prevNumQueries, iterations));
+  }, [range]);
+
+  const sdk = useSdk();
+
+  const fetch = useCallback(async () => {
+    if (skip) return;
+    setError(false);
+    setLoading(true);
+    console.debug('[useAvgSeedsPerBDV/fetch]: fetching...');
+
+    const tokens = [sdk.tokens.BEAN, ...sdk.tokens.siloWhitelistedWellLP];
+    const document = createMultiTokenQuery(
+      sdk.contracts.beanstalk.address,
+      tokens
+    );
+
+    const output: SiloTokenDataBySeason = {};
+    let earliestSeason = 999999999;
+
+    try {
+      if (numQueries === 0) {
+        setError(true);
+        throw new Error(
+          'Avg Seeds Per BDV fetch: Invalid range. Expected numQueries > 0 but got 0.'
+        );
+      }
+
+      const fetchData = async (lte: number) =>
+        apolloFetch(document, MAX_DATA_PER_QUERY, lte).then((r) => {
+          earliestSeason = parseResult(r.data, sdk, tokens, output);
+        });
+
+      await fetchData(earliestSeason);
+
+      if (numQueries > 1) {
+        const seasons: number[] = [];
+        for (let i = 0; i < numQueries - 1; i += 1) {
+          const offset = (i + 1) * MAX_DATA_PER_QUERY - MAX_DATA_PER_QUERY;
+          const season_lte = Math.max(0, earliestSeason - offset);
+          if (season_lte < SEED_GAUGE_DEPLOYMENT_SEASON) break;
+          seasons.push(season_lte);
+        }
+
+        await Promise.all(seasons.map((season) => fetchData(season)));
+      }
+
+      const normalized = normalizeQueryResults(sdk, output);
+      setQueryData(normalized);
+
+      console.debug('[useAvgSeedsPerBDV/fetch]: results: ', {
+        output: getOutputHuman(output),
+        normalized,
+      });
+    } catch (e) {
+      console.debug('[useAvgSeedsPerBDV/fetch]: FAILED: ', e);
+      console.error(e);
+      setError(true);
+    } finally {
+      console.debug('[useAvgSeedsPerBDV/fetch]: fetch complete...');
+      setLoading(false);
+    }
+  }, [numQueries, sdk, skip]);
+
+  useEffect(() => {
+    fetch();
+  }, [fetch]);
+
+  return [queryData, loading, error] as const;
+};
+
+export default useAvgSeedsPerBDV;
+
+/// ---------- UTILS ----------
+
+function getNumQueries(range: Range<Time> | undefined): number {
+  const from = Math.max(
+    Number((range?.from || 0).valueOf()),
+    SEED_GAUGE_DEPLOYMENT_TIMESTAMP
+  );
+
+  // always fetch to the latest season
+  const to = Number(Date.now() / 1000).valueOf();
+  const numSeasons = Math.floor((to - from) / 3600);
+
+  return Math.ceil(numSeasons / MAX_DATA_PER_QUERY);
+}
+
+function createMultiTokenQuery(beanstalkAddress: string, tokens: Token[]) {
+  const queryParts = tokens.map(
+    (token) => `seasonsSA_${token.symbol}: siloAssetHourlySnapshots(
+      first: $first
+      orderBy: season
+      orderDirection: desc
+      where: {
+        siloAsset: "${beanstalkAddress.toLowerCase()}-${token.address.toLowerCase()}"
+        season_lte: $season_lte
+        depositedBDV_gt: 0
+      }
+    ) {
+      id
+      season
+      siloAsset {
+        token
+      }
+      depositedBDV
+      createdAt
+    }
+    seasonsWL_${token.symbol}: whitelistTokenHourlySnapshots(
+      first: $first
+      orderBy: season
+      orderDirection: desc
+      where: {
+        token: "${token.address.toLowerCase()}"
+        season_lte: $season_lte
+        stalkEarnedPerSeason_gt: 0
+      }
+    ) {
+      id
+      season
+      token {
+        id
+      }
+      stalkEarnedPerSeason
+      createdAt
+    }`
+  );
+
+  return gql`
+    query MultiTokenSiloAssetAverageSeedsPerBDV(
+      $first: Int!
+      $season_lte: Int!
+    ) {
+      ${queryParts.join('\n')}
+    }
+  `;
+}
+
+function processTokenData(
+  token: Token,
+  sData: SiloAssetsReturn | null,
+  wData: WhitelistReturn | null,
+  output: SiloTokenDataBySeason,
+  sdk: BeanstalkSDK
+) {
+  const season = sData?.season || wData?.season;
+  if (!season || season < SEED_GAUGE_DEPLOYMENT_SEASON) return;
+
+  const { BEAN, SEEDS } = sdk.tokens;
+  output[season] = output[season] || {};
+
+  const existing = output[season][token.address] || {};
+
+  const depositedBDV = existing.depositedBDV?.gt(0)
+    ? existing.depositedBDV
+    : toBNWithDecimals(sData?.depositedBDV || '0', BEAN.decimals);
+
+  const stalkPerSeason = wData?.stalkEarnedPerSeason
+    ? toBNWithDecimals(wData.stalkEarnedPerSeason, SEEDS.decimals)
+    : undefined;
+
+  const grownStalkPerSeason = stalkPerSeason?.gt(0)
+    ? stalkPerSeason
+    : existing.grownStalkPerSeason;
+
+  output[season][token.address] = {
+    ...existing,
+    depositedBDV,
+    grownStalkPerSeason,
+    createdAt: sData?.createdAt || wData?.createdAt || existing.createdAt,
+    season,
+  };
+}
+
+function parseResult(
+  data: any,
+  sdk: BeanstalkSDK,
+  tokens: Token[],
+  output: SiloTokenDataBySeason
+) {
+  let earliestSeason = Infinity;
+
+  tokens.forEach((token) => {
+    const siloAssets = data[`seasonsSA_${token.symbol}`] as SiloAssetsReturn[];
+    const whitelisted = data[`seasonsWL_${token.symbol}`] as WhitelistReturn[];
+
+    if (!siloAssets || !whitelisted) return;
+
+    // Results are sorted in desc order.
+    // Find earliest season from the BEAN dataset
+    if (token.equals(sdk.tokens.BEAN)) {
+      earliestSeason = Math.max(
+        siloAssets[siloAssets.length - 1].season,
+        whitelisted[whitelisted.length - 1].season
+      );
+    }
+    // Create a map of seasons to whitelisted data for quick lookup
+    const whitelistedMap = new Map(whitelisted.map((w) => [w.season, w]));
+
+    siloAssets.forEach((sData) => {
+      const wData = whitelistedMap.get(sData.season);
+      processTokenData(token, sData, wData || null, output, sdk);
+      whitelistedMap.delete(sData.season);
+    });
+
+    // Process any remaining
+    whitelistedMap.forEach((wData) => {
+      processTokenData(token, null, wData, output, sdk);
+    });
+  });
+
+  return earliestSeason;
+}
+
+// Optimized data normalization
+function normalizeQueryResults(
+  sdk: BeanstalkSDK,
+  output: SiloTokenDataBySeason
+): ChartQueryData[] {
+  const map: { [season: number]: ChartQueryData } = {};
+  const timestamps = new Set<Time>();
+
+  Object.entries(output).forEach(([_season, entity]) => {
+    const season = Number(_season);
+    const obj = Object.entries(entity).reduce<Partial<MergedQueryData>>(
+      (prev, [tokenAddress, curr]) => {
+        if (!curr.grownStalkPerSeason || !curr.depositedBDV || !curr.createdAt)
+          return prev;
+
+        if (
+          season > SEED_GAUGE_DEPLOYMENT_SEASON &&
+          sdk.tokens.BEAN_CRV3_LP.address === tokenAddress
+        ) {
+          return prev;
+        }
+
+        const ratio = curr.grownStalkPerSeason.times(curr.depositedBDV);
+
+        return {
+          season: season,
+          createdAt: curr.createdAt,
+          grownStalkPerBDV: (prev.grownStalkPerBDV || ZERO_BN).plus(ratio),
+          depositedBDV: (prev.depositedBDV || ZERO_BN).plus(curr.depositedBDV),
+        };
+      },
+      {}
+    );
+
+    if (!obj.depositedBDV || !obj.grownStalkPerBDV || !obj.createdAt) return;
+
+    const value = obj.grownStalkPerBDV.div(obj.depositedBDV);
+
+    const time = Number(obj.createdAt) as Time;
+
+    if (value.gt(0) && !timestamps.has(time)) {
+      map[season] = {
+        customValues: { season: season },
+        time: time,
+        value: value.toNumber(),
+      };
+      timestamps.add(time);
+    }
+  });
+
+  return Object.values(map).sort((a, b) => Number(a.time) - Number(b.time));
+}
+
+function getOutputHuman(output: SiloTokenDataBySeason) {
+  const _output = Object.entries(output).reduce((prev, [k, v]) => {
+    const obj = Object.entries(v).reduce(
+      (memo, [key, value]) => ({
+        ...memo,
+        [key]: {
+          depositedBDV: value.depositedBDV?.toNumber(),
+          grownStalkPerSeason: value.grownStalkPerSeason?.toNumber(),
+          createdAt: value.createdAt,
+          season: value.season,
+          grownStalkPerBDV: value.grownStalkPerBDV?.toNumber(),
+        },
+      }),
+      {}
+    );
+    return { ...prev, [k]: obj };
+  }, {});
+
+  return _output;
+}
diff --git a/projects/ui/src/hooks/beanstalk/useBeanstalkCaseData.ts b/projects/ui/src/hooks/beanstalk/useBeanstalkCaseData.ts
new file mode 100644
index 0000000000..06f7e3fd18
--- /dev/null
+++ b/projects/ui/src/hooks/beanstalk/useBeanstalkCaseData.ts
@@ -0,0 +1,38 @@
+import { useAppSelector } from '~/state';
+import { useMemo } from 'react';
+import { LibCases } from '~/lib/Beanstalk/LibCases';
+import { ZERO_BN } from '~/constants';
+import useTwaDeltaB from '~/hooks/beanstalk/useTwaDeltaB';
+
+const useBeanstalkCaseData = () => {
+  const caseState = useAppSelector((s) => s._beanstalk.case.caseState);
+  const pools = useAppSelector((s) => s._bean.pools);
+
+  // TODO: change me to use this value once misc improvements is live
+  const { data: deltaBs, isLoading } = useTwaDeltaB();
+  // const deltaB = useAppSelector((s) => s._bean.token.deltaB);
+  const twaDeltaB = deltaBs?.total || ZERO_BN;
+
+  const highestLiqWell = caseState.largestLiqWell.toLowerCase();
+  const poolState = pools[highestLiqWell];
+
+  return useMemo(() => {
+    if (!poolState || isLoading) return;
+
+    const { delta, stateDisplay } = LibCases.evaluateBeanstalk(
+      caseState,
+      poolState.price,
+      twaDeltaB
+    );
+
+    return {
+      highestLiquidityWellPrice: poolState.price || ZERO_BN,
+      twaDeltaB: twaDeltaB,
+      delta,
+      state: caseState,
+      stateDisplay,
+    };
+  }, [caseState, twaDeltaB, poolState, isLoading]);
+};
+
+export default useBeanstalkCaseData;
diff --git a/projects/ui/src/hooks/beanstalk/usePeg.ts b/projects/ui/src/hooks/beanstalk/usePeg.ts
deleted file mode 100644
index 1d5dfe52be..0000000000
--- a/projects/ui/src/hooks/beanstalk/usePeg.ts
+++ /dev/null
@@ -1,225 +0,0 @@
-import BigNumber from 'bignumber.js';
-import { useSelector } from 'react-redux';
-import {
-  DELTA_POD_DEMAND_LOWER_BOUND,
-  DELTA_POD_DEMAND_UPPER_BOUND,
-  MAX_UINT32,
-  ONE_BN,
-  OPTIMAL_POD_RATE,
-  PEG_WEATHER_CASES,
-  POD_RATE_LOWER_BOUND,
-  POD_RATE_UPPER_BOUND,
-  STEADY_SOW_TIME,
-  ZERO_BN,
-} from '~/constants';
-import usePodRate from '~/hooks/beanstalk/usePodRate';
-import useSeason from '~/hooks/beanstalk/useSeason';
-import { AppState } from '~/state';
-import { MaxBN, MinBN } from '~/util';
-
-const RDLower = new BigNumber(POD_RATE_LOWER_BOUND / 100);
-const RDOptimal = new BigNumber(OPTIMAL_POD_RATE / 100);
-const RDUpper = new BigNumber(POD_RATE_UPPER_BOUND / 100);
-
-/// Section 8.10    Bean Supply
-const beanSupply = (
-  // The award for successfully calling the sunrise() function for t;
-  a_t: BigNumber,
-  // The sum of liquidity and time weighted average shortages or excesss of Beans across liquidity pools on the Minting Whitelist over the previous Season;
-  ΔB_t1: BigNumber,
-  // The total Unfertilized Sprouts;
-  𝒟: BigNumber,
-  // The total number of Unharvestable Pods;
-  D: BigNumber
-) => {
-  const m_t = MaxBN(a_t, ΔB_t1);
-  const Δ𝒟_t = MinBN(MaxBN(ZERO_BN, ΔB_t1.div(3)), 𝒟); // The number of Unfertilized Sprouts that are Fertilized by Active Fertilizer and become Rinsable at the beginning of each Season;
-  const ΔD_t = MinBN(MaxBN(ZERO_BN, ΔB_t1.minus(Δ𝒟_t).div(2)), D); // The number of Pods that Ripen and become Harvestable at the beginning of each Season
-  return [m_t, Δ𝒟_t, ΔD_t];
-};
-
-const soilSupply = (
-  // newHarvestablePods: The number of Pods that Ripen and become Harvestable at the beginning of each Season;
-  ΔD_t: BigNumber,
-  // field.weather.yield: The Temperature during t;
-  h_t: BigNumber,
-  // The Pod Rate at the end of the previous Season;
-  RD_t1: BigNumber,
-  // bean.deltaB: The sum of liquidity and time weighted average shortages or excesss of Beans across liquidity pools on the Minting Whitelist over the previous Season;
-  ΔB_t1: BigNumber
-) => {
-  let x: number;
-  if (RDUpper.lte(RD_t1)) {
-    x = 0.5;
-  } else if (RDLower.lt(RD_t1)) {
-    x = 1;
-  } else {
-    x = 1.5;
-  }
-  const Smin_t = new BigNumber(x).times(ΔD_t).div(ONE_BN.plus(h_t.div(100)));
-  const SStart_t = MaxBN(ΔB_t1.negated(), Smin_t);
-  return SStart_t;
-};
-
-// pod rate at end of last season is 2914392367
-// ((startSoil - currentSoil) / lastDSoil) * 100 = delta demand
-
-// See Weather.sol
-const MAX_UINT32_BN = new BigNumber(MAX_UINT32);
-const getDeltaPodDemand = (
-  nextSowTime: BigNumber,
-  lastSowTime: BigNumber,
-  startSoil: BigNumber,
-  endSoil: BigNumber,
-  lastDSoil: BigNumber
-) => {
-  let deltaPodDemand: BigNumber;
-  if (nextSowTime.lt(MAX_UINT32_BN)) {
-    if (
-      lastSowTime.eq(MAX_UINT32_BN) || // No sows last season
-      nextSowTime.lt(300) ||
-      (lastSowTime.gt(STEADY_SOW_TIME) &&
-        nextSowTime.lt(lastSowTime.minus(STEADY_SOW_TIME)))
-    ) {
-      deltaPodDemand = MAX_UINT32_BN;
-    } else if (nextSowTime.lte(lastSowTime.plus(STEADY_SOW_TIME))) {
-      deltaPodDemand = ONE_BN;
-    } else {
-      deltaPodDemand = ZERO_BN;
-    }
-  } else {
-    const dsoil = startSoil.minus(endSoil);
-    if (dsoil.eq(0)) deltaPodDemand = ZERO_BN;
-    if (lastDSoil.eq(0)) deltaPodDemand = MAX_UINT32_BN;
-    else deltaPodDemand = dsoil.div(lastDSoil);
-  }
-  return deltaPodDemand;
-};
-
-const temperature = (
-  podRate: BigNumber,
-  deltaB: BigNumber,
-  deltaPodDemand: BigNumber
-) => {
-  let caseId: number = 0;
-
-  // Evlauate Pod rate
-  if (podRate.gte(RDUpper)) caseId = 24;
-  else if (podRate.gte(RDOptimal)) caseId = 16;
-  else if (podRate.gte(RDLower)) caseId = 8;
-
-  // Evaluate price
-  if (deltaB.gt(0) || (deltaB.eq(0) && podRate.lte(RDOptimal))) {
-    caseId += 4;
-  }
-
-  // Evaluate Delta soil demand
-  if (deltaPodDemand.gte(DELTA_POD_DEMAND_UPPER_BOUND)) caseId += 2;
-  else if (deltaPodDemand.gte(DELTA_POD_DEMAND_LOWER_BOUND)) caseId += 1;
-
-  return [caseId, new BigNumber(PEG_WEATHER_CASES[caseId])] as const;
-};
-
-/**
- *
- */
-const usePeg = () => {
-  const season = useSeason();
-  const bean = useSelector<AppState, AppState['_bean']['token']>(
-    (state) => state._bean.token
-  );
-  const field = useSelector<AppState, AppState['_beanstalk']['field']>(
-    (state) => state._beanstalk.field
-  );
-  const barn = useSelector<AppState, AppState['_beanstalk']['barn']>(
-    (state) => state._beanstalk.barn
-  );
-  const podRate = usePodRate();
-
-  // END HOTFIX
-
-  const [newBeans, newRinsableSprouts, newHarvestablePods] = beanSupply(
-    ZERO_BN, // assume a_t = 0
-    bean.deltaB, // current deltaB via beanastalk.totalDeltaB()
-    barn.unfertilized, // current unfertilized sprouts
-    field.podLine // current pod line
-  );
-
-  const soilStart = soilSupply(
-    newHarvestablePods, // estimated for next season
-    field.temperature.max, // current temperature
-    // POD RATE AS DECIMAL
-    // 100% = 1
-    podRate.div(100), // current pod rate (unharvestable pods / bean supply)
-    bean.deltaB // current deltaB via beanstalk.totalDeltaB()
-  );
-
-  /// TODO:
-  // - Temperature case lookup
-  // - Verify soil
-  // - Display current deltaDemand?
-
-  /// lastDSoil may be zero -> delta pod demand is infinity
-  //    Set delatPodDemand based on nextSowTime
-  //    Decimal.from(1e18) = "infinity"
-  //    someone sowed faster this season than last season
-  //    three cases in which we're increasing
-  //      didnt sow all soil
-  //      someone sowed soil within first 5 mins
-  //      minute-long buffer
-  //        deltaPodDemand was increasing, set to infinity
-  //        dont know how much demand if it all sells
-  //
-  const deltaPodDemand = getDeltaPodDemand(
-    field.weather.thisSowTime,
-    field.weather.lastSowTime,
-    field.soil, // FIX ME (previously startSoil)
-    field.soil,
-    field.weather.lastDSoil
-  );
-
-  const [caseId, deltaTemperature] = temperature(
-    // POD RATE AS DECIMAL
-    podRate.div(100),
-    bean.deltaB,
-    deltaPodDemand
-  );
-
-  // console.log('usePeg', {
-  //   inputs: {
-  //     deltaB: bean.deltaB.toString(),
-  //     podRate: podRate.div(100).toString(),
-  //     unfertilized: barn.unfertilized.toString(),
-  //     unharvestable: field.podLine.toString(),
-  //     weather: {
-  //       nextSowTime: field.weather.nextSowTime.toString(),
-  //       lastSowTime: field.weather.lastSowTime.toString(),
-  //       startSoil: field.weather.startSoil.toString(),
-  //       soil: field.soil.toString(),
-  //       lastDSoil: field.weather.lastDSoil.toString(),
-  //       yield: field.weather.yield.toString(),
-  //     }
-  //   },
-  //   derived: {
-  //     deltaBMultiplier: deltaBMultiplier.toString(),
-  //     bean.deltaB: bean.deltaB.toString(),
-  //   },
-  //   outputs: {
-  //     newHarvestablePods: newHarvestablePods.toString(),
-  //     soilStart: soilStart.toString(),
-  //     deltaTemperature: deltaTemperature.toString()
-  //   },
-  // });
-
-  return {
-    rewardBeans: bean.deltaB,
-    newRinsableSprouts,
-    newHarvestablePods,
-    soilStart,
-    deltaPodDemand,
-    caseId,
-    deltaTemperature,
-  };
-};
-
-export default usePeg;
diff --git a/projects/ui/src/hooks/beanstalk/useSeasonsSummary.ts b/projects/ui/src/hooks/beanstalk/useSeasonsSummary.ts
new file mode 100644
index 0000000000..b91dfc0df1
--- /dev/null
+++ b/projects/ui/src/hooks/beanstalk/useSeasonsSummary.ts
@@ -0,0 +1,375 @@
+import {
+  useSunButtonQuery,
+  SunButtonQuery,
+  useSeasonalLiquidityAndPriceByPoolQuery,
+  SeasonalLiquidityAndPriceByPoolQuery,
+} from '~/generated/graphql';
+import { useAppSelector } from '~/state';
+import BigNumber from 'bignumber.js';
+import { toBNWithDecimals } from '~/util';
+import { useMemo } from 'react';
+import { BeanstalkSDK } from '@beanstalk/sdk';
+import { LibCases } from '~/lib/Beanstalk/LibCases';
+import { ZERO_BN } from '~/constants';
+import useSdk from '../sdk';
+import useSeason from './useSeason';
+import useBeanstalkCaseData from './useBeanstalkCaseData';
+import useSeedGauge from './useSeedGauge';
+
+export type SeasonSummaryItem = {
+  value: BigNumber | undefined;
+  delta?: BigNumber;
+  display?: string;
+};
+
+export type SeasonSummary = {
+  season: SeasonSummaryItem;
+  beanMints: SeasonSummaryItem;
+  maxSoil: SeasonSummaryItem;
+  maxTemperature: SeasonSummaryItem;
+  bean2MaxLPRatio: SeasonSummaryItem;
+  price: SeasonSummaryItem;
+  l2sr: SeasonSummaryItem;
+  podRate: SeasonSummaryItem;
+  deltaPodDemand: SeasonSummaryItem;
+};
+
+type MergedSeasonData = {
+  season: BigNumber;
+  price: BigNumber;
+  rewardBeans: BigNumber;
+  beanSupply: BigNumber;
+  deltaB: BigNumber;
+  issuedSoil: BigNumber;
+  temperature: BigNumber;
+  podRate: BigNumber;
+  soilSoldOut: boolean;
+  blocksToSoldOutSoil: BigNumber;
+  deltaSownBeans: BigNumber;
+  caseId: BigNumber;
+  bean2MaxLPRatio: BigNumber;
+  totalLiquidity: BigNumber;
+  largestLiquidityWellPrice: BigNumber;
+};
+
+const castQueries = (
+  sunQuery: SunButtonQuery | undefined,
+  priceAndLiquidityByPool: SeasonalLiquidityAndPriceByPoolQuery | undefined,
+  currentSeason: BigNumber,
+  sdk: BeanstalkSDK
+): MergedSeasonData[] => {
+  const beanDecimals = sdk.tokens.BEAN.decimals;
+  const currSeason = currentSeason.toNumber();
+  const mergedData = new Map<number, Partial<MergedSeasonData>>();
+
+  const seasons = sunQuery?.seasons;
+  const field = sunQuery?.fields;
+  const silo = sunQuery?.silo;
+  const prices = priceAndLiquidityByPool?.seasons;
+
+  if (!seasons?.length || !field?.length || !silo?.length || !prices?.length) {
+    return [];
+  }
+
+  // Process seasons data
+  seasons.forEach((season) => {
+    const seasonIndex = season.season;
+    mergedData.set(seasonIndex, {
+      ...mergedData.get(seasonIndex),
+      season: new BigNumber(seasonIndex),
+      price: new BigNumber(season.price),
+      rewardBeans: toBNWithDecimals(
+        season.season <= 6074 ? season.deltaBeans : season.rewardBeans,
+        beanDecimals
+      ),
+      beanSupply: toBNWithDecimals(season.beans, beanDecimals),
+      deltaB: toBNWithDecimals(season.deltaB, beanDecimals),
+    });
+  });
+
+  // Process field data
+  field.forEach((f) => {
+    const seasonIndex = f.season;
+    mergedData.set(seasonIndex, {
+      ...mergedData.get(seasonIndex),
+      issuedSoil: toBNWithDecimals(f.issuedSoil, beanDecimals),
+      temperature: new BigNumber(f.temperature),
+      podRate: new BigNumber(f.podRate),
+      soilSoldOut: f.soilSoldOut,
+      blocksToSoldOutSoil: new BigNumber(f.blocksToSoldOutSoil),
+      deltaSownBeans: toBNWithDecimals(f.sownBeans, beanDecimals),
+      caseId: new BigNumber(f.caseId),
+    });
+  });
+
+  // Process silo data
+  silo.forEach((s) => {
+    const seasonIndex = s.season;
+    mergedData.set(seasonIndex, {
+      ...mergedData.get(seasonIndex),
+      bean2MaxLPRatio: toBNWithDecimals(s.beanToMaxLpGpPerBdvRatio, 18),
+    });
+  });
+
+  // Process liquidity and price data
+  prices.forEach((data) => {
+    const seasonIndex = data.season;
+    const existingData = mergedData.get(seasonIndex) || {};
+    const poolLiquidity = new BigNumber(data.pool.liquidityUSD);
+    const poolPrice = new BigNumber(data.pool.lastPrice);
+
+    mergedData.set(seasonIndex, {
+      ...existingData,
+      totalLiquidity: (existingData.totalLiquidity || ZERO_BN).plus(
+        poolLiquidity
+      ),
+      largestLiquidityWellPrice: poolPrice.gt(
+        existingData.largestLiquidityWellPrice || ZERO_BN
+      )
+        ? poolPrice
+        : existingData.largestLiquidityWellPrice,
+    });
+  });
+
+  // Create final array
+  // no need to sort as Map retains insertion order
+  return Array.from({ length: 25 }, (_, i) => {
+    const seasonIndex = currSeason - i;
+    const seasonData = mergedData.get(seasonIndex);
+    return seasonData && seasonData.season
+      ? (seasonData as MergedSeasonData)
+      : null;
+  }).filter((data): data is MergedSeasonData => data !== null);
+};
+
+const getAdjustmentDisplay = (value: BigNumber | undefined) => {
+  if (!value) return '--';
+  if (value.eq(0)) return 'No adjustment';
+  return 'Expected adjustment';
+};
+
+const useSeasonsSummary = () => {
+  const field = useAppSelector((s) => s._beanstalk.field);
+  const { caseState } = useAppSelector((s) => s._beanstalk.case);
+  const pools = useAppSelector((s) => s._bean.pools);
+  const evaluation = useBeanstalkCaseData();
+  const { data: seedGauge } = useSeedGauge();
+  const season = useSeason();
+  const sdk = useSdk();
+
+  const maxPrevSeason = season.minus(25).toNumber();
+  const currentSeason = season.toNumber();
+  const skipQuery = season.lte(0);
+  const twaDeltaB = evaluation?.twaDeltaB || ZERO_BN;
+
+  // Queries
+  const { data: seasonsData, loading: seasonsDataLoading } = useSunButtonQuery({
+    fetchPolicy: 'cache-and-network',
+    variables: {
+      season_lte: currentSeason,
+    },
+    skip: skipQuery,
+  });
+
+  const { data: liquidityAndPrice, loading: liquidityAndPricesLoading } =
+    useSeasonalLiquidityAndPriceByPoolQuery({
+      fetchPolicy: 'cache-and-network',
+      variables: {
+        first: 1000,
+        season_gte: maxPrevSeason,
+        season_lte: currentSeason,
+        pools: sdk.tokens.siloWhitelistedWellLPAddresses.map((address) => address.toLowerCase())
+      },
+      context: { subgraph: 'bean' },
+      skip: skipQuery || !Object.keys(pools).length,
+    });
+
+  const instantaneousDeltaB = sdk.tokens.siloWhitelistedWellLPAddresses.reduce(
+    (prev, address) => {
+      const poolDeltaB = pools[address]?.deltaB || ZERO_BN;
+      return prev.plus(poolDeltaB);
+    },
+    ZERO_BN
+  );
+
+  const forecast = useMemo(() => {
+    const beansMinted = twaDeltaB.gt(0) ? twaDeltaB : ZERO_BN;
+    const maxTemp = field.temperature.max.plus(
+      evaluation?.delta.temperature || 0
+    );
+
+    const summary: SeasonSummary = {
+      season: {
+        value: season.plus(1),
+      },
+      beanMints: {
+        value: twaDeltaB?.gt(0) ? twaDeltaB : ZERO_BN,
+      },
+      maxSoil: {
+        value: LibCases.calcMaxSoil(
+          beansMinted,
+          maxTemp,
+          caseState.podRate,
+          twaDeltaB,
+          instantaneousDeltaB
+        ),
+      },
+      maxTemperature: {
+        value: field.temperature.max.plus(evaluation?.delta.temperature || 0),
+        delta: evaluation?.delta.temperature,
+        display: getAdjustmentDisplay(evaluation?.delta.temperature),
+      },
+      bean2MaxLPRatio: {
+        value: seedGauge.bean2MaxLPRatio.value || ZERO_BN,
+        delta: evaluation?.delta.bean2MaxLPGPPerBdvScalar.times(100) || ZERO_BN,
+        display: getAdjustmentDisplay(
+          evaluation?.delta.bean2MaxLPGPPerBdvScalar
+        ),
+      },
+      price: {
+        value: evaluation?.highestLiquidityWellPrice || ZERO_BN,
+        display: evaluation?.stateDisplay.price,
+      },
+      l2sr: {
+        value: caseState.l2sr,
+        display: evaluation?.stateDisplay.l2sr,
+      },
+      podRate: {
+        value: caseState.podRate,
+        display: evaluation?.stateDisplay.podRate,
+      },
+      deltaPodDemand: {
+        value: caseState.deltaPodDemand,
+        display: evaluation?.stateDisplay.deltaPodDemand,
+      },
+    };
+    return summary;
+  }, [
+    twaDeltaB,
+    instantaneousDeltaB,
+    field.temperature.max,
+    evaluation,
+    seedGauge.bean2MaxLPRatio,
+    season,
+    caseState,
+  ]);
+
+  const seasonsSummary = useMemo(() => {
+    const arr: SeasonSummary[] = [];
+
+    const mergedQueryData = castQueries(
+      seasonsData,
+      liquidityAndPrice,
+      season,
+      sdk
+    );
+
+    if (!mergedQueryData.length) return arr;
+
+    const lastIndex = mergedQueryData.length - 1;
+
+    mergedQueryData.forEach((data, i) => {
+      const prevSeason = i !== lastIndex ? mergedQueryData[i + 1] : null;
+
+      if (!prevSeason) return;
+
+      const deltaTemperature =
+        data.temperature?.minus(prevSeason.temperature) || ZERO_BN;
+
+      const l2sr = data.totalLiquidity.div(data.beanSupply || 1);
+
+      const deltaPodDemand = LibCases.calcDeltaPodDemand([
+        {
+          soilSoldOut: data.soilSoldOut,
+          blocksToSoldOutSoil: data.blocksToSoldOutSoil,
+          sownBeans: data.deltaSownBeans,
+        },
+        {
+          soilSoldOut: prevSeason.soilSoldOut,
+          blocksToSoldOutSoil: prevSeason.blocksToSoldOutSoil,
+          sownBeans: prevSeason.deltaSownBeans,
+        },
+      ]);
+
+      const { stateDisplay, delta } = LibCases.evaluateBeanstalk(
+        {
+          deltaPodDemand: deltaPodDemand || ZERO_BN,
+          l2sr,
+          podRate: data.podRate,
+        },
+        data.largestLiquidityWellPrice,
+        data.deltaB
+      );
+
+      arr.push({
+        season: {
+          value: data.season,
+        },
+        beanMints: {
+          value: data.rewardBeans,
+        },
+        maxSoil: {
+          value: data.issuedSoil,
+        },
+        maxTemperature: {
+          value: data.temperature,
+          delta: deltaTemperature,
+        },
+        bean2MaxLPRatio: {
+          value: data.bean2MaxLPRatio,
+          delta: delta.bean2MaxLPGPPerBdvScalar.times(100),
+        },
+        price: {
+          value: data.largestLiquidityWellPrice,
+          display: stateDisplay.price,
+        },
+        l2sr: {
+          value: l2sr,
+          display: stateDisplay.l2sr,
+        },
+        podRate: {
+          value: data.podRate,
+          display: stateDisplay.podRate,
+        },
+        deltaPodDemand: {
+          value: deltaPodDemand,
+          display: stateDisplay.deltaPodDemand,
+        },
+      });
+    });
+
+    return arr;
+  }, [season, seasonsData, liquidityAndPrice, sdk]);
+
+  return {
+    loading: liquidityAndPricesLoading || seasonsDataLoading,
+    forecast,
+    seasonsSummary,
+  };
+};
+
+export default useSeasonsSummary;
+
+// const displayMergedData = (data: ReturnType<typeof castQueries>) => {
+//   const mapped = data.map((d) => ({
+//     season: d.season.toString(),
+//     price: d.price.toString(),
+//     rewardBeans: d.rewardBeans.toString(),
+//     beanSupply: d.beanSupply.toString(),
+//     deltaB: d.deltaB.toString(),
+
+//     issuedSoil: d.issuedSoil.toString(),
+//     temperature: d.temperature.toString(),
+
+//     podRate: d.podRate.toString(),
+//     soilSoldOut: d.soilSoldOut,
+//     blocksToSoldOutSoil: d.blocksToSoldOutSoil.toString(),
+//     deltaSownBeans: d.deltaSownBeans.toString(),
+//     caseId: d.caseId.toString(),
+
+//     totalLiquidity: d.totalLiquidity.toString(),
+//     largestLiquidityWellPrice: d.largestLiquidityWellPrice.toString(),
+//   }));
+
+//   return mapped;
+// };
diff --git a/projects/ui/src/hooks/beanstalk/useSeedGauge.ts b/projects/ui/src/hooks/beanstalk/useSeedGauge.ts
new file mode 100644
index 0000000000..ac94c475f1
--- /dev/null
+++ b/projects/ui/src/hooks/beanstalk/useSeedGauge.ts
@@ -0,0 +1,177 @@
+import { multicall } from '@wagmi/core';
+import { useQuery } from '@tanstack/react-query';
+import { AddressMap, ZERO_BN, ABISnippets } from '~/constants';
+import { Token } from '@beanstalk/sdk';
+import { config } from '~/util/wagmi/config';
+import { BigNumber as BigNumberJS } from 'bignumber.js';
+import { BigNumber as BigNumberEthers } from 'ethers';
+import { useAppSelector } from '~/state';
+import { useMemo } from 'react';
+import { LibCases } from '~/lib/Beanstalk/LibCases';
+import { toBNWithDecimals } from '~/util/BigNumber';
+import useSdk from '../sdk';
+import useSeason from './useSeason';
+
+type BaseTokenSeedGaugeQueryInfo = {
+  /**
+   * Optimal % of deposited BDV desired by the Gauge System
+   */
+  optimalPctDepositedBdv: BigNumberJS;
+  /**
+   * Current amount of GP allocated by the Gauge System
+   */
+  gaugePoints: BigNumberJS;
+  /**
+   * Gauge points per BDV
+   */
+  gaugePointsPerBdv: BigNumberJS;
+  /**
+   * Whether the whitelisted token is allocated gauge points by the gauge system
+   */
+  isAllocatedGP: boolean;
+};
+
+export type TokenSeedGaugeInfo = {
+  /**
+   * the current percentage of all BDV deposited in the silo
+   */
+  currentPctDepositedBdv: BigNumberJS;
+  /**
+   * the total BDV deposited in the silo
+   */
+  totalBdv: BigNumberJS;
+} & BaseTokenSeedGaugeQueryInfo;
+
+// custom toBignumber js function since we have to handle both ethers and bigint
+const toBN = (
+  n: BigInt | BigNumberEthers | number,
+  decimalsOrToken: number | Token
+) => {
+  const decimals =
+    decimalsOrToken instanceof Token
+      ? decimalsOrToken.decimals
+      : decimalsOrToken;
+
+  return toBNWithDecimals(n.toString(), decimals);
+};
+
+const getTokenSettingsCalls = (address: string, tokens: Token[]) =>
+  tokens.map((token) => ({
+    address: address as `0x{string}`,
+    abi: ABISnippets.tokenSettings,
+    functionName: 'tokenSettings',
+    args: [token.address],
+  }));
+
+const getGPPerBdvPerTokenCalls = (address: string, tokens: Token[]) =>
+  tokens.map((token) => ({
+    address: address as `0x{string}`,
+    abi: ABISnippets.getGaugePointsPerBdvForToken,
+    functionName: 'getGaugePointsPerBdvForToken',
+    args: [token.address],
+  }));
+
+const useSeedGauge = () => {
+  const sdk = useSdk();
+  const season = useSeason();
+  const siloBals = useAppSelector((s) => s._beanstalk.silo.balances);
+  const siloLoading = !Object.keys(siloBals).length;
+  const whitelist = [...sdk.tokens.siloWhitelist];
+
+  const query = useQuery({
+    queryKey: ['beanstalk', 'silo', 'tokenSettings', season.toString()],
+    queryFn: async () => {
+      const b = sdk.contracts.beanstalk;
+
+      const calls = getTokenSettingsCalls(b.address, whitelist);
+      const gaugeCalls = getGPPerBdvPerTokenCalls(b.address, whitelist);
+
+      const [_bean2MaxLPRatio, settings, gaugePointsPerBdvForToken] =
+        await Promise.all([
+          b.getBeanToMaxLpGpPerBdvRatioScaled(),
+          multicall(config, { contracts: calls }),
+          multicall(config, { contracts: gaugeCalls }),
+        ]);
+
+      const map: AddressMap<BaseTokenSeedGaugeQueryInfo> = {};
+
+      whitelist.forEach((token, i) => {
+        const { error: err, result } = settings[i];
+        const { error: gpErr, result: gpResult } = gaugePointsPerBdvForToken[i];
+
+        if (!err && !!result) {
+          const optimalPct = toBN(result.optimalPercentDepositedBdv, 6);
+
+          map[token.address] = {
+            optimalPctDepositedBdv: optimalPct,
+            gaugePoints: toBN(result.gaugePoints, 18),
+            gaugePointsPerBdv: ZERO_BN,
+            isAllocatedGP: optimalPct.gt(0),
+          };
+        }
+
+        if (!gpErr && !!gpResult) {
+          map[token.address].gaugePointsPerBdv = toBN(gpResult, 18);
+        }
+      });
+
+      const bean2MaxLPRatio = toBN(_bean2MaxLPRatio, 18);
+
+      return {
+        tokenSettings: map,
+        bean2MaxLPRatio,
+      };
+    },
+    enabled: !!whitelist.length,
+  });
+
+  const gaugeData = useMemo(() => {
+    if (!Object.keys(siloBals).length || !query.data?.tokenSettings) return {};
+
+    const tokenSettingMap = query.data.tokenSettings;
+
+    const map: AddressMap<TokenSeedGaugeInfo> = {};
+
+    let totalRelevantBdv = ZERO_BN;
+
+    Object.entries(tokenSettingMap).forEach(([address, values]) => {
+      const bdvPerToken = siloBals[address].bdvPerToken || ZERO_BN;
+      const totalDeposited = siloBals[address].deposited.amount || ZERO_BN;
+      const tokenTotalBdv = bdvPerToken.times(totalDeposited);
+
+      if (values.isAllocatedGP) {
+        totalRelevantBdv = totalRelevantBdv.plus(tokenTotalBdv);
+      }
+      map[address] = {
+        ...tokenSettingMap[address],
+        totalBdv: tokenTotalBdv,
+        currentPctDepositedBdv: ZERO_BN, // filler
+      };
+    });
+
+    Object.entries(map).forEach(([key, value]) => {
+      if (value.isAllocatedGP) {
+        const currentPct = value.totalBdv.div(totalRelevantBdv).times(100); // scale amount to pct
+        map[key].currentPctDepositedBdv = currentPct;
+      }
+    });
+
+    return map;
+  }, [query.data?.tokenSettings, siloBals]);
+
+  return {
+    data: {
+      bean2MaxLPRatio: {
+        max: toBN(LibCases.MAX_BEAN_MAX_LP_GP_PER_BDV_RATIO, 18),
+        value: query.data?.bean2MaxLPRatio,
+        min: toBN(LibCases.MIN_BEAN_MAX_LP_GP_PER_BDV_RATIO, 18),
+      },
+      gaugeData: gaugeData,
+    },
+    isLoading: siloLoading || query.isLoading,
+    error: query.error,
+    refetch: query.refetch,
+  };
+};
+
+export default useSeedGauge;
diff --git a/projects/ui/src/hooks/beanstalk/useSiloTokenToFiat.ts b/projects/ui/src/hooks/beanstalk/useSiloTokenToFiat.ts
index f110dc7523..db388a265e 100644
--- a/projects/ui/src/hooks/beanstalk/useSiloTokenToFiat.ts
+++ b/projects/ui/src/hooks/beanstalk/useSiloTokenToFiat.ts
@@ -66,20 +66,10 @@ const useSiloTokenToFiat = () => {
 
       if (_token === urBeanWstETH) {
         // formula for calculating chopped urBEANWstETH LP:
-        // userUrLP * totalUnderlyingLP / totalSupplyUrLP * recapPaidPercent
-        const underlyingTotalLP = unripe[urBeanWstETH.address]?.underlying;
-        const totalSupplyUrLP = unripe[urBeanWstETH.address]?.supply;
-        const recapPaidPercent = unripe[urBeanWstETH.address]?.recapPaidPercent;
-        const choppedLP = _amount
-          .multipliedBy(underlyingTotalLP)
-          .dividedBy(totalSupplyUrLP)
-          .multipliedBy(recapPaidPercent);
+        // amount * penalty (where penalty is amount of beanWstETH for 1 urBeanWstETH)
+        const penalty = unripe[urBeanWstETH.address]?.penalty || ZERO_BN;
+        const choppedLP = _amount.times(penalty);
 
-        // console.log(`underlyingTotalLP`, underlyingTotalLP.toString()); // 285772.366579734565388865
-        // console.log(`totalSupplyUrLP`, totalSupplyUrLP.toString()); // 101482689.1786
-        // console.log(`recapPaidPercent`, recapPaidPercent.toString()); // 0.006132
-        // console.log(`amountLP`, _amount.toString()); // 370168.862647
-        // console.log(`choppedLP`, choppedLP.toString()); // 6.39190475675572378624622472
         const lpUsd = beanPools[beanWstETH.address]?.lpUsd || ZERO_BN;
         const lpBdv = beanPools[beanWstETH.address]?.lpBdv || ZERO_BN;
 
diff --git a/projects/ui/src/hooks/beanstalk/useTwaDeltaB.ts b/projects/ui/src/hooks/beanstalk/useTwaDeltaB.ts
new file mode 100644
index 0000000000..e84884f4c3
--- /dev/null
+++ b/projects/ui/src/hooks/beanstalk/useTwaDeltaB.ts
@@ -0,0 +1,65 @@
+import { useQuery } from '@tanstack/react-query';
+import { ABISnippets, ZERO_BN } from '~/constants';
+import { multicall } from '@wagmi/core';
+import { config } from '~/util/wagmi/config';
+import BigNumber from 'bignumber.js';
+import { toBNWithDecimals } from '../../util/BigNumber';
+import useSdk from '../sdk';
+import useSeason from './useSeason';
+
+const makeMultiCall = (beanstalkAddress: string, pools: string[]) => {
+  const calls = pools.map((pool) => ({
+    address: beanstalkAddress as `0x{string}`,
+    abi: ABISnippets.poolDeltaB,
+    functionName: 'poolDeltaB',
+    args: [pool],
+  }));
+
+  return calls;
+};
+
+/**
+ * use this to calculate twa deltaB.
+ * Remove this once misc improvements bip passes & call beanstalk.getTotalDeltaB() instead
+ */
+const useTwaDeltaB = () => {
+  const sdk = useSdk();
+  const season = useSeason();
+
+  const query = useQuery({
+    queryKey: ['beanstalk', 'twaDeltaB', season.toString()],
+    queryFn: async () => {
+      const whitelist = sdk.tokens.siloWhitelistedWellLPAddresses;
+
+      const results = await multicall(config, {
+        contracts: makeMultiCall(sdk.contracts.beanstalk.address, whitelist),
+      });
+
+      const struct = whitelist.reduce<{
+        deltaBs: Record<string, BigNumber>;
+        total: BigNumber;
+      }>(
+        (prev, curr, i) => {
+          const result = results[i];
+
+          if (!result.error && result.result) {
+            const poolDeltaB = toBNWithDecimals(
+              result.result.toString(),
+              sdk.tokens.BEAN.decimals
+            );
+            prev.deltaBs[curr] = poolDeltaB;
+            prev.total = prev.total.plus(poolDeltaB);
+          }
+
+          return prev;
+        },
+        { deltaBs: {}, total: ZERO_BN }
+      );
+      return struct;
+    },
+  });
+
+  return query;
+};
+
+export default useTwaDeltaB;
diff --git a/projects/ui/src/hooks/display/useChartTimePeriodState.ts b/projects/ui/src/hooks/display/useChartTimePeriodState.ts
new file mode 100644
index 0000000000..6b03046409
--- /dev/null
+++ b/projects/ui/src/hooks/display/useChartTimePeriodState.ts
@@ -0,0 +1,45 @@
+import { subWeeks } from 'date-fns';
+import { Time, Range } from 'lightweight-charts';
+import { useEffect, useState } from 'react';
+
+export type CalendarTimeRange = Range<Time>;
+
+export type CalendarRangePreset =
+  | '1D'
+  | '1W'
+  | '1M'
+  | '3M'
+  | '6M'
+  | 'YTD'
+  | '1Y'
+  | '2Y'
+  | 'ALL';
+
+const initUseChartTimePeriodState = (prefix: string = 'advancedChart') => {
+  const now = Date.now();
+  // charts default to 1 week
+  const weekData: Range<Time> = {
+    from: (subWeeks(now, 1).getTime() / 1000) as Time,
+    to: (now / 1000) as Time,
+  };
+  localStorage.setItem(`${prefix}TimePeriod`, JSON.stringify(weekData));
+  localStorage.setItem(`${prefix}Preset`, JSON.stringify('1W'));
+  return weekData;
+};
+
+/**
+ * defaults to 1 week
+ */
+const useChartTimePeriodState = (prefix: string = 'advancedChart') => {
+  const [timePeriod, setTimePeriod] = useState<Range<Time> | undefined>(
+    initUseChartTimePeriodState(prefix)
+  );
+
+  useEffect(() => {
+    initUseChartTimePeriodState(prefix);
+  }, [prefix]);
+
+  return [timePeriod, setTimePeriod] as const;
+};
+
+export default useChartTimePeriodState;
diff --git a/projects/ui/src/hooks/display/useElementDimensions.ts b/projects/ui/src/hooks/display/useElementDimensions.ts
new file mode 100644
index 0000000000..372fe51691
--- /dev/null
+++ b/projects/ui/src/hooks/display/useElementDimensions.ts
@@ -0,0 +1,37 @@
+import { useEffect, useState, RefObject } from 'react';
+
+export interface Dimensions {
+  width: number;
+  height: number;
+}
+
+function useElementDimensions(ref: RefObject<HTMLElement>): Dimensions {
+  const [dimensions, setDimensions] = useState<Dimensions>({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (ref.current) {
+        const { clientWidth, clientHeight } = ref.current;
+        setDimensions({ width: clientWidth, height: clientHeight });
+      }
+    };
+
+    // Initial calculation
+    updateDimensions();
+
+    // Add event listener for window resize
+    window.addEventListener('resize', updateDimensions);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, [ref]);
+
+  return dimensions;
+}
+
+export default useElementDimensions;
diff --git a/projects/ui/src/hooks/farmer/useFarmerSiloHistory.ts b/projects/ui/src/hooks/farmer/useFarmerSiloHistory.ts
index 5791e3afe6..614b6d1202 100644
--- a/projects/ui/src/hooks/farmer/useFarmerSiloHistory.ts
+++ b/projects/ui/src/hooks/farmer/useFarmerSiloHistory.ts
@@ -10,12 +10,15 @@ import useSeasonsQuery, {
 } from '~/hooks/beanstalk/useSeasonsQuery';
 import useInterpolateDeposits from '~/hooks/farmer/useInterpolateDeposits';
 import useInterpolateStalk from '~/hooks/farmer/useInterpolateStalk';
+import useFarmerBalancesBreakdown from './useFarmerBalancesBreakdown';
 
 const useFarmerSiloHistory = (
   account: string | undefined,
   itemizeByToken: boolean = false,
   includeStalk: boolean = false
 ) => {
+  const breakdown = useFarmerBalancesBreakdown();
+
   /// Data
   const siloRewardsQuery = useFarmerSiloRewardsQuery({
     variables: { account: account || '' },
@@ -28,7 +31,7 @@ const useFarmerSiloHistory = (
     fetchPolicy: 'cache-and-network',
   });
   const seedsPerTokenQuery = useWhitelistTokenRewardsQuery({
-    fetchPolicy: 'cache-and-network'
+    fetchPolicy: 'cache-and-network',
   });
 
   const queryConfig = useMemo(
@@ -57,9 +60,35 @@ const useFarmerSiloHistory = (
     !includeStalk
   );
 
+  const withCurrSeasonDepositsData = useMemo(() => {
+    if (!depositData.length) return depositData;
+    const copy = [...depositData];
+
+    const baseDataPoint = { ...copy[copy.length - 1] };
+    baseDataPoint.value = breakdown.states.deposited.value.toNumber();
+    if (itemizeByToken) {
+      Object.entries(breakdown.states.deposited.byToken).forEach(
+        ([tk, { value }]) => {
+          if (tk in baseDataPoint) {
+            baseDataPoint[tk] = value.toNumber();
+          }
+        }
+      );
+    }
+
+    copy[copy.length - 1] = baseDataPoint;
+    return copy;
+  }, [
+    breakdown.states.deposited.byToken,
+    breakdown.states.deposited.value,
+    itemizeByToken,
+    depositData,
+  ]);
+
   return {
+    // remove the current season's data
     data: {
-      deposits: depositData,
+      deposits: withCurrSeasonDepositsData,
       stalk: stalkData,
       seeds: seedsData,
       grownStalk: grownStalkData,
diff --git a/projects/ui/src/hooks/farmer/useInterpolateDeposits.ts b/projects/ui/src/hooks/farmer/useInterpolateDeposits.ts
index 03971c729f..f913b63613 100644
--- a/projects/ui/src/hooks/farmer/useInterpolateDeposits.ts
+++ b/projects/ui/src/hooks/farmer/useInterpolateDeposits.ts
@@ -1,24 +1,30 @@
 import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import {
   useFarmerSiloAssetSnapshotsQuery,
   useSeasonalInstantPriceQuery,
 } from '~/generated/graphql';
-import { AppState } from '~/state';
+import { useAppSelector } from '~/state';
 import {
   interpolateFarmerDepositedValue,
   SnapshotBeanstalk,
 } from '~/util/Interpolate';
+import { ZERO_BN } from '~/constants';
+import useSdk from '../sdk';
+import useUnripeUnderlyingMap from '../beanstalk/useUnripeUnderlying';
 
 const useInterpolateDeposits = (
   siloAssetsQuery: ReturnType<typeof useFarmerSiloAssetSnapshotsQuery>,
   priceQuery: ReturnType<typeof useSeasonalInstantPriceQuery>,
   itemizeByToken: boolean = false
 ) => {
-  const unripe = useSelector<AppState, AppState['_bean']['unripe']>(
-    (state) => state._bean.unripe
-  );
+  const unripe = useAppSelector((state) => state._bean.unripe);
+  const beanPools = useAppSelector((state) => state._bean.pools);
+  const underlyingMap = useUnripeUnderlyingMap();
+
+  const sdk = useSdk();
+  const urBeanLP = sdk.tokens.UNRIPE_BEAN_WSTETH;
+
   return useMemo(() => {
     if (
       priceQuery.loading ||
@@ -35,21 +41,45 @@ const useInterpolateDeposits = (
       .reduce((prev, asset) => {
         const tokenAddress = asset.token.toLowerCase();
         prev.push(
-          ...asset.hourlySnapshots.map((snapshot) => ({
-            ...snapshot,
-            // For Unripe tokens, derive the "effective BDV" using the Chop Rate.
-            // Instead of using the BDV that Beanstalk honors for Stalk/Seeds, we calculate the BDV
-            // that would (approximately) match the value of the assets if they were chopped.
-            hourlyDepositedBDV:
+          ...asset.hourlySnapshots.map((snapshot) => {
+            let hourlyDepositedBDV;
+
+            if (tokenAddress in unripe) {
+              if (
+                tokenAddress.toLowerCase() === urBeanLP.address.toLowerCase()
+              ) {
+                // formula: penalty = amount of BEANwstETH per 1 urBEANwstETH.
+                // bdv of urBEANwstETH = amount * penalty * BDV of 1 BEANwstETH
+                const underlying = underlyingMap[tokenAddress];
+                const underlyingBDV =
+                  beanPools[underlying.address]?.lpBdv || ZERO_BN;
+
+                const lpAmount = new BigNumber(snapshot.deltaDepositedAmount);
+                const choppedLP = lpAmount.times(
+                  unripe[tokenAddress]?.penalty || 0
+                );
+
+                hourlyDepositedBDV = underlyingBDV.times(choppedLP);
+              } else {
+                hourlyDepositedBDV = new BigNumber(
+                  snapshot.deltaDepositedAmount
+                ).times(unripe[tokenAddress].chopRate);
+              }
+            } else {
+              hourlyDepositedBDV = new BigNumber(snapshot.deltaDepositedBDV);
+            }
+
+            return {
+              ...snapshot,
+              // For Unripe tokens, derive the "effective BDV" using the Chop Rate.
+              // Instead of using the BDV that Beanstalk honors for Stalk/Seeds, we calculate the BDV
+              // that would (approximately) match the value of the assets if they were chopped.
+              hourlyDepositedBDV: hourlyDepositedBDV.toString(),
               // NOTE: this isn't really true since it uses the *instantaneous* chop rate,
               // and the BDV of an unripe token isn't necessarily equal to this. but this matches
               // up with what the silo table below the overview shows.
-              unripe[tokenAddress]
-                ? new BigNumber(snapshot.deltaDepositedAmount).times(
-                    unripe[tokenAddress].chopRate
-                  )
-                : snapshot.deltaDepositedBDV,
-          }))
+            };
+          })
         );
         return prev;
       }, [] as SnapshotBeanstalk[])
@@ -62,10 +92,13 @@ const useInterpolateDeposits = (
     );
   }, [
     priceQuery.loading,
-    priceQuery?.data?.seasons,
-    siloAssetsQuery?.data?.farmer?.silo?.assets,
+    priceQuery.data?.seasons,
+    siloAssetsQuery.data?.farmer?.silo?.assets,
     unripe,
     itemizeByToken,
+    urBeanLP.address,
+    underlyingMap,
+    beanPools,
   ]);
 };
 
diff --git a/projects/ui/src/index.tsx b/projects/ui/src/index.tsx
index 1e48858a7e..15d149193f 100644
--- a/projects/ui/src/index.tsx
+++ b/projects/ui/src/index.tsx
@@ -31,7 +31,6 @@ root.render(
   <React.StrictMode>
     <Wrapper>
       <App />
-      {/* fooooooz */}
     </Wrapper>
   </React.StrictMode>
 );
diff --git a/projects/ui/src/lib/Beanstalk/LibCases.ts b/projects/ui/src/lib/Beanstalk/LibCases.ts
new file mode 100644
index 0000000000..9bb441cbf0
--- /dev/null
+++ b/projects/ui/src/lib/Beanstalk/LibCases.ts
@@ -0,0 +1,539 @@
+import BigNumber from 'bignumber.js';
+import { ONE_BN, ZERO_BN } from '~/constants';
+import { MaxBN, MinBN } from '~/util';
+import { toBNWithDecimals } from "~/util/BigNumber";
+
+/**
+ * NOTE: Try not to format this file
+ */
+
+const DisplayMaps = {
+  quadCase: {
+    ExcessivelyHigh: 'Excessively High', // 80% - 100%
+    ReasonablyHigh: 'Reasonably High', // 40% - 80%
+    ReasonablyLow: 'Reasonably Low', // 12% - 40%
+    ExcessivelyLow: 'Excessively Low', // 0% - 12%
+  },
+  deltaPodDemand: {
+    Decreasing: 'Decreasing',
+    Steady: 'Steady',
+    Increasing: 'Increasing',
+  },
+  price: {
+    PGtQ: 'P > 1.05',
+    PGt1: 'P > 1',
+    PLt1: 'P < 1',
+  },
+} as const;
+
+type CaseEvaluationDisplay = keyof typeof DisplayMaps.quadCase;
+type DeltaPodDemandDisplay = keyof typeof DisplayMaps.deltaPodDemand;
+type BeanPriceStateDisplay = keyof typeof DisplayMaps.price;
+
+type CaseEvaluation = {
+  id: number;
+  evaluation: string;
+}
+
+type CaseData = {
+  // mT: Relative Temperature change. (1% = 1e6)
+  mT: BigNumber;
+  // bT: Absolute Temperature change. (1% = 1)
+  bT: BigNumber;
+  // mL: Relative Grown Stalk to Liquidity change. (1% = 1e18)
+  mL: BigNumber;
+  // bL: Absolute Grown Stalk to Liquidity change. (1% = 1e18)
+  bL: BigNumber;
+};
+
+export type BeanstalkEvaluation = {
+  caseId: BigNumber;
+  delta: {
+    temperature: BigNumber;
+    bean2MaxLPGPPerBdv: BigNumber;
+    bean2MaxLPGPPerBdvScalar: BigNumber;
+  };
+  stateDisplay: {
+    price: string;
+    podRate: string;
+    deltaPodDemand: string;
+    l2sr: string;
+  };
+};
+
+export type BeanstalkCaseState = {
+  deltaPodDemand: BigNumber;
+  l2sr: BigNumber;
+  podRate: BigNumber;
+  largestLiqWell?: string;
+  oracleFailure?: boolean; 
+};
+
+
+export type SoilDemandParams = {
+  soilSoldOut: boolean;
+  blocksToSoldOutSoil: BigNumber;
+  sownBeans: BigNumber;
+}
+
+// Constants
+
+// ---------- POD RATE ----------
+
+const POD_RATE_LOWER_BOUND = 0.05; // 5%
+const POD_RATE_OPTIMAL = 0.15; // 15%
+const POD_RATE_UPPER_BOUND = 0.25; // 25%
+
+// ---------- BEAN PRICE ----------
+
+const EXCESSIVE_PRICE_THRESHOLD = 1.05;
+
+// ---------- DELTA POD DEMAND ----------
+
+const DELTA_POD_DEMAND_LOWER_BOUND = 0.95; // 95%
+const DELTA_POD_DEMAND_UPPER_BOUND = 1.05; // 105%
+
+// ---------- L2SR ----------
+
+// Liquidity to supply ratio bounds
+const LP_TO_SUPPLY_RATIO_UPPER_BOUND = 0.8;  // 80%
+const LP_TO_SUPPLY_RATIO_OPTIMAL = 0.4;      // 40%
+const LP_TO_SUPPLY_RATIO_LOWER_BOUND = 0.12; // 12%
+
+// ---------- MISC ------------
+
+// Max and min are the ranges that the beanToMaxLpGpPerBdvRatioScaled can output.
+const MAX_BEAN_MAX_LP_GP_PER_BDV_RATIO = 100e18;
+const MIN_BEAN_MAX_LP_GP_PER_BDV_RATIO = 50e18;
+const BEAN_MAX_LP_GP_RATIO_RANGE = 
+  MAX_BEAN_MAX_LP_GP_PER_BDV_RATIO - 
+  MIN_BEAN_MAX_LP_GP_PER_BDV_RATIO;
+
+
+// TODO: Chain dependent
+const SECONDS_PER_BLOCK = 12;
+
+const SECONDS_PER_SEASON = 3600; // 1 hour
+
+/// If all Soil is Sown faster than this (10m), Beanstalk considers demand for Soil to be increasing.
+const SOW_TIME_DEMAND_INCR = 600;
+
+const SOW_TIME_STEADY = 60;
+
+export class LibCases {
+
+  // ---------- Constants ----------
+
+  // this will eventually become dynamic
+  static MAX_BEAN_MAX_LP_GP_PER_BDV_RATIO = 100e18; 
+
+  // this will eventually become dynamic
+  static MIN_BEAN_MAX_LP_GP_PER_BDV_RATIO = 50e18;
+
+  static BEAN_MAX_LP_GP_RATIO_RANGE =  
+    LibCases.MAX_BEAN_MAX_LP_GP_PER_BDV_RATIO - 
+    LibCases.MIN_BEAN_MAX_LP_GP_PER_BDV_RATIO;
+
+  private static T_PLUS_3_L_MINUS_FIFTY = Buffer.from(
+    '05F5E1000300056BC75E2D63100000FFFD4A1C50E94E78000000000000000000',
+    'hex'
+  );
+
+  private static T_PLUS_1_L_MINUS_FIFTY = Buffer.from(
+    '05F5E1000100056BC75E2D63100000FFFD4A1C50E94E78000000000000000000',
+    'hex'
+  );
+
+  private static T_PLUS_0_L_MINUS_FIFTY = Buffer.from(
+    '05F5E1000000056BC75E2D63100000FFFD4A1C50E94E78000000000000000000',
+    'hex'
+  );
+
+  private static T_MINUS_1_L_MINUS_FIFTY = Buffer.from(
+    '05F5E100FF00056BC75E2D63100000FFFD4A1C50E94E78000000000000000000',
+    'hex'
+  );
+
+  private static T_MINUS_3_L_MINUS_FIFTY = Buffer.from(
+    '05F5E100FD00056BC75E2D63100000FFFD4A1C50E94E78000000000000000000',
+    'hex'
+  );
+
+  private static T_PLUS_3_L_PLUS_ONE = Buffer.from(
+    '05F5E1000300056BC75E2D6310000000000DE0B6B3A764000000000000000000',
+    'hex'
+  );
+
+  private static T_PLUS_1_L_PLUS_ONE = Buffer.from(
+    '05F5E1000100056BC75E2D6310000000000DE0B6B3A764000000000000000000',
+    'hex'
+  );
+
+  private static T_PLUS_0_L_PLUS_ONE = Buffer.from(
+    '05F5E1000000056BC75E2D6310000000000DE0B6B3A764000000000000000000',
+    'hex'
+  );
+
+  private static T_PLUS_3_L_PLUS_TWO = Buffer.from(
+    '05F5E1000300056BC75E2D6310000000001BC16D674EC8000000000000000000',
+    'hex'
+  );
+
+  private static T_PLUS_1_L_PLUS_TWO = Buffer.from(
+    '05F5E1000100056BC75E2D6310000000001BC16D674EC8000000000000000000',
+    'hex'
+  );
+
+  private static T_PLUS_0_L_PLUS_TWO = Buffer.from(
+    '05F5E1000000056BC75E2D6310000000001BC16D674EC8000000000000000000',
+    'hex'
+  );
+
+  private static T_PLUS_0_L_MINUS_ONE = Buffer.from(
+    '05F5E1000000056BC75E2D63100000FFFFF21F494C589C000000000000000000',
+    'hex'
+  );
+
+  private static T_MINUS_1_L_MINUS_ONE = Buffer.from(
+    '05F5E100FF00056BC75E2D63100000FFFFF21F494C589C000000000000000000',
+    'hex'
+  );
+
+  private static T_MINUS_3_L_MINUS_ONE = Buffer.from(
+    '05F5E100FD00056BC75E2D63100000FFFFF21F494C589C000000000000000000',
+    'hex'
+  );
+
+  private static casesV2: Buffer[] = [
+    //               Dsc soil demand,  Steady soil demand  Inc soil demand
+    /// //////////////////// Exremely Low L2SR ///////////////////////
+    LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_1_L_MINUS_FIFTY, // Exs Low: P < 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_1_L_MINUS_FIFTY, // Rea Low: P < 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_1_L_MINUS_FIFTY, LibCases.T_PLUS_0_L_MINUS_FIFTY, // Rea Hgh: P < 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_1_L_MINUS_FIFTY, LibCases.T_PLUS_0_L_MINUS_FIFTY, // Exs Hgh: P < 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    /// //////////////////// Reasonably Low L2SR ///////////////////////
+    LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_1_L_MINUS_FIFTY, // Exs Low: P < 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_3_L_MINUS_FIFTY, LibCases.T_PLUS_1_L_MINUS_FIFTY, // Rea Low: P < 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_1_L_PLUS_ONE, LibCases.T_PLUS_0_L_PLUS_ONE, // Rea Hgh: P < 1
+    LibCases.T_PLUS_0_L_MINUS_ONE, LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_1_L_PLUS_ONE, LibCases.T_PLUS_0_L_PLUS_ONE, // Exs Hgh: P < 1
+    LibCases.T_PLUS_0_L_MINUS_ONE, LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    /// //////////////////// Reasonably High L2SR ///////////////////////
+    LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_1_L_PLUS_ONE, // Exs Low: P < 1
+    LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_1_L_PLUS_ONE, // Rea Low: P < 1
+    LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_1_L_PLUS_ONE, LibCases.T_PLUS_0_L_PLUS_ONE, // Rea Hgh: P < 1
+    LibCases.T_PLUS_0_L_MINUS_ONE, LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_1_L_PLUS_ONE, LibCases.T_PLUS_0_L_PLUS_ONE, // Exs Hgh: P < 1
+    LibCases.T_PLUS_0_L_MINUS_ONE, LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    /// //////////////////// Extremely High L2SR ///////////////////////
+    LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_1_L_PLUS_ONE, // Exs Low: P < 1
+    LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_3_L_PLUS_ONE, LibCases.T_PLUS_1_L_PLUS_ONE, // Rea Low: P < 1
+    LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_PLUS_TWO, LibCases.T_PLUS_1_L_PLUS_TWO, LibCases.T_PLUS_0_L_PLUS_TWO, // Rea Hgh: P < 1
+    LibCases.T_PLUS_0_L_MINUS_ONE, LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY, // P > Q
+    LibCases.T_PLUS_3_L_PLUS_TWO, LibCases.T_PLUS_1_L_PLUS_TWO, LibCases.T_PLUS_0_L_PLUS_TWO, // Exs Hgh: P < 1
+    LibCases.T_PLUS_0_L_MINUS_ONE, LibCases.T_MINUS_1_L_MINUS_ONE, LibCases.T_MINUS_3_L_MINUS_ONE, // P > 1
+    LibCases.T_PLUS_0_L_MINUS_FIFTY, LibCases.T_MINUS_1_L_MINUS_FIFTY, LibCases.T_MINUS_3_L_MINUS_FIFTY // P > Q
+  ];
+
+  // ---------- Calculations ----------
+
+  /**
+   * TS translation of calcDeltaPodDemand() in LibEvaluate.sol.
+   * 
+   * The contract uses the Weather Struct & delta soil to calculate deltaPodDemand.
+   * - dSoil: The amount of soil sown in a season
+   * - lastDSoil: The amount of soil sown last season
+   * - thisSowTime: Seconds it took to sow all soil in this season
+   * - lastSowTime: Seconds it took to sow all soil in last season
+   * 
+   * The above fields can be inferred:
+   * where: 
+   * - d[s] = this season, 
+   * - d[p] = previous season
+   * - SPB  = seconds per block = 12
+   * - MAX  = some number above mx seconds per season that represents soil did not sell out
+   * 
+   * such that: 
+   * - dSoil        = d[s].sownBeans
+   * - lastDSoil    = d[p].sownBeans
+   * - thisSowTime  = d[s].soilSoldOut ? d[s].blocksToSoldOutSoil * SPB : MAX
+   * - lastSowTime  = d[p].soilSoldOut ? d[p]blocksToSoldOutSoil * SPB : MAX
+   * 
+   * Check the solidity code for more details.
+   * 
+   * @param data [tuple of soil data]
+   * @returns BigNumber with 18 decimals
+   */
+
+  static calcDeltaPodDemand(
+    data: [
+      thisSeason: SoilDemandParams, 
+      lastSeason: SoilDemandParams
+    ]
+  ) {
+    if (data.length !== 2) {
+      throw new Error(`[LibCases/calcDeltaPodDemand]: expected 2 data points but got ${data.length}`);
+    }
+
+    const [ts, ls] = data; // [this season, last season]
+
+    const soilNotSoldOutSeconds = new BigNumber(SECONDS_PER_SEASON + 1);
+    const thisSowTime = ts.soilSoldOut ? ts.blocksToSoldOutSoil.times(SECONDS_PER_BLOCK) : soilNotSoldOutSeconds;    
+    const lastSowTime = ts.soilSoldOut ? ls.blocksToSoldOutSoil.times(SECONDS_PER_BLOCK) : soilNotSoldOutSeconds; 
+    
+    let deltaPodDemand: BigNumber = ZERO_BN;    
+
+    // 
+    if (ts.soilSoldOut) {
+      if (
+        !ls.soilSoldOut || // Didn't sow all last season
+        thisSowTime.lt(SOW_TIME_DEMAND_INCR) || // Sow'd all within 10 minutes
+        (lastSowTime.gt(SOW_TIME_STEADY) && // Time to sell out soil last season is greater than 1 minute && 
+          thisSowTime.lt(lastSowTime.minus(SOW_TIME_STEADY))) // Sow'd all within 1 minute of last seasons' time to sell out soil
+      ) {
+        deltaPodDemand = new BigNumber(1e36);
+      } else if (        
+        thisSowTime.lte(lastSowTime.plus(SOW_TIME_STEADY)) // Sow'd all in less than 1 minute of last seasons' time to sell out soil
+      ) { 
+        deltaPodDemand = new BigNumber(1e18);
+      } else {
+        deltaPodDemand = ZERO_BN;
+      }
+    } else {
+      const dSoil = ts.sownBeans;
+      const lastDSoil = ls.sownBeans;
+
+      if (dSoil.eq(0)) { // No soil sown this season
+        deltaPodDemand = ZERO_BN;
+      } else if (lastDSoil.eq(0)) { // No soil sown last season
+        deltaPodDemand = new BigNumber(1e36);
+      } else {
+        deltaPodDemand = dSoil.div(lastDSoil);
+      }
+      
+      return deltaPodDemand;
+    }
+  }
+
+  static calcMaxSoil(
+    beansMinted: BigNumber, 
+    maxTemperature: BigNumber,
+    podRate: BigNumber,
+    twaDeltaB: BigNumber,
+    instantaneousDeltaB: BigNumber,
+  ) {
+    // 1/3 -> silo, 1/3 -> field, 1/3 -> fertilizer
+    const podsHarvested = beansMinted.div(3);
+
+    const maxSoil = podsHarvested.div(maxTemperature.div(100).plus(1));
+
+    let scalar = ONE_BN;
+
+    if (podRate.gte(POD_RATE_UPPER_BOUND)) {
+      scalar = new BigNumber(0.5);
+    } else if (podRate.lt(POD_RATE_LOWER_BOUND)) {
+      scalar = new BigNumber(1.5);
+    }
+    const minDeltaB = MinBN(twaDeltaB.negated(), instantaneousDeltaB.negated());
+
+    return MaxBN(maxSoil.times(scalar), minDeltaB);
+  }
+
+
+  // ---------- Evaluation Functions ----------
+
+  static evaluatePodRate(podRate: BigNumber): CaseEvaluation {
+    let caseId = 0;
+    let ev: CaseEvaluationDisplay = "ExcessivelyLow";
+  
+    if (podRate.gte(POD_RATE_UPPER_BOUND)) {
+      caseId = 27;
+      ev = "ExcessivelyHigh";
+    } else if (podRate.gte(POD_RATE_OPTIMAL)) {
+      caseId = 18;
+      ev = "ReasonablyHigh";
+    } else if (podRate.gte(POD_RATE_LOWER_BOUND)) {
+      caseId = 9;
+      ev = "ReasonablyLow";
+    }
+    
+    return {
+      id: caseId,
+      evaluation: DisplayMaps.quadCase[ev],
+    }
+  }
+
+  static evaluatePrice(deltaB: BigNumber, largestLiquidityWellBeanPrice: BigNumber): CaseEvaluation {
+    let caseId = 0;
+    let ev: BeanPriceStateDisplay = "PLt1";
+    // p > 1;
+    if (deltaB.gt(0)) {
+      if (largestLiquidityWellBeanPrice.gt(1)) {
+        // P > Q (1.05)
+        if (largestLiquidityWellBeanPrice.gt(EXCESSIVE_PRICE_THRESHOLD)) {
+          return {
+            id: 5,
+            evaluation: DisplayMaps.price.PGtQ,
+          }
+        }
+      }
+      ev = "PGt1"
+      caseId = 3;
+    }
+    // p < 1;
+    return {
+      id: caseId,
+      evaluation: DisplayMaps.price[ev],
+    }
+  }
+
+  static evaluateDeltaPodDemand(deltaPodDemand: BigNumber): CaseEvaluation {
+    let caseId = 0;
+    let ev: DeltaPodDemandDisplay = "Decreasing";
+    if (deltaPodDemand.gte(DELTA_POD_DEMAND_UPPER_BOUND)) {
+      caseId = 2;
+      ev = "Increasing";
+    } else if (deltaPodDemand.gte(DELTA_POD_DEMAND_LOWER_BOUND)) {
+      caseId = 1;
+      ev = "Steady";
+    }
+  
+    return {
+      id: caseId,
+      evaluation: DisplayMaps.deltaPodDemand[ev],
+    }
+  }
+
+  static evaludateL2SR(l2sr: BigNumber): CaseEvaluation {
+    let caseId = 0;
+    let ev: CaseEvaluationDisplay = "ExcessivelyLow";
+  
+    if (l2sr.gte(LP_TO_SUPPLY_RATIO_UPPER_BOUND)) {
+      caseId = 108;
+      ev = "ExcessivelyHigh";
+    } else if (l2sr.gte(LP_TO_SUPPLY_RATIO_OPTIMAL)) {
+      caseId = 72;
+      ev = "ReasonablyHigh";
+    } else if (l2sr.gte(LP_TO_SUPPLY_RATIO_LOWER_BOUND)) {
+      caseId = 36;
+      ev = "ReasonablyLow";
+    }
+  
+    return {
+      id: caseId,
+      evaluation: DisplayMaps.quadCase[ev],
+    }
+  }
+
+  /// ---------- Utils ----------
+
+  private static decodeBytes32Data(buffer: Buffer): CaseData {
+    if (buffer.length !== 32) throw new Error('Invalid bytes32 buffer');
+
+    // Extract the values
+    const mT = buffer.readUInt32BE(0); // First 4 bytes as unsigned 32-bit integer
+    const bT = buffer.readInt8(4); // Next 1 byte as signed 8-bit integer
+    const mL = buffer.readBigUInt64BE(5) * BigInt(2 ** 16) + BigInt(buffer.readUInt16BE(13)); // Next 10 bytes as BigInt
+    const bL = buffer.readBigInt64BE(15) * BigInt(2 ** 16) + BigInt(buffer.readUInt16BE(23)); // Next 10 bytes as BigInt
+
+    // Convert to BigNumber
+    const mTBN = new BigNumber(mT);
+    const bTBN = new BigNumber(bT);
+    const mLBN = new BigNumber(mL.toString());
+    const bLBN = new BigNumber(bL.toString());
+
+    return { mT: mTBN, bT: bTBN, mL: mLBN, bL: bLBN };
+  }
+
+  private static getCaseWithCaseId(caseId: BigNumber): Buffer {
+    return LibCases.casesV2[caseId.toNumber()];
+  } 
+
+  private static getBeanToMaxLPUnit(bL: BigNumber) {
+    return bL.times(BEAN_MAX_LP_GP_RATIO_RANGE).div(100e18);
+  }
+
+  static evaluateWithCaseId(caseId: BigNumber) {
+    const { bT, bL } = LibCases.decodeBytes32Data(
+      LibCases.getCaseWithCaseId(caseId)
+    );
+
+    const bean2MaxLPGPPerBdv = toBNWithDecimals(bL, 18);
+    const bean2MaxLPGPPerBdvScalar = toBNWithDecimals(
+      LibCases.getBeanToMaxLPUnit(bL),
+      18
+    );
+
+    return {
+      bean2MaxLPGPPerBdvScalar,
+      bean2MaxLPGPPerBdv,
+      deltaTemperature: bT
+    }
+  }
+
+  static evaluateBeanstalk(
+    caseState: BeanstalkCaseState,
+    largestLiquidityWellBeanPrice: BigNumber,
+    deltaB: BigNumber
+  ): BeanstalkEvaluation {
+    const podRateEvaluation = LibCases.evaluatePodRate(caseState.podRate);
+    const priceEvaluation = LibCases.evaluatePrice(deltaB, largestLiquidityWellBeanPrice);
+    const deltaPodDemandEvaluation = LibCases.evaluateDeltaPodDemand(caseState.deltaPodDemand);
+    const l2srEvaluation = LibCases.evaludateL2SR(caseState.l2sr);
+
+    const caseId = new BigNumber(podRateEvaluation.id)
+      .plus(priceEvaluation.id)
+      .plus(deltaPodDemandEvaluation.id)
+      .plus(l2srEvaluation.id);
+
+    if (caseId.lt(0) || caseId.gt(144)) {
+      throw new Error(`Expected caseId to be within [0,144] , but got ${caseId.toString()}`);
+    }
+
+    const {
+      deltaTemperature, 
+      bean2MaxLPGPPerBdv, 
+      bean2MaxLPGPPerBdvScalar
+    } = LibCases.evaluateWithCaseId(caseId);
+
+    return {
+      caseId,
+      delta: {
+        temperature: deltaTemperature,
+        bean2MaxLPGPPerBdv,
+        bean2MaxLPGPPerBdvScalar,
+      },
+      stateDisplay: {
+        price: priceEvaluation.evaluation,
+        podRate: podRateEvaluation.evaluation,
+        deltaPodDemand: deltaPodDemandEvaluation.evaluation,
+        l2sr: l2srEvaluation.evaluation,
+      },
+    };
+  }
+}
diff --git a/projects/ui/src/pages/silo/index.tsx b/projects/ui/src/pages/silo/index.tsx
index 3299e6ccde..515abb7b14 100644
--- a/projects/ui/src/pages/silo/index.tsx
+++ b/projects/ui/src/pages/silo/index.tsx
@@ -61,6 +61,7 @@ import { useFetchFarmerSilo } from '~/state/farmer/silo/updater';
 import useFarmerSilo from '~/hooks/farmer/useFarmerSilo';
 import useSilo from '~/hooks/beanstalk/useSilo';
 import useSetting from '~/hooks/app/useSetting';
+import SeedGaugeDetails from '~/components/Silo/SeedGauge';
 
 const FormControlLabelStat: FC<
   Partial<FormControlLabelProps> & {
@@ -683,6 +684,8 @@ const SiloPage: FC<{}> = () => {
   const farmerSilo = useFarmerSilo();
   const beanstalkSilo = useSilo();
 
+  const [whitelistVisible, setWhitelistVisible] = useState(true);
+
   const breakdown = useFarmerBalancesBreakdown();
   const season = useSeason();
   const { revitalizedStalk, revitalizedSeeds } = useRevitalized();
@@ -695,6 +698,12 @@ const SiloPage: FC<{}> = () => {
     [whitelist, pools]
   );
 
+  const handleSetWhitelistVisible = (val: boolean, callback?: () => void) => {
+    if (val === whitelistVisible) return;
+    setWhitelistVisible(val);
+    callback?.();
+  };
+
   return (
     <Container maxWidth="lg">
       <Stack gap={2}>
@@ -727,19 +736,23 @@ const SiloPage: FC<{}> = () => {
           revitalizedStalk={revitalizedStalk}
           revitalizedSeeds={revitalizedSeeds}
         />
-        <Whitelist config={config} farmerSilo={farmerSilo} />
-        {/* <RewardsDialog
-          open={open}
-          handleClose={hide}
-          beans={farmerSilo.beans}
-          stalk={farmerSilo.stalk}
-          seeds={farmerSilo.seeds}
-          revitalizedStalk={revitalizedStalk}
-          revitalizedSeeds={revitalizedSeeds}
-        /> */}
+        <SeedGaugeDetails setWhitelistVisible={handleSetWhitelistVisible} />
+        <Box display={whitelistVisible ? 'block' : 'none'}>
+          <Whitelist config={config} farmerSilo={farmerSilo} />
+        </Box>
       </Stack>
     </Container>
   );
 };
 
 export default SiloPage;
+
+/* <RewardsDialog
+  open={open}
+  handleClose={hide}
+  beans={farmerSilo.beans}
+  stalk={farmerSilo.stalk}
+  seeds={farmerSilo.seeds}
+  revitalizedStalk={revitalizedStalk}
+  revitalizedSeeds={revitalizedSeeds}
+/> */
diff --git a/projects/ui/src/state/beanstalk/case/index.ts b/projects/ui/src/state/beanstalk/case/index.ts
new file mode 100644
index 0000000000..5302541a66
--- /dev/null
+++ b/projects/ui/src/state/beanstalk/case/index.ts
@@ -0,0 +1,22 @@
+import BigNumber from 'bignumber.js';
+
+export * from './reducer';
+
+export type BeanstalkCaseState = {
+  deltaPodDemand: BigNumber;
+  l2sr: BigNumber;
+  podRate: BigNumber;
+  largestLiqWell: string;
+  oracleFailure: boolean;
+};
+
+export type BeanstalkCaseTime = {
+  /**
+   * timestamp in which the data was last fetched
+   */
+  time: number;
+  /**
+   * season in which the data was last fetched
+   */
+  season: BigNumber;
+};
diff --git a/projects/ui/src/state/beanstalk/case/reducer.ts b/projects/ui/src/state/beanstalk/case/reducer.ts
new file mode 100644
index 0000000000..bbd5ea71b0
--- /dev/null
+++ b/projects/ui/src/state/beanstalk/case/reducer.ts
@@ -0,0 +1,50 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ZERO_BN } from '~/constants';
+import { BeanstalkCaseState, BeanstalkCaseTime } from '.';
+
+interface IBeanstalkCaseState {
+  caseState: BeanstalkCaseState;
+  time: BeanstalkCaseTime;
+}
+
+const initialState = {
+  caseState: {
+    deltaPodDemand: ZERO_BN,
+    l2sr: ZERO_BN,
+    podRate: ZERO_BN,
+    largestLiqWell: '',
+    oracleFailure: false,
+  },
+  time: {
+    time: 0,
+    season: ZERO_BN,
+  },
+};
+
+const beanstalkCaseSlice = createSlice({
+  name: 'case',
+  initialState,
+  reducers: {
+    updateBeanstalkCaseState(prev, action: PayloadAction<IBeanstalkCaseState>) {
+      return {
+        ...prev,
+        caseState: action.payload.caseState,
+        time: action.payload.time,
+      };
+    },
+    setBeanstalkCaseState(prev, action: PayloadAction<BeanstalkCaseState>) {
+      prev.caseState = action.payload;
+    },
+    setBeanstalkCaseTime(prev, action: PayloadAction<BeanstalkCaseTime>) {
+      prev.time = action.payload;
+    },
+  },
+});
+
+export const {
+  updateBeanstalkCaseState,
+  setBeanstalkCaseState,
+  setBeanstalkCaseTime,
+} = beanstalkCaseSlice.actions;
+
+export default beanstalkCaseSlice.reducer;
diff --git a/projects/ui/src/state/beanstalk/case/updater.ts b/projects/ui/src/state/beanstalk/case/updater.ts
new file mode 100644
index 0000000000..a1e24f3eb4
--- /dev/null
+++ b/projects/ui/src/state/beanstalk/case/updater.ts
@@ -0,0 +1,63 @@
+import { useCallback, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import useSdk from '~/hooks/sdk';
+import { useAppSelector } from '~/state';
+import { ethersBNResult } from '~/util';
+import useSeason from '~/hooks/beanstalk/useSeason';
+import { updateBeanstalkCaseState } from '.';
+
+const REFETCH_INTERVAL = 1000 * 5; // 5 mins
+
+export const useUpdateBeanstalkCaseState = () => {
+  const { time } = useAppSelector((s) => s._beanstalk.case);
+  const season = useSeason();
+  const sdk = useSdk();
+
+  const dispatch = useDispatch();
+
+  const refetch = useCallback(async () => {
+    const seasonFetchDiff = season.minus(time.season);
+    const timeDiff = Date.now() - time.time;
+
+    if (seasonFetchDiff.eq(0) && timeDiff < REFETCH_INTERVAL) return;
+
+    const bs = sdk.contracts.beanstalk;
+    const [deltaPodDemand, l2sr, podRate, largestLiqWell] = await Promise.all([
+      bs.getDeltaPodDemand().then(ethersBNResult(18)),
+      bs.getLiquidityToSupplyRatio().then(ethersBNResult(18)),
+      bs.getPodRate().then(ethersBNResult(18)),
+      bs.getLargestLiqWell(),
+    ]);
+
+    dispatch(
+      updateBeanstalkCaseState({
+        caseState: {
+          deltaPodDemand,
+          l2sr,
+          podRate,
+          largestLiqWell,
+          oracleFailure: false,
+        },
+        time: {
+          time: Date.now(),
+          season: season,
+        },
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [time, sdk.contracts.beanstalk, season]);
+
+  return [refetch];
+};
+
+const BeanstalkCaseUpdater = () => {
+  const [fetch] = useUpdateBeanstalkCaseState();
+
+  useEffect(() => {
+    fetch();
+  }, [fetch]);
+
+  return null;
+};
+
+export default BeanstalkCaseUpdater;
diff --git a/projects/ui/src/state/beanstalk/reducer.ts b/projects/ui/src/state/beanstalk/reducer.ts
index 9476aa5fcc..9bf35b6bab 100644
--- a/projects/ui/src/state/beanstalk/reducer.ts
+++ b/projects/ui/src/state/beanstalk/reducer.ts
@@ -6,6 +6,7 @@ import governance from './governance/reducer';
 import silo from './silo/reducer';
 import sun from './sun/reducer';
 import tokenPrices from './tokenPrices/reducer';
+import beanstalkCase from './case/reducer';
 
 export default combineReducers({
   barn,
@@ -14,4 +15,5 @@ export default combineReducers({
   silo,
   sun,
   tokenPrices,
+  case: beanstalkCase,
 });
diff --git a/projects/ui/src/util/BigNumber.ts b/projects/ui/src/util/BigNumber.ts
index b2c1ccda69..dd2551d45c 100644
--- a/projects/ui/src/util/BigNumber.ts
+++ b/projects/ui/src/util/BigNumber.ts
@@ -2,6 +2,7 @@ import { Token, TokenValue } from '@beanstalk/sdk';
 import BignumberJS from 'bignumber.js';
 import { ethers } from 'ethers';
 import { ZERO_BN } from '~/constants';
+import { toTokenUnitsBN } from './Tokens';
 
 export const BN = (v: BignumberJS.Value) => new BignumberJS(v);
 
@@ -121,3 +122,8 @@ export function transform<O extends OutputOptions, R = OutputClassMap[O]>(
 export function translate(out: OutputOptions, token?: Token) {
   return (value: NumberInputInstance) => transform(value, out, token);
 }
+
+export const ethersBNResult = (decimals: number) => (value: ethers.BigNumber) =>
+  toTokenUnitsBN(value.toString(), decimals);
+
+export const toBNWithDecimals = toTokenUnitsBN;
\ No newline at end of file
diff --git a/projects/ui/src/util/UI.ts b/projects/ui/src/util/UI.ts
index c3b4b1dfbe..b1f8d90b9a 100644
--- a/projects/ui/src/util/UI.ts
+++ b/projects/ui/src/util/UI.ts
@@ -56,3 +56,13 @@ export const roundWithDecimals = (
   const factor = 10 ** (decimals ?? 2);
   return Math.round((value || 0 + Number.EPSILON) * factor) / factor;
 };
+
+export function exists<T>(
+  value: T | undefined | null
+): value is NonNullable<T> {
+  return value !== undefined && value !== null;
+}
+
+export function existsNot(value: any): value is undefined | null {
+  return !exists(value);
+}
diff --git a/projects/ui/src/util/wagmi/config.ts b/projects/ui/src/util/wagmi/config.ts
index 4334efa49f..3b0921aaaf 100644
--- a/projects/ui/src/util/wagmi/config.ts
+++ b/projects/ui/src/util/wagmi/config.ts
@@ -1,20 +1,29 @@
 import { http, createConfig } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
-import { injected, walletConnect } from 'wagmi/connectors';
-
+import { injected, safe, walletConnect } from 'wagmi/connectors';
+import { Chain, type Transport } from 'viem';
 import { localFork } from './chains';
 
 const ALCHEMY_KEY = import.meta.env.VITE_ALCHEMY_API_KEY;
+
 const WALLET_CONNECT_PROJECT_ID = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID;
-if (!ALCHEMY_KEY) throw new Error('VITE_ALCHEMY_API_KEY is not set');
-if (!WALLET_CONNECT_PROJECT_ID)
+
+if (!ALCHEMY_KEY) {
+  throw new Error('VITE_ALCHEMY_API_KEY is not set');
+}
+if (!WALLET_CONNECT_PROJECT_ID) {
   throw new Error('VITE_WALLETCONNECT_PROJECT_ID is not set');
+}
 
 const MAINNET_RPC = `https://eth-mainnet.g.alchemy.com/v2/${ALCHEMY_KEY}`;
+
 const SHOW_DEV = import.meta.env.VITE_SHOW_DEV_CHAINS;
 
-const chains = !SHOW_DEV ? [mainnet] : [localFork, mainnet];
-const transports = !SHOW_DEV
+const chains: readonly [Chain, ...Chain[]] = !SHOW_DEV
+  ? ([mainnet] as const)
+  : ([localFork, mainnet] as const);
+
+const transports: Record<number, Transport> = !SHOW_DEV
   ? { [mainnet.id]: http(MAINNET_RPC) }
   : {
       [localFork.id]: http(localFork.rpcUrls.default.http[0]),
@@ -22,14 +31,14 @@ const transports = !SHOW_DEV
     };
 
 export const config = createConfig({
-  // @ts-ignore
   chains,
-  // @ts-ignore
   transports,
   connectors: [
     injected(),
-    walletConnect({ projectId: WALLET_CONNECT_PROJECT_ID }),
-    // safe(),
+    walletConnect({
+      projectId: WALLET_CONNECT_PROJECT_ID,
+    }),
+    safe(),
   ],
 });