diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index 6d811442..7f3db237 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="chat" class="chat" tabindex="-1">
-		<div :class="['show-more', {show: channel.moreHistoryAvailable}]">
+		<div v-show="channel.moreHistoryAvailable" class="show-more">
 			<button
 				ref="loadMoreButton"
 				:disabled="channel.historyLoading || !$store.state.isConnected"
diff --git a/client/components/NetworkForm.vue b/client/components/NetworkForm.vue
index a6735fdf..58c6f80e 100644
--- a/client/components/NetworkForm.vue
+++ b/client/components/NetworkForm.vue
@@ -4,193 +4,160 @@
 			<SidebarToggle />
 		</div>
 		<form class="container" method="post" action="" @submit.prevent="onSubmit">
-			<div class="row">
-				<div class="col-sm-12">
-					<h1 class="title">
-						<template v-if="defaults.uuid">
-							<input type="hidden" name="uuid" :value="defaults.uuid" />
-							Edit {{ defaults.name }}
-						</template>
-						<template v-else>
-							<template v-if="config.public">The Lounge - </template>
-							Connect
-							<template v-if="!config.displayNetwork">
-								<template v-if="config.lockNetwork">
-									to {{ defaults.name }}
-								</template>
-							</template>
-						</template>
-					</h1>
-				</div>
-				<template v-if="config.displayNetwork">
-					<div>
-						<div class="col-sm-12">
-							<h2>Network settings</h2>
-						</div>
-						<div class="col-sm-3">
-							<label for="connect:name">Name</label>
-						</div>
-						<div class="col-sm-9">
-							<input
-								id="connect:name"
-								class="input"
-								name="name"
-								:value="defaults.name"
-								maxlength="100"
-							/>
-						</div>
-						<div class="col-sm-3">
-							<label for="connect:host">Server</label>
-						</div>
-						<div class="col-sm-6 col-xs-8">
-							<input
-								id="connect:host"
-								class="input"
-								name="host"
-								:value="defaults.host"
-								aria-label="Server address"
-								maxlength="255"
-								required
-								:disabled="config.lockNetwork ? true : false"
-							/>
-						</div>
-						<div class="col-sm-3 col-xs-4">
-							<div class="port">
-								<input
-									class="input"
-									type="number"
-									min="1"
-									max="65535"
-									name="port"
-									:value="defaults.port"
-									aria-label="Server port"
-									:disabled="config.lockNetwork ? true : false"
-								/>
-							</div>
-						</div>
-						<div class="clearfix" />
-						<div class="col-sm-9 col-sm-offset-3">
-							<label class="tls">
-								<input
-									type="checkbox"
-									name="tls"
-									:checked="defaults.tls ? true : false"
-									:disabled="config.lockNetwork ? true : false"
-								/>
-								Use secure connection (TLS)
-							</label>
-						</div>
-						<div class="col-sm-9 col-sm-offset-3">
-							<label class="tls">
-								<input
-									type="checkbox"
-									name="rejectUnauthorized"
-									:checked="defaults.rejectUnauthorized ? true : false"
-									:disabled="config.lockNetwork ? true : false"
-								/>
-								Only allow trusted certificates
-							</label>
-						</div>
-						<div class="clearfix" />
-					</div>
+			<h1 class="title">
+				<template v-if="defaults.uuid">
+					<input type="hidden" name="uuid" :value="defaults.uuid" />
+					Edit {{ defaults.name }}
 				</template>
-				<div class="col-sm-12">
-					<h2>User preferences</h2>
-				</div>
-				<div class="col-sm-3">
-					<label for="connect:nick">Nick</label>
-				</div>
-				<div class="col-sm-9">
+				<template v-else>
+					<template v-if="config.public">The Lounge - </template>
+					Connect
+					<template v-if="!config.displayNetwork">
+						<template v-if="config.lockNetwork"> to {{ defaults.name }} </template>
+					</template>
+				</template>
+			</h1>
+			<template v-if="config.displayNetwork">
+				<h2>Network settings</h2>
+				<div class="connect-row">
+					<label for="connect:name">Name</label>
 					<input
-						id="connect:nick"
-						class="input nick"
-						name="nick"
-						:value="defaults.nick"
+						id="connect:name"
+						class="input"
+						name="name"
+						:value="defaults.name"
 						maxlength="100"
-						required
-						@input="onNickChanged"
 					/>
 				</div>
-				<template v-if="!config.useHexIp">
-					<div class="col-sm-3">
-						<label for="connect:username">Username</label>
-					</div>
-					<div class="col-sm-9">
+				<div class="connect-row">
+					<label for="connect:host">Server</label>
+					<div class="input-wrap">
 						<input
-							id="connect:username"
-							ref="usernameInput"
-							class="input username"
-							name="username"
-							:value="defaults.username"
-							maxlength="512"
-						/>
-					</div>
-				</template>
-				<div class="col-sm-3">
-					<label for="connect:password">Password</label>
-				</div>
-				<div class="col-sm-9 password-container">
-					<RevealPassword v-slot:default="slotProps">
-						<input
-							id="connect:password"
-							v-model="defaults.password"
+							id="connect:host"
 							class="input"
-							:type="slotProps.isVisible ? 'text' : 'password'"
-							name="password"
-							maxlength="512"
+							name="host"
+							:value="defaults.host"
+							aria-label="Server address"
+							maxlength="255"
+							required
+							:disabled="config.lockNetwork ? true : false"
 						/>
-					</RevealPassword>
+						<span id="connect:portseparator">:</span>
+						<input
+							id="connect:port"
+							class="input"
+							type="number"
+							min="1"
+							max="65535"
+							name="port"
+							:value="defaults.port"
+							aria-label="Server port"
+							:disabled="config.lockNetwork ? true : false"
+						/>
+					</div>
 				</div>
-				<div class="col-sm-3">
-					<label for="connect:realname">Real name</label>
+				<div class="connect-row">
+					<label></label>
+					<div class="input-wrap">
+						<label class="tls">
+							<input
+								type="checkbox"
+								name="tls"
+								:checked="defaults.tls ? true : false"
+								:disabled="config.lockNetwork ? true : false"
+							/>
+							Use secure connection (TLS)
+						</label>
+						<label class="tls">
+							<input
+								type="checkbox"
+								name="rejectUnauthorized"
+								:checked="defaults.rejectUnauthorized ? true : false"
+								:disabled="config.lockNetwork ? true : false"
+							/>
+							Only allow trusted certificates
+						</label>
+					</div>
 				</div>
-				<div class="col-sm-9">
+			</template>
+
+			<h2>User preferences</h2>
+			<div class="connect-row">
+				<label for="connect:nick">Nick</label>
+				<input
+					id="connect:nick"
+					class="input nick"
+					name="nick"
+					:value="defaults.nick"
+					maxlength="100"
+					required
+					@input="onNickChanged"
+				/>
+			</div>
+			<template v-if="!config.useHexIp">
+				<div class="connect-row">
+					<label for="connect:username">Username</label>
 					<input
-						id="connect:realname"
-						class="input"
-						name="realname"
-						:value="defaults.realname"
+						id="connect:username"
+						ref="usernameInput"
+						class="input username"
+						name="username"
+						:value="defaults.username"
 						maxlength="512"
 					/>
 				</div>
