diff --git a/client/src/components/app.riot b/client/src/components/app.riot
index 6700488..e241caf 100644
--- a/client/src/components/app.riot
+++ b/client/src/components/app.riot
@@ -15,6 +15,7 @@
           user={state.user}
           cb-select-room={selectRoom}
           cb-create-room={() => update({ showCreateModal: true })}
+          cb-profile={() => update({ showProfileModal: true })}
           cb-logout={handleLogout}
         />
         <main class="chat-main">
@@ -69,6 +70,13 @@
         cb-confirm={confirmClearRoom}
         cb-close={() => update({ showClearModal: false })}
       />
+
+      <profile-page
+        if={state.showProfileModal}
+        user={state.user}
+        cb-profile-update={handleProfileUpdate}
+        cb-close={() => update({ showProfileModal: false })}
+      />
     </template>
   </div>
 
@@ -157,6 +165,7 @@
         showInviteModal: false,
         showDeleteModal: false,
         showClearModal: false,
+        showProfileModal: false,
         aiTyping: false,
         aiToolStatus: null,
         streamingMessage: null,
@@ -368,8 +377,8 @@
         }
       },
 
-      sendMessage({ content, mentions }) {
-        ws.sendMessage(this.state.activeRoomId, content, mentions)
+      sendMessage({ content, mentions, imageUrl }) {
+        ws.sendMessage(this.state.activeRoomId, content, mentions, imageUrl)
       },
 
       handleDeleteRoom(roomId) {
@@ -388,6 +397,10 @@
         this.update({ messages: [], showClearModal: false })
       },
 
+      handleProfileUpdate(user) {
+        this.update({ user })
+      },
+
       /** Check URL for /invite/:token and stash it for after login if needed */
       checkPendingInvite() {
         const match = window.location.pathname.match(/^\/invite\/(.+)$/)
diff --git a/client/src/components/chat-room.riot b/client/src/components/chat-room.riot
index d59ceed..2cb1503 100644
--- a/client/src/components/chat-room.riot
+++ b/client/src/components/chat-room.riot
@@ -118,7 +118,25 @@
 
     <!-- Input -->
     <div class="message-input-area">
+      <!-- Image preview -->
+      <div if={state.pendingImage} class="image-preview-bar">
+        <img src={state.pendingImagePreview} alt="Preview" class="image-preview-thumb" />
+        <span class="image-preview-name">{state.pendingImage?.name || 'Pasted image'}</span>
+        <button class="image-preview-remove" onclick={removeImage} title="Remove image">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
       <div class="input-wrapper">
+        <button class="btn btn-ghost attach-btn" onclick={triggerFileInput} title="Attach image">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+            <circle cx="8.5" cy="8.5" r="1.5"/>
+            <polyline points="21 15 16 10 5 21"/>
+          </svg>
+        </button>
+        <input type="file" ref="fileInput" accept="image/png,image/jpeg,image/gif,image/webp" style="display:none" onchange={handleFileSelect} />
         <textarea
           ref="input"
           class="message-input"
@@ -126,11 +144,12 @@
           rows="1"
           oninput={handleInput}
           onkeydown={handleKeydown}
+          onpaste={handlePaste}
         ></textarea>
         <button
           class="btn btn-primary send-btn"
           onclick={handleSend}
-          disabled={!state.inputValue?.trim()}
+          disabled={!state.inputValue?.trim() && !state.pendingImage}
         >
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
@@ -378,6 +397,53 @@
       border-top: 1px solid var(--border);
     }
 
+    .image-preview-bar {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      padding: var(--space-sm) var(--space-sm);
+      margin-bottom: var(--space-xs);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      animation: fadeIn 0.15s ease;
+    }
+
+    .image-preview-thumb {
+      width: 48px;
+      height: 48px;
+      object-fit: cover;
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--border);
+    }
+
+    .image-preview-name {
+      flex: 1;
+      font-size: var(--text-xs);
+      color: var(--text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .image-preview-remove {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      padding: 4px;
+      border-radius: var(--radius-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all var(--transition-fast);
+    }
+
+    .image-preview-remove:hover {
+      color: var(--error, #e53e3e);
+      background: rgba(229, 62, 62, 0.1);
+    }
+
     .input-wrapper {
       display: flex;
       align-items: flex-end;
@@ -393,6 +459,22 @@
       border-color: var(--accent);
     }
 
+    .attach-btn {
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-md);
+      color: var(--text-muted);
+    }
+
+    .attach-btn:hover {
+      color: var(--accent);
+    }
+
     .message-input {
       flex: 1;
       border: none;
@@ -429,6 +511,7 @@
 
   <script>
     import { ws } from '../services/websocket.js'
+    import { api } from '../services/api.js'
     import { avatarFromEmail as _avatarFromEmail } from '../services/avatar.js'
 
     export default {
@@ -438,6 +521,9 @@
         inputValue: '',
         typingDisplay: '',
         showMembers: false,
+        pendingImage: null,
+        pendingImagePreview: null,
+        uploading: false,
       },
 
       onMounted() {
@@ -451,6 +537,9 @@
 
       onUnmounted() {
         document.removeEventListener('click', this._closeMembers)
+        if (this.state.pendingImagePreview) {
+          URL.revokeObjectURL(this.state.pendingImagePreview)
+        }
       },
 
       toggleMembers(e) {
@@ -493,9 +582,59 @@
         }
       },
 
-      handleSend() {
-        const content = this.state.inputValue?.trim()
-        if (!content) return
+      handlePaste(e) {
+        const items = e.clipboardData?.items
+        if (!items) return
+
+        for (const item of items) {
+          if (item.type.startsWith('image/')) {
+            e.preventDefault()
+            const file = item.getAsFile()
+            if (file) this.attachImage(file)
+            return
+          }
+        }
+      },
+
+      triggerFileInput() {
+        this.$('[ref="fileInput"]')?.click()
+      },
+
+      handleFileSelect(e) {
+        const file = e.target.files?.[0]
+        if (file && file.type.startsWith('image/')) {
+          this.attachImage(file)
+        }
+        e.target.value = '' // reset so same file can be re-selected
+      },
+
+      attachImage(file) {
+        // Revoke old preview URL
+        if (this.state.pendingImagePreview) {
+          URL.revokeObjectURL(this.state.pendingImagePreview)
+        }
+        const preview = URL.createObjectURL(file)
+        this.update({
+          pendingImage: file,
+          pendingImagePreview: preview,
+        })
+      },
+
+      removeImage() {
+        if (this.state.pendingImagePreview) {
+          URL.revokeObjectURL(this.state.pendingImagePreview)
+        }
+        this.update({
+          pendingImage: null,
+          pendingImagePreview: null,
+        })
+      },
+
+      async handleSend() {
+        const content = this.state.inputValue?.trim() || ''
+        const hasImage = !!this.state.pendingImage
+
+        if (!content && !hasImage) return
 
         // Intercept /clear command — room creator only
         if (content === '/clear') {
@@ -519,8 +658,33 @@
           mentions.push('ai-assistant')
         }
 
-        this.props.cbSend({ content, mentions })
-        this.update({ inputValue: '' })
+        let imageUrl = null
+
+        // Upload image first if attached
+        if (hasImage) {
+          try {
+            this.update({ uploading: true })
+            const result = await api.uploadChatImage(this.state.pendingImage)
+            imageUrl = result.url
+          } catch (err) {
+            console.error('Failed to upload image:', err)
+            this.update({ uploading: false })
+            return
+          }
+        }
+
+        // Clean up image preview
+        if (this.state.pendingImagePreview) {
+          URL.revokeObjectURL(this.state.pendingImagePreview)
+        }
+
+        this.props.cbSend({ content, mentions, imageUrl })
+        this.update({
+          inputValue: '',
+          pendingImage: null,
+          pendingImagePreview: null,
+          uploading: false,
+        })
 
         const textarea = this.$('textarea')
         if (textarea) {
diff --git a/client/src/components/chat-sidebar.riot b/client/src/components/chat-sidebar.riot
index 952bfde..86af970 100644
--- a/client/src/components/chat-sidebar.riot
+++ b/client/src/components/chat-sidebar.riot
@@ -32,9 +32,9 @@
     </div>
 
     <div class="sidebar-footer">
-      <div class="user-info">
+      <div class="user-info user-info-clickable" onclick={props.cbProfile} title="Edit profile">
         <div class="user-avatar">
-          <img src={avatarFromEmail(props.user?.email)}
+          <img src={getUserAvatar()}
                alt={props.user?.display_name}
                width="32"
                height="32"
@@ -178,6 +178,17 @@
       min-width: 0;
     }
 
+    .user-info-clickable {
+      cursor: pointer;
+      padding: var(--space-xs);
+      border-radius: var(--radius-md);
+      transition: background var(--transition-fast);
+    }
+
+    .user-info-clickable:hover {
+      background: var(--bg-hover);
+    }
+
     .user-avatar {
       width: 32px;
       height: 32px;
@@ -208,10 +219,12 @@
   </style>
 
   <script>
-    import { avatarFromEmail as _avatarFromEmail } from '../services/avatar.js'
+    import { getAvatarUrl } from '../services/avatar.js'
 
     export default {
-      avatarFromEmail: _avatarFromEmail,
+      getUserAvatar() {
+        return getAvatarUrl(this.props.user, 32)
+      },
     }
   </script>
 </chat-sidebar>
diff --git a/client/src/components/create-room-modal.riot b/client/src/components/create-room-modal.riot
index 6ec6cdb..d97457d 100644
--- a/client/src/components/create-room-modal.riot
+++ b/client/src/components/create-room-modal.riot
@@ -65,6 +65,7 @@
                 <div class="model-option-meta">
                   <span class="model-option-id">{model.id}</span>
                   <span if={model.context_length} class="model-option-ctx">{formatCtx(model.context_length)}</span>
+                  <span if={model.supports_vision} class="model-option-vision" title="Supports image input">👁 Vision</span>
                 </div>
               </div>
             </div>
@@ -345,6 +346,15 @@
       padding: 1px 5px;
       border-radius: var(--radius-sm);
     }
+
+    .model-option-vision {
+      background: rgba(99, 102, 241, 0.15);
+      color: var(--accent);
+      padding: 1px 6px;
+      border-radius: var(--radius-sm);
+      font-size: 10px;
+      font-weight: 500;
+    }
   </style>
 
   <script>
diff --git a/client/src/components/message-bubble.riot b/client/src/components/message-bubble.riot
index 54bce77..60ca7bc 100644
--- a/client/src/components/message-bubble.riot
+++ b/client/src/components/message-bubble.riot
@@ -36,6 +36,9 @@
           </div>
         </div>
       </div>
+      <div if={props.message?.image_url} class="message-image-wrap">
+        <img src={props.message.image_url} alt="Attached image" class="message-image" loading="lazy" onclick={openImageFullscreen} />
+      </div>
       <div if={props.isStreaming} class="message-content streaming-content">{props.message?.content}<span class="streaming-cursor">▌</span></div>
       <div if={!props.isStreaming} class="message-content markdown-content"></div>
       <div if={props.message?.is_ai && props.message?.ai_meta} class="ai-stats-bar">
@@ -302,6 +305,27 @@
       font-weight: 500;
     }
 
+    .message-image-wrap {
+      margin-bottom: 4px;
+      padding: 4px;
+      border-radius: var(--radius-md);
+      overflow: hidden;
+    }
+
+    .message-image {
+      max-width: 320px;
+      max-height: 280px;
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      display: block;
+      object-fit: contain;
+      transition: opacity 0.15s;
+    }
+
+    .message-image:hover {
+      opacity: 0.9;
+    }
+
     .streaming-content {
       white-space: pre-wrap;
       word-wrap: break-word;
@@ -404,6 +428,11 @@
         }
       },
 
+      openImageFullscreen(e) {
+        const url = e.target.src
+        window.open(url, '_blank')
+      },
+
       copyFullMessage(e) {
         e.preventDefault()
         e.stopPropagation()
diff --git a/client/src/components/profile-page.riot b/client/src/components/profile-page.riot
new file mode 100644
index 0000000..a3e780c
--- /dev/null
+++ b/client/src/components/profile-page.riot
@@ -0,0 +1,292 @@
+<profile-page>
+  <div class="profile-overlay" onclick={handleOverlayClick}>
+    <div class="profile-card">
+      <div class="profile-header">
+        <h2>Profile</h2>
+        <button class="btn btn-ghost btn-icon" onclick={props.cbClose} title="Close">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+
+      <div class="avatar-section">
+        <div class="avatar-wrapper">
+          <img src={currentAvatar()} alt="Avatar" class="avatar-preview" width="96" height="96" />
+          <label class="avatar-edit-btn" title="Upload avatar">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
+              <circle cx="12" cy="13" r="4"/>
+            </svg>
+            <input type="file" accept="image/png,image/jpeg,image/gif,image/webp" onchange={handleAvatarUpload} class="hidden-input" />
+          </label>
+        </div>
+        <p if={state.avatarUploading} class="upload-status">Uploading...</p>
+        <button if={props.user?.avatar_url} class="btn btn-ghost btn-sm remove-avatar" onclick={handleRemoveAvatar}>
+          Remove custom avatar
+        </button>
+      </div>
+
+      <form onsubmit={handleSave}>
+        <div class="form-group">
+          <label for="displayName">Display Name</label>
+          <input
+            type="text"
+            id="displayName"
+            value={state.displayName}
+            oninput={e => update({ displayName: e.target.value })}
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label>Email</label>
+          <input type="email" value={props.user?.email} disabled class="input-disabled" />
+          <span class="form-hint">Email cannot be changed</span>
+        </div>
+
+        <p if={state.error} class="error-text">{state.error}</p>
+        <p if={state.success} class="success-text">{state.success}</p>
+
+        <div class="profile-actions">
+          <button type="button" class="btn btn-ghost" onclick={props.cbClose}>Cancel</button>
+          <button type="submit" class="btn btn-primary" disabled={state.saving}>
+            {state.saving ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <style>
+    .profile-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 100;
+      animation: fadeIn 0.15s ease-out;
+    }
+
+    .profile-card {
+      width: 100%;
+      max-width: 440px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: var(--space-xl);
+      animation: slideUp 0.2s ease-out;
+    }
+
+    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+
+    .profile-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--space-lg);
+    }
+
+    .profile-header h2 {
+      font-size: var(--text-lg);
+      font-weight: 600;
+    }
+
+    .avatar-section {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: var(--space-xl);
+    }
+
+    .avatar-wrapper {
+      position: relative;
+      width: 96px;
+      height: 96px;
+    }
+
+    .avatar-preview {
+      width: 96px;
+      height: 96px;
+      border-radius: var(--radius-full);
+      object-fit: cover;
+      border: 3px solid var(--border);
+    }
+
+    .avatar-edit-btn {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 32px;
+      height: 32px;
+      border-radius: var(--radius-full);
+      background: var(--accent);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background var(--transition-fast);
+      border: 2px solid var(--bg-secondary);
+    }
+
+    .avatar-edit-btn:hover {
+      background: var(--accent-hover);
+    }
+
+    .hidden-input {
+      display: none;
+    }
+
+    .upload-status {
+      margin-top: var(--space-sm);
+      font-size: var(--text-sm);
+      color: var(--text-secondary);
+    }
+
+    .remove-avatar {
+      margin-top: var(--space-sm);
+      font-size: var(--text-xs);
+      color: var(--text-muted);
+    }
+
+    .form-group {
+      margin-bottom: var(--space-md);
+    }
+
+    .form-group label {
+      display: block;
+      margin-bottom: var(--space-xs);
+      font-size: var(--text-sm);
+      color: var(--text-secondary);
+    }
+
+    .input-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .form-hint {
+      display: block;
+      margin-top: 4px;
+      font-size: var(--text-xs);
+      color: var(--text-muted);
+    }
+
+    .error-text {
+      color: var(--error);
+      font-size: var(--text-sm);
+      margin-bottom: var(--space-sm);
+    }
+
+    .success-text {
+      color: var(--success);
+      font-size: var(--text-sm);
+      margin-bottom: var(--space-sm);
+    }
+
+    .profile-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--space-sm);
+      margin-top: var(--space-lg);
+    }
+
+    .btn-icon {
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-md);
+    }
+
+    .btn-sm {
+      padding: var(--space-xs) var(--space-md);
+      font-size: var(--text-sm);
+    }
+  </style>
+
+  <script>
+    import { api, saveAuth } from '../services/api.js'
+    import { getAvatarUrl } from '../services/avatar.js'
+
+    export default {
+      state: {
+        displayName: '',
+        saving: false,
+        avatarUploading: false,
+        error: null,
+        success: null,
+      },
+
+      onMounted() {
+        this.update({
+          displayName: this.props.user?.display_name || '',
+        })
+      },
+
+      currentAvatar() {
+        return getAvatarUrl(this.props.user, 96)
+      },
+
+      handleOverlayClick(e) {
+        if (e.target.classList.contains('profile-overlay')) {
+          this.props.cbClose()
+        }
+      },
+
+      async handleSave(e) {
+        e.preventDefault()
+        this.update({ saving: true, error: null, success: null })
+
+        try {
+          const data = await api.updateProfile({ display_name: this.state.displayName })
+          saveAuth(data.token, data.user)
+          this.props.cbProfileUpdate(data.user)
+          this.update({ saving: false, success: 'Profile updated!' })
+        } catch (err) {
+          this.update({ saving: false, error: err.message })
+        }
+      },
+
+      async handleAvatarUpload(e) {
+        const file = e.target.files[0]
+        if (!file) return
+
+        if (file.size > 2 * 1024 * 1024) {
+          this.update({ error: 'Avatar must be under 2MB' })
+          return
+        }
+
+        this.update({ avatarUploading: true, error: null, success: null })
+
+        try {
+          const data = await api.uploadAvatar(file)
+          saveAuth(data.token, data.user)
+          this.props.cbProfileUpdate(data.user)
+          this.update({ avatarUploading: false, success: 'Avatar updated!' })
+        } catch (err) {
+          this.update({ avatarUploading: false, error: err.message })
+        }
+      },
+
+      async handleRemoveAvatar() {
+        this.update({ error: null, success: null })
+
+        try {
+          const data = await api.deleteAvatar()
+          saveAuth(data.token, data.user)
+          this.props.cbProfileUpdate(data.user)
+          this.update({ success: 'Avatar removed' })
+        } catch (err) {
+          this.update({ error: err.message })
+        }
+      },
+    }
+  </script>
+</profile-page>
diff --git a/client/src/main.js b/client/src/main.js
index 4886d95..47d9a4e 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -10,6 +10,7 @@ import InviteModal from './components/invite-modal.riot'
 import DeleteRoomModal from './components/delete-room-modal.riot'
 import ClearConfirmModal from './components/clear-confirm-modal.riot'
 import MessageBubble from './components/message-bubble.riot'
