diff --git a/frontend/src/component/feature/__tests__/__snapshots__/view-component-test.jsx.snap b/frontend/src/component/feature/__tests__/__snapshots__/view-component-test.jsx.snap
index 7eacca3a01..ae2edeee58 100644
--- a/frontend/src/component/feature/__tests__/__snapshots__/view-component-test.jsx.snap
+++ b/frontend/src/component/feature/__tests__/__snapshots__/view-component-test.jsx.snap
@@ -13,7 +13,6 @@ exports[`renders correctly with one feature 1`] = `
   <react-mdl-CardTitle
     style={
       Object {
-        "paddingTop": "24px",
         "wordBreak": "break-all",
       }
     }
@@ -21,20 +20,14 @@ exports[`renders correctly with one feature 1`] = `
     Another
   </react-mdl-CardTitle>
   <react-mdl-CardText>
-    <react-mdl-Textfield
-      floatingLabel={true}
-      label="Description"
-      onBlur={[Function]}
-      onChange={[Function]}
-      required={true}
-      rows={1}
-      style={
-        Object {
-          "width": "100%",
-        }
-      }
-      value="another's description"
-    />
+    another's description
+     
+    <a
+      href="#edit"
+      onClick={[Function]}
+    >
+      edit
+    </a>
   </react-mdl-CardText>
   <react-mdl-CardActions
     border={true}
diff --git a/frontend/src/component/feature/form/update-description-component.jsx b/frontend/src/component/feature/form/update-description-component.jsx
new file mode 100644
index 0000000000..66673795bf
--- /dev/null
+++ b/frontend/src/component/feature/form/update-description-component.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, CardText, Textfield } from 'react-mdl';
+
+import { UPDATE_FEATURE } from '../../../permissions';
+
+export default class UpdateDescriptionComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { editMode: false };
+    }
+
+    static propTypes = {
+        isFeatureView: PropTypes.bool.isRequired,
+        update: PropTypes.func,
+        featureToggle: PropTypes.object,
+        hasPermission: PropTypes.func.isRequired,
+    };
+
+    onEditMode = (description, evt) => {
+        evt.preventDefault();
+        this.setState({ editMode: true, description });
+    };
+
+    updateValue = evt => {
+        evt.preventDefault();
+        this.setState({ description: evt.target.value });
+    };
+
+    onSave = evt => {
+        evt.preventDefault();
+        this.props.update(this.state.description);
+        this.setState({ editMode: false, description: undefined });
+    };
+
+    onCancel = evt => {
+        evt.preventDefault();
+        this.setState({ editMode: false, description: undefined });
+    };
+
+    renderRead({ description, isFeatureView, hasPermission }) {
+        return (
+            <CardText>
+                {description}&nbsp;
+                {isFeatureView && hasPermission(UPDATE_FEATURE) ? (
+                    <a href="#edit" onClick={this.onEditMode.bind(this, description)}>
+                        edit
+                    </a>
+                ) : null}
+            </CardText>
+        );
+    }
+
+    renderEdit() {
+        const { description } = this.state;
+        return (
+            <CardText>
+                <Textfield
+                    floatingLabel
+                    style={{ width: '100%' }}
+                    label="Description"
+                    required
+                    value={description}
+                    onChange={this.updateValue}
+                />
+                <div>
+                    <Button type="submit" raised accent onClick={this.onSave}>
+                        Save
+                    </Button>
+                    &nbsp;
+                    <Button type="cancel" raised onClick={this.onCancel}>
+                        Cancel
+                    </Button>
+                </div>
+            </CardText>
+        );
+    }
+
+    render() {
+        const { editMode } = this.state;
+        return editMode ? this.renderEdit(this.props) : this.renderRead(this.props);
+    }
+}
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index 17f99d488a..dcc36b78aa 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/frontend/src/component/feature/view-component.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Tabs, Tab, ProgressBar, Button, Card, CardText, CardTitle, CardActions, Textfield, Switch } from 'react-mdl';
+import { Tabs, Tab, ProgressBar, Button, Card, CardTitle, CardActions, Switch } from 'react-mdl';
 import { Link } from 'react-router-dom';
 
 import HistoryComponent from '../history/history-list-toggle-container';
@@ -8,6 +8,7 @@ import MetricComponent from './metric-container';
 import EditFeatureToggle from './form/form-update-feature-container';
 import EditVariants from './variant/update-variant-container';
 import ViewFeatureToggle from './form/form-view-feature-container';
+import UpdateDescriptionComponent from './form/update-description-component';
 import { styles as commonStyles } from '../common';
 import { CREATE_FEATURE, DELETE_FEATURE, UPDATE_FEATURE } from '../../permissions';
 
@@ -133,8 +134,8 @@ export default class ViewFeatureToggleComponent extends React.Component {
             revive(featureToggle.name);
             this.props.history.push('/features');
         };
-        const updateFeatureToggle = e => {
-            let feature = { ...featureToggle, description: e.target.value };
+        const updateDescription = description => {
+            let feature = { ...featureToggle, description };
             if (Array.isArray(feature.strategies)) {
                 feature.strategies.forEach(s => {
                     delete s.id;
@@ -143,38 +144,16 @@ export default class ViewFeatureToggleComponent extends React.Component {
 
             this.props.editFeatureToggle(feature);
         };
-        const setValue = (v, event) => {
-            featureToggle[v] = event.target.value;
-            this.forceUpdate();
-        };
 
         return (
             <Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
-                <CardTitle style={{ paddingTop: '24px', wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
-                <CardText>
-                    {this.isFeatureView && hasPermission(UPDATE_FEATURE) ? (
-                        <Textfield
-                            floatingLabel
-                            style={{ width: '100%' }}
-                            rows={1}
-                            label="Description"
-                            required
-                            value={featureToggle.description}
-                            onChange={v => setValue('description', v)}
-                            onBlur={updateFeatureToggle}
-                        />
-                    ) : (
-                        <Textfield
-                            disabled
-                            floatingLabel
-                            style={{ width: '100%' }}
-                            rows={1}
-                            label="Description"
-                            required
-                            value={featureToggle.description}
-                        />
-                    )}
-                </CardText>
+                <CardTitle style={{ wordBreak: 'break-all' }}>{featureToggle.name}</CardTitle>
+                <UpdateDescriptionComponent
+                    isFeatureView={this.isFeatureView}
+                    description={featureToggle.description}
+                    update={updateDescription}
+                    hasPermission={hasPermission}
+                />
 
                 <CardActions
                     border