diff --git a/frontend/src/component/app.jsx b/frontend/src/component/app.jsx
index 85cedb0147..920174c590 100644
--- a/frontend/src/component/app.jsx
+++ b/frontend/src/component/app.jsx
@@ -145,8 +145,8 @@ export default class App extends Component {
                         </Navigation>
                     </Drawer>
                     <ScrollContainer scrollKey="container" shouldUpdateScroll={shouldUpdateScroll}>
-                    <Content>
-                        <Grid shadow={1} style={{ maxWidth: '1200px', margin: '0 auto' }}>
+                    <Content className="mdl-color--grey-50">
+                        <Grid noSpacing className={styles.content}>
                             <Cell col={12}>
                                 {this.props.children}
                                 <ErrorContainer />
diff --git a/frontend/src/component/application/application-edit-component.js b/frontend/src/component/application/application-edit-component.js
index b502d72786..220daddd51 100644
--- a/frontend/src/component/application/application-edit-component.js
+++ b/frontend/src/component/application/application-edit-component.js
@@ -152,18 +152,20 @@ class ClientApplications extends PureComponent {
 
 
         return (
-            <div>
-                <HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
-                    actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
-                />
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
+                        actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
+                    />
 
-                <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
-                    <Tab>Details</Tab>
-                    <Tab>Edit</Tab>
-                </Tabs>
+                    <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
+                        <Tab>Details</Tab>
+                        <Tab>Edit</Tab>
+                    </Tabs>
 
-               {content}
-            </div>
+                    {content}
+                </Cell>
+            </Grid>
         );
     }
 }
diff --git a/frontend/src/component/application/application-list-component.js b/frontend/src/component/application/application-list-component.js
index 2c472cb596..a5d8570d6a 100644
--- a/frontend/src/component/application/application-list-component.js
+++ b/frontend/src/component/application/application-list-component.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { ProgressBar } from 'react-mdl';
+import { ProgressBar, Grid, Cell } from 'react-mdl';
 import { AppsLinkList, HeaderTitle } from '../common';
 
 class ClientStrategies extends Component {
@@ -17,10 +17,12 @@ class ClientStrategies extends Component {
             return <ProgressBar indeterminate />;
         }
         return (
-            <div>
-                <HeaderTitle title="Applications" />
-                <AppsLinkList apps={applications} />
-            </div>
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <HeaderTitle title="Applications" />
+                    <AppsLinkList apps={applications} />
+                </Cell>
+            </Grid>
         );
     }
 }
diff --git a/frontend/src/component/archive/archive-list-component.jsx b/frontend/src/component/archive/archive-list-component.jsx
index 27ddec6ee3..61379f99ee 100644
--- a/frontend/src/component/archive/archive-list-component.jsx
+++ b/frontend/src/component/archive/archive-list-component.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
-import { DataTable, TableHeader, IconButton, Icon } from 'react-mdl';
+import { DataTable, TableHeader, IconButton, Icon, Grid, Cell } from 'react-mdl';
 import { HeaderTitle } from '../common';
 
 class ArchiveList extends Component {
@@ -14,26 +14,31 @@ class ArchiveList extends Component {
             e.reviveName = e.name;
         });
         return (
-            <div>
-                <HeaderTitle title="Toggle Archive" />
-                {
-                    archive.length > 0 ?
-                    <DataTable
-                        rows={archive}
-                        style={{ width: '100%' }}>
-                        <TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
-                            <IconButton colored name="undo" onClick={() => revive(reviveName)} />
-                        )}>Revive</TableHeader>
-                        <TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>Enabled</TableHeader>
-                        <TableHeader name="name">Toggle name</TableHeader>
-                        <TableHeader numeric name="createdAt">Created</TableHeader>
-                    </DataTable> :
-                    <div style={{ textAlign: 'center' }}>
-                        <Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br />
-                        No archived feature toggles, go see <Link to="/features">active toggles here</Link>
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <HeaderTitle title="Toggle Archive" />
+                    <div style={{ overflowX: 'scroll' }}>
+                        {
+                            archive.length > 0 ?
+                            <DataTable
+                                rows={archive}
+                                style={{ width: '100%' }}>
+                                <TableHeader style={{ width: '25px' }} name="reviveName" cellFormatter={(reviveName) => (
+                                    <IconButton colored name="undo" onClick={() => revive(reviveName)} />
+                                )}>Revive</TableHeader>
+                                <TableHeader style={{ width: '25px' }} name="enabled" cellFormatter={(v) => (v ? 'Yes' : '-')}>
+                                    Enabled</TableHeader>
+                                <TableHeader name="name">Toggle name</TableHeader>
+                                <TableHeader numeric name="createdAt">Created</TableHeader>
+                            </DataTable> :
+                            <div style={{ textAlign: 'center' }}>
+                                <Icon name="report" style={{ color: '#aaa', fontSize: '40px' }}/><br />
+                                No archived feature toggles, go see <Link to="/features">active toggles here</Link>
+                            </div>
+                        }
                     </div>
