diff --git a/app/actions/__tests__/requestgroups.test.js b/app/actions/__tests__/requestgroups.test.js
index c4d63f194..e7b16763b 100644
--- a/app/actions/__tests__/requestgroups.test.js
+++ b/app/actions/__tests__/requestgroups.test.js
@@ -3,9 +3,6 @@ jest.unmock('../global');
 jest.unmock('../../constants/global');
 jest.unmock('../../constants/actionTypes');
 jest.unmock('../../validators/requestGroup');
-jest.unmock('jsonschema');
-jest.unmock('redux-thunk');
-jest.unmock('redux-mock-store');
 
 describe('RequestGroup Actions', () => {
   it('should add valid group', () => {
diff --git a/app/actions/__tests__/requests.test.js b/app/actions/__tests__/requests.test.js
index 4539f0fde..5591ddcbf 100644
--- a/app/actions/__tests__/requests.test.js
+++ b/app/actions/__tests__/requests.test.js
@@ -5,9 +5,6 @@ jest.unmock('../../constants/actionTypes');
 jest.unmock('../../validators/request');
 jest.unmock('../../reducers/requests');
 jest.unmock('../../reducers/global');
-jest.unmock('jsonschema');
-jest.unmock('redux-thunk');
-jest.unmock('redux-mock-store');
 
 // Jest seems to barf when this isn't here
 jest.unmock('request');
diff --git a/app/actions/requests.js b/app/actions/requests.js
index 2b05dd1aa..68a00d69c 100644
--- a/app/actions/requests.js
+++ b/app/actions/requests.js
@@ -1,6 +1,6 @@
 import * as types from '../constants/actionTypes'
 import * as methods from '../constants/global'
-import makeRequest from '../lib/request.electron'
+import makeRequest from '../lib/request'
 import {loadStart, loadStop} from './global'
 import {showModal} from './modals'
 import {REQUEST_RENAME} from '../constants/modals'
@@ -93,7 +93,7 @@ export function sendRequest (request) {
       if (err) {
         console.error(err);
       }
-
+    
       dispatch(setResponse(request.id, response));
       dispatch(loadStop());
     });
diff --git a/app/components/RequestBodyEditor.js b/app/components/RequestBodyEditor.js
index 7c18f083f..3a049cb7b 100644
--- a/app/components/RequestBodyEditor.js
+++ b/app/components/RequestBodyEditor.js
@@ -8,7 +8,9 @@ class RequestBodyEditor extends Component {
 
   render () {
     const {request, onChange, className} = this.props;
-    const mode = request.contentType || 'application/json';
+    // console.log(request);
+    // const mode = request.contentType || 'application/json';
+    const mode = 'application/json';
 
     return (
       <Editor
diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js
index f282b105c..3354c32ab 100644
--- a/app/components/Sidebar.js
+++ b/app/components/Sidebar.js
@@ -138,7 +138,7 @@ class Sidebar extends Component {
     return (
       <aside className="sidebar bg-dark grid--v">
         <header className="header">
-          <h1><WorkspaceDropdown /></h1>
+          <WorkspaceDropdown />
         </header>
         <div className="grid--v grid--start grid__cell">
           <ul
diff --git a/app/components/base/Editor.js b/app/components/base/Editor.js
index a750b9236..2f73bc455 100644
--- a/app/components/base/Editor.js
+++ b/app/components/base/Editor.js
@@ -49,6 +49,7 @@ const BASE_CODEMIRROR_OPTIONS = {
   foldGutter: true,
   height: 'auto',
   lineWrapping: false,
+  tabSize: 4,
   gutters: [
     'CodeMirror-linenumbers',
     'CodeMirror-foldgutter',
@@ -127,7 +128,7 @@ class Editor extends Component {
     options = Object.assign({}, options);
 
     // Strip of charset if there is one
-    options.mode = options.mode.split(';')[0];
+    options.mode = options.mode ? options.mode.split(';')[0] : 'text/plain';
     
     if (options.mode === 'json') {
       options.mode = 'application/json';
diff --git a/app/components/base/KeyValueEditor.js b/app/components/base/KeyValueEditor.js
index e8ed7d97c..6b96f6405 100644
--- a/app/components/base/KeyValueEditor.js
+++ b/app/components/base/KeyValueEditor.js
@@ -148,7 +148,7 @@ class KeyValueEditor extends Component {
         {pairs.map((pair, i) => {
           return (
             <div key={i} className="grid__cell grid__cell--no-flex grid">
-              <div className="form-control form-control--underlined grid__cell">
+              <div className="form-control form-control--underlined form-control--wide grid__cell">
                 <input
                   type="text"
                   placeholder={this.props.namePlaceholder || 'Name'}
@@ -159,7 +159,8 @@ class KeyValueEditor extends Component {
                   onBlur={e => {this._focusedPair = -1}}
                   onKeyDown={this._keyDown.bind(this)}/>
               </div>
-              <div className="form-control form-control--underlined grid__cell">
+              <div>&nbsp;&nbsp;&nbsp;</div>
+              <div className="form-control form-control--underlined form-control--wide grid__cell">
                 <input
                   type="text"
                   placeholder={this.props.valuePlaceholder || 'Value'}
@@ -170,6 +171,7 @@ class KeyValueEditor extends Component {
                   onBlur={e => {this._focusedPair = -1}}
                   onKeyDown={this._keyDown.bind(this)}/>
               </div>
+              <div>&nbsp;&nbsp;&nbsp;</div>
               <div className="grid--v">
                 <button className="btn btn--compact"
                         tabIndex="-1"
@@ -182,16 +184,18 @@ class KeyValueEditor extends Component {
         })}
         {maxPairs === undefined || pairs.length < maxPairs ? (
           <div className="grid__cell grid__cell--no-flex grid">
-            <div className="form-control form-control--underlined grid__cell">
+            <div className="form-control form-control--underlined form-control--wide grid__cell">
               <input type="text"
                      placeholder={this.props.namePlaceholder || 'Name'}
                      onFocus={e => {this._focusedField = NAME; this._addPair()}}/>
             </div>
-            <div className="form-control form-control--underlined grid__cell">
+            <div>&nbsp;&nbsp;&nbsp;</div>
+            <div className="form-control form-control--underlined form-control--wide grid__cell">
               <input type="text"
                      placeholder={this.props.valuePlaceholder || 'Value'}
                      onFocus={e => {this._focusedField = VALUE; this._addPair()}}/>
             </div>
+            <div>&nbsp;&nbsp;&nbsp;</div>
             <div className="grid--v">
               <button className="btn btn--compact" disabled={true} tabIndex="-1">
                 <i className="fa fa-blank"></i>
diff --git a/app/components/base/Modal.js b/app/components/base/Modal.js
index f7a53ba80..7c7892103 100644
--- a/app/components/base/Modal.js
+++ b/app/components/base/Modal.js
@@ -1,36 +1,6 @@
-import React, {Component, PropTypes} from 'react';
-import classnames from 'classnames';
-
-const ModalHeader = (props) => (
-  <div className="modal__header bg-light">
-    <div className="grid">
-      <div className="grid__cell pad">
-        <div className={props.className}>
-          {props.children}
-        </div>
-      </div>
-      <div className="grid--v">
-        <button className="btn btn--compact txt-lg" data-close-modal="true">
-          <i className="fa fa-times"></i>
-        </button>
-      </div>
-    </div>
-  </div>
-);
-
-const ModalBody = (props) => (
-  <div className={classnames('modal__body', 'grid__cell', 'scrollable', props.className)}>
-    {props.children}
-  </div>
-);
-
-const ModalFooter = (props) => (
-  <div className="modal__footer">
-    <div className={props.className}>
-      {props.children}
-    </div>
-  </div>
-);
+import React, {Component, PropTypes} from 'react'
+import classnames from 'classnames'
+import * as ModalActions from '../../actions/modals'
 
 class Modal extends Component {
   _handleClick (e) {
@@ -70,7 +40,7 @@ class Modal extends Component {
   }
 
   componentDidMount () {
-    this.refs.modal.focus();
+    this.refs.modal && this.refs.modal.focus();
   }
 
   render () {
@@ -80,7 +50,8 @@ class Modal extends Component {
            className={classnames('modal', 'grid', 'grid--center', this.props.className)}
            onKeyDown={this._keyDown.bind(this)}
            onClick={this._handleClick.bind(this)}>
-        <div className={classnames('modal__content', 'grid--v', 'bg-super-light', {tall: this.props.tall})}>
+        <div
+          className={classnames('modal__content', 'grid--v', 'bg-super-light', {tall: this.props.tall})}>
           {this.props.children}
         </div>
       </div>
@@ -93,4 +64,5 @@ Modal.propTypes = {
   tall: PropTypes.bool
 };
 
-export {Modal, ModalHeader, ModalBody, ModalFooter};
+export default Modal;
+
diff --git a/app/components/base/ModalBody.js b/app/components/base/ModalBody.js
new file mode 100644
index 000000000..ef8de94e4
--- /dev/null
+++ b/app/components/base/ModalBody.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import classnames from 'classnames';
+
+const ModalBody = (props) => (
+  <div className={classnames('modal__body', 'grid__cell', 'scrollable', props.className)}>
+    {props.children}
+  </div>
+);
+
+export default ModalBody;
diff --git a/app/components/base/ModalFooter.js b/app/components/base/ModalFooter.js
new file mode 100644
index 000000000..7dedb7fa4
--- /dev/null
+++ b/app/components/base/ModalFooter.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ModalFooter = (props) => (
+  <div className="modal__footer">
+    <div className={props.className}>
+      {props.children}
+    </div>
+  </div>
+);
+
+export default ModalFooter;
diff --git a/app/components/base/ModalHeader.js b/app/components/base/ModalHeader.js
new file mode 100644
index 000000000..d145cdb20
--- /dev/null
+++ b/app/components/base/ModalHeader.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ModalHeader = (props) => (
+  <div className="modal__header bg-light">
+    <div className="grid">
+      <div className="grid__cell pad">
+        <div className={props.className}>
+          {props.children}
+        </div>
+      </div>
+      <div className="grid--v">
+        <button className="btn btn--compact txt-lg" data-close-modal="true">
+          <i className="fa fa-times"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+);
+
+export default ModalHeader;
diff --git a/app/components/base/PromptModal.js b/app/components/base/PromptModal.js
index 7efcff3fb..002b544fe 100644
--- a/app/components/base/PromptModal.js
+++ b/app/components/base/PromptModal.js
@@ -1,5 +1,8 @@
-import React, {Component, PropTypes} from 'react';
-import {Modal, ModalHeader, ModalBody, ModalFooter} from './Modal'
+import React, {Component, PropTypes} from 'react'
+import Modal from './Modal'
+import ModalBody from './ModalBody'
+import ModalHeader from './ModalHeader'
+import ModalFooter from './ModalFooter'
 
 class PromptModal extends Component {
   _onSubmit (e) {
@@ -29,9 +32,9 @@ class PromptModal extends Component {
   }
 
   render () {
-    const {onClose, submitName, headerName} = this.props;
+    const {onClose, submitName, headerName, ...extraProps} = this.props;
     return (
-      <Modal ref="modal" onClose={onClose}>
+      <Modal ref="modal" onClose={onClose} {...extraProps}>
         <ModalHeader>{headerName}</ModalHeader>
         <ModalBody className="wide">
           <form onSubmit={this._onSubmit.bind(this)} className="wide pad">
diff --git a/app/components/dropdowns/RequestGroupActionsDropdown.js b/app/components/dropdowns/RequestGroupActionsDropdown.js
index 06184497f..d297e9720 100644
--- a/app/components/dropdowns/RequestGroupActionsDropdown.js
+++ b/app/components/dropdowns/RequestGroupActionsDropdown.js
@@ -20,6 +20,11 @@ class RequestGroupActionsDropdown extends Component {
               <i className="fa fa-edit"></i> Rename
             </button>
           </li>
+          <li>
+            <button>
+              <i className="fa fa-code"></i> Environment
+            </button>
+          </li>
           <li>
             <button onClick={e => actions.deleteRequestGroup(requestGroup.id)}>
               <i className="fa fa-trash-o"></i> Delete
diff --git a/app/components/dropdowns/WorkspaceDropdown.js b/app/components/dropdowns/WorkspaceDropdown.js
index 9dc400093..e90f0b98b 100644
--- a/app/components/dropdowns/WorkspaceDropdown.js
+++ b/app/components/dropdowns/WorkspaceDropdown.js
@@ -13,7 +13,9 @@ class WorkspaceDropdown extends Component {
       <Dropdown right={true} {...other} className="block">
         <button className="btn header__content">
           <div className="grid grid--center">
-            <div className="grid__cell">Insomnia</div>
+            <div className="grid__cell">
+              <h1 className="no-pad">Insomnia</h1>
+            </div>
             <div className="no-wrap">
               {loading ? <i className="fa fa-refresh fa-spin txt-lg"></i> : ''}&nbsp;
               <i className="fa fa-caret-down txt-lg"></i>
diff --git a/app/components/modals/EnvironmentEditModal.js b/app/components/modals/EnvironmentEditModal.js
deleted file mode 100644
index 7d7e4c4ff..000000000
--- a/app/components/modals/EnvironmentEditModal.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, {Component, PropTypes} from 'react'
-import {Modal, ModalHeader, ModalBody, ModalFooter} from '../base/Modal'
-import Editor from '../base/Editor'
-import * as modalIds from '../../constants/modals'
-
-class EnvironmentEditModal extends Component {
-  render () {
-    const editorOptions = {
-      mode: 'application/json',
-      placeholder: '{ "base_url": "https://website.com/api" }',
-      theme: 'neat'
-    };
-
-    return (
-      <Modal {...this.props}>
-        <ModalHeader>Edit Environments</ModalHeader>
-        <ModalBody className="grid--v wide">
-          <Editor value={undefined}
-                  options={editorOptions}/>
-        </ModalBody>
-        <ModalFooter className="text-right">
-          <button className="btn">Done</button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-}
-
-EnvironmentEditModal.propTypes = {};
-
-EnvironmentEditModal.defaultProps = {
-  id: modalIds.ENVIRONMENT_EDITOR
-};
-
-export default EnvironmentEditModal;
diff --git a/app/components/modals/ModalContainer.js b/app/components/modals/Prompts.js
similarity index 52%
rename from app/components/modals/ModalContainer.js
rename to app/components/modals/Prompts.js
index 46d6f0aa9..f98073b44 100644
--- a/app/components/modals/ModalContainer.js
+++ b/app/components/modals/Prompts.js
@@ -7,14 +7,10 @@ import * as RequestGroupActions from '../../actions/requestGroups'
 import * as RequestActions from '../../actions/requests'
 import * as modalIds from '../../constants/modals'
 import PromptModal from '../base/PromptModal'
-import EnvironmentEditModal from './EnvironmentEditModal'
 
-class Modals extends Component {
+class Prompts extends Component {
   constructor (props) {
     super(props);
-    this._modals = [
-      EnvironmentEditModal
-    ];
     this._prompts = {};
     this._prompts[modalIds.REQUEST_RENAME] = {
       header: 'Rename Request',
@@ -37,54 +33,33 @@ class Modals extends Component {
     const {modals, actions} = this.props;
 
     return (
-      <div>
-        <div ref="prompts">
-          {Object.keys(this._prompts).map(id => {
-            const promptDef = this._prompts[id];
-            const modal = modals.find(m => m.id === id);
+      <div ref="prompts">
+        {Object.keys(this._prompts).map(id => {
+          const promptDef = this._prompts[id];
+          const modal = modals.find(m => m.id === id);
 
-            if (!modal) {
-              return null;
-            }
+          if (!modal) {
+            return null;
+          }
 
-            return (
-              <PromptModal
-                key={id}
-                headerName={promptDef.header}
-                submitName={promptDef.submit}
-                defaultValue={modal.data.defaultValue}
-                onClose={() => actions.hideModal(modal.id)}
-                onSubmit={value => promptDef.onSubmit(modal, value)}
-              />
-            )
-          })}
-        </div>
-        <div ref="modals">
-          {this._modals.map(c => {
-            const id = c.defaultProps.id;
-            const isVisible = modals.find(m => m.id === id);
-            const modal = React.createElement(c, {
-              key: id,
-              onClose: () => actions.hideModal(id),
-              tall: true
-            });
-            return isVisible ? modal : null;
-          })}
-        </div>
-        <div ref="toasts">
-          {/*<div className="toast grid">
-            <div className="toast__message">Request deleted</div>
-            <button className="btn toast__action">
-              Undo
-            </button>
-          </div> */}
-        </div>
+          return (
+            <PromptModal
+              key={id}
+              id={id}
+              headerName={promptDef.header}
+              submitName={promptDef.submit}
+              defaultValue={modal.data.defaultValue}
+              onClose={() => actions.hideModal(modal.id)}
+              onSubmit={value => promptDef.onSubmit(modal, value)}
+            />
+          )
+        })}
       </div>
     );
   }
 }
 
-Modals.propTypes = {
+Prompts.propTypes = {
   actions: PropTypes.shape({
     hideModal: PropTypes.func.isRequired,
     updateRequestGroup: PropTypes.func.isRequired,
@@ -114,5 +89,5 @@ function mapDispatchToProps (dispatch) {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(Modals);
+)(Prompts);
 
diff --git a/app/components/modals/RequestGroupEnvironmentEditModal.js b/app/components/modals/RequestGroupEnvironmentEditModal.js
new file mode 100644
index 000000000..4bcd37810
--- /dev/null
+++ b/app/components/modals/RequestGroupEnvironmentEditModal.js
@@ -0,0 +1,65 @@
+import React, {Component, PropTypes} from 'react'
+import Modal from '../base/Modal'
+import ModalBody from '../base/ModalBody'
+import ModalHeader from '../base/ModalHeader'
+import ModalFooter from '../base/ModalFooter'
+import Editor from '../base/Editor'
+import KeyValueEditor from '../base/KeyValueEditor'
+import * as modalIds from '../../constants/modals'
+
+class RequestGroupEnvironmentEditModal extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      pairs: []
+    }
+  }
+
+  _saveChanges () {
+    this.props.onChange(this.state.pairs);
+  }
+
+  _keyValueChange (pairs) {
+    this.setState({pairs});
+  }
+
+  render () {
+    const editorOptions = {
+      mode: 'application/json',
+      placeholder: '{ "array": [1, 2, 3, 4] }',
+      theme: 'neat'
+    };
+
+    return (
+      <Modal {...this.props}>
+        <ModalHeader>Environment Variables</ModalHeader>
+        <ModalBody className="grid--v wide pad">
+          <div>
+            <KeyValueEditor onChange={this._keyValueChange.bind(this)}
+                            pairs={this.state.pairs}
+                            namePlaceholder="BASE_URL"
+                            valuePlaceholder="https://api.insomnia.com/v1"/>
+          </div>
+          {/*
+           <h3>Hello</h3>
+           <Editor value={undefined} options={editorOptions}/>
+           */}
+        </ModalBody>
+        <ModalFooter className="text-right">
+          <button className="btn" onClick={this._saveChanges.bind(this)}>Done</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+RequestGroupEnvironmentEditModal.propTypes = {
+  // requestGroup: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+
+RequestGroupEnvironmentEditModal.defaultProps = {
+  id: modalIds.ENVIRONMENT_EDITOR
+};
+
+export default RequestGroupEnvironmentEditModal;
diff --git a/app/containers/App.js b/app/containers/App.js
index dc72fb1a4..3b6adde7b 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -4,17 +4,19 @@ import {bindActionCreators} from 'redux'
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs'
 
 import Editor from '../components/base/Editor'
-import Modals from '../components/modals/ModalContainer'
+import Prompts from '../components/modals/Prompts'
 import KeyValueEditor from '../components/base/KeyValueEditor'
 import RequestBodyEditor from '../components/RequestBodyEditor'
 import RequestAuthEditor from '../components/RequestAuthEditor'
 import RequestUrlBar from '../components/RequestUrlBar'
 import Sidebar from '../components/Sidebar'
+import RequestGroupEnvironmentEditModal from '../components/modals/RequestGroupEnvironmentEditModal'
 
 import * as GlobalActions from '../actions/global'
 import * as RequestGroupActions from '../actions/requestGroups'
 import * as RequestActions from '../actions/requests'
 import * as ResponseActions from '../actions/responses'
+import * as ModalActions from '../actions/modals'
 
 // Don't inject component styles (use our own)
 Tabs.setUseDefaultStyles(false);
@@ -59,7 +61,7 @@ class App extends Component {
                   request={activeRequest}/>
               </TabPanel>
               <TabPanel className="grid__cell grid__cell--scroll--v">
-                <div className="wide">
+                <div className="wide pad">
                   <KeyValueEditor
                     pairs={activeRequest.params}
                     onChange={params => actions.updateRequest({id: activeRequest.id, params})}
@@ -67,7 +69,7 @@ class App extends Component {
                 </div>
               </TabPanel>
               <TabPanel className="grid__cell grid__cell--scroll--v">
-                <div className="wide">
+                <div className="wide pad">
                   <RequestAuthEditor
                     request={activeRequest}
                     onChange={authentication => actions.updateRequest({id: activeRequest.id, authentication})}
@@ -75,7 +77,7 @@ class App extends Component {
                 </div>
               </TabPanel>
               <TabPanel className="grid__cell grid__cell--scroll--v">
-                <div className="wide">
+                <div className="wide pad">
                   <KeyValueEditor
                     pairs={activeRequest.headers}
                     onChange={headers => actions.updateRequest({id: activeRequest.id, headers})}
@@ -144,13 +146,19 @@ class App extends Component {
   }
 
   render () {
-    const {actions, requests, responses, requestGroups, tabs} = this.props;
+    const {actions, requests, responses, requestGroups, tabs, modals} = this.props;
     const activeRequest = requests.all.find(r => r.id === requests.active);
     const activeResponse = responses[activeRequest && activeRequest.id];
 
     return (
       <div className="grid bg-super-dark tall">
-        <Modals />
+        <Prompts />
+        {!modals.find(m => m.id === RequestGroupEnvironmentEditModal.defaultProps.id) ? null : (
+          <RequestGroupEnvironmentEditModal
+            onClose={() => actions.hideModal(RequestGroupEnvironmentEditModal.defaultProps.id)}
+            onChange={v => console.log(v)}
+          />
+        )}
         <Sidebar
           activateRequest={actions.activateRequest}
           changeFilter={actions.changeFilter}
@@ -192,7 +200,8 @@ App.propTypes = {
     active: PropTypes.string // "required" but can be null
   }).isRequired,
   responses: PropTypes.object.isRequired,
-  tabs: PropTypes.object.isRequired
+  tabs: PropTypes.object.isRequired,
+  modals: PropTypes.array.isRequired
 };
 
 function mapStateToProps (state) {
@@ -201,7 +210,8 @@ function mapStateToProps (state) {
     requests: state.requests,
     requestGroups: state.requestGroups,
     responses: state.responses,
-    tabs: state.tabs
+    tabs: state.tabs,
+    modals: state.modals
   };
 }
 
@@ -210,6 +220,7 @@ function mapDispatchToProps (dispatch) {
     actions: Object.assign(
       {},
       bindActionCreators(GlobalActions, dispatch),
+      bindActionCreators(ModalActions, dispatch),
       bindActionCreators(RequestGroupActions, dispatch),
       bindActionCreators(RequestActions, dispatch),
       bindActionCreators(ResponseActions, dispatch)
diff --git a/app/css/components/dropdown.scss b/app/css/components/dropdown.scss
index 7d080eecb..e4dc7e307 100644
--- a/app/css/components/dropdown.scss
+++ b/app/css/components/dropdown.scss
@@ -34,7 +34,7 @@
       & > button {
         font-size: $font-size-md;
         text-align: left;
-        padding: 10px $padding-md;
+        padding: 10px $padding-md 10px $padding-sm;
         width: 100%;
         display: block;
         color: $font-light-bg !important;
@@ -50,7 +50,7 @@
         i.fa {
           display: inline-block;
           width: 2em;
-          text-align: left;
+          text-align: center;
         }
       }
     }
diff --git a/app/css/components/editor.scss b/app/css/components/editor.scss
index 53aa2d931..71585711e 100644
--- a/app/css/components/editor.scss
+++ b/app/css/components/editor.scss
@@ -9,6 +9,7 @@
   position: relative;
   display: flex;
   flex: 1 1 100%;
+  min-height: 5rem;
 
   .editor {
     box-sizing: border-box;
@@ -45,7 +46,7 @@
 
     .CodeMirror-lines {
       // Scroll past the end
-      padding-bottom: 100px;
+      //padding-bottom: 50px;
     }
 
     .CodeMirror-placeholder {
diff --git a/app/css/components/forms.scss b/app/css/components/forms.scss
index 72ff57339..0f9e6ff90 100644
--- a/app/css/components/forms.scss
+++ b/app/css/components/forms.scss
@@ -47,6 +47,7 @@
   &.form-control--underlined {
     textarea,
     input {
+      border-radius: 0;
       border-top: 0;
       border-right: 0;
       border-left: 0;
diff --git a/app/css/components/modal.scss b/app/css/components/modal.scss
index 1fe3c7219..fdc27dda3 100644
--- a/app/css/components/modal.scss
+++ b/app/css/components/modal.scss
@@ -20,6 +20,7 @@
   .modal__content {
     border-radius: $radius-md;
     box-sizing: border-box;
+    box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
     width: $modal-width;
     max-width: 100%;
     max-height: 100%;
diff --git a/app/css/layout/base.scss b/app/css/layout/base.scss
index 3227668d9..6251f42db 100644
--- a/app/css/layout/base.scss
+++ b/app/css/layout/base.scss
@@ -24,6 +24,22 @@ h2 {
   font-size: $font-size-xl;
 }
 
+h3 {
+  font-size: $font-size-lg;
+}
+
+h1, h2, h3 {
+  padding-top: 1.5em;
+}
+
+hr {
+  width: 100%;
+  height: 1px;
+  background-color: $hl-md;
+  border: 0;
+  margin: $padding-md 0;
+}
+
 .text-center {
   text-align: center;
 }
@@ -58,6 +74,10 @@ i.fa {
   white-space: nowrap;
 }
 
+.no-pad {
+  padding: 0 !important;
+}
+
 .wide {
   width: 100%;
 }
diff --git a/app/lib/render.js b/app/lib/render.js
index d2089917d..fbb310bae 100644
--- a/app/lib/render.js
+++ b/app/lib/render.js
@@ -1,7 +1,7 @@
-import swig from 'swig'
+import nunjucks from 'nunjucks'
 
-export default function (template, context) {
-  return swig.render(template, {
-    locals: context
-  })
+nunjucks.configure({autoescape: false});
+
+export default function (template, context = {}) {
+  return nunjucks.renderString(template, context);
 }
diff --git a/app/validators/__tests__/Request.test.js b/app/validators/__tests__/Request.test.js
index 071161301..0384ad8c6 100644
--- a/app/validators/__tests__/Request.test.js
+++ b/app/validators/__tests__/Request.test.js
@@ -1,6 +1,5 @@
 jest.unmock('../request');
 jest.unmock('../../constants/global');
-jest.unmock('jsonschema');
 
 import validate from '../request';
 
diff --git a/app/validators/requestGroup.js b/app/validators/requestGroup.js
index 074c89417..65d638fdc 100644
--- a/app/validators/requestGroup.js
+++ b/app/validators/requestGroup.js
@@ -3,9 +3,19 @@ import {Validator} from 'jsonschema';
 const validator = new Validator();
 
 const environmentsSchema = {
-  id: '/RequestGroupEnvironment',
+  id: '/Environment',
   type: 'object',
-  properties: {}
+  properties: {
+    id: {type: 'string'},
+    name: {type: 'string'},
+    data: {type: 'object'}
+  },
+  required: [
+    'data',
+    'id',
+    'name'
+  ],
+  additionalProperties: false
 };
 
 const requestGroupSchema = {
@@ -16,7 +26,7 @@ const requestGroupSchema = {
     created: {type: 'number', minimum: 1000000000000, maximum: 10000000000000},
     modified: {type: 'number', minimum: 1000000000000, maximum: 10000000000000},
     name: {type: 'string', minLength: 1},
-    environment: {type: 'object'}
+    environment: {ref: '/Environment'}
   },
   required: [
     'id',
@@ -28,6 +38,8 @@ const requestGroupSchema = {
   additionalProperties: false
 };
 
+validator.addSchema(environmentsSchema);
+
 export default function (requestGroup) {
   return validator.validate(requestGroup, requestGroupSchema);
 }
diff --git a/package.json b/package.json
index 588730d11..c650dff92 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "version": "3.0.0",
   "description": "Insomnia App",
+  "main": "electron.js",
   "repository": {
     "type": "git",
     "url": "git@bitbucket.org:gschier/insomnia.git"
@@ -23,7 +24,6 @@
     "redux-logger": "^2.6.1",
     "redux-thunk": "^2.0.1",
     "request": "latest",
-    "swig": "^1.4.2",
     "webpack": "^1.12.14"
   },
   "devDependencies": {
@@ -63,9 +63,21 @@
   },
   "jest": {
     "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/redux-thunk",
+      "<rootDir>/node_modules/redux-mock-store",
+      "<rootDir>/node_modules/nunjucks",
+      "<rootDir>/node_modules/jsonschema",
       "<rootDir>/node_modules/react",
       "<rootDir>/node_modules/react-dom",
       "<rootDir>/node_modules/react-addons-test-utils"
+    ],
+    "testFileExtensions": [
+      "test.js"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "electron.js",
+      "chrome.js"
     ]
   }
 }
diff --git a/webpack/base.config.js b/webpack/base.config.js
index 4cebe8a41..214ccfa22 100644
--- a/webpack/base.config.js
+++ b/webpack/base.config.js
@@ -1,7 +1,8 @@
 var path = require('path');
 var webpack = require('webpack');
+var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
 
-module.exports = {
+var config = {
   target: 'web',
   devtool: 'source-map',
   context: path.join(__dirname, '../app'),
@@ -52,7 +53,21 @@ module.exports = {
     ]
   },
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['', '.js', '.jsx', '.electron.js', '.chrome.js'],
     packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
-  }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __DEV__: true,
+      'process.env': {
+        NODE_ENV: JSON.stringify('development')
+      }
+    }),
+    new webpack.ExternalsPlugin('commonjs', [
+      'request'
+    ])
+  ]
 };
+
+config.target = webpackTargetElectronRenderer(config);
+module.exports = config;
diff --git a/webpack/dev.electron.config.js b/webpack/dev.electron.config.js
index 73b053112..4b333ca57 100644
--- a/webpack/dev.electron.config.js
+++ b/webpack/dev.electron.config.js
@@ -1,7 +1,6 @@
 var path = require('path');
 var webpack = require('webpack');
 var base = require('./base.config');
-var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
 
 base.entry = [
   'webpack-hot-middleware/client?path=http://localhost:3333/__webpack_hmr',
@@ -21,23 +20,10 @@ for (var i = 0; i < base.module.loaders.length; i++) {
   }
 }
 
-base.plugins = [
+base.plugins = base.plugins.concat([
   new webpack.HotModuleReplacementPlugin(),
-  new webpack.NoErrorsPlugin(),
-  new webpack.DefinePlugin({
-    __DEV__: true,
-    'process.env': {
-      NODE_ENV: JSON.stringify('development')
-    }
-  }),
-  new webpack.ExternalsPlugin('commonjs', [
-    'request'
-  ])
-];
-
-base.target = webpackTargetElectronRenderer(base);
-
-base.resolve.extensions.push('electron.js');
+  new webpack.NoErrorsPlugin()
+]);
 
 module.exports = base;