diff --git a/tnoodle-ui/src/App.css b/tnoodle-ui/src/App.css
index 62a24dfd8..81f34f793 100644
--- a/tnoodle-ui/src/App.css
+++ b/tnoodle-ui/src/App.css
@@ -59,6 +59,18 @@ nav li {
     padding-top: 10px;
 }
 
-#side-bar {
-    height: 100vh;
+@media (min-width: 992px) {
+    #side-bar {
+        height: 100vh;
+        position: sticky;
+        top: 0;
+        z-index: 1020;
+    }
+}
+
+@media (max-width: 991.98px) {
+    #title {
+        margin-bottom: 0;
+        margin-left: 12px;
+    }
 }
diff --git a/tnoodle-ui/src/App.js b/tnoodle-ui/src/App.js
index c9e98d8e6..73238580d 100644
--- a/tnoodle-ui/src/App.js
+++ b/tnoodle-ui/src/App.js
@@ -10,12 +10,12 @@ class App extends Component {
             <div className="App container-fluid">
                 <div className="row">
                     <div
-                        className="col-3 bg-dark sticky-top overflow-auto"
+                        className="col-lg-3 bg-dark overflow-auto"
                         id="side-bar"
                     >
                         <SideBar />
                     </div>
-                    <div className="col-9 m-0 p-0">
+                    <div className="col-lg-9 m-0 p-0">
                         <Main />
                     </div>
                 </div>
diff --git a/tnoodle-ui/src/main/components/SideBar.jsx b/tnoodle-ui/src/main/components/SideBar.jsx
index fb0a37326..bf7776d5a 100644
--- a/tnoodle-ui/src/main/components/SideBar.jsx
+++ b/tnoodle-ui/src/main/components/SideBar.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import Loading from "./Loading";
+import { Collapse } from "react-bootstrap";
 import {
     updateWcif,
     updateEditingStatus,
@@ -67,6 +68,7 @@ const SideBar = connect(
                 loadingCompetitions: false,
                 loadingCompetitionInformation: false,
                 competitionId: null,
+                isOpen: true,
             };
         }
         margin = 1; // Margin for login button and "Manual Selection"
@@ -107,8 +109,19 @@ const SideBar = connect(
             if (competitionId != null) {
                 this.handleCompetitionSelection(competitionId);
             }
+
+            this.setIsOpen();
+            window.addEventListener("resize", this.setIsOpen);
+        }
+
+        componentWillUnmount() {
+            window.removeEventListener("resize", this.setIsOpen);
         }
 
+        setIsOpen = () => {
+            this.setState({ isOpen: window.innerWidth > 992 });
+        };
+
         setLoadingUser = (flag) => {
             this.setState({ ...this.state, loadingUser: flag });
         };
@@ -337,59 +350,94 @@ const SideBar = connect(
 
         render() {
             return (
-                <div className="h-100">
-                    <img
-                        className="tnoodle-logo mt-2"
-                        src={require("../assets/tnoodle_logo.svg")}
-                        alt="TNoodle logo"
-                    />
-                    <h1 className="display-3" id="title">
-                        TNoodle
-                    </h1>
-                    <div>
-                        <ul className="list-group">
-                            <li>
-                                {(this.state.competitions != null &&
-                                    this.state.competitions.length) > 0 && (
-                                    <button
-                                        type="button"
-                                        className={`btn btn-primary btn-lg btn-block btn-outline-light mb-${this.margin}`}
-                                        onClick={this.handleManualSelection}
-                                        disabled={
-                                            this.props.generatingScrambles
-                                        }
-                                    >
-                                        Manual Selection
-                                    </button>
-                                )}
-                            </li>
-                            {this.state.competitions != null &&
-                                this.state.competitions.map(
-                                    (competition, i) => (
-                                        <li key={i}>
-                                            <button
-                                                type="button"
-                                                className="btn btn-primary btn-lg btn-block m-1"
-                                                disabled={
-                                                    this.props
-                                                        .generatingScrambles
-                                                }
-                                                onClick={(_) =>
-                                                    this.handleCompetitionSelection(
-                                                        competition.id
-                                                    )
-                                                }
-                                            >
-                                                {competition.name}
-                                            </button>
-                                        </li>
-                                    )
-                                )}
-                        </ul>
-
-                        {this.loadingArea()}
+                <div className="h-100 pb-2">
+                    <div className="d-flex flex-lg-column align-items-center overflow-hidden">
+                        <img
+                            className="tnoodle-logo mt-2"
+                            src={require("../assets/tnoodle_logo.svg")}
+                            alt="TNoodle logo"
+                        />
+                        <h1 className="display-3" id="title">
+                            TNoodle
+                        </h1>
+                        <button
+                            type="button"
+                            className="btn btn-primary btn-lg btn-outline-light ml-auto d-lg-none"
+                            onClick={() =>
+                                this.setState({ isOpen: !this.state.isOpen })
+                            }
+                            disabled={this.props.generatingScrambles}
+                            aria-label="Toggle menu"
+                            aria-expanded={this.state.isOpen}
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 30 30"
+                                width={30}
+                                height={30}
+                            >
+                                <path
+                                    stroke="currentColor"
+                                    strokeWidth={2}
+                                    strokeLinecap="round"
+                                    strokeMiterlimit={10}
+                                    d="M4 7h22M4 15h22M4 23h22"
+                                />
+                            </svg>
+                        </button>
                     </div>
-                    {this.logInButton()}
+                    <Collapse in={this.state.isOpen}>
+                        <div className="pt-2">
+                            <div>
+                                <ul className="list-group">
+                                    <li>
+                                        {this.state.competitions != null &&
+                                            this.state.competitions.length >
+                                                0 && (
+                                                <button
+                                                    type="button"
+                                                    className={`btn btn-primary btn-lg btn-block btn-outline-light mb-${this.margin}`}
+                                                    onClick={
+                                                        this
+                                                            .handleManualSelection
+                                                    }
+                                                    disabled={
+                                                        this.props
+                                                            .generatingScrambles
+                                                    }
+                                                >
+                                                    Manual Selection
+                                                </button>
+                                            )}
+                                    </li>
+                                    {this.state.competitions != null &&
+                                        this.state.competitions.map(
+                                            (competition, i) => (
+                                                <li key={i}>
+                                                    <button
+                                                        type="button"
+                                                        className="btn btn-primary btn-lg btn-block m-1"
+                                                        disabled={
+                                                            this.props
+                                                                .generatingScrambles
+                                                        }
+                                                        onClick={(_) =>
+                                                            this.handleCompetitionSelection(
+                                                                competition.id
+                                                            )
+                                                        }
+                                                    >
+                                                        {competition.name}
+                                                    </button>
+                                                </li>
+                                            )
+                                        )}
+                                </ul>
+                                {this.loadingArea()}
+                            </div>
+                            {this.logInButton()}
+                        </div>
+                    </Collapse>
                 </div>
             );
         }
diff --git a/tnoodle-ui/src/test/SideBar.test.js b/tnoodle-ui/src/test/SideBar.test.js
index 92b3433d6..611c9ce77 100644
--- a/tnoodle-ui/src/test/SideBar.test.js
+++ b/tnoodle-ui/src/test/SideBar.test.js
@@ -49,15 +49,20 @@ it("Each competition fetched from the website must become a button", async () =>
 
     const buttons = Array.from(container.querySelectorAll("button"));
 
-    // First button should be manual selection
-    expect(buttons[0].innerHTML).toBe("Manual Selection");
+    // First button should be the collapse button
+    expect(buttons[0].innerHTML).toBe(
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30"><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"></path></svg>`
+    );
+
+    // Second button should be manual selection
+    expect(buttons[1].innerHTML).toBe("Manual Selection");
 
     // Last button should be Log Out
     expect(buttons[buttons.length - 1].innerHTML).toBe("Log Out");
 
     // Each competition must have a button
     for (let i = 0; i < competitions.length; i++) {
-        expect(competitions[i].name).toBe(buttons[i + 1].innerHTML);
+        expect(competitions[i].name).toBe(buttons[i + 2].innerHTML);
     }
 
     // We should welcome the user