diff --git a/components/common/SubText.tsx b/components/common/SubText.tsx
new file mode 100644
index 000000000..93b6f1d23
--- /dev/null
+++ b/components/common/SubText.tsx
@@ -0,0 +1,24 @@
+import { Box } from "@chakra-ui/react";
+import { useMyTheme } from "lib/useMyTheme";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const SubText: React.FC<Props> = ({ children }) => {
+  const { themeColorShade } = useMyTheme();
+  return (
+    <Box
+      fontSize="xs"
+      textColor={themeColorShade}
+      textTransform="uppercase"
+      letterSpacing="wider"
+      lineHeight="1rem"
+      fontWeight="medium"
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default SubText;
diff --git a/components/plans/StageSelector.tsx b/components/plans/StageSelector.tsx
index 126ad7438..bebeec856 100644
--- a/components/plans/StageSelector.tsx
+++ b/components/plans/StageSelector.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Flex,
   HStack,
   Image,
   Radio,
@@ -9,6 +10,7 @@ import {
 import { Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import ModeImage from "components/common/ModeImage";
+import SubText from "components/common/SubText";
 // @ts-ignore
 import salmonRunHighTide from "lib/assets/SalmonRunHighTide.svg";
 // @ts-ignore
@@ -46,45 +48,75 @@ const StageSelector: React.FC<StageSelectorProps> = ({
       {currentBackground.tide ? (
         <>
           <HStack my={4} display="flex" justifyContent="center">
-            <Image
-              w={8}
-              h={8}
-              src={salmonRunLowTide}
-              cursor="pointer"
-              style={{
-                filter:
-                  currentBackground.tide === "low"
-                    ? undefined
-                    : "grayscale(100%)",
-              }}
-              onClick={() => changeTide("low")}
-            />
-            <Image
-              w={8}
-              h={8}
-              src={salmonRunMidTide}
-              cursor="pointer"
-              style={{
-                filter:
-                  currentBackground.tide === "mid"
-                    ? undefined
-                    : "grayscale(100%)",
-              }}
-              onClick={() => changeTide("mid")}
-            />
-            <Image
-              w={8}
-              h={8}
-              src={salmonRunHighTide}
-              cursor="pointer"
-              style={{
-                filter:
-                  currentBackground.tide === "high"
-                    ? undefined
-                    : "grayscale(100%)",
-              }}
-              onClick={() => changeTide("high")}
-            />
+            <Flex flexDir="column" alignItems="center">
+              <Image
+                w={8}
+                h={8}
+                mb={1}
+                src={salmonRunLowTide}
+                cursor="pointer"
+                style={{
+                  filter:
+                    currentBackground.tide === "low"
+                      ? undefined
+                      : "grayscale(100%)",
+                }}
+                onClick={() => changeTide("low")}
+              />
+              {currentBackground.tide === "low" ? (
+                <SubText>
+                  <Trans>Low</Trans>
+                </SubText>
+              ) : (
+                <Box h={4} />
+              )}
+            </Flex>
+            <Flex flexDir="column" alignItems="center">
+              <Image
+                w={8}
+                h={8}
+                mb={1}
+                src={salmonRunMidTide}
+                cursor="pointer"
+                style={{
+                  filter:
+                    currentBackground.tide === "mid"
+                      ? undefined
+                      : "grayscale(100%)",
+                }}
+                onClick={() => changeTide("mid")}
+              />
+              {currentBackground.tide === "mid" ? (
+                <SubText>
+                  <Trans>Mid</Trans>
+                </SubText>
+              ) : (
+                <Box h={4} />
+              )}
+            </Flex>
+            <Flex flexDir="column" alignItems="center">
+              <Image
+                w={8}
+                h={8}
+                mb={1}
+                src={salmonRunHighTide}
+                cursor="pointer"
+                style={{
+                  filter:
+                    currentBackground.tide === "high"
+                      ? undefined
+                      : "grayscale(100%)",
+                }}
+                onClick={() => changeTide("high")}
+              />
+              {currentBackground.tide === "high" ? (
+                <SubText>
+                  <Trans>High</Trans>
+                </SubText>
+              ) : (
+                <Box h={4} />
+              )}
+            </Flex>
           </HStack>
         </>
       ) : (
diff --git a/components/u/AvatarWithInfo.tsx b/components/u/AvatarWithInfo.tsx
index 6787ffd7d..13d111352 100644
--- a/components/u/AvatarWithInfo.tsx
+++ b/components/u/AvatarWithInfo.tsx
@@ -10,6 +10,7 @@ import { t, Trans } from "@lingui/macro";
 import { LeagueType, RankedMode } from "@prisma/client";
 import ModeImage from "components/common/ModeImage";
 import MyLink from "components/common/MyLink";
+import SubText from "components/common/SubText";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
 import { getEmojiFlag } from "countries-list";
@@ -169,16 +170,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({
                         <Fragment key={type}>
                           <Flex align="center" justify="center" mx={2}>
                             <Box ml={2} color={gray}>
-                              <Box
-                                fontSize="xs"
-                                textColor={themeColorShade}
-                                textTransform="uppercase"
-                                letterSpacing="wider"
-                                lineHeight="1rem"
-                                fontWeight="medium"
-                              >
-                                {type}
-                              </Box>
+                              <SubText>{type}</SubText>
                               {peakLeaguePowers[type]}
                             </Box>
                           </Flex>