diff --git a/atcoder-problems-frontend/src/components/ProblemLink.tsx b/atcoder-problems-frontend/src/components/ProblemLink.tsx
index d18c4b5a1..50b8b3d7e 100644
--- a/atcoder-problems-frontend/src/components/ProblemLink.tsx
+++ b/atcoder-problems-frontend/src/components/ProblemLink.tsx
@@ -4,6 +4,7 @@ import * as Url from "../utils/Url";
 import { getRatingColorClass } from "../utils";
 import ProblemModel from "../interfaces/ProblemModel";
 import { RatingInfo } from "../utils/RatingInfo";
+import { ShowDifficultyMode } from "../utils/ShowDifficultyMode";
 import { DifficultyCircle } from "./DifficultyCircle";
 import { NewTabLink } from "./NewTabLink";
 
@@ -13,7 +14,7 @@ interface Props {
   contestId: string;
   problemIndex?: string;
   problemName: string;
-  showDifficulty?: boolean;
+  showDifficultyMode: ShowDifficultyMode;
   isExperimentalDifficulty?: boolean;
   showDifficultyUnavailable?: boolean;
   problemModel?: ProblemModel | null;
@@ -22,13 +23,16 @@ interface Props {
 
 export const ProblemLink: React.FC<Props> = (props) => {
   const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [showDifficultySubClicked, setshowDifficultySubClicked] = useState(
+    false
+  );
 
   const {
     contestId,
     problemId,
     problemIndex,
     problemName,
-    showDifficulty,
+    showDifficultyMode,
     isExperimentalDifficulty,
     showDifficultyUnavailable,
     problemModel,
@@ -38,7 +42,7 @@ export const ProblemLink: React.FC<Props> = (props) => {
     ? `${problemIndex}. ${problemName}`
     : problemName;
 
-  const link = (
+  const simpleLink = (
     <NewTabLink
       href={Url.formatProblemUrl(problemId, contestId)}
       className={props.className}
@@ -49,56 +53,96 @@ export const ProblemLink: React.FC<Props> = (props) => {
 
   const difficulty = problemModel?.difficulty;
   if (
-    !showDifficulty ||
     problemModel === undefined ||
     (difficulty === undefined && !showDifficultyUnavailable)
   ) {
-    return link;
+    return simpleLink;
   }
 
   const uniqueId = problemId + "-" + contestId;
   const experimentalIconId = "experimental-" + uniqueId;
+  const showDifficultySubIconId = "show-difficulty-sub-" + uniqueId;
   const ratingColorClass =
     difficulty === undefined ? undefined : getRatingColorClass(difficulty);
 
-  return (
+  const experimentalDifficultySymbol = (
+    <>
+      <span id={experimentalIconId} role="img" aria-label="experimental">
+        🧪
+      </span>
+      <Tooltip
+        placement="top"
+        target={experimentalIconId}
+        isOpen={tooltipOpen}
+        toggle={(): void => setTooltipOpen(!tooltipOpen)}
+      >
+        This estimate is experimental.
+      </Tooltip>
+    </>
+  );
+  const showDifficultySubSymbol = (
+    <>
+      <button
+        id={showDifficultySubIconId}
+        role="img"
+        aria-label="show-difficulty-sub"
+        onClick={(): void =>
+          setshowDifficultySubClicked(!showDifficultySubClicked)
+        }
+        style={{
+          border: "none",
+          background: "transparent",
+        }}
+      >
+        {"👉 "}
+      </button>
+    </>
+  );
+
+  const difficultyColoredLink = (
+    // Don't add rel="noreferrer" to AtCoder links
+    // to allow AtCoder get the referral information.
+    // eslint-disable-next-line react/jsx-no-target-blank
+    <a
+      href={Url.formatProblemUrl(problemId, contestId)}
+      // Don't add rel="noreferrer" to AtCoder links
+      // to allow AtCoder get the referral information.
+      // eslint-disable-next-line react/jsx-no-target-blank
+      target="_blank"
+      rel="noopener"
+      className={ratingColorClass}
+    >
+      {problemTitle}
+    </a>
+  );
+  const difficultySymbol = (
     <>
       <DifficultyCircle
         id={uniqueId}
         problemModel={problemModel}
         userRatingInfo={userRatingInfo}
       />
-      {isExperimentalDifficulty ? (
-        <>
-          <span id={experimentalIconId} role="img" aria-label="experimental">
-            🧪
-          </span>
-          <Tooltip
-            placement="top"
-            target={experimentalIconId}
-            isOpen={tooltipOpen}
-            toggle={(): void => setTooltipOpen(!tooltipOpen)}
-          >
-            This estimate is experimental.
-          </Tooltip>
-        </>
-      ) : null}
-      {
-        // Don't add rel="noreferrer" to AtCoder links
-        // to allow AtCoder get the referral information.
-        // eslint-disable-next-line react/jsx-no-target-blank
-        <a
-          href={Url.formatProblemUrl(problemId, contestId)}
-          // Don't add rel="noreferrer" to AtCoder links
-          // to allow AtCoder get the referral information.
-          // eslint-disable-next-line react/jsx-no-target-blank
-          target="_blank"
-          rel="noopener"
-          className={ratingColorClass}
-        >
-          {problemTitle}
-        </a>
-      }
+      {isExperimentalDifficulty ? experimentalDifficultySymbol : null}
     </>
   );
+
+  switch (showDifficultyMode) {
+    case ShowDifficultyMode.None:
+      return <>{simpleLink}</>;
+    case ShowDifficultyMode.Full:
+      return (
+        <>
+          {difficultySymbol}
+          {difficultyColoredLink}
+        </>
+      );
+    case ShowDifficultyMode.Sub:
+      return (
+        <>
+          {showDifficultySubSymbol}
+          {showDifficultySubClicked ? difficultySymbol : null}
+          {showDifficultySubClicked ? difficultyColoredLink : simpleLink}
+        </>
+      );
+  }
 };
diff --git a/atcoder-problems-frontend/src/components/SubmissionListTable.tsx b/atcoder-problems-frontend/src/components/SubmissionListTable.tsx
index 4187227ef..9076294ef 100644
--- a/atcoder-problems-frontend/src/components/SubmissionListTable.tsx
+++ b/atcoder-problems-frontend/src/components/SubmissionListTable.tsx
@@ -7,6 +7,7 @@ import { formatMomentDateTime, parseSecond } from "../utils/DateUtil";
 import { isAccepted } from "../utils";
 import * as Url from "../utils/Url";
 import { RatingInfo } from "../utils/RatingInfo";
+import { ShowDifficultyMode } from "../utils/ShowDifficultyMode";
 import { ProblemLink } from "./ProblemLink";
 import {
   ListPaginationPanel,
@@ -130,7 +131,7 @@ export const SubmissionListTable: React.FC<Props> = (props) => {
             isExperimentalDifficulty={
               problemModels?.get(problem_id)?.is_experimental
             }
-            showDifficulty={true}
+            showDifficultyMode={ShowDifficultyMode.Full}
             problemId={problem_id}
             problemIndex={problemIndexMap.get(problem_id) || ""}
             problemName={name || ""}
diff --git a/atcoder-problems-frontend/src/pages/Internal/MyAccountPage/ResetProgress.tsx b/atcoder-problems-frontend/src/pages/Internal/MyAccountPage/ResetProgress.tsx
index 4cf20a117..73bba2aa8 100644
--- a/atcoder-problems-frontend/src/pages/Internal/MyAccountPage/ResetProgress.tsx
+++ b/atcoder-problems-frontend/src/pages/Internal/MyAccountPage/ResetProgress.tsx
@@ -6,6 +6,7 @@ import { ProblemSearchBox } from "../../../components/ProblemSearchBox";
 import { ProblemLink } from "../../../components/ProblemLink";
 import { formatMomentDateTime, parseSecond } from "../../../utils/DateUtil";
 import { useProgressResetList } from "../../../api/InternalAPIClient";
+import { ShowDifficultyMode } from "../../../utils/ShowDifficultyMode";
 import { addResetProgress, deleteResetProgress } from "./ApiClient";
 
 export const ResetProgress: React.FC = () => {
@@ -50,6 +51,7 @@ export const ResetProgress: React.FC = () => {
                     <td>
                       {problem ? (
                         <ProblemLink
+                          showDifficultyMode={ShowDifficultyMode.None}
                           problemId={problem.id}
                           contestId={problem.contest_id}
                           problemIndex={problem.problem_index}
diff --git a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/DraggableContestConfigProblemTable/ProblemCell.tsx b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/DraggableContestConfigProblemTable/ProblemCell.tsx
index 3d1b74abe..70665b240 100644
--- a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/DraggableContestConfigProblemTable/ProblemCell.tsx
+++ b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/DraggableContestConfigProblemTable/ProblemCell.tsx
@@ -3,6 +3,7 @@ import { ProblemLink } from "../../../../components/ProblemLink";
 import Problem from "../../../../interfaces/Problem";
 import ProblemModel from "../../../../interfaces/ProblemModel";
 import { ProblemId } from "../../../../interfaces/Status";
+import { ShowDifficultyMode } from "../../../../utils/ShowDifficultyMode";
 
 interface ProblemCellProps {
   problemId: ProblemId;
@@ -24,7 +25,7 @@ export const ProblemCell: React.FC<ProblemCellProps> = ({
           contestId={problem.contest_id}
           problemIndex={problem.problem_index}
           problemName={problem.name}
-          showDifficulty={true}
+          showDifficultyMode={ShowDifficultyMode.Full}
           problemModel={problemModel}
           isExperimentalDifficulty={problemModel?.is_experimental}
         />
diff --git a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/ContestTable.tsx b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/ContestTable.tsx
index 59d8f8f0d..0112befeb 100644
--- a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/ContestTable.tsx
+++ b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/ContestTable.tsx
@@ -23,6 +23,7 @@ import {
   makeBotRunners,
 } from "../../../../utils/RatingSystem";
 import { VirtualContestItem, VirtualContestProblem } from "../../types";
+import { ShowDifficultyMode } from "../../../../utils/ShowDifficultyMode";
 import { ContestTableRow } from "./ContestTableRow";
 import { FirstAcceptanceRow } from "./FirstAcceptanceRow";
 import {
@@ -260,6 +261,7 @@ export const ContestTable = (props: Props) => {
               <th key={i}>
                 {p.contestId && p.title ? (
                   <ProblemLink
+                    showDifficultyMode={ShowDifficultyMode.None}
                     problemId={p.id}
                     contestId={p.contestId}
                     problemName={`${i + 1}`}
diff --git a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/LockoutContestTable/index.tsx b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/LockoutContestTable/index.tsx
index 164dd6489..a52729b54 100644
--- a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/LockoutContestTable/index.tsx
+++ b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/LockoutContestTable/index.tsx
@@ -6,6 +6,7 @@ import { UserNameLabel } from "../../../../../components/UserNameLabel";
 import { ProblemId, UserId } from "../../../../../interfaces/Status";
 import { isAccepted } from "../../../../../utils";
 import { VirtualContestProblem } from "../../../types";
+import { ShowDifficultyMode } from "../../../../../utils/ShowDifficultyMode";
 
 const CARD_COLORS = ["success", "danger", "warning", "info", "primary"];
 
@@ -119,6 +120,7 @@ export const LockoutContestTable: React.FC<Props> = (props) => {
                     <CardHeader tag="h3">
                       {problem.title && problem.contestId ? (
                         <ProblemLink
+                          showDifficultyMode={ShowDifficultyMode.None}
                           problemId={problem.item.id}
                           contestId={problem.contestId}
                           problemName={problem.title}
diff --git a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/TrainingContestTable/SmallScoreCell.tsx b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/TrainingContestTable/SmallScoreCell.tsx
index 386f51a80..2d31aae0b 100644
--- a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/TrainingContestTable/SmallScoreCell.tsx
+++ b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/TrainingContestTable/SmallScoreCell.tsx
@@ -5,6 +5,7 @@ import { ScoreCell } from "../ScoreCell";
 import { ProblemLink } from "../../../../../components/ProblemLink";
 import { formatProblemUrl } from "../../../../../utils/Url";
 import { NewTabLink } from "../../../../../components/NewTabLink";
+import { ShowDifficultyMode } from "../../../../../utils/ShowDifficultyMode";
 
 interface Props {
   problem: {
@@ -47,6 +48,7 @@ export const SmallScoreCell: React.FC<Props> = (props) => {
           <div className="small-score-cell-tooltip">
             {problem.contestId && problem.title ? (
               <ProblemLink
+                showDifficultyMode={ShowDifficultyMode.None}
                 problemId={problem.id}
                 contestId={problem.contestId}
                 problemName={problem.title}
diff --git a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/index.tsx b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/index.tsx
index 39d97bdef..9d933528d 100644
--- a/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/index.tsx
+++ b/atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/index.tsx
@@ -50,6 +50,7 @@ import { ProblemLink } from "../../../../components/ProblemLink";
 import { joinContest, leaveContest } from "../ApiClient";
 import { GoogleCalendarButton } from "../../../../components/GoogleCalendarButton";
 import { ProblemId, UserId } from "../../../../interfaces/Status";
+import { ShowDifficultyMode } from "../../../../utils/ShowDifficultyMode";
 import { constructPointOverrideMap, ContestTable } from "./ContestTable";
 import { LockoutContestTable } from "./LockoutContestTable";
 import { TrainingContestTable } from "./TrainingContestTable";
@@ -131,6 +132,7 @@ const Problems = (props: {
                   <th className="text-center">
                     {p.contestId && p.title ? (
                       <ProblemLink
+                        showDifficultyMode={ShowDifficultyMode.None}
                         problemId={p.id}
                         contestId={p.contestId}
                         problemName={`${i + 1}`}
@@ -142,6 +144,7 @@ const Problems = (props: {
                   <td>
                     {p.contestId && p.title ? (
                       <ProblemLink
+                        showDifficultyMode={ShowDifficultyMode.None}
                         problemId={p.id}
                         contestId={p.contestId}
                         problemName={p.title}
diff --git a/atcoder-problems-frontend/src/pages/ListPage/ListTable.tsx b/atcoder-problems-frontend/src/pages/ListPage/ListTable.tsx
index 35dd95b49..0afefdb82 100644
--- a/atcoder-problems-frontend/src/pages/ListPage/ListTable.tsx
+++ b/atcoder-problems-frontend/src/pages/ListPage/ListTable.tsx
@@ -42,6 +42,7 @@ import {
   useProblemModelMap,
   useRatingInfo,
 } from "../../api/APIClient";
+import { ShowDifficultyMode } from "../../utils/ShowDifficultyMode";
 
 export const INF_POINT = 1e18;
 
@@ -255,7 +256,7 @@ export const ListTable: React.FC<Props> = (props) => {
       dataFormat: function DataFormat(_, row): React.ReactElement {
         return (
           <ProblemLink
-            showDifficulty={true}
+            showDifficultyMode={ShowDifficultyMode.Full}
             isExperimentalDifficulty={row.problemModel?.is_experimental}
             problemId={row.mergedProblem.id}
             problemName={row.title}
diff --git a/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx b/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx
index 7b7e0753f..9258dfc5d 100644
--- a/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx
+++ b/atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx
@@ -23,12 +23,13 @@ import { SubmitTimespan } from "../../components/SubmitTimespan";
 import { RatingInfo } from "../../utils/RatingInfo";
 import { ProblemPoint } from "../../components/Problempoint";
 import { classifyContest } from "../../utils/ContestClassifier";
+import { ShowDifficultyMode } from "../../utils/ShowDifficultyMode";
 
 interface Props {
   contests: Contest[];
   contestToProblems: Map<string, MergedProblem[]>;
   hideCompletedContest: boolean;
-  showDifficulty: boolean;
+  showDifficultyMode: ShowDifficultyMode;
   colorMode: ColorMode;
   title: string;
   statusLabelMap: Map<ProblemId, ProblemStatus>;
@@ -181,7 +182,7 @@ const AtCoderRegularTableSFC: React.FC<Props> = (props) => {
                         !!model && model.is_experimental
                       }
                       showDifficultyUnavailable
-                      showDifficulty={props.showDifficulty}
+                      showDifficultyMode={props.showDifficultyMode}
                       contestId={contest.id}
                       problemId={problem.problem.id}
                       problemIndex={problem.problem.problem_index}
diff --git a/atcoder-problems-frontend/src/pages/TablePage/ContestTable.tsx b/atcoder-problems-frontend/src/pages/TablePage/ContestTable.tsx
index 1144a4219..92268a0c5 100644
--- a/atcoder-problems-frontend/src/pages/TablePage/ContestTable.tsx
+++ b/atcoder-problems-frontend/src/pages/TablePage/ContestTable.tsx
@@ -11,12 +11,13 @@ import { SubmitTimespan } from "../../components/SubmitTimespan";
 import { RatingInfo } from "../../utils/RatingInfo";
 import { isRatedContest } from "../../utils/ContestClassifier";
 import { ProblemPoint } from "../../components/Problempoint";
+import { ShowDifficultyMode } from "../../utils/ShowDifficultyMode";
 
 interface Props {
   contests: Contest[];
   contestToProblems: Map<string, MergedProblem[]>;
   hideCompletedContest: boolean;
-  showDifficulty: boolean;
+  showDifficultyMode: ShowDifficultyMode;
   colorMode: ColorMode;
   statusLabelMap: Map<ProblemId, ProblemStatus>;
   showPenalties: boolean;
@@ -118,7 +119,7 @@ export const ContestTable: React.FC<Props> = (props) => {
                               contest,
                               problemInfo.length
                             )}
-                            showDifficulty={props.showDifficulty}
+                            showDifficultyMode={props.showDifficultyMode}
                             problemId={problem.id}
                             contestId={contest.id}
                             problemIndex={problem.problem_index}
diff --git a/atcoder-problems-frontend/src/pages/TablePage/Options.tsx b/atcoder-problems-frontend/src/pages/TablePage/Options.tsx
index 7106b11e6..132c6edc4 100644
--- a/atcoder-problems-frontend/src/pages/TablePage/Options.tsx
+++ b/atcoder-problems-frontend/src/pages/TablePage/Options.tsx
@@ -14,12 +14,13 @@ import {
 } from "reactstrap";
 import { HelpBadgeTooltip } from "../../components/HelpBadgeTooltip";
 import { ColorMode } from "../../utils/TableColor";
+import { ShowDifficultyMode } from "../../utils/ShowDifficultyMode";
 
 interface Props {
   hideCompletedContest: boolean;
   toggleHideCompletedContest: () => void;
-  showDifficulties: boolean;
-  toggleShowDifficulties: () => void;
+  showDifficultyMode: ShowDifficultyMode;
+  setShowDifficultyMode: (showDifficultyMode: ShowDifficultyMode) => void;
   colorMode: ColorMode;
   setColorMode: (colorMode: ColorMode) => void;
   showPenalties: boolean;
@@ -46,17 +47,43 @@ export const Options: React.FC<Props> = (props) => {
             />
           </Label>
         </FormGroup>
+        <UncontrolledDropdown>
+          <DropdownToggle caret>
+            {
+              {
+                [ShowDifficultyMode.None]: "None",
+                [ShowDifficultyMode.Full]: "Full",
+                [ShowDifficultyMode.Sub]: "Sub",
+              }[props.showDifficultyMode]
+            }
+          </DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem header>Show Difficulty Mode</DropdownItem>
+            <DropdownItem
+              onClick={(): void =>
+                props.setShowDifficultyMode(ShowDifficultyMode.None)
+              }
+            >
+              None
+            </DropdownItem>
+            <DropdownItem
+              onClick={(): void =>
+                props.setShowDifficultyMode(ShowDifficultyMode.Full)
+              }
+            >
+              Full
+            </DropdownItem>
+            <DropdownItem
+              onClick={(): void =>
+                props.setShowDifficultyMode(ShowDifficultyMode.Sub)
+              }
+            >
+              Sub
+            </DropdownItem>
+          </DropdownMenu>
+        </UncontrolledDropdown>
         <FormGroup check inline>
-          <Label check>
-            <CustomInput
-              type="switch"
-              id="showDifficulties"
-              label="Show Difficulty"
-              checked={props.showDifficulties}
-              onChange={props.toggleShowDifficulties}
-            />
-          </Label>
-          &nbsp;
+          &nbsp; Show Difficulty &nbsp;
           <HelpBadgeTooltip id="difficulty">
             Internal rating to have 50% Solve Probability
           </HelpBadgeTooltip>
diff --git a/atcoder-problems-frontend/src/pages/TablePage/index.tsx b/atcoder-problems-frontend/src/pages/TablePage/index.tsx
index e1c899941..dfa1655ca 100644
--- a/atcoder-problems-frontend/src/pages/TablePage/index.tsx
+++ b/atcoder-problems-frontend/src/pages/TablePage/index.tsx
@@ -22,6 +22,7 @@ import {
   ContestCategory,
 } from "../../utils/ContestClassifier";
 import { getLikeContestCategory } from "../../utils/LikeContestUtils";
+import { ShowDifficultyMode } from "../../utils/ShowDifficultyMode";
 import { TableTabButtons } from "./TableTab";
 import { Options } from "./Options";
 import { ContestTable } from "./ContestTable";
@@ -41,9 +42,9 @@ export const TablePage: React.FC<OuterProps> = (props) => {
     "hideCompletedContest",
     false
   );
-  const [showDifficulty, setShowDifficulty] = useLocalStorage(
-    "showDifficulty",
-    true
+  const [showDifficultyMode, setShowDifficultyMode] = useLocalStorage(
+    "showDifficultyMode",
+    ShowDifficultyMode.None
   );
   const [colorMode, setColorMode] = useLocalStorage(
     "colorMode",
@@ -104,8 +105,8 @@ export const TablePage: React.FC<OuterProps> = (props) => {
         toggleHideCompletedContest={(): void =>
           setHideCompletedContest(!hideCompletedContest)
         }
-        showDifficulties={showDifficulty}
-        toggleShowDifficulties={(): void => setShowDifficulty(!showDifficulty)}
+        showDifficultyMode={showDifficultyMode}
+        setShowDifficultyMode={setShowDifficultyMode}
         colorMode={colorMode}
         setColorMode={setColorMode}
         showPenalties={showPenalties}
@@ -135,7 +136,7 @@ export const TablePage: React.FC<OuterProps> = (props) => {
         "PAST",
       ].includes(activeTab) ? (
         <AtCoderRegularTable
-          showDifficulty={showDifficulty}
+          showDifficultyMode={showDifficultyMode}
           hideCompletedContest={hideCompletedContest}
           colorMode={colorMode}
           contests={filteredContests}
@@ -158,7 +159,7 @@ export const TablePage: React.FC<OuterProps> = (props) => {
         />
       ) : (
         <ContestTable
-          showDifficulty={showDifficulty}
+          showDifficultyMode={showDifficultyMode}
           contests={filteredContests}
           title={activeTab}
           contestToProblems={contestToProblems}
diff --git a/atcoder-problems-frontend/src/pages/TrainingPage/SingleCourseView.tsx b/atcoder-problems-frontend/src/pages/TrainingPage/SingleCourseView.tsx
index e3bfd69bc..e8da7cc43 100644
--- a/atcoder-problems-frontend/src/pages/TrainingPage/SingleCourseView.tsx
+++ b/atcoder-problems-frontend/src/pages/TrainingPage/SingleCourseView.tsx
@@ -11,6 +11,7 @@ import { NewTabLink } from "../../components/NewTabLink";
 import * as Url from "../../utils/Url";
 import { ProblemLink } from "../../components/ProblemLink";
 import { SinglePieChart } from "../../components/SinglePieChart";
+import { ShowDifficultyMode } from "../../utils/ShowDifficultyMode";
 
 interface ProblemTableProps {
   problems: Problem[];
@@ -56,7 +57,11 @@ const ProblemTable: React.FC<ProblemTableProps> = (props) => {
                   contestId={problem.contest_id}
                   problemModel={model}
                   isExperimentalDifficulty={!!model && model.is_experimental}
-                  showDifficulty={submission !== undefined}
+                  showDifficultyMode={
+                    submission !== undefined
+                      ? ShowDifficultyMode.Full
+                      : ShowDifficultyMode.None
+                  }
                   showDifficultyUnavailable
                 />
               </td>
diff --git a/atcoder-problems-frontend/src/pages/UserPage/Recommendations/index.tsx b/atcoder-problems-frontend/src/pages/UserPage/Recommendations/index.tsx
index 9c556870e..9fe27a6ea 100644
--- a/atcoder-problems-frontend/src/pages/UserPage/Recommendations/index.tsx
+++ b/atcoder-problems-frontend/src/pages/UserPage/Recommendations/index.tsx
@@ -34,6 +34,7 @@ import {
   getLastSolvedTimeMap,
   getMaximumExcludeElapsedSecond,
 } from "../../../utils/LastSolvedTime";
+import { ShowDifficultyMode } from "../../../utils/ShowDifficultyMode";
 import { recommendProblems } from "./RecommendProblems";
 import { RecommendController, RecommendOption } from "./RecommendController";
 
@@ -162,7 +163,7 @@ export const Recommendations = (props: Props) => {
             ): React.ReactElement => (
               <ProblemLink
                 isExperimentalDifficulty={is_experimental}
-                showDifficulty={true}
+                showDifficultyMode={ShowDifficultyMode.Full}
                 problemId={id}
                 problemName={name}
                 contestId={contest_id}
diff --git a/atcoder-problems-frontend/src/utils/LocalStorage.tsx b/atcoder-problems-frontend/src/utils/LocalStorage.tsx
index 7cfa14de2..acf659bcb 100644
--- a/atcoder-problems-frontend/src/utils/LocalStorage.tsx
+++ b/atcoder-problems-frontend/src/utils/LocalStorage.tsx
@@ -5,6 +5,7 @@ const LocalStorageKeys = [
   "theme",
   "contestTableTab",
   "showDifficulty",
+  "showDifficultyMode",
   "colorMode",
   "showPenalties",
   "hideCompletedContest",
diff --git a/atcoder-problems-frontend/src/utils/ShowDifficultyMode.ts b/atcoder-problems-frontend/src/utils/ShowDifficultyMode.ts
new file mode 100644
index 000000000..2e2481505
--- /dev/null
+++ b/atcoder-problems-frontend/src/utils/ShowDifficultyMode.ts
@@ -0,0 +1,5 @@
+export enum ShowDifficultyMode {
+  None = "None",
+  Full = "Full",
+  Sub = "Sub",
+}