-                }
-            </div>
+                </Cell>
+            </Grid>
         );
     }
 }
diff --git a/frontend/src/component/common/common.scss b/frontend/src/component/common/common.scss
index 58a3e74330..276cfc3800 100644
--- a/frontend/src/component/common/common.scss
+++ b/frontend/src/component/common/common.scss
@@ -4,13 +4,21 @@
     text-overflow: ellipsis;
 }
 
+.fullwidth {
+    width: 100%;
+}
+
 .divider {
     margin: 0;
     border-color: rgba(0,0,0,.12);
 }
 
-@media (max-width: 960px) {
-    .hideLt960 {
+.list {
+    margin: 0;
+}
+
+@media (max-width: 920px) {
+    .hideLt920 {
         display: none;
     }
 }
diff --git a/frontend/src/component/feature/feature-list-item-component.jsx b/frontend/src/component/feature/feature-list-item-component.jsx
index 03cd1d946b..f8d351ef30 100644
--- a/frontend/src/component/feature/feature-list-item-component.jsx
+++ b/frontend/src/component/feature/feature-list-item-component.jsx
@@ -55,7 +55,7 @@ const Feature = ({
                     <span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{description}</span>
                 </Link>
             </span>
-            <span className={commonStyles.hideLt960} style={{ flexShrink: 0 }}>
+            <span className={commonStyles.hideLt920} style={{ flexShrink: 0 }}>
                 {strategyChips}
                 {summaryChip}
             </span>
diff --git a/frontend/src/component/feature/feature.scss b/frontend/src/component/feature/feature.scss
index c27ea33db6..fe9c4b8554 100644
--- a/frontend/src/component/feature/feature.scss
+++ b/frontend/src/component/feature/feature.scss
@@ -39,7 +39,7 @@
 
 .topList {
     display: flex;
-    margin: 10px 10px 10px 10px;
+    margin: 8px;
 }
 
 .topListItem0 {
diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/index.jsx
index 36c63d0b69..acb006a7e7 100644
--- a/frontend/src/component/feature/form/index.jsx
+++ b/frontend/src/component/feature/form/index.jsx
@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import { Textfield, Switch } from 'react-mdl';
+import { Textfield, Switch, Grid, Cell } from 'react-mdl';
 import StrategiesSection from './strategies-section-container';
 
 import { FormButtons, HeaderTitle } from '../../common';
@@ -45,53 +45,57 @@ class AddFeatureToggleComponent extends Component {
         const configuredStrategies = input.strategies || [];
 
         return (
-            <form onSubmit={onSubmit(input)}>
-                {title && <HeaderTitle title={title} />}
-                <section>
-                    <Textfield
-                        floatingLabel
-                        label="Name"
-                        name="name"
-                        disabled={editmode}
-                        required
-                        value={name}
-                        error={nameError}
-                        onBlur={(v) => validateName(v.target.value)}
-                        onChange={(v) => setValue('name', trim(v.target.value))} />
-                    <br />
-                    <Textfield
-                        floatingLabel
-                        style={{ width: '100%' }}
-                        rows={1}
-                        label="Description"
-                        required
-                        value={description}
-                        onChange={(v) => setValue('description', v.target.value)} />
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <form onSubmit={onSubmit(input)}>
+                        {title && <HeaderTitle title={title} />}
+                        <section>
+                            <Textfield
+                                floatingLabel
+                                label="Name"
+                                name="name"
+                                disabled={editmode}
+                                required
+                                value={name}
+                                error={nameError}
+                                onBlur={(v) => validateName(v.target.value)}
+                                onChange={(v) => setValue('name', trim(v.target.value))} />
+                            <br />
+                            <Textfield
+                                floatingLabel
+                                style={{ width: '100%' }}
+                                rows={1}
+                                label="Description"
+                                required
+                                value={description}
+                                onChange={(v) => setValue('description', v.target.value)} />
+
+                            {!editmode && <div>
+                                <br />
+                                <Switch
+                                checked={enabled}
+                                onChange={() => {
+                                    setValue('enabled', !enabled);
+                                }}>Enabled</Switch>
+                                <hr />
+                            </div>}
+                        </section>
+
+                        <StrategiesSection
+                            configuredStrategies={configuredStrategies}
+                            addStrategy={addStrategy}
+                            updateStrategy={updateStrategy}
+                            moveStrategy={moveStrategy}
+                            removeStrategy={removeStrategy} />
 
-                    {!editmode && <div>
                         <br />
-                        <Switch
-                        checked={enabled}
-                        onChange={() => {
-                            setValue('enabled', !enabled);
-                        }}>Enabled</Switch>
-                        <hr />
-                    </div>}
-                </section>
-
-                <StrategiesSection
-                    configuredStrategies={configuredStrategies}
-                    addStrategy={addStrategy}
-                    updateStrategy={updateStrategy}
-                    moveStrategy={moveStrategy}
-                    removeStrategy={removeStrategy} />
-
-                <br />
-                <FormButtons
-                    submitText={editmode ? 'Update' : 'Create'}
-                    onCancel={onCancel}
-                />
-            </form>
+                        <FormButtons
+                            submitText={editmode ? 'Update' : 'Create'}
+                            onCancel={onCancel}
+                        />
+                    </form>
+                </Cell>
+            </Grid>
         );
     }
 
diff --git a/frontend/src/component/feature/list-component.jsx b/frontend/src/component/feature/list-component.jsx
index c7d923db9f..d9f62d66ee 100644
--- a/frontend/src/component/feature/list-component.jsx
+++ b/frontend/src/component/feature/list-component.jsx
@@ -1,8 +1,9 @@
 import React, { PropTypes } from 'react';
 import Feature from './feature-list-item-component';
 import { Link } from 'react-router';
-import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem } from 'react-mdl';
+import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem, Grid, Cell } from 'react-mdl';
 
+import { styles as commonStyles } from '../common';
 import styles from './feature.scss';
 
 export default class FeatureListComponent extends React.PureComponent {
@@ -49,70 +50,72 @@ export default class FeatureListComponent extends React.PureComponent {
         const { features, toggleFeature, featureMetrics, settings } = this.props;
 
         return (
-           <div>
-                <div className={styles.topList}>
-                    <Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
-                        { settings.showLastHour &&
-                            <ChipContact className="mdl-color--teal mdl-color-text--white">
-                                <Icon name="hourglass_full" style={{ fontSize: '16px' }} />
-                            </ChipContact> }
-                        { '1 hour' }
-                    </Chip>
-                    &nbsp;
-                    <Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
-                        { !settings.showLastHour &&
-                            <ChipContact className="mdl-color--teal mdl-color-text--white">
-                                <Icon name="hourglass_empty" style={{ fontSize: '16px' }} />
-                            </ChipContact> }
-                        { '1 minute' }
-                    </Chip>
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <div className={styles.topList}>
+                        <Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
+                            { settings.showLastHour &&
+                                <ChipContact className="mdl-color--teal mdl-color-text--white">
+                                    <Icon name="hourglass_full" style={{ fontSize: '16px' }} />
+                                </ChipContact> }
+                            { '1 hour' }
+                        </Chip>
+                        &nbsp;
+                        <Chip onClick={() => this.toggleMetrics()} className={styles.topListItem0}>
+                            { !settings.showLastHour &&
+                                <ChipContact className="mdl-color--teal mdl-color-text--white">
+                                    <Icon name="hourglass_empty" style={{ fontSize: '16px' }} />
+                                </ChipContact> }
+                            { '1 minute' }
+                        </Chip>
 
-                    <div className={styles.topListItem2} style={{ margin: '-10px 10px 0 10px'  }}>
-                        <Textfield
-                            floatingLabel
-                            value={settings.filter}
-                            onChange={(e) => { this.setFilter(e.target.value); }}
-                            label="Filter toggles"
-                            style={{ width: '100%' }}
-                        />
+                        <div className={styles.topListItem2} style={{ margin: '-10px 10px 0 10px'  }}>
+                            <Textfield
+                                floatingLabel
+                                value={settings.filter}
+                                onChange={(e) => { this.setFilter(e.target.value); }}
+                                label="Filter toggles"
+                                style={{ width: '100%' }}
+                            />
+                        </div>
+
+                        <div style={{ position: 'relative' }} className={styles.topListItem0}>
+                            <IconButton name="sort" id="demo-menu-top-right" colored title="Sort" />
+                            <Menu target="demo-menu-top-right" valign="bottom" align="right" ripple onClick={
+                                (e) => this.setSort(e.target.getAttribute('data-target'))}>
+                                <MenuItem disabled>Filter by:</MenuItem>
+                                <MenuItem disabled={!settings.sort || settings.sort === 'nosort'} data-target="nosort">Default</MenuItem>
+                                <MenuItem disabled={settings.sort === 'name'} data-target="name">Name</MenuItem>
+                                <MenuItem disabled={settings.sort === 'enabled'} data-target="enabled">Enabled</MenuItem>
+                                <MenuItem disabled={settings.sort === 'appName'} data-target="appName">Application name</MenuItem>
+                                <MenuItem disabled={settings.sort === 'created'} data-target="created">Created</MenuItem>
+                                <MenuItem disabled={settings.sort === 'strategies'} data-target="strategies">Strategies</MenuItem>
+                                <MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem>
+                            </Menu>
+                        </div>
+                        <Link to="/features/create" className={styles.topListItem0}>
+                            <IconButton ripple raised name="add" component="span" style={{ color: 'black' }}/>
+                        </Link>
                     </div>
 
-                    <div style={{ position: 'relative' }} className={styles.topListItem0}>
-                        <IconButton name="sort" id="demo-menu-top-right" colored title="Sort" />
-                        <Menu target="demo-menu-top-right" valign="bottom" align="right" ripple onClick={
-                            (e) => this.setSort(e.target.getAttribute('data-target'))}>
-                            <MenuItem disabled>Filter by:</MenuItem>
-                            <MenuItem disabled={!settings.sort || settings.sort === 'nosort'} data-target="nosort">Default</MenuItem>
-                            <MenuItem disabled={settings.sort === 'name'} data-target="name">Name</MenuItem>
-                            <MenuItem disabled={settings.sort === 'enabled'} data-target="enabled">Enabled</MenuItem>
-                            <MenuItem disabled={settings.sort === 'appName'} data-target="appName">Application name</MenuItem>
-                            <MenuItem disabled={settings.sort === 'created'} data-target="created">Created</MenuItem>
-                            <MenuItem disabled={settings.sort === 'strategies'} data-target="strategies">Strategies</MenuItem>
-                            <MenuItem disabled={settings.sort === 'metrics'} data-target="metrics">Metrics</MenuItem>
-                        </Menu>
-                    </div>
+                    <ul className={['mdl-list', commonStyles.list].join(' ')}>
+                        {features.map((feature, i) =>
+                            <Feature key={i}
+                                settings={settings}
+                                metricsLastHour={featureMetrics.lastHour[feature.name]}
+                                metricsLastMinute={featureMetrics.lastMinute[feature.name]}
+                                feature={feature}
+                                toggleFeature={toggleFeature}/>
+                        )}
+                    </ul>
+                    <hr />
                     <Link to="/features/create" className={styles.topListItem0}>
-                        <IconButton ripple raised name="add" component="span" style={{ color: 'black' }}/>
+                        <FABButton ripple component="span" mini>
+                            <Icon name="add" />
+                        </FABButton>
                     </Link>
-                </div>
-
-                <ul className="mdl-list">
-                    {features.map((feature, i) =>
-                        <Feature key={i}
-                            settings={settings}
-                            metricsLastHour={featureMetrics.lastHour[feature.name]}
-                            metricsLastMinute={featureMetrics.lastMinute[feature.name]}
-                            feature={feature}
-                            toggleFeature={toggleFeature}/>
-                    )}
-                </ul>
-                <hr />
-                <Link to="/features/create" className={styles.topListItem0}>
-                    <FABButton ripple component="span" mini>
-                        <Icon name="add" />
-                    </FABButton>
-                </Link>
-           </div>
+                </Cell>
+            </Grid>
         );
     }
 }
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index f4cf481c4d..040552d96d 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/frontend/src/component/feature/view-component.jsx
@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { Tabs, Tab, ProgressBar, IconButton } from 'react-mdl';
+import { Tabs, Tab, ProgressBar, IconButton, Grid, Cell } from 'react-mdl';
 import { hashHistory, Link } from 'react-router';
 
 import HistoryComponent from '../history/history-list-toggle-container';
@@ -90,25 +90,27 @@ export default class ViewFeatureToggleComponent extends React.Component {
         };
 
         return (
-            <div>
-                <h4>
-                    <SwitchWithLabel checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle.name)} />
-                    {featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small>
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <h4 style={{ marginTop: '16px' }}>
+                        <SwitchWithLabel checked={featureToggle.enabled} onChange={() => toggleFeature(featureToggle.name)} />
+                        {featureToggle.name} <small>{featureToggle.enabled ? 'is enabled' : 'is disabled'}</small>
 
-                    <IconButton style={{ float: 'right' }} name="delete" onClick={removeToggle} className="mdl-color-text--grey-600" />
-                    <small style={{ float: 'right', lineHeight: '38px' }}>
-                        Created {formatFullDateTime(featureToggle.createdAt)}
-                    </small>
-                </h4>
-                <div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div>
-                <Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }}>
-                    <Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
-                    <Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
-                    <Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
-                </Tabs>
+                        <IconButton style={{ float: 'right' }} name="delete" onClick={removeToggle} className="mdl-color-text--grey-600" />
+                        <small style={{ float: 'right', lineHeight: '38px' }}>
+                            Created {formatFullDateTime(featureToggle.createdAt)}
+                        </small>
+                    </h4>
+                    <div className="mdl-color-text--grey"><small>{featureToggle.description}</small></div>
+                    <Tabs activeTab={activeTabId} ripple style={{ marginBottom: '10px' }} tabBarProps={{ style: { width: '100%' } }}>
+                        <Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
+                        <Tab onClick={() => this.goToTab('edit', featureToggleName)}>Edit</Tab>
+                        <Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
+                    </Tabs>
 
-                {tabContent}
-            </div>
+                    {tabContent}
+                </Cell>
+            </Grid>
         );
     }
 }
