diff --git a/package-lock.json b/package-lock.json
index 48b8998..9daa821 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,7 +48,7 @@
         "fit-curve": "0.1.6",
         "google-fonts-webpack-plugin": "0.4.4",
         "imports-loader": "0.7.1",
-        "jss": "9.5.1",
+        "jss": "9.6.0",
         "keycode": "2.1.9",
         "lodash": "4.17.4",
         "memoizee": "0.3.10",
@@ -75,22 +75,19 @@
       },
       "dependencies": {
         "jss": {
-          "version": "9.5.1",
-          "resolved": "https://registry.npmjs.org/jss/-/jss-9.5.1.tgz",
-          "integrity": "sha512-py//ogG1xeztpEDmosJtrkfUXibx3qiAr+1GQvfLHp7azpqkzTPLCnainDgH7Zn0q6S7rcM1eINrVT9n/r5f2w==",
+          "version": "9.6.0",
+          "resolved": "https://registry.npmjs.org/jss/-/jss-9.6.0.tgz",
+          "integrity": "sha512-fnj0UV//VdgxwH0h9pOZljAwFlJMZTAeaDD6u9G0VFMSDwTgdRYxV7+/RZohZYMEVITkgXedHiQHW5ETRVAXkA==",
           "requires": {
             "is-in-browser": "1.1.3",
-            "symbol-observable": "1.1.0",
+            "symbol-observable": "1.2.0",
             "warning": "3.0.0"
           }
         },
         "symbol-observable": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.1.0.tgz",
-          "integrity": "sha512-dQoid9tqQ+uotGhuTKEY11X4xhyYePVnqGSoSm3OGKh2E8LZ6RPULp1uXTctk33IeERlrRJYoVSBglsL05F5Uw=="
-        },
-        "three-js-csg": {
-          "version": "github:Doodle3D/three-js-csg#a36f23da6e9be2405a9094de5709cb0ae8f58045"
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+          "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
         }
       }
     },
@@ -7802,6 +7799,9 @@
       "resolved": "https://registry.npmjs.org/three/-/three-0.88.0.tgz",
       "integrity": "sha1-QlbC/Djk+yOg0j66K2zOTfjkZtU="
     },
+    "three-js-csg": {
+      "version": "github:Doodle3D/three-js-csg#a36f23da6e9be2405a9094de5709cb0ae8f58045"
+    },
     "through2": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
diff --git a/src/index.js b/src/index.js
index 4cb81de..25e494a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,12 +4,14 @@ import _defaultSettings from './settings/default.yml';
 import printerSettings from './settings/printer.yml';
 import materialSettings from './settings/material.yml';
 import qualitySettings from './settings/quality.yml';
+import infillSettings from './settings/infill.yml';
 
 const defaultSettings = {
   default: _defaultSettings,
   printer: printerSettings,
   material: materialSettings,
-  quality: qualitySettings
+  quality: qualitySettings,
+  infill: infillSettings
 };
 
 export {
diff --git a/src/interface/Settings.js b/src/interface/Settings.js
index 5395c6c..4efd0ef 100644
--- a/src/interface/Settings.js
+++ b/src/interface/Settings.js
@@ -16,6 +16,7 @@ import defaultSettings from '../settings/default.yml';
 import printerSettings from '../settings/printer.yml';
 import materialSettings from '../settings/material.yml';
 import qualitySettings from '../settings/quality.yml';
+import infillSettings from '../settings/infill.yml';
 import update from 'react-addons-update';
 import SettingsIcon from 'material-ui-icons/Settings';
 import validateIp from 'validate-ip';
@@ -148,6 +149,7 @@ class Settings extends React.Component {
         if (value !== 'add_printer') state = update(state, { localStorage: { active: { $set: value } } });
         break;
 
+      case 'settings.infill':
       case 'settings.quality':
       case 'settings.material':
         if (!localStorage.active) return this.openAddPrinterDialog();
@@ -233,7 +235,7 @@ class Settings extends React.Component {
   constructSettings(localStorage) {
     if (!localStorage.active) return defaultSettings;
 
-    const { ip, settings: { printer, material, quality, advanced } } = localStorage.printers[localStorage.active];
+    const { ip, settings: { printer, material, quality, infill, advanced } } = localStorage.printers[localStorage.active];
     let settings = {
       ...defaultSettings,
       printer,
@@ -244,6 +246,7 @@ class Settings extends React.Component {
 
     settings = _.merge({}, settings, printerSettings[printer]);
     settings = _.merge({}, settings, qualitySettings[quality]);
+    settings = _.merge({}, settings, infillSettings[quality]);
     settings = _.merge({}, settings, materialSettings[material]);
 
     for (const key in advanced) {
@@ -271,7 +274,7 @@ class Settings extends React.Component {
       active: id,
       printers: {
         ...this.state.localStorage.printers,
-        [id]: { name, ip, settings: { printer, material: 'pla', quality: 'medium', advanced: {} } }
+        [id]: { name, ip, settings: { printer, material: 'pla', infill: '20pct', quality: 'medium', advanced: {} } }
       }
     };
     this.setState({ localStorage });
@@ -384,6 +387,11 @@ class Settings extends React.Component {
                   <MenuItem key={value} value={value} primaryText={title} />
                 ))}
               </SelectField>
+              <SelectField name="settings.infill" floatingLabelText="Infill" fullWidth>
+                {Object.entries(infillSettings).map(([value, { title }]) => (
+                  <MenuItem key={value} value={value} primaryText={title} />
+                ))}
+              </SelectField>
             </div>
           </Tab>
           <Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Advanced">