diff --git a/public/index.html b/public/index.html
index a740cac..1db277e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,6 +24,7 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
+    <div id="modal-root"></div>
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/src/App.tsx b/src/App.tsx
index 9e3048e..2bda56a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ interface AppProps {
 }
 
 class App extends React.Component<AppProps, AppState> {
+  modal: HTMLElement;
   render() {
     return (
       <div className="sheet-main">
diff --git a/src/controls/EditForm.tsx b/src/controls/EditForm.tsx
new file mode 100644
index 0000000..6141ee2
--- /dev/null
+++ b/src/controls/EditForm.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+const EditForm: React.StatelessComponent<{
+  header: string,
+  onSave?: () => void,
+  onCancel?: () => void
+}> = ({ header, children, onSave, onCancel }) => {
+
+  return (
+    <div className="sheet-panel card p-4">
+      <h1>{header}</h1>
+      <form className="form-inline">
+        {children}
+      </form>
+      <div>
+        {onSave ? (
+          <button
+            onClick={event => { event.preventDefault(); onSave(); }}
+            className="btn btn-small btn-secondary d-inline float-right"
+          >Cancel</button>
+        ) : null}
+        {onCancel ? (
+          <button
+          onClick={event => { event.preventDefault(); onCancel(); }}
+            className="btn btn-small btn-primary d-inline float-right"
+          >Save</button>
+        ) : null}
+      </div>
+    </div>
+  );
+
+};
+
+export default EditForm;
\ No newline at end of file
diff --git a/src/controls/Modal.tsx b/src/controls/Modal.tsx
new file mode 100644
index 0000000..cc07d8e
--- /dev/null
+++ b/src/controls/Modal.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+const modalRoot = document.getElementById('modal-root')!;
+
+class Modal extends React.Component<{}> {
+  modalElement: HTMLElement;
+  modalRoot: HTMLElement;
+
+  constructor(props: {}) {
+    super(props);
+    // Create a div that we'll render the modal into. Because each
+    // Modal component has its own element, we can render multiple
+    // modal components into the modal container.
+    this.modalElement = document.createElement('div');
+  }
+
+  componentDidMount() {
+    // Append the element into the DOM on mount. We'll render
+    // into the modal container element (see the HTML tab).
+    modalRoot.appendChild(this.modalElement);
+  }
+
+  componentWillUnmount() {
+    // Remove the element from the DOM when we unmount
+    modalRoot.removeChild(this.modalElement);
+  }
+
+  render() {
+    // Use a portal to render the children into the element
+    return ReactDOM.createPortal(
+      // Any valid React child: JSX, strings, arrays, etc.
+      (
+        <div className="modal">
+          {this.props.children}
+        </div>
+      ),
+      // A DOM element
+      this.modalElement,
+    );
+  }
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/src/controls/TextInput.tsx b/src/controls/TextInput.tsx
index c4a6ab3..d6454b7 100644
--- a/src/controls/TextInput.tsx
+++ b/src/controls/TextInput.tsx
@@ -22,7 +22,7 @@ const TextInput: React.StatelessComponent<TextInputProps> =
 
     return (
       <div className={classes}>
-        <label className="mr-2" htmlFor={name}>{label}</label>
+        {label && <label className="mr-2" htmlFor={name}>{label}</label>}
         <div className="field">
           <input
             type="text"
diff --git a/src/sheet/SheetApi.ts b/src/sheet/SheetApi.ts
index 4e43a7b..84a6243 100644
--- a/src/sheet/SheetApi.ts
+++ b/src/sheet/SheetApi.ts
@@ -16,6 +16,13 @@ export class MockSheetApi implements SheetApi {
       name: 'Roland of Gilead',
       statistics: [
         { name: 'fighter level', modifiers: [{ formula: '5' }] },
+        {
+          name: 'example base with conditional',
+          modifiers: [
+            { formula: '5' },
+            { source: 'example', condition: 'long is kranky', formula: '5' }
+          ]
+        },
         { name: 'wizard level', modifiers: [{ formula: '3' }] },
         { name: 'favored class bonus', modifiers: [{ source: 'race', formula: '[fighter level]' }] },
         { name: 'total level', modifiers: [{ formula: '[fighter level] + [wizard level]' }] },
@@ -51,9 +58,7 @@ export class MockSheetApi implements SheetApi {
           name: 'gun attack bonus', modifiers: [
             { source: 'weapon focus', formula: '1' },
             { formula: '[base attack bonus]' },
-            { formula: '[dexterity modifier]' }
-          ],
-          conditionals: [
+            { formula: '[dexterity modifier]' },
             { source: 'point blank shot', condition: 'target is within 30ft.', formula: '1' },
             { condition: 'target is behind cover', formula: '-2' }
           ]
diff --git a/src/sheet/SheetModel.ts b/src/sheet/SheetModel.ts
index 19f72db..26ec13b 100644
--- a/src/sheet/SheetModel.ts
+++ b/src/sheet/SheetModel.ts
@@ -29,6 +29,27 @@ export function selectResources(sheet: Sheet): { resource: Resource, maximum: nu
   return resources;
 }
 
+export function modifierIsBase(modifier: Modifier) {
+  return !isNaN(Number(modifier.formula)) && (modifier.condition ? modifier.condition === '' : true);
+}
+
+export function statisticIsBase(sheet: Sheet, statistic: Statistic) {
+  const onlyHasBaseModifiers = statistic.modifiers && statistic
+    .modifiers
+    .map(modifierIsBase)
+    .reduce((l, r) => l && r) || false;
+
+  return onlyHasBaseModifiers;
+}
+
+export function statisticHasConditionals(statistic: Statistic) {
+  return statistic.modifiers && statistic.modifiers.filter(isConditional).length > 0;
+}
+
+export function isConditional(modifier: Modifier) {
+  return modifier.condition ? modifier.condition !== '' : false;
+}
+
 export function calculateValue(sheet: Sheet, statistic: Statistic): number {
   return statistic.name ? statisticValueCache.getFromCache(statistic.name!, key => {
     if (!statistic.name || statistic.name === 'unknown') {
@@ -109,14 +130,10 @@ export type Statistic = {
   name: string;
   modifiers?: Modifier[];
   resource?: Resource;
-  conditionals?: Conditional[];
-};
-
-export type Conditional = Modifier & {
-  condition?: string;
 };
 
 export type Modifier = {
+  condition?: string,
   formula?: string,
   source?: string
 };
diff --git a/src/sheetManage/ActionsPanel.tsx b/src/sheetManage/ActionsPanel.tsx
index 98f7959..4a7de94 100644
--- a/src/sheetManage/ActionsPanel.tsx
+++ b/src/sheetManage/ActionsPanel.tsx
@@ -28,7 +28,7 @@ const ActionsPanel: React.StatelessComponent<{ className?: string, sheet: Sheet
     const actions = selectActions(sheet);
     const flattenedByCost = actions
       .map(a => a.actionCost!.map(c => ({ cost: c, name: a.name, description: a.description })))
-      .reduce((l, r) => l.concat(r));
+      .reduce((l, r) => l.concat(r), []);
     const costGroups = groupBy(flattenedByCost, a => a.cost);
 
     return (
diff --git a/src/sheetManage/ConditionalTable.tsx b/src/sheetManage/ConditionalTable.tsx
deleted file mode 100644
index 770d00f..0000000
--- a/src/sheetManage/ConditionalTable.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react';
-import Sheet, { Conditional, calculateFormula } from '../sheet/SheetModel';
-import combineClasses from '../controls/combineClasses';
-
-const toRow = (key: string, conditional: Conditional, sheet: Sheet) => {
-  var calculatedValue = calculateFormula(sheet, conditional.formula).toString();
-
-  return (
-    <tr key={key}>
-      <td>{conditional.condition}</td>
-      <td className="text-center">
-        {conditional.formula === calculatedValue 
-          ? conditional.formula 
-          : `"${conditional.formula}" => ${calculatedValue}`}
-      </td>
-      <td>{conditional.source}</td>
-      <td>
-        <button className="fill-cell m-0 btn btn-light">...</button>
-      </td>
-    </tr>
-  );
-};
-
-const ConditionalTable: React.StatelessComponent<{ className?: string, sheet: Sheet, conditionals: Conditional[] }> =
-  ({ className, sheet, conditionals }) => {
-
-    const classes = combineClasses(className, 'table-responsive');
-
-    return (
-      <div className={classes}>
-        <table className="table table-no-hover m-0">
-          <tbody>
-            {conditionals
-              .sort(conditional => conditional.source ? 0 : 1)
-              .map((conditional, index) => toRow(index.toString(), conditional, sheet))}
-          </tbody>
-        </table>
-      </div>
-    );
-  };
-
-export default ConditionalTable;
\ No newline at end of file
diff --git a/src/sheetManage/ManageSheetPage.tsx b/src/sheetManage/ManageSheetPage.tsx
index 8244d12..b4844de 100644
--- a/src/sheetManage/ManageSheetPage.tsx
+++ b/src/sheetManage/ManageSheetPage.tsx
@@ -4,28 +4,60 @@ import * as React from 'react';
 import RootState from '../core/RootState';
 import { RouteComponentProps } from 'react-router-dom';
 import SheetForm from './SheetForm';
+import Modal from '../controls/Modal';
 
 type ManageSheetPageProps = {
   sheet: Sheet;
 } & RouteComponentProps<{ id: string }>;
 
-export class ManageSheetPage extends React.Component<ManageSheetPageProps> {
+type ManageSheetPageState = {
+  modal?: JSX.Element;
+};
+
+export class ManageSheetPage extends React.Component<ManageSheetPageProps, ManageSheetPageState> {
   constructor(props: ManageSheetPageProps) {
     super(props);
 
     this.onSave = this.onSave.bind(this);
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+
+    this.state = {};
   }
 
   goBack() {
     this.props.history.push('/sheets');
   }
 
+  openModal(modalElement: JSX.Element) {
+    this.setState({
+      modal: (
+        <Modal>
+          {modalElement}
+        </Modal>
+      )
+    });
+  }
+
+  closeModal() {
+    this.setState({ modal: undefined });
+  }
+
   onSave(event: React.FormEvent<HTMLInputElement>) {
     alert('saved!');
   }
 
   render() {
-    return <SheetForm sheet={this.props.sheet} onSave={this.onSave} />;
+    return (
+      <div>
+        <SheetForm
+          sheet={this.props.sheet}
+          onSave={this.onSave}
+          showModal={this.openModal}
+          closeModal={this.closeModal} />
+        {this.state.modal}
+      </div>
+    );
   }
 }
 
diff --git a/src/sheetManage/ModifierTable.tsx b/src/sheetManage/ModifierTable.tsx
index 2cad206..948aa40 100644
--- a/src/sheetManage/ModifierTable.tsx
+++ b/src/sheetManage/ModifierTable.tsx
@@ -1,20 +1,19 @@
 import * as React from 'react';
-import Sheet, { Modifier, calculateFormula } from '../sheet/SheetModel';
+import Sheet, { Modifier, calculateFormula, modifierIsBase } from '../sheet/SheetModel';
 import combineClasses from '../controls/combineClasses';
 
 const toRow = (key: string, sheet: Sheet, modifier: Modifier) => {
-  var calculatedValue = calculateFormula(sheet, modifier.formula).toString();
+  let calculatedValue = calculateFormula(sheet, modifier.formula).toString();
+  let isBase = modifierIsBase(modifier);
 
   return (
     <tr key={key}>
-      <td>{modifier.source}</td>
+      <td>{modifier.source ? modifier.source : isBase ? 'base' : ''}</td>
       <td className="text-center">
-        {modifier.formula === calculatedValue 
-          ? modifier.formula 
+        {isBase
+          ? modifier.formula
           : `"${modifier.formula}" => ${calculatedValue}`}</td>
-      <td>
-        <button className="fill-cell m-0 btn btn-light">...</button>
-      </td>
+      <td>{modifier.condition}</td>
     </tr>
   );
 };
diff --git a/src/sheetManage/SheetForm.tsx b/src/sheetManage/SheetForm.tsx
index 6f43c26..d93910b 100644
--- a/src/sheetManage/SheetForm.tsx
+++ b/src/sheetManage/SheetForm.tsx
@@ -10,11 +10,13 @@ import TextInput from '../controls/TextInput';
 
 type SheetFormProps = {
   sheet: Sheet;
+  showModal: (modalElement: JSX.Element) => void;
+  closeModal: () => void;
   onSave: (event: React.FormEvent<HTMLInputElement>) => void;
 };
 
 const SheetForm: React.StatelessComponent<SheetFormProps> = (props) => {
-  const sheet = props.sheet;
+  const { sheet, showModal, closeModal } = props;
 
   return sheet ?
     (
@@ -34,7 +36,12 @@ const SheetForm: React.StatelessComponent<SheetFormProps> = (props) => {
             </div>
 
             <div className="row">
-              <StatisticsPanel className="col-4" sheet={sheet} />
+              <StatisticsPanel
+                className="col-4"
+                sheet={sheet}
+                showModal={showModal}
+                closeModal={closeModal}
+              />
               <ResourcesPanel className="col-4" sheet={sheet} />
               <ActionsPanel className="col-4" sheet={sheet} />
             </div>
diff --git a/src/sheetManage/SheetPanel.tsx b/src/sheetManage/SheetPanel.tsx
index 7629fc7..af1ad1f 100644
--- a/src/sheetManage/SheetPanel.tsx
+++ b/src/sheetManage/SheetPanel.tsx
@@ -1,13 +1,21 @@
 import * as React from 'react';
 import combineClasses from '../controls/combineClasses';
 
-const SheetPanel: React.StatelessComponent<{ title: string, className?: string }> =
-  ({ title, className, children }) => {
+const SheetPanel: React.StatelessComponent<{ title: string, className?: string, onAdd?: () => void }> =
+  ({ title, className, children, onAdd }) => {
     const classes = combineClasses(className, 'sheet-panel card pt-4');
 
     return (
-      <div className={classes}>
-        <h2>{title}</h2>
+      <div className={classes}><h2>
+        {title}
+        {onAdd
+          ? (
+            <button
+              className="btn btn-outline-primary btn-small float-right"
+              onClick={event => { event.preventDefault(); onAdd(); }}
+            >+</button>
+          )
+          : null}</h2>
         {children}
       </div>
     );
diff --git a/src/sheetManage/StatisticForm.tsx b/src/sheetManage/StatisticForm.tsx
new file mode 100644
index 0000000..da93ef8
--- /dev/null
+++ b/src/sheetManage/StatisticForm.tsx
@@ -0,0 +1,108 @@
+import { Statistic, Modifier } from '../sheet/SheetModel';
+import * as React from 'react';
+import TextInput from '../controls/TextInput';
+import EditForm from '../controls/EditForm';
+
+type StatisticFormProps = {
+  statistic?: Statistic;
+  saveStatistic: (statistic: Statistic) => void;
+  cancel: () => void;
+};
+
+type StatisticFormState = {
+  statistic: Statistic;
+};
+
+export class StatisticForm extends React.Component<StatisticFormProps, StatisticFormState> {
+  constructor(props: StatisticFormProps) {
+    super(props);
+
+    this.state = { statistic: Object.assign({}, props.statistic || this.newStatistic()) };
+
+    this.onChangeName = this.onChangeName.bind(this);
+    this.onSave = this.onSave.bind(this);
+  }
+
+  newStatistic(): Statistic {
+    return {
+      name: ''
+    };
+  }
+
+  onChangeName(event: React.FormEvent<HTMLInputElement>) {
+    this.setState(Object.assign(this.state, { name: event.currentTarget.value }));
+  }
+
+  onSave() {
+    this.props.saveStatistic(this.state.statistic);
+  }
+
+  toModifierRow(modifier: Modifier) {
+    return (
+      <tr>
+        <td>
+          <TextInput
+            name="modifierCondition"
+            value={modifier.condition}
+            error=""
+            onChange={this.onChangeName}
+            placeholder="Enter a condition"
+          />
+        </td>
+        <td>
+          <TextInput
+            name="modifierSource"
+            value={modifier.source}
+            error=""
+            onChange={this.onChangeName}
+            placeholder="Enter a source"
+          />
+        </td>
+        <td>
+          <TextInput
+            name="modifierFormula"
+            value={modifier.formula}
+            error=""
+            onChange={this.onChangeName}
+            placeholder="Enter a formula"
+          />
+        </td>
+      </tr>
+    );
+  }
+
+  render() {
+    let { cancel } = this.props;
+    let { statistic } = this.state;
+
+    return (
+      <EditForm
+        onCancel={cancel}
+        onSave={this.onSave}
+        header="Edit Statistic">
+        <TextInput
+          name="statisticName"
+          label="Name"
+          value={statistic.name}
+          error=""
+          onChange={this.onChangeName}
+          placeholder="Enter a name"
+        />
+        <table>
+          <thead>
+            <tr>
+              <th>Condition</th>
+              <th>Source</th>
+              <th>Formula</th>
+            </tr>
+          </thead>
+          <tbody>
+            {statistic.modifiers && statistic.modifiers.map(this.toModifierRow)}
+          </tbody>
+        </table>
+      </EditForm>
+    );
+  }
+}
+
+export default StatisticForm;
\ No newline at end of file
diff --git a/src/sheetManage/StatisticsPanel.tsx b/src/sheetManage/StatisticsPanel.tsx
index c196e06..dfd5f56 100644
--- a/src/sheetManage/StatisticsPanel.tsx
+++ b/src/sheetManage/StatisticsPanel.tsx
@@ -1,11 +1,16 @@
 import * as React from 'react';
-import Sheet, { calculateValue, Statistic } from '../sheet/SheetModel';
+import Sheet, { calculateValue, Statistic, statisticIsBase, statisticHasConditionals } from '../sheet/SheetModel';
 import SheetPanel from './SheetPanel';
 import ModifierTable from './ModifierTable';
-import ConditionalTable from './ConditionalTable';
 import { FormEvent } from 'react';
+import StatisticForm from './StatisticForm';
 
-type StatisticsPanelProps = { className?: string, sheet: Sheet };
+type StatisticsPanelProps = {
+  showModal: (modalElement: JSX.Element) => void;
+  closeModal: () => void;
+  className?: string,
+  sheet: Sheet
+};
 
 export class StatisticsPanel extends React.Component<StatisticsPanelProps, { expanded: string[] }> {
   constructor(props: StatisticsPanelProps) {
@@ -13,7 +18,10 @@ export class StatisticsPanel extends React.Component<StatisticsPanelProps, { exp
 
     this.state = { expanded: [] };
 
+    this.cancel = this.cancel.bind(this);
     this.onStatisticExpandCollapseClick = this.onStatisticExpandCollapseClick.bind(this);
+    this.addStatistic = this.addStatistic.bind(this);
+    this.saveStatistic = this.saveStatistic.bind(this);
   }
 
   statisticIsExpanded(statisticName: string) {
@@ -26,47 +34,66 @@ export class StatisticsPanel extends React.Component<StatisticsPanelProps, { exp
     if (this.statisticIsExpanded(statisticName)) {
       this.setState({ expanded: this.state.expanded.filter(e => e !== statisticName) });
     } else {
-      this.setState({ expanded: this.state.expanded.concat(statisticName) });
+      // this.setState({ expanded: this.state.expanded.concat(statisticName) });
+      this.setState({ expanded: [statisticName] });
     }
   }
 
   toRowPair = (sheet: Sheet, statistic: Statistic) => {
     const hasModifiers = statistic.modifiers && statistic.modifiers.length > 0;
-    const hasConditionals = statistic.conditionals && statistic.conditionals.length > 0;
     const detailRowName = statistic.name.replace(' ', '-') + '-detail-row';
 
+    const hasConditionals = statisticHasConditionals(statistic);
     const showDetail = this.statisticIsExpanded(statistic.name);
+    const calculated = calculateValue(sheet, statistic);
+    const isBase = statisticIsBase(sheet, statistic);
 
     return [(
       <tr
         className={'clickable' + (showDetail ? ' selected' : '')}
         key={statistic.name}
         onClick={event => this.onStatisticExpandCollapseClick(event, statistic.name)}>
-        <td>{statistic.name}</td>
-        <td className="text-center">{calculateValue(sheet, statistic)}</td>
+        <td>
+          {statistic.name}
+          {isBase && <small className="text-muted pl-2 float-right">(base)</small>}
+          {hasConditionals && <small className="text-muted pl-2 float-right">(conditional)</small>}
+        </td>
+        <td className="text-center">{calculated}</td>
       </tr>
     ),
     showDetail && (
-      <tr key={statistic.name + 'detail'} id={detailRowName}>
+      <tr key={statistic.name + 'detail'} id={detailRowName} className="statistics-detail">
         <td colSpan={2} className="p-2 pb-4">
-          {hasConditionals && <h6 className="m-2">conditionals</h6>}
-          {hasConditionals && <ConditionalTable sheet={sheet} conditionals={statistic.conditionals!} />}
           {hasModifiers && <h6 className="m-2">modifiers</h6>}
           {hasModifiers && <ModifierTable sheet={sheet} modifiers={statistic.modifiers!} />}
 
           <button className="btn btn-outline-danger float-right btn-small d-inline">Delete</button>
-          <button className="btn btn-outline-primary float-right btn-small d-inline">Add Modifier</button>
-          <button className="btn btn-outline-primary float-right btn-small d-inline">Add Conditional</button>
+          <button className="btn btn-outline-primary float-right btn-small d-inline">Edit</button>
         </td>
       </tr>
     )];
   }
 
+  saveStatistic(statistic: Statistic) {
+    this.props.closeModal();
+  }
+
+  cancel() {
+    this.props.closeModal();
+  }
+
+  addStatistic() {
+    this.props.showModal((
+      <StatisticForm saveStatistic={this.saveStatistic} cancel={this.cancel} />
+    ));
+  }
+
   render() {
     const { sheet, className } = this.props;
 
     return (
       <SheetPanel
+        onAdd={this.addStatistic}
         title="Statistics"
         className={className}>
 
@@ -85,8 +112,6 @@ export class StatisticsPanel extends React.Component<StatisticsPanelProps, { exp
 
         </table>
 
-        <button className="btn btn-outline-primary float-right btn-small d-inline">Add Statistic</button>
-
       </SheetPanel>
     );
   }
diff --git a/src/styles.css b/src/styles.css
index 5ea639f..5501a01 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -23,10 +23,17 @@
   background-color: inherit !important;
 }
 
+.statistics-detail {
+  border-bottom-width: 5px;
+  border-bottom-style: solid;
+  border-bottom-color: gray;
+}
+
 .selected {
   border-top-width: 5px;
   border-top-style: solid;
   border-top-color: lightskyblue;
+
   background-color:lightgray;
   font-weight: bold;
 }
@@ -34,4 +41,21 @@
 .fill-cell {
   height:100%;
   width:100%;
-}
\ No newline at end of file
+}
+
+#modal-root {
+  position: relative;
+  z-index: 999;
+}
+
+.modal {
+  background-color: rgba(0,0,0,0.5);
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}