diff --git a/libs/sr/db/src/Database/DataManagers/TeamDataManager.ts b/libs/sr/db/src/Database/DataManagers/TeamDataManager.ts
index e3f62086c3..07443797e1 100644
--- a/libs/sr/db/src/Database/DataManagers/TeamDataManager.ts
+++ b/libs/sr/db/src/Database/DataManagers/TeamDataManager.ts
@@ -1,5 +1,6 @@
 import type { IConditionalData } from '@genshin-optimizer/common/formula'
 import {
+  notEmpty,
   objKeyMap,
   pruneOrPadArray,
   range,
@@ -37,6 +38,11 @@ export type TeammateDatum = {
 
   optConfigId?: string
 }
+export type Frame = {
+  tag: Tag
+  multiplier: number
+  description?: string
+}
 export interface Team {
   name: string
   description: string
@@ -44,7 +50,7 @@ export interface Team {
   lastEdit: number
 
   // frames, store data as a "sparse 2d array"
-  frames: Array<Tag>
+  frames: Array<Frame>
   conditionals: Array<{
     sheet: Sheet
     src: Member
@@ -56,7 +62,11 @@ export interface Team {
     tag: Tag
     values: number[] // should be the same length as `frames`
   }>
-  statConstraints: Array<{ tag: Tag; values: number[]; isMaxs: boolean[] }>
+  statConstraints: Array<{
+    tag: Tag
+    values: number[] // should be the same length as `frames`
+    isMaxs: boolean[] // should be the same length as `frames`
+  }>
 
   // TODO enemy base stats
   teamMetadata: Array<TeammateDatum | undefined>
@@ -170,7 +180,17 @@ export class TeamDataManager extends DataManager<string, 'teams', Team, Team> {
     if (typeof lastEdit !== 'number') lastEdit = Date.now()
 
     if (!Array.isArray(frames)) frames = []
-    frames = frames.filter(validateTag)
+    frames = frames
+      .map((f) => {
+        const { tag } = f
+        let { multiplier, description } = f
+        if (!validateTag(tag)) return undefined
+        if (typeof multiplier !== 'number' || multiplier === 0) multiplier = 1
+        if (typeof description !== 'string') description = undefined
+
+        return { tag, multiplier, description }
+      })
+      .filter(notEmpty)
     const framesLength = frames.length
     if (!framesLength) {
       conditionals = []
diff --git a/libs/sr/page-team/src/BonusStats.tsx b/libs/sr/page-team/src/BonusStats.tsx
index 8b72b3fa55..259ca0ddbc 100644
--- a/libs/sr/page-team/src/BonusStats.tsx
+++ b/libs/sr/page-team/src/BonusStats.tsx
@@ -23,7 +23,7 @@ import {
   Stack,
 } from '@mui/material'
 import { useContext } from 'react'
-import { PresetContext, useTeamContext } from './context'
+import { PresetContext, useTeamContext, useTeammateContext } from './context'
 
 export function BonusStats() {
   const [open, onOpen, onClose] = useBoolState()
@@ -47,8 +47,8 @@ function BonusStatsModal({
   const {
     teamId,
     team: { bonusStats },
-    teammateDatum: { characterKey },
   } = useTeamContext()
+  const { characterKey } = useTeammateContext()
   const newTarget = (q: InitialStats) => {
     const tag = newTag(q, characterKey)
     database.teams.setBonusStat(teamId, tag, 0, presetIndex)
diff --git a/libs/sr/page-team/src/BuildsDisplay.tsx b/libs/sr/page-team/src/BuildsDisplay.tsx
index fa5c32f6af..fbde7bb64e 100644
--- a/libs/sr/page-team/src/BuildsDisplay.tsx
+++ b/libs/sr/page-team/src/BuildsDisplay.tsx
@@ -78,12 +78,10 @@ import {
 } from '@mui/material'
 import type { ReactNode } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTeamContext } from './context'
+import { useTeamContext, useTeammateContext } from './context'
 export function BuildsDisplay({ onClose }: { onClose?: () => void }) {
   const { database } = useDatabaseContext()
-  const {
-    teammateDatum: { characterKey },
-  } = useTeamContext()
+  const { characterKey } = useTeammateContext()
   const [dbDirty, setDbDirty] = useForceUpdate()
   const [dbTCDirty, setDbTCDirty] = useForceUpdate()
   const buildIds = useMemo(
@@ -145,10 +143,8 @@ function useActiveBuildSwap(
   newBuildId = ''
 ) {
   const { database } = useDatabaseContext()
-  const {
-    teamId,
-    teammateDatum: { characterKey, buildType, buildId, buildTcId },
-  } = useTeamContext()
+  const { characterKey, buildType, buildId, buildTcId } = useTeammateContext()
+  const { teamId } = useTeamContext()
 
   return useMemo(
     () => ({
diff --git a/libs/sr/page-team/src/ComboEditor.tsx b/libs/sr/page-team/src/ComboEditor.tsx
index bb81a82b31..797e7b9e24 100644
--- a/libs/sr/page-team/src/ComboEditor.tsx
+++ b/libs/sr/page-team/src/ComboEditor.tsx
@@ -1,11 +1,17 @@
 import { useBoolState } from '@genshin-optimizer/common/react-util'
 import {
   CardThemed,
-  ConditionalWrapper,
   ModalWrapper,
+  NumberInputLazy,
 } from '@genshin-optimizer/common/ui'
+import { getUnitStr, valueString } from '@genshin-optimizer/common/util'
+import { TagContext } from '@genshin-optimizer/pando/ui-sheet'
+import type { Frame } from '@genshin-optimizer/sr/db'
 import { useDatabaseContext } from '@genshin-optimizer/sr/db-ui'
-import { type Tag } from '@genshin-optimizer/sr/formula'
+import { Read } from '@genshin-optimizer/sr/formula'
+import { useSrCalcContext } from '@genshin-optimizer/sr/ui'
+import CloseIcon from '@mui/icons-material/Close'
+import Delete from '@mui/icons-material/Delete'
 import {
   Box,
   Button,
@@ -13,12 +19,15 @@ import {
   CardContent,
   CardHeader,
   Divider,
+  IconButton,
+  InputAdornment,
   Stack,
+  Typography,
 } from '@mui/material'
-import { useContext } from 'react'
-import { BonusStats } from './BonusStats'
+import { useCallback, useContext, useMemo } from 'react'
 import { PresetContext, useTeamContext } from './context'
 import { LightConeSheetsDisplay } from './LightConeSheetsDisplay'
+import { OptimizationTargetDisplay } from './Optimize/OptimizationTargetDisplay'
 import { OptimizationTargetSelector } from './Optimize/OptimizationTargetSelector'
 import { RelicSheetsDisplay } from './RelicSheetsDisplay'
 
@@ -26,59 +35,82 @@ export function ComboEditor() {
   const { database } = useDatabaseContext()
   const { team, teamId } = useTeamContext()
   return (
-    <CardThemed
+    <CardContent
       sx={{
-        overflow: 'visible',
-        top: 137, // height of the team selector
-        position: 'sticky',
-        zIndex: 101,
+        display: 'flex',
+        gap: 1,
+        overflowX: 'auto',
       }}
     >
-      <CardHeader title="Combo Editor" />
-      <Divider />
-      <CardContent
-        sx={{
-          display: 'flex',
-          gap: 1,
-          overflowX: 'auto',
-        }}
-      >
-        {team.frames.map((frame, i) => (
-          <Team
-            key={i + JSON.stringify(frame ?? {})}
-            tag={frame}
-            index={i}
-            setTarget={(read) =>
-              database.teams.set(teamId, (team) => {
-                team.frames = [...team.frames]
-                team.frames[i] = read
-              })
-            }
-          />
-        ))}
-        <Box sx={{ flexShrink: 0 }}>
-          <OptimizationTargetSelector
-            setOptTarget={(tag) =>
-              database.teams.set(teamId, (team) => {
-                team.frames = [...team.frames, tag]
-              })
-            }
-          />
-        </Box>
-      </CardContent>
-    </CardThemed>
+      {team.frames.map((frame, i) => (
+        <Combo
+          key={i}
+          frame={frame}
+          index={i}
+          setFrame={(frame) =>
+            database.teams.set(teamId, (team) => {
+              team.frames = [...team.frames]
+              team.frames[i] = {
+                ...team.frames[i],
+                ...frame,
+              }
+            })
+          }
+          removeFrame={() =>
+            database.teams.set(teamId, (team) => {
+              team.frames = team.frames.filter((_, index) => index !== i)
+            })
+          }
+        />
+      ))}
+      <Box sx={{ flexShrink: 0 }}>
+        <OptimizationTargetSelector
+          setOptTarget={(tag) =>
+            database.teams.set(teamId, (team) => {
+              team.frames = [
+                ...team.frames,
+                {
+                  multiplier: 1,
+                  tag,
+                },
+              ]
+            })
+          }
+        />
+      </Box>
+    </CardContent>
   )
 }
-function Team({
-  tag,
+function Combo({
+  frame,
   index,
-  setTarget,
+  setFrame,
+  removeFrame,
 }: {
-  tag: Tag
+  frame: Frame
   index: number
-  setTarget(tag: Tag): void
+  setFrame(frame: Partial<Frame>): void
+  removeFrame(): void
 }) {
   const { presetIndex, setPresetIndex } = useContext(PresetContext)
+  const calc = useSrCalcContext()
+  const tagcontext = useContext(TagContext)
+  const value = useMemo(
+    () =>
+      calc?.withTag(tagcontext).compute(new Read(frame.tag, 'sum')).val ?? 0,
+    [calc, frame.tag, tagcontext]
+  )
+  const unit = getUnitStr(frame.tag.q ?? '')
+  const [open, onOpen, onClose] = useBoolState()
+
+  const handleClick = useCallback(() => {
+    if (presetIndex === index) {
+      onOpen()
+    } else {
+      onClose()
+      setPresetIndex(index)
+    }
+  }, [index, onClose, onOpen, presetIndex, setPresetIndex])
   return (
     <CardThemed
       bgt="light"
@@ -90,53 +122,107 @@ function Team({
             : undefined,
       })}
     >
-      <ConditionalWrapper
-        condition={presetIndex !== index}
-        wrapper={(children) => (
-          <CardActionArea onClick={() => setPresetIndex(index)}>
-            {children}
-          </CardActionArea>
-        )}
-      >
-        <CardHeader title={`Combo ${index + 1}`} />
-      </ConditionalWrapper>
-      <Divider />
-      <CardContent>
-        <Stack spacing={1}>
-          <OptimizationTargetSelector
-            optTarget={tag}
-            setOptTarget={setTarget}
-          />
-          <BonusStats />
-          <RelicConditionals />
-          <LightConeConditionals />
-        </Stack>
-      </CardContent>
+      <ComboEditorModal
+        frame={frame}
+        setFrame={setFrame}
+        index={index}
+        show={open}
+        onClose={onClose}
+        removeFrame={removeFrame}
+      />
+      <CardActionArea onClick={handleClick}>
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'stretch', p: 1 }}>
+          <Typography>{index + 1}</Typography>
+          <Divider orientation="vertical" />
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <OptimizationTargetDisplay tag={frame.tag} />
+          </Box>
+        </Box>
+
+        <Divider />
+        <Box sx={{ p: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Typography>
+            {frame.multiplier} x {valueString(value, unit)}
+          </Typography>
+        </Box>
+      </CardActionArea>
     </CardThemed>
   )
 }
 
-function RelicConditionals() {
-  const [show, onShow, onHide] = useBoolState()
-  return (
-    <>
-      {/* TODO: translation */}
-      <Button onClick={onShow}>Relic Conditionals</Button>
-      <ModalWrapper open={show} onClose={onHide}>
-        <RelicSheetsDisplay />
-      </ModalWrapper>
-    </>
-  )
-}
-function LightConeConditionals() {
-  const [show, onShow, onHide] = useBoolState()
+function ComboEditorModal({
+  index,
+  frame,
+  setFrame,
+  removeFrame,
+  show,
+  onClose,
+}: {
+  frame: Frame
+  index: number
+  setFrame(frame: Partial<Frame>): void
+  removeFrame(): void
+  show: boolean
+  onClose: () => void
+}) {
   return (
-    <>
-      {/* TODO: translation */}
-      <Button onClick={onShow}>Light Cone Conditionals</Button>
-      <ModalWrapper open={show} onClose={onHide}>
-        <LightConeSheetsDisplay />
-      </ModalWrapper>
-    </>
+    <ModalWrapper
+      open={show}
+      onClose={onClose}
+      containerProps={{ maxWidth: 'xl' }}
+    >
+      <CardThemed bgt="dark">
+        {/* TODO: translation */}
+        <CardHeader
+          title={`Edit Combo ${index + 1}`}
+          action={
+            <IconButton onClick={onClose}>
+              <CloseIcon />
+            </IconButton>
+          }
+        />
+        <Divider />
+        <CardContent>
+          <Stack spacing={1}>
+            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+              <NumberInputLazy
+                value={frame.multiplier}
+                onChange={(v) => setFrame({ multiplier: v })}
+                size="small"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">Multi x </InputAdornment>
+                  ),
+                }}
+              />
+              <OptimizationTargetSelector
+                optTarget={frame.tag}
+                setOptTarget={(tag) =>
+                  setFrame({
+                    tag,
+                  })
+                }
+              />
+              <Button
+                size="small"
+                color="error"
+                onClick={removeFrame}
+                startIcon={<Delete />}
+              >
+                Remove
+              </Button>
+            </Box>
+            <Box>
+              <Typography variant="h6">Relic Conditionals</Typography>
+              <RelicSheetsDisplay />
+            </Box>
+            <Box>
+              <Typography variant="h6">Lightcone Conditionals</Typography>
+              <LightConeSheetsDisplay />
+            </Box>
+          </Stack>
+        </CardContent>
+      </CardThemed>
+    </ModalWrapper>
   )
 }
diff --git a/libs/sr/page-team/src/LightConeSheetsDisplay.tsx b/libs/sr/page-team/src/LightConeSheetsDisplay.tsx
index d3be76a4c5..8cd2978a4a 100644
--- a/libs/sr/page-team/src/LightConeSheetsDisplay.tsx
+++ b/libs/sr/page-team/src/LightConeSheetsDisplay.tsx
@@ -1,22 +1,17 @@
-import { CardThemed } from '@genshin-optimizer/common/ui'
 import type { LightConeKey } from '@genshin-optimizer/sr/consts'
-import { CardContent, Grid } from '@mui/material'
+import { Grid } from '@mui/material'
 import { LightConeSheetDisplay } from './LightConeSheetDisplay'
 
 // TODO: hardcoded to LightConeSheetsDisplay.tsx for now. Can be expanded to all lightcones with sheets
 const cones: LightConeKey[] = ['PastSelfInMirror'] as const
 export function LightConeSheetsDisplay() {
   return (
-    <CardThemed bgt="dark">
-      <CardContent>
-        <Grid container columns={3} spacing={1}>
-          {cones.map((lcKey) => (
-            <Grid item xs={1} key={lcKey}>
-              <LightConeSheetDisplay lcKey={lcKey} />
-            </Grid>
-          ))}
+    <Grid container columns={3} spacing={1}>
+      {cones.map((lcKey) => (
+        <Grid item xs={1} key={lcKey}>
+          <LightConeSheetDisplay lcKey={lcKey} />
         </Grid>
-      </CardContent>
-    </CardThemed>
+      ))}
+    </Grid>
   )
 }
diff --git a/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx b/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx
index 63fd2a2f72..8381c9704c 100644
--- a/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx
+++ b/libs/sr/page-team/src/Optimize/GeneratedBuildsDisplay.tsx
@@ -22,7 +22,7 @@ import type { FormEventHandler } from 'react'
 import { memo, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { EquipRow } from '../BuildsDisplay'
-import { useTeamContext } from '../context'
+import { useTeamContext, useTeammateContext } from '../context'
 import { OptConfigContext } from './OptConfigWrapper'
 
 function useGeneratedBuildList(listId: string) {
@@ -81,10 +81,8 @@ function NewBuildButton({
   const [toTCBuild, setToTCBuild] = useState(false)
 
   const { database } = useDatabaseContext()
-  const {
-    teamId,
-    teammateDatum: { characterKey },
-  } = useTeamContext()
+  const { teamId } = useTeamContext()
+  const { characterKey } = useTeammateContext()
   const toNewBuild: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault()
 
diff --git a/libs/sr/page-team/src/Optimize/index.tsx b/libs/sr/page-team/src/Optimize/index.tsx
index 343581f4fb..806c038051 100644
--- a/libs/sr/page-team/src/Optimize/index.tsx
+++ b/libs/sr/page-team/src/Optimize/index.tsx
@@ -30,7 +30,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { TeamContext } from '../context'
+import { TeamContext, useTeammateContext } from '../context'
 import GeneratedBuildsDisplay from './GeneratedBuildsDisplay'
 import OptConfigProvider, { OptConfigContext } from './OptConfigWrapper'
 import { StatFilterCard } from './StatFilterCard'
@@ -38,7 +38,8 @@ import { WorkerSelector } from './WorkerSelector'
 
 export default function Optimize() {
   const { database } = useDatabaseContext()
-  const { teammateDatum, teamId } = useContext(TeamContext)
+  const { teamId } = useContext(TeamContext)
+  const teammateDatum = useTeammateContext()
   const optConfigId = teammateDatum.optConfigId
   const createOptConfig = useCallback(() => {
     if (optConfigId) return
@@ -79,10 +80,8 @@ function OptimizeWrapper() {
   const { database } = useDatabaseContext()
 
   const calc = useSrCalcContext()
-  const {
-    team,
-    teammateDatum: { characterKey },
-  } = useContext(TeamContext)
+  const { team } = useContext(TeamContext)
+  const { characterKey } = useTeammateContext()
   const [numWorkers, setNumWorkers] = useState(8)
   const [progress, setProgress] = useState<ProgressResult | undefined>(
     undefined
diff --git a/libs/sr/page-team/src/RelicSheetsDisplay.tsx b/libs/sr/page-team/src/RelicSheetsDisplay.tsx
index 4346a81698..78816d2c19 100644
--- a/libs/sr/page-team/src/RelicSheetsDisplay.tsx
+++ b/libs/sr/page-team/src/RelicSheetsDisplay.tsx
@@ -1,22 +1,17 @@
-import { CardThemed } from '@genshin-optimizer/common/ui'
 import type { RelicSetKey } from '@genshin-optimizer/sr/consts'
-import { CardContent, Grid } from '@mui/material'
+import { Grid } from '@mui/material'
 import { RelicSheetDisplay } from './RelicSheetDisplay'
 
 // TODO: hardcoded to RelicSheetsDisplay.tsx for now. Can be expanded to all relic sets with sheets
 const sets: RelicSetKey[] = ['WatchmakerMasterOfDreamMachinations'] as const
 export function RelicSheetsDisplay() {
   return (
-    <CardThemed bgt="dark">
-      <CardContent>
-        <Grid container columns={3} spacing={1}>
-          {sets.map((setKey) => (
-            <Grid item xs={1} key={setKey}>
-              <RelicSheetDisplay setKey={setKey} />
-            </Grid>
-          ))}
+    <Grid container columns={3} spacing={1}>
+      {sets.map((setKey) => (
+        <Grid item xs={1} key={setKey}>
+          <RelicSheetDisplay setKey={setKey} />
         </Grid>
-      </CardContent>
-    </CardThemed>
+      ))}
+    </Grid>
   )
 }
diff --git a/libs/sr/page-team/src/TalentContent.tsx b/libs/sr/page-team/src/TalentContent.tsx
index cc9598b2bd..fcdae725a4 100644
--- a/libs/sr/page-team/src/TalentContent.tsx
+++ b/libs/sr/page-team/src/TalentContent.tsx
@@ -33,7 +33,7 @@ import {
 import type { ReactNode } from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useTeamContext } from './context'
+import { useTeammateContext } from './context'
 
 const talentSpacing = {
   xs: 12,
@@ -42,9 +42,7 @@ const talentSpacing = {
 }
 
 export default function CharacterTalentPane() {
-  const {
-    teammateDatum: { characterKey },
-  } = useTeamContext()
+  const { characterKey } = useTeammateContext()
   const calc = useSrCalcContext()
   const { database } = useDatabaseContext()
   // TODO: for TC overrides
@@ -241,9 +239,7 @@ function SkillDisplayCard({
   talentKey,
   onClickTitle,
 }: SkillDisplayCardProps) {
-  const {
-    teammateDatum: { characterKey },
-  } = useTeamContext()
+  const { characterKey } = useTeammateContext()
   const actionWrapperFunc = useCallback(
     (children: ReactNode) => (
       <CardActionArea onClick={onClickTitle}>{children}</CardActionArea>
@@ -333,9 +329,7 @@ function SkillDisplayCard({
 
 export function EidolonDropdown({ eidolon }: { eidolon: number }) {
   const { t } = useTranslation('characters_gen')
-  const {
-    teammateDatum: { characterKey },
-  } = useTeamContext()
+  const { characterKey } = useTeammateContext()
   const { database } = useDatabaseContext()
   return (
     <DropdownButton
diff --git a/libs/sr/page-team/src/TeamCharacterSelector.tsx b/libs/sr/page-team/src/TeamCharacterSelector.tsx
index 3633c13848..7c3c2e7480 100644
--- a/libs/sr/page-team/src/TeamCharacterSelector.tsx
+++ b/libs/sr/page-team/src/TeamCharacterSelector.tsx
@@ -1,32 +1,9 @@
-import {
-  BootstrapTooltip,
-  CardThemed,
-  ModalWrapper,
-  TextFieldLazy,
-} from '@genshin-optimizer/common/ui'
 import type { CharacterKey } from '@genshin-optimizer/sr/consts'
-import { useDatabaseContext, useTeam } from '@genshin-optimizer/sr/db-ui'
-import BorderColorIcon from '@mui/icons-material/BorderColor'
-import CloseIcon from '@mui/icons-material/Close'
-import GroupsIcon from '@mui/icons-material/Groups'
+import { useTeam } from '@genshin-optimizer/sr/db-ui'
 import PersonIcon from '@mui/icons-material/Person'
-import {
-  Box,
-  CardActionArea,
-  CardContent,
-  CardHeader,
-  Divider,
-  IconButton,
-  Tab,
-  Tabs,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material'
-import { useState } from 'react'
+import { Tab, Tabs, Typography, useMediaQuery, useTheme } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
-import TeamSelectors from './TeamSelectors'
 
 export function TeamCharacterSelector({
   teamId,
@@ -37,24 +14,16 @@ export function TeamCharacterSelector({
 }) {
   const { t } = useTranslation('page_team')
   const navigate = useNavigate()
-  const { database } = useDatabaseContext()
-
-  const team = useTeam(teamId)!
-
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
-  const [editMode, setEditMode] = useState(false)
-
-  const handleName = (teamName: string): void => {
-    database.teams.set(teamId, { name: teamName })
-  }
-
-  const handleDesc = (teamDesc: string): void => {
-    database.teams.set(teamId, { description: teamDesc })
-  }
+  const team = useTeam(teamId)
+  if (!team) return null
 
   return (
-    <Box
+    <Tabs
+      variant="fullWidth"
+      value={charKey ?? 0}
+      orientation={isMobile ? 'vertical' : 'horizontal'}
       sx={() => {
         return {
           borderBottom: '1px rgb(200,200,200,0.3) solid',
@@ -72,111 +41,29 @@ export function TeamCharacterSelector({
         }
       }}
     >
-      <CardActionArea onClick={() => setEditMode(true)}>
-        <BootstrapTooltip
-          placement="top"
-          title={
-            <Box>
-              <Box sx={{ display: 'flex', color: 'info.light', gap: 1 }}>
-                <BorderColorIcon />
-                <Typography>
-                  <strong>{t('team.editNameDesc')}</strong>
-                </Typography>
-              </Box>
-              {!!team.description && (
-                <Typography>{team.description}</Typography>
-              )}
-            </Box>
-          }
-        >
-          <CardContent
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              '&:hover': {
-                color: 'info.light',
-              },
-            }}
-          >
-            <Typography
-              variant="h5"
-              sx={{
-                display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                justifyContent: 'center',
-                textShadow: '#000 0 0 10px !important',
-              }}
-            >
-              <GroupsIcon />
-              {team.name}
-            </Typography>
-          </CardContent>
-        </BootstrapTooltip>
-      </CardActionArea>
-      <ModalWrapper open={editMode} onClose={() => setEditMode(false)}>
-        <CardThemed>
-          <CardHeader
-            title={t('team.editNameDesc')}
-            avatar={<GroupsIcon />}
-            titleTypographyProps={{ variant: 'h6' }}
-            action={
-              <IconButton onClick={() => setEditMode(false)}>
-                <CloseIcon />
-              </IconButton>
+      {team.teamMetadata.map((teammateDatum, ind) => {
+        const characterKey = teammateDatum?.characterKey
+        return (
+          <Tab
+            icon={<PersonIcon />}
+            iconPosition="start"
+            value={characterKey ?? ind}
+            key={ind}
+            disabled={!teammateDatum}
+            label={
+              characterKey ? (
+                <Typography>{t(`charNames_gen:${characterKey}`)}</Typography>
+              ) : (
+                `Character ${ind + 1}` // TODO: Translation
+              )
+            }
+            onClick={() =>
+              // conserve the current tab when switching to another character
+              characterKey && navigate(`/teams/${teamId}/${characterKey}`)
             }
           />
-          <Divider />
-          <CardContent>
-            <Box display="flex" flexDirection="column" gap={2} sx={{ mt: 2 }}>
-              <TextFieldLazy
-                label={t('team.name')}
-                value={team.name}
-                onChange={(teamName) => handleName(teamName)}
-                autoFocus
-              />
-              <TextFieldLazy
-                label={t('team.desc')}
-                value={team.description}
-                onChange={(teamDesc) => handleDesc(teamDesc)}
-                multiline
-                minRows={4}
-              />
-              <TeamSelectors teamId={teamId} />
-            </Box>
-          </CardContent>
-        </CardThemed>
-      </ModalWrapper>
-      <Divider />
-      <Tabs
-        variant="fullWidth"
-        value={charKey ?? 0}
-        orientation={isMobile ? 'vertical' : 'horizontal'}
-      >
-        {team.teamMetadata.map((teammateDatum, ind) => {
-          const characterKey = teammateDatum?.characterKey
-          return (
-            <Tab
-              icon={<PersonIcon />}
-              iconPosition="start"
-              value={characterKey ?? ind}
-              key={ind}
-              disabled={!teammateDatum}
-              label={
-                characterKey ? (
-                  <Typography>{t(`charNames_gen:${characterKey}`)}</Typography>
-                ) : (
-                  `Character ${ind + 1}` // TODO: Translation
-                )
-              }
-              onClick={() =>
-                // conserve the current tab when switching to another character
-                characterKey && navigate(`/teams/${teamId}/${characterKey}`)
-              }
-            />
-          )
-        })}
-      </Tabs>
-    </Box>
+        )
+      })}
+    </Tabs>
   )
 }
diff --git a/libs/sr/page-team/src/TeamNameCardHeader.tsx b/libs/sr/page-team/src/TeamNameCardHeader.tsx
new file mode 100644
index 0000000000..80bf2e7ab7
--- /dev/null
+++ b/libs/sr/page-team/src/TeamNameCardHeader.tsx
@@ -0,0 +1,116 @@
+import {
+  BootstrapTooltip,
+  CardThemed,
+  ModalWrapper,
+  TextFieldLazy,
+} from '@genshin-optimizer/common/ui'
+import { useDatabaseContext } from '@genshin-optimizer/sr/db-ui'
+import BorderColorIcon from '@mui/icons-material/BorderColor'
+import CloseIcon from '@mui/icons-material/Close'
+import GroupsIcon from '@mui/icons-material/Groups'
+import {
+  Box,
+  CardActionArea,
+  CardContent,
+  CardHeader,
+  Divider,
+  IconButton,
+  Typography,
+} from '@mui/material'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import TeamSelectors from './TeamSelectors'
+import { useTeamContext } from './context'
+export default function TeamNameCardHeader() {
+  const { t } = useTranslation('page_team')
+  const { teamId, team } = useTeamContext()
+  const { database } = useDatabaseContext()
+  const [editMode, setEditMode] = useState(false)
+
+  const handleName = (teamName: string): void => {
+    database.teams.set(teamId, { name: teamName })
+  }
+
+  const handleDesc = (teamDesc: string): void => {
+    database.teams.set(teamId, { description: teamDesc })
+  }
+  return (
+    <>
+      <CardActionArea onClick={() => setEditMode(true)}>
+        <BootstrapTooltip
+          placement="top"
+          title={
+            <Box>
+              <Box sx={{ display: 'flex', color: 'info.light', gap: 1 }}>
+                <BorderColorIcon />
+                <Typography>
+                  <strong>{t('team.editNameDesc')}</strong>
+                </Typography>
+              </Box>
+              {!!team.description && (
+                <Typography>{team.description}</Typography>
+              )}
+            </Box>
+          }
+        >
+          <CardContent
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              '&:hover': {
+                color: 'info.light',
+              },
+            }}
+          >
+            <Typography
+              variant="h5"
+              sx={{
+                display: 'flex',
+                gap: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+                textShadow: '#000 0 0 10px !important',
+              }}
+            >
+              <GroupsIcon />
+              {team.name}
+            </Typography>
+          </CardContent>
+        </BootstrapTooltip>
+      </CardActionArea>
+      <ModalWrapper open={editMode} onClose={() => setEditMode(false)}>
+        <CardThemed>
+          <CardHeader
+            title={t('team.editNameDesc')}
+            avatar={<GroupsIcon />}
+            titleTypographyProps={{ variant: 'h6' }}
+            action={
+              <IconButton onClick={() => setEditMode(false)}>
+                <CloseIcon />
+              </IconButton>
+            }
+          />
+          <Divider />
+          <CardContent>
+            <Box display="flex" flexDirection="column" gap={2} sx={{ mt: 2 }}>
+              <TextFieldLazy
+                label={t('team.name')}
+                value={team.name}
+                onChange={(teamName) => handleName(teamName)}
+                autoFocus
+              />
+              <TextFieldLazy
+                label={t('team.desc')}
+                value={team.description}
+                onChange={(teamDesc) => handleDesc(teamDesc)}
+                multiline
+                minRows={4}
+              />
+              <TeamSelectors teamId={teamId} />
+            </Box>
+          </CardContent>
+        </CardThemed>
+      </ModalWrapper>
+    </>
+  )
+}
diff --git a/libs/sr/page-team/src/TeammateDisplay.tsx b/libs/sr/page-team/src/TeammateDisplay.tsx
index 1a9825772e..fac83ec0ae 100644
--- a/libs/sr/page-team/src/TeammateDisplay.tsx
+++ b/libs/sr/page-team/src/TeammateDisplay.tsx
@@ -29,15 +29,12 @@ import {
 } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
 import { BuildsDisplay, EquipRow, EquipRowTC } from './BuildsDisplay'
-import { ComboEditor } from './ComboEditor'
-import { useTeamContext } from './context'
+import { useTeammateContext } from './context'
 import Optimize from './Optimize'
 import CharacterTalentPane from './TalentContent'
 
 export default function TeammateDisplay() {
-  const {
-    teammateDatum: { characterKey, buildType },
-  } = useTeamContext()
+  const { characterKey, buildType } = useTeammateContext()
   const character = useCharacterContext()
   const [editorKey, setCharacterKey] = useState<CharacterKey | undefined>(
     undefined
@@ -62,7 +59,6 @@ export default function TeammateDisplay() {
         </Box>
         <CurrentBuildDisplay />
       </Box>
-      <ComboEditor />
       <CalcDebug />
       <CharacterTalentPane />
       {buildType !== 'tc' && <Optimize />}
@@ -70,7 +66,7 @@ export default function TeammateDisplay() {
   )
 }
 function CurrentBuildDisplay() {
-  const { teammateDatum } = useTeamContext()
+  const teammateDatum = useTeammateContext()
   const { database } = useDatabaseContext()
   const { buildType, buildId, buildTcId } = teammateDatum
   const [dbDirty, setDbDirty] = useForceUpdate()
@@ -107,7 +103,7 @@ function CurrentBuildDisplay() {
   )
 }
 function BuildDisplay() {
-  const { teammateDatum } = useTeamContext()
+  const teammateDatum = useTeammateContext()
   const { database } = useDatabaseContext()
   const { relicIds, lightConeId } = useMemo(
     () => database.teams.getTeamActiveBuild(teammateDatum),
@@ -116,7 +112,7 @@ function BuildDisplay() {
   return <EquipRow relicIds={relicIds} lightConeId={lightConeId} />
 }
 function BuildTCDisplay() {
-  const { teammateDatum } = useTeamContext()
+  const teammateDatum = useTeammateContext()
   if (teammateDatum.buildType !== 'tc') return null
   return <EquipRowTC buildTcId={teammateDatum.buildTcId} />
 }
diff --git a/libs/sr/page-team/src/context/TeamContext.ts b/libs/sr/page-team/src/context/TeamContext.ts
index 5f301d5f74..a3d47ac0ee 100644
--- a/libs/sr/page-team/src/context/TeamContext.ts
+++ b/libs/sr/page-team/src/context/TeamContext.ts
@@ -1,16 +1,14 @@
-import type { Team, TeammateDatum } from '@genshin-optimizer/sr/db'
+import type { Team } from '@genshin-optimizer/sr/db'
 import { createContext, useContext } from 'react'
 
 export type TeamContextObj = {
   teamId: string
   team: Team
-  teammateDatum: TeammateDatum
 }
 
 export const TeamContext = createContext({
   teamId: '',
   team: {},
-  teammateDatum: { buildType: 'equipped', buildId: '' },
 } as TeamContextObj)
 
 export function useTeamContext() {
diff --git a/libs/sr/page-team/src/context/TeammateContext.ts b/libs/sr/page-team/src/context/TeammateContext.ts
new file mode 100644
index 0000000000..3ba2cfcb89
--- /dev/null
+++ b/libs/sr/page-team/src/context/TeammateContext.ts
@@ -0,0 +1,11 @@
+import type { TeammateDatum } from '@genshin-optimizer/sr/db'
+import { createContext, useContext } from 'react'
+
+export const TeammateContext = createContext({
+  buildType: 'equipped',
+  buildId: '',
+} as TeammateDatum)
+
+export function useTeammateContext() {
+  return useContext(TeammateContext)
+}
diff --git a/libs/sr/page-team/src/context/index.ts b/libs/sr/page-team/src/context/index.ts
index f760c4e8c0..d1613bf3a7 100644
--- a/libs/sr/page-team/src/context/index.ts
+++ b/libs/sr/page-team/src/context/index.ts
@@ -1,2 +1,3 @@
 export * from './PresetContext'
 export * from './TeamContext'
+export * from './TeammateContext'
diff --git a/libs/sr/page-team/src/index.tsx b/libs/sr/page-team/src/index.tsx
index 2274b524c9..210b1504be 100644
--- a/libs/sr/page-team/src/index.tsx
+++ b/libs/sr/page-team/src/index.tsx
@@ -27,7 +27,7 @@ import {
   type Tag,
 } from '@genshin-optimizer/sr/formula'
 import { CharacterName } from '@genshin-optimizer/sr/ui'
-import { Box, Skeleton } from '@mui/material'
+import { Box, Divider, Skeleton } from '@mui/material'
 import { Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -38,11 +38,14 @@ import {
   useNavigate,
   useParams,
 } from 'react-router-dom'
+import { ComboEditor } from './ComboEditor'
+import type { PresetContextObj } from './context'
+import { PresetContext, TeamContext } from './context'
+import { TeammateContext, useTeammateContext } from './context/TeammateContext'
 import { TeamCalcProvider } from './TeamCalcProvider'
 import { TeamCharacterSelector } from './TeamCharacterSelector'
 import TeammateDisplay from './TeammateDisplay'
-import type { PresetContextObj, TeamContextObj } from './context'
-import { PresetContext, TeamContext, useTeamContext } from './context'
+import TeamNameCardHeader from './TeamNameCardHeader'
 
 const fallback = <Skeleton variant="rectangular" width="100%" height={1000} />
 
@@ -120,14 +123,13 @@ function Page({ teamId }: { teamId: string }) {
     }, [characterKey, t, team.name])
   )
 
-  const teamContextObj: TeamContextObj | undefined = useMemo(() => {
-    if (!teamId || !team || !teammateDatum) return undefined
-    return {
+  const teamContextObj = useMemo(
+    () => ({
       teamId,
       team,
-      teammateDatum,
-    }
-  }, [teammateDatum, team, teamId])
+    }),
+    [team, teamId]
+  )
   const srcDstDisplayContextValue = useMemo(() => {
     const charList = team.teamMetadata
       .filter(notEmpty)
@@ -182,67 +184,57 @@ function Page({ teamId }: { teamId: string }) {
     [characterKey, presetIndex]
   )
   return (
-    <TagContext.Provider value={tag}>
-      <PresetContext.Provider value={presetObj}>
-        <TeamCalcProvider teamId={teamId}>
-          <SrcDstDisplayContext.Provider value={srcDstDisplayContextValue}>
-            <ConditionalValuesContext.Provider value={conditionals}>
-              <SetConditionalContext.Provider value={setConditional}>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    gap: 1,
-                    flexDirection: 'column',
-                    mx: 1,
-                    mt: 2,
-                  }}
-                >
-                  <CardThemed
+    <TeamContext.Provider value={teamContextObj}>
+      <TagContext.Provider value={tag}>
+        <PresetContext.Provider value={presetObj}>
+          <TeamCalcProvider teamId={teamId}>
+            <SrcDstDisplayContext.Provider value={srcDstDisplayContextValue}>
+              <ConditionalValuesContext.Provider value={conditionals}>
+                <SetConditionalContext.Provider value={setConditional}>
+                  <Box
                     sx={{
-                      overflow: 'visible',
-                      top: 0,
-                      position: 'sticky',
-                      zIndex: 100,
+                      display: 'flex',
+                      gap: 1,
+                      flexDirection: 'column',
+                      mx: 1,
+                      mt: 2,
                     }}
                   >
-                    <TeamCharacterSelector
-                      teamId={teamId}
-                      charKey={characterKey}
-                    />
-                  </CardThemed>
-                  <Box
-                  // sx={(theme) => {
-                  //   const elementKey = characterKey && allStats.char[characterKey]
-                  //   if (!elementKey) return {}
-                  //   const hex = theme.palette[elementKey].main as string
-                  //   const color = hexToColor(hex)
-                  //   if (!color) return {}
-                  //   const rgba = colorToRgbaString(color, 0.1)
-                  //   return {
-                  //     background: `linear-gradient(to bottom, ${rgba} 0%, rgba(0,0,0,0)) 25%`,
-                  //   }
-                  // }}
-                  >
-                    {teamContextObj && (
-                      <TeamContext.Provider value={teamContextObj}>
+                    <CardThemed
+                      sx={{
+                        overflow: 'visible',
+                        top: 0,
+                        position: 'sticky',
+                        zIndex: 100,
+                      }}
+                    >
+                      <TeamNameCardHeader />
+                      <Divider />
+                      <ComboEditor />
+                      <Divider />
+                      <TeamCharacterSelector
+                        teamId={teamId}
+                        charKey={characterKey}
+                      />
+                    </CardThemed>
+                    {teammateDatum && (
+                      <TeammateContext.Provider value={teammateDatum}>
                         <TeammateDisplayWrapper />
-                      </TeamContext.Provider>
+                      </TeammateContext.Provider>
                     )}
                   </Box>
-                </Box>
-              </SetConditionalContext.Provider>
-            </ConditionalValuesContext.Provider>
-          </SrcDstDisplayContext.Provider>
-        </TeamCalcProvider>
-      </PresetContext.Provider>
-    </TagContext.Provider>
+                </SetConditionalContext.Provider>
+              </ConditionalValuesContext.Provider>
+            </SrcDstDisplayContext.Provider>
+          </TeamCalcProvider>
+        </PresetContext.Provider>
+      </TagContext.Provider>
+    </TeamContext.Provider>
   )
 }
 
 function TeammateDisplayWrapper() {
-  const {
-    teammateDatum: { characterKey },
-  } = useTeamContext()
+  const { characterKey } = useTeammateContext()
   const character = useCharacter(characterKey)
   if (!character)
     return <Skeleton variant="rectangular" width="100%" height={1000} />
diff --git a/libs/sr/solver/src/solver.ts b/libs/sr/solver/src/solver.ts
index dac0a10c84..c16b1dedcb 100644
--- a/libs/sr/solver/src/solver.ts
+++ b/libs/sr/solver/src/solver.ts
@@ -1,4 +1,4 @@
-import { detach, sum } from '@genshin-optimizer/pando/engine'
+import { detach, prod, sum } from '@genshin-optimizer/pando/engine'
 import type { CharacterKey, RelicSlotKey } from '@genshin-optimizer/sr/consts'
 import { allLightConeKeys, allRelicSetKeys } from '@genshin-optimizer/sr/consts'
 import type {
@@ -134,7 +134,10 @@ export class Solver {
         // team
         sum(
           ...this.frames.map((frame, i) =>
-            new Read(frame, 'sum').with('preset', `preset${i}` as Preset)
+            prod(
+              frame.multiplier,
+              new Read(frame.tag, 'sum').with('preset', `preset${i}` as Preset)
+            )
           )
         ),
         // stat filters