diff --git a/frontend/src/component/application/application-edit-component.js b/frontend/src/component/application/application-edit-component.js
index 53e0b73c63..70b150b879 100644
--- a/frontend/src/component/application/application-edit-component.js
+++ b/frontend/src/component/application/application-edit-component.js
@@ -2,7 +2,12 @@
 import React, { Component, PureComponent } from 'react';
 
 import { Link } from 'react-router';
-import { Grid, Cell, List, ListItem, ListItemContent, Textfield, Icon, ProgressBar } from 'react-mdl';
+import {
+    Grid, Cell,
+    List, ListItem, ListItemContent,
+    Textfield, Icon, ProgressBar,
+    Tabs, Tab,
+} from 'react-mdl';
 import { HeaderTitle, ExternalIconLink } from '../common';
 
 class StatefulTextfield extends Component {
@@ -27,7 +32,12 @@ class StatefulTextfield extends Component {
     }
 }
 
-class ClientStrategies extends PureComponent {
+class ClientApplications extends PureComponent {
+    constructor (props) {
+        super(props);
+        this.state = { activeTab: 0 };
+    }
+
     componentDidMount () {
         this.props.fetchApplication(this.props.appName);
     }
@@ -51,80 +61,92 @@ class ClientStrategies extends PureComponent {
             color,
         } = application;
 
+        const content = this.state.activeTab === 0 ? (
+            <Grid>
+                <Cell col={3}>
+                    <h6> Toggles</h6>
+                    <hr />
+                    <List>
+                    {seenToggles.map((name, i) =>
+                        <ListItem key={i}>
+                            <ListItemContent icon="check box">
+                                <Link to={`/features/edit/${name}`}>
+                                    {name}
+                                </Link>
+                            </ListItemContent>
+                    </ListItem>)}
+                    </List>
+                </Cell>
+                <Cell col={3}>
+                    <h6>Implemented strategies</h6>
+                    <hr />
+                    <List>
+                        {strategies.map((name, i) => (
+                            <ListItem key={`${name}-${i}`}>
+                                <ListItemContent icon="toc">
+                                    <Link to={`/strategies/view/${name}`}>
+                                        {name}
+                                    </Link>
+                                </ListItemContent>
+                            </ListItem>
+                        ))}
+                    </List>
+                </Cell>
+                <Cell col={6}>
+                    <h6>{instances.length} Instances connected</h6>
+                    <hr />
+                    <List>
+                    {instances.map(({ instanceId, clientIp, lastSeen }, i) => (
+                        <ListItem key={i} twoLine>
+                            <ListItemContent
+                                icon="timeline"
+                                subtitle={
+                                    <span>{clientIp} last seen at <small>{new Date(lastSeen).toLocaleString('nb-NO')}</small></span>
+                                }>
+                                {instanceId}
+                            </ListItemContent>
+                        </ListItem>
+                    ))}
+                    </List>
+                </Cell>
+            </Grid>) : (
+            <Grid>
+                <Cell col={12}>
+                    <h5>Edit app meta data</h5>
+                </Cell>
+                <Cell col={6}>
+                    <StatefulTextfield
+                        value={url} label="URL" onBlur={(e) => storeApplicationMetaData(appName, 'url', e.target.value)} /><br />
+                    <StatefulTextfield
+                        value={description}
+                        label="Description" rows={5} onBlur={(e) => storeApplicationMetaData(appName, 'description', e.target.value)} />
+                </Cell>
+                <Cell col={6}>
+                    <StatefulTextfield
+                        value={icon} label="Select icon" onBlur={(e) => storeApplicationMetaData(appName, 'icon', e.target.value)} />
+                    <StatefulTextfield
+                        value={color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} />
+                </Cell>
+            </Grid>);
+
+
+
         return (
             <div>
                 <HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
                     actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
                 />
-                <Grid>
-                    <Cell col={3}>
-                        <h6> Toggles</h6>
-                        <hr />
-                        <List>
-                        {seenToggles.map((name, i) =>
-                            <ListItem key={i}>
-                                <ListItemContent icon="check box">
-                                    <Link to={`/features/edit/${name}`}>
-                                        {name}
-                                    </Link>
-                                </ListItemContent>
-                        </ListItem>)}
-                        </List>
-                    </Cell>
-                    <Cell col={3}>
-                        <h6>Implemented strategies</h6>
-                        <hr />
-                        <List>
-                            {strategies.map((name, i) => (
-                                <ListItem key={`${name}-${i}`}>
-                                    <ListItemContent icon="toc">
-                                        <Link to={`/strategies/view/${name}`}>
-                                            {name}
-                                        </Link>
-                                    </ListItemContent>
-                                </ListItem>
-                            ))}
-                        </List>
-                    </Cell>
-                    <Cell col={6}>
-                        <h6>{instances.length} Instances connected</h6>
-                        <hr />
-                        <List>
-                        {instances.map(({ instanceId, clientIp, lastSeen }, i) => (
-                            <ListItem key={i} twoLine>
-                                <ListItemContent
-                                    icon="timeline"
-                                    subtitle={
-                                        <span>{clientIp} last seen at <small>{new Date(lastSeen).toLocaleString('nb-NO')}</small></span>
-                                    }>
-                                    {instanceId}
-                                </ListItemContent>
-                            </ListItem>
-                        ))}
-                        </List>
-                    </Cell>
 
-                    <Cell col={12}>
-                        <h5>Edit app meta data</h5>
-                    </Cell>
-                    <Cell col={6}>
-                        <StatefulTextfield
-                            value={url} label="URL" onBlur={(e) => storeApplicationMetaData(appName, 'url', e.target.value)} /><br />
-                        <StatefulTextfield
-                            value={description}
-                            label="Description" rows={5} onBlur={(e) => storeApplicationMetaData(appName, 'description', e.target.value)} />
-                    </Cell>
-                    <Cell col={6}>
-                        <StatefulTextfield
-                            value={icon} label="Select icon" onBlur={(e) => storeApplicationMetaData(appName, 'icon', e.target.value)} />
-                        <StatefulTextfield
-                            value={color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} />
-                    </Cell>
-                </Grid>
+                <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
+                    <Tab>Metrics</Tab>
+                    <Tab>Edit</Tab>
+                </Tabs>
+
+               {content}
             </div>
         );
     }
 }
 
 
-export default ClientStrategies;
+export default ClientApplications;
diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js
index 0e6e4ad458..047c3ec78e 100644
--- a/frontend/src/component/common/index.js
+++ b/frontend/src/component/common/index.js
@@ -24,7 +24,7 @@ export const AppsLinkList = ({ apps }) => (
 
 export const HeaderTitle = ({ title, actions, subtitle }) => (
     <div style={{ display: 'flex', borderBottom: '1px solid #f1f1f1', marginBottom: '10px', padding: '16px 20px ' }}>
-            <div style={{ flex: '1' }}>
+            <div style={{ flex: '2' }}>
                 <h6 style={{ margin: 0 }}>{title}</h6>
                 {subtitle && <small>{subtitle}</small>}
             </div>