diff --git a/components/Modal/Modal.story.js b/components/Modal/Modal.story.js
index 6c10d81de..1c21461d6 100644
--- a/components/Modal/Modal.story.js
+++ b/components/Modal/Modal.story.js
@@ -2,8 +2,7 @@ import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import { withKnobs, boolean } from '@kadira/storybook-addon-knobs';
 import ModalAnimator from './ModalAnimator';
-import Window from './Window';
-import WithActionBar from './WithActionBar';
+import Window, { WindowTitle } from './Window';
 import WithCross from './WithCross';
 import m from '../../globals/modifiers.css';
 
@@ -12,46 +11,11 @@ stories.addDecorator(withKnobs);
 
 stories
   .add('Default `<Window />` pairing', () => (
-    <ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
-      <Window>
-        <p className={ [m.fontRegular, m.fgGreyDarker, m.mt0, m.mb0].join(' ') }>
-          {
-            'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
-            ' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
-            ' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
-            ' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
-            ' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
-            ' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
-            ' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
-            ' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
-            ' libero sodales.'
-          }
-        </p>
-      </Window>
-    </ModalAnimator>
-  ))
-  .add('Dark `<Window />` pairing', () => (
-    <ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
-      <Window variant="dark">
-        <p className={ [m.fontRegular, m.fgWhite, m.mt0, m.mb0].join(' ') }>
-          {
-            'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
-            ' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
-            ' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
-            ' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
-            ' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
-            ' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
-            ' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
-            ' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
-            ' libero sodales.'
-          }
-        </p>
-      </Window>
-    </ModalAnimator>
-  ))
-  .add('Default `<WithCross />` pairing', () => (
-    <ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
-      <WithCross onClose={ action('Closing') }>
+    <ModalAnimator active={ boolean('active', true) } onClose={ action('Closing') }>
+      <Window
+        header={ <WindowTitle>Modal heading</WindowTitle> }
+        footer={ <button>Cancel</button> }
+      >
         <p className={ [m.fontRegular, m.fgGreyDarker, m.mt0, m.mb0].join(' ') }>
           {
             'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
@@ -78,26 +42,7 @@ stories
             ' libero sodales.'
           }
         </p>
-      </WithCross>
-    </ModalAnimator>
-  ))
-  .add('Dark `<WithCross />` pairing', () => (
-    <ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
-      <WithCross variant="dark" onClose={ action('Closing') }>
-        <p className={ [m.fontRegular, m.fgWhite, m.mt0, m.mb0].join(' ') }>
-          {
-            'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
-            ' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
-            ' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
-            ' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
-            ' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
-            ' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
-            ' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
-            ' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
-            ' libero sodales.'
-          }
-        </p>
-        <p className={ [m.fontRegular, m.fgWhite, m.mtl, m.mb0].join(' ') }>
+        <p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
           {
             'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
             ' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
@@ -110,18 +55,12 @@ stories
             ' libero sodales.'
           }
         </p>
-      </WithCross>
+      </Window>
     </ModalAnimator>
   ))
