diff --git a/src/components/AddMapButton.js b/src/components/AddMapButton.js
index bf21560..175e3cb 100644
--- a/src/components/AddMapButton.js
+++ b/src/components/AddMapButton.js
@@ -6,7 +6,7 @@ import {
   Image as UIImage,
   Flex,
   Label,
-  Input
+  Input,
 } from "theme-ui";
 
 import Modal from "./Modal";
@@ -38,13 +38,13 @@ function AddMapButton({ onMapChanged }) {
     const file = event.target.files[0];
     const url = URL.createObjectURL(file);
     let image = new Image();
-    image.onload = function() {
+    image.onload = function () {
       mapDataRef.current = {
         file,
         rows,
         columns,
         width: image.width,
-        height: image.height
+        height: image.height,
       };
       setImageLoaded(true);
     };
@@ -85,7 +85,7 @@ function AddMapButton({ onMapChanged }) {
       <Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
         <Box
           as="form"
-          onSubmit={e => {
+          onSubmit={(e) => {
             e.preventDefault();
             handleDone();
           }}
@@ -106,7 +106,7 @@ function AddMapButton({ onMapChanged }) {
                 minHeight: "200px",
                 maxHeight: "500px",
                 objectFit: "contain",
-                borderRadius: "4px"
+                borderRadius: "4px",
               }}
               src={mapSource}
               onClick={openImageDialog}
@@ -119,7 +119,7 @@ function AddMapButton({ onMapChanged }) {
                   type="number"
                   name="rows"
                   value={rows}
-                  onChange={e => setRows(e.target.value)}
+                  onChange={(e) => setRows(e.target.value)}
                 />
               </Box>
               <Box mb={2} ml={1} sx={{ flexGrow: 1 }}>
@@ -128,7 +128,7 @@ function AddMapButton({ onMapChanged }) {
                   type="number"
                   name="columns"
                   value={columns}
-                  onChange={e => setColumns(e.target.value)}
+                  onChange={(e) => setColumns(e.target.value)}
                 />
               </Box>
             </Flex>
@@ -139,7 +139,7 @@ function AddMapButton({ onMapChanged }) {
             ) : (
               <Button
                 varient="primary"
-                onClick={e => {
+                onClick={(e) => {
                   e.preventDefault();
                   openImageDialog();
                 }}
diff --git a/src/components/Nickname.js b/src/components/Nickname.js
new file mode 100644
index 0000000..723fc36
--- /dev/null
+++ b/src/components/Nickname.js
@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import { Text, Box, Input, Button, Label, IconButton } from "theme-ui";
+
+import Modal from "./Modal";
+
+function Nickname({ nickname, allowChanging, onChange }) {
+  const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
+  function openModal() {
+    setIsChangeModalOpen(true);
+  }
+  function closeModal() {
+    setIsChangeModalOpen(false);
+  }
+
+  const [changedNickname, setChangedNickname] = useState(nickname);
+  function handleChangeSubmit(event) {
+    event.preventDefault();
+    if (allowChanging) {
+      onChange(changedNickname);
+      closeModal();
+    }
+  }
+
+  function handleChange(event) {
+    setChangedNickname(event.target.value);
+  }
+
+  return (
+    <>
+      <Text
+        my={1}
+        variant="caption"
+        sx={{
+          fontSize: 10,
+          cursor: allowChanging ? "pointer" : "default",
+          ":hover": allowChanging && {
+            color: "primary",
+          },
+          ":active": allowChanging && {
+            color: "secondary",
+          },
+          position: "relative",
+        }}
+        onClick={() => allowChanging && openModal()}
+      >
+        {nickname}
+        {allowChanging && (
+          <IconButton
+            sx={{
+              width: "10px",
+              height: "10px",
+              padding: 0,
+              margin: "2px",
+              position: "absolute",
+              bottom: "-2px",
+            }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="10"
+              viewBox="0 0 24 24"
+              width="10"
+              fill="currentcolor"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+            </svg>
+          </IconButton>
+        )}
+      </Text>
+      <Modal isOpen={isChangeModalOpen} onRequestClose={closeModal}>
+        <Box as="form" onSubmit={handleChangeSubmit}>
+          <Label htmlFor="nicknameChange">Change your nickname</Label>
+          <Input
+            id="nicknameChange"
+            value={changedNickname}
+            onChange={handleChange}
+            mt={1}
+            mb={3}
+          />
+          <Button disabled={!changedNickname}>Change</Button>
+        </Box>
+      </Modal>
+    </>
+  );
+}
+
+Nickname.defaultProps = {
+  allowChanging: false,
+  onChange: () => {},
+};
+
+export default Nickname;
diff --git a/src/components/Party.js b/src/components/Party.js
index 7b09886..0416bd1 100644
--- a/src/components/Party.js
+++ b/src/components/Party.js
@@ -2,6 +2,7 @@ import React from "react";
 import { Flex, Box, Text } from "theme-ui";
 
 import AddPartyMemberButton from "./AddPartyMemberButton";
+import Nickname from "./Nickname";
 
 function Party({ nickname, partyNicknames, gameId, onNicknameChange }) {
   return (
@@ -31,13 +32,13 @@ function Party({ nickname, partyNicknames, gameId, onNicknameChange }) {
           width: "100%",
         }}
       >
-        <Text my={1} variant="caption" sx={{ fontSize: 10 }}>
-          {nickname || ""} (you)
-        </Text>
+        <Nickname
+          nickname={nickname || ""}
+          allowChanging
+          onChange={onNicknameChange}
+        />
         {Object.entries(partyNicknames).map(([id, partyNickname]) => (
-          <Text my={1} variant="caption" sx={{ fontSize: 10 }} key={id}>
-            {partyNickname}
-          </Text>
+          <Nickname nickname={partyNickname} key={id} />
         ))}
       </Box>
       <Box>
diff --git a/src/theme.js b/src/theme.js
index d4a89af..ddd5b41 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -7,7 +7,7 @@ export default {
     highlight: "hsl(260, 20%, 40%)",
     purple: "hsl(290, 100%, 80%)",
     muted: "hsla(230, 20%, 0%, 20%)",
-    gray: "hsl(0, 0%, 70%)"
+    gray: "hsl(0, 0%, 70%)",
   },
   fonts: {
     body: "'Bree Serif', serif",
@@ -15,83 +15,83 @@ export default {
       "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
     heading: "'Bree Serif', serif",
     monospace: "Menlo, monospace",
-    display: "'Pacifico', cursive"
+    display: "'Pacifico', cursive",
   },
   fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
   fontWeights: {
     caption: 200,
     body: 300,
     heading: 400,
-    display: 400
+    display: 400,
   },
   lineHeights: {
     body: 1.1,
-    heading: 1.25
+    heading: 1.25,
   },
   text: {
     heading: {
       fontFamily: "heading",
       fontWeight: "heading",
       lineHeight: "heading",
-      fontSize: 1
+      fontSize: 1,
     },
     display: {
       variant: "textStyles.heading",
       fontFamily: "display",
       fontSize: [5, 6],
       fontWeight: "display",
-      mt: 3
+      mt: 3,
     },
     caption: {
       fontFamily: "body2",
       fontWeight: "caption",
       fontSize: 10,
-      color: "gray"
+      color: "gray",
     },
     body2: {
       fontFamily: "body2",
       fontSize: 1,
-      fontWeight: "body"
-    }
+      fontWeight: "body",
+    },
   },
   styles: {
     Container: {
       p: 3,
-      maxWidth: 1024
+      maxWidth: 1024,
     },
     root: {
       fontFamily: "body",
       lineHeight: "body",
-      fontWeight: "body"
+      fontWeight: "body",
     },
     h1: {
-      variant: "textStyles.display"
+      variant: "textStyles.display",
     },
     h2: {
       variant: "textStyles.heading",
-      fontSize: 5
+      fontSize: 5,
     },
     h3: {
       variant: "textStyles.heading",
-      fontSize: 4
+      fontSize: 4,
     },
     h4: {
       variant: "textStyles.heading",
-      fontSize: 3
+      fontSize: 3,
     },
     h5: {
       variant: "textStyles.heading",
-      fontSize: 2
+      fontSize: 2,
     },
     h6: {
       variant: "textStyles.heading",
-      fontSize: 1
+      fontSize: 1,
     },
     a: {
       color: "primary",
       "&:hover": {
-        color: "secondary"
-      }
+        color: "secondary",
+      },
     },
     pre: {
       variant: "prism",
@@ -102,18 +102,18 @@ export default {
       bg: "muted",
       overflow: "auto",
       code: {
-        color: "inherit"
-      }
+        color: "inherit",
+      },
     },
     code: {
       fontFamily: "monospace",
       color: "secondary",
-      fontSize: 1
+      fontSize: 1,
     },
     inlineCode: {
       fontFamily: "monospace",
       color: "secondary",
-      bg: "muted"
+      bg: "muted",
     },
     table: {
       width: "100%",
@@ -126,52 +126,52 @@ export default {
         pr: "4px",
         pl: 0,
         borderColor: "muted",
-        borderBottomStyle: "solid"
-      }
+        borderBottomStyle: "solid",
+      },
     },
     th: {
       verticalAlign: "bottom",
-      borderBottomWidth: "2px"
+      borderBottomWidth: "2px",
     },
     td: {
       verticalAlign: "top",
-      borderBottomWidth: "1px"
+      borderBottomWidth: "1px",
     },
     hr: {
       border: 0,
       borderBottom: "1px solid",
-      borderColor: "muted"
+      borderColor: "muted",
     },
     img: {
-      maxWidth: "100%"
-    }
+      maxWidth: "100%",
+    },
   },
   prism: {
     ".comment,.prolog,.doctype,.cdata,.punctuation,.operator,.entity,.url": {
-      color: "gray"
+      color: "gray",
     },
     ".comment": {
-      fontStyle: "italic"
+      fontStyle: "italic",
     },
     ".property,.tag,.boolean,.number,.constant,.symbol,.deleted,.function,.class-name,.regex,.important,.variable": {
-      color: "purple"
+      color: "purple",
     },
     ".atrule,.attr-value,.keyword": {
-      color: "primary"
+      color: "primary",
     },
     ".selector,.attr-name,.string,.char,.bultin,.inserted": {
-      color: "secondary"
-    }
+      color: "secondary",
+    },
   },
   forms: {
     label: {
-      fontWeight: 400
+      fontWeight: 400,
     },
     input: {
       "&:focus": {
-        outlineColor: "primary"
-      }
-    }
+        outlineColor: "primary",
+      },
+    },
   },
   buttons: {
     primary: {
@@ -182,15 +182,15 @@ export default {
       borderColor: "text",
       "&:hover": {
         borderColor: "highlight",
-        cursor: "pointer"
+        cursor: "pointer",
       },
       fontFamily: "body",
       "&:focus": {
-        outline: "none"
+        outline: "none",
       },
       "&:active": {
-        borderColor: "primary"
-      }
+        borderColor: "primary",
+      },
     },
     secondary: {
       color: "secondary",
@@ -198,29 +198,31 @@ export default {
       borderStyle: "solid",
       borderWidth: "1px",
       borderColor: "text",
-      fontFamily: "body"
+      fontFamily: "body",
     },
     icon: {
       "&:hover": {
-        cursor: "pointer"
+        cursor: "pointer",
+        color: "primary",
       },
       "&:focus": {
-        outline: "none"
+        outline: "none",
       },
       "&:active": {
-        color: "primary"
-      }
+        color: "secondary",
+      },
     },
     close: {
       "&:hover": {
-        cursor: "pointer"
+        cursor: "pointer",
+        color: "primary",
       },
       "&:focus": {
-        outline: "none"
+        outline: "none",
       },
       "&:active": {
-        color: "primary"
-      }
-    }
-  }
+        color: "secondary",
+      },
+    },
+  },
 };