diff --git a/src/components/MyAccount/NewSettings/UsernameForm.test.tsx b/src/components/MyAccount/NewSettings/UsernameForm.test.tsx
index d2950314a..333b902e4 100644
--- a/src/components/MyAccount/NewSettings/UsernameForm.test.tsx
+++ b/src/components/MyAccount/NewSettings/UsernameForm.test.tsx
@@ -97,6 +97,19 @@ describe("username form", () => {
     expect(screen.getByRole("button", { name: /save changes/i })).toBeDisabled()
   })
 
+  it("validates empty username correctly", () => {
+    render(component)
+
+    fireEvent.click(screen.getByRole("button", { name: /edit/i }))
+
+    const input = screen.getByLabelText(
+      "Must be 5-15 characters and use only letters (a-z) and numbers (0-9)"
+    )
+    fireEvent.change(input, { target: { value: "" } })
+
+    expect(screen.getByRole("button", { name: /save changes/i })).toBeDisabled()
+  })
+
   it("removes username when delete icon is clicked", () => {
     render(component)
 
diff --git a/src/components/MyAccount/NewSettings/UsernameForm.tsx b/src/components/MyAccount/NewSettings/UsernameForm.tsx
index 55b1ba207..8db35d1eb 100644
--- a/src/components/MyAccount/NewSettings/UsernameForm.tsx
+++ b/src/components/MyAccount/NewSettings/UsernameForm.tsx
@@ -37,8 +37,8 @@ const UsernameForm = ({ patron, usernameState }: UsernameFormProps) => {
     patron.username === "" ? null : patron.username
   )
   const [tempInput, setTempInput] = useState(input)
+  const currentUsernameNotDeleted = tempInput !== null
 
-  console.log("input", input)
   const { setUsernameStatus, setUsernameStatusMessage } = usernameState
 
   const validateUsername = (username: string) => {
@@ -184,7 +184,7 @@ const UsernameForm = ({ patron, usernameState }: UsernameFormProps) => {
       marginTop={{ base: "xs", lg: "unset" }}
       maxWidth={{ base: "600px", md: "320px" }}
     >
-      {tempInput !== null ? (
+      {currentUsernameNotDeleted ? (
         editUsernameField
       ) : (
         <AddButton