diff --git a/js/client-battle.js b/js/client-battle.js
index 121e74c49..3f4470a4e 100644
--- a/js/client-battle.js
+++ b/js/client-battle.js
@@ -8,7 +8,7 @@
 		initialize: function (data) {
 			this.me = {};
 
-			this.$el.addClass('ps-room-opaque').html('<div class="battle">Battle is here</div><div class="foehint"></div><div class="battle-log"></div><div class="battle-log-add">Connecting...</div><div class="battle-controls"></div>');
+			this.$el.addClass('ps-room-opaque').html('<div class="battle">Battle is here</div><div class="foehint"></div><div class="battle-log"></div><div class="battle-log-add">Connecting...</div><div class="battle-controls"></div><button class="battle-chat-toggle button" name="showChat">Chat</button>');
 
 			this.$battle = this.$el.find('.battle');
 			this.$controls = this.$el.find('.battle-controls');
@@ -39,6 +39,14 @@
 		join: function () {
 			app.send('/join ' + this.id);
 		},
+		showChat: function() {
+			this.$('.battle-chat-toggle').attr('name', 'hideChat').text('Battle');
+			this.$el.addClass('showing-chat');
+		},
+		hideChat: function() {
+			this.$('.battle-chat-toggle').attr('name', 'showChat').text('Chat');
+			this.$el.removeClass('showing-chat');
+		},
 		leave: function () {
 			if (!this.expired) app.send('/leave ' + this.id);
 			if (this.battle) this.battle.destroy();
diff --git a/style/client.css b/style/client.css
index 7c02f3ee3..095b30c9d 100644
--- a/style/client.css
+++ b/style/client.css
@@ -1469,6 +1469,9 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
 	width: 640px;
 	background: #EEF2F5;
 }
+.battle-chat-toggle {
+	display: none;
+}
 @media (max-width:639px) {
 	.ps-room .battle-controls {
 		left: 0;
@@ -1511,6 +1514,25 @@ div[class^='tournament-message-'], div[class*=' tournament-message-'] {
 		display: none;
 	}
 }
+@media (max-width:830px) {
+	.battle-chat-toggle {
+		display: block;
+		position: absolute;
+		top: 5px;
+		left: 6px;
+		font-size: 14px;
+		padding: 2px 5px;
+	}
+	.showing-chat .battle,
+	.showing-chat .battle-controls {
+		display: none;
+	}
+	.showing-chat .battle-log,
+	.showing-chat .battle-log-add {
+		left: 0;
+		display: block;
+	}
+}
 .shiftselect button,
 .moveselect button,
 .switchselect button {