diff --git a/components/Presets.js b/components/Presets.js
new file mode 100644
index 0000000..7324481
--- /dev/null
+++ b/components/Presets.js
@@ -0,0 +1,189 @@
+import React from 'react'
+
+import Button from './Button'
+import { COLORS, DEFAULT_PRESETS } from '../lib/constants'
+import * as Arrows from './svg/Arrows'
+import Remove from './svg/Remove'
+
+const removeButtonStyles = {
+  position: 'absolute',
+  top: '6px',
+  right: '6px',
+  width: '11px',
+  height: '11px',
+  borderRadius: '999px'
+}
+
+const Preset = React.memo(({ remove, apply, selected, preset }) => {
+  const isSelected = preset.id === selected
+
+  return (
+    <div className="preset-container">
+      <Button
+        onClick={() => apply(preset)}
+        disabled={isSelected}
+        border={isSelected}
+        selected={isSelected}
+        hoverBackground={preset.backgroundColor}
+        style={{
+          height: '96px',
+          borderRadius: '3px',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center center',
+          backgroundSize: 'contain',
+          backgroundImage: `url('${preset.icon}')`,
+          backgroundColor: preset.backgroundColor
+        }}
+      />
+      {preset.custom && (
+        <Button
+          center
+          hoverBackground={COLORS.SECONDARY}
+          background={COLORS.SECONDARY}
+          onClick={() => remove(preset.id)}
+          style={removeButtonStyles}
+        >
+          <Remove />
+        </Button>
+      )}
+      <style jsx>
+        {`
+          .preset-container {
+            display: flex;
+            position: relative;
+            flex: 0 0 96px;
+            margin-right: 8px;
+          }
+        `}
+      </style>
+    </div>
+  )
+})
+
+const arrowButtonStyle = {
+  position: 'absolute',
+  top: 0,
+  right: '16px',
+  height: '100%'
+}
+
+const Presets = React.memo(
+  ({ show, create, toggle, undo, presets, selected, remove, apply, applied, contentRef }) => {
+    const customPresetsLength = presets.length - DEFAULT_PRESETS.length
+
+    const disabledCreate = selected != null
+
+    return (
+      <div className="settings-presets">
+        <div className="settings-presets-header">
+          <span>Presets</span>
+          {show && (
+            <Button
+              margin="0 0 0 8px"
+              flex="0 0 48px"
+              color={COLORS.GRAY}
+              hoverBackground="transparent"
+              hoverColor={disabledCreate ? COLORS.GRAY : COLORS.SECONDARY}
+              onClick={create}
+              notAllowed={disabledCreate}
+            >
+              create +
+            </Button>
+          )}
+          <Button center onClick={toggle} style={arrowButtonStyle} hoverBackground={COLORS.BLACK}>
+            {show ? <Arrows.Up /> : <Arrows.Down />}
+          </Button>
+        </div>
+        {show && (
+          <div className="settings-presets-content" ref={contentRef}>
+            {presets
+              .filter(p => p.custom)
+              .map(preset => (
+                <Preset
+                  key={preset.id}
+                  remove={remove}
+                  apply={apply}
+                  preset={preset}
+                  selected={selected}
+                />
+              ))}
+            {customPresetsLength > 0 ? <div className="settings-presets-divider" /> : null}
+            {presets
+              .filter(p => !p.custom)
+              .map(preset => (
+                <Preset key={preset.id} apply={apply} preset={preset} selected={selected} />
+              ))}
+          </div>
+        )}
+        {show && applied && (
+          <div className="settings-presets-applied">
+            <span>Preset applied!</span>
+            <Button
+              center
+              flex="0"
+              onClick={undo}
+              color={COLORS.BLACK}
+              hoverBackground="transparent"
+              background="transparent"
+            >
+              undo <span>&#x21A9;</span>
+            </Button>
+          </div>
+        )}
+        <style jsx>
+          {`
+            .settings-presets {
+              border-bottom: 2px solid ${COLORS.SECONDARY};
+            }
+
+            .settings-presets-header {
+              display: flex;
+              padding: 8px;
+              position: relative;
+              color: ${COLORS.SECONDARY};
+              width: 100%;
+              align-items: center;
+            }
+
+            .settings-presets-header > span {
+              font-size: 14px;
+            }
+
+            .settings-presets-content {
+              display: flex;
+              overflow-x: scroll;
+              margin: 0 8px 12px 8px;
+              align-items: center;
+              /* https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation */
+              flex-wrap: nowrap;
+              -webkit-overflow-scrolling: touch;
+            }
+
+            .settings-presets-divider {
+              height: 72px;
+              padding: 1px;
+              border-radius: 3px;
+              margin-right: 8px;
+              background-color: ${COLORS.DARK_GRAY};
+            }
+
+            .settings-presets-applied {
+              display: flex;
+              justify-content: space-between;
+              background-color: ${COLORS.SECONDARY};
+              color: ${COLORS.BLACK};
+              padding: 4px 8px;
+            }
+
+            .settings-presets-applied span {
+              float: right;
+              margin: 2px 0 0 2px;
+            }
+          `}
+        </style>
+      </div>
+    )
+  }
+)
+
+export default Presets
diff --git a/components/Settings.js b/components/Settings.js
index 6b2e9bc..f493465 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -7,11 +7,11 @@ import Slider from './Slider'
 import Toggle from './Toggle'
 import Popout from './Popout'
 import Button from './Button'
