diff --git a/webapp/src/components/sidebar.scss b/webapp/src/components/sidebar.scss
new file mode 100644
index 000000000..55c4b96a1
--- /dev/null
+++ b/webapp/src/components/sidebar.scss
@@ -0,0 +1,64 @@
+.Sidebar {
+    flex: 0 0 230px;
+
+	display: flex;
+	flex-direction: column;
+
+	min-height: 100%;
+	background-color: rgb(247, 246, 243);
+	padding: 10px 0;
+
+    &.hidden {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 15;
+        min-height: 0;
+        height: 50px;
+        width: 50px;
+        background: none;
+        padding: 0;
+        > div {
+            padding: 0;
+            margin: auto;
+        }
+    }
+
+    .octo-sidebar-header {
+        display: flex;
+        flex-direction: row;
+
+        font-weight: 600;
+        padding: 3px 20px;
+        margin-bottom: 5px;
+    }
+
+    .octo-sidebar-item {
+        display: flex;
+        flex-direction: row;
+
+        font-weight: 500;
+        padding: 3px 20px;
+        &.subitem {
+            color: rgba(25, 23, 18, 0.6);
+            font-weight: 400;
+            margin-left: 20px;
+        }
+    }
+
+    .octo-sidebar-title {
+        cursor: pointer;
+        flex-grow: 1;
+    }
+
+    .octo-sidebar-item {
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+        .octo-button {
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.1);
+            }
+        }
+    }
+}
diff --git a/webapp/src/components/sidebar.tsx b/webapp/src/components/sidebar.tsx
index 0f7779c86..1aa84fece 100644
--- a/webapp/src/components/sidebar.tsx
+++ b/webapp/src/components/sidebar.tsx
@@ -12,6 +12,8 @@ import MenuWrapper from '../widgets/menuWrapper'
 import {WorkspaceTree} from '../viewModel/workspaceTree'
 import {BoardView} from '../blocks/boardView'
 
+import './sidebar.scss'
+
 type Props = {
     showBoard: (id: string) => void
     showView: (id: string, boardId?: string) => void
@@ -45,7 +47,7 @@ class Sidebar extends React.Component<Props, State> {
         if (this.state.isHidden) {
             const hamburgerRef = React.createRef<HTMLDivElement>()
             return (
-                <div className='octo-sidebar hidden'>
+                <div className='Sidebar octo-sidebar hidden'>
                     <div className='octo-sidebar-header'>
                         <div
                             className='octo-button square'
@@ -68,7 +70,7 @@ class Sidebar extends React.Component<Props, State> {
         }
 
         return (
-            <div className='octo-sidebar'>
+            <div className='Sidebar octo-sidebar'>
                 <div className='octo-sidebar-header octo-hover-container'>
                     {'OCTO'}
                     <div className='octo-spacer'/>
diff --git a/webapp/src/components/workspaceComponent.scss b/webapp/src/components/workspaceComponent.scss
new file mode 100644
index 000000000..8a1ed13c8
--- /dev/null
+++ b/webapp/src/components/workspaceComponent.scss
@@ -0,0 +1,6 @@
+.WorkspaceComponent {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: row;
+	overflow: auto;
+}
diff --git a/webapp/src/components/workspaceComponent.tsx b/webapp/src/components/workspaceComponent.tsx
index 94c2c25c6..3d2de367c 100644
--- a/webapp/src/components/workspaceComponent.tsx
+++ b/webapp/src/components/workspaceComponent.tsx
@@ -10,6 +10,8 @@ import BoardComponent from './boardComponent'
 import {Sidebar} from './sidebar'
 import {TableComponent} from './tableComponent'
 
+import './workspaceComponent.scss'
+
 type Props = {
     workspaceTree: WorkspaceTree
     boardTree?: BoardTree
@@ -25,7 +27,7 @@ class WorkspaceComponent extends React.Component<Props> {
 
         Utils.assert(workspaceTree)
         const element =
-            (<div className='octo-workspace'>
+            (<div className='WorkspaceComponent'>
                 <Sidebar
                     showBoard={showBoard}
                     showView={showView}
diff --git a/webapp/static/main.css b/webapp/static/main.css
index 430343384..6a92e089d 100644
--- a/webapp/static/main.css
+++ b/webapp/static/main.css
@@ -70,79 +70,6 @@ hr {
 	overflow: auto;
 }
 
-/* Sidebar */
-
-.octo-workspace {
-	flex: 1 1 auto;
-	display: flex;
-	flex-direction: row;
-	overflow: auto;
-}
-
-.octo-sidebar {
-    flex: 0 0 230px;
-
-	display: flex;
-	flex-direction: column;
-
-	min-height: 100%;
-	background-color: rgb(247, 246, 243);
-	padding: 10px 0;
-}
-
-.octo-sidebar.hidden {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 15;
-    min-height: 0;
-    height: 50px;
-    width: 50px;
-    background: none;
-    padding: 0;
-}
-
-.octo-sidebar.hidden > div {
-    padding: 0;
-    margin: auto;
-}
-
-.octo-sidebar-header {
-	display: flex;
-	flex-direction: row;
-
-	font-weight: 600;
-    padding: 3px 20px;
-    margin-bottom: 5px;
-}
-
-.octo-sidebar-item {
-	display: flex;
-	flex-direction: row;
-
-	font-weight: 500;
-	padding: 3px 20px;
-}
-
-.octo-sidebar-item.subitem {
-    color: rgba(25, 23, 18, 0.6);
-	font-weight: 400;
-    margin-left: 20px;
-}
-
-.octo-sidebar-title {
-    cursor: pointer;
-    flex-grow: 1;
-}
-
-.octo-sidebar-item:hover {
-	background-color: rgba(0, 0, 0, 0.05);
-}
-
-.octo-sidebar-item .octo-button:hover {
-	background-color: rgba(0, 0, 0, 0.1);
-}
-
 /* Main app */
 
 .octo-app {