diff --git a/app/src/WardrobePage.js b/app/src/WardrobePage.js
index 2e569f1..55e7f58 100644
--- a/app/src/WardrobePage.js
+++ b/app/src/WardrobePage.js
@@ -215,22 +215,7 @@ function OutfitHeading() {
               <EditablePreview />
               <EditableInput />
               {!isEditing && (
-                <PseudoBox
-                  d="inline-block"
-                  opacity="0"
-                  transition="opacity 0.5s"
-                  _groupHover={{ opacity: "1" }}
-                  onClick={onRequestEdit}
-                  position="absolute"
-                >
-                  <IconButton
-                    icon="edit"
-                    variant="link"
-                    color="green.600"
-                    aria-label="Edit outfit name"
-                    title="Edit outfit name"
-                  />
-                </PseudoBox>
+                <OutfitNameEditButton onRequestEdit={onRequestEdit} />
               )}
             </>
           )}
@@ -240,6 +225,27 @@ function OutfitHeading() {
   );
 }
 
+function OutfitNameEditButton({ onRequestEdit }) {
+  return (
+    <PseudoBox
+      d="inline-block"
+      opacity="0"
+      transition="opacity 0.5s"
+      _groupHover={{ opacity: "1" }}
+      onClick={onRequestEdit}
+      position="absolute"
+    >
+      <IconButton
+        icon="edit"
+        variant="link"
+        color="green.600"
+        aria-label="Edit outfit name"
+        title="Edit outfit name"
+      />
+    </PseudoBox>
+  );
+}
+
 function Heading1({ children, ...props }) {
   return (
     <Heading fontFamily="Delicious" fontWeight="800" size="2xl" {...props}>