-				<template v-if="defaults.uuid">
-					<div class="col-sm-3">
-						<label for="connect:commands">Commands</label>
-					</div>
-					<div class="col-sm-9">
-						<textarea
-							id="connect:commands"
-							class="input"
-							name="commands"
-							placeholder="One raw command per line, each command will be executed on new connection"
-							:value="defaults.commands ? defaults.commands.join('\n') : ''"
-						/>
-					</div>
-					<div class="col-sm-9 col-sm-offset-3">
-						<button type="submit" class="btn" :disabled="disabled ? true : false">
-							Save
-						</button>
-					</div>
-				</template>
-				<template v-else>
-					<div class="col-sm-3">
-						<label for="connect:channels">Channels</label>
-					</div>
-					<div class="col-sm-9">
-						<input
-							id="connect:channels"
-							class="input"
-							name="join"
-							:value="defaults.join"
-						/>
-					</div>
-					<div class="col-sm-9 col-sm-offset-3">
-						<button type="submit" class="btn" :disabled="disabled ? true : false">
-							Connect
-						</button>
-					</div>
-				</template>
+			</template>
+			<div class="connect-row">
+				<label for="connect:password">Password</label>
+				<RevealPassword v-slot:default="slotProps" class="input-wrap password-container">
+					<input
+						id="connect:password"
+						v-model="defaults.password"
+						class="input"
+						:type="slotProps.isVisible ? 'text' : 'password'"
+						name="password"
+						maxlength="512"
+					/>
+				</RevealPassword>
 			</div>
+			<div class="connect-row">
+				<label for="connect:realname">Real name</label>
+				<input
+					id="connect:realname"
+					class="input"
+					name="realname"
+					:value="defaults.realname"
+					maxlength="512"
+				/>
+			</div>
+			<template v-if="defaults.uuid">
+				<div class="connect-row">
+					<label for="connect:commands">Commands</label>
+					<textarea
+						id="connect:commands"
+						class="input"
+						name="commands"
+						placeholder="One raw command per line, each command will be executed on new connection"
+						:value="defaults.commands ? defaults.commands.join('\n') : ''"
+					/>
+				</div>
+				<div>
+					<button type="submit" class="btn" :disabled="disabled ? true : false">
+						Save
+					</button>
+				</div>
+			</template>
+			<template v-else>
+				<div class="connect-row">
+					<label for="connect:channels">Channels</label>
+					<input id="connect:channels" class="input" name="join" :value="defaults.join" />
+				</div>
+				<div>
+					<button type="submit" class="btn" :disabled="disabled ? true : false">
+						Connect
+					</button>
+				</div>
+			</template>
 		</form>
 	</div>
 </template>
diff --git a/client/components/Session.vue b/client/components/Session.vue
index e10d8951..3e1d488d 100644
--- a/client/components/Session.vue
+++ b/client/components/Session.vue
@@ -1,30 +1,28 @@
 <template>
-	<p>
-		<button class="btn pull-right remove-session" @click.prevent="signOut">
-			<template v-if="session.current">
-				Sign out
-			</template>
-			<template v-else>
-				Revoke
-			</template>
-		</button>
+	<div class="session-item">
+		<div class="session-item-info">
+			<strong>{{ session.agent }}</strong>
 
-		<strong>{{ session.agent }}</strong>
+			<a :href="'https://ipinfo.io/' + session.ip" target="_blank" rel="noopener">{{
+				session.ip
+			}}</a>
 
-		<a :href="'https://ipinfo.io/' + session.ip" target="_blank" rel="noopener">{{
-			session.ip
-		}}</a>
-
-		<template v-if="!session.current">
-			<br />
-			<template v-if="session.active">
-				<em>Currently active</em>
+			<template v-if="!session.current">
+				<p v-if="session.active">
+					<em>Currently active</em>
+				</p>
+				<p v-else>
+					Last used on <time>{{ session.lastUse | localetime }}</time>
+				</p>
 			</template>
-			<template v-else>
-				Last used on <time>{{ session.lastUse | localetime }}</time>
-			</template>
-		</template>
-	</p>
+		</div>
+		<div class="session-item-btn">
+			<button class="btn" @click.prevent="signOut">
+				<template v-if="session.current">Sign out</template>
+				<template v-else>Revoke</template>
+			</button>
+		</div>
+	</div>
 </template>
 
 <script>
diff --git a/client/components/Windows/Help.vue b/client/components/Windows/Help.vue
index 1ffb0d82..0890fa43 100644
--- a/client/components/Windows/Help.vue
+++ b/client/components/Windows/Help.vue
@@ -6,15 +6,15 @@
 		<div class="container">
 			<h1 class="title">Help</h1>
 
-			<h2>
-				<small class="pull-right">
+			<h2 class="help-version-title">
+				<span>About The Lounge</span>
+				<small>
 					v{{ $store.state.serverConfiguration.version }} (<router-link
 						id="view-changelog"
 						to="/changelog"
 						>release notes</router-link
 					>)
 				</small>
-				About The Lounge
 			</h2>
 
 			<div class="about">
diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index f7d0c90d..9f880042 100644
--- a/client/components/Windows/Settings.vue
+++ b/client/components/Windows/Settings.vue
@@ -6,471 +6,427 @@
 		<form ref="settingsForm" class="container" @change="onChange" @submit.prevent>
 			<h1 class="title">Settings</h1>
 
-			<div class="row">
-				<div class="col-sm-6">
+			<div>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.advanced"
+						type="checkbox"
+						name="advanced"
+					/>
+					Advanced settings
+				</label>
+			</div>
+
+			<div v-if="canRegisterProtocol || hasInstallPromptEvent">
+				<h2>Native app</h2>
+				<button
+					v-if="hasInstallPromptEvent"
+					type="button"
+					class="btn"
+					@click.prevent="nativeInstallPrompt"
+				>
+					Add The Lounge to Home screen
+				</button>
+				<button
+					v-if="canRegisterProtocol"
+					type="button"
+					class="btn"
+					@click.prevent="registerProtocol"
+				>
+					Open irc:// URLs with The Lounge
+				</button>
+			</div>
+
+			<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
+				<h2>Settings synchronisation</h2>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.syncSettings"
+						type="checkbox"
+						name="syncSettings"
+					/>
+					Synchronize settings with other clients
+				</label>
+				<template v-if="!$store.state.settings.syncSettings">
+					<div v-if="$store.state.serverHasSettings" class="settings-sync-panel">
+						<p>
+							<strong>Warning:</strong> Checking this box will override the settings
+							of this client with those stored on the server.
+						</p>
+						<p>
+							Use the button below to enable synchronization, and override any
+							settings already synced to the server.
+						</p>
+						<button type="button" class="btn btn-small" @click="onForceSyncClick">
+							Sync settings and enable
+						</button>
+					</div>
+					<div v-else class="settings-sync-panel">
+						<p>
+							<strong>Warning:</strong> No settings have been synced before. Enabling
+							this will sync all settings of this client as the base for other
+							clients.
+						</p>
+					</div>
+				</template>
+			</div>
+
+			<h2>Messages</h2>
+			<div>
+				<label class="opt">
+					<input :checked="$store.state.settings.motd" type="checkbox" name="motd" />
+					Show <abbr title="Message Of The Day">MOTD</abbr>
+				</label>
+			</div>
+			<div>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.showSeconds"
+						type="checkbox"
+						name="showSeconds"
+					/>
+					Show seconds in timestamp
+				</label>
+			</div>
+			<div v-if="$store.state.settings.advanced">
+				<h2>Automatic away message</h2>
+
+				<label class="opt">
+					<label for="awayMessage" class="sr-only">Automatic away message</label>
+					<input
+						id="awayMessage"
+						:value="$store.state.settings.awayMessage"
+						type="text"
+						name="awayMessage"
+						class="input"
+						placeholder="Away message if The Lounge is not open"
+					/>
+				</label>
+			</div>
+			<h2>
+				Status messages
+				<span
+					class="tooltipped tooltipped-n tooltipped-no-delay"
+					aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
+				>
+					<button
+						class="extra-help"
+						aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
+					/>
+				</span>
+			</h2>
+			<div>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.statusMessages === 'shown'"
+						type="radio"
+						name="statusMessages"
+						value="shown"
+					/>
+					Show all status messages individually
+				</label>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.statusMessages === 'condensed'"
+						type="radio"
+						name="statusMessages"
+						value="condensed"
+					/>
+					Condense status messages together
+				</label>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.statusMessages === 'hidden'"
+						type="radio"
+						name="statusMessages"
+						value="hidden"
+					/>
+					Hide all status messages
+				</label>
+			</div>
+			<h2>Visual Aids</h2>
+			<div>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.coloredNicks"
+						type="checkbox"
+						name="coloredNicks"
+					/>
+					Enable colored nicknames
+				</label>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.autocomplete"
+						type="checkbox"
+						name="autocomplete"
+					/>
+					Enable autocomplete
+				</label>
+			</div>
+			<div v-if="$store.state.settings.advanced">
+				<label class="opt">
+					<label for="nickPostfix" class="sr-only">
+						Nick autocomplete postfix (e.g. <code>, </code>)
+					</label>
+					<input
+						id="nickPostfix"
+						:value="$store.state.settings.nickPostfix"
+						type="text"
+						name="nickPostfix"
+						class="input"
+						placeholder="Nick autocomplete postfix (e.g. ', ')"
+					/>
+				</label>
+			</div>
+
+			<h2>Theme</h2>
+			<div>
+				<label for="theme-select" class="sr-only">Theme</label>
+				<select
+					id="theme-select"
+					:value="$store.state.settings.theme"
+					name="theme"
+					class="input"
+				>
+					<option
+						v-for="theme in $store.state.serverConfiguration.themes"
+						:key="theme.name"
+						:value="theme.name"
+					>
+						{{ theme.displayName }}
+					</option>
+				</select>
+			</div>
+
+			<template v-if="$store.state.serverConfiguration.prefetch">
+				<h2>Link previews</h2>
+				<div>
 					<label class="opt">
 						<input
