diff --git a/common/util/clean-username.ts b/common/util/clean-username.ts
index ab92e679..5c295aeb 100644
--- a/common/util/clean-username.ts
+++ b/common/util/clean-username.ts
@@ -1,7 +1,12 @@
-export const cleanUsername = (name: string) => {
+export const cleanUsername = (name: string, maxLength = 25) => {
   return name
     .replace(/\s+/g, '')
     .normalize('NFD') // split an accented letter in the base letter and the acent
     .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
     .replace(/[^A-Za-z0-9_]/g, '') // remove all chars not letters, numbers and underscores
+    .substring(0, maxLength)
+}
+
+export const cleanDisplayName = (displayName: string, maxLength = 25) => {
+  return displayName.replace(/\s+/g, ' ').substring(0, maxLength).trim()
 }
diff --git a/functions/src/create-user.ts b/functions/src/create-user.ts
index d92a9f38..2b672358 100644
--- a/functions/src/create-user.ts
+++ b/functions/src/create-user.ts
@@ -9,7 +9,10 @@ import {
 } from '../../common/user'
 import { getUser, getUserByUsername } from './utils'
 import { randomString } from '../../common/util/random'
-import { cleanUsername } from '../../common/util/clean-username'
+import {
+  cleanDisplayName,
+  cleanUsername,
+} from '../../common/util/clean-username'
 
 export const createUser = functions
   .runWith({ minInstances: 1 })
@@ -30,7 +33,8 @@ export const createUser = functions
     const email = fbUser.email
     const emailName = email?.replace(/@.*$/, '')
 
-    const name = fbUser.displayName || emailName || 'User' + randomString(4)
+    const rawName = fbUser.displayName || emailName || 'User' + randomString(4)
+    const name = cleanDisplayName(rawName)
     let username = cleanUsername(name)
 
     const sameNameUser = await getUserByUsername(username)
diff --git a/web/lib/firebase/api-call.ts b/web/lib/firebase/api-call.ts
index d92122e0..a397aa03 100644
--- a/web/lib/firebase/api-call.ts
+++ b/web/lib/firebase/api-call.ts
@@ -33,3 +33,13 @@ export const createUser: () => Promise<User | null> = () => {
     .then((r) => (r.data as any)?.user || null)
     .catch(() => null)
 }
+
+export const changeUserInfo = (data: {
+  username?: string
+  name?: string
+  avatarUrl?: string
+}) => {
+  return cloudFunction('changeUserInfo')(data)
+    .then((r) => r.data as { status: string; message?: string })
+    .catch((e) => ({ status: 'error', message: e.message }))
+}
diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx
index 158a7802..368c2c08 100644
--- a/web/pages/profile.tsx
+++ b/web/pages/profile.tsx
@@ -6,6 +6,11 @@ import { SEO } from '../components/SEO'
 import { Title } from '../components/title'
 import { usePrivateUser, useUser } from '../hooks/use-user'
 import { formatMoney } from '../../common/util/format'
+import {
+  cleanDisplayName,
+  cleanUsername,
+} from '../../common/util/clean-username'
+import { changeUserInfo } from '../lib/firebase/api-call'
 
 export default function ProfilePage() {
   const user = useUser()
@@ -23,6 +28,66 @@ export default function ProfilePage() {
     }
   }, [user])
 
+  const updateDisplayName = async () => {
+    const newName = cleanDisplayName(name)
+
+    if (newName) {
+      setName(newName)
+
+      await changeUserInfo({ name: newName })
+        .catch(() => ({ status: 'error' }))
+        .then((r) => {
+          if (r.status === 'error') setName(user?.name || '')
+        })
+    } else {
+      setName(user?.name || '')
+    }
+  }
+
+  const updateUsername = async () => {
+    const newUsername = cleanUsername(username)
+
+    if (newUsername) {
+      setUsername(newUsername)
+      await changeUserInfo({ username: newUsername })
+        .catch(() => ({ status: 'error' }))
+        .then((r) => {
+          if (r.status === 'error') setUsername(user?.username || '')
+        })
+    } else {
+      setUsername(user?.username || '')
+    }
+  }
+
+  const [selectedFile, setSelectedFile] = useState<undefined | Blob>()
+
+  const changeHandler = (event: any) => {
+    setSelectedFile(event.target.files[0])
+    //   handleSubmission()
+    // }
+
+    // const handleSubmission = () => {
+    //   if (!selectedFile) return
+    const formData = new FormData()
+
+    formData.append('File', event.target.files[0])
+
+    fetch(
+      'https://freeimage.host/api/1/upload?key=6d207e02198a847aa98d0a2a901485a5',
+      {
+        method: 'POST',
+        body: formData,
+      }
+    )
+      .then((response) => response.json())
+      .then((result) => {
+        console.log('Success:', result)
+      })
+      .catch((error) => {
+        console.error('Error:', error)
+      })
+  }
+
   return (
     <Page>
       <SEO title="Profile" description="User profile settings" url="/profile" />
@@ -35,6 +100,7 @@ export default function ProfilePage() {
           height={80}
           className="rounded-full bg-gray-400 flex items-center justify-center"
         />
+        <input type="file" name="file" onChange={changeHandler} />
       </p>
 
       <label className="label">
@@ -47,6 +113,7 @@ export default function ProfilePage() {
         className="input input-bordered"
         value={name}
         onChange={(e) => setName(e.target.value || '')}
+        onBlur={updateDisplayName}
       />
 
       <label className="label">
@@ -59,6 +126,7 @@ export default function ProfilePage() {
         className="input input-bordered"
         value={username}
         onChange={(e) => setUsername(e.target.value || '')}
+        onBlur={updateUsername}
       />
 
       <label className="label">