diff --git a/docs/Client.ts b/docs/Client.ts
index cdadec4..c2a48b0 100644
--- a/docs/Client.ts
+++ b/docs/Client.ts
@@ -3,8 +3,17 @@ import { Env } from 'Env';
 export class Client{
 
     public static room:string = null;
+    private static displayName:string = 'Tod';
 
     constructor(roomToken:string){
         Client.room = roomToken;
     }
+
+    public static setName(clientsName:string):void{
+        this.displayName = clientsName;
+    }
+
+    public static getName():string{
+        return this.displayName;
+    }
 }
diff --git a/docs/Login.ts b/docs/Login.ts
index 021b730..1b71c73 100644
--- a/docs/Login.ts
+++ b/docs/Login.ts
@@ -125,6 +125,9 @@ export class Login extends Module{
         this._tokenInput.addEventListener('blur', this.handleInput);
         this._tokenInput.addEventListener('keyup', this.handleInput);
         this._createRoomButton.addEventListener('click', this.createNewRoom);
+
+        const firstInput = this.view.querySelector('input');
+        firstInput.focus();
     }
 
     beforeDestroy(){
diff --git a/docs/SetupForm.ts b/docs/SetupForm.ts
index 91b4b26..6205204 100644
--- a/docs/SetupForm.ts
+++ b/docs/SetupForm.ts
@@ -2,6 +2,8 @@ import { Module } from 'Module';
 import { Application } from 'Application';
 import { Env } from 'Env';
 import { InputManager } from 'InputManager';
+import { Client } from './Client';
+import { SocketManager } from './SocketManager';
 
 export class SetupForm extends Module{
     public static index:string = 'SetupForm';
@@ -28,7 +30,22 @@ export class SetupForm extends Module{
         this.view.style.height = `${ newHeight + extraHeight }px`;
     }
 
-    private nextStep:EventListener = ()=>{
+    private updateUsernameHotswaps():void{
+        const hotwapEls:Array<HTMLElement> = Array.from(this.view.querySelectorAll('.js-username-hotswap'));
+
+        for(let i = 0; i < hotwapEls.length; i++){
+            hotwapEls[i].innerHTML = Client.getName();
+        }
+    }
+
+    private nextStep:EventListener = (e:Event)=>{
+
+        if(e instanceof KeyboardEvent){
+            if(e.key.toLowerCase() !== 'enter'){
+                return;
+            }
+        }
+
         const inputs:Array<HTMLInputElement> = Array.from(this._steps[this._currentStepIndex].querySelectorAll('.js-input'));
 
         let hasBlankInput = false;
@@ -45,6 +62,20 @@ export class SetupForm extends Module{
             return;
         }
 
+        switch(this._currentStepIndex){
+            case 1:
+                const username = <HTMLInputElement>this.view.querySelector('input#displayName');
+                Client.setName(username.value);
+                this.updateUsernameHotswaps();
+                SocketManager.emit('updateName', { displayName: username.value });
+                break;
+            default:
+                if(Env.isDebug){
+                    console.warn(`Unknown step #${ this._currentStepIndex }`);
+                }
+                break;
+        }
+
         this._steps[this._currentStepIndex].classList.remove('is-visible');
         this._currentStepIndex++;
         this._steps[this._currentStepIndex].classList.add('is-visible');
@@ -58,6 +89,10 @@ export class SetupForm extends Module{
         for(let i = 0; i < this._nextButtons.length; i++){
             this._nextButtons[i].addEventListener('click', this.nextStep);
         }
+
+        document.addEventListener('keyup', this.nextStep);
+
+        InputManager.reload();
     }
 
     beforeDestroy(){
diff --git a/docs/SocketManager.ts b/docs/SocketManager.ts
index af3707c..897cf8a 100644
--- a/docs/SocketManager.ts
+++ b/docs/SocketManager.ts
@@ -24,8 +24,9 @@ export class SocketManager extends Module{
      * Listens for a custom event to be sent from the server. Returns `false` when the socket is not connected to the server.
      * @param eventName - the name of the event the socket will listen for
      * @param callback - the events callback `Function`
+     * @param scope - the class object that called the method
      * @returns `boolean` containing the events success status
-     * @example SocketManager.emit('signupResponse', this.handleSignupResponse);
+     * @example SocketManager.emit('signupResponse', this.handleSignupResponse, this);
      */
     public static receive(eventName:string, callback:Function, scope:unknown):boolean{
         if(this._socket.connected){
diff --git a/docs/assets/scripts/globals.js b/docs/assets/scripts/globals.js
index 7ecf16e..1dc4e31 100644
--- a/docs/assets/scripts/globals.js
+++ b/docs/assets/scripts/globals.js
@@ -10,7 +10,14 @@ var Client = (function () {
     function Client(roomToken) {
         Client.room = roomToken;
     }
+    Client.setName = function (clientsName) {
+        this.displayName = clientsName;
+    };
+    Client.getName = function () {
+        return this.displayName;
+    };
     Client.room = null;
+    Client.displayName = 'Tod';
     return Client;
 }());
 exports.Client = Client;
diff --git a/docs/assets/scripts/login.js b/docs/assets/scripts/login.js
index 8b1a3ae..e761393 100644
--- a/docs/assets/scripts/login.js
+++ b/docs/assets/scripts/login.js
@@ -116,6 +116,8 @@ var Login = (function (_super) {
         this._tokenInput.addEventListener('blur', this.handleInput);
         this._tokenInput.addEventListener('keyup', this.handleInput);
         this._createRoomButton.addEventListener('click', this.createNewRoom);
+        var firstInput = this.view.querySelector('input');
+        firstInput.focus();
     };
     Login.prototype.beforeDestroy = function () {
     };
diff --git a/docs/assets/scripts/setupform.js b/docs/assets/scripts/setupform.js
index 53acdb4..af2b825 100644
--- a/docs/assets/scripts/setupform.js
+++ b/docs/assets/scripts/setupform.js
@@ -23,11 +23,18 @@ var Module_1 = __webpack_require__(2);
 var Application_1 = __webpack_require__(3);
 var Env_1 = __webpack_require__(4);
 var InputManager_1 = __webpack_require__(64);
+var Client_1 = __webpack_require__(0);
+var SocketManager_1 = __webpack_require__(9);
 var SetupForm = (function (_super) {
     __extends(SetupForm, _super);
     function SetupForm(view, uuid) {
         var _this = _super.call(this, view, uuid) || this;
-        _this.nextStep = function () {
+        _this.nextStep = function (e) {
+            if (e instanceof KeyboardEvent) {
+                if (e.key.toLowerCase() !== 'enter') {
+                    return;
+                }
+            }
             var inputs = Array.from(_this._steps[_this._currentStepIndex].querySelectorAll('.js-input'));
             var hasBlankInput = false;
             inputs.forEach(function (input) {
@@ -41,6 +48,19 @@ var SetupForm = (function (_super) {
                 _this.updateViewHeight(32);
                 return;
             }
+            switch (_this._currentStepIndex) {
+                case 1:
+                    var username = _this.view.querySelector('input#displayName');
+                    Client_1.Client.setName(username.value);
+                    _this.updateUsernameHotswaps();
+                    SocketManager_1.SocketManager.emit('updateName', { displayName: username.value });
+                    break;
+                default:
+                    if (Env_1.Env.isDebug) {
+                        console.warn("Unknown step #" + _this._currentStepIndex);
+                    }
+                    break;
+            }
             _this._steps[_this._currentStepIndex].classList.remove('is-visible');
             _this._currentStepIndex++;
             _this._steps[_this._currentStepIndex].classList.add('is-visible');
@@ -59,12 +79,20 @@ var SetupForm = (function (_super) {
         var newHeight = this._steps[this._currentStepIndex].scrollHeight;
         this.view.style.height = newHeight + extraHeight + "px";
     };
+    SetupForm.prototype.updateUsernameHotswaps = function () {
+        var hotwapEls = Array.from(this.view.querySelectorAll('.js-username-hotswap'));
+        for (var i = 0; i < hotwapEls.length; i++) {
+            hotwapEls[i].innerHTML = Client_1.Client.getName();
+        }
+    };
     SetupForm.prototype.afterMount = function () {
         this._steps[this._currentStepIndex].classList.add('is-visible');
         this.updateViewHeight();
         for (var i = 0; i < this._nextButtons.length; i++) {
             this._nextButtons[i].addEventListener('click', this.nextStep);
         }
+        document.addEventListener('keyup', this.nextStep);
+        InputManager_1.InputManager.reload();
     };
     SetupForm.prototype.beforeDestroy = function () {
     };
@@ -81,4 +109,4 @@ Application_1.Application.mountModules();
 
 /***/ })
 
-},[[63,3,9,10,7]]]);
\ No newline at end of file
+},[[63,3,9,10,21,11,15,23,24,26,25,35,27,18,28,16,34,30,22,19,32,20,14,29,12,13,33,17,31,7]]]);
\ No newline at end of file
diff --git a/docs/assets/styles/homepage.css b/docs/assets/styles/homepage.css
index f5f22a9..c45f48d 100644
--- a/docs/assets/styles/homepage.css
+++ b/docs/assets/styles/homepage.css
@@ -1 +1 @@
-#homepage{width:100vw;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-flow:column nowrap}#homepage .o-form{padding:2rem;background-color:#fff;border-radius:4px;display:grid;width:460px;max-width:100%;grid-template-rows:1fr;gap:1rem;box-shadow:0 1px 3px 0 rgba(36,59,83,0.15);position:absolute}#homepage .o-form.is-hidden{animation:hideModal 150ms 0ms cubic-bezier(0.4, 0, 0.6, 1) forwards}#homepage .o-form .o-form_row button{height:52px;height:52px}#homepage #input-split{width:100%;display:block;text-align:center;line-height:56px}#homepage #input-split::after{content:"";display:inline-block;background-color:#e4e7eb;position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:1px}#homepage #input-split span{background-color:#fff;padding:4px 8px;display:inline-block;z-index:3;color:#e4e7eb}#homepage #submit-button{height:48px;width:48px;position:absolute;right:4px;top:4px;display:inline-flex;justify-content:center;align-items:center;flex-flow:column wrap;color:#9aa5b1;visibility:hidden;opacity:0;pointer-events:none;transition:all 150ms cubic-bezier(0.4, 0, 0.2, 1)}#homepage #submit-button.is-visible{visibility:visible;opacity:1;pointer-events:all}html.is-not-touch-device #homepage #submit-button:hover{color:#7b8794}html.is-not-touch-device #homepage #submit-button:hover:before{transform:scale(0.87);opacity:0.07;transition:all 150ms cubic-bezier(0, 0, 0.2, 1)}html.is-not-touch-device #homepage #submit-button:active{color:#1f9eff}html.is-not-touch-device #homepage #submit-button:active:before{transform:scale(1);opacity:0.1;transition:all 75ms cubic-bezier(0.4, 0, 0.2, 1)}html.is-touch-device #homepage #submit-button.has-touch{color:#1f9eff}html.is-touch-device #homepage #submit-button.has-touch:before{transform:scale(1);opacity:0.1;transition:all 75ms cubic-bezier(0.4, 0, 0.2, 1)}#homepage #submit-button::before{content:"";display:inline-block;border-radius:50%;height:100%;width:100%;background-color:#1f9eff;opacity:0;transform:scale(0);transition:all 75ms cubic-bezier(0.4, 0, 0.6, 1);position:absolute}#homepage #submit-button svg{height:24px;width:24px}#homepage p{opacity:0.6}@keyframes hideModal{from{transform:translateY(0);opacity:1;user-select:auto;pointer-events:all;visibility:visible}to{transform:translateY(-25px);opacity:0;pointer-events:none;visibility:hidden;user-select:none}}
+#homepage{width:100vw;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-flow:column nowrap}#homepage .o-form{padding:2rem;background-color:#fff;border-radius:4px;display:grid;width:460px;max-width:100%;grid-template-rows:1fr;gap:1rem;box-shadow:0 1px 3px 0 rgba(36,59,83,0.15);position:absolute}#homepage .o-form.is-hidden{animation:hideModal 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1) forwards}#homepage .o-form .o-form_row button{height:52px;height:52px}#homepage #input-split{width:100%;display:block;text-align:center;line-height:56px}#homepage #input-split::after{content:"";display:inline-block;background-color:#e4e7eb;position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:1px}#homepage #input-split span{background-color:#fff;padding:4px 8px;display:inline-block;z-index:3;color:#e4e7eb}#homepage #submit-button{height:48px;width:48px;position:absolute;right:4px;top:4px;display:inline-flex;justify-content:center;align-items:center;flex-flow:column wrap;color:#9aa5b1;visibility:hidden;opacity:0;pointer-events:none;transition:all 150ms cubic-bezier(0.4, 0, 0.2, 1)}#homepage #submit-button.is-visible{visibility:visible;opacity:1;pointer-events:all}html.is-not-touch-device #homepage #submit-button:hover{color:#7b8794}html.is-not-touch-device #homepage #submit-button:hover:before{transform:scale(0.87);opacity:0.07;transition:all 150ms cubic-bezier(0, 0, 0.2, 1)}html.is-not-touch-device #homepage #submit-button:active{color:#1f9eff}html.is-not-touch-device #homepage #submit-button:active:before{transform:scale(1);opacity:0.1;transition:all 75ms cubic-bezier(0.4, 0, 0.2, 1)}html.is-touch-device #homepage #submit-button.has-touch{color:#1f9eff}html.is-touch-device #homepage #submit-button.has-touch:before{transform:scale(1);opacity:0.1;transition:all 75ms cubic-bezier(0.4, 0, 0.2, 1)}#homepage #submit-button::before{content:"";display:inline-block;border-radius:50%;height:100%;width:100%;background-color:#1f9eff;opacity:0;transform:scale(0);transition:all 75ms cubic-bezier(0.4, 0, 0.6, 1);position:absolute}#homepage #submit-button svg{height:24px;width:24px}#homepage p{opacity:0.6}@keyframes hideModal{from{transform:translateY(0);opacity:1;user-select:auto;pointer-events:all;visibility:visible}to{transform:translateY(-25px);opacity:0;pointer-events:none;visibility:hidden;user-select:none}}
diff --git a/docs/assets/styles/setup-form.css b/docs/assets/styles/setup-form.css
index 9b29b9f..3ba5990 100644
--- a/docs/assets/styles/setup-form.css
+++ b/docs/assets/styles/setup-form.css
@@ -1 +1 @@
-.o-setup-form{width:640px;border-radius:4px;background-color:#fff;box-shadow:0 1px 3px 0 rgba(36,59,83,0.15);position:absolute;transform:translateY(25px);opacity:0;pointer-events:none;visibility:hidden;user-select:none;animation:showModal 300ms 150ms cubic-bezier(0, 0, 0.2, 1) forwards;transition:all 150ms cubic-bezier(0.4, 0, 0.2, 1)}.o-setup-form.is-hidden{animation:hideModal 150ms 0ms cubic-bezier(0.4, 0, 0.6, 1) forwards}.o-setup-form form-step{display:block;position:absolute;top:0;left:0;padding:2rem 2rem 68px;visibility:hidden;opacity:0;user-select:none;pointer-events:none;transition:all 75ms cubic-bezier(0.4, 0, 0.6, 1);width:100%}.o-setup-form form-step.is-visible{visibility:visible;opacity:1;user-select:auto;pointer-events:all;transition:all 150ms cubic-bezier(0, 0, 0.2, 1)}.o-setup-form form-step form-controls{position:absolute;bottom:16px;right:2rem}@keyframes hideModal{from{transform:translateY(0);opacity:1;user-select:auto;pointer-events:all;visibility:visible}to{transform:translateY(-25px);opacity:0;pointer-events:none;visibility:hidden;user-select:none}}@keyframes showModal{from{transform:translateY(25px);opacity:0;pointer-events:none;visibility:hidden;user-select:none}to{transform:translateY(0);opacity:1;user-select:auto;pointer-events:all;visibility:visible}}
+.o-setup-form{width:640px;border-radius:4px;background-color:#fff;box-shadow:0 1px 3px 0 rgba(36,59,83,0.15);position:absolute;transform:translateY(25px);opacity:0;pointer-events:none;visibility:hidden;user-select:none;animation:showModal 150ms 75ms cubic-bezier(0, 0, 0.2, 1) forwards;transition:all 150ms cubic-bezier(0.4, 0, 0.2, 1)}.o-setup-form.is-hidden{animation:hideModal 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1) forwards}.o-setup-form form-step{display:block;position:absolute;top:0;left:0;padding:2rem 2rem 68px;visibility:hidden;opacity:0;user-select:none;pointer-events:none;transition:all 75ms cubic-bezier(0.4, 0, 0.6, 1);width:100%}.o-setup-form form-step.is-visible{visibility:visible;opacity:1;user-select:auto;pointer-events:all;transition:all 150ms 75ms cubic-bezier(0, 0, 0.2, 1)}.o-setup-form form-step form-controls{position:absolute;bottom:16px;right:2rem}@keyframes hideModal{from{transform:translateY(0);opacity:1;user-select:auto;pointer-events:all;visibility:visible}to{transform:translateY(-25px);opacity:0;pointer-events:none;visibility:hidden;user-select:none}}@keyframes showModal{from{transform:translateY(25px);opacity:0;pointer-events:none;visibility:hidden;user-select:none}to{transform:translateY(0);opacity:1;user-select:auto;pointer-events:all;visibility:visible}}
diff --git a/docs/creation-form.html b/docs/creation-form.html
index 913ef51..58cd18c 100644
--- a/docs/creation-form.html
+++ b/docs/creation-form.html
@@ -5,24 +5,24 @@
     </form-controls>
 </form-step>
 <form-step>
-    <p class="u-margin-bottom">Please enter a name that will be displayed any friends you invite to your room.</p>
+    <p class="u-margin-bottom-x2">Please enter a name that will be displayed any friends you invite to your room.</p>
     <div class="g-input">
-        <input class="js-input" type="text" name="displayName" id="displayName" required>
+        <input class="js-input" type="text" name="displayName" id="displayName" required tabindex="1">
         <label for="displayName">Display Name</label>
         <error class="js-error"></error>
     </div>
     <form-controls>
-        <button class="js-next g-button -short -text -blue">Continue</button>
+        <button type="button" class="js-next g-button -short -text -blue"  tabindex="2">Continue</button>
     </form-controls>
 </form-step>
 <form-step>
-    <p class="u-margin-bottom">Alright <span class="js-username-hotswap">USERNAME</span>, what's the name of the project that you'll be working on today? We know that this is the hardest and most important part of any project so feel free to take your time.</p>
+    <p class="u-margin-bottom-x2">So <span class="js-username-hotswap">USERNAME</span>, what project will we working on today? We know that this will be the hardest and most important part your project so feel free to take your time.</p>
     <div class="g-input">
-        <input class="js-input" type="text" name="projectName" id="projectName" required>
+        <input class="js-input" type="text" name="projectName" id="projectName" required  tabindex="3">
         <label for="projectName">Project Name</label>
         <error class="js-error"></error>
     </div>
     <form-controls>
-        <button class="js-next g-button -short -text -blue">Continue</button>
+        <button type="button" class="js-next g-button -short -text -blue" tabindex="4">Continue</button>
     </form-controls>
 </form-step>
\ No newline at end of file
diff --git a/docs/homepage.scss b/docs/homepage.scss
index 84e3a87..e17d7ed 100755
--- a/docs/homepage.scss
+++ b/docs/homepage.scss
@@ -23,7 +23,7 @@
         position: absolute;
 
         &.is-hidden{
-            animation: hideModal 150ms 0ms $ease-sharp forwards;
+            animation: hideModal 75ms 0ms $ease-sharp forwards;
         }
 
         .o-form_row{
diff --git a/docs/setup-form.scss b/docs/setup-form.scss
index 604d320..329e1c6 100644
--- a/docs/setup-form.scss
+++ b/docs/setup-form.scss
@@ -12,11 +12,11 @@
     pointer-events: none;
     visibility: hidden;
     user-select: none;
-    animation: showModal 300ms 150ms $ease-in forwards;
+    animation: showModal 150ms 75ms $ease-in forwards;
     transition: all 150ms $ease;
 
     &.is-hidden{
-        animation: hideModal 150ms 0ms $ease-sharp forwards;
+        animation: hideModal 75ms 0ms $ease-sharp forwards;
     }
 
     form-step{
@@ -37,7 +37,7 @@
             opacity: 1;
             user-select: auto;
             pointer-events: all;
-            transition: all 150ms $ease-in;
+            transition: all 150ms 75ms $ease-in;
         }
 
         form-controls{