-							:checked="$store.state.settings.advanced"
+							:checked="$store.state.settings.media"
 							type="checkbox"
-							name="advanced"
+							name="media"
 						/>
-						Advanced settings
+						Auto-expand media
 					</label>
 				</div>
+				<div>
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.links"
+							type="checkbox"
+							name="links"
+						/>
+						Auto-expand websites
+					</label>
+				</div>
+			</template>
+
+			<template v-if="!$store.state.serverConfiguration.public">
+				<h2>Push Notifications</h2>
+				<div>
+					<button
+						id="pushNotifications"
+						type="button"
+						class="btn"
+						:disabled="
+							$store.state.pushNotificationState !== 'supported' &&
+								$store.state.pushNotificationState !== 'subscribed'
+						"
+						@click="onPushButtonClick"
+					>
+						<template v-if="$store.state.pushNotificationState === 'subscribed'">
+							Unsubscribe from push notifications
+						</template>
+						<template v-else-if="$store.state.pushNotificationState === 'loading'">
+							Loading…
+						</template>
+						<template v-else>
+							Subscribe to push notifications
+						</template>
+					</button>
+					<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
+						<strong>Warning</strong>: Push notifications are only supported over HTTPS
+						connections.
+					</div>
+					<div v-if="$store.state.pushNotificationState === 'unsupported'" class="error">
+						<strong>Warning</strong>:
+						<span>Push notifications are not supported by your browser.</span>
+					</div>
+				</div>
+			</template>
+
+			<h2>Browser Notifications</h2>
+			<div>
+				<label class="opt">
+					<input
+						id="desktopNotifications"
+						:checked="$store.state.settings.desktopNotifications"
+						type="checkbox"
+						name="desktopNotifications"
+					/>
+					Enable browser notifications<br />
+					<div
+						v-if="$store.state.desktopNotificationState === 'unsupported'"
+						class="error"
+					>
+						<strong>Warning</strong>: Notifications are not supported by your browser.
+					</div>
+					<div
+						v-if="$store.state.desktopNotificationState === 'blocked'"
+						id="warnBlockedDesktopNotifications"
+						class="error"
+					>
+						<strong>Warning</strong>: Notifications are blocked by your browser.
+					</div>
+				</label>
+			</div>
+			<div>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.notification"
+						type="checkbox"
+						name="notification"
+					/>
+					Enable notification sound
+				</label>
+			</div>
+			<div>
+				<div class="opt">
+					<button id="play" @click.prevent="playNotification">Play sound</button>
+				</div>
 			</div>
 
