diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index 39ebd03..58794d6 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -13,29 +13,24 @@ import {
   UnorderedList,
   useClipboard,
   useToast,
-  VStack,
 } from "@chakra-ui/react";
 import {
   ArrowBackIcon,
   CheckIcon,
   DownloadIcon,
   LinkIcon,
-  WarningTwoIcon,
 } from "@chakra-ui/icons";
-import { FaBug } from "react-icons/fa";
 import { MdPause, MdPlayArrow } from "react-icons/md";
 import { Link } from "react-router-dom";
 
 import { getBestImageUrlForLayer } from "../components/OutfitPreview";
-import HTML5Badge, {
-  GlitchBadgeLayout,
-  layerUsesHTML5,
-} from "../components/HTML5Badge";
+import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge";
 import PosePicker from "./PosePicker";
 import SpeciesColorPicker from "../components/SpeciesColorPicker";
 import { loadImage, useLocalStorage } from "../util";
 import useCurrentUser from "../components/useCurrentUser";
 import useOutfitAppearance from "../components/useOutfitAppearance";
+import OutfitKnownGlitchesBadge from "./OutfitKnownGlitchesBadge";
 
 /**
  * OutfitControls is the set of controls layered over the outfit preview, to
@@ -280,114 +275,6 @@ function OutfitHTML5Badge({ appearance }) {
   );
 }
 
-function OutfitKnownGlitchesBadge({ appearance }) {
-  const glitchMessages = [];
-
-  const { petAppearance, items } = appearance;
-
-  // Look for UC/Invisible/etc incompatibilities that we hid, that we should
-  // just mark Incompatible someday instead.
-  //
-  // HACK: Most of this logic is copy-pasted from `useOutfitAppearance`.
-  const petOccupiedZoneIds = new Set(
-    petAppearance?.layers.map((l) => l.zone.id)
-  );
-  const petRestrictedZoneIds = new Set(
-    petAppearance?.restrictedZones.map((z) => z.id)
-  );
-  const petOccupiedOrRestrictedZoneIds = new Set([
-    ...petOccupiedZoneIds,
-    ...petRestrictedZoneIds,
-  ]);
-  for (const item of items) {
-    const itemHasZoneRestrictedByPet = item.appearance.layers.some(
-      (layer) =>
-        layer.bodyId !== "0" &&
-        petOccupiedOrRestrictedZoneIds.has(layer.zone.id)
-    );
-    if (itemHasZoneRestrictedByPet) {
-      glitchMessages.push(
-        <Box key={`uc-conflict-for-item-${item.id}`}>
-          <i>{item.name}</i> isn't actually compatible with this special pet.
-          We're still showing the old behavior, which is to hide the item.
-          Fixing this is in our todo list, sorry for the confusing UI!
-        </Box>
-      );
-    }
-  }
-
-  // Look for items with the OFFICIAL_SVG_IS_INCORRECT glitch.
-  for (const item of items) {
-    const itemHasOfficialSvgIsIncorrect = item.appearance.layers.some((l) =>
-      (l.knownGlitches || []).includes("OFFICIAL_SVG_IS_INCORRECT")
-    );
-    if (itemHasOfficialSvgIsIncorrect) {
-      glitchMessages.push(
-        <Box key={`official-svg-is-incorrect-for-item-${item.id}`}>
-          There's a glitch in the art for <i>{item.name}</i> that prevents us
-          from showing the full-scale SVG version of the image. Instead, we're
-          showing a PNG, which might look a bit blurry on larger screens.
-        </Box>
-      );
-    }
-  }
-
-  // Look for Dyeworks items that aren't converted yet.
-  for (const item of items) {
-    const itemIsDyeworks = item.name.includes("Dyeworks");
-    const itemIsConverted = item.appearance.layers.every(layerUsesHTML5);
-
-    if (itemIsDyeworks && !itemIsConverted) {
-      glitchMessages.push(
-        <Box key={`unconverted-dyeworks-warning-for-item-${item.id}`}>
-          <i>{item.name}</i> isn't converted to HTML5 yet, and our Classic DTI
-          code often shows old Dyeworks items in the wrong color. Once it's
-          converted, we'll display it correctly!
-        </Box>
-      );
-    }
-  }
-
-  // Check whether the pet has OFFICIAL_SVG_IS_INCORRECT.
-  const petLayers = petAppearance?.layers || [];
-  for (const layer of petLayers) {
-    const layerHasOfficialSvgIsIncorrect = (layer.knownGlitches || []).includes(
-      "OFFICIAL_SVG_IS_INCORRECT"
-    );
-    if (layerHasOfficialSvgIsIncorrect) {
-      glitchMessages.push(
-        <Box key={`official-svg-is-incorrect-for-pet-layer-${layer.id}`}>
-          There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
-          zone that prevents us from showing the full-scale SVG version of the
-          image. Instead, we're showing a PNG, which might look a bit blurry on
-          larger screens.
-        </Box>
-      );
-    }
-  }
-
-  if (glitchMessages.length === 0) {
-    return null;
-  }
-
-  return (
-    <GlitchBadgeLayout
-      aria-label="Has known glitches"
-      tooltipLabel={
-        <Box>
-          <Box as="header" fontWeight="bold" fontSize="sm" marginBottom="1">
-            Known glitches
-          </Box>
-          <VStack spacing="1em">{glitchMessages}</VStack>
-        </Box>
-      }
-    >
-      <WarningTwoIcon fontSize="xs" marginRight="1" />
-      <FaBug />
-    </GlitchBadgeLayout>
-  );
-}
-
 /**
  * BackButton takes you back home, or to Your Outfits if this outfit is yours.
  */
