diff --git a/frontend/prebuild/src/app/login/login.component.html b/frontend/prebuild/src/app/login/login.component.html
index 1d3b129b..6c7aa3ec 100644
--- a/frontend/prebuild/src/app/login/login.component.html
+++ b/frontend/prebuild/src/app/login/login.component.html
@@ -69,6 +69,28 @@ <h2 *ngIf="isFullDevice" class="section-header">or</h2>
           </form>
         </div>
 
+        <div aiPane>
+          <div class="form-group">
+            <div class="form-item">
+              <div class="form-item" *ngIf="!hasBotKey" [@sso]="hasBotKey">
+                <label>bot name</label>
+                <input type="text" id="ainame" name="ainame" [(ngModel)]="nextAiName" />
+              </div>
+              <div class="form-item" *ngIf="!hasBotKey" [@sso]="hasBotKey">
+                <button type="submit" id="registerBot" (click)="registerBot(nextAiName)">Register Bot</button>
+              </div>
+              <div class="form-item" id="botKey" *ngIf="hasBotKey" [@sso]="hasBotKey">
+                <div class="explanation">{{aiName}}'s secret key is:</div>
+                <h3>{{this.botKey}}</h3>
+                <div class="explanation">This key will disappear when you leave this page. Don't share this key with anyone else!</div>
+              </div>
+              <div class="form-item">
+                <button type="button" (click)="doneRegisteringBots()">Done</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div rightPane>
           <form (submit)="joinParty()">
             <div class="form-group">
@@ -117,23 +139,8 @@ <h2>You are number {{queuePosition}} in queue</h2>
             </div>
           </div>
         </div>
-        
-       <div aiPane>
-          <div class="form-group">
-            <div class="form-item">
-              <div class="form-item">
-                <label>bot name</label>
-                <input type="text" id="ainame" name="ainame" [(ngModel)]="ainame" />
-              </div>
-              <div class="form-item">
-                <button type="submit" id="registerBot" (click)="registerBot(ainame)">Register Bot</button>
-              </div>
-               <div class="form-item">
-                <button type="submit" (click)="cancelLogin()">Back</button>
-              </div>
-            </div>
-          </div>
-        </div>
+
+
       </app-slider>
     </div>
   </div>
diff --git a/frontend/prebuild/src/app/login/login.component.scss b/frontend/prebuild/src/app/login/login.component.scss
index 3a02a1e5..ca74f560 100644
--- a/frontend/prebuild/src/app/login/login.component.scss
+++ b/frontend/prebuild/src/app/login/login.component.scss
@@ -105,6 +105,12 @@ h2 {
   padding-bottom: 10px;
 }
 
+.explanation {
+  color: #fff;
+  font-size: 1em;
+  text-align: center;
+}
+
 .slider {
   width: 100%;
 }
@@ -219,6 +225,18 @@ h2 {
   }
 }
 