diff --git a/frontend/src/component/history/history-component.jsx b/frontend/src/component/history/history-component.jsx
index 485654e1bc..a622b11ba3 100644
--- a/frontend/src/component/history/history-component.jsx
+++ b/frontend/src/component/history/history-component.jsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
+import { Grid, Cell } from 'react-mdl';
 import HistoryList from './history-list-container';
-
 class History extends PureComponent {
 
     componentDidMount () {
@@ -18,7 +18,11 @@ class History extends PureComponent {
         }
 
         return (
-            <HistoryList history={history} title="Last 100 changes" />
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <HistoryList history={history} title="Last 100 changes" />
+                </Cell>
+            </Grid>
         );
     }
 }
diff --git a/frontend/src/component/history/history-item-diff.jsx b/frontend/src/component/history/history-item-diff.jsx
index 78284cb624..3e921c94ac 100644
--- a/frontend/src/component/history/history-item-diff.jsx
+++ b/frontend/src/component/history/history-item-diff.jsx
@@ -77,7 +77,7 @@ class HistoryItem extends PureComponent {
             changes = <div className={KLASSES.N}>{JSON.stringify(entry.data, null, 2)}</div>;
         }
 
-        return (<pre style={{ maxWidth: '500px', overflowX: 'auto', overflowY: 'hidden', width: 'auto' }}>
+        return (<pre style={{ maxWidth: '354px', overflowX: 'auto', overflowY: 'hidden', width: 'auto' }}>
             <code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>
         </pre>);
     }
