diff --git a/frontend/public/global.css b/frontend/public/global.css
index 013a60a..b7474c4 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -59,6 +59,11 @@
 	--radius-xxl: calc(5.25 * var(--sradius-unit));
 }
 
+html, body {
+	width: 100%;
+	height: 100%;
+}
+
 body {
 	color: var(--foreground-color-1);
 	background-color: var(--background-color-1);
@@ -67,8 +72,6 @@ body {
 	font-weight: 400;
 	line-height: 1.75;
 
-	width: 100vw;
-	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
@@ -89,7 +92,7 @@ body {
 .top-bar {
 	display: flex;
 	align-items: center;
-	justify-content: flex-start;
+	justify-content: left;
 	height: 3.4em;
 	width: 100%;
 	padding: var(--space-sm);
@@ -105,14 +108,19 @@ body {
 /* modal */
 
 .modal-backdrop {
-	position: absolute;
-	width: 100vw;
-	height: 100vh;
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 	z-index: 0;
-	top: 50%;
-	left: 50%;
 	background-color: rgba(0, 0, 0, 0.4);
-	transform: translate(-50%, -50%);
 }
 
 .modal-backdrop-opaque {
@@ -122,10 +130,6 @@ body {
 .modal {
 	display: flex;
 	flex-direction: column;
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
 	background-color: var(--background-color-2);
 	border-radius: var(--radius-lg);
 	padding: var(--space-md);
@@ -149,6 +153,17 @@ body {
 	float: left;
 }
 
+@media screen and (max-width: 768px) {
+	.modal {
+		width: 100%;
+		height: 100%;
+		border-radius: 0px;
+	}
+	.modal-backdrop {
+		display: block;
+	}
+}
+
 /* input */
 
 .input-label {
@@ -205,6 +220,9 @@ body {
 	border: none;
 	border-radius: var(--radius-md);
 	font: inherit;
+}
+
+.icon-button-auto {
 	margin-left: auto;
 }
 
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 5874974..672e685 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
+	<meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'>
 
 	<title>app</title>
 
diff --git a/frontend/src/components/ChannelTopBar.svelte b/frontend/src/components/ChannelTopBar.svelte
index 964b0c2..218af5b 100644
--- a/frontend/src/components/ChannelTopBar.svelte
+++ b/frontend/src/components/ChannelTopBar.svelte
@@ -1,10 +1,22 @@
 <script>
-    import { HashIcon } from "svelte-feather-icons";
+    import { Edit2Icon, HashIcon, MenuIcon } from "svelte-feather-icons";
+    import { overlayStore, selectedChannel, showSidebar } from "../stores";
 
     export let channel;
 </script>
 
+<style>
+    .menu-button {
+        margin-right: var(--space-md);
+    }
+</style>
+
 <div class="top-bar">
+    {#if !$showSidebar}
+        <button class="icon-button menu-button" on:click="{ () => selectedChannel.set({ id: -1, name: "none", creator_id: -1 }) }">
+            <MenuIcon />
+        </button>
+    {/if}
     <HashIcon />
-    <span class="h5 top-bar-heading">{ channel.name }</span>
+    <span class="h5 top-bar-heading" on:click="{ () => overlayStore.open('editChannel', {channel}) }">{ channel.name }</span>
 </div>
diff --git a/frontend/src/components/Main.svelte b/frontend/src/components/Main.svelte
index 309d564..338b3d5 100644
--- a/frontend/src/components/Main.svelte
+++ b/frontend/src/components/Main.svelte
@@ -1,6 +1,6 @@
 <script>
     import { CloudIcon } from "svelte-feather-icons";
-    import { gatewayStatus, selectedChannel } from "../stores";
+    import { gatewayStatus, showSidebar, selectedChannel } from "../stores";
     import ChannelView from "./ChannelView.svelte";
     import OverlayProvider from "./overlays/OverlayProvider.svelte";
     import Sidebar from "./Sidebar.svelte";
@@ -16,6 +16,8 @@
     }
 </style>
 
+<OverlayProvider />
+
 {#if !$gatewayStatus.ready}
     <div class="top-bar">
         <CloudIcon />
@@ -24,13 +26,17 @@
 {/if}
 
 <div class="flex-container">
-    <OverlayProvider />
-    <Sidebar />
     {#if $selectedChannel.id === -1}
-        <div class="fullscreen-message">
-            no channel selected.
-        </div>
+        <Sidebar />
+        {#if $showSidebar}
+            <div class="fullscreen-message">
+                no channel selected.
+            </div>
+        {/if}
     {:else}
+        {#if $showSidebar}
+            <Sidebar />
+        {/if}
         <ChannelView channel={$selectedChannel} />
     {/if}
 </div>
diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 5218744..5d9da29 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -49,7 +49,7 @@
 <div class="message">
     <span class="author">{ message.author_username }</span>
     <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
-    <button class="icon-button edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }">
+    <button class="icon-button icon-button-auto edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }">
         <MoreVerticalIcon />
     </button>
 </div>
diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index 9098c39..8f01df4 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -1,7 +1,7 @@
 <script>
     import request from "../request";
     import { apiRoute } from "../storage";
-    import { messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
+    import { messageInputFocusStatus, messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
 
     export let channel;
     let messageInput = "";
@@ -70,5 +70,13 @@
 </style>
 
 <div class="message-input-container">
-    <input placeholder={`Send something interesting to #${channel.name}`} type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
+    <input
+        placeholder={`Send something interesting to #${channel.name}`}
+        type="text"
+        class="message-input"
+        on:keydown={ onKeydown }
+        bind:value={ messageInput }
+        on:focus="{ () => messageInputFocusStatus.set(true) }"
+        on:blur="{ () => messageInputFocusStatus.set(false) }"
+    >
 </div>
diff --git a/frontend/src/components/Messages.svelte b/frontend/src/components/Messages.svelte
index 6f20ea8..45fdeca 100644
--- a/frontend/src/components/Messages.svelte
+++ b/frontend/src/components/Messages.svelte
@@ -1,6 +1,6 @@
 <script>
     import { afterUpdate, beforeUpdate, onMount } from "svelte";
-    import { messagesStoreProvider } from "../stores.js";
+    import { messageInputFocusStatus, messagesStoreProvider } from "../stores.js";
     import Message from "./Message.svelte";
 
     export let channelId;
@@ -8,8 +8,17 @@
     let scrollAnchor;
     let shouldAutoscroll = true;
     let lastScrollHeight = null;
+    let isScrolledToBottom = false;
 
     $: messages = messagesStoreProvider.getStore(channelId);
+    $: {
+        console.log($messageInputFocusStatus, isScrolledToBottom);
+        if ($messageInputFocusStatus && isScrolledToBottom) {
+            setTimeout(() => {
+                scrollTarget.scrollTop = scrollTarget.scrollHeight;
+            }, 0);
+        }
+    }
 
     afterUpdate(() => {
         // hacky way to preserve scroll position when messages are pushed back
@@ -28,8 +37,10 @@
         if ((scrollTop + offsetHeight) >= scrollHeight) { // user scrolled to bottom
             messages.setIsCollectingOldMessages(true);
             shouldAutoscroll = true;
+            isScrolledToBottom = true;
         } else {
             shouldAutoscroll = false;
+            isScrolledToBottom = false;
             if (scrollTop === 0) {
                 // load older messages if the user scrolls to the top.
                 // save the current scroll height if the server returned any messages,
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index 80ed9d1..d8cbf2c 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -13,7 +13,7 @@
                     <HashIcon />
                 </div>
                 <span>{ channel.name }</span>
-                <button class="icon-button" on:click|stopPropagation="{ () => overlayStore.open('editChannel', { channel }) }">
+                <button class="icon-button icon-button-auto" on:click|stopPropagation="{ () => overlayStore.open('editChannel', { channel }) }">
                     <MoreVerticalIcon />
                 </button>
             </button>
@@ -32,10 +32,18 @@
         background-color: var(--background-color-1);
         border-right: 1px solid var(--background-color-2);
         height: 100%;
-        width: 255px;
+        min-width: 255px;
         max-width: 255px;
     }
 
+    @media screen and (max-width: 768px) {
+        .sidebar-container {
+            flex-basis: 100%;
+            min-width: unset;
+            max-width: unset;
+        }
+    }
+
     .sidebar {
         width: 100%;
         height: 100%;
diff --git a/frontend/src/components/overlays/CreateAccount.svelte b/frontend/src/components/overlays/CreateAccount.svelte
index 872cd2b..0ce8650 100644
--- a/frontend/src/components/overlays/CreateAccount.svelte
+++ b/frontend/src/components/overlays/CreateAccount.svelte
@@ -52,7 +52,7 @@
 </style>
 
 <div class="modal-backdrop modal-backdrop-opaque">
-    <div class="modal" transition:fly="{{ duration: 500, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
+    <div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
         <div class="modal-header">
             <span class="h4">Create an Account</span>
         </div>
diff --git a/frontend/src/components/overlays/Login.svelte b/frontend/src/components/overlays/Login.svelte
index 9eb9103..5bbd231 100644
--- a/frontend/src/components/overlays/Login.svelte
+++ b/frontend/src/components/overlays/Login.svelte
@@ -56,7 +56,7 @@
 </style>
 
 <div class="modal-backdrop modal-backdrop-opaque">
-    <div class="modal" transition:fly="{{ duration: 500, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
+    <div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
         <div class="modal-header">
             <span class="h4">Welcome back!</span>
         </div>
diff --git a/frontend/src/components/overlays/Toast.svelte b/frontend/src/components/overlays/Toast.svelte
index e138d91..5ec6ad5 100644
--- a/frontend/src/components/overlays/Toast.svelte
+++ b/frontend/src/components/overlays/Toast.svelte
@@ -26,7 +26,7 @@
 {#key message}
     <div class="toast" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}">
         <span>{ message }</span>
-        <button class="icon-button" on:click="{ () => overlayStore.close('toast') }">
+        <button class="icon-button icon-button-auto" on:click="{ () => overlayStore.close('toast') }">
             <XIcon />
         </button>
     </div>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 580b4fa..04b5972 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,6 +3,7 @@ import gateway from './gateway';
 import { getAuthToken, initStorageDefaults } from './storage';
 import logging from "./logging";
 import { authWithToken } from './auth';
+import { initResponsiveHandlers } from './responsive';
 
 window.__waffle = {
 	logging,
@@ -10,6 +11,7 @@ window.__waffle = {
 };
 
 initStorageDefaults();
+initResponsiveHandlers();
 authWithToken(getAuthToken());
 
 // Remove loading screen
diff --git a/frontend/src/responsive.js b/frontend/src/responsive.js
new file mode 100644
index 0000000..cd826c8
--- /dev/null
+++ b/frontend/src/responsive.js
@@ -0,0 +1,12 @@
+import { showSidebar } from "./stores";
+
+export function initResponsiveHandlers() {
+    const mediaQuery = window.matchMedia('(min-width: 768px)');
+
+    const update = ({ matches }) => {
+        showSidebar.set(matches);
+    };
+
+    mediaQuery.addEventListener("change", update);
+    update(mediaQuery);
+}
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index d97feec..356737b 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -264,3 +264,5 @@ export const messagesStoreProvider = new MessagesStoreProvider();
 export const userInfoStore = new UserInfoStore();
 export const overlayStore = new OverlayStore();
 export const selectedChannel = writable({ id: -1, name: "none", creator_id: -1 });
+export const showSidebar = writable(false);
+export const messageInputFocusStatus = writable(false);
