diff --git a/flow-report/assets/styles.css b/flow-report/assets/styles.css
index 276969c6a837..f8cbfe92fdbd 100644
--- a/flow-report/assets/styles.css
+++ b/flow-report/assets/styles.css
@@ -10,6 +10,7 @@
   --category-summary-font-size: 18px;
   --gather-mode-icon-size: 16px;
   --half-base-spacing: calc(var(--base-spacing) / 2);
+  --separator-color: var(--color-gray-300);
   --sidebar-flow-step-navigation-font-size: 14px;
   --sidebar-selected-bg-color: #DDEEFF;
   --sidebar-summary-font-size: 14px;
@@ -17,18 +18,58 @@
   --summary-flow-step-label-font-size: 16px;
   --summary-subtitle-font-size: 16px;
   --summary-title-font-size: 32px;
+  --topbar-title-font-size: 14px;
 }
 
 .App {
   display: grid;
-  grid-template-areas: "side report";
+  grid-template-areas:
+    "topbar topbar"
+    "sidebar content";
   grid-template-columns: min-content auto;
+  grid-template-rows: min-content auto;
   height: 100vh;
   max-width: 100vw;
   font-size: var(--app-font-size);
 }
+.App--collapsed {
+  grid-template-columns: 0px auto;
+}
+.App--collapsed .Sidebar {
+  display: none;
+}
+
+.Topbar {
+  grid-area: topbar;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--separator-color);
+}
+
+.Topbar__menu {
+  padding: var(--base-spacing);
+  cursor: pointer;
+  display: flex;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.Topbar__logo {
+  display: flex;
+  margin-right: var(--half-base-spacing);
+}
+
+.Topbar__title {
+  font-size: var(--topbar-title-font-size);
+  font-weight: bold;
+}
 
 .Content {
+  grid-area: content;
   overflow-y: auto;
 }
 
@@ -51,11 +92,12 @@
 .Separator {
   height: 1px;
   width: 100%;
-  background-color: var(--color-gray-300);
+  background-color: var(--separator-color);
 }
 
 .Sidebar {
-  border-right: 1px solid var(--color-gray-300);
+  grid-area: sidebar;
+  border-right: 1px solid var(--separator-color);
 }
 .Sidebar a {
   color: var(--color-gray-800);
@@ -256,7 +298,7 @@
 .SummaryFlowStep__divider--line {
   grid-column-end: span 5;
   height: 1px;
-  background-color: var(--color-gray-300);
+  background-color: var(--separator-color);
 }
 
 .SummaryCategory__null {
diff --git a/flow-report/src/app.tsx b/flow-report/src/app.tsx
index 5e56766a7709..b17ae1cadc3f 100644
--- a/flow-report/src/app.tsx
+++ b/flow-report/src/app.tsx
@@ -5,12 +5,14 @@
  */
 
 import {FunctionComponent} from 'preact';
+import {useState} from 'preact/hooks';
 
 import {ReportRendererProvider} from './wrappers/report-renderer';
 import {Sidebar} from './sidebar/sidebar';
 import {Summary} from './summary/summary';
-import {FlowResultContext, useCurrentLhr} from './util';
+import {classNames, FlowResultContext, useCurrentLhr} from './util';
 import {Report} from './wrappers/report';
+import {Topbar} from './topbar';
 
 const Content: FunctionComponent = () => {
   const currentLhr = useCurrentLhr();
@@ -27,10 +29,12 @@ const Content: FunctionComponent = () => {
 };
 
 export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}) => {
+  const [collapsed, setCollapsed] = useState(false);
   return (
     <FlowResultContext.Provider value={flowResult}>
       <ReportRendererProvider>
-        <div className="App">
+        <div className={classNames('App', {'App--collapsed': collapsed})}>
+          <Topbar onMenuClick={() => setCollapsed(c => !c)} />
           <Sidebar/>
           <Content/>
         </div>
diff --git a/flow-report/src/icons.tsx b/flow-report/src/icons.tsx
index e06695e1116d..1ecc75398240 100644
--- a/flow-report/src/icons.tsx
+++ b/flow-report/src/icons.tsx
@@ -94,3 +94,14 @@ export const CpuIcon: FunctionComponent = () => {
     </svg>
   );
 };
+
+export const HamburgerIcon: FunctionComponent = () => {
+  return (
+    <svg viewBox="0 0 18 12" width="18" height="12" role="img">
+      <rect width="18" height="2"></rect>
+      <rect y="5" width="18" height="2"></rect>
+      <rect y="10" width="18" height="2"></rect>
+    </svg>
+  );
+};
+
diff --git a/flow-report/src/topbar.tsx b/flow-report/src/topbar.tsx
new file mode 100644
index 000000000000..a3ec52d93bbe
--- /dev/null
+++ b/flow-report/src/topbar.tsx
@@ -0,0 +1,60 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {FunctionComponent, JSX} from 'preact';
+
+import {HamburgerIcon} from './icons';
+
+/* eslint-disable max-len */
+const Logo: FunctionComponent = () => {
+  return (
+    <svg height="24" width="24" viewBox="0 0 24 24" role="img">
+      <defs>
+        <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="Topbar__logo--a">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="Topbar__logo--b">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="Topbar__logo--c">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="Topbar__logo--d">
+          <stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+      </defs>
+      <g fill="none" fill-rule="evenodd">
+        <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
+        <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
+        <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#Topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
+        <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
+        <path fill="url(#Topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
+        <path fill="url(#Topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
+        <path fill="url(#Topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
+      </g>
+    </svg>
+  );
+};
+/* eslint-enable max-len */
+
+export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLDivElement>}> =
+({onMenuClick}) => {
+  return (
+    <div className="Topbar">
+      <div className="Topbar__menu" onClick={onMenuClick} role="button">
+        <HamburgerIcon/>
+      </div>
+      <div className="Topbar__logo">
+        <Logo/>
+      </div>
+      <div className="Topbar__title">Lighthouse User Flow Report</div>
+    </div>
+  );
+};