diff --git a/firestore.rules b/firestore.rules
index e766f15f..385e2f44 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -14,7 +14,7 @@ service cloud.firestore {
     match /users/{userId} {
       allow read;
       allow update: if resource.data.id == request.auth.uid 
-        || request.resource.data.diff(resource.data).affectedKeys()
+        && request.resource.data.diff(resource.data).affectedKeys()
             .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle']);
     }
 
diff --git a/web/components/profile-menu.tsx b/web/components/profile-menu.tsx
index def6f1f0..04b37406 100644
--- a/web/components/profile-menu.tsx
+++ b/web/components/profile-menu.tsx
@@ -35,7 +35,7 @@ function getNavigationOptions(
       href: user ? '/home' : '/',
     },
     {
-      name: `@${user?.username}`,
+      name: `Your profile`,
       href: `/${user?.username}`,
     },
     ...(mobile
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index b1a4d821..3a6c3cc3 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -132,6 +132,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
 }
 
 // Assign each user to a random default banner based on the hash of userId
+// TODO: Consider handling banner uploads using our own storage bucket, like user avatars.
 export function defaultBannerUrl(userId: string) {
   const defaultBanner = [
     'https://images.unsplash.com/photo-1501523460185-2aa5d2a0f981?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2131&q=80',
diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx
index 21ed216e..2b3445e5 100644
--- a/web/pages/profile.tsx
+++ b/web/pages/profile.tsx
@@ -20,31 +20,41 @@ import { User } from '../../common/user'
 import { updateUser } from '../lib/firebase/users'
 import { defaultBannerUrl } from '../components/user-page'
 import { SiteLink } from '../components/site-link'
+import Textarea from 'react-expanding-textarea'
 
 function EditUserField(props: {
   user: User
   field: 'bio' | 'bannerUrl' | 'twitterHandle' | 'discordHandle'
   label: string
-  isEditing: boolean
 }) {
-  const { user, field, label, isEditing } = props
+  const { user, field, label } = props
   const [value, setValue] = useState(user[field] ?? '')
 
   async function updateField() {
-    await updateUser(user.id, { [field]: value })
+    // Note: We trim whitespace before uploading to Firestore
+    await updateUser(user.id, { [field]: value.trim() })
   }
 
   return (
     <div>
       <label className="label">{label}</label>
 
-      <input
-        type="text"
-        className="input input-bordered"
-        value={value}
-        onChange={(e) => setValue(e.target.value || '')}
-        onBlur={updateField}
-      />
+      {field === 'bio' ? (
+        <Textarea
+          className="textarea textarea-bordered w-full"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onBlur={updateField}
+        />
+      ) : (
+        <input
+          type="text"
+          className="input input-bordered"
+          value={value}
+          onChange={(e) => setValue(e.target.value || '')}
+          onBlur={updateField}
+        />
+      )}
     </div>
   )
 }