diff --git a/customize.dist/pages.js b/customize.dist/pages.js
index 793f2133e..7f9583828 100644
--- a/customize.dist/pages.js
+++ b/customize.dist/pages.js
@@ -728,7 +728,7 @@ define([
 
     Pages['/profile/'] = Pages['/profile/index.html'] = function () {
         return [
-            h('div#toolbar'),
+            h('div#cp-toolbar'),
             h('div#container'),
             loadingScreen()
         ];
diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less
index c000248ba..38c242b10 100644
--- a/customize.dist/src/less2/main.less
+++ b/customize.dist/src/less2/main.less
@@ -34,4 +34,5 @@ body.cp-app-contacts {   @import "../../../contacts/app-contacts.less";    }
 body.cp-app-poll { @import "../../../poll/app-poll.less"; }
 body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
 body.cp-app-todo { @import "../../../todo/app-todo.less"; }
+body.cp-app-profile { @import "../../../profile/app-profile.less"; }
 
diff --git a/www/common/sframe-common-interface.js b/www/common/sframe-common-interface.js
index e023e8f11..70c79fae4 100644
--- a/www/common/sframe-common-interface.js
+++ b/www/common/sframe-common-interface.js
@@ -339,6 +339,7 @@ define([
                 $img.attr('src', src);
                 $img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
                 UI.displayMediatagImage(Common, $img, function (err, $image, img) {
+                    if (err) { return void console.error(err); }
                     var w = img.width;
                     var h = img.height;
                     if (w>h) {
diff --git a/www/common/sframe-protocol.js b/www/common/sframe-protocol.js
index d568592ed..846502120 100644
--- a/www/common/sframe-protocol.js
+++ b/www/common/sframe-protocol.js
@@ -168,4 +168,8 @@ define({
     // in the drive at registration.
     'Q_MERGE_ANON_DRIVE': true,
 
+    // Add or remove the avatar from the profile.
+    // We have to pin/unpin the avatar and store/remove the value from the user object
+    'Q_PROFILE_AVATAR_ADD': true,
+    'Q_PROFILE_AVATAR_REMOVE': true
 });
diff --git a/www/profile/index.html b/www/profile/index.html
index 5200564ce..e3f7eacc4 100644
--- a/www/profile/index.html
+++ b/www/profile/index.html
@@ -1,20 +1,38 @@
 <!DOCTYPE html>
-<html class="cp">
-<!-- If this file is not called customize.dist/src/template.html, it is generated -->
+<html>
 <head>
-    <title data-localization="main_title">CryptPad: Zero Knowledge, Collaborative Real Time Editing</title>
+    <title>CryptPad</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
-    <script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
-
-    <link rel="stylesheet" href="/bower_components/codemirror/lib/codemirror.css">
-    <link rel="stylesheet" href="/bower_components/codemirror/addon/dialog/dialog.css">
-    <link rel="stylesheet" href="/bower_components/codemirror/addon/fold/foldgutter.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #sbox-iframe {
+            position:fixed;
+            top:0px;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+        #sbox-filePicker-iframe {
+            position: fixed;
+            top:0; left:0;
+            bottom:0; right:0;
+            width:100%;
+            height: 100%;
+            border: 0;
+        }
+    </style>
 </head>
-<body class="html">
-    <noscript>
-        <p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
-        <p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
-    </noscript>
-</html>
+<body>
+<iframe id="sbox-iframe">
diff --git a/www/profile/main.js b/www/profile/main.js
index ef2ac9a81..d25f04606 100644
--- a/www/profile/main.js
+++ b/www/profile/main.js
@@ -1,532 +1,95 @@
-require.config({
-    paths: {
-        cm: '/bower_components/codemirror'
-    }
-});
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
 define([
+    '/bower_components/nthen/index.js',
+    '/api/config',
     'jquery',
-    '/common/cryptpad-common.js',
-    '/bower_components/chainpad-listmap/chainpad-listmap.js',
-    '/bower_components/chainpad-crypto/crypto.js',
-    '/bower_components/marked/marked.min.js',
-    '/common/toolbar2.js',
-    'cm/lib/codemirror',
-    'cm/mode/markdown/markdown',
-    'less!/profile/main.less',
-    'less!/customize/src/less/toolbar.less',
-    'less!/customize/src/less/cryptpad.less',
-    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
-], function ($, Cryptpad, Listmap, Crypto, Marked, Toolbar, CodeMirror) {
+    '/common/requireconfig.js',
+    '/common/sframe-common-outer.js'
+], function (nThen, ApiConfig, $, RequireConfig, SFCommonO) {
+    var requireConfig = RequireConfig();
 
-    var APP = window.APP = {
-        Cryptpad: Cryptpad,
-        _onRefresh: []
-    };
-
-    $(window.document).on('decryption', function (e) {
-        var decrypted = e.originalEvent;
-        if (decrypted.callback) { decrypted.callback(); }
-    })
-    .on('decryptionError', function (e) {
-        var error = e.originalEvent;
-        Cryptpad.alert(error.message);
-    });
-
-    // Marked
-    var renderer = new Marked.Renderer();
-    Marked.setOptions({
-        renderer: renderer,
-        sanitize: true
-    });
-    // Tasks list
-    var checkedTaskItemPtn = /^\s*\[x\]\s*/;
-    var uncheckedTaskItemPtn = /^\s*\[ \]\s*/;
-    renderer.listitem = function (text) {
-        var isCheckedTaskItem = checkedTaskItemPtn.test(text);
-        var isUncheckedTaskItem = uncheckedTaskItemPtn.test(text);
-        if (isCheckedTaskItem) {
-            text = text.replace(checkedTaskItemPtn,
-                '<i class="fa fa-check-square" aria-hidden="true"></i>&nbsp;') + '\n';
-        }
-        if (isUncheckedTaskItem) {
-            text = text.replace(uncheckedTaskItemPtn,
-                '<i class="fa fa-square-o" aria-hidden="true"></i>&nbsp;') + '\n';
-        }
-        var cls = (isCheckedTaskItem || isUncheckedTaskItem) ? ' class="todo-list-item"' : '';
-        return '<li'+ cls + '>' + text + '</li>\n';
-    };
-    /*renderer.image = function (href, title, text) {
-        if (href.slice(0,6) === '/file/') {
-            var parsed = Cryptpad.parsePadUrl(href);
-            var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
-            var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
-            var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '">';
-            mt += '</media-tag>';
-            return mt;
-        }
-        var out = '<img src="' + href + '" alt="' + text + '"';
-        if (title) {
-            out += ' title="' + title + '"';
-        }
-        out += this.options.xhtml ? '/>' : '>';
-        return out;
-    };*/
-
-    var Messages = Cryptpad.Messages;
-
-    var DISPLAYNAME_ID = "displayName";
-    var LINK_ID = "link";
-    var AVATAR_ID = "avatar";
-    var DESCRIPTION_ID = "description";
-    var PUBKEY_ID = "pubKey";
-    var CREATE_ID = "createProfile";
-    var HEADER_ID = "header";
-    var HEADER_RIGHT_ID = "rightside";
-    var CREATE_INVITE_BUTTON = 'inviteButton'; /* jshint ignore: line */
-    var VIEW_PROFILE_BUTTON = 'viewProfileButton';
-
-    var createEditableInput = function ($block, name, ph, getValue, setValue, realtime, fallbackValue) {
-        fallbackValue = fallbackValue || ''; // don't ever display 'null' or 'undefined'
-        var lastVal;
-        getValue(function (value) {
-            lastVal = value;
-            var $input = $('<input>', {
-                'id': name+'Input',
-                placeholder: ph
-            }).val(value);
-            var $icon = $('<span>', {'class': 'fa fa-pencil edit'});
-            var editing = false;
-            var todo = function () {
-                if (editing) { return; }
-                editing = true;
-
-                var newVal = $input.val().trim();
-
-                if (newVal === lastVal) {
-                    editing = false;
-                    return;
-                }
-
-                setValue(newVal, function (err) {
-                    if (err) { return void console.error(err); }
-                    Cryptpad.whenRealtimeSyncs(realtime, function () {
-                        lastVal = newVal;
-                        Cryptpad.log(Messages._getKey('profile_fieldSaved', [newVal || fallbackValue]));
-                        editing = false;
-                    });
-                });
-            };
-            $input.on('keyup', function (e) {
-                if (e.which === 13) { return void todo(); }
-                if (e.which === 27) {
-                    $input.val(lastVal);
-                }
-            });
-            $icon.click(function () { $input.focus(); });
-            $input.focus(function () {
-                $input.width('');
-            });
-            $input.focusout(todo);
-            $block.append($input).append($icon);
-        });
-    };
-
-/* jshint ignore:start */
-    var isFriend = function (proxy, edKey) {
-        var friends = Cryptpad.find(proxy, ['friends']);
-        return typeof(edKey) === 'string' && friends && (edKey in friends);
-    };
-
-    var addCreateInviteLinkButton = function ($container) {
-        return;
-        var obj = APP.lm.proxy;
-
-        var proxy = Cryptpad.getProxy();
-        var userViewHash = Cryptpad.find(proxy, ['profile', 'view']);
-
-        var edKey = obj.edKey;
-        var curveKey = obj.curveKey;
-
-        if (!APP.readOnly || !curveKey || !edKey || userViewHash === window.location.hash.slice(1) || isFriend(proxy, edKey)) {
-            //console.log("edit mode or missing curve key, or you're viewing your own profile");
-            return;
-        }
-
-        // sanitize user inputs
-
-        var unsafeName = obj.name || '';
-        console.log(unsafeName);
-        var name = Cryptpad.fixHTML(unsafeName) || Messages.anonymous;
-        console.log(name);
-
-        console.log("Creating invite button");
-        $("<button>", {
-            id: CREATE_INVITE_BUTTON,
-            title: Messages.profile_inviteButtonTitle,
-        })
-        .addClass('btn btn-success')
-        .text(Messages.profile_inviteButton)
-        .click(function () {
-            Cryptpad.confirm(Messages._getKey('profile_inviteExplanation', [name]), function (yes) {
-                if (!yes) { return; }
-                console.log(obj.curveKey);
-                Cryptpad.alert("TODO");
-                // TODO create a listmap object using your curve keys
-                // TODO fill the listmap object with your invite data
-                // TODO generate link to invite object
-                // TODO copy invite link to clipboard
-            }, null, true);
-        })
-        .appendTo($container);
-    };
-        /* jshint ignore:end */
-
-    var addViewButton = function ($container) {
-        if (!Cryptpad.isLoggedIn() || window.location.hash) {
-            return;
-        }
-
-        var hash = Cryptpad.find(Cryptpad.getProxy(), ['profile', 'view']);
-        var url = '/profile/#' + hash;
-
-        var $button = $('<button>', {
-            'class': 'btn btn-success',
-            id: VIEW_PROFILE_BUTTON,
-        })
-        .text(Messages.profile_viewMyProfile)
-        .click(function () {
-            window.open(url, '_blank');
-        });
-        $container.append($button);
-    };
-
-    var addDisplayName = function ($container) {
-        var $block = $('<div>', {id: DISPLAYNAME_ID}).appendTo($container);
-
-
-        var getValue = function (cb) {
-            cb(APP.lm.proxy.name);
+    // Loaded in load #2
+    nThen(function (waitFor) {
+        $(waitFor());
+    }).nThen(function (waitFor) {
+        var req = {
+            cfg: requireConfig,
+            req: [ '/common/loading.js' ],
+            pfx: window.location.origin
         };
-        var placeholder = Messages.profile_namePlaceholder;
-        if (APP.readOnly) {
-            var $span = $('<span>', {'class': DISPLAYNAME_ID}).appendTo($block);
-            getValue(function (value) {
-                $span.text(value || Messages.anonymous);
-            });
+        window.rc = requireConfig;
+        window.apiconf = ApiConfig;
+        $('#sbox-iframe').attr('src',
+            ApiConfig.httpSafeOrigin + '/profile/inner.html?' + requireConfig.urlArgs +
+                '#' + encodeURIComponent(JSON.stringify(req)));
 
-            //addCreateInviteLinkButton($block);
-            return;
-        }
-        var setValue = function (value, cb) {
-            APP.lm.proxy.name = value;
-            cb();
+        // This is a cheap trick to avoid loading sframe-channel in parallel with the
+        // loading screen setup.
+        var done = waitFor();
+        var onMsg = function (msg) {
+            var data = JSON.parse(msg.data);
+            if (data.q !== 'READY') { return; }
+            window.removeEventListener('message', onMsg);
+            var _done = done;
+            done = function () { };
+            _done();
         };
-        var rt = Cryptpad.getStore().getProxy().info.realtime;
-        createEditableInput($block, DISPLAYNAME_ID, placeholder, getValue, setValue, rt, Messages.anonymous);
-    };
-
-    var addLink = function ($container) {
-        var $block = $('<div>', {id: LINK_ID}).appendTo($container);
-        var getValue = function (cb) {
-            cb(APP.lm.proxy.url);
-        };
-        if (APP.readOnly) {
-            var $a = $('<a>', {
-                'class': LINK_ID,
-                target: '_blank',
-                rel: 'noreferrer noopener'
-            }).appendTo($block);
-            getValue(function (value) {
-                if (!value) {
-                    return void $a.hide();
-                }
-                $a.attr('href', value).text(value);
-            });
-            return;
-        }
-        var setValue = function (value, cb) {
-            APP.lm.proxy.url = value;
-            cb();
-        };
-        var rt = APP.lm.realtime;
-        var placeholder = Messages.profile_urlPlaceholder;
-        createEditableInput($block, LINK_ID, placeholder, getValue, setValue, rt);
-    };
-
-    var addAvatar = function ($container) {
-        var $block = $('<div>', {id: AVATAR_ID}).appendTo($container);
-        var $span = $('<span>').appendTo($block);
-        var allowedMediaTypes = Cryptpad.avatarAllowedTypes;
-        var displayAvatar = function () {
-            $span.html('');
-            if (!APP.lm.proxy.avatar) {
-                $('<img>', {
-                    src: '/customize/images/avatar.png',
-                    title: Messages.profile_avatar,
-                    alt: 'Avatar'
-                }).appendTo($span);
-                return;
+        window.addEventListener('message', onMsg);
+    }).nThen(function (/*waitFor*/) {
+        var getSecrets = function (Cryptpad) {
+            // 1st case: visiting someone else's profile with hash in the URL
+            if (window.location.hash) {
+                return Cryptpad.getSecrets('profile', window.location.hash.slice(1));
             }
-            Cryptpad.displayAvatar($span, APP.lm.proxy.avatar);
-
-            if (APP.readOnly) { return; }
-
-            var $delButton = $('<button>', {
-                'class': 'delete btn btn-danger fa fa-times',
-                title: Messages.fc_delete
-            });
-            $span.append($delButton);
-            $delButton.click(function () {
-                var oldChanId = Cryptpad.hrefToHexChannelId(APP.lm.proxy.avatar);
-                Cryptpad.unpinPads([oldChanId], function (e) {
-                    if (e) { Cryptpad.log(e); }
-                    delete APP.lm.proxy.avatar;
-                    delete Cryptpad.getProxy().profile.avatar;
-                    Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
-                        var driveRt = Cryptpad.getStore().getProxy().info.realtime;
-                        Cryptpad.whenRealtimeSyncs(driveRt, function () {
-                            displayAvatar();
-                        });
-                    });
-                });
-            });
-        };
-        displayAvatar();
-        if (APP.readOnly) { return; }
-
-        var fmConfig = {
-            noHandlers: true,
-            noStore: true,
-            body: $('body'),
-            onUploaded: function (ev, data) {
-                var chanId = Cryptpad.hrefToHexChannelId(data.url);
-                var profile = Cryptpad.getProxy().profile;
-                var old = profile.avatar;
-                var todo = function () {
-                    Cryptpad.pinPads([chanId], function (e) {
-                        if (e) { return void Cryptpad.log(e); }
-                        APP.lm.proxy.avatar = data.url;
-                        Cryptpad.getProxy().profile.avatar = data.url;
-                        Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
-                            var driveRt = Cryptpad.getStore().getProxy().info.realtime;
-                            Cryptpad.whenRealtimeSyncs(driveRt, function () {
-                                displayAvatar();
-                            });
-                        });
-                    });
-                };
-                if (old) {
-                    var oldChanId = Cryptpad.hrefToHexChannelId(old);
-                    Cryptpad.unpinPads([oldChanId], function (e) {
-                        if (e) { Cryptpad.log(e); }
-                        todo();
-                    });
-                    return;
-                }
-                todo();
+            // 2nd case: visiting our own existing profile
+            var obj = Cryptpad.getProxy();
+            if (obj.profile && obj.profile.view && obj.profile.edit) {
+                return Cryptpad.getSecrets('profile', obj.profile.edit);
             }
-        };
-        APP.FM = Cryptpad.createFileManager(fmConfig);
-        var data = {
-            FM: APP.FM,
-            filter: function (file) {
-                var sizeMB = Cryptpad.bytesToMegabytes(file.size);
-                var type = file.type;
-                return sizeMB <= 0.5 && allowedMediaTypes.indexOf(type) !== -1;
-            },
-            accept: ".gif,.jpg,.jpeg,.png"
-        };
-        var $upButton = Cryptpad.createButton('upload', false, data);
-        $upButton.text(Messages.profile_upload);
-        $upButton.prepend($('<span>', {'class': 'fa fa-upload'}));
-        $block.append($upButton);
-    };
-
-    var addDescription = function ($container) {
-        var $block = $('<div>', {id: DESCRIPTION_ID}).appendTo($container);
-
-        if (APP.readOnly) {
-            if (!(APP.lm.proxy.description || "").trim()) { return void $block.hide(); }
-            var $div = $('<div>', {'class': 'rendered'}).appendTo($block);
-            var val = Marked(APP.lm.proxy.description);
-            $div.html(val);
-            return;
-        }
-        $('<h3>').text(Messages.profile_description).insertBefore($block);
-
-        var $ok = $('<span>', {'class': 'ok fa fa-check', title: Messages.saved}).appendTo($block);
-        var $spinner = $('<span>', {'class': 'spin fa fa-spinner fa-pulse'}).appendTo($block);
-        var $textarea = $('<textarea>').val(APP.lm.proxy.description || '');
-        $block.append($textarea);
-        var editor = APP.editor = CodeMirror.fromTextArea($textarea[0], {
-            lineNumbers: true,
-            lineWrapping: true,
-            styleActiveLine : true,
-            mode: "markdown",
-        });
-
-        var onLocal = function () {
-            $ok.hide();
-            $spinner.show();
-            var val = editor.getValue();
-            APP.lm.proxy.description = val;
-            Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
-                $ok.show();
-                $spinner.hide();
-            });
-        };
-
-        editor.on('change', onLocal);
-    };
-
-    var addPublicKey = function ($container) {
-        var $block = $('<div>', {id: PUBKEY_ID});
-        $container.append($block);
-    };
-
-    var createLeftside = function () {
-        var $categories = $('<div>', {'class': 'categories'}).appendTo(APP.$leftside);
-        APP.$usage = $('<div>', {'class': 'usage'}).appendTo(APP.$leftside);
-
-        var $category = $('<div>', {'class': 'category'}).appendTo($categories);
-        $category.append($('<span>', {'class': 'fa fa-user'}));
-        $category.addClass('active');
-        $category.append(Messages.profileButton);
-    };
-
-    var createToolbar = function () {
-        var displayed = ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'];
-        var configTb = {
-            displayed: displayed,
-            ifrw: window,
-            common: Cryptpad,
-            $container: APP.$toolbar,
-            pageTitle: Messages.profileButton
-        };
-        var toolbar = APP.toolbar = Toolbar.create(configTb);
-        toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
-    };
-
-    var onReady = function () {
-        APP.$container.find('#'+CREATE_ID).remove();
-
-        var obj = APP.lm && APP.lm.proxy;
-        if (!APP.readOnly) {
-            var pubKeys = Cryptpad.getPublicKeys();
-            if (pubKeys && pubKeys.curve) {
-                obj.curveKey = pubKeys.curve;
-                obj.edKey = pubKeys.ed;
-            }
-        }
-
-        if (!APP.initialized) {
-            var $header = $('<div>', {id: HEADER_ID}).appendTo(APP.$rightside);
-            addAvatar($header);
-            var $rightside = $('<div>', {id: HEADER_RIGHT_ID}).appendTo($header);
-            addDisplayName($rightside);
-            addLink($rightside);
-            addDescription(APP.$rightside);
-            addViewButton(APP.$rightside); //$rightside);
-            addPublicKey(APP.$rightside);
-            APP.initialized = true;
-            createLeftside();
-        }
-
-        Cryptpad.removeLoadingScreen();
-    };
-
-    var onInit = function () {
-        
-    };
-    var onDisconnect = function () {};
-    var onChange = function () {};
-
-    var andThen = function (profileHash) {
-        var secret = Cryptpad.getSecrets('profile', profileHash);
-        var readOnly = APP.readOnly = secret.keys && !secret.keys.editKeyStr;
-        var listmapConfig = {
-            data: {},
-            websocketURL: Cryptpad.getWebsocketURL(),
-            channel: secret.channel,
-            readOnly: readOnly,
-            validateKey: secret.keys.validateKey || undefined,
-            crypto: Crypto.createEncryptor(secret.keys),
-            userName: 'profile',
-            logLevel: 1,
-        };
-        var lm = APP.lm = Listmap.create(listmapConfig);
-        lm.proxy.on('create', onInit)
-                .on('ready', onReady)
-                .on('disconnect', onDisconnect)
-                .on('change', [], onChange);
-    };
-
-    var getOrCreateProfile = function () {
-        var obj = Cryptpad.getStore().getProxy().proxy;
-        if (obj.profile && obj.profile.view && obj.profile.edit) {
-            return void andThen(obj.profile.edit);
-        }
-        // If the user doesn't have a public profile, ask them if they want to create one
-        var todo = function () {
-            var secret = Cryptpad.getSecrets();
-            obj.profile = {};
-            var channel = Cryptpad.createChannelId();
-            Cryptpad.pinPads([channel], function (e) {
+            // 3rd case: profile creation (create a new random hash, store it later if needed)
+            if (!Cryptpad.isLoggedIn()) { return; }
+            var hash = Cryptpad.createRandomHash();
+            var secret = Cryptpad.getSecrets('profile', hash);
+            Cryptpad.pinPads([secret.channel], function (e) {
                 if (e) {
                     if (e === 'E_OVER_LIMIT') {
-                        Cryptpad.alert(Messages.pinLimitNotPinned, null, true);
+                        // TODO
                     }
-                    return void Cryptpad.log(Messages._getKey('profile_error', [e]));
+                    return;
+                    //return void Cryptpad.log(Messages._getKey('profile_error', [e])) // TODO
                 }
-                obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys);
-                obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys);
-                andThen(obj.profile.edit);
+                obj.profile = {};
+                obj.profile.edit = Cryptpad.getEditHashFromKeys(secret.channel, secret.keys);
+                obj.profile.view = Cryptpad.getViewHashFromKeys(secret.channel, secret.keys);
+            });
+            return secret;
+        };
+        var addRpc = function (sframeChan, Cryptpad) {
+            // Adding a new avatar from the profile: pin it and store it in the object
+            sframeChan.on('Q_PROFILE_AVATAR_ADD', function (data, cb) {
+                var chanId = Cryptpad.hrefToHexChannelId(data);
+                Cryptpad.pinPads([chanId], function (e) {
+                    if (e) { return void cb(e); }
+                    Cryptpad.getProxy().profile.avatar = data.url;
+                    Cryptpad.whenRealtimeSyncs(Cryptpad.getRealtime(), function () {
+                        cb();
+                    });
+                });
+            });
+            // Removing the avatar from the profile: unpin it
+            sframeChan.on('Q_PROFILE_AVATAR_REMOVE', function (data, cb) {
+                var chanId = Cryptpad.hrefToHexChannelId(data);
+                Cryptpad.unpinPads([chanId], function (e) {
+                    delete Cryptpad.getProxy().profile.avatar;
+                    cb(e);
+                });
             });
         };
-
-        Cryptpad.removeLoadingScreen();
-
-        if (!Cryptpad.isLoggedIn()) {
-            var $p = $('<p>', {id: CREATE_ID}).append(Messages.profile_register);
-            var $a = $('<a>', {
-                href: '/register/'
-            });
-            $('<button>', {
-                'class': 'btn btn-success',
-            }).text(Messages.login_register).appendTo($a);
-            $p.append($('<br>')).append($a);
-            APP.$rightside.append($p);
-            return;
-        }
-
-        // make an empty profile for the user on their first visit
-        todo();
-    };
-
-    var onCryptpadReady = function () {
-        APP.$leftside = $('<div>', {id: 'leftSide'}).appendTo(APP.$container);
-        APP.$rightside = $('<div>', {id: 'rightSide'}).appendTo(APP.$container);
-
-        createToolbar();
-
-        if (window.location.hash) {
-            return void andThen(window.location.hash.slice(1));
-        }
-        getOrCreateProfile();
-    };
-
-    $(function () {
-        $(window).click(function () {
-            $('.cp-dropdown-content').hide();
-        });
-
-        APP.$container = $('#container');
-        APP.$toolbar = $('#toolbar');
-
-        Cryptpad.ready(function () {
-            Cryptpad.reportAppUsage();
-            onCryptpadReady();
+        SFCommonO.start({
+            getSecrets: getSecrets,
+            noHash: true, // Don't add the hash in the URL if it doesn't already exist
+            addRpc: addRpc,
+            noRealtime: !localStorage.User_hash
         });
     });
-
 });
diff --git a/www/profile/main.less b/www/profile/main.less
deleted file mode 100644
index d0aa180de..000000000
--- a/www/profile/main.less
+++ /dev/null
@@ -1,143 +0,0 @@
-@import '/customize/src/less/variables.less';
-@import '/customize/src/less/mixins.less';
-@import '/customize/src/less/sidebar-layout.less';
-
-.cp {
-    #header {
-        display: flex;
-        #rightside {
-            flex: 1;
-            display: flex;
-            flex-flow: column;
-        }
-    }
-    #avatar {
-        width: 300px;
-        //height: 350px;
-        margin: 10px;
-        margin-right: 20px;
-        text-align: center;
-        &> span {
-            display: inline-block;
-            text-align: center;
-            height: 300px;
-            width: 300px;
-            border: 1px solid black;
-            border-radius: 4px;
-            overflow: hidden;
-            position: relative;
-            .delete {
-                right: 0;
-                position: absolute;
-                opacity: 0.7;
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-        img {
-            max-width: 100%;
-            max-height: 100%;
-            vertical-align: top;
-        }
-        media-tag {
-            height: 100%;
-            width: 100%;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            img {
-                min-width: 100%;
-                min-height: 100%;
-                max-width: none;
-                max-height: none;
-                flex: 1;
-            }
-        }
-        button {
-            height: 40px;
-            margin: 5px;
-        }
-    }
-    #displayName, #link {
-        width: 100%;
-        height: 40px;
-        margin: 10px 0;
-        input {
-            width: 100%;
-            font-size: 20px;
-            box-sizing: border-box;
-            padding-right: 30px;
-        }
-        input:focus ~ .edit {
-            display: none;
-        }
-        .edit {
-            position: absolute;
-            margin-left: -25px;
-            margin-top: 8px;
-        }
-        .temp {
-            font-weight: 400;
-            font-family: sans-serif;
-        }
-        .displayName {
-            font-weight: bold;
-            font-size: 30px;
-        }
-        .link {
-            font-size: 25px;
-        }
-        .displayName, .link {
-            line-height: 40px;
-        }
-    }
-
-    // I tried using flexbox but messed with how the pencil icon was displayed
-    #inviteButton {
-        float: right;
-    }
-    #viewProfileButton {
-        margin-bottom: 20px;
-        float: right;
-    }
-    #description {
-        position: relative;
-        font-size: 16px;
-        border: 1px solid #DDD;
-        margin-bottom: 20px;
-        .rendered {
-            padding: 0 15px;
-        }
-        .ok, .spin {
-            position: absolute;
-            top: 2px;
-            right: 2px;
-            display: none;
-            z-index: 1000;
-        }
-        textarea {
-            width: 100%;
-            height: 300px;
-        }
-        .CodeMirror {
-            border: 1px solid #DDD;
-            font-family: monospace;
-            font-size: 16px;
-            line-height: initial;
-            pre {
-                margin: 0;
-                font-family: inherit;
-                font-size: inherit;
-                line-height: inherit;
-            }
-        }
-    }
-    #createProfile {
-        height: 100%;
-        display: flex;
-        flex-flow: column;
-        align-items: center;
-        justify-content: center;
-    }
-}