+import Presets from './Presets'
 import { COLORS, DEFAULT_PRESETS } from '../lib/constants'
 import { toggle, getPresets, savePresets } from '../lib/util'
 import SettingsIcon from './svg/Settings'
 import * as Arrows from './svg/Arrows'
-import Remove from './svg/Remove'
 
 const WindowSettings = React.memo(
   ({
@@ -194,186 +194,6 @@ const MenuButton = React.memo(({ name, select, selected }) => {
   )
 })
 
-const removeButtonStyles = {
-  position: 'absolute',
-  top: '6px',
-  right: '6px',
-  width: '11px',
-  height: '11px',
-  borderRadius: '999px'
-}
-
-const Preset = React.memo(({ remove, apply, selected, preset }) => {
-  const isSelected = preset.id === selected
-
-  return (
-    <div className="preset-container">
-      <Button
-        onClick={() => apply(preset)}
-        disabled={isSelected}
-        border={isSelected}
-        selected={isSelected}
-        hoverBackground={preset.backgroundColor}
-        style={{
-          height: '96px',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center center',
-          backgroundSize: 'contain',
-          backgroundImage: `url('${preset.icon}')`,
-          backgroundColor: preset.backgroundColor
-        }}
-      />
-      {preset.custom && (
-        <Button
-          center
-          hoverBackground={COLORS.SECONDARY}
-          background={COLORS.SECONDARY}
-          onClick={() => remove(preset.id)}
-          style={removeButtonStyles}
-        >
-          <Remove />
-        </Button>
-      )}
-      <style jsx>
-        {`
-          .preset-container {
-            display: flex;
-            position: relative;
-            flex: 0 0 96px;
-            margin-right: 8px;
-          }
-        `}
-      </style>
-    </div>
-  )
-})
-
-const arrowButtonStyle = {
-  position: 'absolute',
-  top: 0,
-  right: '16px',
-  height: '100%'
-}
-
-const Presets = React.memo(
-  ({ show, create, toggle, undo, presets, selected, remove, apply, applied, contentRef }) => {
-    const customPresetsLength = presets.length - DEFAULT_PRESETS.length
-
-    const disabledCreate = selected != null
-
-    return (
-      <div className="settings-presets">
-        <div className="settings-presets-header">
-          <span>Presets</span>
-          {show && (
-            <Button
-              margin="0 0 0 8px"
-              flex="0 0 48px"
-              color={COLORS.GRAY}
-              hoverBackground="transparent"
-              hoverColor={disabledCreate ? COLORS.GRAY : COLORS.SECONDARY}
-              onClick={create}
-              notAllowed={disabledCreate}
-            >
-              create +
-            </Button>
-          )}
-          <Button center onClick={toggle} style={arrowButtonStyle} hoverBackground={COLORS.BLACK}>
-            {show ? <Arrows.Up /> : <Arrows.Down />}
-          </Button>
-        </div>
-        {show && (
-          <div className="settings-presets-content" ref={contentRef}>
-            {presets
-              .filter(p => p.custom)
-              .map(preset => (
-                <Preset
-                  key={preset.id}
-                  remove={remove}
-                  apply={apply}
-                  preset={preset}
-                  selected={selected}
-                />
-              ))}
-            {customPresetsLength > 0 ? <div className="settings-presets-divider" /> : null}
-            {presets
-              .filter(p => !p.custom)
-              .map(preset => (
-                <Preset key={preset.id} apply={apply} preset={preset} selected={selected} />
-              ))}
-          </div>
-        )}
-        {show && applied && (
-          <div className="settings-presets-applied">
-            <span>Preset applied!</span>
-            <Button
-              center
-              flex="0"
-              onClick={undo}
-              color={COLORS.BLACK}
-              hoverBackground="transparent"
-              background="transparent"
-            >
-              undo <span>&#x21A9;</span>
-            </Button>
-          </div>
-        )}
-        <style jsx>
-          {`
-            .settings-presets {
-              border-bottom: 2px solid ${COLORS.SECONDARY};
-            }
-
-            .settings-presets-header {
-              display: flex;
-              padding: 8px;
-              position: relative;
-              color: ${COLORS.SECONDARY};
-              width: 100%;
-              align-items: center;
-            }
-
-            .settings-presets-header > span {
-              font-size: 14px;
-            }
-
-            .settings-presets-content {
-              display: flex;
-              overflow-x: scroll;
-              margin: 0 8px 12px 8px;
-              align-items: center;
-              /* https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation */
-              flex-wrap: nowrap;
-              -webkit-overflow-scrolling: touch;
-            }
-
-            .settings-presets-divider {
-              height: 72px;
-              padding: 1px;
-              border-radius: 3px;
-              margin-right: 8px;
-              background-color: ${COLORS.DARK_GRAY};
-            }
-
-            .settings-presets-applied {
-              display: flex;
-              justify-content: space-between;
-              background-color: ${COLORS.SECONDARY};
-              color: ${COLORS.BLACK};
-              padding: 4px 8px;
-            }
-
-            .settings-presets-applied span {
-              float: right;
-              margin: 2px 0 0 2px;
-            }
-          `}
-        </style>
-      </div>
-    )
-  }
-)
-
 const settingButtonStyle = {
   width: '40px',
   height: '100%'