diff --git a/src/client-connection.ts b/src/client-connection.ts
index 73387ba81..fec8a04ec 100644
--- a/src/client-connection.ts
+++ b/src/client-connection.ts
@@ -32,8 +32,9 @@ class PSConnection {
 		};
 		socket.onclose = () => {
 			console.log('\u2705 (DISCONNECTED)');
-			PS.connected = false;
 			this.connected = false;
+			PS.connected = false;
+			PS.isOffline = true;
 			for (const roomid in PS.rooms) {
 				PS.rooms[roomid]!.connected = false;
 			}
diff --git a/src/client-main.ts b/src/client-main.ts
index c3259d7cf..ec8b8c1e0 100644
--- a/src/client-main.ts
+++ b/src/client-main.ts
@@ -415,6 +415,15 @@ const PS = new class extends PSModel {
 	server = new PSServer();
 	connection: PSConnection | null = null;
 	connected = false;
+	/**
+	 * While PS is technically disconnected while it's trying to connect,
+	 * it still shows UI like it's connected, so you can click buttons
+	 * before the server connection is established.
+	 *
+	 * `isOffline` is only set if PS is neither connected nor trying to
+	 * connect.
+	 */
+	isOffline = false;
 
 	router: PSRouter = null!;
 
diff --git a/src/panel-mainmenu.tsx b/src/panel-mainmenu.tsx
index 291438516..1bd25dd5b 100644
--- a/src/panel-mainmenu.tsx
+++ b/src/panel-mainmenu.tsx
@@ -91,6 +91,7 @@ class MainMenuPanel extends PSRoomPanel {
 		(this.base!.querySelector('button.big') as HTMLButtonElement).focus();
 	}
 	render() {
+		const onlineButton = ' button' + (PS.isOffline ? ' disabled' : '');
 		const searchButton = (PS.down ? <div class="menugroup" style="background: rgba(10,10,10,.6)">
 			{PS.down === 'ddos' ?
 				<p class="error"><strong>Pok&eacute;mon Showdown is offline due to a DDoS attack!</strong></p> :
@@ -106,12 +107,11 @@ class MainMenuPanel extends PSRoomPanel {
 			<p>
 				<TeamDropdown format="gen7ou" />
 			</p>
-			<p><button class="button mainmenu1 big" name="search">
+			<p><button class={"mainmenu1 big" + onlineButton} name="search">
 				<strong>Battle!</strong><br />
 				<small>Find a random opponent</small>
 			</button></p>
 		</div>);
-		const onlineButton = ' button' + (PS.connected ? '' : ' disabled');
 		return <PSPanelWrapper room={this.props.room}>
 			<div class="mainmenuwrapper">
 				<div class="leftmenu">
@@ -138,7 +138,7 @@ class MainMenuPanel extends PSRoomPanel {
 
 						<div class="menugroup">
 							<p><button class="mainmenu2 button" name="joinRoom" value="teambuilder">Teambuilder</button></p>
-							<p><button class="mainmenu3 button" name="joinRoom" value="ladder">Ladder</button></p>
+							<p><button class={"mainmenu3" + onlineButton} name="joinRoom" value="ladder">Ladder</button></p>
 						</div>
 
 						<div class="menugroup">
diff --git a/src/panel-rooms.tsx b/src/panel-rooms.tsx
index fe9eb7723..0aa36dd4d 100644
--- a/src/panel-rooms.tsx
+++ b/src/panel-rooms.tsx
@@ -160,7 +160,7 @@ class RoomsPanel extends PSRoomPanel {
 					onInput={this.changeSearch} onKeyDown={this.keyDownSearch}
 				/>
 			</div>
-			{rooms.userCount === undefined && <h2>Connecting...</h2>}
+			{PS.isOffline ? <h2>(offline)</h2> : rooms.userCount === undefined && <h2>Connecting...</h2>}
 			{roomList}
 		</div></PSPanelWrapper>;
 	}