diff --git a/src/app/WardrobePage/OutfitKnownGlitchesBadge.js b/src/app/WardrobePage/OutfitKnownGlitchesBadge.js
new file mode 100644
index 0000000..f3d3cf0
--- /dev/null
+++ b/src/app/WardrobePage/OutfitKnownGlitchesBadge.js
@@ -0,0 +1,115 @@
+import React from "react";
+import { Box, VStack } from "@chakra-ui/react";
+import { WarningTwoIcon } from "@chakra-ui/icons";
+import { FaBug } from "react-icons/fa";
+import { GlitchBadgeLayout, layerUsesHTML5 } from "../components/HTML5Badge";
+
+function OutfitKnownGlitchesBadge({ appearance }) {
+  const glitchMessages = [];
+
+  const { petAppearance, items } = appearance;
+
+  // Look for UC/Invisible/etc incompatibilities that we hid, that we should
+  // just mark Incompatible someday instead.
+  //
+  // HACK: Most of this logic is copy-pasted from `useOutfitAppearance`.
+  const petOccupiedZoneIds = new Set(
+    petAppearance?.layers.map((l) => l.zone.id)
+  );
+  const petRestrictedZoneIds = new Set(
+    petAppearance?.restrictedZones.map((z) => z.id)
+  );
+  const petOccupiedOrRestrictedZoneIds = new Set([
+    ...petOccupiedZoneIds,
+    ...petRestrictedZoneIds,
+  ]);
+  for (const item of items) {
+    const itemHasZoneRestrictedByPet = item.appearance.layers.some(
+      (layer) =>
+        layer.bodyId !== "0" &&
+        petOccupiedOrRestrictedZoneIds.has(layer.zone.id)
+    );
+    if (itemHasZoneRestrictedByPet) {
+      glitchMessages.push(
+        <Box key={`uc-conflict-for-item-${item.id}`}>
+          <i>{item.name}</i> isn't actually compatible with this special pet.
+          We're still showing the old behavior, which is to hide the item.
+          Fixing this is in our todo list, sorry for the confusing UI!
+        </Box>
+      );
+    }
+  }
+
+  // Look for items with the OFFICIAL_SVG_IS_INCORRECT glitch.
+  for (const item of items) {
+    const itemHasOfficialSvgIsIncorrect = item.appearance.layers.some((l) =>
+      (l.knownGlitches || []).includes("OFFICIAL_SVG_IS_INCORRECT")
+    );
+    if (itemHasOfficialSvgIsIncorrect) {
+      glitchMessages.push(
+        <Box key={`official-svg-is-incorrect-for-item-${item.id}`}>
+          There's a glitch in the art for <i>{item.name}</i> that prevents us
+          from showing the full-scale SVG version of the image. Instead, we're
+          showing a PNG, which might look a bit blurry on larger screens.
+        </Box>
+      );
+    }
+  }
+
+  // Look for Dyeworks items that aren't converted yet.
+  for (const item of items) {
+    const itemIsDyeworks = item.name.includes("Dyeworks");
+    const itemIsConverted = item.appearance.layers.every(layerUsesHTML5);
+
+    if (itemIsDyeworks && !itemIsConverted) {
+      glitchMessages.push(
+        <Box key={`unconverted-dyeworks-warning-for-item-${item.id}`}>
+          <i>{item.name}</i> isn't converted to HTML5 yet, and our Classic DTI
+          code often shows old Dyeworks items in the wrong color. Once it's
+          converted, we'll display it correctly!
+        </Box>
+      );
+    }
+  }
+
+  // Check whether the pet has OFFICIAL_SVG_IS_INCORRECT.
+  const petLayers = petAppearance?.layers || [];
+  for (const layer of petLayers) {
+    const layerHasOfficialSvgIsIncorrect = (layer.knownGlitches || []).includes(
+      "OFFICIAL_SVG_IS_INCORRECT"
+    );
+    if (layerHasOfficialSvgIsIncorrect) {
+      glitchMessages.push(
+        <Box key={`official-svg-is-incorrect-for-pet-layer-${layer.id}`}>
+          There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
+          zone that prevents us from showing the full-scale SVG version of the
+          image. Instead, we're showing a PNG, which might look a bit blurry on
+          larger screens.
+        </Box>
+      );
+    }
+  }
+
+  if (glitchMessages.length === 0) {
+    return null;
+  }
+
+  return (
+    <GlitchBadgeLayout
+      aria-label="Has known glitches"
+      tooltipLabel={
+        <Box>
+          <Box as="header" fontWeight="bold" fontSize="sm" marginBottom="1">
+            Known glitches
+          </Box>
+          <VStack spacing="1em">{glitchMessages}</VStack>
+        </Box>
+      }
+    >
+      <WarningTwoIcon fontSize="xs" marginRight="1" />
+      <FaBug />
+    </GlitchBadgeLayout>
+  );
+}
+
+export default OutfitKnownGlitchesBadge;