diff --git a/README.md b/README.md
index 8a767df..7701f09 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 ![Mimic Logo](assets/mimic-logo.png?raw=true)
 
 [![Build Status](https://travis-ci.org/molenzwiebel/Mimic.svg?branch=master)](https://travis-ci.org/molenzwiebel/Mimic)
-[![Mimic Discord](https://img.shields.io/badge/discord-Mimic-738bd7.svg?style=flat)](https://discord.gg/bfxdsRC)
+[![Discord](https://discordapp.com/api/guilds/249481856687407104/widget.png?style=shield)](https://discord.gg/bfxdsRC)
 
 # :satellite: Mimic
 The new League client. Except it's on your phone.
diff --git a/conduit/AboutWindow.xaml b/conduit/AboutWindow.xaml
index 51e45c2..1fa5aeb 100644
--- a/conduit/AboutWindow.xaml
+++ b/conduit/AboutWindow.xaml
@@ -8,7 +8,7 @@
         Title="Mimic Conduit - About" Height="430" Width="500" ResizeMode="NoResize" Closing="Window_Closing">
     <Grid>
         <Image x:Name="Logo" HorizontalAlignment="Left" Height="80" Margin="15,227,0,0" VerticalAlignment="Top" Width="80" />
-        <Label Content="Mimic Conduit v2.0.0" HorizontalAlignment="Left" Margin="100,227,0,0" VerticalAlignment="Top" FontSize="24" FontWeight="Bold" FontFamily="Arial"/>
+        <Label x:Name="AboutTitle" Content="Mimic Conduit v2.0.0" HorizontalAlignment="Left" Margin="100,227,0,0" VerticalAlignment="Top" FontSize="24" FontWeight="Bold" FontFamily="Arial"/>
         <Label Content="Made with ♥ by molenzwiebel and contributors." HorizontalAlignment="Left" Margin="100,278,0,0" VerticalAlignment="Top" FontSize="14"/>
         <Label Content="CONNECTION DETAILS" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" FontSize="16"/>
         <Label Content="ABOUT" HorizontalAlignment="Left" Margin="10,184,0,0" VerticalAlignment="Top" FontSize="16"/>
diff --git a/conduit/AboutWindow.xaml.cs b/conduit/AboutWindow.xaml.cs
index 2f210e4..f66c1b5 100644
--- a/conduit/AboutWindow.xaml.cs
+++ b/conduit/AboutWindow.xaml.cs
@@ -19,6 +19,8 @@ public AboutWindow()
             Logo.Source = Imaging.CreateBitmapSourceFromHIcon(Properties.Resources.mimic.Handle, Int32Rect.Empty, BitmapSizeOptions.FromEmptyOptions());
             StartOnStartupCheckbox.IsChecked = Persistence.LaunchesAtStartup();
 
+            AboutTitle.Content = "Mimic Conduit v" + Program.VERSION;
+
             if (Persistence.GetHubCode() != null)
             {
                 RenderCode();
diff --git a/conduit/Administrator.cs b/conduit/Administrator.cs
new file mode 100644
index 0000000..e51525c
--- /dev/null
+++ b/conduit/Administrator.cs
@@ -0,0 +1,42 @@
+using System;
+using System.Diagnostics;
+using System.Reflection;
+using System.Security.Principal;
+using System.Windows.Forms;
+
+namespace Conduit
+{
+    public static class Administrator
+    {
+        public static bool IsAdmin()
+        {
+            using (WindowsIdentity identity = WindowsIdentity.GetCurrent())
+            {
+                WindowsPrincipal principal = new WindowsPrincipal(identity);
+                return principal.IsInRole(WindowsBuiltInRole.Administrator);
+            }
+        }
+
+        public static void Elevate()
+        {
+            MessageBox.Show(
+                "Your League client is running as administrator, and Mimic cannot access it. Mimic will now attempt to restart as administrator. Press 'Yes' on the Windows prompt to allow this.",
+                "Mimic",
+                MessageBoxButtons.OK,
+                MessageBoxIcon.Error,
+                MessageBoxDefaultButton.Button1
+            );
+
+            var currentProcessInfo = new ProcessStartInfo
+            {
+                UseShellExecute = true,
+                WorkingDirectory = Environment.CurrentDirectory,
+                FileName = Assembly.GetEntryAssembly().Location,
+                Verb = "runas"
+            };
+
+            Process.Start(currentProcessInfo);
+            Environment.Exit(0);
+        }
+    }
+}
diff --git a/conduit/Conduit.csproj b/conduit/Conduit.csproj
index 4bcdadd..c8bce77 100644
--- a/conduit/Conduit.csproj
+++ b/conduit/Conduit.csproj
@@ -77,6 +77,7 @@
     <Reference Include="System.Security.Cryptography.X509Certificates, Version=4.1.1.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a, processorArchitecture=MSIL">
       <HintPath>packages\System.Security.Cryptography.X509Certificates.4.3.0\lib\net461\System.Security.Cryptography.X509Certificates.dll</HintPath>
     </Reference>
+    <Reference Include="System.Web" />
     <Reference Include="System.Windows.Forms" />
     <Reference Include="System.Xml" />
     <Reference Include="Microsoft.CSharp" />
@@ -86,8 +87,8 @@
     <Reference Include="System.Xaml">
       <RequiredTargetFramework>4.0</RequiredTargetFramework>
     </Reference>
-    <Reference Include="websocket-sharp-customheaders, Version=1.0.2.31869, Culture=neutral, PublicKeyToken=5660b08a1845a91e, processorArchitecture=MSIL">
-      <HintPath>packages\websocket-sharp-customheaders.1.0.2.31869\lib\net35\websocket-sharp-customheaders.dll</HintPath>
+    <Reference Include="websocket-sharp, Version=1.0.2.59611, Culture=neutral, PublicKeyToken=5660b08a1845a91e, processorArchitecture=MSIL">
+      <HintPath>packages\WebSocketSharp.1.0.3-rc11\lib\websocket-sharp.dll</HintPath>
     </Reference>
     <Reference Include="WindowsBase" />
     <Reference Include="PresentationCore" />
@@ -98,8 +99,10 @@
     <Compile Include="App.xaml.cs">
       <DependentUpon>App.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Administrator.cs" />
     <Compile Include="ConnectionManager.cs" />
     <Compile Include="CryptoHelpers.cs" />
+    <Compile Include="DebugLogger.cs" />
     <Compile Include="DeviceConnectionPrompt.xaml.cs">
       <DependentUpon>DeviceConnectionPrompt.xaml</DependentUpon>
     </Compile>
diff --git a/conduit/ConnectionManager.cs b/conduit/ConnectionManager.cs
index 78449bf..442d71f 100644
--- a/conduit/ConnectionManager.cs
+++ b/conduit/ConnectionManager.cs
@@ -32,10 +32,15 @@ public ConnectionManager(App app)
             // Hook up league events.
             league.OnConnected += () =>
             {
+                DebugLogger.Global.WriteMessage($"ConnectionManager is connected to League of Legends.");
                 isNewLaunch = true;
                 Connect();
             };
-            league.OnDisconnected += Close;
+            league.OnDisconnected += () =>
+            {
+                DebugLogger.Global.WriteMessage($"ConnectionManager is disconnected from League of Legends.");
+                Close();
+            };
         }
 
         /**
@@ -45,16 +50,17 @@ public ConnectionManager(App app)
          */
         public async void Connect()
         {
-            Console.WriteLine("[+] Connecting to rift...");
-
             if (hubConnectionHandler != null) throw new Exception("Already connected.");
             if (!league.IsConnected) return;
 
             try
             {
+                DebugLogger.Global.WriteMessage("Connecting to Rift...");
+
                 // Cancel pending reconnect if there is one.
                 if (reconnectCancellationTokenSource != null)
                 {
+                    DebugLogger.Global.WriteMessage($"Canceling older reconnect to Rift.");
                     reconnectCancellationTokenSource.Cancel();
                     reconnectCancellationTokenSource = null;
                 }
@@ -63,19 +69,23 @@ public async void Connect()
                 bool valid = false; // in case first startup and hub token is empty
                 if (!Persistence.GetHubToken().IsNullOrEmpty())
                 {
+                    DebugLogger.Global.WriteMessage("Requesting hub token..");
                     var response = await httpClient.GetStringAsync(Program.HUB + "/check?token=" + Persistence.GetHubToken());
                     valid = response == "true";
+                    DebugLogger.Global.WriteMessage($"Hub token validity: {(valid ? "valid" : "invalid")}.");
                 }
 
                 // ... and request a new one if it isn't.
                 if (!valid)
                 {
+                    DebugLogger.Global.WriteMessage($"Requesting hub token..");
                     var payload = "{\"pubkey\":\"" + CryptoHelpers.ExportPublicKey() + "\"}";
                     var responseBlob = await httpClient.PostAsync(Program.HUB + "/register", new StringContent(payload, Encoding.UTF8, "application/json"));
                     var response = SimpleJson.DeserializeObject<dynamic>(await responseBlob.Content.ReadAsStringAsync());
                     if (!response["ok"]) throw new Exception("Could not receive JWT from Rift");
 
                     Persistence.SetHubToken(response["token"]);
+                    DebugLogger.Global.WriteMessage($"Hub token: {response["token"]}.");
                 }
 
                 // Connect to hub. Will error if token is invalid or server is down, which will prompt a reconnection.
@@ -85,13 +95,16 @@ public async void Connect()
                 // We assume to be connected.
                 if (isNewLaunch)
                 {
+                    DebugLogger.Global.WriteMessage($"Creating New Launch popup.");
                     app.ShowNotification("Connected to League. Click here for instructions on how to control your League client from your phone.");
                     isNewLaunch = false;
                 }
 
                 hasTriedImmediateReconnect = false;
-            } catch
+            }
+            catch (Exception e)
             {
+                DebugLogger.Global.WriteError($"Connection to Rift failed, an exception occurred: {e.ToString()}");
                 // Something happened that we didn't anticipate for.
                 // Just try again in a bit.
                 CloseAndReconnect();
@@ -103,7 +116,7 @@ public async void Connect()
          */
         public void Close()
         {
-            Console.WriteLine("[+] Disconnecting from rift.");
+            DebugLogger.Global.WriteMessage("Disconnecting from rift.");
 
             // Already closed, don't error but just ignore.
             if (hubConnectionHandler == null) return;
@@ -130,17 +143,19 @@ public async void CloseAndReconnect()
                 // If this is an immediate reconnect, 
                 if (hasTriedImmediateReconnect)
                 {
-                    Console.WriteLine("[+] Reconnecting to rift in 5s...");
+                    DebugLogger.Global.WriteWarning("Could not connect to Rift, retrying to connect to Rift in 5s...");
                     await Task.Delay(5000, reconnectCancellationTokenSource.Token);
                 } else
                 {
-                    Console.WriteLine("[+] Reconnecting to rift immediately...");
+                    DebugLogger.Global.WriteWarning("Could not connect to Rift, retrying to connect to Rift immediately...");
                     hasTriedImmediateReconnect = true;
                 }
 
                 Connect();
-            } catch (TaskCanceledException)
+            }
+            catch (TaskCanceledException e)
             {
+                DebugLogger.Global.WriteError($"Our reconnect to Rift got canceled, reason: {e.ToString()}");
                 // Delay got cancelled. Ignore error.
             }
         }
diff --git a/conduit/DebugLogger.cs b/conduit/DebugLogger.cs
new file mode 100644
index 0000000..349cadd
--- /dev/null
+++ b/conduit/DebugLogger.cs
@@ -0,0 +1,35 @@
+using System;
+using System.IO;
+
+namespace Conduit
+{
+    public class DebugLogger
+    {
+        public static DebugLogger Global = new DebugLogger("global.txt");
+
+        private StreamWriter writer;
+
+        public DebugLogger(string fileName)
+        {
+            writer = new StreamWriter(Path.Combine(Persistence.DATA_DIRECTORY, fileName), true);
+            writer.AutoFlush = true;
+            writer.WriteLine($"\n\n\n --- {DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss")} --- ");
+            writer.WriteLine($"Started logging to {fileName}...");
+        }
+
+        public void WriteError(string error)
+        {
+            writer.WriteLine($"[ERROR {DateTime.Now.ToString("HH:mm:ss")}] {error}");
+        }
+
+        public void WriteMessage(string message)
+        {
+            writer.WriteLine($"[MSG {DateTime.Now.ToString("HH:mm:ss")}] {message}");
+        }
+
+        public void WriteWarning(string warning)
+        {
+            writer.WriteLine($"[WRN {DateTime.Now.ToString("HH:mm:ss")}] {warning}");
+        }
+    }
+}
diff --git a/conduit/HubConnectionHandler.cs b/conduit/HubConnectionHandler.cs
index ce7cb76..cc91532 100644
--- a/conduit/HubConnectionHandler.cs
+++ b/conduit/HubConnectionHandler.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Web;
 using WebSocketSharp;
 
 namespace Conduit
@@ -23,12 +24,12 @@ public HubConnectionHandler(LeagueConnection league)
         {
             this.league = league;
 
-            socket = new WebSocket(Program.HUB_WS);
-            socket.CustomHeaders = new Dictionary<string, string>()
-            {
-                {"Token", Persistence.GetHubToken()},
-                {"Public-Key", CryptoHelpers.ExportPublicKey()}
-            };
+            // Pass parameters in the URL.
+            socket = new WebSocket(
+                Program.HUB_WS
+                    + "?token=" + HttpUtility.UrlEncode(Persistence.GetHubToken())
+                    + "&publicKey=" + HttpUtility.UrlEncode(CryptoHelpers.ExportPublicKey())
+            );
 
             socket.OnMessage += HandleMessage;
             socket.OnClose += (sender, ev) =>
diff --git a/conduit/LeagueConnection.cs b/conduit/LeagueConnection.cs
index cd64764..42ee181 100644
--- a/conduit/LeagueConnection.cs
+++ b/conduit/LeagueConnection.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Diagnostics;
+using System.Net;
 using System.Net.Http;
 using System.Net.Http.Headers;
 using System.Security.Authentication;
@@ -16,11 +17,7 @@ namespace Conduit
      */
     class LeagueConnection
     {
-        private static readonly HttpClient HTTP_CLIENT = new HttpClient(new HttpClientHandler()
-        {
-            SslProtocols = SslProtocols.Tls12 | SslProtocols.Tls11 | SslProtocols.Tls,
-            ServerCertificateCustomValidationCallback = (a, b, c, d) => true
-        });
+        private static HttpClient HTTP_CLIENT;
 
         private WebSocket socketConnection;
         private Tuple<Process, string, string> processInfo;
@@ -41,6 +38,24 @@ class LeagueConnection
          */
         public LeagueConnection()
         {
+            try
+            {
+                HTTP_CLIENT = new HttpClient(new HttpClientHandler()
+                {
+                    SslProtocols = SslProtocols.Tls12 | SslProtocols.Tls11 | SslProtocols.Tls,
+                    ServerCertificateCustomValidationCallback = (a, b, c, d) => true
+                });
+            }
+            catch
+            {
+                ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12 | SecurityProtocolType.Tls11 | SecurityProtocolType.Tls;
+
+                HTTP_CLIENT = new HttpClient(new HttpClientHandler()
+                {
+                    ServerCertificateCustomValidationCallback = (a, b, c, d) => true
+                });
+            }
+
             // Run after a slight delay.
             Task.Delay(2000).ContinueWith(e => TryConnectOrRetry());
         }
@@ -59,35 +74,44 @@ public void ClearAllListeners()
          */
         private void TryConnect()
         {
-            // We're already connected.
-            if (connected) return;
-
-            // Check league status, abort if league is not running.
-            var status = LeagueUtils.GetLeagueStatus();
-            if (status == null) return;
-
-            // Update local state.
-            processInfo = status;
-            connected = true;
-
-            // Set the password and base address for our httpclient so we don't have to specify it every time.
-            var byteArray = Encoding.ASCII.GetBytes("riot:" + status.Item2);
-            HTTP_CLIENT.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
-
-            // Connect to our websocket.
-            socketConnection = new WebSocket("wss://127.0.0.1:" + status.Item3 + "/", "wamp");
-            socketConnection.SetCredentials("riot", status.Item2, true);
-            socketConnection.SslConfiguration.EnabledSslProtocols = SslProtocols.Tls12;
-            socketConnection.SslConfiguration.ServerCertificateValidationCallback = (a, b, c, d) => true;
-            socketConnection.OnMessage += HandleMessage;
-            socketConnection.OnClose += HandleDisconnect;
-            socketConnection.Connect();
-
-            // Subscribe to Json API events from the LCU.
-            socketConnection.Send("[5,\"OnJsonApiEvent\"]");
-
-            // Emit our events.
-            OnConnected?.Invoke();
+            try
+            {
+                // We're already connected.
+                if (connected) return;
+
+                // Check league status, abort if league is not running.
+                var status = LeagueUtils.GetLeagueStatus();
+                if (status == null) return;
+
+                // Set the password and base address for our httpclient so we don't have to specify it every time.
+                var byteArray = Encoding.ASCII.GetBytes("riot:" + status.Item2);
+                HTTP_CLIENT.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
+
+                // Connect to our websocket.
+                socketConnection = new WebSocket("wss://127.0.0.1:" + status.Item3 + "/", "wamp");
+                socketConnection.SetCredentials("riot", status.Item2, true);
+
+                socketConnection.SslConfiguration.EnabledSslProtocols = SslProtocols.Tls12;
+                socketConnection.SslConfiguration.ServerCertificateValidationCallback = (a, b, c, d) => true;
+                socketConnection.OnMessage += HandleMessage;
+                socketConnection.OnClose += HandleDisconnect;
+                socketConnection.Connect();
+                // Subscribe to Json API events from the LCU.
+                socketConnection.Send("[5,\"OnJsonApiEvent\"]");
+
+                // Update local state.
+                processInfo = status;
+                connected = true;
+
+                // Emit our events.
+                OnConnected?.Invoke();
+            }
+            catch (Exception e)
+            {
+                processInfo = null;
+                connected = false;
+                DebugLogger.Global.WriteError($"Exception occurred trying to connect to League of Legends: {e.ToString()}");
+            }
         }
 
         /**
diff --git a/conduit/LeagueUtils.cs b/conduit/LeagueUtils.cs
index ee90003..14185b6 100644
--- a/conduit/LeagueUtils.cs
+++ b/conduit/LeagueUtils.cs
@@ -28,13 +28,35 @@ public static Tuple<Process, string, string> GetLeagueStatus()
                 using (var moc = mos.Get())
                 {
                     var commandLine = (string)moc.OfType<ManagementObject>().First()["CommandLine"];
+                    if (commandLine == null) // We can't get the commandline sometimes without admin access, so let's elevate
+                    {
+                        if (Administrator.IsAdmin())
+                        {
+                            DebugLogger.Global.WriteError("We cannot determine why the commandline is null! Cannot get the League of Legends information from this process!");
+                            continue;
+                        }
+                        else
+                        {
+                            Administrator.Elevate();
+                        }
+                    }
 
-                    // Use regex to extract data, return it.
-                    return new Tuple<Process, string, string>(
-                        p,
-                        AUTH_TOKEN_REGEX.Match(commandLine).Groups[1].Value,
-                        PORT_REGEX.Match(commandLine).Groups[1].Value
-                    );
+                    try
+                    {
+                        var authToken = AUTH_TOKEN_REGEX.Match(commandLine).Groups[1].Value;
+                        var port = PORT_REGEX.Match(commandLine).Groups[1].Value;
+                        // Use regex to extract data, return it.
+                        return new Tuple<Process, string, string>
+                        (
+                            p,
+                            authToken,
+                            port
+                        );
+                    }
+                    catch (Exception e)
+                    {
+                        DebugLogger.Global.WriteError($"Error while trying to get the status for LeagueClientUx: {e.ToString()}\n\n(CommandLine = {commandLine})");
+                    }
                 }
             }
 
diff --git a/conduit/Program.cs b/conduit/Program.cs
index 4bbe72b..261b001 100755
--- a/conduit/Program.cs
+++ b/conduit/Program.cs
@@ -1,12 +1,11 @@
 using System;
-using System.IO;
 
 namespace Conduit
 {
     class Program
     {
         public static string APP_NAME = "Mimic Conduit";
-        public static string VERSION = "2.0.0";
+        public static string VERSION = "2.2.0";
 
         public static string HUB_WS = "wss://rift.mimic.lol/conduit";
         public static string HUB = "https://rift.mimic.lol";
diff --git a/conduit/packages.config b/conduit/packages.config
index 1159250..dfca357 100755
--- a/conduit/packages.config
+++ b/conduit/packages.config
@@ -10,5 +10,5 @@
   <package id="System.Security.Cryptography.Encoding" version="4.3.0" targetFramework="net461" />
   <package id="System.Security.Cryptography.Primitives" version="4.3.0" targetFramework="net461" />
   <package id="System.Security.Cryptography.X509Certificates" version="4.3.0" targetFramework="net461" />
-  <package id="websocket-sharp-customheaders" version="1.0.2.31869" targetFramework="net461" />
+  <package id="WebSocketSharp" version="1.0.3-rc11" targetFramework="net461" />
 </packages>
\ No newline at end of file
diff --git a/rift/src/database.ts b/rift/src/database.ts
index 2edf9c2..44240d0 100644
--- a/rift/src/database.ts
+++ b/rift/src/database.ts
@@ -30,6 +30,9 @@ export async function create() {
 export async function generateCode(pubkey: string): Promise<string> {
     if (!database) throw new Error("Database not loaded yet.");
 
+    const existing = await database.get(`SELECT * FROM conduit_instances WHERE public_key = ? LIMIT 1`, pubkey);
+    if (existing) return existing.code;
+
     let code: string;
     while (true) {
         // Generate a random 6 digit number as code.
@@ -50,11 +53,11 @@ export async function generateCode(pubkey: string): Promise<string> {
  * Looks up the public key belonging to the specified code. Returns either the
  * key, or null if not found.
  */
-export async function lookup(code: string): Promise<string | null> {
+export async function lookup(code: string): Promise<{ public_key: string, code: string } | null> {
     if (!database) throw new Error("Database not loaded yet.");
 
     const entry = await database.get(`SELECT * FROM conduit_instances WHERE code = ? LIMIT 1`, code);
-    return entry ? entry.public_key : null;
+    return entry || null;
 }
 
 /**
diff --git a/rift/src/index.ts b/rift/src/index.ts
index 79702d1..b0fb0f1 100644
--- a/rift/src/index.ts
+++ b/rift/src/index.ts
@@ -2,6 +2,7 @@ import * as db from "./database";
 import * as http from "http";
 import app from "./web";
 import WebSocketManager from "./sockets";
+const PORT = process.env.PORT || 51001;
 
 (async() => {
     if (!process.env.RIFT_JWT_SECRET) {
@@ -17,6 +18,6 @@ import WebSocketManager from "./sockets";
     const sockets = new WebSocketManager();
     server.on("upgrade", sockets.handleUpgradeRequest);
 
-    console.log("[+] Listening on 0.0.0.0:51001... ^C to exit.");
-    server.listen(51001);
+    console.log("[+] Listening on 0.0.0.0:" + PORT + "... ^C to exit.");
+    server.listen(PORT);
 })();
\ No newline at end of file
diff --git a/rift/src/sockets.ts b/rift/src/sockets.ts
index 0eb4271..9cea749 100644
--- a/rift/src/sockets.ts
+++ b/rift/src/sockets.ts
@@ -6,6 +6,7 @@ import * as db from "./database";
 import * as uuid from "uuid";
 import { Socket } from "net";
 import { IncomingMessage } from "http";
+import { URL } from "url";
 import { RiftOpcode } from "./types";
 
 /**
@@ -80,9 +81,15 @@ export default class WebSocketManager {
      */
     private verifyConduitClient: VerifyClientCallbackAsync = async (info, cb) => {
         try {
+            // The URL constructor needs a full URL, but we only get a relative one.
+            // Since we don't care about anything but the query params anyway, we can use
+            // any URL here, since we won't read it back.
+            const url = new URL("https://foo.com" + info.req.url!);
+            
+            // Load token and pubkey from header (legacy) or URL query.
             // If a token or pubkey is missing, abort.
-            const token = <string>info.req.headers.token;
-            const pubkey = <string>info.req.headers["public-key"];
+            const token = <string>info.req.headers.token || url.searchParams.get("token");
+            const pubkey = <string>info.req.headers["public-key"] || url.searchParams.get("publicKey");
             if (!token || !pubkey) return cb(false, 401, "Unauthorized");
 
             // Verify given JWT token.
@@ -99,6 +106,7 @@ export default class WebSocketManager {
             info.req.code = decoded.code;
             cb(true);
         } catch (e) {
+            console.log("[-] Disconnected Conduit due to failed handshake: " + e);
             cb(false, 400, "Invalid Request");
         }
     };
@@ -224,7 +232,7 @@ export default class WebSocketManager {
 
                 // Send the public key to client, inform conduit of new connection.
                 conduit.send(JSON.stringify([RiftOpcode.OPEN, connectionID]));
-                return done(pubkey);
+                return done(pubkey.public_key);
             } else if (op === RiftOpcode.SEND) {
                 // Abort if not connected.
                 const peerDetails = this.mobileToConduitMap.get(ws);
diff --git a/web/public/manifest.json b/web/public/manifest.json
index e65bdce..dad7620 100644
--- a/web/public/manifest.json
+++ b/web/public/manifest.json
@@ -30,7 +30,8 @@
     }, {
         "src": "icons/icon-192x192.png",
         "sizes": "192x192",
-        "type": "image/png"
+        "type": "image/png",
+        "purpose": "any maskable"
     }, {
         "src": "icons/icon-384x384.png",
         "sizes": "384x384",
@@ -40,4 +41,4 @@
         "sizes": "512x512",
         "type": "image/png"
     }]
-}
\ No newline at end of file
+}
diff --git a/web/src/common.styl b/web/src/common.styl
index 2d326aa..3a61269 100644
--- a/web/src/common.styl
+++ b/web/src/common.styl
@@ -38,6 +38,12 @@ select.league
     color #cebf93
     border-radius 50%
 
+    &:active
+        color darken(#cebf93, 60%)
+
+    &:active:after
+        background linear-gradient(to top, darken(#785b28, 30%) 0%, darken(#c89c3c, 30%) 55%, darken(#c8a355, 30%) 71%, darken(#c8aa6e, 30%) 100%)
+
     &:after
         position absolute
         content ""
diff --git a/web/src/components/champ-select/bench.vue b/web/src/components/champ-select/bench.vue
index 672e04f..342703a 100644
--- a/web/src/components/champ-select/bench.vue
+++ b/web/src/components/champ-select/bench.vue
@@ -5,11 +5,11 @@
             <div class="header">Reroll Bench</div>
 
             <div class="content">
-                <div class="bench-champion" v-for="championId in state.benchChampionIds" @click="swapWithChampion(championId)">
+                <a class="bench-champion" v-for="championId in state.benchChampionIds" @click="swapWithChampion(championId)">
                     <div class="background" :style="getChampionBackground(championId)"></div>
                     <div class="darken"></div>
                     <div class="name">{{ getChampionName(championId) }}</div>
-                </div>
+                </a>
             </div>
         </div>
     </transition>
@@ -73,6 +73,9 @@
             display flex
             align-items center
 
+            &:active
+                opacity 0.7
+
             .name
                 font-size 60px
                 margin-left 20px
diff --git a/web/src/components/champ-select/champ-select.ts b/web/src/components/champ-select/champ-select.ts
index 43e05de..61e8017 100644
--- a/web/src/components/champ-select/champ-select.ts
+++ b/web/src/components/champ-select/champ-select.ts
@@ -1,7 +1,7 @@
 import Vue from "vue";
 import Root, { Result } from "../root/root";
 import { Component } from "vue-property-decorator";
-import { ddragon, mapBackground, Role } from "@/constants";
+import { loadDdragon, mapBackground, Role } from "@/constants";
 
 import Timer from "./timer.vue";
 import Members from "./members.vue";
@@ -10,6 +10,7 @@ import SummonerPicker from "./summoner-picker.vue";
 import ChampionPicker from "./champion-picker.vue";
 import RuneEditor from "./rune-editor.vue";
 import Bench from "./bench.vue";
+import SkinPicker from "./skin-picker.vue";
 
 import MagicBackground from "../../static/magic-background.jpg";
 
@@ -19,6 +20,7 @@ export interface ChampSelectMember {
     cellId: number;
     championId: number;
     championPickIntent: number;
+    selectedSkinId: number;
     displayName: string;
     summonerId: number;
     spell1Id: number;
@@ -96,6 +98,17 @@ export interface RunePage {
     selectedPerkIds: number[]; // 0 or not included if not selected
 }
 
+export interface SkinItem {
+    championId: number;
+    id: number;
+    name: string;
+    isBase: boolean;
+    disabled: boolean;
+    ownership: {
+        owned: boolean
+    };
+}
+
 @Component({
     components: {
         timer: Timer,
@@ -104,7 +117,8 @@ export interface RunePage {
         summonerPicker: SummonerPicker,
         championPicker: ChampionPicker,
         runeEditor: RuneEditor,
-        bench: Bench
+        bench: Bench,
+        skinPicker: SkinPicker
     }
 })
 export default class ChampSelect extends Vue {
@@ -117,9 +131,12 @@ export default class ChampSelect extends Vue {
     runePages: RunePage[] = [];
     currentRunePage: RunePage | null = null;
 
+    skins: SkinItem[] = [];
+    pickingSkin = false;
+
     // These two are used to map summoner/champion id -> data.
-    championDetails: { [id: number]: { id: string, key: string, name: string } };
-    summonerSpellDetails: { [id: number]: { id: string, key: string, name: string } };
+    championDetails: { [id: number]: { id: string, key: string, name: string } } = {};
+    summonerSpellDetails: { [id: number]: { id: string, key: string, name: string } } = {};
 
     // Information for the summoner spell overlay.
     pickingSummonerSpell = false;
@@ -186,6 +203,16 @@ export default class ChampSelect extends Vue {
         const newState: ChampSelectState = result.content;
         newState.localPlayer = newState.myTeam.filter(x => x.cellId === newState.localPlayerCellId)[0];
 
+        // If we haven't loaded skins before, do so now.
+        if (!this.skins.length) {
+            const url = `/lol-champions/v1/inventories/${newState.localPlayer.summonerId}/skins-minimal`;
+            this.skins = await this.$root.request(url).then(x => x.content);
+
+            this.$root.observe(url, data => {
+                this.skins = data.status === 200 ? data.content : []
+            });
+        }
+
         // For everyone on our team, request their summoner name.
         await Promise.all(newState.myTeam.map(async mem => {
             if (mem.playerType === "BOT") {
@@ -272,10 +299,36 @@ export default class ChampSelect extends Vue {
         this.$root.request("/lol-perks/v1/currentpage", "PUT", "" + id);
     }
 
+    /**
+     * @returns whether the local summoner still needs to pick a champion or not
+     */
+    get hasLockedChampion(): boolean {
+        return !!this.state // A state exists.
+            && this.state.actions.filter(x => // and we cannot find a pick turn in which
+                x.filter(y => // there exists an action...
+                    y.actorCellId === this.state!.localPlayerCellId // by the current player
+                    && y.type === "pick" // that has to pick a champion
+                    && !y.completed // and hasn't been completed yet
+                ).length > 0).length === 0;
+    }
+
+    /**
+     * @returns whether everyone has picked their champion already
+     */
+    get hasEveryonePicked(): boolean {
+        return !!this.state // A state exists.
+            && this.state.actions.filter(x => // and we cannot find a pick turn in which
+                x.filter(y => // there exists an action...
+                    y.type === "pick" // that has to pick a champion
+                    && !y.completed // and hasn't been completed yet
+                ).length > 0).length === 0;
+    }
+
     /**
      * Helper method to load the specified json name from the ddragon static data.
      */
-    public loadStatic(filename: string): Promise<any> {
+    public async loadStatic(filename: string): Promise<any> {
+        const ddragonVersion = await loadDdragon();
         return new Promise(resolve => {
             const req = new XMLHttpRequest();
             req.onreadystatechange = () => {
@@ -283,7 +336,7 @@ export default class ChampSelect extends Vue {
                 const map = JSON.parse(req.responseText);
                 resolve(map);
             };
-            req.open("GET", "https://ddragon.leagueoflegends.com/cdn/" + ddragon() + "/data/en_US/" + filename, true);
+            req.open("GET", `https://ddragon.leagueoflegends.com/cdn/${ddragonVersion}/data/en_US/${filename}`, true);
             req.send();
         });
     }
diff --git a/web/src/components/champ-select/champ-select.vue b/web/src/components/champ-select/champ-select.vue
index b205835..c8baed3 100644
--- a/web/src/components/champ-select/champ-select.vue
+++ b/web/src/components/champ-select/champ-select.vue
@@ -3,6 +3,7 @@
         <summoner-picker :state="state" :show="pickingSummonerSpell" :first="pickingFirstSummonerSpell" @close="pickingSummonerSpell = false"></summoner-picker>
         <champion-picker :state="state" :show="pickingChampion" @close="pickingChampion = false"></champion-picker>
         <bench :state="state" :show="showingBench" @close="showingBench = false"></bench>
+        <skin-picker :state="state" :show="pickingSkin" @close="pickingSkin = false"></skin-picker>
 
         <timer :state="state"></timer>
         <members :state="state"></members>
@@ -11,7 +12,8 @@
             @spell="(pickingSummonerSpell = true, pickingFirstSummonerSpell = $event)"
             @expand="pickingChampion = true"
             @runes="showingRuneOverlay = true"
-            @bench="showingBench = true">
+            @bench="showingBench = true"
+            @skins="pickingSkin = true">
         </player-settings>
         <rune-editor :show="showingRuneOverlay" @close="showingRuneOverlay = false"></rune-editor>
 
diff --git a/web/src/components/champ-select/champion-picker.ts b/web/src/components/champ-select/champion-picker.ts
index 3cd0c43..88c5978 100644
--- a/web/src/components/champ-select/champion-picker.ts
+++ b/web/src/components/champ-select/champion-picker.ts
@@ -2,7 +2,6 @@ import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 import { ChampSelectAction, ChampSelectState, default as ChampSelect } from "./champ-select";
 import Root from "../root/root";
-import { ddragon } from "../../constants";
 
 @Component
 export default class ChampionPicker extends Vue {
@@ -21,22 +20,34 @@ export default class ChampionPicker extends Vue {
     // List of champions that the current user can ban. Includes already banned champions.
     bannableChampions: number[] = [];
 
+    searchTerm = "";
+
     created() {
         // Observe the list of pickable and bannable champions. The list is sorted by name.
-        this.$root.observe("/lol-champ-select/v1/pickable-champions", result => {
-            this.pickableChampions = (result.status === 200 ? result.content.championIds : this.pickableChampions).filter((x: number) => !!this.$parent.championDetails[x]);
+        this.$root.observe("/lol-champ-select/v1/pickable-champion-ids", result => {
+            this.pickableChampions = (result.status === 200 ? result.content : this.pickableChampions).filter((x: number) => !!this.$parent.championDetails[x]);
             this.pickableChampions.sort((a, b) => this.$parent.championDetails[a].name.localeCompare(this.$parent.championDetails[b].name));
         });
 
-        this.$root.observe("/lol-champ-select/v1/bannable-champions", result => {
-            this.bannableChampions = (result.status === 200 ? result.content.championIds : this.bannableChampions).filter((x: number) => !!this.$parent.championDetails[x]);
+        this.$root.observe("/lol-champ-select/v1/bannable-champion-ids", result => {
+            this.bannableChampions = (result.status === 200 ? result.content : this.bannableChampions).filter((x: number) => !!this.$parent.championDetails[x]);
             this.bannableChampions.sort((a, b) => this.$parent.championDetails[a].name.localeCompare(this.$parent.championDetails[b].name));
         });
     }
 
+    mounted() {
+        (<any>this.$refs.searchInput).addEventListener("focus", () => {
+            document.body.classList.add("in-input");
+        });
+
+        (<any>this.$refs.searchInput).addEventListener("blur", () => {
+            document.body.classList.remove("in-input");
+        });
+    }
+
     destroyed() {
-        this.$root.unobserve("/lol-champ-select/v1/pickable-champions");
-        this.$root.unobserve("/lol-champ-select/v1/bannable-champions");
+        this.$root.unobserve("/lol-champ-select/v1/pickable-champion-ids");
+        this.$root.unobserve("/lol-champ-select/v1/bannable-champion-ids");
     }
 
     /**
@@ -48,7 +59,11 @@ export default class ChampionPicker extends Vue {
 
         const allActions = (<ChampSelectAction[]>[]).concat(...this.state.actions);
         const bannedChamps = allActions.filter(x => x.type === "ban" && x.completed).map(x => x.championId);
-        return (isCurrentlyBanning ? this.bannableChampions : this.pickableChampions).filter(x => bannedChamps.indexOf(x) === -1);
+        const selectable = (isCurrentlyBanning ? this.bannableChampions : this.pickableChampions).filter(x => bannedChamps.indexOf(x) === -1);
+
+        return selectable
+            .filter(x => this.$parent.championDetails[x].name.toLowerCase().includes(this.searchTerm.toLowerCase()))
+            .sort((a, b) => this.$parent.championDetails[a].name.localeCompare(this.$parent.championDetails[b].name));
     }
 
     /**
@@ -56,7 +71,7 @@ export default class ChampionPicker extends Vue {
      */
     get header(): string {
         const act = this.$parent.getActions(this.state.localPlayer);
-        if (!act && this.firstUncompletedPickAction) return "Declare your Champion!";
+        if (!act && this.firstUncompletedPickAction) return "Declare Your Champion!";
         if (!act || act.type !== "ban") return "Pick a Champion";
         return "Ban a Champion";
     }
@@ -144,6 +159,14 @@ export default class ChampionPicker extends Vue {
     getChampionImage(id: number) {
         if (!this.$parent.championDetails[id]) return "";
 
-        return "https://ddragon.leagueoflegends.com/cdn/" + ddragon() + "/img/champion/" + this.$parent.championDetails[id].id + ".png";
+        return `https://ddragon.leagueoflegends.com/cdn/${this.$root.ddragonVersion}/img/champion/${this.$parent.championDetails[id].id}.png`;
+    }
+
+    /**
+     * @returns the name for the specified champion
+     */
+    championName(id: number) {
+        const entry = this.$parent.championDetails[id];
+        return entry ? entry.name : "???";
     }
 }
\ No newline at end of file
diff --git a/web/src/components/champ-select/champion-picker.vue b/web/src/components/champ-select/champion-picker.vue
index f080b1d..7998180 100644
--- a/web/src/components/champ-select/champion-picker.vue
+++ b/web/src/components/champ-select/champion-picker.vue
@@ -4,8 +4,13 @@
             <i class="ion-minus close" @click="$emit('close')"></i>
             <div class="header">{{ header }}</div>
 
+            <input ref="searchInput" v-model="searchTerm" type="text" class="search" autocomplete="off" spellcheck="false" placeholder="Search..." maxlength="24" autocorrect="off" autocapitalize="off">
+
             <div class="content">
-                <img @click="selectChampion(champId)" :class="selectedChampion === champId && 'selected'" v-for="champId in selectableChampions" :src="getChampionImage(champId)">
+                <a class="champion-option" v-for="champId in selectableChampions">
+                    <img @click="selectChampion(champId)" :class="selectedChampion === champId && 'selected'" :src="getChampionImage(champId)">
+                    <div class="name">{{ championName(champId) }}</div>
+                </a>
             </div>
 
             <lcu-button @click="completeAction" :disabled="!canCompleteAction" :type="buttonType">
@@ -69,6 +74,25 @@
             flex-wrap wrap
             justify-content center
 
+        .champion-option
+            display flex
+            flex-direction column
+            align-items center
+            transition 0.2s ease
+
+            &:active
+                opacity 0.7
+
+            .name
+                color #f0e6d3
+                font-size 35px
+                padding 5px
+                font-family LoL Body
+                max-width 22vw
+                white-space nowrap
+                overflow hidden
+                text-overflow ellipsis
+
         img
             box-sizing border-box
             border 2px solid transparent
@@ -81,4 +105,18 @@
         img.selected
             border-color #c89c3c
             opacity 1
+
+    .search
+        box-sizing border-box
+        height 110px
+        padding 20px
+        margin 20px 10px 20px 20px
+        -webkit-appearance none
+        outline none
+        border-radius 0
+        color #f0e6d2
+        font-size 40px
+        font-family "LoL Body"
+        border 3px solid #785a28
+        background-color black
 </style>
\ No newline at end of file
diff --git a/web/src/components/champ-select/members.ts b/web/src/components/champ-select/members.ts
index de36e29..bd8e529 100644
--- a/web/src/components/champ-select/members.ts
+++ b/web/src/components/champ-select/members.ts
@@ -1,10 +1,12 @@
+import Root from "../root/root";
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 import { default as ChampSelect, ChampSelectState, ChampSelectMember } from "./champ-select";
-import { ddragon, POSITION_NAMES } from "../../constants";
+import { POSITION_NAMES } from "@/constants";
 
 @Component
 export default class Members extends Vue {
+    $root: Root;
     $parent: ChampSelect;
 
     @Prop()
@@ -22,7 +24,14 @@ export default class Members extends Vue {
         if (!champ) return "background-color: transparent;";
 
         const fade = champId === member.championPickIntent ? "opacity: 0.6;" : "";
-        return "background-image: url(https://ddragon.leagueoflegends.com/cdn/img/champion/splash/" + champ.id + "_0.jpg);" + fade;
+
+        // Show skins if everyone has picked.
+        if (this.$parent.hasEveryonePicked) {
+            return `background-image: url(https://cdn.communitydragon.org/latest/champion/${champ.key}/splash-art/centered/skin/${member.selectedSkinId % 1000}), url(https://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champ.id}_${member.selectedSkinId % 1000}.jpg); ${fade}`;
+        }
+
+        // Else just show the champs.
+        return `background-image: url(https://cdn.communitydragon.org/latest/champion/${champ.key}/splash-art/centered), url(https://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champ.id}_0.jpg); ${fade}`;
     }
 
     /**
@@ -54,7 +63,7 @@ export default class Members extends Vue {
         }
 
         if (!member.assignedPosition) return extra;
-        return POSITION_NAMES[member.assignedPosition] + (extra ? " - " + extra : "");
+        return POSITION_NAMES[member.assignedPosition.toUpperCase()] + (extra ? " - " + extra : "");
     }
 
     /**
@@ -63,6 +72,6 @@ export default class Members extends Vue {
     getSummonerSpellImage(id: number): string {
         if (!this.$parent.summonerSpellDetails[id]) return "";
 
-        return "https://ddragon.leagueoflegends.com/cdn/" + ddragon() + "/img/spell/" + this.$parent.summonerSpellDetails[id].id + ".png";
+        return `https://ddragon.leagueoflegends.com/cdn/${this.$root.ddragonVersion}/img/spell/${this.$parent.summonerSpellDetails[id].id}.png`;
     }
-}
\ No newline at end of file
+}
diff --git a/web/src/components/champ-select/members.vue b/web/src/components/champ-select/members.vue
index b4cdf4a..b5fb60a 100644
--- a/web/src/components/champ-select/members.vue
+++ b/web/src/components/champ-select/members.vue
@@ -85,6 +85,7 @@
 
         .name
             font-size 45px
+            text-shadow 4px 4px 5px #111
 
         .state
             display inline-block
@@ -92,6 +93,7 @@
             transition 0.3s ease
             font-size 30px
             color #fffaef
+            text-shadow 4px 4px 5px #111
 
         .state:empty
             height 0
diff --git a/web/src/components/champ-select/player-settings.ts b/web/src/components/champ-select/player-settings.ts
index b350722..31c1435 100644
--- a/web/src/components/champ-select/player-settings.ts
+++ b/web/src/components/champ-select/player-settings.ts
@@ -1,7 +1,6 @@
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 import { ChampSelectState, default as ChampSelect } from "./champ-select";
-import { ddragon } from "../../constants";
 import Root from "../root/root";
 
 @Component({})
@@ -18,7 +17,7 @@ export default class PlayerSettings extends Vue {
     getSummonerSpellImage(id: number): string {
         if (!this.$parent.summonerSpellDetails[id]) return "";
 
-        return "https://ddragon.leagueoflegends.com/cdn/" + ddragon() + "/img/spell/" + this.$parent.summonerSpellDetails[id].id + ".png";
+        return `https://ddragon.leagueoflegends.com/cdn/${this.$root.ddragonVersion}/img/spell/${this.$parent.summonerSpellDetails[id].id}.png`;
     }
 
     /**
@@ -51,4 +50,11 @@ export default class PlayerSettings extends Vue {
         if (!this.allowsReroll) return "";
         return `(${this.$parent.rerollState.numberOfRolls}/${this.$parent.rerollState.maxRolls})`;
     }
+
+    /**
+     * @returns whether or not the user can pick a skin
+     */
+    get canPickSkins() {
+        return this.$parent.hasLockedChampion;
+    }
 }
\ No newline at end of file
diff --git a/web/src/components/champ-select/player-settings.vue b/web/src/components/champ-select/player-settings.vue
index 1ead8a3..805906e 100644
--- a/web/src/components/champ-select/player-settings.vue
+++ b/web/src/components/champ-select/player-settings.vue
@@ -1,19 +1,19 @@
 <template>
     <div class="player-settings">
-        <div class="chevron expand-button" @click="$emit('expand')" v-if="!allowsReroll">
+        <a class="chevron expand-button" @click="$emit('expand')" v-if="!allowsReroll">
             <i class="ion-chevron-up"></i>
-        </div>
+        </a>
 
         <div class="chevron" v-else>
-            <div class="reroll-button bordered" @click="reroll()" :class="canReroll || 'disabled'">
+            <a class="reroll-button bordered" @click="reroll()" :class="canReroll || 'disabled'">
                 <i class="ion-loop" style="margin-right: 15px"></i>
                 <span>Reroll {{ rerollState }}</span>
-            </div>
+            </a>
 
-            <div class="bench-button bordered" @click="$emit('bench')">
+            <a class="bench-button bordered" @click="$emit('bench')">
                 <i class="ion-chevron-up" style="margin-right: 15px"></i>
                 Bench
-            </div>
+            </a>
         </div>
 
         <div class="runes">
@@ -24,9 +24,15 @@
             <div class="circular-button" @click="$emit('runes')"><i class="ion-edit"></i></div>
         </div>
 
+        <div class="skins" :class="!canPickSkins && 'disabled'">
+            <div class="circular-button squared" @click="canPickSkins && $emit('skins')">
+                <img :src="require('../../static/skin_picker_icon.png')" style="height: 70px">
+            </div>
+        </div>
+
         <div class="summoners">
-            <img :src="getSummonerSpellImage(state.localPlayer.spell1Id)" @click="$emit('spell', true)">
-            <img :src="getSummonerSpellImage(state.localPlayer.spell2Id)" @click="$emit('spell', false)">
+            <highlightable><img :src="getSummonerSpellImage(state.localPlayer.spell1Id)" @click="$emit('spell', true)"></highlightable>
+            <highlightable><img :src="getSummonerSpellImage(state.localPlayer.spell2Id)" @click="$emit('spell', false)"></highlightable>
         </div>
     </div>
 </template>
@@ -41,6 +47,18 @@
 <style lang="stylus" scoped>
     @require "../../common.styl"
 
+    .skins.disabled
+        filter grayscale()
+
+    .circular-button.squared
+        border-radius 0
+
+        &::after
+            border-radius 0
+
+    .reroll-button:active, .bench-button:active, .expand-button:active
+        opacity 0.7
+
     .player-settings
         position relative
         box-sizing border-box
@@ -106,11 +124,11 @@
     .summoners
         display flex
         align-items center
-        padding 10px
+        padding 10px 10px 10px 0
 
         img
-            margin 20px
+            margin 10px
             border 1px solid #3c3c41
-            height player-dropdown-height * 1.8
-            width player-dropdown-height * 1.8
+            height player-dropdown-height * 1.5
+            width player-dropdown-height * 1.5
 </style>
\ No newline at end of file
diff --git a/web/src/components/champ-select/rune-editor.ts b/web/src/components/champ-select/rune-editor.ts
index 5428028..1355a5a 100644
--- a/web/src/components/champ-select/rune-editor.ts
+++ b/web/src/components/champ-select/rune-editor.ts
@@ -2,7 +2,6 @@ import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 import { default as ChampSelect, RunePage } from "./champ-select";
 import Root from "../root/root";
-import { ddragon } from "../../constants";
 
 interface RuneSlot {
     runes: {
@@ -64,7 +63,10 @@ export default class RuneEditor extends Vue {
         if (!this.currentPage) return;
         this.currentPage.primaryStyleId = id;
         this.currentPage.subStyleId = this.runes.filter(x => x.id !== id)[0].id;
-        this.currentPage.selectedPerkIds = [0, 0, 0, 0, 0, 0];
+
+        // Reset all runes except the stat shards.
+        this.currentPage.selectedPerkIds = [0, 0, 0, 0, 0, 0, this.currentPage.selectedPerkIds[6], this.currentPage.selectedPerkIds[7], this.currentPage.selectedPerkIds[8]];
+
         this.secondaryIndex = 0;
         this.savePage();
     }
diff --git a/web/src/components/champ-select/rune-editor.vue b/web/src/components/champ-select/rune-editor.vue
index 316d128..8141737 100644
--- a/web/src/components/champ-select/rune-editor.vue
+++ b/web/src/components/champ-select/rune-editor.vue
@@ -68,6 +68,34 @@
     body.has-notch .rune-editor
         margin-top calc(env(safe-area-inset-top) + 30px)
         padding-bottom calc(env(safe-area-inset-bottom) + 20px)
+
+    // Mobile safari crashes if we add circles for some dumb reason.
+    // Thus, only add them if we aren't on safari.
+    body:not(.is-ios) .tree-selector .tree::after
+        transition 0.3s ease
+        position absolute
+        content ""
+        width 130px
+        height 130px
+        top -25px
+        left -25px
+        border-radius 50%
+        z-index -1
+        background radial-gradient(transparent 62%, #785b28 65%, #c89c3c 76%, #c8a355 88%, #c8aa6e 100%)
+        opacity 0
+
+    body:not(.is-ios) .tree-runes .rune::after
+        transition 0.3s ease
+        position absolute
+        content ""
+        width 160px
+        height 160px
+        top -((160px - 128px) / 2)
+        left -((160px - 128px) / 2)
+        border-radius 50%
+        z-index -1
+        background radial-gradient(transparent 62%, #785b28 65%, #c89c3c 76%, #c8a355 88%, #c8aa6e 100%)
+        opacity 0
 </style>
 
 <style lang="stylus" scoped>
@@ -122,6 +150,7 @@
 
     .content
         overflow-y scroll
+        overflow-x hidden
         -webkit-overflow-scrolling touch
         padding-bottom 20px
 
@@ -151,19 +180,6 @@
                 transition 0.3s ease
                 filter grayscale(100%)
 
-            .tree::after
-                transition 0.3s ease
-                position absolute
-                content ""
-                width 130px
-                height 130px
-                top -25px
-                left -25px
-                border-radius 50%
-                z-index -1
-                background radial-gradient(transparent 62%, #785b28 65%, #c89c3c 76%, #c8a355 88%, #c8aa6e 100%)
-                opacity 0
-
             .tree.selected::after
                 opacity 1
 
@@ -227,19 +243,6 @@
             .rune.selected
                 filter none
 
-            .rune::after
-                transition 0.3s ease
-                position absolute
-                content ""
-                width 160px
-                height 160px
-                top -((160px - 128px) / 2)
-                left -((160px - 128px) / 2)
-                border-radius 50%
-                z-index -1
-                background radial-gradient(transparent 62%, #785b28 65%, #c89c3c 76%, #c8a355 88%, #c8aa6e 100%)
-                opacity 0
-
             .rune.stat::after
                 width 120px
                 height 120px
diff --git a/web/src/components/champ-select/skin-picker.ts b/web/src/components/champ-select/skin-picker.ts
new file mode 100644
index 0000000..f80f8cd
--- /dev/null
+++ b/web/src/components/champ-select/skin-picker.ts
@@ -0,0 +1,53 @@
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+import { ChampSelectState, default as ChampSelect, SkinItem } from "./champ-select";
+import Root from "../root/root";
+
+@Component
+export default class SkinPicker extends Vue {
+    $root: Root;
+    $parent: ChampSelect;
+
+    @Prop()
+    state: ChampSelectState;
+
+    @Prop()
+    show: boolean;
+
+    /**
+     * @returns the skins available for the selected champion
+     */
+    get availableSkins() {
+        // Find ID of selected champion.
+        const member = this.state.localPlayer;
+        const act = this.$parent.getActions(member);
+        const champId = (act ? act.championId : 0) || member.championId || member.championPickIntent;
+        if (!champId) return [];
+
+        // Also return unavailable skins, we can filter them out.
+        return this.$parent.skins.filter(x => x.championId === champId);
+    }
+
+    /**
+     * Selects the specified summoner, optionally swapping the spells.
+     */
+    selectSkin(skin: SkinItem) {
+        if (!skin.ownership.owned) return;
+
+        this.$root.request("/lol-champ-select/v1/session/my-selection", "PATCH", JSON.stringify({
+            selectedSkinId: skin.id
+        }));
+
+        this.$emit("close");
+    }
+
+    /**
+     * @returns the url to the splashart for the specified skin id
+     */
+    getSkinImage(skin: SkinItem): string {
+        const champ = this.$parent.championDetails[skin.championId];
+        if (!champ) return "";
+
+        return `background-image: url(https://ddragon.leagueoflegends.com/cdn/img/champion/splash/${champ.id}_${skin.id % 1000}.jpg);`;
+    }
+}
\ No newline at end of file
diff --git a/web/src/components/champ-select/skin-picker.vue b/web/src/components/champ-select/skin-picker.vue
new file mode 100644
index 0000000..2f6f469
--- /dev/null
+++ b/web/src/components/champ-select/skin-picker.vue
@@ -0,0 +1,111 @@
+<template>
+    <transition enter-active-class="fadeInUp" leave-active-class="fadeOutDown">
+        <div class="skin-selector" v-show="show">
+            <i class="ion-android-close close" @click="$emit('close')"></i>
+            <div class="header">Select Your Skin</div>
+
+            <div class="content">
+                <a class="skin" v-if="skin.ownership.owned" v-for="skin in availableSkins" @click="selectSkin(skin)">
+                    <div class="skin-image" :style="getSkinImage(skin)"></div>
+                    <div class="name">{{ skin.name }}</div>
+                </a>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts" src="./skin-picker.ts"></script>
+
+<style lang="stylus">
+    body.has-notch .skin-selector
+        margin-top calc(env(safe-area-inset-top) + 30px)
+        padding-bottom calc(env(safe-area-inset-bottom) + 20px)
+</style>
+
+<style lang="stylus" scoped>
+    @import "../../common.styl"
+
+    .fadeInUp, .fadeOutDown
+        animation-duration 0.4s !important
+
+    .skin-selector
+        position absolute
+        top timer-status-height
+        left 0
+        right 0
+        bottom 0
+        z-index 1
+        display flex
+        flex-direction column
+        align-items center
+        color #f0e6d3
+        background-image url(../../static/magic-background.jpg)
+        background-repeat no-repeat
+        background-size cover
+
+        .close
+            position absolute
+            top 22px
+            right 40px
+            font-size 70px
+
+        & > .header
+            width 100%
+            text-align center
+            border-bottom 1px solid lightgray
+            margin-top 20px
+            padding-bottom 20px
+            font-family "LoL Body"
+            font-size 60px
+
+        .content
+            max-height "calc(100vh - %s)" % (timer-status-height + 90px)
+            overflow-y scroll
+            -webkit-overflow-scrolling touch
+            width 90%
+
+        .skin
+            height 300px
+            box-sizing border-box
+            border 3px solid #c8aa6e
+            position relative
+            display flex
+            color white
+            width 100%
+            margin 25px 0
+            transition opacity 0.2s ease
+
+            &:active
+                opacity 0.7
+
+            .skin-image
+                background white
+                position absolute
+                z-index -1
+                left 0
+                top 0
+                bottom 0
+                right 0
+                background-repeat no-repeat
+                background-size cover
+                transition 0.3s ease
+
+                &:after
+                    content ""
+                    position absolute
+                    left 0
+                    top 0
+                    bottom 0
+                    right 0
+                    background-image linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%)
+
+            .name
+                position absolute
+                bottom 30px
+                flex 1
+                display flex
+                flex-direction column
+                margin 0 20px
+                font-size 45px
+                text-shadow 4px 4px 8px #111
+</style>
\ No newline at end of file
diff --git a/web/src/components/champ-select/summoner-picker.ts b/web/src/components/champ-select/summoner-picker.ts
index b9011c1..275e071 100644
--- a/web/src/components/champ-select/summoner-picker.ts
+++ b/web/src/components/champ-select/summoner-picker.ts
@@ -2,7 +2,6 @@ import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 import { ChampSelectState, default as ChampSelect } from "./champ-select";
 import Root from "../root/root";
-import { ddragon } from "../../constants";
 
 @Component
 export default class SummonerPicker extends Vue {
@@ -65,6 +64,6 @@ export default class SummonerPicker extends Vue {
     getSummonerSpellImage(id: number): string {
         if (!this.$parent.summonerSpellDetails[id]) return "";
 
-        return "https://ddragon.leagueoflegends.com/cdn/" + ddragon() + "/img/spell/" + this.$parent.summonerSpellDetails[id].id + ".png";
+        return `https://ddragon.leagueoflegends.com/cdn/${this.$root.ddragonVersion}/img/spell/${this.$parent.summonerSpellDetails[id].id}.png`;
     }
 }
\ No newline at end of file
diff --git a/web/src/components/champ-select/timer.ts b/web/src/components/champ-select/timer.ts
index 017446c..8a4c05c 100644
--- a/web/src/components/champ-select/timer.ts
+++ b/web/src/components/champ-select/timer.ts
@@ -1,10 +1,11 @@
 import Vue from "vue";
 import { Component, Prop, Watch } from "vue-property-decorator";
 import { default as ChampSelect, ChampSelectState, ChampSelectTimer, ChampSelectAction } from "./champ-select";
-import { ddragon } from "../../constants";
+import Root from "../root/root";
 
 @Component
 export default class Timer extends Vue {
+    $root: Root;
     $parent: ChampSelect;
 
     @Prop()
@@ -79,9 +80,11 @@ export default class Timer extends Vue {
      * @returns the path to the icon for the specified champion id
      */
     getChampionIcon(id: number) {
-        if (!this.$parent.championDetails[id]) return "";
+        // -1 is the no-ban icon. It is not included in ddragon.
+        if (id === -1) return "https://raw.communitydragon.org/8.1/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/-1.png";
 
-        return "https://ddragon.leagueoflegends.com/cdn/" + ddragon() + "/img/champion/" + this.$parent.championDetails[id].id + ".png";
+        if (!this.$parent.championDetails[id]) return "";
+        return `https://ddragon.leagueoflegends.com/cdn/${this.$root.ddragonVersion}/img/champion/${this.$parent.championDetails[id].id}.png`;
     }
 
     @Watch("state.timer")
diff --git a/web/src/components/common/highlightable.vue b/web/src/components/common/highlightable.vue
new file mode 100644
index 0000000..670976f
--- /dev/null
+++ b/web/src/components/common/highlightable.vue
@@ -0,0 +1,19 @@
+<template>
+    <a class="highlightable">
+        <slot></slot>
+    </a>
+</template>
+
+<script lang="ts">
+    import Vue from "vue";
+    import { Component } from "vue-property-decorator";
+
+    @Component
+    export default class Hightlightable extends Vue {
+    }
+</script>
+
+<style lang="stylus" scoped>
+    .highlightable:active
+        opacity 0.7
+</style>
\ No newline at end of file
diff --git a/web/src/components/common/lcu-button.vue b/web/src/components/common/lcu-button.vue
index 10bfb8f..6b17d0d 100644
--- a/web/src/components/common/lcu-button.vue
+++ b/web/src/components/common/lcu-button.vue
@@ -33,23 +33,38 @@
         text-transform uppercase
         font-size 60px
         font-family "LoL Display Bold", serif
-        transition 0.3s ease
+        transition 0.2s ease-in-out
 
         &.normal
             color #cdbe91
             .button-border
                 border-image linear-gradient(to top, #785b28 0%, #c89c3c 55%, #c8a355 71%, #c8aa6e 100%) 1 stretch
 
+        &.normal:active
+            color darken(#cdbe91, 60%)
+            .button-border
+                border-image linear-gradient(to top, darken(#785b28, 30%) 0%, darken(#c89c3c, 30%) 55%, darken(#c8a355, 30%) 71%, darken(#c8aa6e, 30%) 100%) 1 stretch
+
         &.confirm
             color #a3c7c7
             .button-border
                 border-image linear-gradient(to top, #0d404c 0%, #0596aa 44%, #0596aa 93%, #0ac8b9 100%) 1 stretch
 
+        &.confirm:active
+            color darken(#a3c7c7, 60%)
+            .button-border
+                border-image linear-gradient(to top, darken(#0d404c, 30%) 0%, darken(#0596aa, 30%) 44%, darken(#0596aa, 30%) 93%, darken(#0ac8b9, 30%) 100%) 1 stretch
+
         &.deny
             color #bd253c
             .button-border
                 border-image linear-gradient(to top, #c6403b 0%, #f9413f 44%, #ec3930 93%, #ee241d 100%) 1 stretch
 
+        &.deny:active
+            color darken(#bd253c, 60%)
+            .button-border
+                border-image linear-gradient(to top, darken(#c6403b, 30%) 0%, darken(#f9413f, 30%) 44%, darken(#ec3930, 30%) 93%, darken(#ee241d, 30%) 100%) 1 stretch
+
         &[disabled]
             background-color #1e2328
             color #5c5b57
diff --git a/web/src/components/invites/invites.ts b/web/src/components/invites/invites.ts
index 39edd3a..a3a1586 100644
--- a/web/src/components/invites/invites.ts
+++ b/web/src/components/invites/invites.ts
@@ -1,7 +1,6 @@
 import Vue from "vue";
 import Root from "../root/root";
 import { Component } from "vue-property-decorator";
-import { ddragon } from "../../constants";
 
 interface Invite {
     invitationId: string;
@@ -84,6 +83,6 @@ export default class Invites extends Vue {
      * @returns the path to the summoner icon for the inviter
      */
     getSummonerIcon(invite: Invite): string {
-        return `https://ddragon.leagueoflegends.com/cdn/${ddragon()}/img/profileicon/${invite.fromSummoner.profileIconId}.png`;
+        return `https://ddragon.leagueoflegends.com/cdn/${this.$root.ddragonVersion}/img/profileicon/${invite.fromSummoner.profileIconId}.png`;
     }
 }
\ No newline at end of file
diff --git a/web/src/components/invites/invites.vue b/web/src/components/invites/invites.vue
index b4fe459..46e0b7e 100644
--- a/web/src/components/invites/invites.vue
+++ b/web/src/components/invites/invites.vue
@@ -12,8 +12,8 @@
                 </div>
 
                 <div class="actions">
-                    <i @click="acceptInvite(invite)" v-if="invite.canAcceptInvitation" class="ion-checkmark"></i>
-                    <i @click="declineInvite(invite)" class="ion-close"></i>
+                    <highlightable><i @click="acceptInvite(invite)" v-if="invite.canAcceptInvitation" class="ion-checkmark"></i></highlightable>
+                    <highlightable><i @click="declineInvite(invite)" class="ion-close"></i></highlightable>
                 </div>
             </div>
         </transition-group>
diff --git a/web/src/components/lobby/create-lobby.ts b/web/src/components/lobby/create-lobby.ts
index 11fb658..dca018b 100644
--- a/web/src/components/lobby/create-lobby.ts
+++ b/web/src/components/lobby/create-lobby.ts
@@ -40,7 +40,7 @@ export default class CreateLobby extends Vue {
     created() {
         // Prepare icon paths.
         // Note that even though promises are used, these all resolve synchronously.
-        for (const map of ["sr", "ha", "tt", "rgm"]) {
+        for (const map of ["sr", "ha", "tt", "tft", "rgm"]) {
             import(/* webpackMode: "eager" */ `../../static/maps/${map}-default.png`).then(result => {
                 this.iconPaths[map + "-default"] = result.default;
             });
@@ -143,18 +143,18 @@ export default class CreateLobby extends Vue {
             const [aMap, aGameMode] = a.split("-");
             const [bMap, bGameMode] = b.split("-");
 
-            // First: prefer classic over anything other.
+            // First, prefer map 11 (rift) over anything else.
+            if (aMap === "11" && bMap !== "11") return -1;
+            if (bMap === "11") return 1;
+
+            // Then, prefer classic over anything other.
             if (aGameMode === "CLASSIC" && bGameMode !== "CLASSIC") return -1;
             if (bGameMode === "CLASSIC") return 1;
 
-            // Then, prefer ARAM over anything else.
+            // Finally, prefer ARAM over anything else.
             if (aGameMode === "ARAM" && bGameMode !== "ARAM") return -1;
             if (bGameMode === "ARAM") return 1;
 
-            // Finally, prefer map 11 (rift) over anything else.
-            if (aMap === "11" && bMap !== "11") return -1;
-            if (bMap === "11") return 1;
-
             // Else, return 0.
             return 0;
         });
@@ -177,6 +177,7 @@ export default class CreateLobby extends Vue {
             "10-CLASSIC": "tt",
             "11-CLASSIC": "sr",
             "12-ARAM": "ha",
+            "22-TFT": "tft"
         })[section] || "rgm";
 
         return this.iconPaths[mapName + "-" + extra];
diff --git a/web/src/components/lobby/create-lobby.vue b/web/src/components/lobby/create-lobby.vue
index 2031175..75d14fc 100644
--- a/web/src/components/lobby/create-lobby.vue
+++ b/web/src/components/lobby/create-lobby.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="create-lobby">
         <div class="header">
-            <i @click="$emit('close')" class="ion-chevron-left"></i>
+            <a class="close"><i @click="$emit('close')" class="ion-chevron-left"></i></a>
             <span>Create Lobby</span>
         </div>
 
@@ -23,7 +23,7 @@
         </div>
 
         <div class="queues" v-if="selectedSection">
-            <div
+            <a
                 class="queue"
                 v-for="queue in availableQueues[selectedSection]"
                 :class="selectedQueueId === queue.id && 'selected'"
@@ -33,7 +33,7 @@
                 </div>
 
                 <span>{{ queue.description }}</span>
-            </div>
+            </a>
         </div>
 
         <div class="create">
@@ -79,6 +79,9 @@
         background-color rgba(0, 0, 0, 0.7)
         border-bottom 1px solid white
 
+        .close:active i
+            opacity 0.7
+
         & i
             font-size 70px
             color #efe5d1
@@ -163,6 +166,9 @@
             border 5px solid #08181f
             background-color #f0e6d2
 
+        .queue:active span
+            color #d6c99f
+
         .queue.selected span
             color #efe5d1
 
diff --git a/web/src/components/lobby/invite-overlay.ts b/web/src/components/lobby/invite-overlay.ts
index af48b95..383a4f3 100644
--- a/web/src/components/lobby/invite-overlay.ts
+++ b/web/src/components/lobby/invite-overlay.ts
@@ -28,6 +28,14 @@ export default class InviteOverlay extends Vue {
         this.$root.observe("/lol-suggested-players/v1/suggested-players", result => {
             this.suggestions = result.status === 200 ? result.content : [];
         });
+
+        (<any>this.$refs.inviteField).addEventListener("focus", () => {
+            document.body.classList.add("in-input");
+        });
+
+        (<any>this.$refs.inviteField).addEventListener("blur", () => {
+            document.body.classList.remove("in-input");
+        });
     }
 
     destroyed() {
diff --git a/web/src/components/lobby/invite-overlay.vue b/web/src/components/lobby/invite-overlay.vue
index cf41a0d..2f5c7b1 100644
--- a/web/src/components/lobby/invite-overlay.vue
+++ b/web/src/components/lobby/invite-overlay.vue
@@ -1,11 +1,11 @@
 <template>
     <transition enter-active-class="fadeInUp" leave-active-class="fadeOutDown">
         <div class="invite-overlay" v-show="show">
-            <i class="ion-minus close" @click="$emit('close')"></i>
+            <highlightable><i class="ion-minus close" @click="$emit('close')"></i></highlightable>
             <div class="header">Invites</div>
 
             <div class="invite-summoner">
-                <input v-model="inviteName" type="text" autocomplete="off" spellcheck="false" placeholder="Summoner Name" maxlength="24" autocorrect="off" autocapitalize="off">
+                <input ref="inviteField" v-model="inviteName" type="text" autocomplete="off" spellcheck="false" placeholder="Summoner Name" maxlength="24" autocorrect="off" autocapitalize="off">
                 <div class="circular-button" @click="inviteManually"><i class="ion-plus"></i></div>
             </div>
 
@@ -20,8 +20,10 @@
             <span class="section-header">Suggested</span>
             <div class="content">
                 <div class="invite" v-for="suggestion in suggestions" @click="invite(suggestion.summonerId)">
-                    <i class="ion-plus"></i>
-                    <span>{{ suggestion.summonerName }}</span>
+                    <highlightable>
+                        <i class="ion-plus"></i>
+                        <span>{{ suggestion.summonerName }}</span>
+                    </highlightable>
                 </div>
             </div>
         </div>
@@ -93,7 +95,7 @@
         margin 20px 10px 20px 20px
         -webkit-appearance none
         outline none
-        border-radius 0px
+        border-radius 0
         color #f0e6d2
         font-size 40px
         font-family "LoL Body"
diff --git a/web/src/components/lobby/lobby-member.vue b/web/src/components/lobby/lobby-member.vue
index f363c87..dd0085c 100644
--- a/web/src/components/lobby/lobby-member.vue
+++ b/web/src/components/lobby/lobby-member.vue
@@ -20,13 +20,18 @@
         </div>
 
         <div class="right" v-if="showPositions && member.isLocalMember">
-            <img
+            <highlightable>
+                <img
                     @click="$emit('roles', true)"
                     :src="roleImage(member.firstPositionPreference)">
-            <img
+            </highlightable>
+
+            <highlightable>
+                <img
                     v-if="member.firstPositionPreference !== 'FILL'"
                     @click="$emit('roles', false)"
                     :src="roleImage(member.secondPositionPreference)">
+            </highlightable>
         </div>
     </div>
 </template>
@@ -35,10 +40,13 @@
     import Vue from "vue";
     import { Component, Prop } from "vue-property-decorator";
     import { LobbyMember } from "./lobby";
-    import { ddragon, POSITION_NAMES, roleImage as constantRoleImage } from "../../constants";
+    import { POSITION_NAMES, roleImage as constantRoleImage } from "../../constants";
+    import Root from "../root/root";
 
     @Component
     export default class LobbyMemberComponent extends Vue {
+        $root: Root;
+
         @Prop()
         member: LobbyMember;
 
@@ -49,7 +57,7 @@
         showModeration: boolean;
 
         get summonerIcon(): string {
-            return `https://ddragon.leagueoflegends.com/cdn/${ddragon()}/img/profileicon/${this.member.summoner.profileIconId}.png`;
+            return `https://ddragon.leagueoflegends.com/cdn/${this.$root.ddragonVersion}/img/profileicon/${this.member.summoner.profileIconId}.png`;
         }
 
         get positions(): string {
diff --git a/web/src/components/lobby/lobby.vue b/web/src/components/lobby/lobby.vue
index 6876a57..5e2887f 100644
--- a/web/src/components/lobby/lobby.vue
+++ b/web/src/components/lobby/lobby.vue
@@ -22,7 +22,7 @@
                         <span class="info">{{ lobbySubtitle }}</span>
                     </div>
 
-                    <i @click="leaveLobby()" class="ion-android-close"></i>
+                    <highlightable><i @click="leaveLobby()" class="ion-android-close"></i></highlightable>
                 </div>
 
                 <transition-group enter-active-class="slideInLeft" leave-active-class="slideOutRight">
@@ -40,9 +40,9 @@
                 </transition-group>
 
                 <!-- Show the invite overlay toggle if we can invite people. -->
-                <div class="invite-prompt" v-if="showInvitePrompt" @click="showingInvites = true">
+                <a class="invite-prompt" v-if="showInvitePrompt" @click="showingInvites = true">
                     <i class="ion-plus"></i>  Invite Others
-                </div>
+                </a>
             </div>
 
             <div class="bottom">
@@ -63,13 +63,19 @@
 
             <div class="no-lobby" v-show="!creatingLobby">
                 <span class="header">No Lobby</span>
-                <span class="detail">Wait for your friends to invite<br> you, or <span style="text-decoration: underline" @click="creatingLobby = true"> create a new lobby now.</span></span>
+                <span class="detail">
+                    Wait for your friends to invite<br>you, or
+
+                    <highlightable>
+                        <span style="text-decoration: underline" @click="creatingLobby = true"> create a new lobby now.</span>
+                    </highlightable>
+                </span>
 
                 <span v-if="!isStandalone" class="tip">
                     <b>PRO TIP: </b>
 
                     <template v-if="canTriggerHomescreenPrompt">
-                        <span style="text-decoration: underline" @click="triggerInstallPrompt">Add this site to your homescreen</span>
+                        <highlightable><span style="text-decoration: underline" @click="triggerInstallPrompt">Add this site to your homescreen</span></highlightable>
                     </template>
 
                     <template v-else>
@@ -136,6 +142,9 @@
             color #aaaea0
             font-size 50px
 
+        .close:active
+            opacity 0.7
+
         i
             margin-right 20px
             font-size 80px
@@ -153,6 +162,9 @@
         font-weight 700
         letter-spacing 0.075em
 
+        &:active
+            color rgba(246, 236, 216, 0.3)
+
         i
             padding-top 2px
             font-size 40px
diff --git a/web/src/components/lobby/role-picker.vue b/web/src/components/lobby/role-picker.vue
index 764dd95..e7f8e55 100644
--- a/web/src/components/lobby/role-picker.vue
+++ b/web/src/components/lobby/role-picker.vue
@@ -4,10 +4,10 @@
             <i class="ion-android-close close" @click="close()"></i>
             <div class="header">Select {{ selectingFirst ? 'First' : 'Second' }} Role</div>
 
-            <div class="role" @click="select(role.key)" v-for="role in ROLES">
+            <a class="role" @click="select(role.key)" v-for="role in ROLES">
                 <img :src="roleImage(role.key)">
                 <span>{{ role.name }}</span>
-            </div>
+            </a>
         </div>
     </transition>
 </template>
@@ -58,6 +58,9 @@
             font-family "LoL Display"
             font-size 60px
 
+            &:active span, &:active img
+                opacity 0.7
+
             span
                 margin-left 30px
 
diff --git a/web/src/components/queue/queue.vue b/web/src/components/queue/queue.vue
index 6c5f58e..6d2bf53 100644
--- a/web/src/components/queue/queue.vue
+++ b/web/src/components/queue/queue.vue
@@ -9,7 +9,7 @@
             </div>
         </div>
 
-        <i @click="leaveQueue" class="ion-log-out"></i>
+        <highlightable><i @click="leaveQueue" class="ion-log-out"></i></highlightable>
     </div>
 </template>
 
@@ -72,7 +72,7 @@
             font-size 50px
             color #0acbe6
 
-    .queue > i
+    .queue > a > i
         font-size 80px
         color #f0e6d3
         margin 40px
diff --git a/web/src/components/root/code-entry.vue b/web/src/components/root/code-entry.vue
index 5514b21..8214891 100644
--- a/web/src/components/root/code-entry.vue
+++ b/web/src/components/root/code-entry.vue
@@ -24,6 +24,16 @@
             this.value.split("").forEach((digit, idx) => {
                 (<any>this.$refs[keys[idx]]).value = digit;
             });
+
+            for (const key of keys) {
+                (<any>this.$refs[key]).addEventListener("focus", () => {
+                    document.body.classList.add("in-input");
+                });
+
+                (<any>this.$refs[key]).addEventListener("blur", () => {
+                    document.body.classList.remove("in-input");
+                });
+            }
         }
 
         nextCharacter(ev: KeyboardEvent) {
diff --git a/web/src/components/root/rift-socket.ts b/web/src/components/root/rift-socket.ts
index edc5204..69bd9b5 100644
--- a/web/src/components/root/rift-socket.ts
+++ b/web/src/components/root/rift-socket.ts
@@ -5,7 +5,7 @@ import { default as NodeRSAType } from "node-rsa";
  * WebSocket-esque class that handles messaging with Conduit through rift.
  */
 export default class RiftSocket {
-    private socket = new WebSocket("wss://rift.mimic.lol/mobile");
+    private socket: WebSocket;
 
     // Params from the normal websocket.
     public onopen: () => void;
@@ -20,6 +20,7 @@ export default class RiftSocket {
     private encrypted = false;
 
     constructor(private code: string) {
+        this.socket = new WebSocket("wss://rift.mimic.lol/mobile?code=" + code);
         this.socket.onopen = this.handleOpen;
         this.socket.onmessage = this.handleMessage;
         this.socket.onclose = this.handleClose;
@@ -34,7 +35,7 @@ export default class RiftSocket {
         window.crypto.getRandomValues(iv);
 
         // Encrypt using AES-CBC.
-        const encryptedBuffer = await window.crypto.subtle.encrypt({
+        const encryptedBuffer = await (window.crypto.subtle || window.crypto.webkitSubtle).encrypt({
             name: "AES-CBC",
             iv
         }, this.key!, stringToBuffer(contents));
@@ -99,7 +100,7 @@ export default class RiftSocket {
         window.crypto.getRandomValues(secret);
 
         // Generate a WebCrypto key.
-        this.key = await window.crypto.subtle.importKey("raw", secret.buffer, <any>{
+        this.key = await (window.crypto.subtle || window.crypto.webkitSubtle).importKey("raw", secret.buffer, <any>{
             name: "AES-CBC"
         }, false, ["encrypt", "decrypt"]);
 
@@ -133,7 +134,7 @@ export default class RiftSocket {
             const [iv, encrypted] = parts.split(":");
 
             // Decrypt incoming message.
-            const decrypted = await window.crypto.subtle.decrypt({
+            const decrypted = await (window.crypto.subtle || window.crypto.webkitSubtle).decrypt({
                 name: "AES-CBC",
                 iv: stringToBuffer(atob(iv))
             }, this.key!, stringToBuffer(atob(encrypted)));
@@ -244,4 +245,11 @@ export const enum MobileOpcode {
 
     // Conduit -> Mobile, when any subscribed endpoint gets an update
     UPDATE = 9
-}
\ No newline at end of file
+}
+
+declare global {
+    interface Crypto {
+        readonly subtle: SubtleCrypto;
+        readonly webkitSubtle?: SubtleCrypto; // iOS 8 - 10.
+    }
+}
diff --git a/web/src/components/root/root.ts b/web/src/components/root/root.ts
index 3d09f06..6f59fa1 100644
--- a/web/src/components/root/root.ts
+++ b/web/src/components/root/root.ts
@@ -1,3 +1,4 @@
+import { loadDdragon } from "@/constants";
 import Vue from "vue";
 import Component from "vue-class-component";
 
@@ -38,6 +39,7 @@ export default class Root extends Vue {
     socket: RiftSocket | null = null;
     peerVersion: Version = <any>null; // null is required to allow vue to observe
     notifications: string[] = [];
+    ddragonVersion: string = "";
 
     connecting = false;
 
@@ -68,6 +70,17 @@ export default class Root extends Vue {
 
             document.body.classList.add("has-notch");
         }, 500);
+
+        loadDdragon().then(version => {
+            console.log("Latest ddragon: " + version);
+            this.ddragonVersion = version;
+        });
+
+        // Add a class to the body if we're on iOS. We use it to selectively turn off some things.
+        const iOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
+        if (iOS) {
+            document.body.classList.add("is-ios");
+        }
     }
 
     /**
diff --git a/web/src/constants.ts b/web/src/constants.ts
index 78180ae..f1b2508 100644
--- a/web/src/constants.ts
+++ b/web/src/constants.ts
@@ -1,19 +1,19 @@
-let _ddragon: string | undefined;
-export function ddragon() {
-    if (_ddragon) return _ddragon;
+let ddragonPromise: Promise<string> | undefined;
+export async function loadDdragon(): Promise<string> {
+    if (ddragonPromise) return ddragonPromise;
 
-    // Load ddragon async.
-    const req = new XMLHttpRequest();
-    req.onreadystatechange = () => {
-        if (req.status !== 200 || !req.responseText || req.readyState !== 4) return;
-        const versions: string[] = JSON.parse(req.responseText);
-        _ddragon = versions[0]; // newest patch is first in the list
-    };
-    req.open("GET", "https://ddragon.leagueoflegends.com/api/versions.json", true);
-    req.send();
-
-    // Return default until we've loaded.
-    return "9.11.1";
+    return ddragonPromise = new Promise((resolve, reject) => {
+        // Load ddragon async.
+        const req = new XMLHttpRequest();
+        req.onreadystatechange = () => {
+            if (req.readyState !== 4) return;
+            if (req.status !== 200 || !req.responseText) return reject();
+            const versions: string[] = JSON.parse(req.responseText);
+            resolve(versions[0]);
+        };
+        req.open("GET", "https://ddragon.leagueoflegends.com/api/versions.json", true);
+        req.send();
+    });
 }
 
 export const POSITION_NAMES: { [key: string]: string } = {
@@ -46,6 +46,7 @@ export const GAMEMODE_NAMES: { [key: string]: string } = {
     "18-starguardian": "Invasion",
     "11-doombotsteemo": "Doom Bots of Doom",
     "11-practicetool": "Practice Tool",
+    "22-tft": "Teamfight Tactics"
 };
 
 import RoleUnselected from "./static/roles/role-unselected.png";
@@ -72,6 +73,7 @@ export function roleImage(role: Role) {
 import HABackground from "./static/backgrounds/bg-ha.jpg";
 import TTBackground from "./static/backgrounds/bg-tt.jpg";
 import SRBackground from "./static/backgrounds/bg-sr.jpg";
+import TFTBackground from "./static/backgrounds/bg-tft.jpg";
 import MagicBackground from "./static/magic-background.jpg";
 
 export function mapBackground(mapId: number) {
@@ -79,5 +81,6 @@ export function mapBackground(mapId: number) {
     if (mapId === 10) return "background-image: url(" + TTBackground + ");";
     if (mapId === 11) return "background-image: url(" + SRBackground + ");";
     if (mapId === 12) return "background-image: url(" + HABackground + ");";
+    if (mapId === 22) return "background-image: url(" + TFTBackground + ");";
     return "background-image: url(" + MagicBackground + ");";
-}
\ No newline at end of file
+}
diff --git a/web/src/main.ts b/web/src/main.ts
index 6bd92fc..6c0d27d 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -3,13 +3,29 @@ import Vue from "vue";
 import Root from "./components/root/root.vue";
 import "vue2-animate/dist/vue2-animate.min.css";
 import "./registerServiceWorker";
+import "./root.styl";
 
 import LcuButton from "./components/common/lcu-button.vue";
+import Highlightable from "./components/common/highlightable.vue";
+
 Vue.component("lcu-button", LcuButton);
+Vue.component("highlightable", Highlightable);
 
 // Catch the Android install prompt so that it can be triggered from the tip.
 window.addEventListener("beforeinstallprompt", e => {
     (<any>window).installPrompt = e;
 });
 
+// Register a dummy event listener to enable use of :active on iOS.
+document.addEventListener("touchstart", () => {},false);
+
+// Check for some things we require that aren't in all browsers.
+if (typeof window.crypto === "undefined"
+    || (typeof window.crypto.subtle === "undefined" && typeof window.crypto.webkitSubtle === "undefined")
+    || typeof TextEncoder === "undefined"
+    || typeof [].includes === "undefined"
+    || typeof Uint8Array === "undefined") {
+    alert("Your device is missing critical features required for Mimic to work. Please make sure that you have updated your phone to the newest version. You can proceed on your own risk, but it is very likely that things will break.");
+}
+
 new (<any>Root)().$mount("#root");
\ No newline at end of file
diff --git a/web/src/root.styl b/web/src/root.styl
new file mode 100644
index 0000000..cd121ac
--- /dev/null
+++ b/web/src/root.styl
@@ -0,0 +1,10 @@
+// Prevent vertical scrolling.
+body
+    width 100%
+    position fixed
+
+// Prevent selecting text, unless in a field.
+body:not(.in-input) *
+    -webkit-tap-highlight-color rgba(0, 0, 0, 0)
+    -webkit-touch-callout none
+    user-select none
\ No newline at end of file
diff --git a/web/src/static/backgrounds/bg-tft.jpg b/web/src/static/backgrounds/bg-tft.jpg
new file mode 100644
index 0000000..95ebd43
Binary files /dev/null and b/web/src/static/backgrounds/bg-tft.jpg differ
diff --git a/web/src/static/maps/tft-active.png b/web/src/static/maps/tft-active.png
new file mode 100644
index 0000000..d19cf0b
Binary files /dev/null and b/web/src/static/maps/tft-active.png differ
diff --git a/web/src/static/maps/tft-default.png b/web/src/static/maps/tft-default.png
new file mode 100644
index 0000000..935b30e
Binary files /dev/null and b/web/src/static/maps/tft-default.png differ
diff --git a/web/src/static/skin_picker_icon.png b/web/src/static/skin_picker_icon.png
new file mode 100644
index 0000000..e4dea6b
Binary files /dev/null and b/web/src/static/skin_picker_icon.png differ