diff --git a/assets/fonts/kolidecons/kolidecons.woff b/assets/fonts/kolidecons/kolidecons.woff
old mode 100644
new mode 100755
index a6206b5194..bf78b1f156
Binary files a/assets/fonts/kolidecons/kolidecons.woff and b/assets/fonts/kolidecons/kolidecons.woff differ
diff --git a/frontend/components/buttons/Button/Button.tsx b/frontend/components/buttons/Button/Button.tsx
index b4ad0822fd..39fabc0186 100644
--- a/frontend/components/buttons/Button/Button.tsx
+++ b/frontend/components/buttons/Button/Button.tsx
@@ -9,7 +9,7 @@ interface IButtonProps {
   onClick: (evt: React.MouseEvent<HTMLButtonElement>) => boolean;
   size: string;
   tabIndex: number;
-  text: string;
+  text: any;
   type: string;
   variant: string;
 }
diff --git a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
new file mode 100644
index 0000000000..55a34f4a81
--- /dev/null
+++ b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
@@ -0,0 +1,115 @@
+import React, { Component, PropTypes } from 'react';
+
+import Icon from 'components/Icon';
+import Button from 'components/buttons/Button';
+import Dropdown from 'components/forms/fields/Dropdown';
+import Form from 'components/forms/Form';
+import formFieldInterface from 'interfaces/form_field';
+import InputField from 'components/forms/fields/InputField';
+import validate from 'components/forms/ConfigurePackQueryForm/validate';
+
+const baseClass = 'configure-pack-query-form';
+const fieldNames = ['query_id', 'interval', 'logging_type', 'platform', 'version'];
+const platformOptions = [
+  { label: 'All', value: 'all' },
+  { label: 'Windows', value: 'windows' },
+  { label: 'Linux', value: 'linux' },
+  { label: 'macOS', value: 'darwin' },
+];
+const loggingTypeOptions = [
+  { label: 'Differential', value: 'differential' },
+  { label: 'Differential (Ignore Removals)', value: 'differential_ignore_removals' },
+  { label: 'Snapshot', value: 'snapshot' },
+];
+const minOsqueryVersionOptions = [
+  { label: 'All', value: 'all' },
+  { label: '1.8.1 +', value: '1.8.1' },
+  { label: '1.8.2 +', value: '1.8.2' },
+  { label: '2.0.0 +', value: '2.0.0' },
+  { label: '2.1.1 +', value: '2.1.1' },
+  { label: '2.1.2 +', value: '2.1.2' },
+  { label: '2.2.0 +', value: '2.2.0' },
+  { label: '2.2.1 +', value: '2.2.1' },
+];
+
+class ConfigurePackQueryForm extends Component {
+  static propTypes = {
+    fields: PropTypes.shape({
+      interval: formFieldInterface.isRequired,
+      logging_type: formFieldInterface.isRequired,
+      platform: formFieldInterface.isRequired,
+      version: formFieldInterface.isRequired,
+    }).isRequired,
+    handleSubmit: PropTypes.func,
+    onCancel: PropTypes.func,
+  };
+
+  onCancel = (evt) => {
+    evt.preventDefault();
+
+    const { onCancel: handleCancel } = this.props;
+
+    return handleCancel();
+  }
+
+  render () {
+    const { fields, handleSubmit } = this.props;
+    const { onCancel } = this;
+
+    return (
+      <form className={baseClass} onSubmit={handleSubmit}>
+        <h2 className={`${baseClass}__title`}>configuration</h2>
+        <div className={`${baseClass}__fields`}>
+          <InputField
+            {...fields.interval}
+            inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--interval`}
+            placeholder="- - -"
+            label="Interval"
+            hint="Seconds"
+            type="number"
+          />
+          <Dropdown
+            {...fields.platform}
+            options={platformOptions}
+            placeholder="- - -"
+            label="Platform"
+            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--platform`}
+          />
+          <Dropdown
+            {...fields.version}
+            options={minOsqueryVersionOptions}
+            placeholder="- - -"
+            label={[<Icon name="osquery" key="min-osquery-vers" />, ' ver.']}
+            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--osquer-vers`}
+          />
+          <Dropdown
+            {...fields.logging_type}
+            options={loggingTypeOptions}
+            placeholder="- - -"
+            label="Logging"
+            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--logging`}
+          />
+          <div className={`${baseClass}__btn-wrapper`}>
+            <Button
+              className={`${baseClass}__cancel-btn`}
+              onClick={onCancel}
+              text="Cancel"
+              variant="inverse"
+            />
+            <Button
+              className={`${baseClass}__submit-btn`}
+              text="Save"
+              type="submit"
+              variant="brand"
+            />
+          </div>
+        </div>
+      </form>
+    );
+  }
+}
+
+export default Form(ConfigurePackQueryForm, {
+  fields: fieldNames,
+  validate,
+});
diff --git a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.tests.jsx b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.tests.jsx
new file mode 100644
index 0000000000..dd5d5d1ed6
--- /dev/null
+++ b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.tests.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import expect, { createSpy, restoreSpies } from 'expect';
+import { mount } from 'enzyme';
+import { noop } from 'lodash';
+
+import ConfigurePackQueryForm from 'components/forms/ConfigurePackQueryForm';
+import { itBehavesLikeAFormDropdownElement, itBehavesLikeAFormInputElement } from 'test/helpers';
+
+describe('ConfigurePackQueryForm - component', () => {
+  afterEach(restoreSpies);
+
+  describe('form fields', () => {
+    const form = mount(
+      <ConfigurePackQueryForm
+        handleSubmit={noop}
+      />
+    );
+
+    it('updates form state', () => {
+      itBehavesLikeAFormInputElement(form, 'interval');
+      itBehavesLikeAFormDropdownElement(form, 'logging_type');
+      itBehavesLikeAFormDropdownElement(form, 'platform');
+      itBehavesLikeAFormDropdownElement(form, 'version');
+    });
+  });
+
+  describe('submitting the form', () => {
+    const spy = createSpy();
+    const form = mount(
+      <ConfigurePackQueryForm
+        handleSubmit={spy}
+        formData={{ query_id: 1 }}
+      />
+    );
+
+    it('submits the form with the form data', () => {
+      itBehavesLikeAFormInputElement(form, 'interval', 'InputField', 123);
+      itBehavesLikeAFormDropdownElement(form, 'logging_type');
+      itBehavesLikeAFormDropdownElement(form, 'platform');
+      itBehavesLikeAFormDropdownElement(form, 'version');
+
+      form.find('form').simulate('submit');
+
+      expect(spy).toHaveBeenCalledWith({
+        interval: 123,
+        logging_type: 'differential',
+        platform: 'all',
+        query_id: 1,
+        version: 'all',
+      });
+    });
+  });
+});
diff --git a/frontend/components/forms/ConfigurePackQueryForm/_styles.scss b/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
new file mode 100644
index 0000000000..1ac9a11402
--- /dev/null
+++ b/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
@@ -0,0 +1,64 @@
+.configure-pack-query-form {
+  .form-field {
+    .input-field,
+    .dropdown__select {
+      width: 175px;
+      float: right;
+    }
+
+    @at-root .configure-pack-query-form__form-field--interval {
+      .input-field {
+        padding-right: 70px;
+      }
+    }
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: $bold;
+    letter-spacing: -0.5px;
+    color: $text-dark;
+    border-bottom: 1px solid #eaeefb;
+    padding: 0 0 9px;
+    margin: 0 0 9px;
+  }
+
+  &__fields {
+    .form-field {
+      position: relative;
+
+      &__label {
+        font-size: 16px;
+        font-weight: $bold;
+        line-height: 40px;
+        letter-spacing: -0.5px;
+        color: $text-medium;
+        display: inline-block;
+        width: 70px;
+        text-transform: lowercase;
+        padding-left: 12px;
+      }
+
+      &__hint {
+        position: absolute;
+        bottom: 13px;
+        right: 10px;
+        text-transform: lowercase;
+      }
+    }
+
+    .kolidecon {
+      margin-right: 6px;
+    }
+  }
+
+  &__btn-wrapper {
+    padding-top: 20px;
+
+    .button {
+      display: block;
+      width: 100%;
+      margin-bottom: 20px;
+    }
+  }
+}
diff --git a/frontend/components/forms/ConfigurePackQueryForm/index.js b/frontend/components/forms/ConfigurePackQueryForm/index.js
new file mode 100644
index 0000000000..4e19b77445
--- /dev/null
+++ b/frontend/components/forms/ConfigurePackQueryForm/index.js
@@ -0,0 +1 @@
+export default from './ConfigurePackQueryForm';
diff --git a/frontend/components/forms/ConfigurePackQueryForm/validate.js b/frontend/components/forms/ConfigurePackQueryForm/validate.js
new file mode 100644
index 0000000000..9be283d5de
--- /dev/null
+++ b/frontend/components/forms/ConfigurePackQueryForm/validate.js
@@ -0,0 +1,33 @@
+import { size } from 'lodash';
+
+import validateNumericality from 'components/forms/validators/validate_numericality';
+
+const validate = (formData) => {
+  const errors = {};
+
+  if (!formData.query_id) {
+    errors.query_id = 'A query must be selected';
+  }
+
+  if (!formData.interval) {
+    errors.interval = 'Interval must be present';
+  }
+
+  if (formData.interval && !validateNumericality(formData.interval)) {
+    errors.interval = 'Interval must be a number';
+  }
+
+  if (!formData.platform) {
+    errors.platform = 'A platform must be selected';
+  }
+
+  if (!formData.logging_type) {
+    errors.logging_type = 'A Logging Type must be selected';
+  }
+
+  const valid = !size(errors);
+
+  return { valid, errors };
+};
+
+export default validate;
diff --git a/frontend/components/forms/Form.jsx b/frontend/components/forms/Form.jsx
index 39376d55b3..e4f43fb6e3 100644
--- a/frontend/components/forms/Form.jsx
+++ b/frontend/components/forms/Form.jsx
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { noop } from 'lodash';
+import { isEqual, noop } from 'lodash';
 
 const defaultValidate = () => { return { valid: true, errors: {} }; };
 
@@ -25,6 +25,24 @@ export default (WrappedComponent, { fields, validate = defaultValidate }) => {
       this.state = { errors, formData };
     }
 
