--- a/avatar.js
+++ b/avatar.js
@@ -9,6 +9,7 @@ function initAvatar(connection) {
     const avatar_file = document.getElementById('avatar-file');
     const avatar_upload = document.getElementById('avatar-upload');
     const avatar_change = document.getElementById('avatar-change');
+    const avatar_access = document.getElementById('avatar-access');
 
     avatar_img.src = DEFAULT_AVATAR;
     const iq = $iq({type: 'get'})
@@ -168,4 +169,32 @@ function initAvatar(connection) {
         }
         return [bytes, unit];
     }
+
+    avatar_access.addEventListener('change', function (evt) {
+        const iq = $iq({type: 'set'})
+            .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub#owner'})
+                .c('configure', {node: 'urn:xmpp:avatar:metadata'})
+                    .c('x', {xmlns: 'jabber:x:data', type: 'submit'})
+                        .c('field', {'var': 'FORM_TYPE', type: 'hidden'})
+                            .c('value')
+                                .t('http://jabber.org/protocol/pubsub#node_config')
+                                .up()
+                            .up()
+                        .c('field', {'var': 'pubsub#access_model'})
+                            .c('value')
+                                .t(evt.target.value)
+                                .up()
+                            .up()
+        connection.sendIQ(iq, onAvatarConfigured, onAvatarConfigureError.bind(null, 'PubSub configuration failed.'));
+    });
+
+    function onAvatarConfigured(result_iq)
+    {
+        console.log('Successfully set avatar access model.')
+    }
+
+    function onAvatarConfigureError(string)
+    {
+        console.log('Failed to configure avatar node: ' + string);
+    }
 }

--- a/index.xhtml
+++ b/index.xhtml
@@ -36,7 +36,7 @@
   </div>
 </nav>
 
-<div id="main">
+<div class="container">
 
 <form id="connection">
 <label>JID: <input type="email" id="jid"/></label><br/>
@@ -56,7 +56,11 @@
 <img id="avatar" style="max-width:96px;max-height:96px"/> <span id="avatar-size"/><br/>
 <input type="file" style="display:none" accept="image/*" id="avatar-file"/>
 <button id="avatar-upload">Choose a new avatar</button><br/>
-<button id="avatar-change" disabled="">Upload this avatar</button>
+<button id="avatar-change" disabled="">Upload this avatar</button><br/>
+<label>Who can see your avatar? <select id="avatar-access">
+<option value="open">Anyone (pick this if you use public groupchats)</option>
+<option value="presence">Only your contacts</option>
+</select></label>
 </p>
 <h2>Dangerous zone</h2>
 <p>