diff --git a/frontend/src/component/history/history-list-component.jsx b/frontend/src/component/history/history-list-component.jsx
index a39b70b69a..e259902ef2 100644
--- a/frontend/src/component/history/history-list-component.jsx
+++ b/frontend/src/component/history/history-list-component.jsx
@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import HistoryItemDiff from './history-item-diff';
 import HistoryItemJson from './history-item-json';
 import { Table, TableHeader } from 'react-mdl';
-import { HeaderTitle, SwitchWithLabel } from '../common';
+import { HeaderTitle, SwitchWithLabel, styles as commonStyles } from '../common';
 import { formatFullDateTime } from '../common/util';
 
-import style from './history.scss';
+import styles from './history.scss';
 
 class HistoryList extends Component {
 
@@ -32,7 +32,8 @@ class HistoryList extends Component {
                             diff: (<HistoryItemDiff  entry={entry} />),
                         }, entry))
                     }
-                    style={{ width: '100%' }}
+                    className={commonStyles.fullwidth}
+                    style={{ border: 0 }}
                 >
                 <TableHeader name="type">Type</TableHeader>
                 <TableHeader name="createdBy">User</TableHeader>
@@ -42,11 +43,13 @@ class HistoryList extends Component {
         }
 
         return (
-            <div className={style.history}>
+            <div className={styles.history}>
                 <HeaderTitle title={this.props.title} actions={
                     <SwitchWithLabel checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</SwitchWithLabel>
                 }/>
-                {entries}
+                <div style={{ overflowX: 'scroll' }}>
+                    {entries}
+                </div>
             </div>
         );
     }