+    componentWillReceiveProps (nextProps) {
+      const { formData: formDataProp } = nextProps;
+      const { formData: oldFormDataProp } = this.props;
+
+      if (!isEqual(formDataProp, oldFormDataProp)) {
+        const { formData } = this.state;
+
+        this.setState({
+          formData: {
+            ...formData,
+            ...formDataProp,
+          },
+        });
+      }
+
+      return false;
+    }
+
     onFieldChange = (fieldName) => {
       return (value) => {
         const { errors, formData } = this.state;
diff --git a/frontend/components/forms/FormField/FormField.jsx b/frontend/components/forms/FormField/FormField.jsx
index 9570d54658..1bbd8db1ac 100644
--- a/frontend/components/forms/FormField/FormField.jsx
+++ b/frontend/components/forms/FormField/FormField.jsx
@@ -9,7 +9,7 @@ class FormField extends Component {
     className: PropTypes.string,
     error: PropTypes.string,
     hint: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-    label: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
     name: PropTypes.string,
     type: PropTypes.string,
   };
@@ -46,9 +46,9 @@ class FormField extends Component {
     const { renderLabel, renderHint } = this;
     const { children, className, type } = this.props;
 
-    const formFieldClass = classnames(baseClass, className, {
+    const formFieldClass = classnames(baseClass, {
       [`${baseClass}--${type}`]: type,
-    });
+    }, className);
 
     return (
       <div className={formFieldClass}>
diff --git a/frontend/components/forms/fields/Checkbox/Checkbox.jsx b/frontend/components/forms/fields/Checkbox/Checkbox.jsx
index 602d8847ee..9e7b6882b6 100644
--- a/frontend/components/forms/fields/Checkbox/Checkbox.jsx
+++ b/frontend/components/forms/fields/Checkbox/Checkbox.jsx
@@ -10,15 +10,14 @@ class Checkbox extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    disabled: PropTypes.bool,
     name: PropTypes.string,
     onChange: PropTypes.func,
-    error: PropTypes.string,
-    hint: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-    label: PropTypes.string,
     value: PropTypes.bool,
   };
 
   static defaultProps = {
+    disabled: false,
     onChange: noop,
   };
 
@@ -30,16 +29,28 @@ class Checkbox extends Component {
 
   render () {
     const { handleChange } = this;
-    const { children, className, name, value } = this.props;
+    const { children, className, disabled, name, value } = this.props;
     const checkBoxClass = classnames(baseClass, className);
 
     const formFieldProps = pick(this.props, ['hint', 'label', 'error', 'name']);
 
+    const checkBoxTickClass = classnames(`${checkBoxClass}__tick`, {
+      [`${checkBoxClass}__tick--disabled`]: disabled,
+    });
+
     return (
       <FormField {...formFieldProps} type="checkbox">
         <label htmlFor={name} className={checkBoxClass}>
-          <input type="checkbox" name={name} id={name} className={`${checkBoxClass}__input`} onChange={handleChange} checked={value} />
-          <span className={`${checkBoxClass}__tick`} />
+          <input
+            checked={value}
+            className={`${checkBoxClass}__input`}
+            disabled={disabled}
+            id={name}
+            name={name}
+            onChange={handleChange}
+            type="checkbox"
+          />
+          <span className={checkBoxTickClass} />
           <div className={`${checkBoxClass}__label`}>{children}</div>
         </label>
       </FormField>
diff --git a/frontend/components/forms/fields/Checkbox/Checkbox.tests.jsx b/frontend/components/forms/fields/Checkbox/Checkbox.tests.jsx
index d577e3e530..b898460716 100644
--- a/frontend/components/forms/fields/Checkbox/Checkbox.tests.jsx
+++ b/frontend/components/forms/fields/Checkbox/Checkbox.tests.jsx
@@ -1,11 +1,40 @@
 import React from 'react';
-import expect from 'expect';
+import expect, { createSpy, restoreSpies } from 'expect';
 import { mount } from 'enzyme';
 
 import Checkbox from './Checkbox';
 
 describe('Checkbox - component', () => {
+  afterEach(restoreSpies);
+
   it('renders', () => {
     expect(mount(<Checkbox />)).toExist();
   });
+
+  it('calls the "onChange" handler when changed', () => {
+    const onCheckedComponentChangeSpy = createSpy();
+    const onUncheckedComponentChangeSpy = createSpy();
+
+    const checkedComponent = mount(
+      <Checkbox
+        name="checkbox"
+        onChange={onCheckedComponentChangeSpy}
+        value
+      />
+    ).find('input');
+
+    const uncheckedComponent = mount(
+      <Checkbox
+        name="checkbox"
+        onChange={onUncheckedComponentChangeSpy}
+        value={false}
+      />
+    ).find('input');
+
+    checkedComponent.simulate('change');
+    uncheckedComponent.simulate('change');
+
+    expect(onCheckedComponentChangeSpy).toHaveBeenCalledWith(false);
+    expect(onUncheckedComponentChangeSpy).toHaveBeenCalledWith(true);
+  });
 });
diff --git a/frontend/components/forms/fields/Checkbox/_styles.scss b/frontend/components/forms/fields/Checkbox/_styles.scss
index 05baccd097..99a3ea0140 100644
--- a/frontend/components/forms/fields/Checkbox/_styles.scss
+++ b/frontend/components/forms/fields/Checkbox/_styles.scss
@@ -1,6 +1,8 @@
 .kolide-checkbox {
   @include clearfix;
+  @include size(20px);
   position: relative;
+  display: block;
 
   &__input {
     visibility: hidden;
@@ -32,6 +34,7 @@
   &__tick {
     @include size(20px);
     position: absolute;
+    left: 0;
     display: inline-block;
 
     &::after {
@@ -45,6 +48,12 @@
       background-color: $white;
       visibility: visible;
     }
+
+    &--disabled {
+      &::after {
+        background-color: $border-medium;
+      }
+    }
   }
 
   &__label {
diff --git a/frontend/components/forms/fields/Dropdown/Dropdown.jsx b/frontend/components/forms/fields/Dropdown/Dropdown.jsx
index 51add0a4ea..d3c1d29db1 100644
--- a/frontend/components/forms/fields/Dropdown/Dropdown.jsx
+++ b/frontend/components/forms/fields/Dropdown/Dropdown.jsx
@@ -1,23 +1,26 @@
 import React, { Component, PropTypes } from 'react';
-import Select from 'react-select';
+import classnames from 'classnames';
 import { noop, pick } from 'lodash';
+import Select from 'react-select';
 
 import dropdownOptionInterface from 'interfaces/dropdownOption';
 import FormField from 'components/forms/FormField';
 
-const baseClass = 'input-dropdown';
+const baseClass = 'dropdown';
 
 class Dropdown extends Component {
   static propTypes = {
-    options: PropTypes.arrayOf(dropdownOptionInterface).isRequired,
-    onChange: PropTypes.func,
     className: PropTypes.string,
-    error: PropTypes.string,
-    hint: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-    label: PropTypes.string,
-    placeholder: PropTypes.string,
-    value: PropTypes.string,
     clearable: PropTypes.bool,
+    error: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    labelClassName: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    options: PropTypes.arrayOf(dropdownOptionInterface).isRequired,
+    placeholder: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+    value: PropTypes.string,
+    wrapperClassName: PropTypes.string,
   };
 
   static defaultProps = {
@@ -32,22 +35,44 @@ class Dropdown extends Component {
     return onChange(value);
   };
 
+  renderLabel = () => {
+    const { error, label, labelClassName, name } = this.props;
+    const labelWrapperClasses = classnames(
+      `${baseClass}__label`,
+      labelClassName,
+      { [`${baseClass}__label--error`]: error }
+    );
+
+    if (!label) {
+      return false;
+    }
+
+    return (
+      <label
+        className={labelWrapperClasses}
+        htmlFor={name}
+      >
+        {error || label}
+      </label>
+    );
+  }
+
   render () {
     const { handleChange } = this;
-    const { options, className, placeholder, value, clearable } = this.props;
+    const { className, clearable, name, options, placeholder, value, wrapperClassName } = this.props;
 
     const formFieldProps = pick(this.props, ['hint', 'label', 'error', 'name']);
 
     return (
-      <FormField {...formFieldProps} type="dropdown">
+      <FormField {...formFieldProps} type="dropdown" className={wrapperClassName}>
         <Select
           className={`${baseClass}__select ${className}`}
-          name="targets"
-          options={options}
+          clearable={clearable}
+          name={`${name}-select` || 'targets'}
           onChange={handleChange}
+          options={options}
           placeholder={placeholder}
           value={value}
-          clearable={clearable}
         />
       </FormField>
     );
diff --git a/frontend/components/forms/fields/Dropdown/Dropdown.tests.jsx b/frontend/components/forms/fields/Dropdown/Dropdown.tests.jsx
index 170433637c..06a4111ada 100644
--- a/frontend/components/forms/fields/Dropdown/Dropdown.tests.jsx
+++ b/frontend/components/forms/fields/Dropdown/Dropdown.tests.jsx
@@ -1,16 +1,20 @@
 import React from 'react';
-import expect from 'expect';
+import expect, { createSpy, restoreSpies } from 'expect';
 import { mount } from 'enzyme';
 
-import Dropdown from './Dropdown';
+import Dropdown from 'components/forms/fields/Dropdown';
+import { fillInFormInput } from 'test/helpers';
 
 describe('Dropdown - component', () => {
+  afterEach(restoreSpies);
+
   const options = [
     { text: 'Users', value: 'users' },
     { text: 'Groups', value: 'groups' },
   ];
 
   const props = {
+    name: 'my-select',
     options,
   };
 
@@ -20,4 +24,15 @@ describe('Dropdown - component', () => {
 
     expect(dropdownSelect).toExist();
   });
+
+  it('selects a value from dropdown', () => {
+    const onChangeSpy = createSpy();
+    const component = mount(<Dropdown {...props} onChange={onChangeSpy} />);
+    const inputNode = component.find('input');
+
+    fillInFormInput(inputNode, 'users');
+    component.find('.Select-option').first().simulate('mousedown');
+
+    expect(onChangeSpy).toHaveBeenCalledWith('users');
+  });
 });
diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss
index 2b9e24dcf9..ddcf3d84a3 100644
--- a/frontend/components/forms/fields/Dropdown/_styles.scss
+++ b/frontend/components/forms/fields/Dropdown/_styles.scss
@@ -1,3 +1,17 @@
+.dropdown {
+  &__label {
+    display: block;
+    font-size: 16px;
+    font-weight: $light;
+    color: $text-dark;
+    margin-bottom: $pad-xsmall;
+
+    &--error {
+      color: $alert;
+    }
+  }
+}
+
 .Select {
   .Select-control {
     border: 1px solid $accent-medium;
@@ -33,6 +47,18 @@
     }
   }
 
+  &.has-value {
+    > .Select-control,
+    &.is-pseudo-focused > .Select-control {
+      .Select-value {
+        .Select-value-label {
+          color: $text-dark;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+
   &.is-open {
     .Select-control {
       box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.08);
@@ -73,6 +99,14 @@
     color: $accent-medium;
   }
 
+  .Select-placeholder {
+    color: $accent-text;
+    font-size: 16px;
+    line-height: 40px;
+    padding: 0 12px;
+    box-sizing: border-box;
+  }
+
   &.Select--multi {
     .Select-option {
       &.is-disabled {
@@ -87,24 +121,3 @@
     }
   }
 }
-
-.input-dropdown {
-  &__wrapper {
-    margin-bottom: $pad-base;
-  }
-
-  &__hint {
-    font-size: 14px;
-    font-weight: $normal;
-    line-height: 1.57;
-    letter-spacing: 1px;
-    color: $accent-text;
-
-    code {
-      color: $brand-light;
-      background-color: $accent-light;
-      padding: 2px;
-      font-family: 'SourceCodePro', $monospace;
-    }
-  }
-}
diff --git a/frontend/components/forms/fields/InputField/InputField.jsx b/frontend/components/forms/fields/InputField/InputField.jsx
index 9de03c18d4..a521670c78 100644
--- a/frontend/components/forms/fields/InputField/InputField.jsx
+++ b/frontend/components/forms/fields/InputField/InputField.jsx
@@ -10,18 +10,15 @@ class InputField extends Component {
   static propTypes = {
     autofocus: PropTypes.bool,
     error: PropTypes.string,
-    hint: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
     inputClassName: PropTypes.string, // eslint-disable-line react/forbid-prop-types
     inputWrapperClass: PropTypes.string,
     inputOptions: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-    label: PropTypes.string,
-    labelClassName: PropTypes.string,
     name: PropTypes.string,
     onChange: PropTypes.func,
     onFocus: PropTypes.func,
     placeholder: PropTypes.string,
     type: PropTypes.string,
-    value: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   };
 
   static defaultProps = {
diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss
index d350536df5..6a192014bf 100644
--- a/frontend/components/forms/fields/InputField/_styles.scss
+++ b/frontend/components/forms/fields/InputField/_styles.scss
@@ -44,6 +44,7 @@
   &__textarea {
     min-height: 100px;
     max-width: 100%;
+    display: block;
   }
 
   &__label {
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.jsx
index 3edeff6a3b..54d74aa306 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.jsx
@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
-import { isEqual, noop } from 'lodash';
 import classnames from 'classnames';
+import { isEqual, noop } from 'lodash';
 
 import Kolide from 'kolide';
 import targetInterface from 'interfaces/target';
@@ -8,14 +8,21 @@ import { formatSelectedTargetsForApi } from 'kolide/helpers';
 import Input from './SelectTargetsInput';
 import Menu from './SelectTargetsMenu';
 
+const baseClass = 'target-select';
+
 class SelectTargetsDropdown extends Component {
   static propTypes = {
+    disabled: PropTypes.bool,
+    error: PropTypes.string,
+    label: PropTypes.string,
     onFetchTargets: PropTypes.func,
     onSelect: PropTypes.func.isRequired,
     selectedTargets: PropTypes.arrayOf(targetInterface),
+    targetsCount: PropTypes.number,
   };
 
   static defaultProps = {
+    disabled: false,
     onFetchTargets: noop,
   };
 
@@ -119,10 +126,31 @@ class SelectTargetsDropdown extends Component {
       });
   }
 
+  renderLabel = () => {
+    const { error, label, targetsCount } = this.props;
+
+    if (!label) {
+      return false;
+    }
+
+    return (
+      <p className={`${baseClass}__label`}>
+        <span className={`${baseClass}__select-targets`}>{error || label}</span>
+        <span className={`${baseClass}__targets-count`}> {targetsCount} unique {targetsCount === 1 ? 'host' : 'hosts' }</span>
+      </p>
+    );
+  }
+
   render () {
     const { isEmpty, isLoadingTargets, moreInfoTarget, targets } = this.state;
-    const { fetchTargets, onBackToResults, onInputClose, onTargetSelectMoreInfo } = this;
-    const { onSelect, selectedTargets } = this.props;
+    const {
+      fetchTargets,
+      onBackToResults,
+      onInputClose,
+      onTargetSelectMoreInfo,
+      renderLabel,
+    } = this;
+    const { disabled, onSelect, selectedTargets } = this.props;
     const menuRenderer = Menu(onTargetSelectMoreInfo, moreInfoTarget, onBackToResults);
 
     const inputClasses = classnames({
@@ -131,17 +159,20 @@ class SelectTargetsDropdown extends Component {
     });
 
     return (
-      <Input
-        className={inputClasses}
-        isLoading={isLoadingTargets}
-        menuRenderer={menuRenderer}
-        onClose={onInputClose}
-        onTargetSelect={onSelect}
-        onTargetSelectInputChange={fetchTargets}
-        onInputChange={fetchTargets}
-        selectedTargets={selectedTargets}
-        targets={targets}
-      />
+      <div className={baseClass}>
+        {renderLabel()}
+        <Input
+          className={inputClasses}
+          disabled={disabled}
+          isLoading={isLoadingTargets}
+          menuRenderer={menuRenderer}
+          onClose={onInputClose}
+          onTargetSelect={onSelect}
+          onTargetSelectInputChange={fetchTargets}
+          selectedTargets={selectedTargets}
+          targets={targets}
+        />
+      </div>
     );
   }
 }
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsInput/SelectTargetsInput.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsInput/SelectTargetsInput.jsx
index 89609283df..ee91b0bf40 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsInput/SelectTargetsInput.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsInput/SelectTargetsInput.jsx
@@ -8,6 +8,7 @@ import targetInterface from 'interfaces/target';
 class SelectTargetsInput extends Component {
   static propTypes = {
     className: PropTypes.string,
+    disabled: PropTypes.bool,
     isLoading: PropTypes.bool,
     menuRenderer: PropTypes.func,
     onClose: PropTypes.func,
@@ -26,6 +27,7 @@ class SelectTargetsInput extends Component {
   render () {
     const {
       className,
+      disabled,
       isLoading,
       menuRenderer,
       onClose,
@@ -38,6 +40,7 @@ class SelectTargetsInput extends Component {
     return (
       <Select
         className={`${className} target-select`}
+        disabled={disabled}
         isLoading={isLoading}
         filterOptions={this.filterOptions}
         labelKey="display_text"
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
index b011dd57c0..9ef8b36ace 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
@@ -1,4 +1,34 @@
 .target-select {
+  margin-bottom: $pad-small;
+
+  &__label {
+    font-size: 16px;
+    font-weight: $bold;
+    font-style: normal;
+    font-stretch: normal;
+    letter-spacing: -0.5px;
+    color: $text-dark;
+    display: block;
+    margin-bottom: 4px;
+    text-align: right;
+
+    &--error {
+      .target-select__select-targets {
+        color: $alert;
+      }
+    }
+  }
+
+  &__select-targets {
+    float: left;
+  }
+
+  &__targets-count {
+    font-size: $small;
+    margin-left: $xsmall;
+    color: $brand;
+  }
+
   &.Select {
     .Select-control {
       @include transition(border 150ms ease-in-out, box-shadow 150ms ease-in-out);
diff --git a/frontend/components/forms/fields/Slider/Slider.jsx b/frontend/components/forms/fields/Slider/Slider.jsx
index 4442a5f051..baf684d55d 100644
--- a/frontend/components/forms/fields/Slider/Slider.jsx
+++ b/frontend/components/forms/fields/Slider/Slider.jsx
@@ -41,10 +41,6 @@ Slider.propTypes = {
   onChange: PropTypes.func,
   inactiveText: PropTypes.string,
   activeText: PropTypes.string,
-  error: PropTypes.string,
-  hint: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  label: PropTypes.string,
-  name: PropTypes.string,
 };
 
 export default Slider;
diff --git a/frontend/components/forms/packs/EditPackForm/EditPackForm.jsx b/frontend/components/forms/packs/EditPackForm/EditPackForm.jsx
new file mode 100644
index 0000000000..4883e8113d
--- /dev/null
+++ b/frontend/components/forms/packs/EditPackForm/EditPackForm.jsx
@@ -0,0 +1,50 @@
+import React, { Component, PropTypes } from 'react';
+
+import Button from 'components/buttons/Button';
+import Form from 'components/forms/Form';
+import formFieldInterface from 'interfaces/form_field';
+import InputField from 'components/forms/fields/InputField';
+
+const fieldNames = ['description', 'name'];
+
+class EditPackForm extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    fields: PropTypes.shape({
+      description: formFieldInterface.isRequired,
+      name: formFieldInterface.isRequired,
+    }).isRequired,
+    handleSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+  };
+
+  render () {
+    const { className, fields, handleSubmit, onCancel } = this.props;
+
+    return (
+      <form className={className} onSubmit={handleSubmit}>
+        <InputField
+          {...fields.name}
+        />
+        <InputField
+          {...fields.description}
+        />
+        <Button
+          onClick={onCancel}
+          text="CANCEL"
+          type="button"
+          variant="inverse"
+        />
+        <Button
+          text="SAVE"
+          type="submit"
+          variant="brand"
+        />
+      </form>
+    );
+  }
+}
+
+export default Form(EditPackForm, {
+  fields: fieldNames,
+});
diff --git a/frontend/components/forms/packs/EditPackForm/EditPackForm.tests.jsx b/frontend/components/forms/packs/EditPackForm/EditPackForm.tests.jsx
new file mode 100644
index 0000000000..4bc4b9d26d
--- /dev/null
+++ b/frontend/components/forms/packs/EditPackForm/EditPackForm.tests.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import expect, { createSpy, restoreSpies } from 'expect';
+import { mount } from 'enzyme';
+import { noop } from 'lodash';
+
+import EditPackForm from 'components/forms/packs/EditPackForm';
+import {
+  fillInFormInput,
+  itBehavesLikeAFormInputElement,
+} from 'test/helpers';
+import { packStub } from 'test/stubs';
+
+describe('EditPackForm - component', () => {
+  afterEach(restoreSpies);
+
+  describe('form fields', () => {
+    const form = mount(<EditPackForm formData={packStub} handleSubmit={noop} onCancel={noop} />);
+
+    it('has the correct form fields', () => {
+      itBehavesLikeAFormInputElement(form, 'name');
+      itBehavesLikeAFormInputElement(form, 'description');
+    });
+  });
+
+  describe('form submission', () => {
+    it('submits the forms with the form data', () => {
+      const spy = createSpy();
+      const form = mount(<EditPackForm formData={packStub} handleSubmit={spy} onCancel={noop} />);
+
+      const nameInput = form.find({ name: 'name' }).find('input');
+      const descriptionInput = form.find({ name: 'description' }).find('input');
+
+      fillInFormInput(nameInput, 'Updated pack name');
+      fillInFormInput(descriptionInput, 'Updated pack description');
+      form.simulate('submit');
+
+      expect(spy).toHaveBeenCalledWith({
+        ...packStub,
+        name: 'Updated pack name',
+        description: 'Updated pack description',
+      });
+    });
+
+    it('calls the onCancel prop when "CANCEL" is clicked', () => {
+      const spy = createSpy();
+      const form = mount(<EditPackForm formData={packStub} handleSubmit={noop} onCancel={spy} />);
+      const cancelBtn = form.find('Button').findWhere(f => f.prop('text') === 'CANCEL');
+
+      cancelBtn.simulate('click');
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/frontend/components/forms/packs/EditPackForm/index.js b/frontend/components/forms/packs/EditPackForm/index.js
new file mode 100644
index 0000000000..2f224c0e92
--- /dev/null
+++ b/frontend/components/forms/packs/EditPackForm/index.js
@@ -0,0 +1 @@
+export default from './EditPackForm';
diff --git a/frontend/components/forms/packs/PackForm/PackForm.jsx b/frontend/components/forms/packs/PackForm/PackForm.jsx
new file mode 100644
index 0000000000..f0ea3f4ae3
--- /dev/null
+++ b/frontend/components/forms/packs/PackForm/PackForm.jsx
@@ -0,0 +1,79 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+
+import Button from 'components/buttons/Button';
+import Form from 'components/forms/Form';
+import formFieldInterface from 'interfaces/form_field';
+import InputField from 'components/forms/fields/InputField';
+import SelectTargetsDropdown from 'components/forms/fields/SelectTargetsDropdown';
+import validate from './validate';
+
+const fieldNames = ['name', 'description', 'targets'];
+const baseClass = 'pack-form';
+
+class PackForm extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    fields: PropTypes.shape({
+      description: formFieldInterface.isRequired,
+      targets: formFieldInterface.isRequired,
+      name: formFieldInterface.isRequired,
+    }).isRequired,
+    handleSubmit: PropTypes.func,
+    onFetchTargets: PropTypes.func,
+    selectedTargetsCount: PropTypes.number,
+  };
+
+  render () {
+    const {
+      className,
+      fields,
+      handleSubmit,
+      onFetchTargets,
+      selectedTargetsCount,
+    } = this.props;
+
+    const packFormClass = classnames(baseClass, className);
+
+    return (
+      <form className={packFormClass} onSubmit={handleSubmit}>
+        <h1>New Pack</h1>
+        <InputField
+          {...fields.name}
+          placeholder="Query Pack Title"
+          label="Query Pack Title"
+          inputWrapperClass={`${baseClass}__pack-title`}
+        />
+        <InputField
+          {...fields.description}
+          inputWrapperClass={`${baseClass}__pack-description`}
+          label="Query Pack Description"
+          placeholder="Add a description of your query"
+          type="textarea"
+        />
+        <div className={`${baseClass}__pack-targets`}>
+          <SelectTargetsDropdown
+            {...fields.targets}
+            label="Select Pack Targets"
+            onSelect={fields.targets.onChange}
+            onFetchTargets={onFetchTargets}
+            selectedTargets={fields.targets.value}
+            targetsCount={selectedTargetsCount}
+          />
+        </div>
+        <div className={`${baseClass}__pack-buttons`}>
+          <Button
+            text="Save Query pack"
+            type="submit"
+            variant="brand"
+          />
+        </div>
+      </form>
+    );
+  }
+}
+
+export default Form(PackForm, {
+  fields: fieldNames,
+  validate,
+});
diff --git a/frontend/components/forms/packs/PackForm/PackForm.tests.jsx b/frontend/components/forms/packs/PackForm/PackForm.tests.jsx
new file mode 100644
index 0000000000..deaf3b740a
--- /dev/null
+++ b/frontend/components/forms/packs/PackForm/PackForm.tests.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import expect, { createSpy, restoreSpies } from 'expect';
+import { mount } from 'enzyme';
+
+import { fillInFormInput } from 'test/helpers';
+import PackForm from './index';
+
+describe('PackForm - component', () => {
+  afterEach(restoreSpies);
+
+  it('renders the correct components', () => {
+    const form = mount(<PackForm />);
+
+    expect(form.find('InputField').length).toEqual(2);
+    expect(form.find('SelectTargetsDropdown').length).toEqual(1);
+    expect(form.find('Button').length).toEqual(1);
+  });
+
+  it('validates the query pack name field', () => {
+    const handleSubmitSpy = createSpy();
+    const form = mount(<PackForm handleSubmit={handleSubmitSpy} />);
+
+    form.simulate('submit');
+
+    expect(handleSubmitSpy).toNotHaveBeenCalled();
+
+    const formFieldProps = form.find('PackForm').prop('fields');
+
+    expect(formFieldProps.name).toInclude({
+      error: 'Title field must be completed',
+    });
+  });
+
+  it('calls the handleSubmit prop when a valid form is submitted', () => {
+    const handleSubmitSpy = createSpy();
+    const form = mount(<PackForm handleSubmit={handleSubmitSpy} />);
+    const nameField = form.find('InputField').find({ name: 'name' });
+
+    fillInFormInput(nameField, 'Mac OS Attacks');
+
+    form.simulate('submit');
+
+    expect(handleSubmitSpy).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/components/forms/packs/PackForm/_styles.scss b/frontend/components/forms/packs/PackForm/_styles.scss
new file mode 100644
index 0000000000..4cde234378
--- /dev/null
+++ b/frontend/components/forms/packs/PackForm/_styles.scss
@@ -0,0 +1,26 @@
+.pack-form {
+  h1 {
+    font-size: $large;
+    font-weight: $light;
+    letter-spacing: 1.2px;
+    color: $text-medium;
+    margin: 0 0 20px;
+  }
+
+  &__pack-title {
+    .input-field {
+      width: 50%;
+    }
+  }
+
+  &__pack-description {
+    .input-field {
+      width: 75%;
+    }
+  }
+
+  &__pack-buttons {
+    margin: 25px 0;
+    text-align: right;
+  }
+}
diff --git a/frontend/components/forms/packs/PackForm/index.js b/frontend/components/forms/packs/PackForm/index.js
new file mode 100644
index 0000000000..20f1344822
--- /dev/null
+++ b/frontend/components/forms/packs/PackForm/index.js
@@ -0,0 +1 @@
+export default from './PackForm';
diff --git a/frontend/components/forms/packs/PackForm/validate.js b/frontend/components/forms/packs/PackForm/validate.js
new file mode 100644
index 0000000000..bbd5240be7
--- /dev/null
+++ b/frontend/components/forms/packs/PackForm/validate.js
@@ -0,0 +1,15 @@
+import { size } from 'lodash';
+
+const validate = (formData) => {
+  const errors = {};
+
+  if (!formData.name) {
+    errors.name = 'Title field must be completed';
+  }
+
+  const valid = !size(errors);
+
+  return { valid, errors };
+};
+
+export default validate;
diff --git a/frontend/components/forms/queries/QueryForm/QueryForm.jsx b/frontend/components/forms/queries/QueryForm/QueryForm.jsx
index 4075c56a10..79a3454aef 100644
--- a/frontend/components/forms/queries/QueryForm/QueryForm.jsx
+++ b/frontend/components/forms/queries/QueryForm/QueryForm.jsx
@@ -43,7 +43,7 @@ class QueryForm extends Component {
 
       this.state = {
         errors: { ...errors, platform: null },
-        formData: { ...formData, platform },
+        formData: { ...formData, platform: platform.value },
       };
     } else {
       this.state = { errors, formData };
diff --git a/frontend/components/forms/validators/validate_numericality/index.js b/frontend/components/forms/validators/validate_numericality/index.js
new file mode 100644
index 0000000000..bfad39349a
--- /dev/null
+++ b/frontend/components/forms/validators/validate_numericality/index.js
@@ -0,0 +1,3 @@
+export default (actual) => {
+  return !!Number(actual);
+};
diff --git a/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.jsx b/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.jsx
new file mode 100644
index 0000000000..2f48aa2f0e
--- /dev/null
+++ b/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.jsx
@@ -0,0 +1,68 @@
+import React, { Component, PropTypes } from 'react';
+import { noop } from 'lodash';
+
+import Button from 'components/buttons/Button';
+import EditPackForm from 'components/forms/packs/EditPackForm';
+import Icon from 'components/Icon';
+import packInterface from 'interfaces/pack';
+import SelectTargetsDropdown from 'components/forms/fields/SelectTargetsDropdown';
+
+class EditPackFormWrapper extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    handleSubmit: PropTypes.func,
+    isEdit: PropTypes.bool.isRequired,
+    onCancelEditPack: PropTypes.func.isRequired,
+    onEditPack: PropTypes.func.isRequired,
+    onFetchTargets: PropTypes.func,
+    pack: packInterface.isRequired,
+    targetsCount: PropTypes.number,
+  };
+
+  render () {
+    const {
+      className,
+      handleSubmit,
+      isEdit,
+      onCancelEditPack,
+      onEditPack,
+      onFetchTargets,
+      pack,
+      targetsCount,
+    } = this.props;
+
+    if (isEdit) {
+      return (
+        <EditPackForm
+          className={className}
+          formData={pack}
+          handleSubmit={handleSubmit}
+          onCancel={onCancelEditPack}
+        />
+      );
+    }
+
+    return (
+      <div className={className}>
+        <Button
+          onClick={onEditPack}
+          text="EDIT"
+          type="button"
+          variant="brand"
+        />
+        <h1><Icon name="packs" /> {pack.name}</h1>
+        <p>{pack.description}</p>
+        <SelectTargetsDropdown
+          label="select pack targets"
+          name="selected-pack-targets"
+          onFetchTargets={onFetchTargets}
+          onSelect={noop}
+          targetsCount={targetsCount}
+          disabled
+        />
+      </div>
+    );
+  }
+}
+
+export default EditPackFormWrapper;
diff --git a/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.tests.jsx b/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.tests.jsx
new file mode 100644
index 0000000000..2e342bd694
--- /dev/null
+++ b/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.tests.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import expect, { createSpy, restoreSpies } from 'expect';
+import { mount } from 'enzyme';
+import { noop } from 'lodash';
+
+import EditPackFormWrapper from 'components/packs/EditPackFormWrapper';
+import { packStub } from 'test/stubs';
+
+describe('EditPackFormWrapper - component', () => {
+  afterEach(restoreSpies);
+
+  it('does not render the EditPackForm by default', () => {
+    const component = mount(
+      <EditPackFormWrapper
+        isEdit={false}
+        onCancelEditPack={noop}
+        onEditPack={noop}
+        pack={packStub}
+      />
+    );
+
+    expect(component.find('EditPackForm').length).toEqual(0);
+  });
+
+  it('renders the EditPackForm when isEdit is true', () => {
+    const component = mount(
+      <EditPackFormWrapper
+        isEdit
+        onCancelEditPack={noop}
+        onEditPack={noop}
+        pack={packStub}
+      />
+    );
+
+    expect(component.find('EditPackForm').length).toEqual(1);
+  });
+
+  it('calls onEditPack when EDIT is clicked', () => {
+    const spy = createSpy();
+    const component = mount(
+      <EditPackFormWrapper
+        onCancelEditPack={noop}
+        onEditPack={spy}
+        pack={packStub}
+      />
+    );
+    const editBtn = component.find('Button').findWhere(b => b.prop('text') === 'EDIT');
+
+    editBtn.simulate('click');
+
+    expect(spy).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/components/packs/EditPackFormWrapper/index.js b/frontend/components/packs/EditPackFormWrapper/index.js
new file mode 100644
index 0000000000..edfa6e3beb
--- /dev/null
+++ b/frontend/components/packs/EditPackFormWrapper/index.js
@@ -0,0 +1 @@
+export default from './EditPackFormWrapper';
diff --git a/frontend/components/packs/PackPageWrapper/PackPageWrapper.jsx b/frontend/components/packs/PackPageWrapper/PackPageWrapper.jsx
index 644c4f6e60..fbb9693fd8 100644
--- a/frontend/components/packs/PackPageWrapper/PackPageWrapper.jsx
+++ b/frontend/components/packs/PackPageWrapper/PackPageWrapper.jsx
@@ -1,18 +1,14 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 
-class PackPageWrapper extends Component {
+class PackPageWrapper extends React.Component {
   static propTypes = {
-    children: PropTypes.node,
+    children: React.PropTypes.node,
   };
 
   render () {
     const { children } = this.props;
 
-    return (
-      <div>
-        {children}
-      </div>
-    );
+    return (children || null);
   }
 }
 
diff --git a/frontend/components/queries/QueriesList/QueriesList.jsx b/frontend/components/queries/QueriesList/QueriesList.jsx
new file mode 100644
index 0000000000..5394a770d3
--- /dev/null
+++ b/frontend/components/queries/QueriesList/QueriesList.jsx
@@ -0,0 +1,128 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { includes, size } from 'lodash';
+
+import queryInterface from 'interfaces/query';
+import Icon from 'components/Icon';
+import QueriesListItem from 'components/queries/QueriesList/QueriesListItem';
+import Checkbox from 'components/forms/fields/Checkbox';
+
+const baseClass = 'queries-list';
+
+class QueriesList extends Component {
+  static propTypes = {
+    isScheduledQueriesAvailable: PropTypes.bool,
+    onSelectAllQueries: PropTypes.func.isRequired,
+    onSelectQuery: PropTypes.func.isRequired,
+    scheduledQueries: PropTypes.arrayOf(queryInterface).isRequired,
+    selectedScheduledQueryIDs: PropTypes.arrayOf(PropTypes.number).isRequired,
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.state = { allQueriesSelected: false };
+  }
+
+  isChecked = (scheduledQuery) => {
+    const { selectedScheduledQueryIDs } = this.props;
+    const { allQueriesSelected } = this.state;
+
+    if (allQueriesSelected) {
+      return true;
+    }
+
+    return includes(selectedScheduledQueryIDs, scheduledQuery.id);
+  }
+
+  handleSelectAllQueries = (shouldSelectAllQueries) => {
+    const { onSelectAllQueries } = this.props;
+    const { allQueriesSelected } = this.state;
+
+    this.setState({ allQueriesSelected: !allQueriesSelected });
+
+    return onSelectAllQueries(shouldSelectAllQueries);
+  }
+
+  renderHelpText = () => {
+    const { isScheduledQueriesAvailable, scheduledQueries } = this.props;
+
+    if (scheduledQueries.length) {
+      return false;
+    }
+
+    if (isScheduledQueriesAvailable) {
+      return (
+        <tr>
+          <td colSpan={6}>
+            <p>No queries matched your search criteria.</p>
+          </td>
+        </tr>
+      );
+    }
+
+    return (
+      <tr>
+        <td colSpan={6}>
+          <div className={`${baseClass}__first-query`}>
+            <h1>First let&apos;s <span>add a query</span>.</h1>
+            <h2>Then we&apos;ll set the following:</h2>
+            <p><strong>interval:</strong> the amount of time the query waits before running</p>
+            <p><strong>minimum <Icon name="osquery" /> version:</strong> the minimum required <strong>osqueryd</strong> version installed on a host</p>
+            <p><strong>logging type:</strong></p>
+            <ul>
+              <li><strong><Icon name="plus-minus" /> differential:</strong> show only what&apos;s different from last run</li>
+              <li><strong><Icon name="camera" /> snapshot:</strong> show everything in its current state</li>
+            </ul>
+          </div>
+        </td>
+      </tr>
+    );
+  }
+
+  render () {
+    const { onSelectQuery, scheduledQueries, selectedScheduledQueryIDs } = this.props;
+    const { allQueriesSelected } = this.state;
+    const { renderHelpText, handleSelectAllQueries } = this;
+
+    const wrapperClassName = classnames(`${baseClass}__table`, {
+      [`${baseClass}__table--query-selected`]: size(selectedScheduledQueryIDs),
+    });
+
+    return (
+      <div className={baseClass}>
+        <table className={wrapperClassName}>
+          <thead>
+            <tr>
+              <th><Checkbox
+                name="select-all-queries"
+                onChange={handleSelectAllQueries}
+                value={allQueriesSelected}
+              /></th>
+              <th>Query Name</th>
+              <th>Interval [s]</th>
+              <th>Platform</th>
+              <th><Icon name="osquery" /> Ver.</th>
+              <th>Logging</th>
+            </tr>
+          </thead>
+          <tbody>
+            {renderHelpText()}
+            {!!scheduledQueries.length && scheduledQueries.map((scheduledQuery) => {
+              return (
+                <QueriesListItem
+                  checked={this.isChecked(scheduledQuery)}
+                  key={`scheduled-query-${scheduledQuery.id}`}
+                  onSelect={onSelectQuery}
+                  scheduledQuery={scheduledQuery}
+                />
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default QueriesList;
diff --git a/frontend/components/queries/QueriesList/QueriesList.tests.jsx b/frontend/components/queries/QueriesList/QueriesList.tests.jsx
new file mode 100644
index 0000000000..a3f5323d6e
--- /dev/null
+++ b/frontend/components/queries/QueriesList/QueriesList.tests.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import expect from 'expect';
+import { mount } from 'enzyme';
+import { noop } from 'lodash';
+
+import { scheduledQueryStub } from 'test/stubs';
+import QueriesList from './index';
+
+const scheduledQueries = [
+  { ...scheduledQueryStub, id: 1 },
+  { ...scheduledQueryStub, id: 2 },
+];
+
+describe('QueriesList - component', () => {
+  it('renders a QueriesListItem for each scheduled query', () => {
+    const component = mount(
+      <QueriesList
+        allQueries={[]}
+        onHidePackForm={noop}
+        onSelectQuery={noop}
+        scheduledQueries={scheduledQueries}
+        selectedScheduledQueryIDs={[]}
+      />
+    );
+
+    expect(component.find('QueriesListItem').length).toEqual(2);
+  });
+
+  it('renders "No queries found" help text when scheduled queries are available but the scheduled queries are filtered out', () => {
+    const component = mount(
+      <QueriesList
+        allQueries={[]}
+        isScheduledQueriesAvailable
+        onHidePackForm={noop}
+        onSelectQuery={noop}
+        scheduledQueries={[]}
+        selectedScheduledQueryIDs={[]}
+      />
+    );
+
+    expect(component.text()).toInclude('No queries matched your search criteria');
+  });
+
+  it('renders initial help text when no queries have been scheduled yet', () => {
+    const component = mount(
+      <QueriesList
+        allQueries={[]}
+        onHidePackForm={noop}
+        onSelectQuery={noop}
+        scheduledQueries={[]}
+        selectedScheduledQueryIDs={[]}
+      />
+    );
+
+    expect(component.text()).toInclude("First let's add a query");
+  });
+});
diff --git a/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.jsx b/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.jsx
new file mode 100644
index 0000000000..8534d965f3
--- /dev/null
+++ b/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.jsx
@@ -0,0 +1,72 @@
+import React, { Component, PropTypes } from 'react';
+
+import Checkbox from 'components/forms/fields/Checkbox';
+import Icon from 'components/Icon';
+import { isEqual } from 'lodash';
+import { platformIconClass } from 'utilities/icon_class';
+import scheduledQueryInterface from 'interfaces/scheduled_query';
+
+class QueriesListItem extends Component {
+  static propTypes = {
+    checked: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onSelect: PropTypes.func.isRequired,
+    scheduledQuery: scheduledQueryInterface.isRequired,
+  };
+
+  shouldComponentUpdate (nextProps) {
+    if (isEqual(nextProps, this.props)) {
+      return false;
+    }
+
+    return true;
+  }
+
+  onCheck = (value) => {
+    const { onSelect, scheduledQuery } = this.props;
+
+    return onSelect(value, scheduledQuery.id);
+  }
+
+  loggingTypeString = () => {
+    const { scheduledQuery: { snapshot, removed } } = this.props;
+
+    if (snapshot) {
+      return 'camera';
+    }
+
+    if (removed) {
+      return 'bold-plus';
+    }
+
+    return 'plus-minus';
+  }
+
+  render () {
+    const { checked, disabled, scheduledQuery } = this.props;
+    const { onCheck } = this;
+    const { id, name, interval, platform, version } = scheduledQuery;
+    const { loggingTypeString } = this;
+
+    return (
+      <tr>
+        <td>
+          <Checkbox
+            disabled={disabled}
+            name={`scheduled-query-checkbox-${id}`}
+            onChange={onCheck}
+            value={checked}
+          />
+        </td>
+        <td>{name}</td>
+        <td>{interval}</td>
+        <td><Icon name={platformIconClass(platform)} /></td>
+        <td>{version}</td>
+        <td><Icon name={loggingTypeString()} /></td>
+      </tr>
+    );
+  }
+}
+
+export default QueriesListItem;
+
diff --git a/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.tests.jsx b/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.tests.jsx
new file mode 100644
index 0000000000..132b834b75
--- /dev/null
+++ b/frontend/components/queries/QueriesList/QueriesListItem/QueriesListItem.tests.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import expect, { createSpy, restoreSpies } from 'expect';
+import { mount } from 'enzyme';
+import { noop } from 'lodash';
+
+import { scheduledQueryStub } from 'test/stubs';
+import QueriesListItem from './index';
+
+describe('QueriesListItem - component', () => {
+  afterEach(restoreSpies);
+
+  it('renders the scheduled query data', () => {
+    const component = mount(<QueriesListItem checked={false} onSelect={noop} scheduledQuery={scheduledQueryStub} />);
+    expect(component.text()).toInclude(scheduledQueryStub.name);
+    expect(component.text()).toInclude(scheduledQueryStub.interval);
+    expect(component.find('.kolidecon-apple').length).toEqual(1);
+  });
+
+  it('renders a Checkbox component', () => {
+    const component = mount(<QueriesListItem checked={false} onSelect={noop} scheduledQuery={scheduledQueryStub} />);
+    expect(component.find('Checkbox').length).toEqual(1);
+  });
+
+  it('calls the onSelect prop when a checkbox is changed', () => {
+    const onSelectSpy = createSpy();
+    const component = mount(<QueriesListItem checked={false} onSelect={onSelectSpy} scheduledQuery={scheduledQueryStub} />);
+    const checkbox = component.find('Checkbox').first();
+
+    checkbox.find('input').simulate('change');
+
+    expect(onSelectSpy).toHaveBeenCalledWith(true, scheduledQueryStub.id);
+  });
+});
diff --git a/frontend/components/queries/QueriesList/QueriesListItem/index.js b/frontend/components/queries/QueriesList/QueriesListItem/index.js
new file mode 100644
index 0000000000..6972291906
--- /dev/null
+++ b/frontend/components/queries/QueriesList/QueriesListItem/index.js
@@ -0,0 +1 @@
+export default from './QueriesListItem';
diff --git a/frontend/components/queries/QueriesList/_styles.scss b/frontend/components/queries/QueriesList/_styles.scss
new file mode 100644
index 0000000000..6138e66713
--- /dev/null
+++ b/frontend/components/queries/QueriesList/_styles.scss
@@ -0,0 +1,164 @@
+.queries-list {
+  background-color: $white;
+  border: 1px solid $accent-dark;
+  border-radius: 3px;
+  box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.12);
+  box-sizing: border-box;
+
+  &__table {
+    border-collapse: collapse;
+    width: 100%;
+    min-height: 132px;
+    border-radius: 3px;
+
+    thead {
+      height: 50px;
+      background-color: $bg-medium;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
+
+      th {
+        font-size: 14px;
+        font-weight: $bold;
+        letter-spacing: -0.5px;
+        text-align: left;
+        color: $link;
+        padding: 15px 10px;
+
+        .form-field {
+          margin: 0;
+        }
+
+        &:nth-child(1) {
+          border-top-left-radius: 3px;
+          width: 20px;
+        }
+
+        &:nth-child(2) {
+          width: calc(46% - 20px);
+        }
+
+        &:nth-child(3) {
+          width: 18%;
+        }
+
+        &:nth-child(4) {
+          width: 18%;
+          text-align: center;
+        }
+
+        &:nth-child(5) {
+          width: 18%;
+          text-align: center;
+        }
+
+        &:last-child {
+          border-top-right-radius: 3px;
+          text-align: center;
+        }
+      }
+    }
+
+    tbody {
+      td {
+        padding: 0 10px;
+        margin: 0;
+        border-bottom: 1px solid $accent-light;
+
+        .form-field {
+          margin: 0;
+        }
+
+        &:nth-child(1) {
+          text-align: center;
+          vertical-align: middle;
+        }
+
+        &:nth-child(2) {
+          font-size: 14px;
+          font-weight: $bold;
+          line-height: 2.71;
+          letter-spacing: -0.5px;
+          text-align: left;
+          color: $text-ultradark;
+        }
+
+        &:nth-child(3) {
+          font-size: 14px;
+          font-weight: $normal;
+          line-height: 2.71;
+          letter-spacing: -0.5px;
+          color: $text-ultradark;
+        }
+
+        &:nth-child(4) {
+          color: $text-light;
+          text-align: center;
+          font-size: 14px;
+
+          .kolidecon {
+            font-size: 18px;
+          }
+        }
+
+        &:nth-child(5) {
+          font-size: 14px;
+          font-weight: $normal;
+          line-height: 2.71;
+          letter-spacing: -0.5px;
+          text-align: center;
+          color: $text-ultradark;
+        }
+
+        &:nth-child(6) {
+          text-align: center;
+          font-size: 18px;
+          color: $text-ultradark;
+        }
+      }
+    }
+  }
+
+  &__first-query {
+    padding: 30px 30px 100px;
+
+    h1 {
+      color: $text-dark;
+      font-size: 24px;
+      font-weight: $light;
+      line-height: 1.96;
+      letter-spacing: -0.5px;
+      margin: 0;
+    }
+
+    h2 {
+      font-size: 20px;
+      line-height: 2;
+      letter-spacing: -0.4px;
+      color: $text-dark;
+      font-weight: $light;
+      margin: 0;
+    }
+
+    p {
+      font-size: 16px;
+      font-weight: $normal;
+      line-height: 2.5;
+      color: $text-dark;
+      margin: 0;
+    }
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      margin-left: 25px;
+      font-size: 16px;
+      font-weight: $normal;
+      line-height: 2.5;
+      color: $text-dark;
+    }
+  }
+}
diff --git a/frontend/components/queries/QueriesList/index.js b/frontend/components/queries/QueriesList/index.js
new file mode 100644
index 0000000000..9b727c41d6
--- /dev/null
+++ b/frontend/components/queries/QueriesList/index.js
@@ -0,0 +1 @@
+export default from './QueriesList';
diff --git a/frontend/components/queries/QueriesListWrapper/QueriesListWrapper.jsx b/frontend/components/queries/QueriesListWrapper/QueriesListWrapper.jsx
new file mode 100644
index 0000000000..8ffba44770
--- /dev/null
+++ b/frontend/components/queries/QueriesListWrapper/QueriesListWrapper.jsx
@@ -0,0 +1,150 @@
+import React, { Component, PropTypes } from 'react';
+import { pull } from 'lodash';
+
+import Button from 'components/buttons/Button';
+import helpers from 'components/queries/QueriesListWrapper/helpers';
+import InputField from 'components/forms/fields/InputField';
+import QueriesList from 'components/queries/QueriesList';
+import queryInterface from 'interfaces/query';
+
+const baseClass = 'queries-list-wrapper';
+
+class QueriesListWrapper extends Component {
+  static propTypes = {
+    onRemoveScheduledQueries: PropTypes.func,
+    onScheduledQueryFormSubmit: PropTypes.func,
+    scheduledQueries: PropTypes.arrayOf(queryInterface),
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      querySearchText: '',
+      selectAll: false,
+      selectedScheduledQueryIDs: [],
+    };
+  }
+
+  onRemoveScheduledQueries = (evt) => {
+    evt.preventDefault();
+
+    const { onRemoveScheduledQueries: handleRemoveScheduledQueries } = this.props;
+    const { selectedScheduledQueryIDs } = this.state;
+
+    this.setState({ selectedScheduledQueryIDs: [] });
+
+    return handleRemoveScheduledQueries(selectedScheduledQueryIDs);
+  }
+
+  onSelectAllQueries = (shouldSelectAll) => {
+    if (shouldSelectAll) {
+      const allScheduledQueries = this.getQueries();
+      const selectedScheduledQueryIDs = allScheduledQueries.map(sq => sq.id);
+
+      this.setState({ selectedScheduledQueryIDs });
+
+      return false;
+    }
+
+    this.setState({ selectedScheduledQueryIDs: [] });
+
+    return false;
+  }
+
+  onSelectQuery = (shouldAddQuery, scheduledQueryID) => {
+    const { selectedScheduledQueryIDs } = this.state;
+    const newSelectedScheduledQueryIDs = shouldAddQuery ?
+      selectedScheduledQueryIDs.concat(scheduledQueryID) :
+      pull(selectedScheduledQueryIDs, scheduledQueryID);
+
+    this.setState({ selectedScheduledQueryIDs: newSelectedScheduledQueryIDs });
+
+    return false;
+  }
+
+  onUpdateQuerySearchText = (querySearchText) => {
+    this.setState({ querySearchText });
+  }
+
+  getQueries = () => {
+    const { scheduledQueries } = this.props;
+    const { querySearchText } = this.state;
+
+    return helpers.filterQueries(scheduledQueries, querySearchText);
+  }
+
+  renderButton = () => {
+    const { onRemoveScheduledQueries } = this;
+    const { selectedScheduledQueryIDs } = this.state;
+
+    const scheduledQueryCount = selectedScheduledQueryIDs.length;
+
+    if (scheduledQueryCount) {
+      const queryText = scheduledQueryCount === 1 ? 'Query' : 'Queries';
+
+      return (
+        <Button
+          className={`${baseClass}__query-btn`}
+          onClick={onRemoveScheduledQueries}
+          text={`Remove ${queryText}`}
+          variant="alert"
+        />
+      );
+    }
+
+    return false;
+  }
+
+  renderQueryCount = () => {
+    const { scheduledQueries } = this.props;
+    const queryCount = scheduledQueries.length;
+    const queryText = queryCount === 1 ? 'Query' : 'Queries';
+
+    return <h1 className={`${baseClass}__query-count`}><span>{queryCount}</span> {queryText}</h1>;
+  }
+
+  renderQueriesList = () => {
+    const { getQueries, onHidePackForm, onSelectAllQueries, onSelectQuery } = this;
+    const { onScheduledQueryFormSubmit, scheduledQueries } = this.props;
+    const { selectedScheduledQueryIDs } = this.state;
+
+    return (
+      <div className={`${baseClass}__queries-list-wrapper`}>
+        <QueriesList
+          onHidePackForm={onHidePackForm}
+          onScheduledQueryFormSubmit={onScheduledQueryFormSubmit}
+          onSelectAllQueries={onSelectAllQueries}
+          onSelectQuery={onSelectQuery}
+          scheduledQueries={getQueries()}
+          selectedScheduledQueryIDs={selectedScheduledQueryIDs}
+          isScheduledQueriesAvailable={!!scheduledQueries.length}
+        />
+      </div>
+    );
+  }
+
+  render () {
+    const { onUpdateQuerySearchText, renderButton, renderQueryCount, renderQueriesList } = this;
+    const { querySearchText } = this.state;
+
+    return (
+      <div className={`${baseClass} body-wrap`}>
+        {renderQueryCount()}
+        <div className={`${baseClass}__query-list-action`}>
+          <InputField
+            inputWrapperClass={`${baseClass}__search-queries-input`}
+            name="search-queries"
+            onChange={onUpdateQuerySearchText}
+            placeholder="Search Queries"
+            value={querySearchText}
+          />
+          {renderButton()}
+        </div>
+        {renderQueriesList()}
+      </div>
+    );
+  }
+}
+
+export default QueriesListWrapper;
diff --git a/frontend/components/queries/QueriesListWrapper/QueriesListWrapper.tests.jsx b/frontend/components/queries/QueriesListWrapper/QueriesListWrapper.tests.jsx
new file mode 100644
index 0000000000..d683f81576
--- /dev/null
+++ b/frontend/components/queries/QueriesListWrapper/QueriesListWrapper.tests.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import expect, { createSpy, restoreSpies } from 'expect';
+import { mount } from 'enzyme';
+
+import { queryStub, scheduledQueryStub } from 'test/stubs';
+import { fillInFormInput } from 'test/helpers';
+import QueriesListWrapper from './index';
+
+const allQueries = [queryStub];
+const scheduledQueries = [
+  scheduledQueryStub,
+  { ...scheduledQueryStub, id: 100, name: 'mac hosts' },
+];
+
+describe('QueriesListWrapper - component', () => {
+  afterEach(restoreSpies);
+
+  it('renders the "Remove Query" button when queries have been selected', () => {
+    const component = mount(
+      <QueriesListWrapper
+        allQueries={allQueries}
+        scheduledQueries={scheduledQueries}
+      />
+    );
+
+    component.find('Checkbox').last().find('input').simulate('change');
+
+    const addQueryBtn = component.find('Button').findWhere(b => b.prop('text') === 'Add New Query');
+    const removeQueryBtn = component.find('Button').findWhere(b => b.prop('text') === 'Remove Query');
+
+    expect(addQueryBtn.length).toEqual(0);
+    expect(removeQueryBtn.length).toEqual(1);
+  });
+
+  it('calls the onRemoveScheduledQueries prop', () => {
+    const spy = createSpy();
+    const component = mount(
+      <QueriesListWrapper
+        allQueries={allQueries}
+        onRemoveScheduledQueries={spy}
+        scheduledQueries={[scheduledQueryStub]}
+      />
+    );
+
+    component.find('Checkbox').last().find('input').simulate('change');
+
+    const removeQueryBtn = component.find('Button').findWhere(b => b.prop('text') === 'Remove Query');
+
+    removeQueryBtn.simulate('click');
+
+    expect(spy).toHaveBeenCalledWith([scheduledQueryStub.id]);
+  });
+
+  it('filters queries', () => {
+    const component = mount(
+      <QueriesListWrapper
+        allQueries={allQueries}
+        scheduledQueries={scheduledQueries}
+      />
+    );
+
+    const searchQueriesInput = component.find({ name: 'search-queries' });
+    const QueriesList = component.find('QueriesList');
+
+    expect(QueriesList.prop('scheduledQueries')).toEqual(scheduledQueries);
+
+    fillInFormInput(searchQueriesInput, 'something that does not match');
+
+    expect(QueriesList.prop('scheduledQueries')).toEqual([]);
+  });
+
+  it('allows selecting all scheduled queries at once', () => {
+    const allScheduledQueryIDs = scheduledQueries.map(sq => sq.id);
+    const component = mount(
+      <QueriesListWrapper
+        allQueries={allQueries}
+        scheduledQueries={scheduledQueries}
+      />
+    );
+    const selectAllCheckbox = component.find({ name: 'select-all-queries' });
+
+    selectAllCheckbox.simulate('change');
+
+    expect(component.state('selectedScheduledQueryIDs')).toEqual(allScheduledQueryIDs);
+
+    selectAllCheckbox.simulate('change');
+
+    expect(component.state('selectedScheduledQueryIDs')).toEqual([]);
+  });
+});
diff --git a/frontend/components/queries/QueriesListWrapper/_styles.scss b/frontend/components/queries/QueriesListWrapper/_styles.scss
new file mode 100644
index 0000000000..5442c0ad15
--- /dev/null
+++ b/frontend/components/queries/QueriesListWrapper/_styles.scss
@@ -0,0 +1,44 @@
+.queries-list-wrapper {
+  padding: $pad-small $pad-base;
+
+  &__query-count {
+    font-size: 20px;
+    font-weight: $light;
+    letter-spacing: -0.5px;
+    text-align: left;
+    color: $text-dark;
+
+    span {
+      background-color: $brand;
+      border-radius: 14px;
+      color: $white;
+      display: inline-block;
+      line-height: 26px;
+      height: 26px;
+      text-align: center;
+      width: 44px;
+      font-size: 15px;
+      font-weight: $bold;
+      letter-spacing: -0.5px;
+    }
+  }
+
+  &__queries-list-wrapper {
+    margin-top: $pad-base;
+    clear: both;
+  }
+
+  &__search-queries-input {
+    float: left;
+    display: inline-block;
+    width: '400px';
+  }
+
+  &__query-btn {
+    float: right;
+  }
+
+  &__search-queries {
+    float: left;
+  }
+}
diff --git a/frontend/components/queries/QueriesListWrapper/helpers.js b/frontend/components/queries/QueriesListWrapper/helpers.js
new file mode 100644
index 0000000000..373c045948
--- /dev/null
+++ b/frontend/components/queries/QueriesListWrapper/helpers.js
@@ -0,0 +1,13 @@
+import { filter } from 'lodash';
+
+const filterQueries = (queries, filterText) => {
+  const regex = new RegExp(filterText.toLowerCase());
+
+  return filter(queries, (query) => {
+    const lowerQueryName = query.name.toLowerCase();
+
+    return regex.test(lowerQueryName);
+  });
+};
+
+export default { filterQueries };
diff --git a/frontend/components/queries/QueriesListWrapper/helpers.tests.js b/frontend/components/queries/QueriesListWrapper/helpers.tests.js
new file mode 100644
index 0000000000..804d71998a
--- /dev/null
+++ b/frontend/components/queries/QueriesListWrapper/helpers.tests.js
@@ -0,0 +1,28 @@
+import expect from 'expect';
+
+import helpers from './helpers';
+
+describe('QueriesListWrapper - helpers', () => {
+  describe('#filterQueries', () => {
+    const { filterQueries } = helpers;
+
+    it('returns an empty array when given an empty array', () => {
+      const queries = [];
+
+      expect(filterQueries(queries, 'text')).toEqual(queries);
+    });
+
+    it('returns an array of queries that have a matching query name', () => {
+      const q1 = { name: 'first query' };
+      const q2 = { name: 'second query' };
+      const q3 = { name: 'third query' };
+      const queries = [q1, q2, q3];
+
+      expect(filterQueries(queries, '')).toEqual(queries);
+      expect(filterQueries(queries, 'query')).toEqual(queries);
+      expect(filterQueries(queries, 'first')).toEqual([q1]);
+      expect(filterQueries(queries, 'second')).toEqual([q2]);
+      expect(filterQueries(queries, 'third')).toEqual([q3]);
+    });
+  });
+});
diff --git a/frontend/components/queries/QueriesListWrapper/index.js b/frontend/components/queries/QueriesListWrapper/index.js
new file mode 100644
index 0000000000..1e77c309df
--- /dev/null
+++ b/frontend/components/queries/QueriesListWrapper/index.js
@@ -0,0 +1 @@
+export default from './QueriesListWrapper';
diff --git a/frontend/components/queries/QueryComposer/QueryComposer.jsx b/frontend/components/queries/QueryComposer/QueryComposer.jsx
index cb630e8f99..ca619e036f 100644
--- a/frontend/components/queries/QueryComposer/QueryComposer.jsx
+++ b/frontend/components/queries/QueryComposer/QueryComposer.jsx
@@ -97,14 +97,12 @@ class QueryComposer extends Component {
 
     return (
       <div>
-        <p className={`${baseClass}__target-label`}>
-          <span className={`${baseClass}__select-targets`}>Select Targets</span>
-          <span className={`${baseClass}__targets-count`}> {targetsCount} unique {targetsCount === 1 ? 'host' : 'hosts' }</span>
-        </p>
         <SelectTargetsDropdown
           onFetchTargets={onFetchTargets}
           onSelect={onTargetSelect}
           selectedTargets={selectedTargets}
+          targetsCount={targetsCount}
+          label="Select Targets"
         />
       </div>
     );
diff --git a/frontend/components/queries/QueryComposer/QueryComposer.tests.jsx b/frontend/components/queries/QueryComposer/QueryComposer.tests.jsx
index 6c5d28476a..db4220c7f4 100644
--- a/frontend/components/queries/QueryComposer/QueryComposer.tests.jsx
+++ b/frontend/components/queries/QueryComposer/QueryComposer.tests.jsx
@@ -16,6 +16,7 @@ describe('QueryComposer - component', () => {
     const component = mount(
       <QueryComposer
         onOsqueryTableSelect={noop}
+        onTargetSelect={noop}
         onTextEditorInputChange={noop}
         selectedTargets={[]}
         queryText="Hello world"
@@ -35,6 +36,7 @@ describe('QueryComposer - component', () => {
     const component = mount(
       <QueryComposer
         onOsqueryTableSelect={noop}
+        onTargetSelect={noop}
         onTextEditorInputChange={noop}
         query={query}
         selectedTargets={[]}
@@ -56,6 +58,7 @@ describe('QueryComposer - component', () => {
     const component = mount(
       <QueryComposer
         onSave={onSaveQueryFormSubmitSpy}
+        onTargetSelect={noop}
         selectedTargets={selectedTargets}
         queryText={queryText}
       />
@@ -81,6 +84,7 @@ describe('QueryComposer - component', () => {
     const component = mount(
       <QueryComposer
         onRunQuery={onRunQuerySpy}
+        onTargetSelect={noop}
         selectedTargets={selectedTargets}
         queryText={query}
       />
@@ -99,6 +103,7 @@ describe('QueryComposer - component', () => {
     };
     const component = mount(
       <QueryComposer
+        onTargetSelect={noop}
         onUpdate={onSaveChangesSpy}
         query={query}
         queryText={query.query}
diff --git a/frontend/components/queries/QueryComposer/_styles.scss b/frontend/components/queries/QueryComposer/_styles.scss
index 8f2947e4b3..a93f57fa32 100644
--- a/frontend/components/queries/QueryComposer/_styles.scss
+++ b/frontend/components/queries/QueryComposer/_styles.scss
@@ -8,28 +8,6 @@
     margin-right: $xsmall;
   }
 
-  &__select-targets {
-    float: left;
-  }
-
-  &__target-label {
-    font-size: 16px;
-    font-weight: $bold;
-    font-style: normal;
-    font-stretch: normal;
-    letter-spacing: -0.5px;
-    color: $text-dark;
-    display: block;
-    margin-bottom: 4px;
-    text-align: right;
-  }
-
-  &__targets-count {
-    font-size: $small;
-    margin-left: $xsmall;
-    color: $brand;
-  }
-
   &__text-editor-wrapper {
     margin: $base 0;
   }
diff --git a/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx b/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx
index beade3e1b8..f8d6926b68 100644
--- a/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx
+++ b/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx
@@ -3,59 +3,49 @@ import React from 'react';
 import Icon from 'components/Icon';
 import SecondarySidePanelContainer from '../SecondarySidePanelContainer';
 
-const classBlock = 'pack-info-side-panel';
+const baseClass = 'pack-info-side-panel';
 
-class PackInfoSidePanel extends React.Component {
-  render () {
-    return (
-      <SecondarySidePanelContainer className={classBlock}>
-        <div>
-          <h3>
-            <Icon name="packs" />
-            &nbsp;
-            What&apos;s a Query Pack?
-          </h3>
-        </div>
-        <hr />
-        <p>
-          Osquery supports grouping of queries (called <b>query packs</b>)
-          which run on a scheduled basis and log the results to a configurable
-          destination.
-        </p>
-        <p>
-          Query Packs are useful for monitoring specific attributes of hosts
-          over time and can be used for alerting and incident response
-          investigations. By default, queries added to packs run every hour
-          (<b>interval = 3600s</b>).
-        </p>
-        <p>
-          Queries can be run in two modes:
-        </p>
-        <p>
-          <b>-Differential:</b>
-        </p>
-        <p>
-          Only record data that has changed.
-        </p>
-        <p>
-          <b>-Snapshot:</b>
-        </p>
-        <p>
-          Record full query result each time.
-        </p>
-        <p>
-          Packs are distributed to specified <b>targets</b>. Targets may be
-          <b>individual hosts</b> or groups of hosts called <b>labels.</b>
-        </p>
-        <p>
-          Learn more about Query Packs in the
-          <a href="https://kolide.co">
-              documentation
-          </a>.
-        </p>
-      </SecondarySidePanelContainer>
-    );
-  }
-}
+const PackInfoSidePanel = () => {
+  return (
+    <SecondarySidePanelContainer className={baseClass}>
+      <h3 className={`${baseClass}__title`}>
+        <Icon name="packs" />
+        &nbsp;
+        What&apos;s a Query Pack?
+      </h3>
+      <p>
+        Osquery supports grouping of queries (called <b>query packs</b>)
+        which run on a scheduled basis and log the results to a configurable
+        destination.
+      </p>
+      <p>
+        Query Packs are useful for monitoring specific attributes of hosts
+        over time and can be used for alerting and incident response
+        investigations. By default, queries added to packs run every hour
+        (<b>interval = 3600s</b>).
+      </p>
+
+      <p>
+        Queries can be run in two modes:
+      </p>
+
+      <dl>
+        <dt><Icon name="plus-minus" /> <span>Differential</span></dt>
+        <dd>Only record data that has changed.</dd>
+
+        <dt><Icon name="camera" /> <span>Snapshot</span></dt>
+        <dd>Record full query result each time.</dd>
+      </dl>
+
+      <p>
+        Packs are distributed to specified <b>targets</b>. Targets may be
+        <b>individual hosts</b> or groups of hosts called <b>labels.</b>
+      </p>
+      <p>
+        Learn more about Query Packs in the <a href="https://kolide.co">documentation</a>.
+      </p>
+    </SecondarySidePanelContainer>
+  );
+};
 
 export default PackInfoSidePanel;
diff --git a/frontend/components/side_panels/PackInfoSidePanel/_styles.scss b/frontend/components/side_panels/PackInfoSidePanel/_styles.scss
index acbb21331a..12234b5479 100644
--- a/frontend/components/side_panels/PackInfoSidePanel/_styles.scss
+++ b/frontend/components/side_panels/PackInfoSidePanel/_styles.scss
@@ -5,9 +5,49 @@
   box-shadow: 2px 0 8px 0 rgba($black, 0.1);
   box-sizing: border-box;
   overflow: scroll;
-  padding: px-to-rem(13) px-to-rem(13) 70px;
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 300px;
+  padding: 30px;
+
+  &__title {
+    font-size: 18px;
+    font-weight: $normal;
+    letter-spacing: 0.7px;
+    color: $text-dark;
+    border-bottom: 1px solid $accent-light;
+    padding-bottom: 8px;
+    margin: 0 0 4px;
+  }
+
+  p {
+    font-size: 13px;
+    line-height: 1.85;
+    letter-spacing: 0.5px;
+    color: #858495;
+  }
+
+  dl {
+    dt {
+      font-weight: $bold;
+      font-size: 13px;
+      line-height: 1.85;
+      letter-spacing: 0.5px;
+      color: #858495;
+
+      .kolidecon {
+        font-size: 20px;
+        margin-right: 5px;
+      }
+
+      span {
+        vertical-align: 2px;
+      }
+    }
+
+    dd {
+      font-size: 13px;
+      line-height: 1.85;
+      letter-spacing: 0.5px;
+      color: #858495;
+      margin-left: 30px;
+    }
+  }
 }
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.jsx b/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.jsx
new file mode 100644
index 0000000000..4dfaeca45e
--- /dev/null
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.jsx
@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+
+import ConfigurePackQueryForm from 'components/forms/ConfigurePackQueryForm';
+import queryInterface from 'interfaces/query';
+import SearchPackQuery from './SearchPackQuery';
+import SecondarySidePanelContainer from '../SecondarySidePanelContainer';
+
+const baseClass = 'schedule-query-side-panel';
+
+const ScheduleQuerySidePanel = ({ allQueries, onConfigurePackQuerySubmit, onSelectQuery, selectedQuery }) => {
+  const renderForm = () => {
+    if (!selectedQuery) {
+      return false;
+    }
+
+    const formData = { query_id: selectedQuery.id };
+
+    return (
+      <ConfigurePackQueryForm
+        formData={formData}
+        handleSubmit={onConfigurePackQuerySubmit}
+      />
+    );
+  };
+
+  return (
+    <SecondarySidePanelContainer className={baseClass}>
+      <SearchPackQuery
+        allQueries={allQueries}
+        onSelectQuery={onSelectQuery}
+        selectedQuery={selectedQuery}
+      />
+      {renderForm()}
+    </SecondarySidePanelContainer>
+  );
+};
+
+ScheduleQuerySidePanel.propTypes = {
+  allQueries: PropTypes.arrayOf(queryInterface),
+  onConfigurePackQuerySubmit: PropTypes.func,
+  onSelectQuery: PropTypes.func,
+  selectedQuery: queryInterface,
+};
+
+export default ScheduleQuerySidePanel;
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.tests.jsx b/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.tests.jsx
new file mode 100644
index 0000000000..6d7116e438
--- /dev/null
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.tests.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import expect from 'expect';
+import { mount } from 'enzyme';
+
+import ScheduleQuerySidePanel from './ScheduleQuerySidePanel';
+
+describe('ScheduleQuerySidePanel - component', () => {
+  const component = mount(<ScheduleQuerySidePanel />);
+
+  it('renders SearchPackQuery', () => {
+    const scheduleQuery = component.find('SearchPackQuery');
+
+    expect(scheduleQuery.length).toEqual(1);
+  });
+});
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx
new file mode 100644
index 0000000000..f8b568b25d
--- /dev/null
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx
@@ -0,0 +1,124 @@
+import React, { Component, PropTypes } from 'react';
+import AceEditor from 'react-ace';
+import { isEqual } from 'lodash';
+
+import Icon from 'components/Icon';
+import queryInterface from 'interfaces/query';
+import Dropdown from 'components/forms/fields/Dropdown';
+
+const baseClass = 'search-pack-query';
+
+class SearchPackQuery extends Component {
+  static propTypes = {
+    allQueries: PropTypes.arrayOf(queryInterface),
+    onSelectQuery: PropTypes.func,
+    selectedQuery: queryInterface,
+  };
+
+  static defaultProps = {
+    allQueries: [],
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      queryDropdownOptions: [],
+    };
+  }
+
+  componentWillMount () {
+    const { allQueries } = this.props;
+
+    const queryDropdownOptions = allQueries.map((query) => {
+      return { label: query.name, value: String(query.id) };
+    });
+
+    this.setState({ queryDropdownOptions });
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { allQueries } = nextProps;
+
+    if (!isEqual(allQueries, this.props.allQueries)) {
+      const queryDropdownOptions = allQueries.map((query) => {
+        return { label: query.name, value: String(query.id) };
+      });
+
+      this.setState({ queryDropdownOptions });
+    }
+  }
+
+  renderHeader = () => {
+    const { selectedQuery } = this.props;
+    if (selectedQuery) {
+      return (
+        <h1 className={`${baseClass}__title`}>
+          <Icon name="query" /> {selectedQuery.name}
+        </h1>
+      );
+    }
+
+    return (<h1 className={`${baseClass}__title`}>Choose Query</h1>);
+  }
+
+  renderQuery = () => {
+    const { selectedQuery } = this.props;
+    if (selectedQuery) {
+      return (
+        <AceEditor
+          editorProps={{ $blockScrolling: Infinity }}
+          mode="kolide"
+          minLines={1}
+          maxLines={3}
+          name="pack-query"
+          readOnly
+          setOptions={{ wrap: true }}
+          showGutter={false}
+          showPrintMargin={false}
+          theme="kolide"
+          value={selectedQuery.query}
+          width="100%"
+          fontSize={14}
+        />
+      );
+    }
+
+    return false;
+  }
+
+  renderDescription = () => {
+    const { selectedQuery } = this.props;
+    if (selectedQuery) {
+      return (
+        <div className={`${baseClass}__description`}>
+          <h2>description</h2>
+          <p>{selectedQuery.description}</p>
+        </div>
+      );
+    }
+
+    return false;
+  }
+
+  render () {
+    const { renderHeader, renderQuery, renderDescription } = this;
+    const { onSelectQuery } = this.props;
+    const { queryDropdownOptions } = this.state;
+
+    return (
+      <div className={baseClass}>
+        {renderHeader()}
+        <Dropdown
+          options={queryDropdownOptions}
+          onChange={onSelectQuery}
+          placeholder={[<Icon name="search" size="lg" key="search-pack-query" />, ' Select Query...']}
+        />
+        {renderQuery()}
+        {renderDescription()}
+      </div>
+    );
+  }
+}
+
+export default SearchPackQuery;
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.tests.jsx b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.tests.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
new file mode 100644
index 0000000000..58b31fbb49
--- /dev/null
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
@@ -0,0 +1,39 @@
+.search-pack-query {
+  &__title {
+    font-size: 18px;
+    font-weight: $bold;
+    letter-spacing: -0.5px;
+    color: $text-dark;
+    margin: 0 0 10px;
+  }
+
+  .form-field--dropdown {
+    margin-bottom: 20px;
+  }
+
+  .ace-kolide {
+    margin-bottom: 20px;
+  }
+
+  &__description {
+    margin: 0 0 30px;
+
+    h2 {
+      font-size: 16px;
+      font-weight: $bold;
+      letter-spacing: -0.5px;
+      color: $text-dark;
+      border-bottom: 1px solid #eaeefb;
+      padding: 0 0 9px;
+      margin: 0 0 9px;
+    }
+
+    p {
+      margin: 0 0 10px;
+      font-size: 14px;
+      font-weight: $normal;
+      line-height: 1.71;
+      color: $text-medium;
+    }
+  }
+}
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/index.js b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/index.js
new file mode 100644
index 0000000000..82b3d58237
--- /dev/null
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/index.js
@@ -0,0 +1 @@
+export default from './SearchPackQuery';
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/_styles.scss b/frontend/components/side_panels/ScheduleQuerySidePanel/_styles.scss
new file mode 100644
index 0000000000..68f654b039
--- /dev/null
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/_styles.scss
@@ -0,0 +1,3 @@
+.schedule-query-side-panel {
+  padding: 20px;
+}
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/index.js b/frontend/components/side_panels/ScheduleQuerySidePanel/index.js
new file mode 100644
index 0000000000..5311bf674e
--- /dev/null
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/index.js
@@ -0,0 +1 @@
+export default from './ScheduleQuerySidePanel';
diff --git a/frontend/components/side_panels/ShowSidePanel.jsx b/frontend/components/side_panels/ShowSidePanel.jsx
new file mode 100644
index 0000000000..b253ea1bc8
--- /dev/null
+++ b/frontend/components/side_panels/ShowSidePanel.jsx
@@ -0,0 +1,33 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { noop } from 'lodash';
+
+import { removeRightSidePanel, showRightSidePanel } from 'redux/nodes/app/actions';
+
+const ShowSidePanel = (WrappedComponent) => {
+  class PageWithSidePanel extends Component {
+    static propTypes = {
+      dispatch: PropTypes.func,
+    };
+
+    static defaultProps = {
+      dispatch: noop,
+    };
+
+    componentWillMount () {
+      this.props.dispatch(showRightSidePanel);
+    }
+
+    componentWillUnmount () {
+      this.props.dispatch(removeRightSidePanel);
+    }
+
+    render () {
+      return <WrappedComponent {...this.props} />;
+    }
+  }
+
+  return connect()(PageWithSidePanel);
+};
+
+export default ShowSidePanel;
diff --git a/frontend/interfaces/form_field.js b/frontend/interfaces/form_field.js
index e8401a5a9a..7bf97072d4 100644
--- a/frontend/interfaces/form_field.js
+++ b/frontend/interfaces/form_field.js
@@ -4,6 +4,6 @@ export default PropTypes.shape({
   error: PropTypes.string,
   name: PropTypes.string,
   onChange: PropTypes.func,
-  value: PropTypes.string,
+  value: PropTypes.any,
 });
 
diff --git a/frontend/interfaces/scheduled_query.js b/frontend/interfaces/scheduled_query.js
new file mode 100644
index 0000000000..c0315d4eac
--- /dev/null
+++ b/frontend/interfaces/scheduled_query.js
@@ -0,0 +1,14 @@
+import { PropTypes } from 'react';
+
+export default PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  interval: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  pack_id: PropTypes.number.isRequired,
+  platform: PropTypes.string,
+  query: PropTypes.string.isRequired,
+  query_id: PropTypes.number.isRequired,
+  removed: PropTypes.bool.isRequired,
+  snapshot: PropTypes.bool.isRequired,
+});
+
diff --git a/frontend/kolide/endpoints.js b/frontend/kolide/endpoints.js
index cf0ab903ca..0f2c075ae5 100644
--- a/frontend/kolide/endpoints.js
+++ b/frontend/kolide/endpoints.js
@@ -14,6 +14,9 @@ export default {
   QUERIES: '/v1/kolide/queries',
   RESET_PASSWORD: '/v1/kolide/reset_password',
   RUN_QUERY: '/v1/kolide/queries/run',
+  SCHEDULED_QUERIES: (pack) => {
+    return `/v1/kolide/packs/${pack.id}/scheduled`;
+  },
   SETUP: '/v1/setup',
   TARGETS: '/v1/kolide/targets',
   USERS: '/v1/kolide/users',
diff --git a/frontend/kolide/index.js b/frontend/kolide/index.js
index 0308cbe9d5..74ff7ccfd6 100644
--- a/frontend/kolide/index.js
+++ b/frontend/kolide/index.js
@@ -5,6 +5,18 @@ import helpers from 'kolide/helpers';
 import local from 'utilities/local';
 
 class Kolide extends Base {
+  addLabelToPack = (packID, labelID) => {
+    const path = `/v1/kolide/packs/${packID}/labels/${labelID}`;
+
+    return this.authenticatedPost(this.endpoint(path));
+  }
+
+  addQueryToPack = ({ packID, queryID }) => {
+    const endpoint = `/v1/kolide/packs/${packID}/queries/${queryID}`;
+
+    return this.authenticatedPost(this.endpoint(endpoint));
+  }
+
   createLabel = ({ description, name, query }) => {
     const { LABELS } = endpoints;
 
@@ -20,6 +32,13 @@ class Kolide extends Base {
       });
   }
 
+  createPack = ({ name, description }) => {
+    const { PACKS } = endpoints;
+
+    return this.authenticatedPost(this.endpoint(PACKS), JSON.stringify({ description, name }))
+      .then((response) => { return response.pack; });
+  }
+
   createQuery = ({ description, name, query }) => {
     const { QUERIES } = endpoints;
 
@@ -27,6 +46,30 @@ class Kolide extends Base {
       .then((response) => { return response.query; });
   }
 
+  createScheduledQuery = ({ interval, logging_type: loggingType, pack_id: packID, platform, query_id: queryID, version }) => {
+    const removed = loggingType === 'differential';
+    const snapshot = loggingType === 'snapshot';
+
+    const formData = {
+      interval: Number(interval),
+      pack_id: Number(packID),
+      platform,
+      query_id: Number(queryID),
+      removed,
+      snapshot,
+      version,
+    };
+
+    return this.authenticatedPost(this.endpoint('/v1/kolide/schedule'), JSON.stringify(formData))
+      .then(response => response.scheduled);
+  }
+
+  destroyScheduledQuery = ({ id }) => {
+    const endpoint = `${this.endpoint('/v1/kolide/schedule')}/${id}`;
+
+    return this.authenticatedDelete(endpoint);
+  }
+
   forgotPassword ({ email }) {
     const { FORGOT_PASSWORD } = endpoints;
     const forgotPasswordEndpoint = this.baseURL + FORGOT_PASSWORD;
@@ -104,6 +147,14 @@ class Kolide extends Base {
       .then((response) => { return response.hosts; });
   }
 
+  getPack = (packID) => {
+    const { PACKS } = endpoints;
+    const getPackEndpoint = `${this.baseURL}${PACKS}/${packID}`;
+
+    return this.authenticatedGet(getPackEndpoint)
+      .then((response) => { return response.pack; });
+  }
+
   getQuery = (queryID) => {
     const { QUERIES } = endpoints;
     const getQueryEndpoint = `${this.baseURL}${QUERIES}/${queryID}`;
@@ -112,6 +163,13 @@ class Kolide extends Base {
       .then((response) => { return response.query; });
   }
 
+  getQueries = () => {
+    const { QUERIES } = endpoints;
+
+    return this.authenticatedGet(this.endpoint(QUERIES))
+      .then((response) => { return response.queries; });
+  }
+
   getTargets = (query, selected = { hosts: [], labels: [] }) => {
     const { TARGETS } = endpoints;
 
@@ -165,6 +223,14 @@ class Kolide extends Base {
       .then((response) => { return response.packs; });
   }
 
+  getScheduledQueries = (pack) => {
+    const { SCHEDULED_QUERIES } = endpoints;
+    const scheduledQueryPath = SCHEDULED_QUERIES(pack);
+
+    return this.authenticatedGet(this.endpoint(scheduledQueryPath))
+      .then(response => response.scheduled);
+  }
+
   getUsers = () => {
     const { USERS } = endpoints;
 
diff --git a/frontend/kolide/index.tests.js b/frontend/kolide/index.tests.js
index fda38c9e9c..cb739ae52f 100644
--- a/frontend/kolide/index.tests.js
+++ b/frontend/kolide/index.tests.js
@@ -8,12 +8,17 @@ const {
   invalidForgotPasswordRequest,
   invalidResetPasswordRequest,
   validCreateLabelRequest,
+  validCreatePackRequest,
   validCreateQueryRequest,
+  validCreateScheduledQueryRequest,
+  validDestroyScheduledQueryRequest,
   validForgotPasswordRequest,
   validGetConfigRequest,
   validGetHostsRequest,
   validGetInvitesRequest,
+  validGetQueriesRequest,
   validGetQueryRequest,
+  validGetScheduledQueriesRequest,
   validGetTargetsRequest,
   validGetUsersRequest,
   validInviteUserRequest,
@@ -63,6 +68,24 @@ describe('Kolide - API client', () => {
     });
   });
 
+  describe('#createPack', () => {
+    it('calls the appropriate endpoint with the correct parameters', (done) => {
+      const bearerToken = 'valid-bearer-token';
+      const description = 'pack description';
+      const name = 'pack name';
+      const queryParams = { description, name };
+      const request = validCreatePackRequest(bearerToken, queryParams);
+
+      Kolide.setBearerToken(bearerToken);
+      Kolide.createPack(queryParams)
+        .then(() => {
+          expect(request.isDone()).toEqual(true);
+          done();
+        })
+        .catch(done);
+    });
+  });
+
   describe('#createQuery', () => {
     it('calls the appropriate endpoint with the correct parameters', (done) => {
       const bearerToken = 'valid-bearer-token';
@@ -127,6 +150,21 @@ describe('Kolide - API client', () => {
     });
   });
 
+  describe('#getQueries', () => {
+    it('calls the appropriate endpoint with the correct parameters', (done) => {
+      const bearerToken = 'valid-bearer-token';
+      const request = validGetQueriesRequest(bearerToken);
+
+      Kolide.setBearerToken(bearerToken);
+      Kolide.getQueries()
+        .then(() => {
+          expect(request.isDone()).toEqual(true);
+          done();
+        })
+        .catch(done);
+    });
+  });
+
   describe('#getQuery', () => {
     it('calls the appropriate endpoint with the correct parameters', (done) => {
       const bearerToken = 'valid-bearer-token';
@@ -143,6 +181,60 @@ describe('Kolide - API client', () => {
     });
   });
 
+  describe('#createScheduledQuery', () => {
+    it('calls the appropriate endpoint with the correct parameters', (done) => {
+      const bearerToken = 'valid-bearer-token';
+      const formData = {
+        interval: 60,
+        logging_type: 'differential',
+        pack_id: 1,
+        platform: 'darwin',
+        query_id: 2,
+      };
+      const request = validCreateScheduledQueryRequest(bearerToken, formData);
+
+      Kolide.setBearerToken(bearerToken);
+      Kolide.createScheduledQuery(formData)
+        .then(() => {
+          expect(request.isDone()).toEqual(true);
+          done();
+        })
+        .catch(done);
+    });
+  });
+
+  describe('#destroyScheduledQuery', () => {
+    it('calls the appropriate endpoint with the correct parameters', (done) => {
+      const bearerToken = 'valid-bearer-token';
+      const scheduledQuery = { id: 1 };
+      const request = validDestroyScheduledQueryRequest(bearerToken, scheduledQuery);
+
+      Kolide.setBearerToken(bearerToken);
+      Kolide.destroyScheduledQuery(scheduledQuery)
+        .then(() => {
+          expect(request.isDone()).toEqual(true);
+          done();
+        })
+        .catch(done);
+    });
+  });
+
+  describe('#getScheduledQueries', () => {
+    it('calls the appropriate endpoint with the correct parameters', (done) => {
+      const bearerToken = 'valid-bearer-token';
+      const pack = { id: 1 };
+      const request = validGetScheduledQueriesRequest(bearerToken, pack);
+
+      Kolide.setBearerToken(bearerToken);
+      Kolide.getScheduledQueries(pack)
+        .then(() => {
+          expect(request.isDone()).toEqual(true);
+          done();
+        })
+        .catch(done);
+    });
+  });
+
   describe('#getTargets', () => {
     it('correctly parses the response', (done) => {
       const bearerToken = 'valid-bearer-token';
diff --git a/frontend/pages/Admin/UserManagementPage/UserBlock/UserBlock.jsx b/frontend/pages/Admin/UserManagementPage/UserBlock/UserBlock.jsx
index 6cf8cfdae8..ca998d2ba8 100644
--- a/frontend/pages/Admin/UserManagementPage/UserBlock/UserBlock.jsx
+++ b/frontend/pages/Admin/UserManagementPage/UserBlock/UserBlock.jsx
@@ -68,7 +68,7 @@ class UserBlock extends Component {
     return onEditUser(user, updatedUser);
   }
 
-  onUserActionSelect = ({ value: action }) => {
+  onUserActionSelect = (action) => {
     const { onSelect, user } = this.props;
 
     if (action === 'modify_details') {
diff --git a/frontend/pages/Admin/UserManagementPage/UserBlock/_styles.scss b/frontend/pages/Admin/UserManagementPage/UserBlock/_styles.scss
index 0704af2025..03d5b5fe48 100644
--- a/frontend/pages/Admin/UserManagementPage/UserBlock/_styles.scss
+++ b/frontend/pages/Admin/UserManagementPage/UserBlock/_styles.scss
@@ -175,6 +175,6 @@
 
 .revoke-invite {
   position: absolute;
-  width: 221px;
+  width: 189px;
   bottom: 43px;
 }
diff --git a/frontend/pages/Admin/UserManagementPage/UserManagementPage.tests.jsx b/frontend/pages/Admin/UserManagementPage/UserManagementPage.tests.jsx
index 4882e8ea23..88c6d34145 100644
--- a/frontend/pages/Admin/UserManagementPage/UserManagementPage.tests.jsx
+++ b/frontend/pages/Admin/UserManagementPage/UserManagementPage.tests.jsx
@@ -90,7 +90,7 @@ describe('UserManagementPage - component', () => {
           ...store.entities.users,
           data: {
             1: { ...currentUser },
-            2: { id: 2, email: 'hi@gnar.dog', full_name: 'GnarDog' },
+            2: { id: 2, email: 'another@gnar.dog', full_name: 'GnarDog' },
           },
         },
       },
diff --git a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx b/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
index 842bdd34b8..db835dc102 100644
--- a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
+++ b/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import moment from 'moment';
 import { push } from 'react-router-redux';
 
 import Button from 'components/buttons/Button';
@@ -19,6 +20,7 @@ class AllPacksPage extends Component {
 
   componentWillMount() {
     const { dispatch, packs } = this.props;
+
     if (!packs.length) {
       dispatch(packActions.loadAll());
     }
@@ -36,14 +38,16 @@ class AllPacksPage extends Component {
   }
 
   renderPack = (pack) => {
+    const updatedTime = moment(pack.updated_at);
+
     return (
       <tr key={`pack-${pack.id}-table`}>
         <td>{pack.name}</td>
-        <td>0?</td>
+        <td>{pack.query_count}</td>
         <td>Enabled?</td>
         <td>Jason Meller?</td>
-        <td>0?</td>
-        <td>Yesterday?</td>
+        <td>{pack.hosts_count}</td>
+        <td>{updatedTime.fromNow()}</td>
       </tr>
     );
   }
diff --git a/frontend/pages/packs/EditPackPage/EditPackPage.jsx b/frontend/pages/packs/EditPackPage/EditPackPage.jsx
new file mode 100644
index 0000000000..4966619eac
--- /dev/null
+++ b/frontend/pages/packs/EditPackPage/EditPackPage.jsx
@@ -0,0 +1,209 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { noop, size, find } from 'lodash';
+import { push } from 'react-router-redux';
+
+import EditPackFormWrapper from 'components/packs/EditPackFormWrapper';
+import packActions from 'redux/nodes/entities/packs/actions';
+import ScheduleQuerySidePanel from 'components/side_panels/ScheduleQuerySidePanel';
+import packInterface from 'interfaces/pack';
+import queryActions from 'redux/nodes/entities/queries/actions';
+import queryInterface from 'interfaces/query';
+import QueriesListWrapper from 'components/queries/QueriesListWrapper';
+import { renderFlash } from 'redux/nodes/notifications/actions';
+import scheduledQueryActions from 'redux/nodes/entities/scheduled_queries/actions';
+import stateEntityGetter from 'redux/utilities/entityGetter';
+
+const baseClass = 'edit-pack-page';
+
+export class EditPackPage extends Component {
+  static propTypes = {
+    allQueries: PropTypes.arrayOf(queryInterface),
+    dispatch: PropTypes.func,
+    isEdit: PropTypes.bool,
+    isLoadingPack: PropTypes.bool,
+    isLoadingScheduledQueries: PropTypes.bool,
+    pack: packInterface,
+    packID: PropTypes.string,
+    scheduledQueries: PropTypes.arrayOf(queryInterface),
+  };
+
+  static defaultProps = {
+    dispatch: noop,
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      targetsCount: 0,
+    };
+  }
+
+  componentDidMount () {
+    const { allQueries, dispatch, isLoadingPack, pack, packID, scheduledQueries } = this.props;
+    const { load } = packActions;
+    const { loadAll } = queryActions;
+
+    if (!pack && !isLoadingPack) {
+      dispatch(load(packID));
+    }
+
+    if (!size(scheduledQueries)) {
+      dispatch(scheduledQueryActions.loadAll({ id: packID }));
+    }
+
+    if (!size(allQueries)) {
+      dispatch(loadAll());
+    }
+
+    return false;
+  }
+
+  onCancelEditPack = () => {
+    const { dispatch, isEdit, packID } = this.props;
+
+    if (!isEdit) {
+      return false;
+    }
+
+    return dispatch(push(`/packs/${packID}`));
+  }
+
+  onFetchTargets = (query, targetsResponse) => {
+    const { targets_count: targetsCount } = targetsResponse;
+
+    this.setState({ targetsCount });
+
+    return false;
+  }
+
+  onSelectQuery = (query) => {
+    const { allQueries } = this.props;
+    const selectedQuery = find(allQueries, { id: Number(query) });
+    this.setState({ selectedQuery });
+
+    return false;
+  }
+
+  onToggleEdit = () => {
+    const { dispatch, isEdit, packID } = this.props;
+
+    if (isEdit) {
+      return dispatch(push(`/packs/${packID}`));
+    }
+
+    return dispatch(push(`/packs/${packID}/edit`));
+  }
+
+  handlePackFormSubmit = (formData) => {
+    const { dispatch } = this.props;
+    const { update } = packActions;
+
+    return dispatch(update(formData));
+  }
+
+  handleRemoveScheduledQueries = (scheduledQueryIDs) => {
+    const { destroy } = scheduledQueryActions;
+    const { dispatch } = this.props;
+
+    const promises = scheduledQueryIDs.map((id) => {
+      return dispatch(destroy({ id }));
+    });
+
+    return Promise.all(promises)
+      .then(() => {
+        dispatch(renderFlash('success', 'Scheduled queries removed'));
+      });
+  }
+
+  handleConfigurePackQuerySubmit = (formData) => {
+    const { create } = scheduledQueryActions;
+    const { dispatch, packID } = this.props;
+    const scheduledQueryData = {
+      ...formData,
+      snapshot: formData.logging_type === 'snapshot',
+      pack_id: packID,
+    };
+
+    dispatch(create(scheduledQueryData))
+      .then(() => {
+        dispatch(renderFlash('success', 'Query scheduled!'));
+      })
+      .catch(() => {
+        dispatch(renderFlash('error', 'Unable to schedule your query.'));
+      });
+
+    return false;
+  }
+
+  render () {
+    const {
+      handleConfigurePackQuerySubmit,
+      handlePackFormSubmit,
+      handleRemoveScheduledQueries,
+      handleScheduledQueryFormSubmit,
+      onCancelEditPack,
+      onFetchTargets,
+      onSelectQuery,
+      onToggleEdit,
+    } = this;
+    const { targetsCount, selectedQuery } = this.state;
+    const { allQueries, isEdit, isLoadingScheduledQueries, pack, scheduledQueries } = this.props;
+
+    if (!pack || isLoadingScheduledQueries) {
+      return false;
+    }
+
+    return (
+      <div className={`${baseClass} has-sidebar`}>
+        <div className={`${baseClass}__content`}>
+          <EditPackFormWrapper
+            className={`${baseClass}__pack-form body-wrap`}
+            handleSubmit={handlePackFormSubmit}
+            isEdit={isEdit}
+            onCancelEditPack={onCancelEditPack}
+            onEditPack={onToggleEdit}
+            onFetchTargets={onFetchTargets}
+            pack={pack}
+            targetsCount={targetsCount}
+          />
+          <QueriesListWrapper
+            onRemoveScheduledQueries={handleRemoveScheduledQueries}
+            onScheduledQueryFormSubmit={handleScheduledQueryFormSubmit}
+            scheduledQueries={scheduledQueries}
+          />
+        </div>
+        <ScheduleQuerySidePanel
+          onConfigurePackQuerySubmit={handleConfigurePackQuerySubmit}
+          allQueries={allQueries}
+          onSelectQuery={onSelectQuery}
+          selectedQuery={selectedQuery}
+        />
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, { params, route }) => {
+  const entityGetter = stateEntityGetter(state);
+  const isLoadingPack = state.entities.packs.loading;
+  const { id: packID } = params;
+  const pack = entityGetter.get('packs').findBy({ id: packID });
+  const { entities: allQueries } = entityGetter.get('queries');
+  const scheduledQueries = entityGetter.get('scheduled_queries').where({ pack_id: packID });
+  const isLoadingScheduledQueries = state.entities.scheduled_queries.loading;
+  const isEdit = route.path === 'edit';
+
+  return {
+    allQueries,
+    isEdit,
+    isLoadingPack,
+    isLoadingScheduledQueries,
+    pack,
+    packID,
+    scheduledQueries,
+  };
+};
+
+export default connect(mapStateToProps)(EditPackPage);
diff --git a/frontend/pages/packs/EditPackPage/EditPackPage.tests.jsx b/frontend/pages/packs/EditPackPage/EditPackPage.tests.jsx
new file mode 100644
index 0000000000..864e07331d
--- /dev/null
+++ b/frontend/pages/packs/EditPackPage/EditPackPage.tests.jsx
@@ -0,0 +1,35 @@
+import expect from 'expect';
+import { mount } from 'enzyme';
+
+import { connectedComponent, reduxMockStore } from 'test/helpers';
+import { packStub } from 'test/stubs';
+import EditPackPage from './EditPackPage';
+
+describe('EditPackPage - component', () => {
+  const store = {
+    entities: {
+      packs: {
+        data: {
+          [packStub.id]: packStub,
+        },
+      },
+      scheduled_queries: {},
+    },
+  };
+  const page = mount(connectedComponent(EditPackPage, {
+    props: { params: { id: String(packStub.id) }, route: {} },
+    mockStore: reduxMockStore(store),
+  }));
+
+  it('renders', () => {
+    expect(page.length).toEqual(1);
+  });
+
+  it('renders a EditPackFormWrapper component', () => {
+    expect(page.find('EditPackFormWrapper').length).toEqual(1);
+  });
+
+  it('renders a ScheduleQuerySidePanel component', () => {
+    expect(page.find('ScheduleQuerySidePanel').length).toEqual(1);
+  });
+});
diff --git a/frontend/pages/packs/EditPackPage/_styles.scss b/frontend/pages/packs/EditPackPage/_styles.scss
new file mode 100644
index 0000000000..342b11d0b0
--- /dev/null
+++ b/frontend/pages/packs/EditPackPage/_styles.scss
@@ -0,0 +1,5 @@
+.edit-pack-page {
+  &__pack-form {
+    padding: $pad-small $pad-base;
+  }
+}
diff --git a/frontend/pages/packs/EditPackPage/index.js b/frontend/pages/packs/EditPackPage/index.js
new file mode 100644
index 0000000000..97afa82e49
--- /dev/null
+++ b/frontend/pages/packs/EditPackPage/index.js
@@ -0,0 +1 @@
+export default from './EditPackPage';
diff --git a/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx b/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx
new file mode 100644
index 0000000000..b9f2a32aa6
--- /dev/null
+++ b/frontend/pages/packs/PackComposerPage/PackComposerPage.jsx
@@ -0,0 +1,99 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { noop } from 'lodash';
+import { push } from 'react-router-redux';
+
+import Kolide from 'kolide';
+import packActions from 'redux/nodes/entities/packs/actions';
+import PackForm from 'components/forms/packs/PackForm';
+import PackInfoSidePanel from 'components/side_panels/PackInfoSidePanel';
+import { renderFlash } from 'redux/nodes/notifications/actions';
+
+const baseClass = 'pack-composer';
+
+export class PackComposerPage extends Component {
+  static propTypes = {
+    dispatch: PropTypes.func,
+  };
+
+  static defaultProps = {
+    dispatch: noop,
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.state = { selectedTargetsCount: 0 };
+  }
+
+  onFetchTargets = (query, targetsResponse) => {
+    const { targets_count: selectedTargetsCount } = targetsResponse;
+
+    this.setState({ selectedTargetsCount });
+
+    return false;
+  }
+
+  visitPackPage = (packID) => {
+    const { dispatch } = this.props;
+
+    dispatch(push(`/packs/${packID}`));
+    dispatch(renderFlash('success', 'Pack created!'));
+
+    return false;
+  }
+
+  handleSubmit = (formData) => {
+    const { create, load } = packActions;
+    const { dispatch } = this.props;
+    const { visitPackPage } = this;
+
+    return dispatch(create(formData))
+      .then((pack) => {
+        const { id: packID } = pack;
+        const { targets } = formData;
+
+        if (!targets) {
+          return visitPackPage(packID);
+        }
+
+        const promises = targets.map((target) => {
+          const { id: targetID } = target;
+
+          if (target.target_type === 'labels') {
+            Kolide.addLabelToPack(packID, targetID);
+          }
+
+          // TODO: Add host to pack when API is available
+          return Promise.resolve();
+        });
+
+        return Promise.all(promises)
+          .then(() => {
+            dispatch(load(packID))
+              .then(() => {
+                return visitPackPage(packID);
+              });
+          });
+      });
+  }
+
+  render () {
+    const { handleSubmit, onFetchTargets } = this;
+    const { selectedTargetsCount } = this.state;
+
+    return (
+      <div className="has-sidebar">
+        <PackForm
+          className={`${baseClass}__pack-form body-wrap`}
+          handleSubmit={handleSubmit}
+          onFetchTargets={onFetchTargets}
+          selectedTargetsCount={selectedTargetsCount}
+        />
+        <PackInfoSidePanel />
+      </div>
+    );
+  }
+}
+
+export default connect()(PackComposerPage);
diff --git a/frontend/pages/packs/PackComposerPage/PackComposerPage.tests.jsx b/frontend/pages/packs/PackComposerPage/PackComposerPage.tests.jsx
new file mode 100644
index 0000000000..68453bb39d
--- /dev/null
+++ b/frontend/pages/packs/PackComposerPage/PackComposerPage.tests.jsx
@@ -0,0 +1,25 @@
+import expect from 'expect';
+import { mount } from 'enzyme';
+
+import { connectedComponent } from 'test/helpers';
+import ConnectedPacksComposerPage from './PackComposerPage';
+
+describe('PackComposerPage - component', () => {
+  it('renders', () => {
+    const page = mount(connectedComponent(ConnectedPacksComposerPage));
+
+    expect(page.length).toEqual(1);
+  });
+
+  it('renders a PackForm component', () => {
+    const page = mount(connectedComponent(ConnectedPacksComposerPage));
+
+    expect(page.find('PackForm').length).toEqual(1);
+  });
+
+  it('renders a PackInfoSidePanel component', () => {
+    const page = mount(connectedComponent(ConnectedPacksComposerPage));
+
+    expect(page.find('PackInfoSidePanel').length).toEqual(1);
+  });
+});
diff --git a/frontend/pages/packs/PackComposerPage/_styles.scss b/frontend/pages/packs/PackComposerPage/_styles.scss
new file mode 100644
index 0000000000..829eb5249c
--- /dev/null
+++ b/frontend/pages/packs/PackComposerPage/_styles.scss
@@ -0,0 +1,9 @@
+.pack-composer {
+  &__pack-form {
+    background-color: $white;
+    border: 1px solid $silver;
+    border-radius: 3px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
+    padding: $pad-small $pad-base;
+  }
+}
diff --git a/frontend/pages/packs/PackComposerPage/index.js b/frontend/pages/packs/PackComposerPage/index.js
new file mode 100644
index 0000000000..99d8136bb3
--- /dev/null
+++ b/frontend/pages/packs/PackComposerPage/index.js
@@ -0,0 +1 @@
+export default from './PackComposerPage';
diff --git a/frontend/redux/nodes/entities/base/schemas.js b/frontend/redux/nodes/entities/base/schemas.js
index 621ade57ef..aac413e6ea 100644
--- a/frontend/redux/nodes/entities/base/schemas.js
+++ b/frontend/redux/nodes/entities/base/schemas.js
@@ -6,6 +6,7 @@ const invitesSchema = new Schema('invites');
 const labelsSchema = new Schema('labels');
 const packsSchema = new Schema('packs');
 const queriesSchema = new Schema('queries');
+const scheduledQueriesSchema = new Schema('scheduled_queries');
 const targetsSchema = new Schema('targets');
 const usersSchema = new Schema('users');
 
@@ -16,6 +17,7 @@ export default {
   LABELS: labelsSchema,
   PACKS: packsSchema,
   QUERIES: queriesSchema,
+  SCHEDULED_QUERIES: scheduledQueriesSchema,
   TARGETS: targetsSchema,
   USERS: usersSchema,
 };
diff --git a/frontend/redux/nodes/entities/packs/config.js b/frontend/redux/nodes/entities/packs/config.js
index c69ad5ad4c..90a6875b34 100644
--- a/frontend/redux/nodes/entities/packs/config.js
+++ b/frontend/redux/nodes/entities/packs/config.js
@@ -5,7 +5,9 @@ import schemas from '../base/schemas';
 const { PACKS: schema } = schemas;
 
 export default reduxConfig({
+  createFunc: Kolide.createPack,
   entityName: 'packs',
   loadAllFunc: Kolide.getPacks,
+  loadFunc: Kolide.getPack,
   schema,
 });
diff --git a/frontend/redux/nodes/entities/queries/config.js b/frontend/redux/nodes/entities/queries/config.js
index 47ee477806..41a4b74081 100644
--- a/frontend/redux/nodes/entities/queries/config.js
+++ b/frontend/redux/nodes/entities/queries/config.js
@@ -7,6 +7,7 @@ const { QUERIES: schema } = schemas;
 export default reduxConfig({
   createFunc: Kolide.createQuery,
   entityName: 'queries',
+  loadAllFunc: Kolide.getQueries,
   loadFunc: Kolide.getQuery,
   schema,
   updateFunc: Kolide.updateQuery,
diff --git a/frontend/redux/nodes/entities/reducer.js b/frontend/redux/nodes/entities/reducer.js
index 8c39672700..b9ffcc8924 100644
--- a/frontend/redux/nodes/entities/reducer.js
+++ b/frontend/redux/nodes/entities/reducer.js
@@ -6,6 +6,7 @@ import invites from './invites/reducer';
 import labels from './labels/reducer';
 import packs from './packs/reducer';
 import queries from './queries/reducer';
+import scheduledQueries from './scheduled_queries/reducer';
 import users from './users/reducer';
 
 export default combineReducers({
@@ -15,5 +16,6 @@ export default combineReducers({
   labels,
   packs,
   queries,
+  scheduled_queries: scheduledQueries,
   users,
 });
diff --git a/frontend/redux/nodes/entities/scheduled_queries/actions.js b/frontend/redux/nodes/entities/scheduled_queries/actions.js
new file mode 100644
index 0000000000..b95c41eb89
--- /dev/null
+++ b/frontend/redux/nodes/entities/scheduled_queries/actions.js
@@ -0,0 +1,3 @@
+import config from './config';
+
+export default config.actions;
diff --git a/frontend/redux/nodes/entities/scheduled_queries/config.js b/frontend/redux/nodes/entities/scheduled_queries/config.js
new file mode 100644
index 0000000000..e669810bfa
--- /dev/null
+++ b/frontend/redux/nodes/entities/scheduled_queries/config.js
@@ -0,0 +1,14 @@
+import Kolide from 'kolide';
+import reduxConfig from 'redux/nodes/entities/base/reduxConfig';
+import schemas from 'redux/nodes/entities/base/schemas';
+
+const { SCHEDULED_QUERIES: schema } = schemas;
+
+export default reduxConfig({
+  createFunc: Kolide.createScheduledQuery,
+  destroyFunc: Kolide.destroyScheduledQuery,
+  entityName: 'scheduled_queries',
+  loadAllFunc: Kolide.getScheduledQueries,
+  schema,
+});
+
diff --git a/frontend/redux/nodes/entities/scheduled_queries/reducer.js b/frontend/redux/nodes/entities/scheduled_queries/reducer.js
new file mode 100644
index 0000000000..93a1bd364b
--- /dev/null
+++ b/frontend/redux/nodes/entities/scheduled_queries/reducer.js
@@ -0,0 +1,3 @@
+import config from './config';
+
+export default config.reducer;
diff --git a/frontend/router/index.jsx b/frontend/router/index.jsx
index 3147157cac..92cde2bbea 100644
--- a/frontend/router/index.jsx
+++ b/frontend/router/index.jsx
@@ -9,12 +9,14 @@ import App from 'components/App';
 import AuthenticatedAdminRoutes from 'components/AuthenticatedAdminRoutes';
 import AuthenticatedRoutes from 'components/AuthenticatedRoutes';
 import CoreLayout from 'layouts/CoreLayout';
+import EditPackPage from 'pages/packs/EditPackPage';
 import HomePage from 'pages/HomePage';
 import LoginRoutes from 'components/LoginRoutes';
 import LogoutPage from 'pages/LogoutPage';
 import ManageHostsPage from 'pages/hosts/ManageHostsPage';
 import NewHostPage from 'pages/hosts/NewHostPage';
 import PackPageWrapper from 'components/packs/PackPageWrapper';
+import PackComposerPage from 'pages/packs/PackComposerPage';
 import QueryPage from 'pages/queries/QueryPage';
 import QueryPageWrapper from 'components/queries/QueryPageWrapper';
 import RegistrationPage from 'pages/RegistrationPage';
@@ -39,17 +41,26 @@ const routes = (
             <Route path="admin" component={AuthenticatedAdminRoutes}>
               <Route path="users" component={AdminUserManagementPage} />
             </Route>
-            <Route path="queries" component={QueryPageWrapper}>
-              <Route path="new" component={QueryPage} />
-              <Route path=":id" component={QueryPage} />
+            <Route path="hosts">
+              <Route path="new" component={NewHostPage} />
+              <Route path="manage" component={ManageHostsPage} />
             </Route>
             <Route path="packs" component={PackPageWrapper}>
               <Route path="all" component={AllPacksPage} />
+              <Route path="new" component={PackComposerPage} />
+              <Route path=":id">
+                <IndexRoute component={EditPackPage} />
+                <Route path="edit" component={EditPackPage} />
+              </Route>
             </Route>
             <Route path="hosts">
               <Route path="new" component={NewHostPage} />
               <Route path="manage(/:active_label)" component={ManageHostsPage} />
             </Route>
+            <Route path="queries" component={QueryPageWrapper}>
+              <Route path="new" component={QueryPage} />
+              <Route path=":id" component={QueryPage} />
+            </Route>
             <Route path="settings" component={UserSettingsPage} />
           </Route>
         </Route>
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index 01548395fa..6918730ae7 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -53,16 +53,22 @@ h3 {
   box-sizing: border-box;
   margin-top: $pad-base;
   margin-right: $pad-base;
+
+  @at-root .has-sidebar & {
+    margin-right: 0;
+  }
 }
 
 .has-sidebar {
   @include display(flex);
   height: 100%;
 
-  .body-wrap {
-    @include flex-grow(1);
-    @include align-self(flex-start);
-    margin-right: 0;
+  > * {
+    &:first-child {
+      @include flex-grow(1);
+      @include align-self(flex-start);
+      margin-right: 0;
+    }
   }
 }
 
@@ -77,6 +83,16 @@ button {
 
   &:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 1000px #fff inset;
-    -webkit-text-fill-color: $text-dark !important;
+    -webkit-text-fill-color: $text-dark !important; //sass-lint:disable-line no-important
+  }
+}
+
+input {
+  &[type=number] {
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
   }
 }
diff --git a/frontend/styles/global/_icons.scss b/frontend/styles/global/_icons.scss
index b751f691a7..c745cb130c 100644
--- a/frontend/styles/global/_icons.scss
+++ b/frontend/styles/global/_icons.scss
@@ -296,6 +296,30 @@
     content: '\f05a';
 }
 
+ .kolidecon-x:before {
+    content: '\f05b';
+}
+
+ .kolidecon-kill-kolide:before {
+    content: '\f05c';
+}
+
+ .kolidecon-right-arrow:before {
+    content: '\f05d';
+}
+
+ .kolidecon-camera:before {
+    content: '\f05e';
+}
+
+ .kolidecon-plus-minus:before {
+    content: '\f05f';
+}
+
+ .kolidecon-bold-plus:before {
+    content: '\f060';
+}
+
 
 .sr-only {
     position: absolute;
diff --git a/frontend/test/helpers.jsx b/frontend/test/helpers.jsx
index c4cdb27ad4..e714b7e830 100644
--- a/frontend/test/helpers.jsx
+++ b/frontend/test/helpers.jsx
@@ -16,7 +16,9 @@ export const reduxMockStore = (store = {}) => {
   return mockStore(store);
 };
 
-export const connectedComponent = (ComponentClass, { props = {}, mockStore }) => {
+export const connectedComponent = (ComponentClass, options = {}) => {
+  const { props = {}, mockStore = reduxMockStore() } = options;
+
   return (
     <Provider store={mockStore}>
       <ComponentClass {...props} />
@@ -24,7 +26,22 @@ export const connectedComponent = (ComponentClass, { props = {}, mockStore }) =>
   );
 };
 
-export const itBehavesLikeAFormInputElement = (form, inputName, inputType = 'InputField') => {
+export const itBehavesLikeAFormDropdownElement = (form, inputName) => {
+  const dropdownField = form.find('Select').findWhere(s => s.prop('name') === `${inputName}-select`);
+
+  expect(dropdownField.length).toEqual(1);
+
+  const inputNode = dropdownField.find('input');
+
+  const options = dropdownField.prop('options');
+
+  fillInFormInput(inputNode, options[0].label);
+  dropdownField.find('.Select-option').first().simulate('mousedown');
+
+  expect(form.state().formData).toInclude({ [inputName]: options[0].value });
+};
+
+export const itBehavesLikeAFormInputElement = (form, inputName, inputType = 'InputField', inputText = 'some text') => {
   const inputField = form.find({ name: inputName }).find('input');
 
   expect(inputField.length).toEqual(1);
@@ -36,8 +53,6 @@ export const itBehavesLikeAFormInputElement = (form, inputName, inputType = 'Inp
 
     expect(form.state().formData[inputName]).toEqual(!inputValue);
   } else {
-    const inputText = 'some text';
-
     fillInFormInput(inputField, inputText);
 
     expect(form.state().formData).toInclude({ [inputName]: inputText });
diff --git a/frontend/test/mocks.js b/frontend/test/mocks.js
index 995356fdfa..be81f8108b 100644
--- a/frontend/test/mocks.js
+++ b/frontend/test/mocks.js
@@ -1,6 +1,7 @@
 import nock from 'nock';
 
 import helpers from 'kolide/helpers';
+import stubs from 'test/stubs';
 
 export const validUser = {
   id: 1,
@@ -23,6 +24,16 @@ export const validCreateLabelRequest = (bearerToken, labelParams) => {
     .reply(201, { label: { ...labelParams, display_text: labelParams.name } });
 };
 
+export const validCreatePackRequest = (bearerToken, packParams) => {
+  return nock('http://localhost:8080', {
+    reqHeaders: {
+      Authorization: `Bearer ${bearerToken}`,
+    },
+  })
+    .post('/api/v1/kolide/packs', JSON.stringify(packParams))
+    .reply(201, { pack: packParams });
+};
+
 export const validCreateQueryRequest = (bearerToken, queryParams) => {
   return nock('http://localhost:8080', {
     reqHeaders: {
@@ -33,6 +44,36 @@ export const validCreateQueryRequest = (bearerToken, queryParams) => {
     .reply(201, { query: queryParams });
 };
 
+export const validCreateScheduledQueryRequest = (bearerToken, formData) => {
+  const { scheduledQueryStub } = stubs;
+  const scheduledQueryParams = {
+    interval: Number(formData.interval),
+    pack_id: Number(formData.pack_id),
+    platform: formData.platform,
+    query_id: Number(formData.query_id),
+    removed: true,
+    snapshot: false,
+  };
+
+  return nock('http://localhost:8080', {
+    reqHeaders: {
+      Authorization: `Bearer ${bearerToken}`,
+    },
+  })
+    .post('/api/v1/kolide/schedule', JSON.stringify(scheduledQueryParams))
+    .reply(201, { scheduled_query: scheduledQueryStub });
+};
+
+export const validDestroyScheduledQueryRequest = (bearerToken, scheduledQuery) => {
+  return nock('http://localhost:8080', {
+    reqHeaders: {
+      Authorization: `Bearer ${bearerToken}`,
+    },
+  })
+    .delete(`/api/v1/kolide/schedule/${scheduledQuery.id}`)
+    .reply(200, {});
+};
+
 export const invalidGetQueryRequest = (bearerToken, queryID) => {
   return nock('http://localhost:8080', {
     reqHeaders: {
@@ -43,6 +84,16 @@ export const invalidGetQueryRequest = (bearerToken, queryID) => {
     .reply(404, { error: 'resource not found' });
 };
 
+export const validGetQueriesRequest = (bearerToken) => {
+  return nock('http://localhost:8080', {
+    reqHeaders: {
+      Authorization: `Bearer ${bearerToken}`,
+    },
+  })
+    .get('/api/v1/kolide/queries')
+    .reply(200, { queries: [] });
+};
+
 export const validGetQueryRequest = (bearerToken, queryID) => {
   return nock('http://localhost:8080', {
     reqHeaders: {
@@ -148,6 +199,18 @@ export const validGetUsersRequest = (bearerToken) => {
     .reply(200, { users: [validUser] });
 };
 
+export const validGetScheduledQueriesRequest = (bearerToken, pack) => {
+  const { scheduledQueryStub } = stubs;
+
+  return nock('http://localhost:8080', {
+    reqHeaders: {
+      Authorization: `Bearer ${bearerToken}`,
+    },
+  })
+    .get(`/api/v1/kolide/packs/${pack.id}/scheduled`)
+    .reply(200, { scheduled: [scheduledQueryStub] });
+};
+
 export const validLoginRequest = (bearerToken = 'abc123') => {
   return nock('http://localhost:8080')
   .post('/api/v1/kolide/login')
@@ -254,12 +317,17 @@ export default {
   invalidGetQueryRequest,
   invalidResetPasswordRequest,
   validCreateLabelRequest,
+  validCreatePackRequest,
   validCreateQueryRequest,
+  validCreateScheduledQueryRequest,
+  validDestroyScheduledQueryRequest,
   validForgotPasswordRequest,
   validGetConfigRequest,
   validGetHostsRequest,
   validGetInvitesRequest,
+  validGetQueriesRequest,
   validGetQueryRequest,
+  validGetScheduledQueriesRequest,
   validGetTargetsRequest,
   validGetUsersRequest,
   validInviteUserRequest,
diff --git a/frontend/test/stubs.js b/frontend/test/stubs.js
index 3863388621..bbaabb7ccf 100644
--- a/frontend/test/stubs.js
+++ b/frontend/test/stubs.js
@@ -6,6 +6,47 @@ export const adminUserStub = {
   username: 'gnardog',
 };
 
+export const packStub = {
+  created_at: '0001-01-01T00:00:00Z',
+  updated_at: '0001-01-01T00:00:00Z',
+  deleted_at: null,
+  deleted: false,
+  id: 3,
+  name: 'Pack Name',
+  description: 'Pack Description',
+  platform: '',
+  created_by: 1,
+  disabled: false,
+};
+
+export const queryStub = {
+  created_at: '2016-10-17T07:06:00Z',
+  deleted: false,
+  deleted_at: null,
+  description: '',
+  differential: false,
+  id: 1,
+  interval: 0,
+  name: 'dev_query_1',
+  platform: '',
+  query: 'select * from processes',
+  snapshot: false,
+  updated_at: '2016-10-17T07:06:00Z',
+  version: '',
+};
+
+export const scheduledQueryStub = {
+  id: 1,
+  interval: 60,
+  name: 'Get all users',
+  pack_id: 123,
+  platform: 'darwin',
+  query: 'SELECT * FROM users',
+  query_id: 5,
+  removed: false,
+  snapshot: true,
+};
+
 export const userStub = {
   id: 1,
   admin: false,
@@ -14,4 +55,10 @@ export const userStub = {
   username: 'gnardog',
 };
 
-export default { adminUserStub, userStub };
+export default {
+  adminUserStub,
+  packStub,
+  queryStub,
+  scheduledQueryStub,
+  userStub,
+};
diff --git a/frontend/utilities/icon_class.js b/frontend/utilities/icon_class.js
index cad75610dc..24d8b44d7a 100644
--- a/frontend/utilities/icon_class.js
+++ b/frontend/utilities/icon_class.js
@@ -12,11 +12,15 @@ export const statusIconClass = (status = '') => {
 };
 
 export const platformIconClass = (platform = '') => {
+  if (!platform) return '';
+
   const lowerPlatform = platform.toLowerCase();
 
   switch (lowerPlatform) {
     case 'darwin':
       return 'apple';
+    case 'linux':
+      return 'ubuntu';
     default:
       return lowerPlatform;
   }