-			<div class="row">
-				<div v-if="canRegisterProtocol || hasInstallPromptEvent" class="col-sm-12">
-					<h2>Native app</h2>
-					<button
-						v-if="hasInstallPromptEvent"
-						type="button"
-						class="btn"
-						@click.prevent="nativeInstallPrompt"
-					>
-						Add The Lounge to Home screen
-					</button>
-					<button
-						v-if="canRegisterProtocol"
-						type="button"
-						class="btn"
-						@click.prevent="registerProtocol"
-					>
-						Open irc:// URLs with The Lounge
-					</button>
-				</div>
-
-				<div
-					v-if="
-						!$store.state.serverConfiguration.public && $store.state.settings.advanced
-					"
-					class="col-sm-12"
-				>
-					<h2>
-						Settings synchronisation
-						<span
-							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="Note: This is an experimental feature and may change in future releases."
-						>
-							<button
-								class="extra-experimental"
-								aria-label="Note: This is an experimental feature and may change in future releases."
-							/>
-						</span>
-					</h2>
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.syncSettings"
-							type="checkbox"
-							name="syncSettings"
-						/>
-						Synchronize settings with other clients
-					</label>
-					<template v-if="!$store.state.settings.syncSettings">
-						<div v-if="$store.state.serverHasSettings" class="settings-sync-panel">
-							<p>
-								<strong>Warning:</strong> Checking this box will override the
-								settings of this client with those stored on the server.
-							</p>
-							<p>
-								Use the button below to enable synchronization, and override any
-								settings already synced to the server.
-							</p>
-							<button type="button" class="btn btn-small" @click="onForceSyncClick">
-								Sync settings and enable
-							</button>
-						</div>
-						<div v-else class="settings-sync-panel">
-							<p>
-								<strong>Warning:</strong> No settings have been synced before.
-								Enabling this will sync all settings of this client as the base for
-								other clients.
-							</p>
-						</div>
-					</template>
-				</div>
-
-				<div class="col-sm-12">
-					<h2>Messages</h2>
-				</div>
-				<div class="col-sm-6">
-					<label class="opt">
-						<input :checked="$store.state.settings.motd" type="checkbox" name="motd" />
-						Show <abbr title="Message Of The Day">MOTD</abbr>
-					</label>
-				</div>
-				<div class="col-sm-6">
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.showSeconds"
-							type="checkbox"
-							name="showSeconds"
-						/>
-						Show seconds in timestamp
-					</label>
-				</div>
-				<div v-if="$store.state.settings.advanced" class="col-sm-12">
-					<h2>Automatic away message</h2>
-
-					<label class="opt">
-						<label for="awayMessage" class="sr-only">Automatic away message</label>
-						<input
-							id="awayMessage"
-							:value="$store.state.settings.awayMessage"
-							type="text"
-							name="awayMessage"
-							class="input"
-							placeholder="Away message if The Lounge is not open"
-						/>
-					</label>
-				</div>
-				<div class="col-sm-12">
-					<h2>
-						Status messages
-						<span
-							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
-						>
-							<button
-								class="extra-help"
-								aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
-							/>
-						</span>
-					</h2>
-				</div>
-				<div class="col-sm-12">
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.statusMessages === 'shown'"
-							type="radio"
-							name="statusMessages"
-							value="shown"
-						/>
-						Show all status messages individually
-					</label>
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.statusMessages === 'condensed'"
-							type="radio"
-							name="statusMessages"
-							value="condensed"
-						/>
-						Condense status messages together
-					</label>
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.statusMessages === 'hidden'"
-							type="radio"
-							name="statusMessages"
-							value="hidden"
-						/>
-						Hide all status messages
-					</label>
-				</div>
-				<div class="col-sm-12">
-					<h2>Visual Aids</h2>
-				</div>
-				<div class="col-sm-12">
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.coloredNicks"
-							type="checkbox"
-							name="coloredNicks"
-						/>
-						Enable colored nicknames
-					</label>
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.autocomplete"
-							type="checkbox"
-							name="autocomplete"
-						/>
-						Enable autocomplete
-					</label>
-				</div>
-				<div v-if="$store.state.settings.advanced" class="col-sm-12">
-					<label class="opt">
-						<label for="nickPostfix" class="sr-only">
-							Nick autocomplete postfix (e.g. <code>, </code>)
-						</label>
-						<input
-							id="nickPostfix"
-							:value="$store.state.settings.nickPostfix"
-							type="text"
-							name="nickPostfix"
-							class="input"
-							placeholder="Nick autocomplete postfix (e.g. ', ')"
-						/>
-					</label>
-				</div>
-
-				<div class="col-sm-12">
-					<h2>Theme</h2>
-				</div>
-				<div class="col-sm-12">
-					<label for="theme-select" class="sr-only">Theme</label>
-					<select
-						id="theme-select"
-						:value="$store.state.settings.theme"
-						name="theme"
-						class="input"
-					>
-						<option
-							v-for="theme in $store.state.serverConfiguration.themes"
-							:key="theme.name"
-							:value="theme.name"
-						>
-							{{ theme.displayName }}
-						</option>
-					</select>
-				</div>
-
-				<template v-if="$store.state.serverConfiguration.prefetch">
-					<div class="col-sm-12">
-						<h2>Link previews</h2>
-					</div>
-					<div class="col-sm-6">
-						<label class="opt">
-							<input
-								:checked="$store.state.settings.media"
-								type="checkbox"
-								name="media"
-							/>
-							Auto-expand media
-						</label>
-					</div>
-					<div class="col-sm-6">
-						<label class="opt">
-							<input
-								:checked="$store.state.settings.links"
-								type="checkbox"
-								name="links"
-							/>
-							Auto-expand websites
-						</label>
-					</div>
-				</template>
-
-				<template v-if="!$store.state.serverConfiguration.public">
-					<div class="col-sm-12">
-						<h2>Push Notifications</h2>
-					</div>
-					<div class="col-sm-12">
-						<button
-							id="pushNotifications"
-							type="button"
-							class="btn"
-							:disabled="
-								$store.state.pushNotificationState !== 'supported' &&
-									$store.state.pushNotificationState !== 'subscribed'
-							"
-							@click="onPushButtonClick"
-						>
-							<template v-if="$store.state.pushNotificationState === 'subscribed'">
-								Unsubscribe from push notifications
-							</template>
-							<template v-else-if="$store.state.pushNotificationState === 'loading'">
-								Loading…
-							</template>
-							<template v-else>
-								Subscribe to push notifications
-							</template>
-						</button>
-						<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
-							<strong>Warning</strong>: Push notifications are only supported over
-							HTTPS connections.
-						</div>
-						<div
-							v-if="$store.state.pushNotificationState === 'unsupported'"
-							class="error"
-						>
-							<strong>Warning</strong>:
-							<span>Push notifications are not supported by your browser.</span>
-						</div>
-					</div>
-				</template>
-
-				<div class="col-sm-12">
-					<h2>Browser Notifications</h2>
-				</div>
-				<div class="col-sm-12">
-					<label class="opt">
-						<input
-							id="desktopNotifications"
-							:checked="$store.state.settings.desktopNotifications"
-							type="checkbox"
-							name="desktopNotifications"
-						/>
-						Enable browser notifications<br />
-						<div
-							v-if="$store.state.desktopNotificationState === 'unsupported'"
-							class="error"
-						>
-							<strong>Warning</strong>: Notifications are not supported by your
-							browser.
-						</div>
-						<div
-							v-if="$store.state.desktopNotificationState === 'blocked'"
-							id="warnBlockedDesktopNotifications"
-							class="error"
-						>
-							<strong>Warning</strong>: Notifications are blocked by your browser.
-						</div>
-					</label>
-				</div>
-				<div class="col-sm-12">
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.notification"
-							type="checkbox"
-							name="notification"
-						/>
-						Enable notification sound
-					</label>
-				</div>
-				<div class="col-sm-12">
-					<div class="opt">
-						<button id="play" @click.prevent="playNotification">Play sound</button>
-					</div>
-				</div>
-
-				<div v-if="$store.state.settings.advanced" class="col-sm-12">
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.notifyAllMessages"
-							type="checkbox"
-							name="notifyAllMessages"
-						/>
-						Enable notification for all messages
-					</label>
-				</div>
-
-				<div v-if="$store.state.settings.advanced" class="col-sm-12">
-					<label class="opt">
-						<label for="highlights" class="sr-only">
-							Custom highlights (comma-separated keywords)
-						</label>
-						<input
-							id="highlights"
-							:value="$store.state.settings.highlights"
-							type="text"
-							name="highlights"
-							class="input"
-							placeholder="Custom highlights (comma-separated keywords)"
-						/>
-					</label>
-				</div>
-
-				<div
-					v-if="
-						!$store.state.serverConfiguration.public &&
-							!$store.state.serverConfiguration.ldapEnabled
-					"
-					id="change-password"
-				>
-					<div class="col-sm-12">
-						<h2>Change password</h2>
-					</div>
-					<div class="col-sm-12 password-container">
-						<label for="old_password_input" class="sr-only">
-							Enter current password
-						</label>
-						<RevealPassword v-slot:default="slotProps">
-							<input
-								id="old_password_input"
-								:type="slotProps.isVisible ? 'text' : 'password'"
-								name="old_password"
-								class="input"
-								placeholder="Enter current password"
-							/>
-						</RevealPassword>
-					</div>
-					<div class="col-sm-12 password-container">
-						<label for="new_password_input" class="sr-only">
-							Enter desired new password
-						</label>
-						<RevealPassword v-slot:default="slotProps">
-							<input
-								id="new_password_input"
-								:type="slotProps.isVisible ? 'text' : 'password'"
-								name="new_password"
-								class="input"
-								placeholder="Enter desired new password"
-							/>
-						</RevealPassword>
-					</div>
-					<div class="col-sm-12 password-container">
-						<label for="verify_password_input" class="sr-only">
-							Repeat new password
-						</label>
-						<RevealPassword v-slot:default="slotProps">
-							<input
-								id="verify_password_input"
-								:type="slotProps.isVisible ? 'text' : 'password'"
-								name="verify_password"
-								class="input"
-								placeholder="Repeat new password"
-							/>
-						</RevealPassword>
-					</div>
-					<div
-						v-if="passwordChangeStatus && passwordChangeStatus.success"
-						class="col-sm-12 feedback success"
-					>
-						Successfully updated your password
-					</div>
-					<div
-						v-else-if="passwordChangeStatus && passwordChangeStatus.error"
-						class="col-sm-12 feedback error"
-					>
-						{{ passwordErrors[passwordChangeStatus.error] }}
-					</div>
-					<div class="col-sm-12">
-						<button type="submit" class="btn" @click.prevent="changePassword">
-							Change password
-						</button>
-					</div>
-				</div>
-
-				<div v-if="$store.state.settings.advanced" class="col-sm-12">
-					<h2>Custom Stylesheet</h2>
-				</div>
-				<div v-if="$store.state.settings.advanced" class="col-sm-12">
-					<label for="user-specified-css-input" class="sr-only">
-						Custom stylesheet. You can override any style with CSS here.
-					</label>
-					<textarea
-						id="user-specified-css-input"
-						:value="$store.state.settings.userStyles"
-						class="input"
-						name="userStyles"
-						placeholder="/* You can override any style with CSS here */"
+			<div v-if="$store.state.settings.advanced">
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.notifyAllMessages"
+						type="checkbox"
+						name="notifyAllMessages"
 					/>