-  .add('Default `<WithActionBar />` pairing', () => (
-    <ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
-      <WithActionBar
-        actions={ (
-          <div>
-            <button onClick={ action('actioning....') }>Action</button>
-          </div>
-        ) }
-      >
+  .add('Default `<WithCross />` pairing', () => (
+    <ModalAnimator active={ boolean('active', true) } onClose={ action('Closing') }>
+      <WithCross onClose={ action('Closing') }>
         <p className={ [m.fontRegular, m.fgGreyDarker, m.mt0, m.mb0].join(' ') }>
           {
             'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
@@ -148,58 +87,6 @@ stories
             ' libero sodales.'
           }
         </p>
-        <p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
-          {
-            'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
-            ' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
-            ' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
-            ' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
-            ' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
-            ' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
-            ' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
-            ' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
-            ' libero sodales.'
-          }
-        </p>
-        <p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
-          {
-            'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
-            ' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
-            ' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
-            ' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
-            ' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
-            ' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
-            ' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
-            ' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
-            ' libero sodales.'
-          }
-        </p>
-        <p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
-          {
-            'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
-            ' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
-            ' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
-            ' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
-            ' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
-            ' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
-            ' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
-            ' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
-            ' libero sodales.'
-          }
-        </p>
-        <p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
-          {
-            'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
-            ' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
-            ' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
-            ' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
-            ' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
-            ' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
-            ' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
-            ' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
-            ' libero sodales.'
-          }
-        </p>
-      </WithActionBar>
+      </WithCross>
     </ModalAnimator>
   ));
\ No newline at end of file
diff --git a/components/Modal/Window.css b/components/Modal/Window.css
index dd8f5a6d3..a0cccabb0 100644
--- a/components/Modal/Window.css
+++ b/components/Modal/Window.css
@@ -1,3 +1,7 @@
+:root {
+  --modal-window-marginal-height: 4.5rem;
+}
+
 .light {
   background-color: var(--color-white);
   color: var(--color-greyDark);
@@ -21,25 +25,88 @@
   z-index: var(--z-modal);
 }
 
+.header {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  height: var(--modal-window-marginal-height);
+}
+
+.body {
+  width: 100%;
+  height: 100%;
+  padding: var(--size-large);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.hasHeader .body,
+.hasFooter .body {
+  max-height: calc(100% - var(--modal-window-marginal-height));
+}
+
+.hasHeader .body {
+  margin-top: var(--modal-window-marginal-height);
+}
+
+.hasFooter .body {
+  margin-bottom: var(--modal-window-marginal-height);
+}
+
+.hasHeader.hasFooter .body {
+  max-height: calc(100% - (var(--modal-window-marginal-height) * 2));
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-bottom: 0;
+  border-left: 0;
+  border-right: 0;
+  height: var(--modal-window-marginal-height);
+}
+
+.title {
+  padding-top: var(--size-sm-i);
+  padding-bottom: var(--size-sm-i);
+  display: inline-block;
+  color: currentColor;
+  composes: fontRegular from '../../globals/typography.css';
+  font-weight: var(--fontweight-demi);
+}
+
 @media(--modal-lg) {
   .root {
     width: 94vw;
     max-height: 94vh;
     max-width: 37.5rem;
-    height: auto;
     left: 50%;
     top: 50%;
     bottom: auto;
     transform: translate3d(-50%, -50%, 0);
     border-radius: 4px;
   }
-}
 
-.body {
-  width: 100%;
-  height: 100%;
-  max-height: 94vh;
-  padding: var(--size-large);
-  overflow-x: hidden;
-  overflow-y: scroll;
+  .header {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  .footer {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  .hasHeader .body,
+  .hasFooter .body {
+    max-height: calc(94vh - var(--modal-window-marginal-height));
+  }
+
+  .hasHeader.hasFooter .body {
+    max-height: calc(94vh - (var(--modal-window-marginal-height) * 2));
+  }
 }
\ No newline at end of file
diff --git a/components/Modal/Window.js b/components/Modal/Window.js
index 6cf234269..3bdbf2be8 100644
--- a/components/Modal/Window.js
+++ b/components/Modal/Window.js
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import cx from 'classnames';
 
+import Panel, { PANEL_CONTEXT } from '../Panel/Panel';
 import css from './Window.css';
 
 export const WINDOW_VARIANT = {
@@ -8,6 +9,22 @@ export const WINDOW_VARIANT = {
   DARK: 'dark',
 };
 
+export const WINDOW_VARIANT_TO_PANEL_CONTEXT = {
+  [WINDOW_VARIANT.LIGHT]: PANEL_CONTEXT.DEFAULT,
+  [WINDOW_VARIANT.DARK]: PANEL_CONTEXT.BLACKOUT,
+};
+
+export const WindowTitle = ({ className, children, ...rest }) => (
+  <span { ...rest } className={ cx(css.title, className) }>
+    { children }
+  </span>
+);
+
+WindowTitle.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
 /**
  * TODO: Figure out react-motion compatible focus trap
  */
@@ -49,11 +66,23 @@ export default class Window extends Component {
     } = this.props;
 
     return (
-      <div { ...rest } className={ cx(css.root, css[variant], className) }>
+      <div
+        { ...rest }
+        className={ cx(
+          css.root,
+          css[variant],
+          header ? css.hasHeader : null,
+          footer ? css.hasFooter : null,
+          className
+        ) }
+      >
         { header && (
-          <div className={ cx(css.header, classNames.header) }>
+          <Panel
+            context={ WINDOW_VARIANT_TO_PANEL_CONTEXT[variant] }
+            className={ cx(css.header, classNames.header) }
+          >
             { header }
-          </div>
+          </Panel>
         ) }
         { body && (
           <div className={ cx(css.body, classNames.body) }>
@@ -61,9 +90,12 @@ export default class Window extends Component {
           </div>
         ) }
         { footer && (
-          <div className={ cx(css.footer, classNames.footer) }>
+          <Panel
+            context={ WINDOW_VARIANT_TO_PANEL_CONTEXT[variant] }
+            className={ cx(css.footer, classNames.footer) }
+          >
             { footer }
-          </div>
+          </Panel>
         ) }
       </div>
     );
diff --git a/components/Modal/WithActionBar.css b/components/Modal/WithActionBar.css
deleted file mode 100644
index 21e412c82..000000000
--- a/components/Modal/WithActionBar.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
-
-.banner {
-  border-bottom: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.body {
-  padding-bottom: var(--space-96);
-}
\ No newline at end of file
diff --git a/components/Modal/WithActionBar.js b/components/Modal/WithActionBar.js
deleted file mode 100644
index 49cb29b3c..000000000
--- a/components/Modal/WithActionBar.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-
-import Window, { WINDOW_VARIANT } from './Window';
-import Panel, { PANEL_CONTEXT } from '../Panel/Panel';
-import css from './WithActionBar.css';
-
-const WINDOW_VARIANT_TO_PANEL_CONTEXT = {
-  [WINDOW_VARIANT.LIGHT]: PANEL_CONTEXT.DEFAULT,
-  [WINDOW_VARIANT.DARK]: PANEL_CONTEXT.BLACKOUT,
-};
-
-/**
- * TODO: Figure out react-motion compatible focus trap
- */
-class WindowWithActionBar extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    actions: PropTypes.node,
-    variant: PropTypes.oneOf([
-      WINDOW_VARIANT.LIGHT,
-      WINDOW_VARIANT.DARK,
-    ]),
-  };
-
-  static defaultProps = {
-    variant: WINDOW_VARIANT.LIGHT,
-  };
-
-  render() {
-    const {
-      children,
-      actions,
-      variant,
-      ...rest,
-    } = this.props;
-
-    const classNames = {
-      footer: css.footer,
-      body: css.body,
-    };
-
-    return (
-      <Window
-        { ...rest }
-        classNames={ classNames }
-        variant={ variant }
-        footer={ (
-          <Panel
-            context={ WINDOW_VARIANT_TO_PANEL_CONTEXT[variant] }
-            className={ css.banner }
-          >
-            { actions }
-          </Panel>
-        ) }
-      >
-        { children }
-      </Window>
-    );
-  }
-}
-
-export default WindowWithActionBar;
\ No newline at end of file
diff --git a/components/Modal/WithActionBar.test.js b/components/Modal/WithActionBar.test.js
deleted file mode 100644
index 3b0d60f2c..000000000
--- a/components/Modal/WithActionBar.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-
-import WithActionBar from './WithActionBar';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  render(<WithActionBar />, div);
-});
\ No newline at end of file