diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index b28a2fba4d..a576729db2 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 import {
   closeProjectOptions,
   newFile,
@@ -11,11 +12,48 @@ import {
 } from '../actions/ide';
 import { selectRootFile } from '../selectors/files';
 import { getAuthenticated, selectCanEditSketch } from '../selectors/users';
-
+import { remSize } from '../../../theme';
 import ConnectedFileNode from './FileNode';
 
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 
+const SidebarHeader = styled.header`
+  padding-right: ${remSize(6)};
+  padding-left: ${remSize(19)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: ${remSize(29)};
+  min-height: ${remSize(29)};
+  position: relative;
+`;
+
+const SidebarTitle = styled.h3`
+  font-size: ${remSize(12)};
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+const SidebarIcons = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+`;
+
+const SidebarAddButton = styled.button`
+  width: ${remSize(20)};
+  height: ${remSize(20)};
+  & svg {
+    width: ${remSize(10)};
+  }
+`;
+
+const SidebarProjectOptions = styled.ul`
+  display: flex;
+  width: 100%;
+  max-width: ${remSize(180)};
+`;
 // TODO: use a generic Dropdown UI component
 
 export default function SideBar() {
@@ -66,67 +104,74 @@ export default function SideBar() {
 
   return (
     <section className={sidebarClass}>
-      <header className="sidebar__header" onContextMenu={toggleProjectOptions}>
-        <h3 className="sidebar__title">
-          <span>{t('Sidebar.Title')}</span>
-        </h3>
-        <div className="sidebar__icons">
-          <button
-            aria-label={t('Sidebar.ToggleARIA')}
-            className="sidebar__add"
-            tabIndex="0"
-            ref={sidebarOptionsRef}
-            onClick={toggleProjectOptions}
-            onBlur={onBlurComponent}
-            onFocus={onFocusComponent}
-          >
-            <DownArrowIcon focusable="false" aria-hidden="true" />
-          </button>
-          <ul className="sidebar__project-options">
-            <li>
-              <button
-                aria-label={t('Sidebar.AddFolderARIA')}
-                onClick={() => {
-                  dispatch(newFolder(rootFile.id));
-                  setTimeout(() => dispatch(closeProjectOptions()), 0);
-                }}
+      <SidebarHeader onContextMenu={toggleProjectOptions}>
+        {isExpanded && (
+          <SidebarTitle>
+            <span>{t('Sidebar.Title')}</span>
+          </SidebarTitle>
+        )}
+        {canEditProject && (
+          <SidebarIcons>
+            {isExpanded && (
+              <SidebarAddButton
+                aria-label={t('Sidebar.ToggleARIA')}
+                tabIndex="0"
+                ref={sidebarOptionsRef}
+                onClick={toggleProjectOptions}
                 onBlur={onBlurComponent}
                 onFocus={onFocusComponent}
               >
-                {t('Sidebar.AddFolder')}
-              </button>
-            </li>
-            <li>
-              <button
-                aria-label={t('Sidebar.AddFileARIA')}
-                onClick={() => {
-                  dispatch(newFile(rootFile.id));
-                  setTimeout(() => dispatch(closeProjectOptions()), 0);
-                }}
-                onBlur={onBlurComponent}
-                onFocus={onFocusComponent}
-              >
-                {t('Sidebar.AddFile')}
-              </button>
-            </li>
-            {isAuthenticated && (
-              <li>
-                <button
-                  aria-label={t('Sidebar.UploadFileARIA')}
-                  onClick={() => {
-                    dispatch(openUploadFileModal(rootFile.id));
-                    setTimeout(() => dispatch(closeProjectOptions()), 0);
-                  }}
-                  onBlur={onBlurComponent}
-                  onFocus={onFocusComponent}
-                >
-                  {t('Sidebar.UploadFile')}
-                </button>
-              </li>
+                <DownArrowIcon focusable="false" aria-hidden="true" />
+              </SidebarAddButton>
+            )}
+            {projectOptionsVisible && (
+              <SidebarProjectOptions className="sidebar__project-options">
+                <li>
+                  <button
+                    aria-label={t('Sidebar.AddFolderARIA')}
+                    onClick={() => {
+                      dispatch(newFolder(rootFile.id));
+                      setTimeout(() => dispatch(closeProjectOptions()), 0);
+                    }}
+                    onBlur={onBlurComponent}
+                    onFocus={onFocusComponent}
+                  >
+                    {t('Sidebar.AddFolder')}
+                  </button>
+                </li>
+                <li>
+                  <button
+                    aria-label={t('Sidebar.AddFileARIA')}
+                    onClick={() => {
+                      dispatch(newFile(rootFile.id));
+                      setTimeout(() => dispatch(closeProjectOptions()), 0);
+                    }}
+                    onBlur={onBlurComponent}
+                    onFocus={onFocusComponent}
+                  >
+                    {t('Sidebar.AddFile')}
+                  </button>
+                </li>
+                {isAuthenticated && (
+                  <li>
+                    <button
+                      aria-label={t('Sidebar.UploadFileARIA')}
+                      onClick={() => {
+                        dispatch(openUploadFileModal(rootFile.id));
+                        setTimeout(() => dispatch(closeProjectOptions()), 0);
+                      }}
+                      onBlur={onBlurComponent}
+                      onFocus={onFocusComponent}
+                    >
+                      {t('Sidebar.UploadFile')}
+                    </button>
+                  </li>
+                )}
+              </SidebarProjectOptions>
             )}
-          </ul>
-        </div>
-      </header>
+          </SidebarIcons>
+        )}
+      </SidebarHeader>
       <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
     </section>
   );
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index e49d13a6aa..4f02420d6f 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -303,10 +303,4 @@
 
 .sidebar__project-options {
   @extend %dropdown-open-right;
-  display: none;
-  width: 100%;
-  max-width: #{180 / $base-font-size}rem;
-  .sidebar--project-options & {
-    display: flex;
-  }
 }