+					Enable notification for all messages
+				</label>
+			</div>
+
+			<div v-if="$store.state.settings.advanced">
+				<label class="opt">
+					<label for="highlights" class="sr-only">
+						Custom highlights (comma-separated keywords)
+					</label>
+					<input
+						id="highlights"
+						:value="$store.state.settings.highlights"
+						type="text"
+						name="highlights"
+						class="input"
+						placeholder="Custom highlights (comma-separated keywords)"
+					/>
+				</label>
+			</div>
+
+			<div
+				v-if="
+					!$store.state.serverConfiguration.public &&
+						!$store.state.serverConfiguration.ldapEnabled
+				"
+				id="change-password"
+			>
+				<h2>Change password</h2>
+				<div class="password-container">
+					<label for="old_password_input" class="sr-only">
+						Enter current password
+					</label>
+					<RevealPassword v-slot:default="slotProps">
+						<input
+							id="old_password_input"
+							:type="slotProps.isVisible ? 'text' : 'password'"
+							name="old_password"
+							class="input"
+							placeholder="Enter current password"
+						/>
+					</RevealPassword>
 				</div>
+				<div class="password-container">
+					<label for="new_password_input" class="sr-only">
+						Enter desired new password
+					</label>
+					<RevealPassword v-slot:default="slotProps">
+						<input
+							id="new_password_input"
+							:type="slotProps.isVisible ? 'text' : 'password'"
+							name="new_password"
+							class="input"
+							placeholder="Enter desired new password"
+						/>
+					</RevealPassword>
+				</div>
+				<div class="password-container">
+					<label for="verify_password_input" class="sr-only">
+						Repeat new password
+					</label>
+					<RevealPassword v-slot:default="slotProps">
+						<input
+							id="verify_password_input"
+							:type="slotProps.isVisible ? 'text' : 'password'"
+							name="verify_password"
+							class="input"
+							placeholder="Repeat new password"
+						/>
+					</RevealPassword>
+				</div>
+				<div
+					v-if="passwordChangeStatus && passwordChangeStatus.success"
+					class="feedback success"
+				>
+					Successfully updated your password
+				</div>
+				<div
+					v-else-if="passwordChangeStatus && passwordChangeStatus.error"
+					class="feedback error"
+				>
+					{{ passwordErrors[passwordChangeStatus.error] }}
+				</div>
+				<div>
+					<button type="submit" class="btn" @click.prevent="changePassword">
+						Change password
+					</button>
+				</div>
+			</div>
+
+			<div v-if="$store.state.settings.advanced">
+				<h2>Custom Stylesheet</h2>
+				<label for="user-specified-css-input" class="sr-only">
+					Custom stylesheet. You can override any style with CSS here.
+				</label>
+				<textarea
+					id="user-specified-css-input"
+					:value="$store.state.settings.userStyles"
+					class="input"
+					name="userStyles"
+					placeholder="/* You can override any style with CSS here */"
+				/>
 			</div>
 
 			<div v-if="!$store.state.serverConfiguration.public" class="session-list">
 				<h2>Sessions</h2>
 
 				<h3>Current session</h3>
-				<div v-if="$store.getters.currentSession" id="session-current">
-					<Session :session="$store.getters.currentSession" />
-				</div>
+				<Session
+					v-if="$store.getters.currentSession"
+					:session="$store.getters.currentSession"
+				/>
 
 				<h3>Other sessions</h3>
-				<div id="session-list">
-					<p v-if="$store.state.sessions.length == 0">Loading…</p>
-					<p v-else-if="$store.getters.otherSessions.length == 0">
-						<em>You are not currently logged in to any other device.</em>
-					</p>
-					<template v-else>
-						<Session
-							v-for="session in $store.getters.otherSessions"
-							:key="session.token"
-							:session="session"
-						/>
-					</template>
-				</div>
+				<p v-if="$store.state.sessions.length === 0">Loading…</p>
+				<p v-else-if="$store.getters.otherSessions.length === 0">
+					<em>You are not currently logged in to any other device.</em>
+				</p>
+				<Session
+					v-for="session in $store.getters.otherSessions"
+					v-else
+					:key="session.token"
+					:session="session"
+				/>
 			</div>
 		</form>
 	</div>