+#botKey {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 10px 0;
+}
+
+#botKey h3 {
+  padding: 10px 0;
+}
+
 // Format-specific overrides
 
 @media screen and (min-width: 550px) {
diff --git a/frontend/prebuild/src/app/login/login.component.ts b/frontend/prebuild/src/app/login/login.component.ts
index 48c811c2..81993829 100644
--- a/frontend/prebuild/src/app/login/login.component.ts
+++ b/frontend/prebuild/src/app/login/login.component.ts
@@ -33,6 +33,10 @@ export class LoginComponent implements OnInit, OnDestroy {
   username: string;
   queuePosition: number;
   player = new Player();
+  nextAiName: string;
+  aiName: string;
+  hasBotKey = false;
+  botKey: string;
 
   private partyCode = '';
   get party(): string {
@@ -390,24 +394,32 @@ export class LoginComponent implements OnInit, OnDestroy {
     sessionStorage.removeItem('userId');
     this.pane = 'left';
   }
-  
-  makeid() {
-   var result           = '';
-   var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
-   var charactersLength = characters.length;
-   for ( var i = 1; i <= 16; i++ ) {
+
+  makeId() {
+   let result           = '';
+   let characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+   let charactersLength = characters.length;
+   for (let i = 1; i <= 16; i++) {
       result += characters.charAt(Math.floor(Math.random() * charactersLength));
-      if (i % 4 == 0 && i != 16) {
-          result += "-";
+      if (i % 4 === 0 && i !== 16) {
+          result += '-';
       }
    }
    return result;
   }
-  
+
   showBotLogin() {
-     this.pane='ai';
+     this.pane = 'ai';
+  }
+
+  async doneRegisteringBots() {
+    this.pane = 'left';
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    this.hasBotKey = false;
+    this.botKey = null;
+    this.aiName = null;
+    this.nextAiName = null;
   }
-  
 
   async registerBot(name: string) {
     console.log(`Bot name input: "${name}"`);
@@ -420,12 +432,15 @@ export class LoginComponent implements OnInit, OnDestroy {
     }
     name = name.trim();
 
-    let userid = this.makeid();
-    console.log("id: " + userid);
+    let userId = this.makeId();
+    console.log(`id: ${userId}`);
     // register a new user
-    let key: any = await this.http.post(`${environment.API_URL_PLAYERS}?name=${name}&id=${userid}`, '', {
+    let key: any = await this.http.post(`${environment.API_URL_PLAYERS}?name=${name}&id=${userId}`, '', {
       responseType: 'text'
     }).toPromise();
-    alert(`Key for ${name}: ${key}`);
+
+    this.hasBotKey = true;
+    this.botKey = userId;
+    this.aiName = name;
   }
 }
diff --git a/frontend/prebuild/src/app/slider/slider.component.html b/frontend/prebuild/src/app/slider/slider.component.html
index ac5f30bb..a48aa0fb 100644
--- a/frontend/prebuild/src/app/slider/slider.component.html
+++ b/frontend/prebuild/src/app/slider/slider.component.html
@@ -1,7 +1,7 @@
 <div class="parent" [@slide]="activePane">
   <div class="left-pane" [@fade]="isActivePane('left')"><ng-content select="[leftPane]"></ng-content></div>
   <div class="center-pane" [@fade]="isActivePane('center')"><ng-content select="[centerPane]"></ng-content></div>
+  <div class="ai-pane" [@fade]="isActivePane('ai')"><ng-content select="[aiPane]"></ng-content></div>
   <div class="right-pane" [@fade]="isActivePane('right')"><ng-content select="[rightPane]"></ng-content></div>
   <div class="queue-pane" [@fade]="isActivePane('queue')"><ng-content select="[queuePane]"></ng-content></div>
-  <div class="ai-pane" [@fade]="isActivePane('ai')"><ng-content select="[aiPane]"></ng-content></div> 
 </div>
diff --git a/frontend/prebuild/src/app/slider/slider.component.ts b/frontend/prebuild/src/app/slider/slider.component.ts
index f45dd636..c184aeb9 100644
--- a/frontend/prebuild/src/app/slider/slider.component.ts
+++ b/frontend/prebuild/src/app/slider/slider.component.ts
@@ -10,9 +10,10 @@ import { trigger, state, style, transition, animate, query, group, animateChild
     trigger('slide', [
       state('left', style({ transform: 'translateX(0)' })),
       state('center', style({ transform: 'translateX(-20%)' })),
-      state('right', style({ transform: 'translateX(-40%)' })),
-      state('queue', style({ transform: 'translateX(-60%)'})),
-      state('ai', style({ transform: 'translateX(-80%)'})),
+      state('ai', style({ transform: 'translateX(-40%)'})),
+      state('right', style({ transform: 'translateX(-60%)' })),
+      state('queue', style({ transform: 'translateX(-80%)'})),
+
       transition('void => *', animate(0)),
       transition('* => *', [
         group([
diff --git a/frontend/prebuild/src/styles.scss b/frontend/prebuild/src/styles.scss
index 8eabf190..58085b96 100644
--- a/frontend/prebuild/src/styles.scss
+++ b/frontend/prebuild/src/styles.scss
@@ -7,7 +7,7 @@ h1 {
   font-size: 250%;
 }
 h2, h3 {
-  color: #444;
+  color: rgb(255, 255, 255);
   font-family: $default-font;
   font-weight: lighter;
 }