diff --git a/frontend/src/component/strategies/add-strategy.jsx b/frontend/src/component/strategies/add-strategy.jsx
index 3d65ebcae6..27c8621192 100644
--- a/frontend/src/component/strategies/add-strategy.jsx
+++ b/frontend/src/component/strategies/add-strategy.jsx
@@ -1,6 +1,6 @@
 import React, { PropTypes, Component } from 'react';
 
-import { Textfield, IconButton, Menu, MenuItem, Checkbox } from 'react-mdl';
+import { Textfield, IconButton, Menu, MenuItem, Checkbox, Grid, Cell } from 'react-mdl';
 import { FormButtons } from '../common';
 
 
@@ -64,7 +64,7 @@ const Parameter = ({ set, input = {}, index }) => (
 
 const EditHeader = () => (
     <div>
-        <h4>Edit strategy</h4>
+        <h4 style={{ marginTop: '16px' }}>Edit strategy</h4>
         <p style={{ background: '#ffb7b7', padding: '16px 20px'  }}>
             Be carefull! Changing a strategy definition might also require changes to the
             implementation in the clients.
@@ -74,7 +74,7 @@ const EditHeader = () => (
 
 const CreateHeader = () => (
     <div>
-        <h4>Create a new Strategy definition</h4>
+        <h4 style={{ marginTop: '16px' }}>Create a new Strategy definition</h4>
     </div>
 );
 
@@ -130,44 +130,48 @@ class AddStrategy extends Component {
         } = this.props;
 
         return (
-             <form onSubmit={onSubmit(input)}>
-                {editmode ? <EditHeader /> : <CreateHeader />}
-                <Textfield label="Strategy name"
-                    floatingLabel
-                    name="name"
-                    required
-                    disabled={editmode}
-                    pattern="^[0-9a-zA-Z\.\-]+$"
-                    onChange={({ target }) => setValue('name', trim(target.value))}
-                    value={input.name}
-                    />
-                <br />
-                <Textfield
-                    floatingLabel
-                    style={{ width: '100%' }}
-                    rows={1}
-                    label="Description"
-                    name="description"
-                    onChange={({ target }) => setValue('description', target.value)}
-                    value={input.description}
-                    />
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <form onSubmit={onSubmit(input)}>
+                        {editmode ? <EditHeader /> : <CreateHeader />}
+                        <Textfield label="Strategy name"
+                            floatingLabel
+                            name="name"
+                            required
+                            disabled={editmode}
+                            pattern="^[0-9a-zA-Z\.\-]+$"
+                            onChange={({ target }) => setValue('name', trim(target.value))}
+                            value={input.name}
+                            />
+                        <br />
+                        <Textfield
+                            floatingLabel
+                            style={{ width: '100%' }}
+                            rows={1}
+                            label="Description"
+                            name="description"
+                            onChange={({ target }) => setValue('description', target.value)}
+                            value={input.description}
+                            />
 
 
-                <Parameters input={input.parameters} count={input._params} updateInList={updateInList} />
-                <IconButton raised name="add" title="Add parameter" onClick={(e) => {
-                    e.preventDefault();
-                    incValue('_params');
-                }}/> &nbsp;Add parameter
+                        <Parameters input={input.parameters} count={input._params} updateInList={updateInList} />
+                        <IconButton raised name="add" title="Add parameter" onClick={(e) => {
+                            e.preventDefault();
+                            incValue('_params');
+                        }}/> &nbsp;Add parameter
 
 
-                <br />
-                <hr />
+                        <br />
+                        <hr />
 
-                <FormButtons
-                    submitText={editmode ? 'Update' : 'Create'}
-                    onCancel={onCancel}
-                />
-            </form>
+                        <FormButtons
+                            submitText={editmode ? 'Update' : 'Create'}
+                            onCancel={onCancel}
+                        />
+                    </form>
+                </Cell>
+            </Grid>
         );
     }
 }
diff --git a/frontend/src/component/strategies/list-component.jsx b/frontend/src/component/strategies/list-component.jsx
index 7805ba44eb..6932a5cf07 100644
--- a/frontend/src/component/strategies/list-component.jsx
+++ b/frontend/src/component/strategies/list-component.jsx
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router';
 
-import { List, ListItem, ListItemContent, IconButton } from 'react-mdl';
-import { HeaderTitle } from '../common';
+import { List, ListItem, ListItemContent, IconButton, Grid, Cell } from 'react-mdl';
+import { HeaderTitle, styles as commonStyles } from '../common';
 
 class StrategiesListComponent extends Component {
 
@@ -18,26 +18,28 @@ class StrategiesListComponent extends Component {
         const { strategies, removeStrategy } = this.props;
 
         return (
-            <div>
-                <HeaderTitle title="Strategies"
-                    actions={
-                        <IconButton raised
-                            name="add"
-                            onClick={() => this.context.router.push('/strategies/create')}
-                            title="Add new strategy" />} />
-                <List>
-                    {strategies.length > 0 ? strategies.map((strategy, i) => (
-                            <ListItem key={i} twoLine>
-                                <ListItemContent icon="extension" subtitle={strategy.description}>
-                                    <Link to={`/strategies/view/${strategy.name}`}>
-                                        <strong>{strategy.name}</strong>
-                                    </Link>
-                                    </ListItemContent>
-                                <IconButton name="delete" onClick={() => removeStrategy(strategy)} />
-                            </ListItem>
-                        )) : <ListItem>No entries</ListItem>}
-                </List>
-            </div>
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <HeaderTitle title="Strategies"
+                        actions={
+                            <IconButton raised
+                                name="add"
+                                onClick={() => this.context.router.push('/strategies/create')}
+                                title="Add new strategy" />} />
+                    <List className={commonStyles.list}>
+                        {strategies.length > 0 ? strategies.map((strategy, i) => (
+                                <ListItem key={i} twoLine>
+                                    <ListItemContent icon="extension" subtitle={strategy.description}>
+                                        <Link to={`/strategies/view/${strategy.name}`}>
+                                            <strong>{strategy.name}</strong>
+                                        </Link>
+                                        </ListItemContent>
+                                    <IconButton name="delete" onClick={() => removeStrategy(strategy)} />
+                                </ListItem>
+                            )) : <ListItem>No entries</ListItem>}
+                    </List>
+                </Cell>
+            </Grid>
         );
     }
 }
diff --git a/frontend/src/component/strategies/strategy-details-component.jsx b/frontend/src/component/strategies/strategy-details-component.jsx
index dc5dba66a6..6a879e5b7b 100644
--- a/frontend/src/component/strategies/strategy-details-component.jsx
+++ b/frontend/src/component/strategies/strategy-details-component.jsx
@@ -1,6 +1,6 @@
 import React, { PropTypes, Component } from 'react';
 import { hashHistory } from 'react-router';
-import { Tabs, Tab, ProgressBar } from 'react-mdl';
+import { Tabs, Tab, ProgressBar, Grid, Cell } from 'react-mdl';
 import ShowStrategy from './show-strategy-component';
 import EditStrategy from './edit-container';
 import { HeaderTitle } from '../common';
@@ -61,18 +61,20 @@ export default class StrategyDetails extends Component {
         const tabContent = this.getTabContent(activeTabId);
 
         return (
-            <div>
-                <HeaderTitle title={strategy.name} subtitle={strategy.description} />
-                <Tabs activeTab={activeTabId} ripple>
-                    <Tab onClick={() => this.goToTab('view')}>Details</Tab>
-                    <Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
-                </Tabs>
-                <section>
-                    <div className="content">
-                        {tabContent}
-                    </div>
-                </section>
-            </div>
+            <Grid className="mdl-color--white">
+                <Cell col={12}>
+                    <HeaderTitle title={strategy.name} subtitle={strategy.description} />
+                    <Tabs activeTab={activeTabId} ripple>
+                        <Tab onClick={() => this.goToTab('view')}>Details</Tab>
+                        <Tab onClick={() => this.goToTab('edit')}>Edit</Tab>
+                    </Tabs>
+                    <section>
+                        <div className="content">
+                            {tabContent}
+                        </div>
+                    </section>
+                </Cell>
+            </Grid>
         );
     }
 }
diff --git a/frontend/src/component/styles.scss b/frontend/src/component/styles.scss
index e3e8c4c734..3f4a6a77d3 100644
--- a/frontend/src/component/styles.scss
+++ b/frontend/src/component/styles.scss
@@ -1,3 +1,34 @@
+.content {
+    width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+@media (max-width: 1800px) {
+    .content {
+        width: 66.66%;
+    }
+}
+@media (max-width: 1260px) {
+    .content {
+        width: 840px;
+    }
+}
+@media (max-width: 920px) {
+    .content {
+        width: auto;
+        margin-left: 40px;
+        margin-right: 40px;
+    }
+}
+@media (max-width: 600px) {
+    .content {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
 .headerTitleLink {
     text-decoration: none;
 }