diff --git a/client/css/bootstrap.css b/client/css/bootstrap.css
deleted file mode 100644
index 768f6dac..00000000
--- a/client/css/bootstrap.css
+++ /dev/null
@@ -1,1189 +0,0 @@
-/*!
- * Bootstrap v3.2.0 (http://getbootstrap.com)
- * Copyright 2011-2014 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-/*!
- * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=242b77ebf84da0cd12cf)
- * Config saved to config.json and https://gist.github.com/242b77ebf84da0cd12cf
- */
-/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  vertical-align: baseline;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-[hidden],
-template {
-  display: none !important;
-}
-a {
-  background: transparent;
-}
-a:active,
-a:hover {
-  outline: 0;
-}
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-b,
-strong {
-  font-weight: bold;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sup {
-  top: -0.5em;
-}
-sub {
-  bottom: -0.25em;
-}
-img {
-  border: 0;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-}
-pre {
-  overflow: auto;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit;
-  margin: 0;
-}
-button {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-input::-ms-clear,
-input::-ms-reveal {
-  display: none;
-}
-input {
-  line-height: normal;
-}
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-input[type="search"] {
-  -webkit-appearance: textfield;
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  border: 0;
-  padding: 0;
-}
-textarea {
-  overflow: auto;
-}
-optgroup {
-  font-weight: bold;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-td,
-th {
-  padding: 0;
-}
-* {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-*:before,
-*:after {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-html {
-  font-size: 10px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.42857143;
-  color: #333333;
-  background-color: #ffffff;
-}
-input,
-button,
-select,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-a {
-  color: #428bca;
-  text-decoration: none;
-}
-a:hover,
-a:focus {
-  color: #2a6496;
-  text-decoration: underline;
-}
-a:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-figure {
-  margin: 0;
-}
-img {
-  vertical-align: middle;
-}
-.img-responsive {
-  display: block;
-  width: 100% \9;
-  max-width: 100%;
-  height: auto;
-}
-.img-rounded {
-  border-radius: 6px;
-}
-.img-thumbnail {
-  padding: 4px;
-  line-height: 1.42857143;
-  background-color: #ffffff;
-  border: 1px solid #dddddd;
-  border-radius: 4px;
-  -webkit-transition: all 0.2s ease-in-out;
-  -o-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  display: inline-block;
-  width: 100% \9;
-  max-width: 100%;
-  height: auto;
-}
-.img-circle {
-  border-radius: 50%;
-}
-hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border: 0;
-  border-top: 1px solid #eeeeee;
-}
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
-  position: static;
-  width: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-  font-family: inherit;
-  font-weight: 500;
-  line-height: 1.1;
-  color: inherit;
-}
-h1 small,
-h2 small,
-h3 small,
-h4 small,
-h5 small,
-h6 small,
-.h1 small,
-.h2 small,
-.h3 small,
-.h4 small,
-.h5 small,
-.h6 small,
-h1 .small,
-h2 .small,
-h3 .small,
-h4 .small,
-h5 .small,
-h6 .small,
-.h1 .small,
-.h2 .small,
-.h3 .small,
-.h4 .small,
-.h5 .small,
-.h6 .small {
-  font-weight: normal;
-  line-height: 1;
-  color: #777777;
-}
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3 {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-h1 small,
-.h1 small,
-h2 small,
-.h2 small,
-h3 small,
-.h3 small,
-h1 .small,
-.h1 .small,
-h2 .small,
-.h2 .small,
-h3 .small,
-.h3 .small {
-  font-size: 65%;
-}
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-h4 small,
-.h4 small,
-h5 small,
-.h5 small,
-h6 small,
-.h6 small,
-h4 .small,
-.h4 .small,
-h5 .small,
-.h5 .small,
-h6 .small,
-.h6 .small {
-  font-size: 75%;
-}
-h1,
-.h1 {
-  font-size: 36px;
-}
-h2,
-.h2 {
-  font-size: 30px;
-}
-h3,
-.h3 {
-  font-size: 24px;
-}
-h4,
-.h4 {
-  font-size: 18px;
-}
-h5,
-.h5 {
-  font-size: 14px;
-}
-h6,
-.h6 {
-  font-size: 12px;
-}
-p {
-  margin: 0 0 10px;
-}
-.lead {
-  margin-bottom: 20px;
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 1.4;
-}
-@media (min-width: 768px) {
-  .lead {
-    font-size: 21px;
-  }
-}
-small,
-.small {
-  font-size: 85%;
-}
-cite {
-  font-style: normal;
-}
-mark,
-.mark {
-  background-color: #fcf8e3;
-  padding: .2em;
-}
-.text-left {
-  text-align: left;
-}
-.text-right {
-  text-align: right;
-}
-.text-center {
-  text-align: center;
-}
-.text-justify {
-  text-align: justify;
-}
-.text-nowrap {
-  white-space: nowrap;
-}
-.text-lowercase {
-  text-transform: lowercase;
-}
-.text-uppercase {
-  text-transform: uppercase;
-}
-.text-capitalize {
-  text-transform: capitalize;
-}
-.text-muted {
-  color: #777777;
-}
-.text-primary {
-  color: #428bca;
-}
-a.text-primary:hover {
-  color: #3071a9;
-}
-.text-success {
-  color: #3c763d;
-}
-a.text-success:hover {
-  color: #2b542c;
-}
-.text-info {
-  color: #31708f;
-}
-a.text-info:hover {
-  color: #245269;
-}
-.text-warning {
-  color: #8a6d3b;
-}
-a.text-warning:hover {
-  color: #66512c;
-}
-.text-danger {
-  color: #a94442;
-}
-a.text-danger:hover {
-  color: #843534;
-}
-.bg-primary {
-  color: #fff;
-  background-color: #428bca;
-}
-a.bg-primary:hover {
-  background-color: #3071a9;
-}
-.bg-success {
-  background-color: #dff0d8;
-}
-a.bg-success:hover {
-  background-color: #c1e2b3;
-}
-.bg-info {
-  background-color: #d9edf7;
-}
-a.bg-info:hover {
-  background-color: #afd9ee;
-}
-.bg-warning {
-  background-color: #fcf8e3;
-}
-a.bg-warning:hover {
-  background-color: #f7ecb5;
-}
-.bg-danger {
-  background-color: #f2dede;
-}
-a.bg-danger:hover {
-  background-color: #e4b9b9;
-}
-.page-header {
-  padding-bottom: 9px;
-  margin: 40px 0 20px;
-  border-bottom: 1px solid #eeeeee;
-}
-ul,
-ol {
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-ul ul,
-ol ul,
-ul ol,
-ol ol {
-  margin-bottom: 0;
-}
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-.list-inline {
-  padding-left: 0;
-  list-style: none;
-  margin-left: -5px;
-}
-.list-inline > li {
-  display: inline-block;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-dl {
-  margin-top: 0;
-  margin-bottom: 20px;
-}
-dt,
-dd {
-  line-height: 1.42857143;
-}
-dt {
-  font-weight: bold;
-}
-dd {
-  margin-left: 0;
-}
-@media (min-width: 768px) {
-  .dl-horizontal dt {
-    float: left;
-    width: 160px;
-    clear: left;
-    text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .dl-horizontal dd {
-    margin-left: 180px;
-  }
-}
-abbr[title],
-abbr[data-original-title] {
-  cursor: help;
-  border-bottom: 1px dotted #777777;
-}
-.initialism {
-  font-size: 90%;
-  text-transform: uppercase;
-}
-blockquote {
-  padding: 10px 20px;
-  margin: 0 0 20px;
-  font-size: 17.5px;
-  border-left: 5px solid #eeeeee;
-}
-blockquote p:last-child,
-blockquote ul:last-child,
-blockquote ol:last-child {
-  margin-bottom: 0;
-}
-blockquote footer,
-blockquote small,
-blockquote .small {
-  display: block;
-  font-size: 80%;
-  line-height: 1.42857143;
-  color: #777777;
-}
-blockquote footer:before,
-blockquote small:before,
-blockquote .small:before {
-  content: '\2014 \00A0';
-}
-.blockquote-reverse,
-blockquote.pull-right {
-  padding-right: 15px;
-  padding-left: 0;
-  border-right: 5px solid #eeeeee;
-  border-left: 0;
-  text-align: right;
-}
-.blockquote-reverse footer:before,
-blockquote.pull-right footer:before,
-.blockquote-reverse small:before,
-blockquote.pull-right small:before,
-.blockquote-reverse .small:before,
-blockquote.pull-right .small:before {
-  content: '';
-}
-.blockquote-reverse footer:after,
-blockquote.pull-right footer:after,
-.blockquote-reverse small:after,
-blockquote.pull-right small:after,
-.blockquote-reverse .small:after,
-blockquote.pull-right .small:after {
-  content: '\00A0 \2014';
-}
-blockquote:before,
-blockquote:after {
-  content: "";
-}
-address {
-  margin-bottom: 20px;
-  font-style: normal;
-  line-height: 1.42857143;
-}
-.container {
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-@media (min-width: 768px) {
-  .container {
-    width: 750px;
-  }
-}
-@media (min-width: 992px) {
-  .container {
-    width: 970px;
-  }
-}
-@media (min-width: 1200px) {
-  .container {
-    width: 1170px;
-  }
-}
-.container-fluid {
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-.row {
-  margin-left: -15px;
-  margin-right: -15px;
-}
-.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
-  position: relative;
-  min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
-  float: left;
-}
-.col-xs-12 {
-  width: 100%;
-}
-.col-xs-11 {
-  width: 91.66666667%;
-}
-.col-xs-10 {
-  width: 83.33333333%;
-}
-.col-xs-9 {
-  width: 75%;
-}
-.col-xs-8 {
-  width: 66.66666667%;
-}
-.col-xs-7 {
-  width: 58.33333333%;
-}
-.col-xs-6 {
-  width: 50%;
-}
-.col-xs-5 {
-  width: 41.66666667%;
-}
-.col-xs-4 {
-  width: 33.33333333%;
-}
-.col-xs-3 {
-  width: 25%;
-}
-.col-xs-2 {
-  width: 16.66666667%;
-}
-.col-xs-1 {
-  width: 8.33333333%;
-}
-.col-xs-pull-12 {
-  right: 100%;
-}
-.col-xs-pull-11 {
-  right: 91.66666667%;
-}
-.col-xs-pull-10 {
-  right: 83.33333333%;
-}
-.col-xs-pull-9 {
-  right: 75%;
-}
-.col-xs-pull-8 {
-  right: 66.66666667%;
-}
-.col-xs-pull-7 {
-  right: 58.33333333%;
-}
-.col-xs-pull-6 {
-  right: 50%;
-}
-.col-xs-pull-5 {
-  right: 41.66666667%;
-}
-.col-xs-pull-4 {
-  right: 33.33333333%;
-}
-.col-xs-pull-3 {
-  right: 25%;
-}
-.col-xs-pull-2 {
-  right: 16.66666667%;
-}
-.col-xs-pull-1 {
-  right: 8.33333333%;
-}
-.col-xs-pull-0 {
-  right: auto;
-}
-.col-xs-push-12 {
-  left: 100%;
-}
-.col-xs-push-11 {
-  left: 91.66666667%;
-}
-.col-xs-push-10 {
-  left: 83.33333333%;
-}
-.col-xs-push-9 {
-  left: 75%;
-}
-.col-xs-push-8 {
-  left: 66.66666667%;
-}
-.col-xs-push-7 {
-  left: 58.33333333%;
-}
-.col-xs-push-6 {
-  left: 50%;
-}
-.col-xs-push-5 {
-  left: 41.66666667%;
-}
-.col-xs-push-4 {
-  left: 33.33333333%;
-}
-.col-xs-push-3 {
-  left: 25%;
-}
-.col-xs-push-2 {
-  left: 16.66666667%;
-}
-.col-xs-push-1 {
-  left: 8.33333333%;
-}
-.col-xs-push-0 {
-  left: auto;
-}
-.col-xs-offset-12 {
-  margin-left: 100%;
-}
-.col-xs-offset-11 {
-  margin-left: 91.66666667%;
-}
-.col-xs-offset-10 {
-  margin-left: 83.33333333%;
-}
-.col-xs-offset-9 {
-  margin-left: 75%;
-}
-.col-xs-offset-8 {
-  margin-left: 66.66666667%;
-}
-.col-xs-offset-7 {
-  margin-left: 58.33333333%;
-}
-.col-xs-offset-6 {
-  margin-left: 50%;
-}
-.col-xs-offset-5 {
-  margin-left: 41.66666667%;
-}
-.col-xs-offset-4 {
-  margin-left: 33.33333333%;
-}
-.col-xs-offset-3 {
-  margin-left: 25%;
-}
-.col-xs-offset-2 {
-  margin-left: 16.66666667%;
-}
-.col-xs-offset-1 {
-  margin-left: 8.33333333%;
-}
-.col-xs-offset-0 {
-  margin-left: 0%;
-}
-@media (min-width: 480px) {
-  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
-    float: left;
-  }
-  .col-sm-12 {
-    width: 100%;
-  }
-  .col-sm-11 {
-    width: 91.66666667%;
-  }
-  .col-sm-10 {
-    width: 83.33333333%;
-  }
-  .col-sm-9 {
-    width: 75%;
-  }
-  .col-sm-8 {
-    width: 66.66666667%;
-  }
-  .col-sm-7 {
-    width: 58.33333333%;
-  }
-  .col-sm-6 {
-    width: 50%;
-  }
-  .col-sm-5 {
-    width: 41.66666667%;
-  }
-  .col-sm-4 {
-    width: 33.33333333%;
-  }
-  .col-sm-3 {
-    width: 25%;
-  }
-  .col-sm-2 {
-    width: 16.66666667%;
-  }
-  .col-sm-1 {
-    width: 8.33333333%;
-  }
-  .col-sm-pull-12 {
-    right: 100%;
-  }
-  .col-sm-pull-11 {
-    right: 91.66666667%;
-  }
-  .col-sm-pull-10 {
-    right: 83.33333333%;
-  }
-  .col-sm-pull-9 {
-    right: 75%;
-  }
-  .col-sm-pull-8 {
-    right: 66.66666667%;
-  }
-  .col-sm-pull-7 {
-    right: 58.33333333%;
-  }
-  .col-sm-pull-6 {
-    right: 50%;
-  }
-  .col-sm-pull-5 {
-    right: 41.66666667%;
-  }
-  .col-sm-pull-4 {
-    right: 33.33333333%;
-  }
-  .col-sm-pull-3 {
-    right: 25%;
-  }
-  .col-sm-pull-2 {
-    right: 16.66666667%;
-  }
-  .col-sm-pull-1 {
-    right: 8.33333333%;
-  }
-  .col-sm-pull-0 {
-    right: auto;
-  }
-  .col-sm-push-12 {
-    left: 100%;
-  }
-  .col-sm-push-11 {
-    left: 91.66666667%;
-  }
-  .col-sm-push-10 {
-    left: 83.33333333%;
-  }
-  .col-sm-push-9 {
-    left: 75%;
-  }
-  .col-sm-push-8 {
-    left: 66.66666667%;
-  }
-  .col-sm-push-7 {
-    left: 58.33333333%;
-  }
-  .col-sm-push-6 {
-    left: 50%;
-  }
-  .col-sm-push-5 {
-    left: 41.66666667%;
-  }
-  .col-sm-push-4 {
-    left: 33.33333333%;
-  }
-  .col-sm-push-3 {
-    left: 25%;
-  }
-  .col-sm-push-2 {
-    left: 16.66666667%;
-  }
-  .col-sm-push-1 {
-    left: 8.33333333%;
-  }
-  .col-sm-push-0 {
-    left: auto;
-  }
-  .col-sm-offset-12 {
-    margin-left: 100%;
-  }
-  .col-sm-offset-11 {
-    margin-left: 91.66666667%;
-  }
-  .col-sm-offset-10 {
-    margin-left: 83.33333333%;
-  }
-  .col-sm-offset-9 {
-    margin-left: 75%;
-  }
-  .col-sm-offset-8 {
-    margin-left: 66.66666667%;
-  }
-  .col-sm-offset-7 {
-    margin-left: 58.33333333%;
-  }
-  .col-sm-offset-6 {
-    margin-left: 50%;
-  }
-  .col-sm-offset-5 {
-    margin-left: 41.66666667%;
-  }
-  .col-sm-offset-4 {
-    margin-left: 33.33333333%;
-  }
-  .col-sm-offset-3 {
-    margin-left: 25%;
-  }
-  .col-sm-offset-2 {
-    margin-left: 16.66666667%;
-  }
-  .col-sm-offset-1 {
-    margin-left: 8.33333333%;
-  }
-  .col-sm-offset-0 {
-    margin-left: 0%;
-  }
-}
-.fade {
-  opacity: 0;
-  -webkit-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
-  transition: opacity 0.15s linear;
-}
-.fade.in {
-  opacity: 1;
-}
-.collapse {
-  display: none;
-}
-.collapse.in {
-  display: block;
-}
-tr.collapse.in {
-  display: table-row;
-}
-tbody.collapse.in {
-  display: table-row-group;
-}
-.collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  -webkit-transition: height 0.35s ease;
-  -o-transition: height 0.35s ease;
-  transition: height 0.35s ease;
-}
-.clearfix:before,
-.clearfix:after,
-.dl-horizontal dd:before,
-.dl-horizontal dd:after,
-.container:before,
-.container:after,
-.container-fluid:before,
-.container-fluid:after,
-.row:before,
-.row:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after,
-.dl-horizontal dd:after,
-.container:after,
-.container-fluid:after,
-.row:after {
-  clear: both;
-}
-.center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-.pull-right {
-  float: right !important;
-}
-.pull-left {
-  float: left !important;
-}
-.hide {
-  display: none !important;
-}
-.show {
-  display: block !important;
-}
-.invisible {
-  visibility: hidden;
-}
-.text-hide {
-  font: 0/0 a;
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-.affix {
-  position: fixed;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-}
-@-ms-viewport {
-  width: device-width;
-}
-.visible-xs,
-.visible-sm,
-.visible-md,
-.visible-lg {
-  display: none !important;
-}
-.visible-xs-block,
-.visible-xs-inline,
-.visible-xs-inline-block,
-.visible-sm-block,
-.visible-sm-inline,
-.visible-sm-inline-block,
-.visible-md-block,
-.visible-md-inline,
-.visible-md-inline-block,
-.visible-lg-block,
-.visible-lg-inline,
-.visible-lg-inline-block {
-  display: none !important;
-}
-@media (max-width: 479px) {
-  .visible-xs {
-    display: block !important;
-  }
-  table.visible-xs {
-    display: table;
-  }
-  tr.visible-xs {
-    display: table-row !important;
-  }
-  th.visible-xs,
-  td.visible-xs {
-    display: table-cell !important;
-  }
-}
-@media (max-width: 479px) {
-  .visible-xs-block {
-    display: block !important;
-  }
-}
-@media (max-width: 479px) {
-  .visible-xs-inline {
-    display: inline !important;
-  }
-}
-@media (max-width: 479px) {
-  .visible-xs-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (max-width: 479px) {
-  .hidden-xs {
-    display: none !important;
-  }
-}
-.visible-print {
-  display: none !important;
-}
-@media print {
-  .visible-print {
-    display: block !important;
-  }
-  table.visible-print {
-    display: table;
-  }
-  tr.visible-print {
-    display: table-row !important;
-  }
-  th.visible-print,
-  td.visible-print {
-    display: table-cell !important;
-  }
-}
-.visible-print-block {
-  display: none !important;
-}
-@media print {
-  .visible-print-block {
-    display: block !important;
-  }
-}
-.visible-print-inline {
-  display: none !important;
-}
-@media print {
-  .visible-print-inline {
-    display: inline !important;
-  }
-}
-.visible-print-inline-block {
-  display: none !important;
-}
-@media print {
-  .visible-print-inline-block {
-    display: inline-block !important;
-  }
-}
-@media print {
-  .hidden-print {
-    display: none !important;
-  }
-}
diff --git a/client/css/style.css b/client/css/style.css
index f7a03d41..12d5b503 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1,5 +1,5 @@
+@import "../../node_modules/normalize.css/normalize.css";
 @import "fontawesome.css";
-@import "bootstrap.css";
 @import "../../node_modules/primer-tooltips/build/build.css";
 
 :root {
@@ -47,6 +47,43 @@
 	opacity: 1; /* fix opacity in Firefox */
 }
 
+html {
+	box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+input,
+button,
+select,
+textarea {
+	font: inherit;
+	color: inherit;
+}
+
+img {
+	vertical-align: middle;
+}
+
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
+
+abbr[title] {
+	cursor: help;
+}
+
 html,
 body {
 	height: 100%;
@@ -73,22 +110,17 @@ a,
 a:hover,
 a:focus {
 	color: var(--link-color);
+	text-decoration: none;
 }
 
 a:hover {
 	text-decoration: underline;
 }
 
-/**
- * From Normalize. See https://github.com/thelounge/thelounge/pull/1217
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-	border-bottom: none; /* 1 */
-	text-decoration: underline; /* 2 */
-	text-decoration: underline dotted; /* 2 */
+a:focus {
+	outline: thin dotted;
+	outline: 5px auto -webkit-focus-ring-color;
+	outline-offset: -2px;
 }
 
 h1,
@@ -106,6 +138,7 @@ button {
 	outline: none;
 	padding: 0;
 	user-select: inherit;
+	cursor: pointer;
 }
 
 code,
@@ -155,6 +188,10 @@ kbd {
 	box-shadow: 0 2px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
 }
 
+p {
+	margin: 0 0 10px;
+}
+
 .btn {
 	border: 2px solid var(--button-color);
 	border-radius: 3px;
@@ -207,8 +244,10 @@ kbd {
 }
 
 .container {
+	padding: 0 15px;
 	margin-bottom: 20px;
-	max-width: 480px;
+	width: 480px;
+	align-self: center;
 	touch-action: pan-y;
 }
 
@@ -247,7 +286,6 @@ kbd {
 .channel-list-item::before,
 #footer .icon,
 #chat .count::before,
-#settings .extra-experimental,
 #settings .extra-help,
 #settings #play::before,
 #form #upload::before,
@@ -357,12 +395,19 @@ kbd {
 #help .documentation-link::before { content: "\f19d"; /* http://fontawesome.io/icon/graduation-cap/ */ }
 #help .report-issue-link::before { content: "\f188"; /* http://fontawesome.io/icon/bug/ */ }
 
-.session-list strong {
-	display: block;
+.session-list .session-item {
+	display: flex;
+	font-size: 14px;
 }
 
-.session-list p {
-	margin-bottom: 10px;
+.session-list .session-item-info {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.session-list .session-item-btn {
+	flex-shrink: 0;
 }
 
 #chat .invite .from::before {
@@ -461,10 +506,6 @@ kbd {
 	line-height: 45px;
 }
 
-#settings .extra-experimental::before {
-	content: "\f0c3"; /* https://fontawesome.com/icons/flask?style=solid */
-}
-
 #settings .extra-help::before {
 	content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
 }
@@ -881,9 +922,10 @@ background on hover (unless active) */
 	border-color: #84ce88;
 }
 
-#user-specified-css-input {
+textarea.input {
 	resize: vertical;
-	height: 10em;
+	height: 100px;
+	min-height: 35px;
 	padding: 6px 10px;
 	line-height: 1.5;
 }
@@ -924,7 +966,7 @@ background on hover (unless active) */
 }
 
 .window h2 small {
-	color: inherit;
+	font-size: 16px;
 	line-height: 30px;
 }
 
@@ -1110,7 +1152,6 @@ background on hover (unless active) */
 	padding-top: 15px;
 	padding-bottom: 0;
 	width: 100%;
-	display: none;
 }
 
 #chat .show-more .btn {
@@ -1205,10 +1246,6 @@ background on hover (unless active) */
 	padding: 0 10px;
 }
 
-#chat .unread-marker:last-child {
-	display: none;
-}
-
 #chat .date-marker {
 	position: relative;
 	text-align: center;
@@ -1733,30 +1770,48 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	width: 100%;
 }
 
+#connect .connect-row {
+	display: flex;
+}
+
+#connect .connect-row > .input,
+#connect .connect-row > .input-wrap {
+	flex-grow: 1;
+}
+
 #connect label {
-	display: block;
+	width: 25%;
+	flex-shrink: 0;
 	margin-top: 11px;
 }
 
-#connect .port::before {
-	content: ":";
-	margin: 9px 0 0 -17px;
-	position: absolute;
-}
-
 #connect .tls {
-	float: left;
+	width: 100%;
+	display: block;
 	margin-top: 6px;
 }
 
 #connect .tls input {
-	float: left;
 	margin: 3px 10px 0 0;
 }
 
+#connect\:host {
+	width: 70%;
+}
+
+#connect\:port {
+	width: 25%;
+}
+
+#connect\:portseparator {
+	width: 5%;
+	text-align: center;
+	display: inline-block;
+}
+
 #connect .btn {
