diff --git a/optuna_dashboard/ts/action.ts b/optuna_dashboard/ts/action.ts
index ff66b8e9..339d747b 100644
--- a/optuna_dashboard/ts/action.ts
+++ b/optuna_dashboard/ts/action.ts
@@ -144,7 +144,7 @@ export const actionCreator = () => {
     studyId: number,
     index: number,
     state: TrialState,
-    values?: TrialValueNumber[]
+    values?: number[]
   ) => {
     const newTrial: Trial = Object.assign(
       {},
diff --git a/optuna_dashboard/ts/apiClient.ts b/optuna_dashboard/ts/apiClient.ts
index cf775fd6..454c3496 100644
--- a/optuna_dashboard/ts/apiClient.ts
+++ b/optuna_dashboard/ts/apiClient.ts
@@ -19,7 +19,7 @@ interface TrialResponse {
   study_id: number
   number: number
   state: TrialState
-  values?: TrialValueNumber[]
+  values?: number[]
   intermediate_values: TrialIntermediateValue[]
   datetime_start?: string
   datetime_complete?: string
diff --git a/optuna_dashboard/ts/components/GraphContour.tsx b/optuna_dashboard/ts/components/GraphContour.tsx
index 44ed73f1..75524483 100644
--- a/optuna_dashboard/ts/components/GraphContour.tsx
+++ b/optuna_dashboard/ts/components/GraphContour.tsx
@@ -209,9 +209,7 @@ const ContourFrontend: FC<{
 const filterFunc = (trial: Trial, objectiveId: number): boolean => {
   return (
     trial.state === "Complete" &&
-    trial.values !== undefined &&
-    trial.values[objectiveId] !== "inf" &&
-    trial.values[objectiveId] !== "-inf"
+    trial.values !== undefined
   )
 }
 
diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx
index 9ddec25b..01e3eccf 100644
--- a/optuna_dashboard/ts/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/ts/components/GraphParetoFront.tsx
@@ -53,7 +53,7 @@ const GraphParetoFrontBackend: FC<{
     }
   }, [error])
 
-  return <Box id={plotDomId} sx={{ height: "450px" }} />
+  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
 }
 
 const GraphParetoFrontFrontend: FC<{
@@ -149,6 +149,7 @@ const GraphParetoFrontFrontend: FC<{
       </Grid>
       <Grid item xs={9}>
         <Box
+          component="div"
           id={plotDomId}
           sx={{
             height: "450px",
@@ -163,8 +164,7 @@ const filterFunc = (trial: Trial, directions: StudyDirection[]): boolean => {
   return (
     trial.state === "Complete" &&
     trial.values !== undefined &&
-    trial.values.length === directions.length &&
-    trial.values.every((v) => v !== "inf" && v !== "-inf")
+    trial.values.length === directions.length
   )
 }
 
diff --git a/optuna_dashboard/ts/components/GraphRank.tsx b/optuna_dashboard/ts/components/GraphRank.tsx
index a059322c..78c54264 100644
--- a/optuna_dashboard/ts/components/GraphRank.tsx
+++ b/optuna_dashboard/ts/components/GraphRank.tsx
@@ -65,7 +65,7 @@ const GraphRankBackend: FC<{
     }
   }, [error])
 
-  return <Box id={plotDomId} sx={{ height: "450px" }} />
+  return <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
 }
 
 const GraphRankFrontend: FC<{
@@ -163,7 +163,7 @@ const GraphRankFrontend: FC<{
         ) : null}
       </Grid>
       <Grid item xs={9}>
-        <Box id={plotDomId} sx={{ height: "450px" }} />
+        <Box component="div" id={plotDomId} sx={{ height: "450px" }} />
       </Grid>
     </Grid>
   )
@@ -193,21 +193,13 @@ const getRankPlotInfo = (
   const zValues: number[] = []
   const isFeasible: boolean[] = []
   const hovertext: string[] = []
-  const convertTrialValueToNumber = (value: TrialValueNumber): number => {
-    // TrialValueNumber takes `number`, "inf", or "-inf".
-    return typeof value === "number"
-      ? value
-      : value.includes("-")
-        ? -Infinity
-        : Infinity
-  }
   filteredTrials.forEach((trial, i) => {
     const xValue = xAxis.values[i]
     const yValue = yAxis.values[i]
     if (xValue && yValue && trial.values) {
       xValues.push(xValue)
       yValues.push(yValue)
-      const zValue = convertTrialValueToNumber(trial.values[objectiveId])
+      const zValue = trial.values[objectiveId]
       zValues.push(zValue)
       const feasibility = trial.constraints.every((c) => c <= 0)
       isFeasible.push(feasibility)
diff --git a/optuna_dashboard/ts/components/TrialFormWidgets.tsx b/optuna_dashboard/ts/components/TrialFormWidgets.tsx
index 36bea2a7..feff2078 100644
--- a/optuna_dashboard/ts/components/TrialFormWidgets.tsx
+++ b/optuna_dashboard/ts/components/TrialFormWidgets.tsx
@@ -136,7 +136,7 @@ const UpdatableFormWidgets: FC<{
   }
 
   return (
-    <Box sx={{ p: theme.spacing(1, 0) }}>
+    <Box component="div" sx={{ p: theme.spacing(1, 0) }}>
       <Card
         sx={{
           display: "flex",
@@ -149,6 +149,7 @@ const UpdatableFormWidgets: FC<{
       >
         {widgetStates.map((ws) => ws.render())}
         <Box
+        component="div"
           sx={{
             display: "flex",
             flexDirection: "row",
@@ -283,7 +284,7 @@ export const useSliderWidget = (
       <FormLabel>
         {metricName} - {widget.description}
       </FormLabel>
-      <Box sx={{ padding: theme.spacing(0, 2) }}>
+      <Box component="div" sx={{ padding: theme.spacing(0, 2) }}>
         <Slider
           onChange={(e) => {
             // @ts-ignore
@@ -348,7 +349,7 @@ const ReadonlyFormWidgets: FC<{
   formWidgets: FormWidgets
 }> = ({ trial, widgetNames, formWidgets }) => {
   const theme = useTheme()
-  const getValue = (i: number): string | TrialValueNumber => {
+  const getValue = (i: number): string | number => {
     if (formWidgets.output_type === "user_attr") {
       const widget = formWidgets.widgets[i] as UserAttrFormWidget
       return (
@@ -369,7 +370,7 @@ const ReadonlyFormWidgets: FC<{
   }
 
   return (
-    <Box sx={{ p: theme.spacing(1, 0) }}>
+    <Box component="div" sx={{ p: theme.spacing(1, 0) }}>
       <Card
         sx={{
           display: "flex",
@@ -424,10 +425,10 @@ const ReadonlyFormWidgets: FC<{
                 <FormLabel>
                   {widgetName} - {widget.description}
                 </FormLabel>
-                <Box sx={{ padding: theme.spacing(0, 2) }}>
+                <Box component="div" sx={{ padding: theme.spacing(0, 2) }}>
                   <Slider
                     defaultValue={
-                      value === "inf" || value === "-inf" ? undefined : value
+                      value
                     }
                     min={widget.min}
                     max={widget.max}
diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
index a150908a..4b2fe4ee 100644
--- a/optuna_dashboard/ts/components/TrialTable.tsx
+++ b/optuna_dashboard/ts/components/TrialTable.tsx
@@ -26,8 +26,8 @@ export const TrialTable: FC<{
     },
   ]
   const valueComparator = (
-    firstVal?: TrialValueNumber,
-    secondVal?: TrialValueNumber,
+    firstVal?: number,
+    secondVal?: number,
     ascending: boolean = true
   ): number => {
     if (firstVal === secondVal) {
@@ -38,11 +38,6 @@ export const TrialTable: FC<{
     } else if (secondVal === undefined) {
       return ascending ? 1 : -1
     }
-    if (firstVal === "-inf" || secondVal === "inf") {
-      return 1
-    } else if (secondVal === "-inf" || firstVal === "inf") {
-      return -1
-    }
     return firstVal < secondVal ? 1 : -1
   }
   if (studyDetail === null || studyDetail.directions.length === 1) {
diff --git a/optuna_dashboard/ts/dominatedTrials.ts b/optuna_dashboard/ts/dominatedTrials.ts
index b1571775..f1a0b6a3 100644
--- a/optuna_dashboard/ts/dominatedTrials.ts
+++ b/optuna_dashboard/ts/dominatedTrials.ts
@@ -2,8 +2,7 @@ const filterFunc = (trial: Trial, directions: StudyDirection[]): boolean => {
   return (
     trial.state === "Complete" &&
     trial.values !== undefined &&
-    trial.values.length === directions.length &&
-    trial.values.every((v) => v !== "inf" && v !== "-inf")
+    trial.values.length === directions.length
   )
 }
 
diff --git a/optuna_dashboard/ts/trialFilter.ts b/optuna_dashboard/ts/trialFilter.ts
index 4fe7e35a..9113a34f 100644
--- a/optuna_dashboard/ts/trialFilter.ts
+++ b/optuna_dashboard/ts/trialFilter.ts
@@ -67,7 +67,7 @@ export class Target {
         return null
       }
       const value = trial.values[objectiveId]
-      if (value === "inf" || value === "-inf") {
+      if (value === Infinity || value === -Infinity) {
         return null
       }
       return value
diff --git a/optuna_dashboard/ts/types/index.d.ts b/optuna_dashboard/ts/types/index.d.ts
index 789dd5ff..9bfcdcaa 100644
--- a/optuna_dashboard/ts/types/index.d.ts
+++ b/optuna_dashboard/ts/types/index.d.ts
@@ -7,7 +7,6 @@ declare const APP_BAR_TITLE: string
 declare const API_ENDPOINT: string
 declare const URL_PREFIX: string
 
-type TrialValueNumber = number | "inf" | "-inf"
 type TrialIntermediateValueNumber = number | "inf" | "-inf" | "nan"
 type TrialState = "Running" | "Complete" | "Pruned" | "Fail" | "Waiting"
 type TrialStateFinished = "Complete" | "Fail" | "Pruned"