diff --git a/optuna_dashboard/ts/components/Note.tsx b/optuna_dashboard/ts/components/Note.tsx
index 051ca10a..09270213 100644
--- a/optuna_dashboard/ts/components/Note.tsx
+++ b/optuna_dashboard/ts/components/Note.tsx
@@ -163,7 +163,7 @@ const useConfirmCloseDialog = (
   return [openDialog, renderDialog]
 }
 
-const MarkdownRenderer: FC<{ body: string }> = ({ body }) => (
+export const MarkdownRenderer: FC<{ body: string }> = ({ body }) => (
   <ReactMarkdown
     children={body}
     remarkPlugins={[remarkGfm, remarkMath]}
diff --git a/optuna_dashboard/ts/components/PreferentialTrials.tsx b/optuna_dashboard/ts/components/PreferentialTrials.tsx
index c6e7eeb0..5c141403 100644
--- a/optuna_dashboard/ts/components/PreferentialTrials.tsx
+++ b/optuna_dashboard/ts/components/PreferentialTrials.tsx
@@ -1,8 +1,23 @@
 import React, { FC, useState } from "react"
-import { Typography, Box, Button, useTheme } from "@mui/material"
+import {
+  Typography,
+  Box,
+  useTheme,
+  Card,
+  CardContent,
+  CardActions,
+  CardActionArea,
+} from "@mui/material"
+import ClearIcon from "@mui/icons-material/Clear"
+import IconButton from "@mui/material/IconButton"
+import OpenInFullIcon from "@mui/icons-material/OpenInFull"
+import ReplayIcon from "@mui/icons-material/Replay"
+import Modal from "@mui/material/Modal"
+import { red } from "@mui/material/colors"
 
-import { TrialNote } from "./Note"
 import { actionCreator } from "../action"
+import { TrialListDetail } from "./TrialList"
+import { MarkdownRenderer } from "./Note"
 
 const PreferentialTrial: FC<{
   trial?: Trial
@@ -12,50 +27,149 @@ const PreferentialTrial: FC<{
   const theme = useTheme()
   const action = actionCreator()
   const trialWidth = 500
+  const trialHeight = 300
+  const [detailShown, setDetailShown] = useState(false)
 
   if (trial == undefined) {
-    return <Box width={trialWidth}></Box>
+    return (
+      <Box
+        sx={{
+          width: trialWidth,
+          minHeight: trialHeight,
+          margin: theme.spacing(2),
+        }}
+      />
+    )
   }
 
   return (
-    <Box sx={{ width: trialWidth, padding: theme.spacing(2, 2, 0, 2) }}>
-      <Typography
-        variant="h4"
-        sx={{
-          marginBottom: theme.spacing(2),
-          fontWeight: theme.typography.fontWeightBold,
-        }}
-      >
-        Trial {trial.number} (trial_id={trial.trial_id})
-      </Typography>
-      <Button
-        variant="outlined"
-        onClick={() => {
-          hideTrial()
-          action.skipPreferentialTrial(trial.study_id, trial.trial_id)
-        }}
-      >
-        Reload
-      </Button>
-      <Button
-        variant="outlined"
-        onClick={() => {
-          hideTrial()
-          const best_trials = studyDetail.best_trials
-            .map((t) => t.number)
-            .filter((t) => t !== trial.number)
-          action.updatePreference(trial.study_id, best_trials, [trial.number])
-        }}
-      >
-        Worst
-      </Button>
-      <TrialNote
-        studyId={trial.study_id}
-        trialId={trial.trial_id}
-        latestNote={trial.note}
-        cardSx={{ marginBottom: theme.spacing(2) }}
-      />
-    </Box>
+    <Card
+      sx={{
+        width: trialWidth,
+        minHeight: trialHeight,
+        margin: theme.spacing(2),
+        padding: 0,
+      }}
+    >
+      <CardActions>
+        <Typography variant="h5">Trial {trial.number}</Typography>
+        <IconButton
+          sx={{
+            marginLeft: "auto",
+          }}
+          onClick={() => {
+            hideTrial()
+            action.skipPreferentialTrial(trial.study_id, trial.trial_id)
+          }}
+          aria-label="skip trial"
+        >
+          <ReplayIcon />
+        </IconButton>
+        <IconButton
+          sx={{
+            marginLeft: "auto",
+          }}
+          onClick={() => setDetailShown(true)}
+          aria-label="show detail"
+        >
+          <OpenInFullIcon />
+        </IconButton>
+      </CardActions>
+      <CardActionArea>
+        <CardContent
+          aria-label="trial-button"
+          onClick={() => {
+            hideTrial()
+            const best_trials = studyDetail.best_trials
+              .map((t) => t.number)
+              .filter((t) => t !== trial.number)
+            action.updatePreference(trial.study_id, best_trials, [trial.number])
+          }}
+          sx={{
+            padding: 0,
+            position: "relative",
+            overflow: "hidden",
+            "::before": {
+              content: '""',
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              backgroundColor:
+                theme.palette.mode === "dark" ? "white" : "black",
+              opacity: 0,
+              zIndex: 1,
+              transition: "opacity 0.3s ease-out",
+            },
+            ":hover::before": {
+              opacity: 0.2,
+            },
+          }}
+        >
+          <Box
+            sx={{
+              padding: theme.spacing(2),
+            }}
+          >
+            <MarkdownRenderer body={trial.note.body} />
+          </Box>
+
+          <ClearIcon
+            sx={{
+              position: "absolute",
+              width: "100%",
+              height: "100%",
+              top: 0,
+              left: 0,
+              color: red[600],
+              opacity: 0,
+              transition: "opacity 0.3s ease-out",
+              zIndex: 1,
+              ":hover": {
+                opacity: 0.3,
+                filter:
+                  theme.palette.mode === "dark"
+                    ? "brightness(1.1)"
+                    : "brightness(1.7)",
+              },
+            }}
+          />
+        </CardContent>
+      </CardActionArea>
+      <Modal open={detailShown} onClose={() => setDetailShown(false)}>
+        <Box
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: "80%",
+            maxHeight: "90%",
+            margin: "auto",
+            overflow: "hidden",
+            backgroundColor: theme.palette.mode === "dark" ? "black" : "white",
+            borderRadius: theme.spacing(3),
+          }}
+        >
+          <Box
+            sx={{
+              width: "100%",
+              height: "100%",
+              overflow: "auto",
+            }}
+          >
+            <TrialListDetail
+              trial={trial}
+              isBestTrial={() => true}
+              directions={[]}
+              objectiveNames={[]}
+            />
+          </Box>
+        </Box>
+      </Modal>
+    </Card>
   )
 }
 
@@ -70,6 +184,7 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
   if (studyDetail === null || !studyDetail.is_preferential) {
     return null
   }
+  const theme = useTheme()
   const [displayTrials, setDisplayTrials] = useState<DisplayTrials>({
     numbers: studyDetail.best_trials.map((t) => t.number),
     last_number: Math.max(...studyDetail.best_trials.map((t) => t.number), -1),
@@ -113,17 +228,28 @@ export const PreferentialTrials: FC<{ studyDetail: StudyDetail | null }> = ({
   }
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
-      {displayTrials.numbers.map((t, index) => (
-        <PreferentialTrial
-          key={index}
-          trial={studyDetail.best_trials.find((trial) => trial.number === t)}
-          studyDetail={studyDetail}
-          hideTrial={() => {
-            hideTrial(t)
-          }}
-        />
-      ))}
+    <Box padding={theme.spacing(2)}>
+      <Typography
+        variant="h4"
+        sx={{
+          marginBottom: theme.spacing(2),
+          fontWeight: theme.typography.fontWeightBold,
+        }}
+      >
+        Which trial is the worst?
+      </Typography>
+      <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
+        {displayTrials.numbers.map((t, index) => (
+          <PreferentialTrial
+            key={index}
+            trial={studyDetail.best_trials.find((trial) => trial.number === t)}
+            studyDetail={studyDetail}
+            hideTrial={() => {
+              hideTrial(t)
+            }}
+          />
+        ))}
+      </Box>
     </Box>
   )
 }
diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index 4a54331d..4aceb619 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -143,7 +143,7 @@ const useIsBestTrial = (
   }, [studyDetail])
 }
 
-const TrialListDetail: FC<{
+export const TrialListDetail: FC<{
   trial: Trial
   isBestTrial: (trialId: number) => boolean
   directions: StudyDirection[]
diff --git a/optuna_dashboard/ts/components/TrialTable.tsx b/optuna_dashboard/ts/components/TrialTable.tsx
index ed930c9c..8fcce63c 100644
--- a/optuna_dashboard/ts/components/TrialTable.tsx
+++ b/optuna_dashboard/ts/components/TrialTable.tsx
@@ -157,7 +157,7 @@ export const TrialTable: FC<{
         if (firstVal === secondVal) {
           return 0
         } else if (firstVal && secondVal) {
-          return firstVal < secondVal ? 1 : -1
+          return Number(firstVal) < Number(secondVal) ? 1 : -1
         } else if (firstVal) {
           return -1
         } else {