-	float: left;
-	margin-top: 30px;
+	margin-left: 25%;
+	margin-top: 15px;
 }
 
 #settings .settings-sync-panel {
@@ -1797,16 +1852,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin-right: 6px;
 }
 
-#settings .extra-experimental {
-	color: #84ce88;
-}
-
-#settings .extra-experimental,
 #settings .extra-help {
 	cursor: help;
 }
 
-#settings .extra-experimental,
 #settings h2 .extra-help {
 	font-size: 0.8em;
 }
@@ -1853,13 +1902,13 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 #sign-in .password-container .reveal-password {
 	top: 31px;
-	right: 0;
 }
 
 .password-container .reveal-password {
 	position: absolute;
 	top: 2px;
-	right: 15px;
+	right: 0;
+	appearance: none;
 }
 
 .password-container .reveal-password span {
@@ -1887,6 +1936,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	color: #ff4136;
 }
 
+#help .help-version-title {
+	display: flex;
+	justify-content: space-between;
+}
+
 #help .help-item {
 	display: table-row;
 	font-size: 14px;
@@ -2522,6 +2576,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 @media (max-width: 479px) {
 	.container {
+		max-width: 100%;
 		margin: 0;
 	}
 
@@ -2529,14 +2584,28 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		width: 100%;
 	}
 
-	#connect .tls {
-		margin: 20px 0;
-	}
-
 	.input {
 		margin-bottom: 2px;
 	}
 
+	#connect .connect-row {
+		flex-direction: column;
+	}
+
+	#connect .connect-row > .input,
+	#connect .connect-row > .input-wrap {
+		flex-grow: 1;
+	}
+
+	#connect .btn {
+		margin-left: 0;
+		width: 100%;
+	}
+
+	#help .help-version-title {
+		flex-direction: column;
+	}
+
 	#chat .messages {
 		display: block;
 		padding: 5px 0;
diff --git a/package.json b/package.json
index 9478e1cf..3d62b850 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "mocha": "6.2.2",
     "mochapack": "1.1.13",
     "mousetrap": "1.6.3",
+    "normalize.css": "8.0.1",
     "npm-run-all": "4.1.5",
     "nyc": "14.1.1",
     "postcss-import": "12.0.1",
diff --git a/yarn.lock b/yarn.lock
index 4dd9dc0d..c91c3b3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5835,6 +5835,11 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
+normalize.css@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 npm-bundled@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"