+import ProfilePage from './components/profile-page.riot'
 
 // Register all components
 register('login-page', LoginPage)
@@ -21,6 +22,7 @@ register('invite-modal', InviteModal)
 register('delete-room-modal', DeleteRoomModal)
 register('clear-confirm-modal', ClearConfirmModal)
 register('message-bubble', MessageBubble)
+register('profile-page', ProfilePage)
 
 // Mount the app
 const mountApp = component(App)
diff --git a/client/src/services/api.js b/client/src/services/api.js
index 98ac539..5d8084f 100644
--- a/client/src/services/api.js
+++ b/client/src/services/api.js
@@ -42,6 +42,24 @@ export const api = {
   login: (data) => request('POST', '/auth/login', data),
   me: () => request('GET', '/auth/me'),
 
+  // Profile
+  updateProfile: (data) => request('PUT', '/auth/profile', data),
+  uploadAvatar: async (file) => {
+    const formData = new FormData()
+    formData.append('avatar', file)
+    const res = await fetch(`${API_BASE}/auth/avatar`, {
+      method: 'POST',
+      headers: authHeaders(),
+      body: formData,
+    })
+    if (!res.ok) {
+      const text = await res.text()
+      throw new Error(text || `HTTP ${res.status}`)
+    }
+    return res.json()
+  },
+  deleteAvatar: () => request('DELETE', '/auth/avatar'),
+
   // Rooms
   listRooms: () => request('GET', '/rooms'),
   createRoom: (data) => request('POST', '/rooms', data),
@@ -58,6 +76,22 @@ export const api = {
   // Models
   listModels: () => request('GET', '/models'),
 
+  // Upload (chat images)
+  uploadChatImage: async (file) => {
+    const formData = new FormData()
+    formData.append('image', file)
+    const res = await fetch(`${API_BASE}/upload`, {
+      method: 'POST',
+      headers: authHeaders(),
+      body: formData,
+    })
+    if (!res.ok) {
+      const text = await res.text()
+      throw new Error(text || `HTTP ${res.status}`)
+    }
+    return res.json()
+  },
+
   // Invites
   createInvite: (data) => request('POST', '/invites', data),
   acceptInvite: (token) => request('POST', `/invites/${token}/accept`),
diff --git a/client/src/services/avatar.js b/client/src/services/avatar.js
index 0f2821f..78f5b5e 100644
--- a/client/src/services/avatar.js
+++ b/client/src/services/avatar.js
@@ -1,9 +1,20 @@
 /**
- * Gravatar avatar utilities.
- * Uses Gravatar with "monsterid" fallback — real photos for users who have
- * a Gravatar account, unique monster icons for everyone else.
+ * Avatar utilities.
+ * Supports custom uploaded avatars with Gravatar + "monsterid" fallback.
  */
 
+/**
+ * Get the best avatar URL for a user object.
+ * Prefers custom avatar_url, falls back to Gravatar.
+ * @param {object} user - User object with optional avatar_url and email
+ * @param {number} [size=64] - Pixel size (for Gravatar fallback)
+ * @returns {string} Avatar URL
+ */
+export function getAvatarUrl(user, size = 64) {
+  if (user?.avatar_url) return user.avatar_url
+  return avatarFromEmail(user?.email, size)
+}
+
 /**
  * Get avatar URL from a pre-computed MD5 hash (used for messages).
  * @param {string} hash - MD5 hash of the user's email (from server)
diff --git a/client/src/services/websocket.js b/client/src/services/websocket.js
index 802d568..1935130 100644
--- a/client/src/services/websocket.js
+++ b/client/src/services/websocket.js
@@ -102,14 +102,16 @@ class WebSocketManager {
     this.send({ type: 'join_room', room_id: roomId })
   }
 
-  sendMessage(roomId, content, mentions = []) {
+  sendMessage(roomId, content, mentions = [], imageUrl = null) {
     console.log('[WS] Sending message to room:', roomId)
-    this.send({
+    const msg = {
       type: 'send_message',
       room_id: roomId,
       content,
       mentions,
-    })
+    }
+    if (imageUrl) msg.image_url = imageUrl
+    this.send(msg)
   }
 
   sendTyping(roomId) {
diff --git a/client/vite.config.js b/client/vite.config.js
index d522af6..52943c0 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -31,6 +31,10 @@ export default defineConfig({
         target: 'ws://localhost:3001',
         ws: true,
       },
+      '/uploads': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
     },
   },
 })
diff --git a/server/Cargo.lock b/server/Cargo.lock
index fd276d5..a615c56 100644
--- a/server/Cargo.lock
+++ b/server/Cargo.lock
@@ -143,6 +143,7 @@ dependencies = [
  "matchit",
  "memchr",
  "mime",
+ "multer",
  "percent-encoding",
  "pin-project-lite",
  "rustversion",
@@ -851,6 +852,7 @@ dependencies = [
  "async-trait",
  "axum",
  "axum-extra",
+ "base64 0.22.1",
  "chrono",
  "dotenvy",
  "futures",
diff --git a/server/Cargo.toml b/server/Cargo.toml
index ca0a96b..766e299 100644
--- a/server/Cargo.toml
+++ b/server/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-axum = { version = "0.7", features = ["ws", "macros"] }
+axum = { version = "0.7", features = ["ws", "macros", "multipart"] }
 axum-extra = { version = "0.9", features = ["typed-header"] }
 tokio = { version = "1", features = ["full"] }
 tower = "0.4"
@@ -25,3 +25,4 @@ rand = "0.8"
 async-trait = "0.1"
 scraper = "0.22"
 md-5 = "0.10"
+base64 = "0.22"
diff --git a/server/migrations/005_avatar.sql b/server/migrations/005_avatar.sql
new file mode 100644
index 0000000..44a211c
--- /dev/null
+++ b/server/migrations/005_avatar.sql
@@ -0,0 +1,2 @@
+-- Add avatar_url column to users table for custom avatar uploads
+ALTER TABLE users ADD COLUMN avatar_url TEXT;
diff --git a/server/migrations/006_image_url.sql b/server/migrations/006_image_url.sql
new file mode 100644
index 0000000..c30f583
--- /dev/null
+++ b/server/migrations/006_image_url.sql
@@ -0,0 +1 @@
+ALTER TABLE messages ADD COLUMN image_url TEXT;
diff --git a/server/src/handlers/auth.rs b/server/src/handlers/auth.rs
index b69e4e2..6066bf2 100644
--- a/server/src/handlers/auth.rs
+++ b/server/src/handlers/auth.rs
@@ -52,6 +52,7 @@ pub async fn register(
             id: user_id,
             email: body.email,
             display_name: body.display_name,
+            avatar_url: None,
         },
     }))
 }
@@ -60,8 +61,8 @@ pub async fn login(
     State(state): State<Arc<AppState>>,
     Json(body): Json<LoginRequest>,
 ) -> Result<Json<AuthResponse>, (StatusCode, String)> {
-    let user = sqlx::query_as::<_, (String, String, String, String)>(
-        "SELECT id, email, display_name, password_hash FROM users WHERE email = ?",
+    let user = sqlx::query_as::<_, (String, String, String, String, Option<String>)>(
+        "SELECT id, email, display_name, password_hash, avatar_url FROM users WHERE email = ?",
     )
     .bind(&body.email)
     .fetch_optional(&state.db)
@@ -69,7 +70,7 @@ pub async fn login(
     .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
     .ok_or((StatusCode::UNAUTHORIZED, "Invalid credentials".into()))?;
 
-    let (user_id, email, display_name, hash) = user;
+    let (user_id, email, display_name, hash, avatar_url) = user;
 
     let parsed_hash = PasswordHash::new(&hash)
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -87,14 +88,27 @@ pub async fn login(
             id: user_id,
             email,
             display_name,
+            avatar_url,
         },
     }))
 }
 
-pub async fn me(auth: AuthUser) -> Json<UserPublic> {
-    Json(UserPublic {
+pub async fn me(
+    auth: AuthUser,
+    State(state): State<Arc<AppState>>,
+) -> Result<Json<UserPublic>, (StatusCode, String)> {
+    let avatar_url: Option<String> =
+        sqlx::query_scalar("SELECT avatar_url FROM users WHERE id = ?")
+            .bind(&auth.user_id)
+            .fetch_optional(&state.db)
+            .await
+            .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+            .flatten();
+
+    Ok(Json(UserPublic {
         id: auth.user_id,
         email: auth.email,
         display_name: auth.display_name,
-    })
+        avatar_url,
+    }))
 }
diff --git a/server/src/handlers/mod.rs b/server/src/handlers/mod.rs
index ae80674..ff74873 100644
--- a/server/src/handlers/mod.rs
+++ b/server/src/handlers/mod.rs
@@ -1,5 +1,7 @@
 pub mod auth;
 pub mod invites;
 pub mod models;
+pub mod profile;
 pub mod rooms;
+pub mod upload;
 pub mod ws;
diff --git a/server/src/handlers/models.rs b/server/src/handlers/models.rs
index 5483ca1..1b63a20 100644
--- a/server/src/handlers/models.rs
+++ b/server/src/handlers/models.rs
@@ -28,6 +28,7 @@ pub struct ModelInfo {
     pub context_length: Option<u64>,
     pub pricing_prompt: Option<String>,
     pub pricing_completion: Option<String>,
+    pub supports_vision: bool,
 }
 
 #[derive(Debug, Deserialize)]
@@ -41,6 +42,7 @@ struct OpenRouterModel {
     name: String,
     context_length: Option<u64>,
     pricing: Option<OpenRouterPricing>,
+    architecture: Option<OpenRouterArchitecture>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -49,6 +51,11 @@ struct OpenRouterPricing {
     completion: Option<String>,
 }
 
+#[derive(Debug, Deserialize)]
+struct OpenRouterArchitecture {
+    input_modalities: Option<Vec<String>>,
+}
+
 async fn fetch_models(api_key: &str) -> Result<Vec<ModelInfo>, String> {
     let client = reqwest::Client::new();
 
@@ -75,12 +82,18 @@ async fn fetch_models(api_key: &str) -> Result<Vec<ModelInfo>, String> {
         .into_iter()
         .map(|m| {
             let pricing = m.pricing.as_ref();
+            let supports_vision = m.architecture
+                .as_ref()
+                .and_then(|a| a.input_modalities.as_ref())
+                .map(|mods| mods.iter().any(|m| m == "image"))
+                .unwrap_or(false);
             ModelInfo {
                 id: m.id,
                 name: m.name,
                 context_length: m.context_length,
                 pricing_prompt: pricing.and_then(|p| p.prompt.clone()),
                 pricing_completion: pricing.and_then(|p| p.completion.clone()),
+                supports_vision,
             }
         })
         .collect();
diff --git a/server/src/handlers/profile.rs b/server/src/handlers/profile.rs
new file mode 100644
index 0000000..a0d3206
--- /dev/null
+++ b/server/src/handlers/profile.rs
@@ -0,0 +1,181 @@
+use axum::{
+    extract::{Multipart, State},
+    http::StatusCode,
+    Json,
+};
+use std::sync::Arc;
+
+use crate::{
+    middleware::auth::{create_token, AuthUser},
+    models::{AuthResponse, UserPublic},
+    AppState,
+};
+
+#[derive(Debug, serde::Deserialize)]
+pub struct UpdateProfileRequest {
+    pub display_name: Option<String>,
+}
+
+/// Update the user's display name. Returns a new token + user.
+pub async fn update_profile(
+    auth: AuthUser,
+    State(state): State<Arc<AppState>>,
+    Json(body): Json<UpdateProfileRequest>,
+) -> Result<Json<AuthResponse>, (StatusCode, String)> {
+    let display_name = body.display_name.unwrap_or(auth.display_name.clone());
+
+    if display_name.trim().is_empty() {
+        return Err((StatusCode::BAD_REQUEST, "Display name cannot be empty".into()));
+    }
+
+    sqlx::query("UPDATE users SET display_name = ? WHERE id = ?")
+        .bind(&display_name)
+        .bind(&auth.user_id)
+        .execute(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    // Fetch the updated avatar_url
+    let avatar_url: Option<String> =
+        sqlx::query_scalar("SELECT avatar_url FROM users WHERE id = ?")
+            .bind(&auth.user_id)
+            .fetch_optional(&state.db)
+            .await
+            .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+            .flatten();
+
+    // Issue a new token with the updated display name
+    let token = create_token(&auth.user_id, &auth.email, &display_name, &state.jwt_secret)
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(AuthResponse {
+        token,
+        user: UserPublic {
+            id: auth.user_id,
+            email: auth.email,
+            display_name,
+            avatar_url,
+        },
+    }))
+}
+
+/// Upload a custom avatar image. Saves to uploads/avatars/<user_id>.ext
+pub async fn upload_avatar(
+    auth: AuthUser,
+    State(state): State<Arc<AppState>>,
+    mut multipart: Multipart,
+) -> Result<Json<AuthResponse>, (StatusCode, String)> {
+    let field = multipart
+        .next_field()
+        .await
+        .map_err(|e| (StatusCode::BAD_REQUEST, e.to_string()))?
+        .ok_or((StatusCode::BAD_REQUEST, "No file uploaded".into()))?;
+
+    let content_type = field
+        .content_type()
+        .unwrap_or("application/octet-stream")
+        .to_string();
+
+    // Only allow images
+    let ext = match content_type.as_str() {
+        "image/png" => "png",
+        "image/jpeg" | "image/jpg" => "jpg",
+        "image/gif" => "gif",
+        "image/webp" => "webp",
+        _ => return Err((StatusCode::BAD_REQUEST, "Only PNG, JPG, GIF, and WebP images are allowed".into())),
+    };
+
+    let data = field
+        .bytes()
+        .await
+        .map_err(|e| (StatusCode::BAD_REQUEST, e.to_string()))?;
+
+    // Limit to 2MB
+    if data.len() > 2 * 1024 * 1024 {
+        return Err((StatusCode::BAD_REQUEST, "Avatar must be under 2MB".into()));
+    }
+
+    // Save to uploads/avatars/
+    let upload_dir = std::path::Path::new("uploads/avatars");
+    tokio::fs::create_dir_all(upload_dir)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    // Remove any old avatar files for this user
+    if let Ok(mut entries) = tokio::fs::read_dir(upload_dir).await {
+        while let Ok(Some(entry)) = entries.next_entry().await {
+            let name = entry.file_name().to_string_lossy().to_string();
+            if name.starts_with(&auth.user_id) {
+                let _ = tokio::fs::remove_file(entry.path()).await;
+            }
+        }
+    }
+
+    let filename = format!("{}.{}", auth.user_id, ext);
+    let filepath = upload_dir.join(&filename);
+
+    tokio::fs::write(&filepath, &data)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    let avatar_url = format!("/uploads/avatars/{}", filename);
+
+    // Update DB
+    sqlx::query("UPDATE users SET avatar_url = ? WHERE id = ?")
+        .bind(&avatar_url)
+        .bind(&auth.user_id)
+        .execute(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    // Issue new token
+    let token = create_token(&auth.user_id, &auth.email, &auth.display_name, &state.jwt_secret)
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(AuthResponse {
+        token,
+        user: UserPublic {
+            id: auth.user_id,
+            email: auth.email,
+            display_name: auth.display_name,
+            avatar_url: Some(avatar_url),
+        },
+    }))
+}
+
+/// Remove the user's custom avatar, reverting to Gravatar.
+pub async fn delete_avatar(
+    auth: AuthUser,
+    State(state): State<Arc<AppState>>,
+) -> Result<Json<AuthResponse>, (StatusCode, String)> {
+    // Remove files
+    let upload_dir = std::path::Path::new("uploads/avatars");
+    if let Ok(mut entries) = tokio::fs::read_dir(upload_dir).await {
+        while let Ok(Some(entry)) = entries.next_entry().await {
+            let name = entry.file_name().to_string_lossy().to_string();
+            if name.starts_with(&auth.user_id) {
+                let _ = tokio::fs::remove_file(entry.path()).await;
+            }
+        }
+    }
+
+    // Clear in DB
+    sqlx::query("UPDATE users SET avatar_url = NULL WHERE id = ?")
+        .bind(&auth.user_id)
+        .execute(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    let token = create_token(&auth.user_id, &auth.email, &auth.display_name, &state.jwt_secret)
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(AuthResponse {
+        token,
+        user: UserPublic {
+            id: auth.user_id,
+            email: auth.email,
+            display_name: auth.display_name,
+            avatar_url: None,
+        },
+    }))
+}
diff --git a/server/src/handlers/rooms.rs b/server/src/handlers/rooms.rs
index 2a77d02..0f89bb2 100644
--- a/server/src/handlers/rooms.rs
+++ b/server/src/handlers/rooms.rs
@@ -54,6 +54,7 @@ pub async fn create_room(
             id: auth.user_id,
             email: auth.email,
             display_name: auth.display_name,
+            avatar_url: None,
         }],
     }))
 }
@@ -72,8 +73,8 @@ pub async fn list_rooms(
 
     let mut result = Vec::new();
     for room in rooms {
-        let members = sqlx::query_as::<_, (String, String, String)>(
-            "SELECT u.id, u.email, u.display_name FROM users u JOIN room_members rm ON u.id = rm.user_id WHERE rm.room_id = ?",
+        let members = sqlx::query_as::<_, (String, String, String, Option<String>)>(
+            "SELECT u.id, u.email, u.display_name, u.avatar_url FROM users u JOIN room_members rm ON u.id = rm.user_id WHERE rm.room_id = ?",
         )
         .bind(&room.id)
         .fetch_all(&state.db)
@@ -91,10 +92,11 @@ pub async fn list_rooms(
             created_at: room.created_at,
             members: members
                 .into_iter()
-                .map(|(id, email, display_name)| UserPublic {
+                .map(|(id, email, display_name, avatar_url)| UserPublic {
                     id,
                     email,
                     display_name,
+                    avatar_url,
                 })
                 .collect(),
         });
@@ -129,8 +131,8 @@ pub async fn get_room(
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
         .ok_or((StatusCode::NOT_FOUND, "Room not found".into()))?;
 
-    let members = sqlx::query_as::<_, (String, String, String)>(
-        "SELECT u.id, u.email, u.display_name FROM users u JOIN room_members rm ON u.id = rm.user_id WHERE rm.room_id = ?",
+    let members = sqlx::query_as::<_, (String, String, String, Option<String>)>(
+        "SELECT u.id, u.email, u.display_name, u.avatar_url FROM users u JOIN room_members rm ON u.id = rm.user_id WHERE rm.room_id = ?",
     )
     .bind(&room_id)
     .fetch_all(&state.db)
@@ -148,10 +150,11 @@ pub async fn get_room(
         created_at: room.created_at,
         members: members
             .into_iter()
-            .map(|(id, email, display_name)| UserPublic {
+            .map(|(id, email, display_name, avatar_url)| UserPublic {
                 id,
                 email,
                 display_name,
+                avatar_url,
             })
             .collect(),
     }))
@@ -179,8 +182,8 @@ pub async fn get_messages(
 
     // Query messages with user email via LEFT JOIN for Gravatar hash
     let rows = if let Some(before) = &params.before {
-        sqlx::query_as::<_, (String, String, String, String, String, String, bool, String, Option<String>, Option<String>)>(
-            "SELECT m.id, m.room_id, m.sender_id, m.sender_name, m.content, m.mentions, m.is_ai, m.created_at, m.ai_meta, u.email \
+        sqlx::query_as::<_, (String, String, String, String, String, String, bool, String, Option<String>, Option<String>, Option<String>)>(
+            "SELECT m.id, m.room_id, m.sender_id, m.sender_name, m.content, m.mentions, m.is_ai, m.created_at, m.ai_meta, m.image_url, u.email \
              FROM messages m LEFT JOIN users u ON m.sender_id = u.id \
              WHERE m.room_id = ? AND m.created_at < ? ORDER BY m.created_at DESC LIMIT ?",
         )
@@ -190,8 +193,8 @@ pub async fn get_messages(
         .fetch_all(&state.db)
         .await
     } else {
-        sqlx::query_as::<_, (String, String, String, String, String, String, bool, String, Option<String>, Option<String>)>(
-            "SELECT m.id, m.room_id, m.sender_id, m.sender_name, m.content, m.mentions, m.is_ai, m.created_at, m.ai_meta, u.email \
+        sqlx::query_as::<_, (String, String, String, String, String, String, bool, String, Option<String>, Option<String>, Option<String>)>(
+            "SELECT m.id, m.room_id, m.sender_id, m.sender_name, m.content, m.mentions, m.is_ai, m.created_at, m.ai_meta, m.image_url, u.email \
              FROM messages m LEFT JOIN users u ON m.sender_id = u.id \
              WHERE m.room_id = ? ORDER BY m.created_at DESC LIMIT ?",
         )
@@ -205,7 +208,7 @@ pub async fn get_messages(
     let payloads: Vec<MessagePayload> = rows
         .into_iter()
         .rev()
-        .map(|(id, room_id, sender_id, sender_name, content, mentions, is_ai, created_at, ai_meta_str, email)| {
+        .map(|(id, room_id, sender_id, sender_name, content, mentions, is_ai, created_at, ai_meta_str, image_url, email)| {
             let ai_meta = ai_meta_str
                 .as_deref()
                 .and_then(|s| serde_json::from_str::<crate::models::AiMeta>(s).ok());
@@ -223,6 +226,7 @@ pub async fn get_messages(
                 created_at,
                 ai_meta,
                 avatar_hash,
+                image_url,
             }
         })
         .collect();
diff --git a/server/src/handlers/upload.rs b/server/src/handlers/upload.rs
new file mode 100644
index 0000000..107a026
--- /dev/null
+++ b/server/src/handlers/upload.rs
@@ -0,0 +1,66 @@
+use axum::{
+    extract::Multipart,
+    http::StatusCode,
+    Json,
+};
+use serde::Serialize;
+use uuid::Uuid;
+
+use crate::middleware::auth::AuthUser;
+
+#[derive(Serialize)]
+pub struct UploadResponse {
+    pub url: String,
+}
+
+pub async fn upload_chat_image(
+    _auth: AuthUser,
+    mut multipart: Multipart,
+) -> Result<Json<UploadResponse>, (StatusCode, String)> {
+    while let Some(field) = multipart
+        .next_field()
+        .await
+        .map_err(|e| (StatusCode::BAD_REQUEST, e.to_string()))?
+    {
+        let content_type = field.content_type().unwrap_or("").to_string();
+        let ext = match content_type.as_str() {
+            "image/png" => "png",
+            "image/jpeg" => "jpg",
+            "image/gif" => "gif",
+            "image/webp" => "webp",
+            _ => {
+                return Err((
+                    StatusCode::BAD_REQUEST,
+                    "Only PNG, JPG, GIF, WebP images are allowed".into(),
+                ))
+            }
+        };
+
+        let data = field
+            .bytes()
+            .await
+            .map_err(|e| (StatusCode::BAD_REQUEST, e.to_string()))?;
+
+        if data.len() > 5 * 1024 * 1024 {
+            return Err((StatusCode::BAD_REQUEST, "Image must be under 5MB".into()));
+        }
+
+        let dir = "uploads/chat-images";
+        tokio::fs::create_dir_all(dir)
+            .await
+            .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+        let filename = format!("{}.{}", Uuid::new_v4(), ext);
+        let path = format!("{}/{}", dir, filename);
+
+        tokio::fs::write(&path, &data)
+            .await
+            .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+        return Ok(Json(UploadResponse {
+            url: format!("/uploads/chat-images/{}", filename),
+        }));
+    }
+
+    Err((StatusCode::BAD_REQUEST, "No image provided".into()))
+}
diff --git a/server/src/handlers/ws.rs b/server/src/handlers/ws.rs
index 151aaed..08575c6 100644
--- a/server/src/handlers/ws.rs
+++ b/server/src/handlers/ws.rs
@@ -122,6 +122,7 @@ async fn handle_socket(socket: WebSocket, state: Arc<AppState>, user_id: String,
                     room_id,
                     content,
                     mentions,
+                    image_url,
                 } => {
                     tracing::info!("User {} sending message to room {}", user_id_clone, room_id);
                     handle_send_message(
@@ -132,6 +133,7 @@ async fn handle_socket(socket: WebSocket, state: Arc<AppState>, user_id: String,
                         &room_id,
                         &content,
                         &mentions,
+                        image_url.as_deref(),
                     )
                     .await;
                 }
@@ -156,14 +158,15 @@ async fn handle_send_message(
     room_id: &str,
     content: &str,
     mentions: &[String],
+    image_url: Option<&str>,
 ) {
     let msg_id = Uuid::new_v4().to_string();
     let mentions_json = serde_json::to_string(mentions).unwrap_or_else(|_| "[]".to_string());
     let now = chrono::Utc::now().to_rfc3339();
 
-    // Store in database
+    // Store in database (with image_url)
     let _ = sqlx::query(
-        "INSERT INTO messages (id, room_id, sender_id, sender_name, content, mentions, is_ai, created_at) VALUES (?, ?, ?, ?, ?, ?, 0, ?)",
+        "INSERT INTO messages (id, room_id, sender_id, sender_name, content, mentions, is_ai, created_at, image_url) VALUES (?, ?, ?, ?, ?, ?, 0, ?, ?)",
     )
     .bind(&msg_id)
     .bind(room_id)
@@ -172,6 +175,7 @@ async fn handle_send_message(
     .bind(content)
     .bind(&mentions_json)
     .bind(&now)
+    .bind(image_url)
     .execute(&state.db)
     .await;
 
@@ -187,7 +191,7 @@ async fn handle_send_message(
         created_at: now,
         ai_meta: None,
         avatar_hash: crate::models::gravatar_hash(email),
-
+        image_url: image_url.map(String::from),
     };
 
     let _ = state.tx.send(BroadcastEvent {
@@ -226,16 +230,25 @@ async fn handle_send_message(
         },
     });
 
-    // Fetch recent history
-    let recent_messages = sqlx::query_as::<_, (String, String, bool)>(
-        "SELECT sender_name, content, is_ai FROM messages WHERE room_id = ? ORDER BY created_at DESC LIMIT 50",
+    // Fetch recent history (including image_url for multimodal support)
+    let recent_messages = sqlx::query_as::<_, (String, String, bool, Option<String>)>(
+        "SELECT sender_name, content, is_ai, image_url FROM messages WHERE room_id = ? ORDER BY created_at DESC LIMIT 50",
     )
     .bind(room_id)
     .fetch_all(&state.db)
     .await
     .unwrap_or_default();
 
-    let history: Vec<(String, String, bool)> = recent_messages.into_iter().rev().collect();
+    // Process history: encode images as base64 data URLs for OpenRouter
+    let mut history: Vec<(String, String, bool, Option<String>)> = Vec::new();
+    for (sender_name, msg_content, is_ai, msg_image_url) in recent_messages.into_iter().rev() {
+        let image_data_url = match &msg_image_url {
+            Some(url) if !is_ai => encode_image_as_data_url(url).await,
+            _ => None,
+        };
+        history.push((sender_name, msg_content, is_ai, image_data_url));
+    }
+
     let mut chat_history = openrouter::build_chat_history(&system_prompt, &history);
 
     // Build tools for AI
@@ -327,7 +340,7 @@ async fn handle_send_message(
 
                         chat_history.push(openrouter::ChatMessage {
                             role: "tool".into(),
-                            content: Some(tool_result),
+                            content: Some(openrouter::Content::Text(tool_result)),
                             tool_calls: None,
                             tool_call_id: Some(tool_call.id.clone()),
                         });
@@ -414,6 +427,7 @@ async fn handle_send_message(
         created_at: ai_now,
         ai_meta,
         avatar_hash: String::new(),
+        image_url: None,
     };
 
     let _ = state.tx.send(BroadcastEvent {
@@ -424,6 +438,29 @@ async fn handle_send_message(
     });
 }
 
+/// Read a local image file and encode it as a base64 data URL for the OpenRouter API.
+async fn encode_image_as_data_url(url: &str) -> Option<String> {
+    // url is like "/uploads/chat-images/uuid.png"
+    let file_path = url.strip_prefix('/').unwrap_or(url);
+    let data = tokio::fs::read(file_path).await.ok()?;
+
+    let mime = if file_path.ends_with(".png") {
+        "image/png"
+    } else if file_path.ends_with(".jpg") || file_path.ends_with(".jpeg") {
+        "image/jpeg"
+    } else if file_path.ends_with(".gif") {
+        "image/gif"
+    } else if file_path.ends_with(".webp") {
+        "image/webp"
+    } else {
+        "application/octet-stream"
+    };
+
+    use base64::Engine;
+    let b64 = base64::engine::general_purpose::STANDARD.encode(&data);
+    Some(format!("data:{};base64,{}", mime, b64))
+}
+
 /// Extract a human-readable input string from tool arguments (for UI display).
 fn extract_tool_input(tool_name: &str, arguments: &str) -> String {
     let args: serde_json::Value = serde_json::from_str(arguments).unwrap_or_default();
diff --git a/server/src/main.rs b/server/src/main.rs
index 153bf8c..663c976 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -4,7 +4,7 @@ mod models;
 mod services;
 
 use axum::{
-    routing::{get, post},
+    routing::{get, post, put},
     Router,
 };
 use sqlx::sqlite::SqlitePoolOptions;
@@ -81,6 +81,26 @@ async fn main() {
         Err(e) => panic!("Failed to run migration 004: {}", e),
     }
 
+    // Run migration 005 - avatar_url on users
+    let migration_005 = include_str!("../migrations/005_avatar.sql");
+    match sqlx::raw_sql(migration_005).execute(&db).await {
+        Ok(_) => tracing::info!("Migration 005 applied"),
+        Err(e) if e.to_string().contains("duplicate column") => {
+            tracing::debug!("Migration 005 already applied, skipping");
+        }
+        Err(e) => panic!("Failed to run migration 005: {}", e),
+    }
+
+    // Run migration 006 - image_url on messages
+    let migration_006 = include_str!("../migrations/006_image_url.sql");
+    match sqlx::raw_sql(migration_006).execute(&db).await {
+        Ok(_) => tracing::info!("Migration 006 applied"),
+        Err(e) if e.to_string().contains("duplicate column") => {
+            tracing::debug!("Migration 006 already applied, skipping");
+        }
+        Err(e) => panic!("Failed to run migration 006: {}", e),
+    }
+
     tracing::info!("Database initialized");
 
     let (tx, _rx) = broadcast::channel::<models::BroadcastEvent>(4096);
@@ -106,17 +126,24 @@ async fn main() {
         .route("/api/auth/register", post(handlers::auth::register))
         .route("/api/auth/login", post(handlers::auth::login))
         .route("/api/auth/me", get(handlers::auth::me))
+        // Profile routes
+        .route("/api/auth/profile", put(handlers::profile::update_profile))
+        .route("/api/auth/avatar", post(handlers::profile::upload_avatar).delete(handlers::profile::delete_avatar))
         // Room routes
         .route("/api/rooms", get(handlers::rooms::list_rooms).post(handlers::rooms::create_room))
         .route("/api/rooms/:room_id", get(handlers::rooms::get_room).delete(handlers::rooms::delete_room))
         .route("/api/rooms/:room_id/messages", get(handlers::rooms::get_messages))
         .route("/api/rooms/:room_id/join", post(handlers::rooms::join_room))
         .route("/api/rooms/:room_id/clear", post(handlers::rooms::clear_room))
+        // Upload (chat images)
+        .route("/api/upload", post(handlers::upload::upload_chat_image))
         // Models
         .route("/api/models", get(handlers::models::list_models))
         // Invite routes
         .route("/api/invites", post(handlers::invites::create_invite))
         .route("/api/invites/:token/accept", post(handlers::invites::accept_invite))
+        // Uploaded files (avatars)
+        .nest_service("/uploads", ServeDir::new("uploads"))
         // WebSocket
         .route("/ws", get(handlers::ws::ws_handler))
         .layer(cors)
diff --git a/server/src/models/mod.rs b/server/src/models/mod.rs
index 0dfb230..db08f06 100644
--- a/server/src/models/mod.rs
+++ b/server/src/models/mod.rs
@@ -74,6 +74,8 @@ pub struct UserPublic {
     pub id: String,
     pub email: String,
     pub display_name: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub avatar_url: Option<String>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -134,6 +136,8 @@ pub enum WsClientMessage {
         content: String,
         #[serde(default)]
         mentions: Vec<String>,
+        #[serde(default)]
+        image_url: Option<String>,
     },
     #[serde(rename = "join_room")]
     JoinRoom { room_id: String },
@@ -207,6 +211,8 @@ pub struct MessagePayload {
     pub ai_meta: Option<AiMeta>,
     #[serde(default)]
     pub avatar_hash: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub image_url: Option<String>,
 }
 
 /// Compute Gravatar-compatible MD5 hash from an email address.
diff --git a/server/src/services/openrouter.rs b/server/src/services/openrouter.rs
index dc6bce4..a1f44a6 100644
--- a/server/src/services/openrouter.rs
+++ b/server/src/services/openrouter.rs
@@ -16,11 +16,34 @@ struct ChatRequest {
     stream: Option<bool>,
 }
 
+/// Content can be a plain text string or multimodal (text + image) parts.
+/// Serializes to a JSON string or a JSON array, matching the OpenAI/OpenRouter API.
+#[derive(Debug, Serialize, Deserialize, Clone)]
+#[serde(untagged)]
+pub enum Content {
+    Text(String),
+    Parts(Vec<ContentPart>),
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+#[serde(tag = "type")]
+pub enum ContentPart {
+    #[serde(rename = "text")]
+    Text { text: String },
+    #[serde(rename = "image_url")]
+    ImageUrl { image_url: ImageUrlData },
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct ImageUrlData {
+    pub url: String,
+}
+
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct ChatMessage {
     pub role: String,
     #[serde(skip_serializing_if = "Option::is_none")]
-    pub content: Option<String>,
+    pub content: Option<Content>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub tool_calls: Option<Vec<ToolCall>>,
     #[serde(skip_serializing_if = "Option::is_none")]
@@ -350,7 +373,7 @@ pub async fn chat_completion_stream(
             // AI requested tool calls
             let assistant_msg = ChatMessage {
                 role: "assistant".into(),
-                content: if full_content.is_empty() { None } else { Some(full_content) },
+                content: if full_content.is_empty() { None } else { Some(Content::Text(full_content)) },
                 tool_calls: Some(tool_call_accum),
                 tool_call_id: None,
             };
@@ -366,29 +389,47 @@ pub async fn chat_completion_stream(
 
 /// Build the message history for OpenRouter from stored messages.
 /// Includes the system prompt as the first message.
+/// Messages with image data URLs will be sent as multimodal content.
 pub fn build_chat_history(
     system_prompt: &str,
-    messages: &[(String, String, bool)], // (sender_name, content, is_ai)
+    messages: &[(String, String, bool, Option<String>)], // (sender_name, content, is_ai, image_data_url)
 ) -> Vec<ChatMessage> {
     let mut history = vec![ChatMessage {
         role: "system".to_string(),
-        content: Some(system_prompt.to_string()),
+        content: Some(Content::Text(system_prompt.to_string())),
         tool_calls: None,
         tool_call_id: None,
     }];
 
-    for (sender_name, content, is_ai) in messages {
+    for (sender_name, content, is_ai, image_data_url) in messages {
         if *is_ai {
             history.push(ChatMessage {
                 role: "assistant".to_string(),
-                content: Some(content.clone()),
+                content: Some(Content::Text(content.clone())),
                 tool_calls: None,
                 tool_call_id: None,
             });
         } else {
+            let text = if content.is_empty() {
+                format!("[{}] shared an image:", sender_name)
+            } else {
+                format!("[{}]: {}", sender_name, content)
+            };
+
+            let msg_content = if let Some(data_url) = image_data_url {
+                Content::Parts(vec![
+                    ContentPart::Text { text },
+                    ContentPart::ImageUrl {
+                        image_url: ImageUrlData { url: data_url.clone() },
+                    },
+                ])
+            } else {
+                Content::Text(text)
+            };
+
             history.push(ChatMessage {
                 role: "user".to_string(),
-                content: Some(format!("[{}]: {}", sender_name, content)),
+                content: Some(msg_content),
                 tool_calls: None,
                 tool_call_id: None,
             });