diff --git a/webapp/src/components/filterComponent.scss b/webapp/src/components/filterComponent.scss
new file mode 100644
index 000000000..74800f418
--- /dev/null
+++ b/webapp/src/components/filterComponent.scss
@@ -0,0 +1,19 @@
+.FilterComponent {
+    position: absolute;
+    top: 25px;
+    left: -200px;
+	min-width: 420px;
+	box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
+	background-color: #ffffff;
+	padding: 10px;
+
+
+    .octo-filterclause {
+        display: flex;
+        flex-direction: row;
+        > div {
+            display: flex;
+            flex-direction: row;
+        }
+    }
+}
diff --git a/webapp/src/components/filterComponent.tsx b/webapp/src/components/filterComponent.tsx
index 8ef75cecf..30df7eec0 100644
--- a/webapp/src/components/filterComponent.tsx
+++ b/webapp/src/components/filterComponent.tsx
@@ -14,6 +14,8 @@ import {Utils} from '../utils'
 import MenuWrapper from '../widgets/menuWrapper'
 import Menu from '../widgets/menu'
 
+import './filterComponent.scss'
+
 type Props = {
     boardTree: BoardTree
     onClose: () => void
@@ -74,8 +76,7 @@ class FilterComponent extends React.Component<Props> {
 
         return (
             <div
-                className='octo-modal octo-filter-dialog'
-                style={{position: 'absolute', top: 25, left: -200}}
+                className='FilterComponent'
                 ref={this.node}
             >
                 {filters.map((filter) => {
diff --git a/webapp/src/widgets/menu.tsx b/webapp/src/widgets/menu.tsx
index 651ce282e..91ed99ff7 100644
--- a/webapp/src/widgets/menu.tsx
+++ b/webapp/src/widgets/menu.tsx
@@ -2,6 +2,8 @@
 // See LICENSE.txt for license information.
 import React from 'react'
 
+import Switch from './switch'
+
 type MenuOptionProps = {
     id: string,
     name: string,
@@ -96,11 +98,10 @@ class SwitchOption extends React.Component<SwitchOptionProps> {
             >
                 <div className='menu-name'>{name}</div>
                 {icon && <div className={`icon ${icon}`}/>}
-                <div className={isOn ? 'octo-switch on' : 'octo-switch'}>
-                    <div
-                        className='octo-switch-inner'
-                    />
-                </div>
+                <Switch
+                    isOn={isOn}
+                    onChanged={() => {}}
+                />
             </div>
         )
     }
diff --git a/webapp/src/widgets/switch.scss b/webapp/src/widgets/switch.scss
new file mode 100644
index 000000000..2352c9dcf
--- /dev/null
+++ b/webapp/src/widgets/switch.scss
@@ -0,0 +1,30 @@
+.Switch {
+	display: flex;
+	flex-shrink: 0;
+
+    box-sizing: content-box;
+	height: 14px;
+	width: 26px;
+	border-radius: 44px;
+	padding: 2px;
+	background-color: rgba(135, 131, 120, 0.3);
+	transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
+
+    &.on {
+        background-color: rgba(46, 170, 220);
+        .octo-switch-inner {
+            transform: translateX(12px) translateY(0px);
+        }
+    }
+
+    .octo-switch-inner {
+        width: 14px;
+        height: 14px;
+        border-radius: 44px;
+        background: white;
+        transition: transform 200ms ease-out 0s, background 200ms ease-out 0s;
+        transform: translateX(0px) translateY(0px);
+    }
+}
+
+
diff --git a/webapp/src/components/switch.tsx b/webapp/src/widgets/switch.tsx
similarity index 50%
rename from webapp/src/components/switch.tsx
rename to webapp/src/widgets/switch.tsx
index 6ccfa38e5..c35a73499 100644
--- a/webapp/src/components/switch.tsx
+++ b/webapp/src/widgets/switch.tsx
@@ -2,10 +2,11 @@
 // See LICENSE.txt for license information.
 import React from 'react'
 
+import './switch.scss'
+
 type Props = {
     onChanged: (isOn: boolean) => void
     isOn: boolean
-    style?: React.CSSProperties
 }
 
 type State = {
@@ -13,15 +14,12 @@ type State = {
 }
 
 // Switch is an on-off style switch / checkbox
-class Switch extends React.Component<Props, State> {
+export default class Switch extends React.Component<Props, State> {
     static defaultProps = {
         isMarkdown: false,
         isMultiline: false,
     }
 
-    elementRef = React.createRef<HTMLDivElement>()
-    innerElementRef = React.createRef<HTMLDivElement>()
-
     constructor(props: Props) {
         super(props)
         this.state = {isOn: props.isOn}
@@ -31,35 +29,20 @@ class Switch extends React.Component<Props, State> {
         return true
     }
 
-    focus(): void {
-        this.elementRef.current.focus()
-
-        // Put cursor at end
-        document.execCommand('selectAll', false, null)
-        document.getSelection().collapseToEnd()
-    }
-
     render(): JSX.Element {
-        const {style} = this.props
         const {isOn} = this.state
 
-        const className = isOn ? 'octo-switch on' : 'octo-switch'
-        const element =
-    (<div
-        ref={this.elementRef}
-        className={className}
-        style={style}
-        onClick={() => {
-            this.onClicked()
-        }}
-    >
-        <div
-            ref={this.innerElementRef}
-            className='octo-switch-inner'
-        />
-    </div>)
-
-        return element
+        const className = isOn ? 'Switch on' : 'Switch'
+        return (
+            <div
+                className={className}
+                onClick={() => {
+                    this.onClicked()
+                }}
+            >
+                <div className='octo-switch-inner'/>
+            </div>
+        )
     }
 
     private async onClicked() {
diff --git a/webapp/static/main.css b/webapp/static/main.css
index 69540cb5b..779a7f93b 100644
--- a/webapp/static/main.css
+++ b/webapp/static/main.css
@@ -326,42 +326,6 @@ hr {
 	background-color: #507090;
 }
 
-/*-- Modal --*/
-
-.octo-modal-back {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: rgba(90, 90, 90, 0.1);
-}
-
-.octo-modal {
-	position: absolute;
-	z-index: 10;
-	min-width: 180px;
-	box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
-	background-color: #ffffff;
-}
-
-/*-- Filter modal dialog --*/
-
-.octo-filter-dialog {
-	min-width: 420px;
-	padding: 10px;
-}
-
-.octo-filterclause {
-	display: flex;
-	flex-direction: row;
-}
-
-.octo-filterclause > div {
-	display: flex;
-	flex-direction: row;
-}
-
 /*-- Menu --*/
 
 .menu {
@@ -666,38 +630,6 @@ hr {
 	padding: 0;
 }
 
-/* Switch */
-
-.octo-switch {
-	display: flex;
-	flex-shrink: 0;
-
-    box-sizing: content-box;
-	height: 14px;
-	width: 26px;
-	border-radius: 44px;
-	padding: 2px;
-	background-color: rgba(135, 131, 120, 0.3);
-	transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
-}
-
-.octo-switch-inner {
-    width: 14px;
-    height: 14px;
-    border-radius: 44px;
-    background: white;
-    transition: transform 200ms ease-out 0s, background 200ms ease-out 0s;
-    transform: translateX(0px) translateY(0px);
-}
-
-.octo-switch.on {
-	background-color: rgba(46, 170, 220);
-}
-
-.octo-switch.on .octo-switch-inner {
-    transform: translateX(12px) translateY(0px);
-}
-
 /* Flash Panel */
 
 .flashPanel {