diff --git a/.github/workflows/ci_workflow.yml b/.github/workflows/ci_workflow.yml
new file mode 100644
index 0000000..7dcf320
--- /dev/null
+++ b/.github/workflows/ci_workflow.yml
@@ -0,0 +1,52 @@
+name: CI
+
+on: [pull_request]
+
+jobs:
+  build:
+    env:
+      working-directory: .
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      - name: Build
+        run: |
+            docker build -t bot-flow .
+        working-directory: ${{env.working-directory}}
+  test:
+    env:
+      working-directory: ./app
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      - name: Install dependencies
+        run: |
+          yarn install
+        working-directory: ${{env.working-directory}}
+      - name: Run tests
+        run: |
+          yarn test --ci --coverage --color
+        working-directory: ${{env.working-directory}}
+  lint:
+    env:
+      working-directory: ./app
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      - name: Install dependencies
+        run: |
+          yarn install
+        working-directory: ${{env.working-directory}}
+      - name: Run eslint
+        run: |
+          yarn lint
+        working-directory: ${{env.working-directory}}
\ No newline at end of file
diff --git a/app/.eslintrc.json b/app/.eslintrc.json
new file mode 100644
index 0000000..13b8277
--- /dev/null
+++ b/app/.eslintrc.json
@@ -0,0 +1,27 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "jest": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "airbnb"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
+}
\ No newline at end of file
diff --git a/app/package.json b/app/package.json
index 2dc7b2f..52b91e0 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,7 +22,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -42,7 +43,12 @@
   "devDependencies": {
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint": "6.6.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "react-test-renderer": "^16.9.0"
   }
 }
diff --git a/app/src/components/CustomSnackbar.js b/app/src/components/CustomSnackbar.js
index 54a9b20..cf79230 100644
--- a/app/src/components/CustomSnackbar.js
+++ b/app/src/components/CustomSnackbar.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 import clsx from 'clsx';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
@@ -19,7 +19,7 @@ const variantIcon = {
   info: InfoIcon,
 };
 
-const useStyles1 = makeStyles(theme => ({
+const useStyles1 = makeStyles((theme) => ({
   success: {
     backgroundColor: green[600],
   },
@@ -47,19 +47,21 @@ const useStyles1 = makeStyles(theme => ({
 
 export default function SnackbarContentCustom(props) {
   const classes = useStyles1();
-  const { className, message, onClose, variant, } = props;
+  const {
+    className, message, onClose, variant,
+  } = props;
   const Icon = variantIcon[variant];
 
   return (
     <SnackbarContent
       className={clsx(classes[variant], className)}
       aria-describedby="client-snackbar"
-      message={
+      message={(
         <span id="client-snackbar" className={classes.message}>
           <Icon className={clsx(classes.icon, classes.iconVariant)} />
           {message}
         </span>
-      }
+      )}
       action={[
         <IconButton key="close" aria-label="close" color="inherit" onClick={onClose}>
           <CloseIcon className={classes.icon} />
@@ -67,4 +69,4 @@ export default function SnackbarContentCustom(props) {
       ]}
     />
   );
-}
\ No newline at end of file
+}
diff --git a/app/src/components/DeleteSnackbar.js b/app/src/components/DeleteSnackbar.js
index 2473e04..fdb6900 100644
--- a/app/src/components/DeleteSnackbar.js
+++ b/app/src/components/DeleteSnackbar.js
@@ -1,40 +1,40 @@
-
-import React, { Component } from "react";
-import {message} from '../utils/messages';
+import React, { Component } from 'react';
 import { Button } from '@material-ui/core';
 import Snackbar from '@material-ui/core/Snackbar';
+import { message } from '../utils/messages';
 
 class DeleteSnackbar extends Component {
-    handleUndoSnack() {
-        this.props.handleUndo();
-        this.props.handleSnackbarClick();
-    }
+  handleUndoSnack() {
+    this.props.handleUndo();
+    this.props.handleSnackbarClick();
+  }
 
-    render() {
-        return (
-            <Snackbar
-                anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'center',
-                }}
-                open={this.props.undo}
-                autoHideDuration={2000}
-                onClose={() => this.props.handleSnackbarClick(false)}
-                ContentProps={{
-                    'aria-describedby': 'message-id',
-                }}
-                message={<span className="success" id="message-id">{message.deleted}</span>}
-                action={[
-                    <Button
-                        key="undo"
-                        color="secondary"
-                        size="small"
-                        onClick={() => this.handleUndoSnack()}>
-                        Desfazer
-                    </Button>
-                ]}
-            />
-        )
-    }
+  render() {
+    return (
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        open={this.props.undo}
+        autoHideDuration={2000}
+        onClose={() => this.props.handleSnackbarClick(false)}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span className="success" id="message-id">{message.deleted}</span>}
+        action={[
+          <Button
+            key="undo"
+            color="secondary"
+            size="small"
+            onClick={() => this.handleUndoSnack()}
+          >
+            Desfazer
+          </Button>,
+        ]}
+      />
+    );
+  }
 }
-export default DeleteSnackbar;
\ No newline at end of file
+export default DeleteSnackbar;
diff --git a/app/src/components/DeletionConfirmationDialog.js b/app/src/components/DeletionConfirmationDialog.js
index bd8baac..f038633 100644
--- a/app/src/components/DeletionConfirmationDialog.js
+++ b/app/src/components/DeletionConfirmationDialog.js
@@ -1,37 +1,34 @@
-
-import React from "react";
-import { message } from '../utils/messages';
+import React from 'react';
 import { Button } from '@material-ui/core';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import { message } from '../utils/messages';
 
-const DeletionConfirmationDialog = ({ dialog_status, handleClose, deleteItem }) => {
-    return (
-        <Dialog
-            open={dialog_status}
-            aria-labelledby="alert-dialog-title"
-            aria-describedby="alert-dialog-description"
-        >
-            <DialogTitle id="alert-dialog-title">{message.delete_confirmation}</DialogTitle>
-            <DialogActions>
-                <Button
-                    color="primary"
-                    onClick={() => handleClose(false)}
-                >
-                    Cancelar
-                    </Button>
-                <Button
-                    autoFocus
-                    color="primary"
-                    onClick={() => deleteItem()}
-                >
-                    Apagar
-                    </Button>
-            </DialogActions>
-        </Dialog>
+const DeletionConfirmationDialog = ({ dialog_status, handleClose, deleteItem }) => (
+  <Dialog
+    open={dialog_status}
+    aria-labelledby="alert-dialog-title"
+    aria-describedby="alert-dialog-description"
+  >
+    <DialogTitle id="alert-dialog-title">{message.delete_confirmation}</DialogTitle>
+    <DialogActions>
+      <Button
+        color="primary"
+        onClick={() => handleClose(false)}
+      >
+        Cancelar
+      </Button>
+      <Button
+        autoFocus
+        color="primary"
+        onClick={() => deleteItem()}
+      >
+        Apagar
+      </Button>
+    </DialogActions>
+  </Dialog>
 
-    )
-}
+);
 
-export default DeletionConfirmationDialog;
\ No newline at end of file
+export default DeletionConfirmationDialog;
diff --git a/app/src/components/ExampleStory.js b/app/src/components/ExampleStory.js
index cddde83..4490729 100644
--- a/app/src/components/ExampleStory.js
+++ b/app/src/components/ExampleStory.js
@@ -1,97 +1,96 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import Typography from '@material-ui/core/Typography';
 import { IntentBalloon, UtterFirstBalloon, UtterBalloon } from '../styles/exampleBalloon';
 import { message } from '../utils/messages';
 
 const styles = {
-    title: {
-        alignSelf: 'center',
-        margin: '14px',
-    },
-    container: {
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: "calc(100vh - 74px - 72px)",
-        borderLeft: "solid 1px #ddd",
-        alignItems: 'flex-start',
-        width: '100%',
-    }
-}
+  title: {
+    alignSelf: 'center',
+    margin: '14px',
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 'calc(100vh - 74px - 72px)',
+    borderLeft: 'solid 1px #ddd',
+    alignItems: 'flex-start',
+    width: '100%',
+  },
+};
 
 class ExampleStory extends Component {
-    exampleUtter(item, index) {
-        let examples = item.example.map((example, ex_index) => {
-            if (ex_index === 0 || item.example.length <= 1) {
-                return (
-                    <UtterFirstBalloon key={'example_' + index + ex_index}>
-                        <Typography variant="body2">{example}</Typography>
-                    </UtterFirstBalloon>
-                )
-            } else {
-                return (
-                    < UtterBalloon key={'example_' + index + ex_index} >
-                        <Typography variant="body2">{example}</Typography>
-                    </UtterBalloon >
-                )
-            }
-        })
-
-        return examples;
-    }
-
-    exampleSimpleUtter(item, index) {
-        const examples = item.example.map((example, ex_index) =>
-            <UtterBalloon key={'example_' + index + ex_index}>
-                <Typography variant="body2">{example}</Typography>
-            </UtterBalloon>
-        )
-        return examples;
-    }
-
-    exampleIntent(item, index) {
+  exampleUtter(item, index) {
+    const examples = item.example.map((example, ex_index) => {
+      if (ex_index === 0 || item.example.length <= 1) {
         return (
-            <IntentBalloon key={'example_' + index}>
-                <Typography variant="body2">{item.example}?</Typography>
-            </IntentBalloon>
+          <UtterFirstBalloon key={`example_${index}${ex_index}`}>
+            <Typography variant="body2">{example}</Typography>
+          </UtterFirstBalloon>
         );
-    }
+      }
+      return (
+        <UtterBalloon key={`example_${index}${ex_index}`}>
+          <Typography variant="body2">{example}</Typography>
+        </UtterBalloon>
+      );
+    });
 
-    getExamples() {
+    return examples;
+  }
 
-        let last_item = {};
-        let content = this.props.content;
+  exampleSimpleUtter(item, index) {
+    const examples = item.example.map((example, ex_index) => (
+      <UtterBalloon key={`example_${index}${ex_index}`}>
+        <Typography variant="body2">{example}</Typography>
+      </UtterBalloon>
+    ));
+    return examples;
+  }
 
-        for (let i = 0, size = content.length; i < size; i++) {
-            if (last_item.type === "utter") {
-                content[i] = { ...content[i], sequence: true };
-            } else if (content[i].sequence) {
-                content[i].sequence = false;
-            }
+  exampleIntent(item, index) {
+    return (
+      <IntentBalloon key={`example_${index}`}>
+        <Typography variant="body2">
+          {item.example}
+          ?
+        </Typography>
+      </IntentBalloon>
+    );
+  }
 
-            last_item = content[i];
-        }
+  getExamples() {
+    let last_item = {};
+    const { content } = this.props;
 
-        return content.map((item, index) => {
-            let element;
-            if (item.type === "intent") { element = this.exampleIntent(item, index) }
-            else if (item.sequence) { element = this.exampleSimpleUtter(item, index) }
-            else { element = this.exampleUtter(item, index) };
-            return element;
-        })
-    }
+    for (let i = 0, size = content.length; i < size; i++) {
+      if (last_item.type === 'utter') {
+        content[i] = { ...content[i], sequence: true };
+      } else if (content[i].sequence) {
+        content[i].sequence = false;
+      }
 
-    render() {
-        return (
-            <div style={styles.container}>
-                <Typography variant="body2" style={styles.title} color="primary">
-                    {this.props.content.length !== 0 ? "Exemplo:" : message.no_examples}
-                </Typography>
-                {this.getExamples()}
-            </div>
-        );
+      last_item = content[i];
     }
+
+    return content.map((item, index) => {
+      let element;
+      if (item.type === 'intent') { element = this.exampleIntent(item, index); } else if (item.sequence) { element = this.exampleSimpleUtter(item, index); } else { element = this.exampleUtter(item, index); }
+      return element;
+    });
+  }
+
+  render() {
+    return (
+      <div style={styles.container}>
+        <Typography variant="body2" style={styles.title} color="primary">
+          {this.props.content.length !== 0 ? 'Exemplo:' : message.no_examples}
+        </Typography>
+        {this.getExamples()}
+      </div>
+    );
+  }
 }
-const mapStateToProps = state => { return { ...state.story } };
+const mapStateToProps = (state) => ({ ...state.story });
 
-export default connect(mapStateToProps)(ExampleStory);
\ No newline at end of file
+export default connect(mapStateToProps)(ExampleStory);
diff --git a/app/src/components/IntentForm.js b/app/src/components/IntentForm.js
index 0affcfd..8b3ad6d 100644
--- a/app/src/components/IntentForm.js
+++ b/app/src/components/IntentForm.js
@@ -1,37 +1,37 @@
-import { connect } from "react-redux";
+import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import Grid from '@material-ui/core/Grid';
 import DeleteIcon from '@material-ui/icons/Delete';
 import TextField from '@material-ui/core/TextField';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import Typography from '@material-ui/core/Typography';
-import SnackbarDelete from './DeleteSnackbar'
+import SnackbarDelete from './DeleteSnackbar';
 
-import { Creators as IntentAction } from "../ducks/intents";
+import { Creators as IntentAction } from '../ducks/intents';
 
 const style = {
   new_question: {
-    opacity: "0.2",
-    position: "relative",
-    cursor: "pointer",
-    border: "solid 1px #000",
-    borderRadius: "4px",
-    padding: "10px 0 10px 14px",
-  }
-}
+    opacity: '0.2',
+    position: 'relative',
+    cursor: 'pointer',
+    border: 'solid 1px #000',
+    borderRadius: '4px',
+    padding: '10px 0 10px 14px',
+  },
+};
 
 class IntentForm extends Component {
   constructor(props) {
     super(props);
     this.state = {
       undo_delete: false,
-      there_is_auto_focus: false
-    }
+      there_is_auto_focus: false,
+    };
 
-    this.handleSnackbarClick = this.handleSnackbarClick.bind(this)
+    this.handleSnackbarClick = this.handleSnackbarClick.bind(this);
   }
 
   handleDelete(intent_index) {
@@ -47,7 +47,7 @@ class IntentForm extends Component {
 
   handleClick(key = 'Enter') {
     if (key === 'Enter') {
-      this.props.addIntent()
+      this.props.addIntent();
       this.setState({ there_is_auto_focus: true });
     }
   }
@@ -59,34 +59,32 @@ class IntentForm extends Component {
   setIntentContents() {
     let samples = [];
     if (this.props.content !== undefined) {
-      samples = (this.props.content).map((sample, sample_index) => {
-        return (
-          <li key={"sample_content" + sample_index}>
-            <Grid container spacing={2} alignItems="flex-end" >
-              <Grid item xs={11}>
-                <TextField
-                  id="outlined-multiline-flexible"
-                  fullWidth
-                  margin="dense"
-                  variant="outlined"
-                  value={sample}
-                  onKeyUp={(event) => { this.handleClick(event.key) }}
-                  autoFocus={this.state.there_is_auto_focus}
-                  onChange={(e) => this.props.setIntentContent(sample_index, e.target.value)}
-                  InputProps={{
-                    endAdornment: <InputAdornment position="end"><strong>?</strong></InputAdornment>,
-                  }}
-                />
-              </Grid>
-              <Grid item xs={1}>
-                <IconButton color="primary" m={0} tabIndex={-1} onClick={() => this.handleDelete(sample_index)}>
-                  <DeleteIcon style={{ opacity: 0.5 }} />
-                </IconButton>
-              </Grid>
+      samples = (this.props.content).map((sample, sample_index) => (
+        <li key={`sample_content${sample_index}`}>
+          <Grid container spacing={2} alignItems="flex-end">
+            <Grid item xs={11}>
+              <TextField
+                id="outlined-multiline-flexible"
+                fullWidth
+                margin="dense"
+                variant="outlined"
+                value={sample}
+                onKeyUp={(event) => { this.handleClick(event.key); }}
+                autoFocus={this.state.there_is_auto_focus}
+                onChange={(e) => this.props.setIntentContent(sample_index, e.target.value)}
+                InputProps={{
+                  endAdornment: <InputAdornment position="end"><strong>?</strong></InputAdornment>,
+                }}
+              />
+            </Grid>
+            <Grid item xs={1}>
+              <IconButton color="primary" m={0} tabIndex={-1} onClick={() => this.handleDelete(sample_index)}>
+                <DeleteIcon style={{ opacity: 0.5 }} />
+              </IconButton>
             </Grid>
-          </li>
-        )
-      })
+          </Grid>
+        </li>
+      ));
     }
 
     return samples;
@@ -100,15 +98,17 @@ class IntentForm extends Component {
           <ul style={{ marginTop: 24 }}>
             {this.setIntentContents()}
           </ul>
-          <Grid container spacing={2} alignItems="flex-end" >
+          <Grid container spacing={2} alignItems="flex-end">
             <SnackbarDelete
               handleSnackbarClick={this.handleSnackbarClick}
               handleUndo={this.props.undoDeleteIntentContent}
               undo={this.state.undo_delete}
             />
             <Grid item xs={11}>
-              <div style={style.new_question} tabIndex={0}
-                onClick={() => { this.handleClick() }}
+              <div
+                style={style.new_question}
+                tabIndex={0}
+                onClick={() => { this.handleClick(); }}
               >
                 <Typography variant="body2">Nova pergunta</Typography>
               </div>
@@ -123,8 +123,8 @@ class IntentForm extends Component {
   }
 }
 
-const mapStateToProps = state => { return { ...state.intent } };
+const mapStateToProps = (state) => ({ ...state.intent });
 
-const mapDispatchToProps = dispatch => bindActionCreators(IntentAction, dispatch);
+const mapDispatchToProps = (dispatch) => bindActionCreators(IntentAction, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(IntentForm);
diff --git a/app/src/components/ItemsList.js b/app/src/components/ItemsList.js
index 4e3c52c..ed4bde1 100644
--- a/app/src/components/ItemsList.js
+++ b/app/src/components/ItemsList.js
@@ -1,43 +1,44 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 
 import Typography from '@material-ui/core/Typography';
-import { List, ListItem, ListItemIcon, ListItemText, styled } from '@material-ui/core';
-import { message } from "../utils/messages";
-import { setHighlight } from "../utils/utils";
+import {
+  List, ListItem, ListItemIcon, ListItemText, styled,
+} from '@material-ui/core';
+import { message } from '../utils/messages';
+import { setHighlight } from '../utils/utils';
 
 const StyledListItem = styled(ListItem)({
-  backgroundColor: "transparent",
-  borderRadius: "12px 0 0 12px",
+  backgroundColor: 'transparent',
+  borderRadius: '12px 0 0 12px',
 
-  "&:hover": {
-    backgroundColor: "rgba(246,249,249,0.6)", //primary.light $40%
+  '&:hover': {
+    backgroundColor: 'rgba(246,249,249,0.6)', // primary.light $40%
   },
-  "&.Mui-selected": {
-    color: "#f15035", //secondary
-    backgroundColor: "#f6f9f9", //primary.light
-    "&:hover": {
-      backgroundColor: "#f6f9f9" //primary.light
-    }
+  '&.Mui-selected': {
+    color: '#f15035', // secondary
+    backgroundColor: '#f6f9f9', // primary.light
+    '&:hover': {
+      backgroundColor: '#f6f9f9', // primary.light
+    },
   },
-  "& .MuiListItemIcon-root": {
-    fill: "#4b3953", //primary
-    "&.Mui-selected": {
-      fill: "#f15035", //secondary
-    }
+  '& .MuiListItemIcon-root': {
+    fill: '#4b3953', // primary
+    '&.Mui-selected': {
+      fill: '#f15035', // secondary
+    },
+  },
+  '&.Mui-selected .MuiListItemIcon-root': {
+    fill: '#f15035', // secondary
   },
-  "&.Mui-selected .MuiListItemIcon-root": {
-    fill: "#f15035", //secondary
-  }
 });
 
 export default class ItemList extends Component {
-
   getItemsList(items, icon, highlighted_text, selected_item_position) {
     const new_items = items.map((item, index) => (
       <StyledListItem
         button
-        id={"items_list_" + index}
-        key={"items_list" + index}
+        id={`items_list_${index}`}
+        key={`items_list${index}`}
         selected={(selected_item_position) === index}
         onClick={() => this.handleListItemClick(item, index)}
       >
@@ -59,9 +60,9 @@ export default class ItemList extends Component {
 
   getErrorMessage() {
     return (
-        <li style={{textAlign:'center', paddingTop:'10em'}}>
-            <Typography variant="caption" color="secondary">{message.no_result}</Typography>
-        </li>
+      <li style={{ textAlign: 'center', paddingTop: '10em' }}>
+        <Typography variant="caption" color="secondary">{message.no_result}</Typography>
+      </li>
     );
   }
 
diff --git a/app/src/components/ListFilter.js b/app/src/components/ListFilter.js
index 37da849..3d8cc00 100644
--- a/app/src/components/ListFilter.js
+++ b/app/src/components/ListFilter.js
@@ -1,35 +1,35 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 import Divider from '@material-ui/core/Divider';
-import ItemsList from "./ItemsList";
 
 import SearchIcon from '@material-ui/icons/Search';
 import CloseIcon from '@material-ui/icons/Close';
+import ItemsList from './ItemsList';
 
 const style = {
   filter_items_container: {
-    padding: "12px 8px",
-    //position: "relative",
-    //background: "yellow",
-    //bottom: 0
+    padding: '12px 8px',
+    // position: "relative",
+    // background: "yellow",
+    // bottom: 0
   },
   list_container: {
-    height: "calc(100vh - 74px - 64px - 80px - 10px)",
-    paddingLeft: "24px",
-    overflowY: "auto"
-  }
-}
+    height: 'calc(100vh - 74px - 64px - 80px - 10px)',
+    paddingLeft: '24px',
+    overflowY: 'auto',
+  },
+};
 
 export default class ListFilter extends Component {
   constructor(props) {
     super(props);
-    this.state = { value: "" };
+    this.state = { value: '' };
   }
 
   filterItems(items) {
     if (items !== undefined) {
-      return items.filter(item => (item.name).includes(this.state.value));
+      return items.filter((item) => (item.name).includes(this.state.value));
     }
     return [];
   }
@@ -44,18 +44,18 @@ export default class ListFilter extends Component {
 
   getFilterIcon() {
     if ((this.state.value).trim().length === 0) {
-      return <SearchIcon />
+      return <SearchIcon />;
     }
     return (
       <CloseIcon
         onClick={() => this.cleanFilter()}
-        style={{ cursor: "pointer" }}
+        style={{ cursor: 'pointer' }}
       />
-    )
+    );
   }
 
   cleanFilter() {
-    this.setState({ value: "" });
+    this.setState({ value: '' });
   }
 
   render() {
@@ -88,6 +88,6 @@ export default class ListFilter extends Component {
           />
         </div>
       </div>
-    )
+    );
   }
-}
\ No newline at end of file
+}
diff --git a/app/src/components/MenuNavbar.js b/app/src/components/MenuNavbar.js
index 35d184d..091be69 100644
--- a/app/src/components/MenuNavbar.js
+++ b/app/src/components/MenuNavbar.js
@@ -1,50 +1,51 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import {
+  Tab, Tabs, AppBar, Toolbar,
+} from '@material-ui/core';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 import StoryIcon from '../icons/StoryIcon';
 import UtterIcon from '../icons/UtterIcon';
 import IntentIcon from '../icons/IntentIcon';
-import { Tab, Tabs } from '@material-ui/core';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
 
 import AppIcon from '../icons/AppIcon';
-import Button from '@material-ui/core/Button';
 import { message } from '../utils/messages.js';
-import { AppBar, Toolbar } from '@material-ui/core';
-import { DOWNLOAD_URL} from '../utils/url_routes.js';
 
-const useStyles = makeStyles(theme => ({
+import { DOWNLOAD_URL } from '../utils/url_routes.js';
+
+const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
     marginBottom: 2,
   },
   tabWrapper: {
-    flexDirection: "row",
-    justifyContent: "space-around",
+    flexDirection: 'row',
+    justifyContent: 'space-around',
   },
 }));
 
-const StyledTab = withStyles(theme => ({
+const StyledTab = withStyles((theme) => ({
   root: {
-    fontStyle: "italic",
+    fontStyle: 'italic',
     fontSize: 14,
-    textTransform: "uppercase",
+    textTransform: 'uppercase',
     fontWeight: theme.typography.fontWeightRegular,
     color: theme.palette.primary.light,
     '& svg': {
-      display: "none",
+      display: 'none',
     },
     '&$selected': {
       fontWeight: theme.typography.fontWeightMedium,
       '& svg': {
-        display: "inline",
+        display: 'inline',
         fill: theme.palette.primary.light,
       },
     },
   },
   selected: {},
   wrapper: {},
-}))(props => <Tab {...props} />);
-
+}))((props) => <Tab {...props} />);
 
 export default function MenuNavbar() {
   const classes = useStyles();
@@ -53,39 +54,42 @@ export default function MenuNavbar() {
   function handleChange(event, newValue) {
     const url = window.location.pathname;
     if (newValue !== undefined) {
-      setValue(newValue)
+      setValue(newValue);
     } else {
       if (url === '/' || url.includes('/stories/')) {
         return 0;
-      } else if (url.includes('/intents/')) {
+      } if (url.includes('/intents/')) {
         return 1;
-      } else if (url.includes('/utters/')) {
+      } if (url.includes('/utters/')) {
         return 2;
       }
     }
   }
 
   return (
-      <AppBar id="app-bar-menu">
-        <Toolbar>
-          <Link onClick={() => handleChange(undefined, 0)} to="/">
-            <AppIcon />
-          </Link>
-            <Tabs className={classes.root}
-              value={value}
-              onChange={handleChange}
-              centered>
-              <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<StoryIcon />} label="Diálogos" to="/" component={Link} />
-              <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<IntentIcon />} label="Perguntas" to="/intents/new" component={Link} />
-              <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<UtterIcon />} label="Respostas" to="/utters/new" component={Link} />
-            </Tabs>
-          <Button
-            color="secondary"
-            variant="contained"
-            href={DOWNLOAD_URL}>
-            {message.download} 
-          </Button>
-        </Toolbar>
-      </AppBar>
+    <AppBar id="app-bar-menu">
+      <Toolbar>
+        <Link onClick={() => handleChange(undefined, 0)} to="/">
+          <AppIcon />
+        </Link>
+        <Tabs
+          className={classes.root}
+          value={value}
+          onChange={handleChange}
+          centered
+        >
+          <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<StoryIcon />} label="Diálogos" to="/" component={Link} />
+          <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<IntentIcon />} label="Perguntas" to="/intents/new" component={Link} />
+          <StyledTab classes={{ wrapper: classes.tabWrapper }} icon={<UtterIcon />} label="Respostas" to="/utters/new" component={Link} />
+        </Tabs>
+        <Button
+          color="secondary"
+          variant="contained"
+          href={DOWNLOAD_URL}
+        >
+          {message.download}
+        </Button>
+      </Toolbar>
+    </AppBar>
   );
 }
diff --git a/app/src/components/NameField.js b/app/src/components/NameField.js
index 870f610..fb0a77d 100644
--- a/app/src/components/NameField.js
+++ b/app/src/components/NameField.js
@@ -1,59 +1,59 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import TextField from '@material-ui/core/TextField';
-import { message } from "../utils/messages";
+import { message } from '../utils/messages';
 
 class NameField extends Component {
-    isRepeatedName(items, name) {
-        if (items !== undefined) {
-            let founded = items.find((item) => (
-                (item.name === name) &&
-                (item.id !== this.props.item_id)
-            ));
-
-            return (founded !== undefined ? message.repeated_name : "");
-        }
+  isRepeatedName(items, name) {
+    if (items !== undefined) {
+      const founded = items.find((item) => (
+        (item.name === name)
+                && (item.id !== this.props.item_id)
+      ));
+
+      return (founded !== undefined ? message.repeated_name : '');
     }
+  }
 
-    hasSpecialCharacteres(name) {
-        let helper_text = "";
-        let regex = /^[\w\d_]+$/;
+  hasSpecialCharacteres(name) {
+    let helper_text = '';
+    const regex = /^[\w\d_]+$/;
 
-        if (!regex.test(name) && name.length > 0) {
-            helper_text = message.no_special_char;
-        }
-        
-        return helper_text;
+    if (!regex.test(name) && name.length > 0) {
+      helper_text = message.no_special_char;
     }
 
-    setName(items, name) {
-        let helper_text = this.hasSpecialCharacteres(name);
-        if (helper_text.length!==0) {
-            name = name.substr(0, name.length - 1);
-        } else {
-            helper_text = this.isRepeatedName(items, name);
-        }
+    return helper_text;
+  }
 
-        this.props.setItemName(name, helper_text);
+  setName(items, name) {
+    let helper_text = this.hasSpecialCharacteres(name);
+    if (helper_text.length !== 0) {
+      name = name.substr(0, name.length - 1);
+    } else {
+      helper_text = this.isRepeatedName(items, name);
     }
 
-    render() {
-        return (
-            <div>
-            <TextField
-                fullWidth
-                type="text"
-                autoFocus={true}
-                id={this.props.label}
-                value={this.props.name}
-                label={this.props.label}
-                helperText={this.props.helper_text}
-                placeholder={this.props.placeholder}
-                error={this.props.helper_text !== ""}
-                onChange={(e) => this.setName(this.props.items, e.target.value)}
-            />
-            </div>
-        )
-    }
+    this.props.setItemName(name, helper_text);
+  }
+
+  render() {
+    return (
+      <div>
+        <TextField
+          fullWidth
+          type="text"
+          autoFocus
+          id={this.props.label}
+          value={this.props.name}
+          label={this.props.label}
+          helperText={this.props.helper_text}
+          placeholder={this.props.placeholder}
+          error={this.props.helper_text !== ''}
+          onChange={(e) => this.setName(this.props.items, e.target.value)}
+        />
+      </div>
+    );
+  }
 }
 
 export default NameField;
diff --git a/app/src/components/Snackbar.js b/app/src/components/Snackbar.js
index 9326b84..6c622e5 100644
--- a/app/src/components/Snackbar.js
+++ b/app/src/components/Snackbar.js
@@ -1,24 +1,22 @@
-
 import Snackbar from '@material-ui/core/Snackbar';
-import SnackbarContent from "./CustomSnackbar"
-import React from "react";
+import React from 'react';
+import SnackbarContent from './CustomSnackbar';
 
-const MessageSnackbar = ({ notification_text, handleClose, variant = "success" }) => {
-    return (
-        <Snackbar
-            anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'center',
-            }}
-            autoHideDuration={2000}
-            open={notification_text !== ''}
-            onClose={() => handleClose()}>
-            <SnackbarContent    
-                variant={variant}
-                message={notification_text}
-                onClose={() => handleClose()}
-            />
-        </Snackbar>
-    )
-}
-export default MessageSnackbar;
\ No newline at end of file
+const MessageSnackbar = ({ notification_text, handleClose, variant = 'success' }) => (
+  <Snackbar
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'center',
+    }}
+    autoHideDuration={2000}
+    open={notification_text !== ''}
+    onClose={() => handleClose()}
+  >
+    <SnackbarContent
+      variant={variant}
+      message={notification_text}
+      onClose={() => handleClose()}
+    />
+  </Snackbar>
+);
+export default MessageSnackbar;
diff --git a/app/src/components/StoryCard.js b/app/src/components/StoryCard.js
index 0f784d5..60c0ceb 100644
--- a/app/src/components/StoryCard.js
+++ b/app/src/components/StoryCard.js
@@ -1,69 +1,68 @@
-import { Link } from 'react-router-dom'
-import React, { Component } from "react";
+import { Link } from 'react-router-dom';
+import React, { Component } from 'react';
 import { Card } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import UtterIcon from '../icons/UtterIcon';
 import IntentIcon from '../icons/IntentIcon';
-import Typography from '@material-ui/core/Typography';
-import { setHighlight } from "../utils/utils";
+import { setHighlight } from '../utils/utils';
 
 const styles = {
-    intent: {
-        color: '#4b3953',
-        fontWeight: 'bold',
-        margin: '0px 0px 2px 0px'
-    },
-    utter: {
-        color: '#f26a53',
-        margin: '2px 0px 2px 12px'
-    },
-    intent_icon: {
-        fill: '#4b3953',
-        marginRight: 8,
-        verticalAlign: 'middle',
-    },
-    utter_icon: {
-        fill: '#f26a53',
-        marginRight: 8,
-        verticalAlign: 'middle',
-    },
-    card: {
-        background: 'white',
-        margin: '0 8px 16px 8px',
-        breakInside: 'avoid-column',
-        padding: '16px'
-    },
-}
+  intent: {
+    color: '#4b3953',
+    fontWeight: 'bold',
+    margin: '0px 0px 2px 0px',
+  },
+  utter: {
+    color: '#f26a53',
+    margin: '2px 0px 2px 12px',
+  },
+  intent_icon: {
+    fill: '#4b3953',
+    marginRight: 8,
+    verticalAlign: 'middle',
+  },
+  utter_icon: {
+    fill: '#f26a53',
+    marginRight: 8,
+    verticalAlign: 'middle',
+  },
+  card: {
+    background: 'white',
+    margin: '0 8px 16px 8px',
+    breakInside: 'avoid-column',
+    padding: '16px',
+  },
+};
 
 export default class StoryCard extends Component {
-    getContent(content) {
-        let list = content.map((item, index) => {
-            if (item.type === "intent") {
-                return (
-                    <Typography key={'story_card_item_' + index} style={styles.intent} varant="body1" noWrap>
-                        <IntentIcon style={styles.intent_icon} />
-                        {setHighlight(item.name, this.props.highlighted_text)}
-                    </Typography>
-                )
-            }
-            else {
-                return (
-                    <Typography key={'story_card_item_' + index} style={styles.utter} varant="body1" noWrap>
-                        <UtterIcon style={styles.utter_icon} />
-                        {setHighlight(item.name, this.props.highlighted_text)}
-                    </Typography>
-                )
-            }
-        })
-        return list;
-    }
-
-    render() {
+  getContent(content) {
+    const list = content.map((item, index) => {
+      if (item.type === 'intent') {
         return (
-            <Link to={'/stories/' + this.props.story.id} style={{ textDecoration: 'none' }}>
-                <Card style={styles.card}>
-                    {this.getContent(this.props.story.content)}
-                </Card>
-            </Link>
+          <Typography key={`story_card_item_${index}`} style={styles.intent} varant="body1" noWrap>
+            <IntentIcon style={styles.intent_icon} />
+            {setHighlight(item.name, this.props.highlighted_text)}
+          </Typography>
         );
-    }
+      }
+
+      return (
+        <Typography key={`story_card_item_${index}`} style={styles.utter} varant="body1" noWrap>
+          <UtterIcon style={styles.utter_icon} />
+          {setHighlight(item.name, this.props.highlighted_text)}
+        </Typography>
+      );
+    });
+    return list;
+  }
+
+  render() {
+    return (
+      <Link to={`/stories/${this.props.story.id}`} style={{ textDecoration: 'none' }}>
+        <Card style={styles.card}>
+          {this.getContent(this.props.story.content)}
+        </Card>
+      </Link>
+    );
+  }
 }
diff --git a/app/src/components/StoryList.js b/app/src/components/StoryList.js
index e77ba31..b622ca5 100644
--- a/app/src/components/StoryList.js
+++ b/app/src/components/StoryList.js
@@ -1,180 +1,182 @@
-import { connect } from "react-redux";
-import React, { Component } from "react";
+import { connect } from 'react-redux';
+import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
-import UtterIcon from '../icons/UtterIcon';
-import { message } from "../utils/messages";
-import IntentIcon from '../icons/IntentIcon';
 import { Grid, Card } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
 import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import SnackbarDelete from '../components/DeleteSnackbar';
-import { Creators as StoryAction } from "../ducks/stories";
-import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import UtterIcon from '../icons/UtterIcon';
+import { message } from '../utils/messages';
+import IntentIcon from '../icons/IntentIcon';
+import SnackbarDelete from './DeleteSnackbar';
+import { Creators as StoryAction } from '../ducks/stories';
 
 const styles = {
-    intent_icon: {
-        fill: '#4b3953',
-    },
-    utter_icon: {
-        fill: '#f26a53',
-    },
-    card_intent: {
-        border: '1px solid #4b3953',
-        color: '#4b3953',
-        boxShadow: 'none',
-        padding: "12px 12px 6px",
-
-    },
-    card_utter: {
-        border: '1px solid #f26a53',
-        color: '#f26a53',
-        marginLeft: '24px',
-        boxShadow: 'none',
-        padding: "12px 12px 6px",
-    }
-}
+  intent_icon: {
+    fill: '#4b3953',
+  },
+  utter_icon: {
+    fill: '#f26a53',
+  },
+  card_intent: {
+    border: '1px solid #4b3953',
+    color: '#4b3953',
+    boxShadow: 'none',
+    padding: '12px 12px 6px',
+
+  },
+  card_utter: {
+    border: '1px solid #f26a53',
+    color: '#f26a53',
+    marginLeft: '24px',
+    boxShadow: 'none',
+    padding: '12px 12px 6px',
+  },
+};
 
 const grid = 8;
 
 const getItemStyle = (isDragging, draggableStyle) => ({
-    userSelect: "none",
-    padding: grid * 2,
-    margin: `0 0 ${grid}px 0`,
-    display: 'flex',
-    background: 'white',
+  userSelect: 'none',
+  padding: grid * 2,
+  margin: `0 0 ${grid}px 0`,
+  display: 'flex',
+  background: 'white',
 
-    ...draggableStyle
+  ...draggableStyle,
 });
 
 const getUtterStyle = (isDragging, draggableStyle) => ({
-    ...getItemStyle(isDragging, draggableStyle),
-    ...styles.card_utter
-})
+  ...getItemStyle(isDragging, draggableStyle),
+  ...styles.card_utter,
+});
 
 const getIntentStyle = (isDragging, draggableStyle) => ({
-    ...getItemStyle(isDragging, draggableStyle),
-    ...styles.card_intent
-})
-
+  ...getItemStyle(isDragging, draggableStyle),
+  ...styles.card_intent,
+});
 
-const getListStyle = isDraggingOver => ({
-    background: isDraggingOver ? "#f6f9f9" : "white",
-    padding: grid,
-    width: "420px",
+const getListStyle = (isDraggingOver) => ({
+  background: isDraggingOver ? '#f6f9f9' : 'white',
+  padding: grid,
+  width: '420px',
 
 });
 
 class StoryList extends Component {
-    constructor(props) {
-        super(props);
-        this.onDragEnd = this.onDragEnd.bind(this);
-        this.state = {
-            undo_delete: false
-        }
-        this.handleSnackbarClick = this.handleSnackbarClick.bind(this)
-    }
-
-    getIcon(type) {
-        return type === "intent" ? <IntentIcon style={styles.intent_icon} /> : <UtterIcon style={styles.utter_icon} />
-    }
-
-    onDragEnd(result) {
-        if (!result.destination) {
-            return;
-        }
-        this.props.reorderContent(result.source.index, result.destination.index)
+  constructor(props) {
+    super(props);
+    this.onDragEnd = this.onDragEnd.bind(this);
+    this.state = {
+      undo_delete: false,
+    };
+    this.handleSnackbarClick = this.handleSnackbarClick.bind(this);
+  }
+
+  getIcon(type) {
+    return type === 'intent' ? <IntentIcon style={styles.intent_icon} /> : <UtterIcon style={styles.utter_icon} />;
+  }
+
+  onDragEnd(result) {
+    if (!result.destination) {
+      return;
     }
-
-    getDrag(provided, snapshot) {
-        return (
-            <div
-                {...provided.droppableProps}
+    this.props.reorderContent(result.source.index, result.destination.index);
+  }
+
+  getDrag(provided, snapshot) {
+    return (
+      <div
+        {...provided.droppableProps}
+        ref={provided.innerRef}
+        style={getListStyle(snapshot.isDraggingOver)}
+      >
+        {this.props.content.map((item, content_position) => (
+          <Draggable key={`list_${content_position}`} draggableId={`item${content_position}`} index={content_position}>
+            {(provided, snapshot) => (
+              <div
+                key={`card_${item.id}`}
                 ref={provided.innerRef}
-                style={getListStyle(snapshot.isDraggingOver)}
-            >
-                {this.props.content.map((item, content_position) => (
-                    <Draggable key={'list_' + content_position} draggableId={'item' + content_position} index={content_position}>
-                        {(provided, snapshot) => (
-                            <div key={"card_" + item.id}
-                                ref={provided.innerRef}
-                                {...provided.draggableProps}
-                                {...provided.dragHandleProps}
-                            >
-                                <Grid container spacing={2}>
-                                    <Grid item xs={11}>
-                                        <Card style={item.type === "intent" ?
-                                            getIntentStyle(
-                                                provided.draggableProps.style,
-                                            ) : getUtterStyle(
-                                                provided.draggableProps.style,
-                                            )}
-                                        >
-                                            <Grid container>
-                                                <Grid item xs={1}>
-                                                    {this.getIcon(item.type)}
-                                                </Grid>
-                                                <Grid item xs={11}>
-                                                    <Typography varant="body1" noWrap>{item.name}</Typography>
-                                                </Grid>
-                                            </Grid>
-                                        </Card>
-                                    </Grid>
-                                    <Grid item xs={1}>
-                                        <IconButton color="primary" m={0}
-                                            onClick={() => this.handleDelete(content_position)}>
-                                            <DeleteIcon style={{ opacity: 0.5 }} />
-                                        </IconButton>
-                                    </Grid>
-                                </Grid>
-                            </div>
-                        )}
-                    </Draggable>
-                ))}
-            </div>
-        )
-    }
-
-    getContent() {
-        if (this.props.content.length !== 0) {
-            return (
-                <div>
-                    <DragDropContext onDragEnd={this.onDragEnd}>
-                        <Droppable droppableId="droppable">
-                            {(provided, snapshot) => this.getDrag(provided, snapshot)}
-                        </Droppable>
-                    </DragDropContext>
-                </div>
-            )
-
-        } else {
-            return <div style={{padding:'24px'}}><Typography variant="body1">{message.no_dialogs}</Typography></div>
-        }
-    }
-    handleSnackbarClick(value) {
-        this.setState({ undo_delete: value });
-    }
-    handleDelete(content_position) {
-        this.handleSnackbarClick(true);
-        this.props.deleteContent(content_position);
-    }
-
-    render() {
-        return (
-            <div>
-                {this.getContent()}
-
-                <SnackbarDelete
-                    handleSnackbarClick={this.handleSnackbarClick}
-                    handleUndo={this.props.undoDeleteContent}
-                    undo={this.state.undo_delete}
-                />
-            </div>
-        );
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}
+              >
+                <Grid container spacing={2}>
+                  <Grid item xs={11}>
+                    <Card style={item.type === 'intent'
+                      ? getIntentStyle(
+                        provided.draggableProps.style,
+                      ) : getUtterStyle(
+                        provided.draggableProps.style,
+                      )}
+                    >
+                      <Grid container>
+                            <Grid item xs={1}>
+                                {this.getIcon(item.type)}
+                              </Grid>
+                            <Grid item xs={11}>
+                                <Typography varant="body1" noWrap>{item.name}</Typography>
+                              </Grid>
+                          </Grid>
+                    </Card>
+                  </Grid>
+                  <Grid item xs={1}>
+                    <IconButton
+                      color="primary" m={0}
+                      onClick={() => this.handleDelete(content_position)}
+                    >
+                      <DeleteIcon style={{ opacity: 0.5 }} />
+                    </IconButton>
+                  </Grid>
+                </Grid>
+              </div>
+            )}
+          </Draggable>
+        ))}
+      </div>
+    );
+  }
+
+  getContent() {
+    if (this.props.content.length !== 0) {
+      return (
+        <div>
+          <DragDropContext onDragEnd={this.onDragEnd}>
+            <Droppable droppableId="droppable">
+              {(provided, snapshot) => this.getDrag(provided, snapshot)}
+            </Droppable>
+          </DragDropContext>
+        </div>
+      );
     }
+    return <div style={{ padding: '24px' }}><Typography variant="body1">{message.no_dialogs}</Typography></div>;
+  }
+
+  handleSnackbarClick(value) {
+    this.setState({ undo_delete: value });
+  }
+
+  handleDelete(content_position) {
+    this.handleSnackbarClick(true);
+    this.props.deleteContent(content_position);
+  }
+
+  render() {
+    return (
+      <div>
+        {this.getContent()}
+
+        <SnackbarDelete
+          handleSnackbarClick={this.handleSnackbarClick}
+          handleUndo={this.props.undoDeleteContent}
+          undo={this.state.undo_delete}
+        />
+      </div>
+    );
+  }
 }
-const mapStateToProps = state => { return { ...state.story } };
+const mapStateToProps = (state) => ({ ...state.story });
 
-const mapDispatchToProps = dispatch => bindActionCreators(StoryAction, dispatch);
+const mapDispatchToProps = (dispatch) => bindActionCreators(StoryAction, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(StoryList);
diff --git a/app/src/components/StorySnackbar.js b/app/src/components/StorySnackbar.js
index a0ec388..957247d 100644
--- a/app/src/components/StorySnackbar.js
+++ b/app/src/components/StorySnackbar.js
@@ -1,24 +1,21 @@
-
 import Snackbar from '@material-ui/core/Snackbar';
-import SnackbarContent from "./CustomSnackbar"
-import React from "react";
+import React from 'react';
+import SnackbarContent from './CustomSnackbar';
 
-const MessageSnackbar = ({ notification_text, handleClose, variant = "success" }) => {
-    return (
-        <Snackbar
-            anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'center',
-            }}
-            autoHideDuration={null}
-            open={notification_text !== ''}
-            >
-            <SnackbarContent    
-                variant={variant}
-                message={notification_text}
-                onClose={() => handleClose()}
-            />
-        </Snackbar>
-    )
-}
-export default MessageSnackbar;
\ No newline at end of file
+const MessageSnackbar = ({ notification_text, handleClose, variant = 'success' }) => (
+  <Snackbar
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'center',
+    }}
+    autoHideDuration={null}
+    open={notification_text !== ''}
+  >
+    <SnackbarContent
+      variant={variant}
+      message={notification_text}
+      onClose={() => handleClose()}
+    />
+  </Snackbar>
+);
+export default MessageSnackbar;
diff --git a/app/src/components/ToolbarName.js b/app/src/components/ToolbarName.js
index 3ccb835..73e55ff 100644
--- a/app/src/components/ToolbarName.js
+++ b/app/src/components/ToolbarName.js
@@ -1,6 +1,4 @@
-import NameField from './NameField.js'
-import { Done } from '../styles/button';
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import Grid from '@material-ui/core/Grid';
 import Menu from '@material-ui/core/Menu';
 import Button from '@material-ui/core/Button';
@@ -10,129 +8,132 @@ import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import InfoIcon from '@material-ui/icons/InfoOutlined';
 import Tooltip from '@material-ui/core/Tooltip';
+import { Done } from '../styles/button';
+import NameField from './NameField.js';
 
 const style = {
-    toolbar: {
-        background: "#f6f9f9",
-        padding: "4px"
-    },
-}
+  toolbar: {
+    background: '#f6f9f9',
+    padding: '4px',
+  },
+};
 
-const options = ['Apagar']
+const options = ['Apagar'];
 
 export default class ToolbarName extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            anchorEl: null,
-            open: false,
-        }
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      anchorEl: null,
+      open: false,
+    };
+  }
 
-    getMoreOptions() {
-        return (
-            <Menu
-                keepMounted
-                id="long-menu"
-                open={this.state.open}
-                anchorEl={this.state.anchorEl}
-                PaperProps={{ style: { width: 150 } }}
-                onClose={e => this.handleMenuClick(e, false)}
-            >
-                {
-                    options.map(option => (
-                        <MenuItem
-                            key={option}
-                            selected={option === 'Apagar'}
-                            onClick={() => this.handleDelete()}
-                        >
-                            {option}
-                        </MenuItem>
+  getMoreOptions() {
+    return (
+      <Menu
+        keepMounted
+        id="long-menu"
+        open={this.state.open}
+        anchorEl={this.state.anchorEl}
+        PaperProps={{ style: { width: 150 } }}
+        onClose={(e) => this.handleMenuClick(e, false)}
+      >
+        {
+                    options.map((option) => (
+                      <MenuItem
+                        key={option}
+                        selected={option === 'Apagar'}
+                        onClick={() => this.handleDelete()}
+                      >
+                        {option}
+                      </MenuItem>
                     ))
                 }
-            </Menu>
-        );
-    }
+      </Menu>
+    );
+  }
 
-    handleMenuClick(event, is_open) {
-        if (is_open) {
-            this.setState({
-                anchorEl: event.currentTarget,
-                open: is_open
-            });
-        } else {
-            this.setState({
-                anchorEl: null,
-                open: is_open
-            });
-        }
+  handleMenuClick(event, is_open) {
+    if (is_open) {
+      this.setState({
+        anchorEl: event.currentTarget,
+        open: is_open,
+      });
+    } else {
+      this.setState({
+        anchorEl: null,
+        open: is_open,
+      });
     }
+  }
 
-    handleClick() {
-        this.props.saveData(this.props.item);
-    }
+  handleClick() {
+    this.props.saveData(this.props.item);
+  }
 
-    handleDelete() {
-        this.props.deleteItem(this.props.item.id);
-        this.setState({ open: false });
-    }
+  handleDelete() {
+    this.props.deleteItem(this.props.item.id);
+    this.setState({ open: false });
+  }
 
-    getDeleteOption() {
-        if (this.props.item.id !== '') {
-            return (
-                <IconButton
-                    aria-label="more"
-                    aria-haspopup="true"
-                    aria-controls="long-menu"
-                    onClick={e => this.handleMenuClick(e, true)}
-                >
-                    <MoreVertIcon />
-                </IconButton>
-            )
-        }
+  getDeleteOption() {
+    if (this.props.item.id !== '') {
+      return (
+        <IconButton
+          aria-label="more"
+          aria-haspopup="true"
+          aria-controls="long-menu"
+          onClick={(e) => this.handleMenuClick(e, true)}
+        >
+          <MoreVertIcon />
+        </IconButton>
+      );
     }
+  }
 
-    render() {
-        return (
-            <Toolbar style={style.toolbar}>
-                <Grid item xs={2} />
-                <Grid item xs={4}>
-                    {this.props.story ? null : (
-                        <NameField
-                            name={this.props.name}
-                            items={this.props.items}
-                            item_id={this.props.item.id}
-                            label={this.props.name_label}
-                            placeholder={this.props.placeholder}
-                            setItemName={this.props.setItemName}
-                            helper_text={this.props.helper_text !== undefined ? this.props.helper_text : ''}
-                        />
-                    )}
-                </Grid>
-                <Grid item xs={1}>
-                {this.props.story ? null : (
-                    <Tooltip title={<h2>{this.props.name_good_pratice}</h2>}>
-                        <IconButton aria-label="delete">
-                            <InfoIcon />
-                        </IconButton>
-                    </Tooltip>
-                )}
-                </Grid>
-                <Grid item xs={2} />
-                <Grid item xs={3}>
-                    <Button
-                        color="secondary"
-                        variant="contained"
-                        disabled={!this.props.is_enabled}
-                        onClick={() => this.handleClick()}
-                    >
-                        <Done />Gravar
-                    </Button>
+  render() {
+    return (
+      <Toolbar style={style.toolbar}>
+        <Grid item xs={2} />
+        <Grid item xs={4}>
+          {this.props.story ? null : (
+            <NameField
+              name={this.props.name}
+              items={this.props.items}
+              item_id={this.props.item.id}
+              label={this.props.name_label}
+              placeholder={this.props.placeholder}
+              setItemName={this.props.setItemName}
+              helper_text={this.props.helper_text !== undefined ? this.props.helper_text : ''}
+            />
+          )}
+        </Grid>
+        <Grid item xs={1}>
+          {this.props.story ? null : (
+            <Tooltip title={<h2>{this.props.name_good_pratice}</h2>}>
+              <IconButton aria-label="delete">
+                <InfoIcon />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Grid>
+        <Grid item xs={2} />
+        <Grid item xs={3}>
+          <Button
+            color="secondary"
+            variant="contained"
+            disabled={!this.props.is_enabled}
+            onClick={() => this.handleClick()}
+          >
+            <Done />
+            Gravar
+          </Button>
 
-                    {this.getDeleteOption()}
-                    {this.getMoreOptions()}
-                </Grid>
-            </Toolbar>
-        )
-    }
+          {this.getDeleteOption()}
+          {this.getMoreOptions()}
+        </Grid>
+      </Toolbar>
+    );
+  }
 }
diff --git a/app/src/ducks/index.js b/app/src/ducks/index.js
index 7c4ce85..d97402f 100644
--- a/app/src/ducks/index.js
+++ b/app/src/ducks/index.js
@@ -1,19 +1,18 @@
 import thunk from 'redux-thunk';
-import { combineReducers } from 'redux'
-import { createStore, applyMiddleware } from 'redux';
+import { combineReducers, createStore, applyMiddleware } from 'redux';
 
-import utterReducer from './utters'
-import storyReducer from './stories'
-import intentReducer from './intents'
+import utterReducer from './utters';
+import storyReducer from './stories';
+import intentReducer from './intents';
 
 function configureStore() {
   return createStore(
     combineReducers({
       intent: intentReducer,
       utter: utterReducer,
-      story: storyReducer
+      story: storyReducer,
     }),
-    applyMiddleware(thunk)
+    applyMiddleware(thunk),
   );
 }
 
diff --git a/app/src/ducks/intents.js b/app/src/ducks/intents.js
index 1eb3ed0..56b0a60 100644
--- a/app/src/ducks/intents.js
+++ b/app/src/ducks/intents.js
@@ -1,203 +1,181 @@
 import axios from 'axios';
+import { createActions, createReducer } from 'reduxsauce';
 import { message } from '../utils/messages';
 import { Intent } from '../utils/DataFormat.js';
 import { INTENT_URL } from '../utils/url_routes.js';
-import { createActions, createReducer } from 'reduxsauce';
 
 const INITIAL_STATE = {
-    intents: [],
-    mode: 'Intent',
-    name: '',
-    helper_text: '',
-    old_name: '',
-    notification_text: '',
-    content: [''],
-    old_content: [''],
+  intents: [],
+  mode: 'Intent',
+  name: '',
+  helper_text: '',
+  old_name: '',
+  notification_text: '',
+  content: [''],
+  old_content: [''],
 };
 
 export const addIntent = (state = INITIAL_STATE) => {
-    let new_intent = [...state.content];
-    new_intent.push('')
-
-    return {
-        ...state,
-        content: new_intent,
-        old_content: [...new_intent]
-    };
-}
+  const new_intent = [...state.content];
+  new_intent.push('');
+
+  return {
+    ...state,
+    content: new_intent,
+    old_content: [...new_intent],
+  };
+};
 
 export const setIntentContent = (state = INITIAL_STATE, action) => {
-    let content = [...state.content];
-    content[action.intent_position] = action.text
+  const content = [...state.content];
+  content[action.intent_position] = action.text;
 
-    return {
-        ...state,
-        content: content
-    };
-}
+  return {
+    ...state,
+    content,
+  };
+};
 
 export const deleteIntentContent = (state = INITIAL_STATE, action) => {
-    let content = [...state.content]
-    let old_item_history = [...state.content]
-
-    content.splice(action.intent_position, 1);
-
-    return {
-        ...state,
-        content: content,
-        old_content: old_item_history
-    };
-}
-
-export const undoDeleteIntentContent = (state = INITIAL_STATE) => {
-    return {
-        ...state,
-        content: [...state.old_content]
-    }
-}
+  const content = [...state.content];
+  const old_item_history = [...state.content];
 
-export const selectIntent = (state = INITIAL_STATE, action) => {
-    let selected_item = action.item;
-    let selected_item_position = action.item_position;
-    
-    if (selected_item_position < 0) {
-        state.intents.find((item, index) => {
-            selected_item_position = index;
-            return (item.id === action.item.id || item.name === action.item.name);
-        });
-    }
+  content.splice(action.intent_position, 1);
+
+  return {
+    ...state,
+    content,
+    old_content: old_item_history,
+  };
+};
+
+export const undoDeleteIntentContent = (state = INITIAL_STATE) => ({
+  ...state,
+  content: [...state.old_content],
+});
 
-    return {
-        ...state,
-        id: selected_item.id,
-        name: selected_item.name,
-        old_name: selected_item.name,
-        selected_item_position: selected_item_position,
-        content: [...selected_item.samples],
-        old_content: [...selected_item.samples],
-        helper_text: ''
-    };
-}
+export const selectIntent = (state = INITIAL_STATE, action) => {
+  const selected_item = action.item;
+  let selected_item_position = action.item_position;
+
+  if (selected_item_position < 0) {
+    state.intents.find((item, index) => {
+      selected_item_position = index;
+      return (item.id === action.item.id || item.name === action.item.name);
+    });
+  }
+
+  return {
+    ...state,
+    id: selected_item.id,
+    name: selected_item.name,
+    old_name: selected_item.name,
+    selected_item_position,
+    content: [...selected_item.samples],
+    old_content: [...selected_item.samples],
+    helper_text: '',
+  };
+};
 
 export const createNewIntent = (state = INITIAL_STATE) => {
-    const new_intent = new Intent();
-
-    return {
-        ...state,
-        id: new_intent.id,
-        selected_item_position: -1,
-        name: new_intent.name,
-        old_name: new_intent.name,
-        content: [...new_intent.samples],
-        old_content: [...new_intent.samples]
-    };
-}
-
-export const setIntentName = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        name: action.name,
-        helper_text: action.helper_text
-    };
-}
-
-export const notifyAction = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        notification_text: action.text
-    };
-}
-
-export const getIntents = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        intents: action.intents
-    };
-}
-
-export const createOrUpdateItem = (mode = 'post', new_item, message = '') => {
-    return async (dispatch) => {
-        try {
-            const mode_url = (mode === 'post') ? INTENT_URL : INTENT_URL + new_item.id;
-            let intent;
-            await axios[mode](mode_url, new_item)
-                .then((resp) => {
-                    intent = resp.data;
-                })
-
-            await dispatch(Creators.getIntents());
-            await dispatch(Creators.selectIntent(intent.id, -1));
-
-            dispatch(Creators.notifyAction(message));
-        } catch (error) {
-            throw (error);
-        }
-    }
+  const new_intent = new Intent();
+
+  return {
+    ...state,
+    id: new_intent.id,
+    selected_item_position: -1,
+    name: new_intent.name,
+    old_name: new_intent.name,
+    content: [...new_intent.samples],
+    old_content: [...new_intent.samples],
+  };
 };
 
-export const { Types, Creators } = createActions({
-    addIntent: [],
-    createNewIntent: [],
-    notifyAction: ['text'],
-    undoDeleteIntentContent: [],
-    setIntentName: ['name', 'helper_text'],
-    deleteIntentContent: ['intent_position'],
-    setIntentContent: ['intent_position', 'text'],
-    selectIntent: (id = '', item_position = -1) => {
-        return async (dispatch) => {
-            try {
-                const response = await axios.get(INTENT_URL + id);
-                await dispatch({ type: Types.SELECT_INTENT, item: response.data, item_position: item_position });
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    getIntents: () => {
-        return async (dispatch) => {
-            try {
-                const response = await axios.get(INTENT_URL);
-                await dispatch({ type: Types.GET_INTENTS, intents: response.data });
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    saveData: (item) => {
-        return async (dispatch) => {
-            if (item.id === '' || item.id === undefined) {
-                dispatch(createOrUpdateItem('post', item, message.intent.created));
-            } else {
-                dispatch(createOrUpdateItem('put', item, message.intent.updated));
-            }
-        }
-    },
-    deleteIntent: (delete_intent_id) => {
-        return async (dispatch) => {
-            try {
-                await axios.delete(INTENT_URL + delete_intent_id);
-                await dispatch(Creators.getIntents());
-                await dispatch(Creators.notifyAction(message.intent.deleted));
-                await dispatch(Creators.createNewIntent())
-
-            } catch (error) {
-                throw (error);
-            }
-        }
-    }
-})
+export const setIntentName = (state = INITIAL_STATE, action) => ({
+  ...state,
+  name: action.name,
+  helper_text: action.helper_text,
+});
 
-export default createReducer(INITIAL_STATE, {
-    [Types.ADD_INTENT]: addIntent,
-    [Types.GET_INTENTS]: getIntents,
-    [Types.SELECT_INTENT]: selectIntent,
-    [Types.NOTIFY_ACTION]: notifyAction,
-    [Types.SET_INTENT_NAME]: setIntentName,
-    [Types.CREATE_NEW_INTENT]: createNewIntent,
-    [Types.SET_INTENT_CONTENT]: setIntentContent,
-    [Types.DELETE_INTENT_CONTENT]: deleteIntentContent,
-    [Types.UNDO_DELETE_INTENT_CONTENT]: undoDeleteIntentContent,
+export const notifyAction = (state = INITIAL_STATE, action) => ({
+  ...state,
+  notification_text: action.text,
+});
+
+export const getIntents = (state = INITIAL_STATE, action) => ({
+  ...state,
+  intents: action.intents,
 });
 
+export const createOrUpdateItem = (mode = 'post', new_item, message = '') => async (dispatch) => {
+  try {
+    const mode_url = (mode === 'post') ? INTENT_URL : INTENT_URL + new_item.id;
+    let intent;
+    await axios[mode](mode_url, new_item)
+      .then((resp) => {
+        intent = resp.data;
+      });
+
+    await dispatch(Creators.getIntents());
+    await dispatch(Creators.selectIntent(intent.id, -1));
+
+    dispatch(Creators.notifyAction(message));
+  } catch (error) {
+    throw (error);
+  }
+};
 
+export const { Types, Creators } = createActions({
+  addIntent: [],
+  createNewIntent: [],
+  notifyAction: ['text'],
+  undoDeleteIntentContent: [],
+  setIntentName: ['name', 'helper_text'],
+  deleteIntentContent: ['intent_position'],
+  setIntentContent: ['intent_position', 'text'],
+  selectIntent: (id = '', item_position = -1) => async (dispatch) => {
+    try {
+      const response = await axios.get(INTENT_URL + id);
+      await dispatch({ type: Types.SELECT_INTENT, item: response.data, item_position });
+    } catch (error) {
+      throw (error);
+    }
+  },
+  getIntents: () => async (dispatch) => {
+    try {
+      const response = await axios.get(INTENT_URL);
+      await dispatch({ type: Types.GET_INTENTS, intents: response.data });
+    } catch (error) {
+      throw (error);
+    }
+  },
+  saveData: (item) => async (dispatch) => {
+    if (item.id === '' || item.id === undefined) {
+      dispatch(createOrUpdateItem('post', item, message.intent.created));
+    } else {
+      dispatch(createOrUpdateItem('put', item, message.intent.updated));
+    }
+  },
+  deleteIntent: (delete_intent_id) => async (dispatch) => {
+    try {
+      await axios.delete(INTENT_URL + delete_intent_id);
+      await dispatch(Creators.getIntents());
+      await dispatch(Creators.notifyAction(message.intent.deleted));
+      await dispatch(Creators.createNewIntent());
+    } catch (error) {
+      throw (error);
+    }
+  },
+});
 
+export default createReducer(INITIAL_STATE, {
+  [Types.ADD_INTENT]: addIntent,
+  [Types.GET_INTENTS]: getIntents,
+  [Types.SELECT_INTENT]: selectIntent,
+  [Types.NOTIFY_ACTION]: notifyAction,
+  [Types.SET_INTENT_NAME]: setIntentName,
+  [Types.CREATE_NEW_INTENT]: createNewIntent,
+  [Types.SET_INTENT_CONTENT]: setIntentContent,
+  [Types.DELETE_INTENT_CONTENT]: deleteIntentContent,
+  [Types.UNDO_DELETE_INTENT_CONTENT]: undoDeleteIntentContent,
+});
diff --git a/app/src/ducks/stories.js b/app/src/ducks/stories.js
index 9c57474..5852760 100644
--- a/app/src/ducks/stories.js
+++ b/app/src/ducks/stories.js
@@ -1,275 +1,244 @@
-
-import axios from "axios";
+import axios from 'axios';
+import { createActions, createReducer } from 'reduxsauce';
 import { Story } from '../utils/DataFormat';
 import { message } from '../utils/messages';
-import { createActions, createReducer } from 'reduxsauce';
 import { INTENT_URL, UTTER_URL, STORY_URL } from '../utils/url_routes.js';
 
 const INITIAL_STATE = {
-    utters: [],
-    intents: [],
-    stories: [],
-    content: [],
-    loading: true,
-    name: "",
-    old_content: [],
-    story_id: "",
-    notification_text: "",
-    content_text_validation: ""
+  utters: [],
+  intents: [],
+  stories: [],
+  content: [],
+  loading: true,
+  name: '',
+  old_content: [],
+  story_id: '',
+  notification_text: '',
+  content_text_validation: '',
 };
 
 function createArrayObjCopyOf(samples = []) {
-    return samples.map(text => { return { ...text } });
+  return samples.map((text) => ({ ...text }));
 }
 
-export const getIntents = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        intents: action.intents
-    };
-}
+export const getIntents = (state = INITIAL_STATE, action) => ({
+  ...state,
+  intents: action.intents,
+});
 
-export const getUtters = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        utters: action.utters
-    };
-}
+export const getUtters = (state = INITIAL_STATE, action) => ({
+  ...state,
+  utters: action.utters,
+});
 
-export const getStories = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        stories: action.stories,
-        loading: false
-    };
-}
+export const getStories = (state = INITIAL_STATE, action) => ({
+  ...state,
+  stories: action.stories,
+  loading: false,
+});
 
-export const getStory = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        name: action.story.name,
-        story_id: action.story.id,
-        content: action.story.content,
-        old_content: action.story.content
-    };
-}
+export const getStory = (state = INITIAL_STATE, action) => ({
+  ...state,
+  name: action.story.name,
+  story_id: action.story.id,
+  content: action.story.content,
+  old_content: action.story.content,
+});
 
 export const validationContent = (content) => {
-    let intent_intent = true;
+  let intent_intent = true;
 
-    for (let i = 1, size = content.length; i < size; i++) {
-        if (content[i - 1].type === 'intent' && (content[i].type === 'intent')) {
-            intent_intent = false;
-        } else if (content[size - 1].type === 'intent') {
-            intent_intent = false;
-        }
+  for (let i = 1, size = content.length; i < size; i++) {
+    if (content[i - 1].type === 'intent' && (content[i].type === 'intent')) {
+      intent_intent = false;
+    } else if (content[size - 1].type === 'intent') {
+      intent_intent = false;
     }
+  }
 
-    if (!intent_intent) {
-        return message.story.two_intents;
-    } else if (content.length !== 0 && content[0].type !== 'intent') {
-        return message.story.first_element;
-    }
+  if (!intent_intent) {
+    return message.story.two_intents;
+  } if (content.length !== 0 && content[0].type !== 'intent') {
+    return message.story.first_element;
+  }
 
-    return '';
-}
+  return '';
+};
 
 export const reorderContent = (state = INITIAL_STATE, action) => {
-    const result = createArrayObjCopyOf(state.content);
-    const [removed] = result.splice(action.start_index, 1);
-    result.splice(action.end_index, 0, removed);
-
-    const text = validationContent(result);
-
-    return {
-        ...state,
-        content: result,
-        content_text_validation: text,
-        old_content: createArrayObjCopyOf(state.content)
-    }
-}
+  const result = createArrayObjCopyOf(state.content);
+  const [removed] = result.splice(action.start_index, 1);
+  result.splice(action.end_index, 0, removed);
+
+  const text = validationContent(result);
+
+  return {
+    ...state,
+    content: result,
+    content_text_validation: text,
+    old_content: createArrayObjCopyOf(state.content),
+  };
+};
 
 export const deleteContent = (state = INITIAL_STATE, action) => {
-    let new_content = createArrayObjCopyOf(state.content);
-    new_content.splice(action.content_position, 1);
+  const new_content = createArrayObjCopyOf(state.content);
+  new_content.splice(action.content_position, 1);
 
-    const text = validationContent(new_content);
+  const text = validationContent(new_content);
 
-    return {
-        ...state,
-        content: new_content,
-        content_text_validation: text,
-        old_content: createArrayObjCopyOf(state.content)
-    }
-}
+  return {
+    ...state,
+    content: new_content,
+    content_text_validation: text,
+    old_content: createArrayObjCopyOf(state.content),
+  };
+};
 
 export const undoDeleteContent = (state = INITIAL_STATE) => {
-    const text = validationContent(state.old_content);
-    
-    return {
-        ...state,
-        content_text_validation: text,
-        content: createArrayObjCopyOf(state.old_content)
-    }
-}
+  const text = validationContent(state.old_content);
 
-export const notifyAction = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        notification_text: action.text
-    };
-}
+  return {
+    ...state,
+    content_text_validation: text,
+    content: createArrayObjCopyOf(state.old_content),
+  };
+};
 
-export const notifyContentTextValidation = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        content_text_validation: action.text
-    };
-}
+export const notifyAction = (state = INITIAL_STATE, action) => ({
+  ...state,
+  notification_text: action.text,
+});
 
-export const addToStory = (state = INITIAL_STATE, action) => {
-    let new_content = createArrayObjCopyOf(state.content);
-    new_content.push({ ...action.item, type: action.mode });
-    const text = validationContent(new_content);
+export const notifyContentTextValidation = (state = INITIAL_STATE, action) => ({
+  ...state,
+  content_text_validation: action.text,
+});
 
-    return {
-        ...state,
-        content: new_content,
-        content_text_validation: text,
-        old_content: createArrayObjCopyOf(state.content),
-    }
-}
+export const addToStory = (state = INITIAL_STATE, action) => {
+  const new_content = createArrayObjCopyOf(state.content);
+  new_content.push({ ...action.item, type: action.mode });
+  const text = validationContent(new_content);
+
+  return {
+    ...state,
+    content: new_content,
+    content_text_validation: text,
+    old_content: createArrayObjCopyOf(state.content),
+  };
+};
 
 export const createNewStory = (state = INITIAL_STATE) => {
-    const new_story = new Story();
-
-    return {
-        ...state,
-        name: new_story.name,
-        notification_text: '',
-        story_id: new_story.id,
-        content: createArrayObjCopyOf(new_story.content),
-        old_content: createArrayObjCopyOf(new_story.content)
-    };
-}
+  const new_story = new Story();
+
+  return {
+    ...state,
+    name: new_story.name,
+    notification_text: '',
+    story_id: new_story.id,
+    content: createArrayObjCopyOf(new_story.content),
+    old_content: createArrayObjCopyOf(new_story.content),
+  };
+};
 
-export const createOrUpdateItem = (mode = 'post', new_item, message = "") => {
-    return async (dispatch) => {
-        try {
-            const mode_url = (mode === 'post') ? STORY_URL : STORY_URL + new_item.id;
-            const response = await axios[mode](mode_url, new_item);
-            await dispatch(Creators.getStory(response.data.id));
-            await dispatch(Creators.notifyAction(message));
-        } catch (error) {
-            throw (error);
-        }
-    }
+export const createOrUpdateItem = (mode = 'post', new_item, message = '') => async (dispatch) => {
+  try {
+    const mode_url = (mode === 'post') ? STORY_URL : STORY_URL + new_item.id;
+    const response = await axios[mode](mode_url, new_item);
+    await dispatch(Creators.getStory(response.data.id));
+    await dispatch(Creators.notifyAction(message));
+  } catch (error) {
+    throw (error);
+  }
 };
 
 export const { Types, Creators } = createActions({
-    createNewStory: [],
-    undoDeleteContent: [],
-    notifyAction: ['text'],
-    addToStory: ['item', 'mode'],
-    deleteContent: ['content_position'],
-    notifyContentTextValidation: ['text'],
-    reorderContent: ['start_index', 'end_index'],
-    addIntent: (intent) => {
-        return async (dispatch) => {
-            try {
-                const response = await axios.get(INTENT_URL + intent.id + '/example');
-                await dispatch({ type: Types.ADD_TO_STORY, item: response.data, mode: "intent" });
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    addUtter: (utter) => {
-        return async (dispatch) => {
-            try {
-                const response = await axios.get(UTTER_URL + utter.id + '/example');
-                await dispatch({ type: Types.ADD_TO_STORY, item: response.data, mode: "utter" });
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    getIntents: () => {
-        return async (dispatch) => {
-            try {
-                const response = await axios.get(INTENT_URL);
-                await dispatch({ type: Types.GET_INTENTS, intents: response.data });
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    getUtters: () => {
-        return async (dispatch) => {
-            try {
-                const response = await axios.get(UTTER_URL);
-                await dispatch({ type: Types.GET_UTTERS, utters: response.data });
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    saveData: (item) => {
-        return async (dispatch) => {
-            if ((item.id === "" || item.id === undefined)) {
-                dispatch(createOrUpdateItem('post', item, message.story.created));
-            } else {
-                dispatch(createOrUpdateItem('put', item, message.story.updated));
-            }
-        }
-    },
-    getStories: (value = '') => {
-        return async (dispatch) => {
-            try {
-                const response = await axios.get(STORY_URL + '?filter=' + value);
-                await dispatch({ type: Types.GET_STORIES, stories: response.data });
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    getStory: (id = '') => {
-        return async (dispatch) => {
-            try {
-                if (id !== '') {
-                    const response = await axios.get(STORY_URL + id);
-                    await dispatch({ type: Types.GET_STORY, story: response.data });
-                }
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    deleteStory: (id) => {
-        return async (dispatch) => {
-            try {
-                if (id !== '') {
-                    await axios.delete(STORY_URL + id);
-                    await dispatch(Creators.notifyAction(message.story.deleted));
-                }
-            } catch (error) {
-                throw (error);
-            }
-        }
+  createNewStory: [],
+  undoDeleteContent: [],
+  notifyAction: ['text'],
+  addToStory: ['item', 'mode'],
+  deleteContent: ['content_position'],
+  notifyContentTextValidation: ['text'],
+  reorderContent: ['start_index', 'end_index'],
+  addIntent: (intent) => async (dispatch) => {
+    try {
+      const response = await axios.get(`${INTENT_URL + intent.id}/example`);
+      await dispatch({ type: Types.ADD_TO_STORY, item: response.data, mode: 'intent' });
+    } catch (error) {
+      throw (error);
+    }
+  },
+  addUtter: (utter) => async (dispatch) => {
+    try {
+      const response = await axios.get(`${UTTER_URL + utter.id}/example`);
+      await dispatch({ type: Types.ADD_TO_STORY, item: response.data, mode: 'utter' });
+    } catch (error) {
+      throw (error);
+    }
+  },
+  getIntents: () => async (dispatch) => {
+    try {
+      const response = await axios.get(INTENT_URL);
+      await dispatch({ type: Types.GET_INTENTS, intents: response.data });
+    } catch (error) {
+      throw (error);
+    }
+  },
+  getUtters: () => async (dispatch) => {
+    try {
+      const response = await axios.get(UTTER_URL);
+      await dispatch({ type: Types.GET_UTTERS, utters: response.data });
+    } catch (error) {
+      throw (error);
+    }
+  },
+  saveData: (item) => async (dispatch) => {
+    if ((item.id === '' || item.id === undefined)) {
+      dispatch(createOrUpdateItem('post', item, message.story.created));
+    } else {
+      dispatch(createOrUpdateItem('put', item, message.story.updated));
+    }
+  },
+  getStories: (value = '') => async (dispatch) => {
+    try {
+      const response = await axios.get(`${STORY_URL}?filter=${value}`);
+      await dispatch({ type: Types.GET_STORIES, stories: response.data });
+    } catch (error) {
+      throw (error);
+    }
+  },
+  getStory: (id = '') => async (dispatch) => {
+    try {
+      if (id !== '') {
+        const response = await axios.get(STORY_URL + id);
+        await dispatch({ type: Types.GET_STORY, story: response.data });
+      }
+    } catch (error) {
+      throw (error);
+    }
+  },
+  deleteStory: (id) => async (dispatch) => {
+    try {
+      if (id !== '') {
+        await axios.delete(STORY_URL + id);
+        await dispatch(Creators.notifyAction(message.story.deleted));
+      }
+    } catch (error) {
+      throw (error);
     }
+  },
 
 });
 
 export default createReducer(INITIAL_STATE, {
-    [Types.GET_STORY]: getStory,
-    [Types.GET_UTTERS]: getUtters,
-    [Types.GET_STORIES]: getStories,
-    [Types.GET_INTENTS]: getIntents,
-    [Types.ADD_TO_STORY]: addToStory,
-    [Types.NOTIFY_ACTION]: notifyAction,
-    [Types.DELETE_CONTENT]: deleteContent,
-    [Types.REORDER_CONTENT]: reorderContent,
-    [Types.CREATE_NEW_STORY]: createNewStory,
-    [Types.UNDO_DELETE_CONTENT]: undoDeleteContent,
-    [Types.NOTIFY_CONTENT_TEXT_VALIDATION]: notifyContentTextValidation,
+  [Types.GET_STORY]: getStory,
+  [Types.GET_UTTERS]: getUtters,
+  [Types.GET_STORIES]: getStories,
+  [Types.GET_INTENTS]: getIntents,
+  [Types.ADD_TO_STORY]: addToStory,
+  [Types.NOTIFY_ACTION]: notifyAction,
+  [Types.DELETE_CONTENT]: deleteContent,
+  [Types.REORDER_CONTENT]: reorderContent,
+  [Types.CREATE_NEW_STORY]: createNewStory,
+  [Types.UNDO_DELETE_CONTENT]: undoDeleteContent,
+  [Types.NOTIFY_CONTENT_TEXT_VALIDATION]: notifyContentTextValidation,
 });
diff --git a/app/src/ducks/utters.js b/app/src/ducks/utters.js
index 1799a34..d541d8a 100644
--- a/app/src/ducks/utters.js
+++ b/app/src/ducks/utters.js
@@ -1,240 +1,221 @@
 import axios from 'axios';
+import { createActions, createReducer } from 'reduxsauce';
 import { Utter } from '../utils/DataFormat.js';
 import { message } from '../utils/messages.js';
 import { UTTER_URL } from '../utils/url_routes.js';
-import { createActions, createReducer } from 'reduxsauce';
 
 const INITIAL_STATE = {
-    mode: "Utter",
-    name: "",
-    helper_text: "",
-    old_name: "",
-    notification_text: "",
-    content: [[""]],
-    old_content: [[""]],
-    multiple_alternatives: false,
+  mode: 'Utter',
+  name: '',
+  helper_text: '',
+  old_name: '',
+  notification_text: '',
+  content: [['']],
+  old_content: [['']],
+  multiple_alternatives: false,
 };
 
 function createArrayCopyOf(items) {
-    if (items !== undefined) {
-        return items.map(utter => utter.map(text => text));
-    }
-    return items;
+  if (items !== undefined) {
+    return items.map((utter) => utter.map((text) => text));
+  }
+  return items;
 }
 
 export const addUtterContent = (state = INITIAL_STATE) => {
-    let new_utter = createArrayCopyOf(state.content);
-
-    if (state.multiple_alternatives) {
-        new_utter.push(['']);
-    } else {
-        new_utter[0].push('');
-    }
-
-    return {
-        ...state,
-        content: new_utter,
-        old_content: createArrayCopyOf(new_utter)
-    };
-}
+  const new_utter = createArrayCopyOf(state.content);
+
+  if (state.multiple_alternatives) {
+    new_utter.push(['']);
+  } else {
+    new_utter[0].push('');
+  }
+
+  return {
+    ...state,
+    content: new_utter,
+    old_content: createArrayCopyOf(new_utter),
+  };
+};
 
 export const setUtterContent = (state = INITIAL_STATE, action) => {
-    let content = createArrayCopyOf(state.content);
-    content[action.utter_position][action.text_position] = action.text
+  const content = createArrayCopyOf(state.content);
+  content[action.utter_position][action.text_position] = action.text;
 
-    return {
-        ...state,
-        content: content
-    };
-}
+  return {
+    ...state,
+    content,
+  };
+};
 
 export const deleteUtterContent = (state = INITIAL_STATE, action) => {
-    let content = createArrayCopyOf(state.content)
-    let old_utter_history = createArrayCopyOf(state.content)
-
-    content[action.utter_position].splice(action.text_position, 1);
-    if (content[action.utter_position].length === 0) {
-        content.splice(action.utter_position, 1);
-    }
-
-    return {
-        ...state,
-        content: content,
-        old_content: old_utter_history
-    };
-}
+  const content = createArrayCopyOf(state.content);
+  const old_utter_history = createArrayCopyOf(state.content);
+
+  content[action.utter_position].splice(action.text_position, 1);
+  if (content[action.utter_position].length === 0) {
+    content.splice(action.utter_position, 1);
+  }
+
+  return {
+    ...state,
+    content,
+    old_content: old_utter_history,
+  };
+};
 
-export const undoDeleteUtterContent = (state = INITIAL_STATE) => {
-    return {
-        ...state,
-        content: createArrayCopyOf(state.old_content)
-    }
-}
+export const undoDeleteUtterContent = (state = INITIAL_STATE) => ({
+  ...state,
+  content: createArrayCopyOf(state.old_content),
+});
 
 export const selectUtter = (state = INITIAL_STATE, action) => {
-    let selected_item = action.item;
-    let selected_item_position = action.item_position;
-
-    if (selected_item_position < 0) {
-        state.utters.find((item, index) => {
-            selected_item_position = index;
-            return (item.id === action.item.id || item.name === action.item.name);
-        });
-    }
-
-    return {
-        ...state,
-        helper_text: "",
-        id: selected_item.id,
-        name: selected_item.name,
-        old_name: selected_item.name,
-        selected_item_position: selected_item_position,
-        content: createArrayCopyOf(selected_item.alternatives),
-        old_content: createArrayCopyOf(selected_item.alternatives),
-        multiple_alternatives: selected_item.multiple_alternatives,
-    };
-}
+  const selected_item = action.item;
+  let selected_item_position = action.item_position;
+
+  if (selected_item_position < 0) {
+    state.utters.find((item, index) => {
+      selected_item_position = index;
+      return (item.id === action.item.id || item.name === action.item.name);
+    });
+  }
+
+  return {
+    ...state,
+    helper_text: '',
+    id: selected_item.id,
+    name: selected_item.name,
+    old_name: selected_item.name,
+    selected_item_position,
+    content: createArrayCopyOf(selected_item.alternatives),
+    old_content: createArrayCopyOf(selected_item.alternatives),
+    multiple_alternatives: selected_item.multiple_alternatives,
+  };
+};
 
 export const createNewUtter = (state = INITIAL_STATE) => {
-    const new_utter = new Utter();
-
-    return {
-        ...state,
-        helper_text: "",
-        id: new_utter.id,
-        name: new_utter.name,
-        old_name: new_utter.name,
-        selected_item_position: -1,
-        multiple_alternatives: new_utter.multiple_alternatives,
-        content: createArrayCopyOf(new_utter.alternatives),
-        old_content: createArrayCopyOf(new_utter.alternatives),
-    };
-}
+  const new_utter = new Utter();
+
+  return {
+    ...state,
+    helper_text: '',
+    id: new_utter.id,
+    name: new_utter.name,
+    old_name: new_utter.name,
+    selected_item_position: -1,
+    multiple_alternatives: new_utter.multiple_alternatives,
+    content: createArrayCopyOf(new_utter.alternatives),
+    old_content: createArrayCopyOf(new_utter.alternatives),
+  };
+};
 
-export const setUtterName = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        name: action.name,
-        helper_text: action.helper_text
-    };
-}
+export const setUtterName = (state = INITIAL_STATE, action) => ({
+  ...state,
+  name: action.name,
+  helper_text: action.helper_text,
+});
 
-export const notifyAction = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        notification_text: action.text
-    };
-}
+export const notifyAction = (state = INITIAL_STATE, action) => ({
+  ...state,
+  notification_text: action.text,
+});
 
-export const getUtters = (state = INITIAL_STATE, action) => {
-    return {
-        ...state,
-        utters: action.utters
-    };
-}
+export const getUtters = (state = INITIAL_STATE, action) => ({
+  ...state,
+  utters: action.utters,
+});
 
 export const changeUtterForm = (state = INITIAL_STATE, action) => {
-    let texts = [];
-    let new_alternatives = [];
+  const texts = [];
+  let new_alternatives = [];
+
+  action.content.forEach((i) => {
+    i.forEach((j) => texts.push(j));
+  });
+
+  if (action.multiple_alternatives) {
+    new_alternatives = texts.map((text) => [text]);
+  } else {
+    new_alternatives = [texts.map((text) => text)];
+  }
+
+  return {
+    ...state,
+    content: new_alternatives,
+    multiple_alternatives: action.multiple_alternatives,
+  };
+};
 
-    action.content.forEach(i => {
-        i.forEach(j => texts.push(j))
-    })
+export const createOrUpdateItem = (mode = 'post', new_item, message = '') => async (dispatch) => {
+  try {
+    const mode_url = (mode === 'post') ? UTTER_URL : UTTER_URL + new_item.id;
+    let utter;
+    await axios[mode](mode_url, new_item)
+      .then((resp) => {
+        utter = resp.data;
+      });
+    await dispatch(Creators.getUtters());
+    await dispatch(Creators.selectUtter(utter.id, -1));
+
+    await dispatch(Creators.notifyAction(message));
+  } catch (error) {
+    throw (error);
+  }
+};
 
-    if (action.multiple_alternatives) {
-        new_alternatives = texts.map(text => [text]);
-    } else {
-        new_alternatives = [texts.map(text => text)];
+export const { Types, Creators } = createActions({
+  createNewUtter: [],
+  addUtterContent: [],
+  notifyAction: ['text'],
+  undoDeleteUtterContent: [],
+  setUtterName: ['name', 'helper_text'],
+  deleteUtterContent: ['utter_position', 'text_position'],
+  setUtterContent: ['text', 'utter_position', 'text_position'],
+  changeUtterForm: ['content', 'multiple_alternatives'],
+  selectUtter: (id = '', item_position = '') => async (dispatch) => {
+    try {
+      const response = await axios.get(UTTER_URL + id);
+      await dispatch({ type: Types.SELECT_UTTER, item: response.data, item_position });
+    } catch (error) {
+      throw (error);
     }
-
-    return {
-        ...state,
-        content: new_alternatives,
-        multiple_alternatives: action.multiple_alternatives
+  },
+  getUtters: () => async (dispatch) => {
+    try {
+      const response = await axios.get(UTTER_URL);
+      await dispatch({ type: Types.GET_UTTERS, utters: response.data });
+    } catch (error) {
+      throw (error);
     }
-}
-
-export const createOrUpdateItem = (mode = 'post', new_item, message = "") => {
-    return async (dispatch) => {
-        try {
-            const mode_url = (mode === 'post') ? UTTER_URL : UTTER_URL + new_item.id;
-            let utter;
-            await axios[mode](mode_url, new_item)
-                .then((resp) => {
-                    utter = resp.data;
-                })
-            await dispatch(Creators.getUtters());
-            await dispatch(Creators.selectUtter(utter.id, -1));
-
-            await dispatch(Creators.notifyAction(message));
-        } catch (error) {
-            throw (error);
-        }
+  },
+  saveData: (item) => async (dispatch) => {
+    if (item.id === '' || item.id === undefined) {
+      dispatch(createOrUpdateItem('post', item, message.utter.created));
+    } else {
+      dispatch(createOrUpdateItem('put', item, message.utter.updated));
     }
-};
-
-export const { Types, Creators } = createActions({
-    createNewUtter: [],
-    addUtterContent: [],
-    notifyAction: ['text'],
-    undoDeleteUtterContent: [],
-    setUtterName: ['name', 'helper_text'],
-    deleteUtterContent: ['utter_position', 'text_position'],
-    setUtterContent: ['text', 'utter_position', 'text_position'],
-    changeUtterForm: ['content', 'multiple_alternatives'],
-    selectUtter: (id = "", item_position = "") => {
-        return async (dispatch) => {
-            try {
-                const response = await axios.get(UTTER_URL + id);
-                await dispatch({ type: Types.SELECT_UTTER, item: response.data, item_position: item_position });
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    getUtters: () => {
-        return async (dispatch) => {
-            try {
-                const response = await axios.get(UTTER_URL);
-                await dispatch({ type: Types.GET_UTTERS, utters: response.data });
-            } catch (error) {
-                throw (error);
-            }
-        }
-    },
-    saveData: (item) => {
-        return async (dispatch) => {
-            if (item.id === "" || item.id === undefined) {
-                dispatch(createOrUpdateItem('post', item, message.utter.created));
-            } else {
-                dispatch(createOrUpdateItem('put', item, message.utter.updated));
-            }
-        }
-    },
-    deleteUtter: (delete_id) => {
-        return async (dispatch) => {
-            try {
-                await axios.delete(UTTER_URL + delete_id);
-                await dispatch(Creators.getUtters());
-                await dispatch(Creators.notifyAction(message.utter.deleted));
-                await dispatch(Creators.createNewUtter())
-
-            } catch (error) {
-                throw (error);
-            }
-        }
+  },
+  deleteUtter: (delete_id) => async (dispatch) => {
+    try {
+      await axios.delete(UTTER_URL + delete_id);
+      await dispatch(Creators.getUtters());
+      await dispatch(Creators.notifyAction(message.utter.deleted));
+      await dispatch(Creators.createNewUtter());
+    } catch (error) {
+      throw (error);
     }
-})
+  },
+});
 
 export default createReducer(INITIAL_STATE, {
-    [Types.GET_UTTERS]: getUtters,
-    [Types.SELECT_UTTER]: selectUtter,
-    [Types.NOTIFY_ACTION]: notifyAction,
-    [Types.SET_UTTER_NAME]: setUtterName,
-    [Types.CREATE_NEW_UTTER]: createNewUtter,
-    [Types.SET_UTTER_CONTENT]: setUtterContent,
-    [Types.CHANGE_UTTER_FORM]: changeUtterForm,
-    [Types.ADD_UTTER_CONTENT]: addUtterContent,
-    [Types.DELETE_UTTER_CONTENT]: deleteUtterContent,
-    [Types.UNDO_DELETE_UTTER_CONTENT]: undoDeleteUtterContent,
+  [Types.GET_UTTERS]: getUtters,
+  [Types.SELECT_UTTER]: selectUtter,
+  [Types.NOTIFY_ACTION]: notifyAction,
+  [Types.SET_UTTER_NAME]: setUtterName,
+  [Types.CREATE_NEW_UTTER]: createNewUtter,
+  [Types.SET_UTTER_CONTENT]: setUtterContent,
+  [Types.CHANGE_UTTER_FORM]: changeUtterForm,
+  [Types.ADD_UTTER_CONTENT]: addUtterContent,
+  [Types.DELETE_UTTER_CONTENT]: deleteUtterContent,
+  [Types.UNDO_DELETE_UTTER_CONTENT]: undoDeleteUtterContent,
 });
diff --git a/app/src/icons/AppIcon.js b/app/src/icons/AppIcon.js
index 6bcf20e..10b3b25 100644
--- a/app/src/icons/AppIcon.js
+++ b/app/src/icons/AppIcon.js
@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-const SvgAppIcon = props => (
+const SvgAppIcon = (props) => (
   <svg width={98} height={48} {...props}>
     <path
       fill="#FFF"
diff --git a/app/src/icons/IntentIcon.js b/app/src/icons/IntentIcon.js
index bb7f871..1946f79 100644
--- a/app/src/icons/IntentIcon.js
+++ b/app/src/icons/IntentIcon.js
@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-const SvgIntentIcon = props => (
+const SvgIntentIcon = (props) => (
   <svg width={24} height={24} {...props}>
     <path
       d="M22 15V4a2 2 0 00-2-2H4a2 2 0 00-2 2v12c0 1.1.9 2 2 2h12.6l3.9 3.7c.6.6 1.5.1 1.5-.8V15zM12 6c-1 0-1.7.2-2.2.5-.6.4-.8 1-.8 1.7h2c0-.3 0-.5.2-.6.2-.2.5-.3.7-.3.3 0 .6.1.8.3.2.2.3.4.3.7 0 .3-.1.5-.3.7a2 2 0 01-.6.6l-1 .8c-.3.3-.4.6-.4 1.1h2c0-.3 0-.5.2-.7 0-.2.2-.3.5-.5a3 3 0 001.1-.8c.3-.4.5-.8.5-1.2a2 2 0 00-.8-1.7c-.6-.4-1.3-.6-2.3-.6zm-1.3 6.5v2h2v-2h-2z"
@@ -10,4 +10,4 @@ const SvgIntentIcon = props => (
   </svg>
 );
 
-export default SvgIntentIcon;
\ No newline at end of file
+export default SvgIntentIcon;
diff --git a/app/src/icons/StoryIcon.js b/app/src/icons/StoryIcon.js
index 4efc179..c29523d 100644
--- a/app/src/icons/StoryIcon.js
+++ b/app/src/icons/StoryIcon.js
@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-const SvgStoryIcon = props => (
+const SvgStoryIcon = (props) => (
   <svg width={24} height={24} {...props}>
     <path
       d="M19 7h2.4c.8 0 1.5.6 1.6 1.5v13.7c0 .6-.7 1-1.2.7v-.1l-3.1-3H8.6c-.8 0-1.5-.6-1.6-1.5V17h12V7h2.4zM1 1.8c0-.7.7-1 1.2-.6l3.1 3h10.1c.9 0 1.6.7 1.6 1.6v7.6c0 .9-.7 1.6-1.6 1.6H2.6c-.9 0-1.6-.7-1.6-1.6V6.6z"
@@ -10,4 +10,4 @@ const SvgStoryIcon = props => (
   </svg>
 );
 
-export default SvgStoryIcon;
\ No newline at end of file
+export default SvgStoryIcon;
diff --git a/app/src/icons/UtterIcon.js b/app/src/icons/UtterIcon.js
index 05a349e..1e43e85 100644
--- a/app/src/icons/UtterIcon.js
+++ b/app/src/icons/UtterIcon.js
@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-const SvgUtterIcon = props => (
+const SvgUtterIcon = (props) => (
   <svg width={24} height={24} {...props}>
     <path
       d="M2 1C2 .3 3-.2 3.5.4l4 3.7H20a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V7zm16 13H6v2h12v-2zm0-3H6v2h12v-2zm0-3H6v2h12V8z"
@@ -10,4 +10,4 @@ const SvgUtterIcon = props => (
   </svg>
 );
 
-export default SvgUtterIcon;
\ No newline at end of file
+export default SvgUtterIcon;
diff --git a/app/src/index.js b/app/src/index.js
index 7af3a91..326d199 100644
--- a/app/src/index.js
+++ b/app/src/index.js
@@ -1,48 +1,47 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from "react-redux";
-import configureStore from "./ducks/index";
+import { Provider } from 'react-redux';
+import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
+import configureStore from './ducks/index';
 
 import App from './pages/App';
 import * as serviceWorker from './serviceWorker';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
-
 
 const theme = createMuiTheme({
   palette: {
     background: {
-      paper: "#dae8ea",
-      default: "#fcfcfc"
+      paper: '#dae8ea',
+      default: '#fcfcfc',
     },
     primary: {
-      light: "#f6f9f9",
-      main: "#4b3953",
-      contrastText: "#fff"
+      light: '#f6f9f9',
+      main: '#4b3953',
+      contrastText: '#fff',
     },
     secondary: {
-      light: "#fef4f3",
-      main: "#f15035",
-      contrastText: "#fff"
+      light: '#fef4f3',
+      main: '#f15035',
+      contrastText: '#fff',
     },
     error: {
-      main: "#AF0C00",
-      contrastText: "#fff"
+      main: '#AF0C00',
+      contrastText: '#fff',
     },
     text: {
-      primary: "rgba(0, 0, 0, 0.87)",
-      hint: "rgba(0, 0, 0, 0.38)"
-    }
+      primary: 'rgba(0, 0, 0, 0.87)',
+      hint: 'rgba(0, 0, 0, 0.38)',
+    },
   },
   typography: {
     h4: {
       fontStyle: 'Roboto-Regular',
       fontSize: 34,
-      color: '#000000'
+      color: '#000000',
     },
     h5: {
       fontStyle: 'Roboto-Regular',
       fontSize: 24,
-      color: '#000000'
+      color: '#000000',
     },
     h6: {
       fontStyle: 'Roboto-Regular',
@@ -54,76 +53,75 @@ const theme = createMuiTheme({
     AppbarMenuActive: {
       fontStyle: 'Roboto-Bold-Italic',
       fontSize: 16,
-      color: '#f15035'
+      color: '#f15035',
     },
     AppbarMenuHover: {
       fontStyle: 'Roboto-Bold-Italic',
       fontSize: 16,
-      color: '#dae8ea'
+      color: '#dae8ea',
     },
     AppbarMenuIdle: {
       fontStyle: 'Roboto-Regular-Italic',
       fontSize: 16,
-      color: '#dae8ea'
+      color: '#dae8ea',
     },
     body1Dark: {
       fontStyle: 'Roboto-Regular',
       fontSize: 16,
-      color: '#000000'
+      color: '#000000',
     },
     body1Light: {
       fontStyle: 'Roboto-Regular',
       fontSize: 16,
-      color: '#ffffff'
+      color: '#ffffff',
     },
     buttonAccent: {
       fontStyle: 'Roboto-Medium',
       fontSize: 14,
-      color: '#f15035'
+      color: '#f15035',
     },
     buttonDarkCenter: {
       fontStyle: 'Roboto-Medium',
       fontSize: 14,
-      color: '#ffffff'
+      color: '#ffffff',
     },
     buttonDarkLeft: {
       fontStyle: 'Roboto-Medium',
       fontSize: 14,
-      color: '#000000'
+      color: '#000000',
     },
     buttonLightLeft: {
       fontStyle: 'Roboto-Medium',
       fontSize: 14,
-      color: '#ffffff'
+      color: '#ffffff',
     },
     body2Accent: {
       fontStyle: 'Roboto-Regular',
       fontSize: 14,
-      color: '#f15035'
+      color: '#f15035',
     },
     body2Dark: {
       fontStyle: 'Roboto-Regular',
       fontSize: 14,
-      color: '#000000'
+      color: '#000000',
     },
     body2Light: {
       fontStyle: 'Roboto-Regular',
       fontSize: 14,
-      color: '#ffffff'
+      color: '#ffffff',
     },
     Subheader: {
       fontStyle: 'Roboto-Regular',
       fontSize: 14,
-      color: '#4b3953'
+      color: '#4b3953',
     },
     Caption: {
       fontStyle: 'Roboto-Regular',
       fontSize: 12,
-      color: '#000000'
-    }
-  }
-})
-
+      color: '#000000',
+    },
+  },
+});
 
 ReactDOM.render(
   <Provider store={configureStore()}>
@@ -131,7 +129,7 @@ ReactDOM.render(
       <App />
     </MuiThemeProvider>
   </Provider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
 
 serviceWorker.unregister();
diff --git a/app/src/pages/App.js b/app/src/pages/App.js
index 5e07cc6..ab728a8 100644
--- a/app/src/pages/App.js
+++ b/app/src/pages/App.js
@@ -1,23 +1,23 @@
-import "./App.css"
+import './App.css';
 import React from 'react';
-import UtterPage from "./UtterPage";
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import UtterPage from './UtterPage';
 import IntentPage from './IntentPage';
 import StoriesPage from './StoriesPage';
 import StoryEditPage from './StoryEditPage';
-import MenuNavbar from "../components/MenuNavbar";
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import MenuNavbar from '../components/MenuNavbar';
 
 function App() {
   return (
     <Router>
       <MenuNavbar />
-      <div style={{ paddingTop: "74px" }}>
+      <div style={{ paddingTop: '74px' }}>
         <Route exact path="/" component={StoriesPage} />
         <Route path="/utters/" component={UtterPage} />
         <Route path="/intents/" component={IntentPage} />
         <Route path="/stories/" component={StoryEditPage} />
       </div>
-      <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></ script >
+      <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js" />
     </Router>
   );
 }
diff --git a/app/src/pages/IntentPage.js b/app/src/pages/IntentPage.js
index 28517f0..8bb5923 100644
--- a/app/src/pages/IntentPage.js
+++ b/app/src/pages/IntentPage.js
@@ -1,26 +1,24 @@
 import { connect } from 'react-redux';
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
-import { Intent } from '../utils/DataFormat'
+import Grid from '@material-ui/core/Grid';
+import { Divider } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import { Intent } from '../utils/DataFormat';
 import { Creators as IntentAction } from '../ducks/intents';
 
 import { style } from '../styles/style';
 import { Add } from '../styles/button';
-import Grid from '@material-ui/core/Grid';
-import { Divider } from '@material-ui/core';
 import { message } from '../utils/messages';
 import IntentIcon from '../icons/IntentIcon';
-import Button from '@material-ui/core/Button';
 import Snackbar from '../components/Snackbar';
 import ListFilter from '../components/ListFilter';
-import IntentForm from "../components/IntentForm";
-import ToolbarName from '../components/ToolbarName'
+import IntentForm from '../components/IntentForm';
+import ToolbarName from '../components/ToolbarName';
 import { isButtonEnabled } from '../utils/utils';
 import DeletionConfirmationDialog from '../components/DeletionConfirmationDialog';
 
-
 class IntentPage extends Component {
-
   constructor(props) {
     super(props);
     this.props.getIntents();
@@ -28,12 +26,12 @@ class IntentPage extends Component {
     if (!isNaN(id)) { this.props.selectIntent(id); }
 
     this.state = {
-      dialog_status: false
-    }
+      dialog_status: false,
+    };
 
-    this.selectIntent = this.selectIntent.bind(this)
-    this.deleteIntent = this.deleteIntent.bind(this)
-    this.changeStatusDialog = this.changeStatusDialog.bind(this)
+    this.selectIntent = this.selectIntent.bind(this);
+    this.deleteIntent = this.deleteIntent.bind(this);
+    this.changeStatusDialog = this.changeStatusDialog.bind(this);
   }
 
   changeStatusDialog(value) {
@@ -41,14 +39,14 @@ class IntentPage extends Component {
   }
 
   deleteIntent() {
-    this.props.deleteIntent(this.props.id)
+    this.props.deleteIntent(this.props.id);
     this.setState({ dialog_status: false });
   }
 
   checkEmptyFieldsIntent(samples) {
     let changed = true;
     if (samples !== undefined) {
-      samples.forEach(sample => {
+      samples.forEach((sample) => {
         if (sample.trim().length === 0) {
           changed = false;
         }
@@ -66,12 +64,12 @@ class IntentPage extends Component {
       this.props.name,
       this.props.old_name,
       this.props.helper_text,
-      no_empty_fields
+      no_empty_fields,
     );
   }
 
   selectIntent(data, intent_position) {
-    this.props.history.push('/intents/' + data.id);
+    this.props.history.push(`/intents/${data.id}`);
     this.props.selectIntent(data.id, intent_position);
   }
 
@@ -90,7 +88,8 @@ class IntentPage extends Component {
               variant="contained"
               onClick={() => this.createIntent()}
             >
-              <Add />{message.intent.create_button}
+              <Add />
+              {message.intent.create_button}
             </Button>
           </div>
           <ListFilter
@@ -98,7 +97,8 @@ class IntentPage extends Component {
             items={this.props.intents}
             text={message.intent.list_filter}
             actionOnClick={this.selectIntent}
-            selected_item_position={this.props.selected_item_position} />
+            selected_item_position={this.props.selected_item_position}
+          />
         </Grid>
 
         <Grid item xs={9}>
@@ -119,7 +119,7 @@ class IntentPage extends Component {
               new Intent(
                 this.props.id,
                 this.props.name,
-                this.props.content
+                this.props.content,
               )
             }
           />
@@ -141,13 +141,13 @@ class IntentPage extends Component {
             dialog_status={this.state.dialog_status}
           />
         </Grid>
-      </Grid >
-    )
+      </Grid>
+    );
   }
 }
 
-const mapStateToProps = state => { return { ...state.intent } };
+const mapStateToProps = (state) => ({ ...state.intent });
 
-const mapDispatchToProps = dispatch => bindActionCreators(IntentAction, dispatch);
+const mapDispatchToProps = (dispatch) => bindActionCreators(IntentAction, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(IntentPage);
diff --git a/app/src/pages/StoriesPage.js b/app/src/pages/StoriesPage.js
index 478ed70..d4576a9 100644
--- a/app/src/pages/StoriesPage.js
+++ b/app/src/pages/StoriesPage.js
@@ -1,53 +1,53 @@
 import { connect } from 'react-redux';
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
-import { Creators as StoryAction } from '../ducks/stories';
 import SearchIcon from '@material-ui/icons/Search';
 import CloseIcon from '@material-ui/icons/Close';
 
-import { Add } from '../styles/button';
 import { Link } from 'react-router-dom';
 import Grid from '@material-ui/core/Grid';
-import { message } from '../utils/messages';
 import Button from '@material-ui/core/Button';
 import Toolbar from '@material-ui/core/Toolbar';
-import StoryCard from '../components/StoryCard';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
-import SnackbarDelete from '../components/DeleteSnackbar';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import SnackbarDelete from '../components/DeleteSnackbar';
+import StoryCard from '../components/StoryCard';
+import { message } from '../utils/messages';
+import { Add } from '../styles/button';
+import { Creators as StoryAction } from '../ducks/stories';
 
 const style = {
   toolbar: {
-    background: "#f6f9f9",
-    padding: "6px 24px"
+    background: '#f6f9f9',
+    padding: '6px 24px',
   },
   create_button: {
-    marginTop: '9px'
+    marginTop: '9px',
   },
   loading: {
-    margin: "auto",
-    width: "100vw"
+    margin: 'auto',
+    width: '100vw',
   },
   list_story: {
-    background: "#dae8ea",
+    background: '#dae8ea',
     padding: 16,
     height: 'calc(100vh - 74px - 92px - 16px)',
     maxWidth: '100vw',
     overflowX: 'auto',
     columnCount: 6,
     columnGap: 0,
-    columnFill: 'auto'
-  }
-}
+    columnFill: 'auto',
+  },
+};
 
 class StoriesPage extends Component {
   constructor(props) {
     super(props);
     this.state = {
       value: '',
-      undo_delete: false
-    }
+      undo_delete: false,
+    };
     this.props.getStories();
   }
 
@@ -63,9 +63,10 @@ class StoriesPage extends Component {
     return (
       <Grid container>
         <Grid item xs={9}>
-          <Link to='/stories/new' style={{ textDecoration: 'none' }}>
+          <Link to="/stories/new" style={{ textDecoration: 'none' }}>
             <Button color="primary" variant="contained" style={style.create_button}>
-              <Add />Criar novo diálogo
+              <Add />
+              Criar novo diálogo
             </Button>
           </Link>
         </Grid>
@@ -81,40 +82,37 @@ class StoriesPage extends Component {
           />
         </Grid>
       </Grid>
-    )
+    );
   }
 
   cleanFilter() {
-    this.props.getStories('')
-    this.setState({ value: '' })
+    this.props.getStories('');
+    this.setState({ value: '' });
   }
 
   getFilterIcon() {
     if ((this.state.value).trim().length === 0) {
-      return <SearchIcon />
-    } else {
-      return (
-        <CloseIcon
-          onClick={() => this.cleanFilter()}
-          style={{ cursor: "pointer" }}
-        />
-      )
+      return <SearchIcon />;
     }
+    return (
+      <CloseIcon
+        onClick={() => this.cleanFilter()}
+        style={{ cursor: 'pointer' }}
+      />
+    );
   }
 
   getStoriesList() {
-    if(this.props.loading){
+    if (this.props.loading) {
       return <div style={style.loading}><center><CircularProgress /></center></div>;
     }
-    else {
-      if (this.props.stories !== undefined && this.props.stories.length !== 0) {
-        return this.props.stories.map((story, index) => (
-          <StoryCard key={'story_card_' + index} highlighted_text={this.state.value} story={story} />
-        ));
-      } else {
-        return <div style={{position:'absolute', width:'97%', textAlign:'center'}}><Typography variant="h5" color="secondary">{message.no_result}</Typography></div>;
-      }
+
+    if (this.props.stories !== undefined && this.props.stories.length !== 0) {
+      return this.props.stories.map((story, index) => (
+        <StoryCard key={`story_card_${index}`} highlighted_text={this.state.value} story={story} />
+      ));
     }
+    return <div style={{ position: 'absolute', width: '97%', textAlign: 'center' }}><Typography variant="h5" color="secondary">{message.no_result}</Typography></div>;
   }
 
   handleSnackbarClick(value) {
@@ -136,12 +134,12 @@ class StoriesPage extends Component {
           undo={this.state.undo_delete}
         />
       </span>
-    )
+    );
   }
 }
 
-const mapStateToProps = state => { return { ...state.story } };
+const mapStateToProps = (state) => ({ ...state.story });
 
-const mapDispatchToProps = dispatch => bindActionCreators(StoryAction, dispatch);
+const mapDispatchToProps = (dispatch) => bindActionCreators(StoryAction, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(StoriesPage);
diff --git a/app/src/pages/StoryEditPage.js b/app/src/pages/StoryEditPage.js
index 42a59ea..f6e0085 100644
--- a/app/src/pages/StoryEditPage.js
+++ b/app/src/pages/StoryEditPage.js
@@ -1,236 +1,236 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Grid from '@material-ui/core/Grid';
-import ItemsList from "../components/ItemsList";
 import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import SearchIcon from '@material-ui/icons/Search';
+import CloseIcon from '@material-ui/icons/Close';
+import { Link } from 'react-router-dom';
+import ItemsList from '../components/ItemsList';
 import Snackbar from '../components/Snackbar';
 import ErrorSnackbar from '../components/StorySnackbar';
-import { Creators as StoryAction } from "../ducks/stories";
-import Button from '@material-ui/core/Button';
+import { Creators as StoryAction } from '../ducks/stories';
 import IntentIcon from '../icons/IntentIcon';
 import UtterIcon from '../icons/UtterIcon';
 import StoryList from '../components/StoryList';
 import { Story } from '../utils/DataFormat.js';
-import TextField from '@material-ui/core/TextField';
 import ToolbarName from '../components/ToolbarName';
-import SearchIcon from '@material-ui/icons/Search';
-import CloseIcon from '@material-ui/icons/Close';
-import ExampleStory from "../components/ExampleStory";
+import ExampleStory from '../components/ExampleStory';
 import DeletionConfirmationDialog from '../components/DeletionConfirmationDialog';
 import { message } from '../utils/messages';
 import { Add } from '../styles/button';
-import { Link } from 'react-router-dom';
 
 const style = {
-    grid_item_list: {
-        background: "#dae8ea",
-        paddingTop: '15px',
-        height: "calc(100vh - 74px - 64px - 88px)",
-        overflowY: "auto",
-    },
-    list_container_utter: {
-        paddingLeft: "16px",
-    },
-    list_container_intent: {
-        paddingLeft: "16px",
-        borderRight: "solid 1px #CCC",
-    },
-    filter_items_container: {
-        padding: "12px 8px",
-        background: "#dae8ea",
-        width: "100%",
-    },
-    list: {
-        marginTop: '15px',
-    },
-    create_button: { padding: "18px 24px", background: "#dae8ea" }
-}
+  grid_item_list: {
+    background: '#dae8ea',
+    paddingTop: '15px',
+    height: 'calc(100vh - 74px - 64px - 88px)',
+    overflowY: 'auto',
+  },
+  list_container_utter: {
+    paddingLeft: '16px',
+  },
+  list_container_intent: {
+    paddingLeft: '16px',
+    borderRight: 'solid 1px #CCC',
+  },
+  filter_items_container: {
+    padding: '12px 8px',
+    background: '#dae8ea',
+    width: '100%',
+  },
+  list: {
+    marginTop: '15px',
+  },
+  create_button: { padding: '18px 24px', background: '#dae8ea' },
+};
 
 class StoryEditPage extends Component {
-    constructor(props) {
-        super(props);
-        this.props.getIntents()
-        this.props.getUtters()
-
-        const id = this.props.history.location.pathname.split('/').pop();
-        isNaN(id) ? this.props.createNewStory() : this.getStory(id);
-
-        this.state = {
-            value: "",
-            dialog_status: false
-        };
-        this.changeStatusDialog = this.changeStatusDialog.bind(this)
-        this.deleteStory = this.deleteStory.bind(this)
+  constructor(props) {
+    super(props);
+    this.props.getIntents();
+    this.props.getUtters();
+
+    const id = this.props.history.location.pathname.split('/').pop();
+    isNaN(id) ? this.props.createNewStory() : this.getStory(id);
+
+    this.state = {
+      value: '',
+      dialog_status: false,
+    };
+    this.changeStatusDialog = this.changeStatusDialog.bind(this);
+    this.deleteStory = this.deleteStory.bind(this);
+  }
+
+  changeStatusDialog(value) {
+    this.setState({ dialog_status: value });
+  }
+
+  deleteStory() {
+    this.props.deleteStory(this.props.story_id);
+    this.setState({ dialog_status: false });
+    setTimeout(() => this.props.getStories(), 2000);
+    this.props.history.push('/');
+  }
+
+  getStory() {
+    const story_id = window.location.pathname.split('/').pop();
+    if (story_id.length !== 0) {
+      this.props.getStory(story_id);
+    } else {
+      this.props.createNewStory();
     }
+  }
 
-    changeStatusDialog(value) {
-        this.setState({ dialog_status: value });
-    }
+  filterItems(items = []) {
+    return items.filter((item) => (item.name).includes(this.state.value));
+  }
 
-    deleteStory() {
-        this.props.deleteStory(this.props.story_id)
-        this.setState({ dialog_status: false });
-        setTimeout(() => this.props.getStories(), 2000);
-        this.props.history.push('/');
-    }
+  handleFilterClick() {
+    this.setState({ value: '' });
+    this.filterItems();
+  }
 
-    getStory() {
-        const story_id = window.location.pathname.split('/').pop();
-        if (story_id.length !== 0) {
-            this.props.getStory(story_id);
-        } else {
-            this.props.createNewStory();
-        }
-    }
+  handleFilterInput(e) {
+    this.setState({ value: e.target.value });
+    this.filterItems();
+  }
 
-    filterItems(items = []) {
-        return items.filter(item => (item.name).includes(this.state.value));
+  getFilterIcon() {
+    if ((this.state.value).trim().length === 0) {
+      return <SearchIcon />;
     }
-
-    handleFilterClick() {
-        this.setState({ value: "" });
-        this.filterItems();
-    }
-
-    handleFilterInput(e) {
-        this.setState({ value: e.target.value });
-        this.filterItems();
-    }
-
-    getFilterIcon() {
-        if ((this.state.value).trim().length === 0) {
-            return <SearchIcon />
-        } else {
-            return (
-                <CloseIcon
-                    onClick={() => this.handleFilterClick()}
-                    style={{ cursor: "pointer" }}
-                />
-            )
-        }
-    }
-
-    isButtonEnabled() {
-        const first_element_is_intent = (this.props.content.length !== 0 && this.props.content[0].type !== 'utter');
-        const contents_changed = JSON.stringify(this.props.content) !== JSON.stringify(this.props.old_content);
-        let is_enabled = this.props.content_text_validation.length === 0;
-        
-        
-        return first_element_is_intent && contents_changed && is_enabled;
-    }
-
-    render() {
-        return (
-            <Grid container item xs={12}>
-                <Grid container item xs={4} direction='column'>
-                    <div style={style.create_button}>
-                        <Link onClick={() => this.props.createNewStory()} to='/stories/new' style={{ textDecoration: 'none' }}>
-                            <Button
-                                color="primary"
-                                variant="contained"
-                            >
-                                <Add />{message.story.create_button}
-                            </Button>
-                        </Link>
-                    </div>
-                    <Grid container direction='row' style={style.grid_item_list}>
-                        <Grid item xs={2} sm={6} style={style.list_container_intent}>
-                            <Typography variant="body2" color="primary">
-                                Perguntas
-                            </Typography>
-                            <ItemsList
-                                story={true}
-                                icon={<IntentIcon />}
-                                highlighted_text={this.state.value}
-                                actionOnClick={this.props.addIntent}
-                                items={this.filterItems(this.props.intents)}
-                                content={this.props.content}
-                                selected_item_position={this.props.selected_item_position}
-                            />
-                        </Grid>
-                        <Grid item xs={2} sm={6} style={style.list_container_utter}>
-                            <Typography variant="body2" color="primary">
-                                Respostas
-                            </Typography>
-                            <ItemsList
-                                story={true}
-                                icon={<UtterIcon />}
-                                isSelected={this.isSelected}
-                                content={this.props.content}
-                                highlighted_text={this.state.value}
-                                actionOnClick={this.props.addUtter}
-                                items={this.filterItems(this.props.utters)}
-                                selected_item_position={this.props.selected_item_position}
-                            />
-                        </Grid>
-                    </Grid>
-                    <Grid container>
-                        <div style={style.filter_items_container}>
-                            <TextField
-                                fullWidth
-                                type="text"
-                                label="Filtrar"
-                                variant="outlined"
-                                value={this.state.value}
-                                InputProps={{ endAdornment: this.getFilterIcon() }}
-                                onChange={(e) => this.handleFilterInput(e)}
-                            />
-                        </div>
-                    </Grid>
-                </Grid>
-
-                <Grid item xs={8}>
-                    <ToolbarName
-                        story
-                        is_enabled={this.isButtonEnabled()}
-                        saveData={this.props.saveData}
-                        deleteItem={() => this.changeStatusDialog(true)}
-                        item={new Story(this.props.story_id, this.props.content, this.props.name)}
-                    />
-                    <div style={{
-                        height: "calc(100vh - 74px - 72px)",
-                        overflowY: "auto",
-                        overflowX: "hidden"
-                    }}>
-                        <Grid container item xs={12} direction="row">
-                            <Grid
-                                container
-                                item xs={8}
-                                justify="center"
-                                alignItems="flex-start"
-                                style={style.list}
-                            >
-                                <StoryList />
-                            </Grid>
-                            <Grid container item xs={4} >
-                                <ExampleStory />
-                            </Grid>
-                        </Grid>
-                    </div>
-                </Grid>
-                <ErrorSnackbar
-                    variant='error'
-                    handleClose={() => this.props.notifyContentTextValidation('')}
-                    notification_text={this.props.content_text_validation}
-                />
-                <Snackbar
-                    handleClose={() => this.props.notifyAction("")}
-                    notification_text={this.props.notification_text}
-                />
-                <DeletionConfirmationDialog
-                    handleClose={() => this.changeStatusDialog(false)}
-                    deleteItem={this.deleteStory}
-                    dialog_status={this.state.dialog_status}
-                />
+    return (
+      <CloseIcon
+        onClick={() => this.handleFilterClick()}
+        style={{ cursor: 'pointer' }}
+      />
+    );
+  }
+
+  isButtonEnabled() {
+    const first_element_is_intent = (this.props.content.length !== 0 && this.props.content[0].type !== 'utter');
+    const contents_changed = JSON.stringify(this.props.content) !== JSON.stringify(this.props.old_content);
+    const is_enabled = this.props.content_text_validation.length === 0;
+
+    return first_element_is_intent && contents_changed && is_enabled;
+  }
+
+  render() {
+    return (
+      <Grid container item xs={12}>
+        <Grid container item xs={4} direction="column">
+          <div style={style.create_button}>
+            <Link onClick={() => this.props.createNewStory()} to="/stories/new" style={{ textDecoration: 'none' }}>
+              <Button
+                color="primary"
+                variant="contained"
+              >
+                <Add />
+                {message.story.create_button}
+              </Button>
+            </Link>
+          </div>
+          <Grid container direction="row" style={style.grid_item_list}>
+            <Grid item xs={2} sm={6} style={style.list_container_intent}>
+              <Typography variant="body2" color="primary">
+                Perguntas
+              </Typography>
+              <ItemsList
+                story
+                icon={<IntentIcon />}
+                highlighted_text={this.state.value}
+                actionOnClick={this.props.addIntent}
+                items={this.filterItems(this.props.intents)}
+                content={this.props.content}
+                selected_item_position={this.props.selected_item_position}
+              />
             </Grid>
-        )
-    }
+            <Grid item xs={2} sm={6} style={style.list_container_utter}>
+              <Typography variant="body2" color="primary">
+                Respostas
+              </Typography>
+              <ItemsList
+                story
+                icon={<UtterIcon />}
+                isSelected={this.isSelected}
+                content={this.props.content}
+                highlighted_text={this.state.value}
+                actionOnClick={this.props.addUtter}
+                items={this.filterItems(this.props.utters)}
+                selected_item_position={this.props.selected_item_position}
+              />
+            </Grid>
+          </Grid>
+          <Grid container>
+            <div style={style.filter_items_container}>
+              <TextField
+                fullWidth
+                type="text"
+                label="Filtrar"
+                variant="outlined"
+                value={this.state.value}
+                InputProps={{ endAdornment: this.getFilterIcon() }}
+                onChange={(e) => this.handleFilterInput(e)}
+              />
+            </div>
+          </Grid>
+        </Grid>
+
+        <Grid item xs={8}>
+          <ToolbarName
+            story
+            is_enabled={this.isButtonEnabled()}
+            saveData={this.props.saveData}
+            deleteItem={() => this.changeStatusDialog(true)}
+            item={new Story(this.props.story_id, this.props.content, this.props.name)}
+          />
+          <div style={{
+            height: 'calc(100vh - 74px - 72px)',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+          }}
+          >
+            <Grid container item xs={12} direction="row">
+              <Grid
+                container
+                item
+                xs={8}
+                justify="center"
+                alignItems="flex-start"
+                style={style.list}
+              >
+                <StoryList />
+              </Grid>
+              <Grid container item xs={4}>
+                <ExampleStory />
+              </Grid>
+            </Grid>
+          </div>
+        </Grid>
+        <ErrorSnackbar
+          variant="error"
+          handleClose={() => this.props.notifyContentTextValidation('')}
+          notification_text={this.props.content_text_validation}
+        />
+        <Snackbar
+          handleClose={() => this.props.notifyAction('')}
+          notification_text={this.props.notification_text}
+        />
+        <DeletionConfirmationDialog
+          handleClose={() => this.changeStatusDialog(false)}
+          deleteItem={this.deleteStory}
+          dialog_status={this.state.dialog_status}
+        />
+      </Grid>
+    );
+  }
 }
 
+const mapStateToProps = (state) => ({ ...state.story });
 
-const mapStateToProps = state => { return { ...state.story } };
-
-const mapDispatchToProps = dispatch => bindActionCreators(StoryAction, dispatch);
+const mapDispatchToProps = (dispatch) => bindActionCreators(StoryAction, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(StoryEditPage);
diff --git a/app/src/pages/UtterPage.js b/app/src/pages/UtterPage.js
index f71a94e..c7a081a 100644
--- a/app/src/pages/UtterPage.js
+++ b/app/src/pages/UtterPage.js
@@ -1,19 +1,19 @@
-import { connect } from "react-redux";
-import { Add } from '../styles/button';
-import React, { Component } from "react";
+import { connect } from 'react-redux';
+import React, { Component } from 'react';
 import Grid from '@material-ui/core/Grid';
-import UtterIcon from '../icons/UtterIcon';
-import { Divider } from "@material-ui/core";
+import { Divider } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
-import UtterForm from "../components/UtterForm";
+import { bindActionCreators } from 'redux';
+import { Add } from '../styles/button';
+import UtterIcon from '../icons/UtterIcon';
+import UtterForm from '../components/UtterForm';
 import { isButtonEnabled } from '../utils/utils';
-import ListFilter from "../components/ListFilter";
+import ListFilter from '../components/ListFilter';
 import ToolbarName from '../components/ToolbarName';
 import DeletionConfirmationDialog from '../components/DeletionConfirmationDialog';
 
-import { style } from '../styles/style'
-import { bindActionCreators } from 'redux';
-import { Utter } from "../utils/DataFormat";
+import { style } from '../styles/style';
+import { Utter } from '../utils/DataFormat';
 import Snackbar from '../components/Snackbar';
 import { Creators as UtterAction } from '../ducks/utters';
 import { message } from '../utils/messages';
@@ -23,24 +23,23 @@ class UtterPage extends Component {
     super(props);
     this.props.getUtters();
     const id = this.props.history.location.pathname.split('/').pop();
-    if(!isNaN(id)) { this.props.selectUtter(id); }
+    if (!isNaN(id)) { this.props.selectUtter(id); }
 
     this.state = {
-      dialog_status: false
-    }
+      dialog_status: false,
+    };
 
-    this.selectUtter = this.selectUtter.bind(this)
-    this.deleteUtter = this.deleteUtter.bind(this)
-    this.changeStatusDialog = this.changeStatusDialog.bind(this)
+    this.selectUtter = this.selectUtter.bind(this);
+    this.deleteUtter = this.deleteUtter.bind(this);
+    this.changeStatusDialog = this.changeStatusDialog.bind(this);
   }
 
-
   changeStatusDialog(value) {
     this.setState({ dialog_status: value });
   }
 
   deleteUtter() {
-    this.props.deleteUtter(this.props.id)
+    this.props.deleteUtter(this.props.id);
     this.setState({ dialog_status: false });
   }
 
@@ -50,7 +49,7 @@ class UtterPage extends Component {
 
   handleSnackbarClick(value) {
     if (value === false) {
-      this.props.deleteUtter(this.props.id)
+      this.props.deleteUtter(this.props.id);
     }
     value = (value === undefined ? false : value);
     this.setState({ undo_delete: value });
@@ -59,12 +58,12 @@ class UtterPage extends Component {
   checkEmptyFieldsUtter(alternatives) {
     let changed = true;
     if (alternatives !== undefined) {
-      alternatives.forEach(alternative => {
-        alternative.forEach(text => {
+      alternatives.forEach((alternative) => {
+        alternative.forEach((text) => {
           if (text.trim().length === 0) {
             changed = false;
           }
-        })
+        });
       });
     }
     return changed;
@@ -79,12 +78,12 @@ class UtterPage extends Component {
       this.props.name,
       this.props.old_name,
       this.props.helper_text,
-      no_empty_fields
+      no_empty_fields,
     );
   }
 
   selectUtter(data, utter_position) {
-    this.props.history.push('/utters/' + data.id);
+    this.props.history.push(`/utters/${data.id}`);
     this.props.selectUtter(data.id, utter_position);
   }
 
@@ -103,7 +102,8 @@ class UtterPage extends Component {
               variant="contained"
               onClick={() => this.createUtter()}
             >
-              <Add />{message.utter.create_button}
+              <Add />
+              {message.utter.create_button}
             </Button>
           </div>
           <ListFilter
@@ -111,7 +111,8 @@ class UtterPage extends Component {
             items={this.props.utters}
             text={message.utter.list_filter}
             actionOnClick={this.selectUtter}
-            selected_item_position={this.props.selected_item_position} />
+            selected_item_position={this.props.selected_item_position}
+          />
         </Grid>
 
         <Grid item xs={9}>
@@ -133,7 +134,7 @@ class UtterPage extends Component {
                 this.props.id,
                 this.props.name,
                 this.props.multiple_alternatives,
-                this.props.content
+                this.props.content,
               )
             }
           />
@@ -153,13 +154,13 @@ class UtterPage extends Component {
             dialog_status={this.state.dialog_status}
           />
         </Grid>
-      </Grid >
-    )
+      </Grid>
+    );
   }
 }
 
-const mapStateToProps = state => { return { ...state.utter } };
+const mapStateToProps = (state) => ({ ...state.utter });
 
-const mapDispatchToProps = dispatch => bindActionCreators(UtterAction, dispatch);
+const mapDispatchToProps = (dispatch) => bindActionCreators(UtterAction, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(UtterPage);
diff --git a/app/src/serviceWorker.js b/app/src/serviceWorker.js
index f8c7e50..cabff3d 100644
--- a/app/src/serviceWorker.js
+++ b/app/src/serviceWorker.js
@@ -11,13 +11,13 @@
 // opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === 'localhost'
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    || window.location.hostname === '[::1]'
     // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    || window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
 );
 
 export function register(config) {
@@ -42,8 +42,8 @@ export function register(config) {
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+            'This web app is being served cache-first by a service '
+              + 'worker. To learn more, visit https://bit.ly/CRA-PWA',
           );
         });
       } else {
@@ -57,7 +57,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -70,8 +70,8 @@ function registerValidSW(swUrl, config) {
               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
               console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                'New content is available and will be used when all '
+                  + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
               );
 
               // Execute callback
@@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
@@ -101,15 +101,15 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
       if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
+        response.status === 404
+        || (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -121,14 +121,14 @@ function checkValidServiceWorker(swUrl, config) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        'No internet connection found. App is running in offline mode.',
       );
     });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }
diff --git a/app/src/styles/button.js b/app/src/styles/button.js
index e925d54..010b8cc 100644
--- a/app/src/styles/button.js
+++ b/app/src/styles/button.js
@@ -4,7 +4,7 @@ import DoneIcon from '@material-ui/icons/Done';
 
 export const Done = styled(DoneIcon)`
     margin-right:4px
-`
+`;
 export const Add = styled(AddIcon)`
     margin-right:4px
-`
\ No newline at end of file
+`;
diff --git a/app/src/styles/dialog.js b/app/src/styles/dialog.js
index a1703eb..2379a38 100644
--- a/app/src/styles/dialog.js
+++ b/app/src/styles/dialog.js
@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 
-
 export const DialogBoxPrimary = styled.div`
     position:relative;
     margin-top: 24px;
@@ -26,7 +25,7 @@ export const DialogBoxPrimary = styled.div`
     textarea {
         line-height: 1.5rem;
     }
-`
+`;
 
 export const DialogBoxSecondary = styled.div`
     position:relative;
@@ -42,8 +41,7 @@ export const DialogBoxSecondary = styled.div`
     line-height: 1.5rem;
   }
 
-`
-
+`;
 
 export const NewPrimaryDialog = styled.div`
     margin-top: 24px;
@@ -67,8 +65,7 @@ export const NewPrimaryDialog = styled.div`
         background: #FDE9E6;
         clip-path: polygon(22% 0, 25% 2%, 27% 4%, 100% 69%, 0 99%, 0 0);
     }
-`
-
+`;
 
 export const NewSecondaryDialog = styled.div`
     margin-top: -12px;
@@ -79,4 +76,4 @@ export const NewSecondaryDialog = styled.div`
     opacity: 0.6;
     cursor: pointer;
     filter: drop-shadow(0px 2px 0px rgba(241, 80, 53, 0.3));
-`
\ No newline at end of file
+`;
diff --git a/app/src/styles/exampleBalloon.js b/app/src/styles/exampleBalloon.js
index 1c97dec..17ad4e8 100644
--- a/app/src/styles/exampleBalloon.js
+++ b/app/src/styles/exampleBalloon.js
@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 
-
 export const IntentBalloon = styled.div`
   position: relative;
   padding: 8px 12px;
@@ -20,7 +19,7 @@ export const IntentBalloon = styled.div`
     background: inherit;
     clip-path: polygon(100% 0, 100% 100%, 92% 100%, 82% 98%, 78% 92%, 0 0);
   }
-`
+`;
 
 export const UtterFirstBalloon = styled.div`
   position: relative;
@@ -41,7 +40,7 @@ export const UtterFirstBalloon = styled.div`
     background: inherit;
     clip-path: polygon(18% 4%, 22% 8%, 26% 14%, 100% 100%, 0 100%, 0 0);
   }
-`
+`;
 
 export const UtterBalloon = styled.div`
   padding: 8px 12px;
@@ -49,4 +48,4 @@ export const UtterBalloon = styled.div`
   align-self: stretch;
   background: #fde9e6;
   margin: 0 36px 8px 16px;
-`
\ No newline at end of file
+`;
diff --git a/app/src/styles/story.js b/app/src/styles/story.js
index 3e4de67..db51306 100644
--- a/app/src/styles/story.js
+++ b/app/src/styles/story.js
@@ -27,4 +27,4 @@ export const StoryBox = styled.div`
       border-color: transparent;
       overflow: auto;
 }
-`
\ No newline at end of file
+`;
diff --git a/app/src/styles/style.js b/app/src/styles/style.js
index a753ffc..5caaba6 100644
--- a/app/src/styles/style.js
+++ b/app/src/styles/style.js
@@ -1,5 +1,4 @@
-import styled from 'styled-components'
-
+import styled from 'styled-components';
 
 export const List = styled.li`
 display: inline-block;
@@ -9,17 +8,16 @@ a {
     color: #FFF;
     padding: 4px 20px;
 }
-`
+`;
 
 export const style = {
-    grid_item_list: {
-      background: "#dae8ea"
-    },
-    item_form: {
-      height: "calc(100vh - 64px - 90px)",
-      overflowY: "auto",
-      overflowX: "hidden"
-    },
-    create_button: { padding: "18px 24px" }
-  }
-  
\ No newline at end of file
+  grid_item_list: {
+    background: '#dae8ea',
+  },
+  item_form: {
+    height: 'calc(100vh - 64px - 90px)',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+  },
+  create_button: { padding: '18px 24px' },
+};
diff --git a/app/src/tests/components/CustomSnackbar.test.js b/app/src/tests/components/CustomSnackbar.test.js
index d0eb9ad..4c3d80d 100644
--- a/app/src/tests/components/CustomSnackbar.test.js
+++ b/app/src/tests/components/CustomSnackbar.test.js
@@ -1,18 +1,18 @@
 import React from 'react';
-import CustomSnackbar from '../../components/CustomSnackbar';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import CustomSnackbar from '../../components/CustomSnackbar';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-    const tree = renderer
-        .create(<CustomSnackbar
-            variant='success'
-            message='example text'
-            onClose={() => jest.fn()}
-        />)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<CustomSnackbar
+      variant="success"
+      message="example text"
+      onClose={() => jest.fn()}
+    />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/components/DeleteSnackbar.test.js b/app/src/tests/components/DeleteSnackbar.test.js
index 7a0d241..ef63705 100644
--- a/app/src/tests/components/DeleteSnackbar.test.js
+++ b/app/src/tests/components/DeleteSnackbar.test.js
@@ -1,18 +1,18 @@
 import React from 'react';
-import DeleteSnackbar from '../../components/DeleteSnackbar';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import DeleteSnackbar from '../../components/DeleteSnackbar';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-    const tree = renderer
-        .create(<DeleteSnackbar
-            handleUndo={() => jest.fn()}
-            handleSnackbarClick={() => jest.fn()}
-            undo={false}
-        />)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<DeleteSnackbar
+      handleUndo={() => jest.fn()}
+      handleSnackbarClick={() => jest.fn()}
+      undo={false}
+    />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/components/DeletionConfirmationDialog.test.js b/app/src/tests/components/DeletionConfirmationDialog.test.js
index 6303350..e04b60c 100644
--- a/app/src/tests/components/DeletionConfirmationDialog.test.js
+++ b/app/src/tests/components/DeletionConfirmationDialog.test.js
@@ -1,18 +1,18 @@
 import React from 'react';
-import DeletionConfirmationDialog from '../../components/DeletionConfirmationDialog';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import DeletionConfirmationDialog from '../../components/DeletionConfirmationDialog';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-    const tree = renderer
-        .create(<DeletionConfirmationDialog
-            handleClose={() => jest.fn()}
-            deleteItem={() => jest.fn()}
-            dialog_status={false}
-        />)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<DeletionConfirmationDialog
+      handleClose={() => jest.fn()}
+      deleteItem={() => jest.fn()}
+      dialog_status={false}
+    />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/components/ItemsList.test.js b/app/src/tests/components/ItemsList.test.js
index 534c0d6..c030a9c 100644
--- a/app/src/tests/components/ItemsList.test.js
+++ b/app/src/tests/components/ItemsList.test.js
@@ -1,22 +1,21 @@
 import React from 'react';
-import ItemsList from '../../components/ItemsList';
-import IntentIcon from '../../icons/IntentIcon';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import IntentIcon from '../../icons/IntentIcon';
+import ItemsList from '../../components/ItemsList';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-
-    const tree = renderer
-        .create(<ItemsList
-            actionOnClick={() => jest.fn()}
-            items={[{name: '1'}, {name:'2'}]}
-            icon={<IntentIcon />}
-            highlighted_text=''
-            selected_item_position={0}
-        />)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<ItemsList
+      actionOnClick={() => jest.fn()}
+      items={[{ name: '1' }, { name: '2' }]}
+      icon={<IntentIcon />}
+      highlighted_text=""
+      selected_item_position={0}
+    />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/components/ListFilter.test.js b/app/src/tests/components/ListFilter.test.js
index 04fba9e..45ee613 100644
--- a/app/src/tests/components/ListFilter.test.js
+++ b/app/src/tests/components/ListFilter.test.js
@@ -1,23 +1,21 @@
-
 import React from 'react';
-import ListFilter from '../../components/ListFilter';
-import UtterIcon from '../../icons/UtterIcon';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import UtterIcon from '../../icons/UtterIcon';
+import ListFilter from '../../components/ListFilter';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-
-    const tree = renderer
-        .create(<ListFilter
-            icon={< UtterIcon />}
-            items={[{name: '1'}, {name: '2'}]}
-            text='example text'
-            actionOnClick={jest.fn()}
-            selected_item_position={0}
-        />)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<ListFilter
+      icon={<UtterIcon />}
+      items={[{ name: '1' }, { name: '2' }]}
+      text="example text"
+      actionOnClick={jest.fn()}
+      selected_item_position={0}
+    />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/components/MenuNavbar.test.js b/app/src/tests/components/MenuNavbar.test.js
index 31dec95..ba20af3 100644
--- a/app/src/tests/components/MenuNavbar.test.js
+++ b/app/src/tests/components/MenuNavbar.test.js
@@ -1,18 +1,15 @@
-
 import React from 'react';
-import MenuNavbar from '../../components/MenuNavbar';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
-
+import MenuNavbar from '../../components/MenuNavbar';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-
-    const tree = renderer
-        .create(<Router><MenuNavbar /></Router>)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<Router><MenuNavbar /></Router>)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/components/NameField.test.js b/app/src/tests/components/NameField.test.js
index 648a1fc..9e3d50f 100644
--- a/app/src/tests/components/NameField.test.js
+++ b/app/src/tests/components/NameField.test.js
@@ -1,24 +1,22 @@
-
 import React from 'react';
-import NameField from '../../components/NameField';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import NameField from '../../components/NameField';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-
-    const tree = renderer
-        .create(<NameField 
-            name='name example'
-            items={['1', '2']}
-            item_id={1}
-            label='label example'
-            placeholder='placeholder example'
-            setItemName={jest.fn()}
-            helper_text='helper text example'
-        />)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<NameField
+      name="name example"
+      items={['1', '2']}
+      item_id={1}
+      label="label example"
+      placeholder="placeholder example"
+      setItemName={jest.fn()}
+      helper_text="helper text example"
+    />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/components/StoryCard.test.js b/app/src/tests/components/StoryCard.test.js
index 95a2b91..c6254da 100644
--- a/app/src/tests/components/StoryCard.test.js
+++ b/app/src/tests/components/StoryCard.test.js
@@ -1,22 +1,22 @@
 import React from 'react';
-import StoryCard from '../../components/StoryCard';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
-import { Story } from '../../utils/DataFormat';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { Story } from '../../utils/DataFormat';
+import StoryCard from '../../components/StoryCard';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-    let story_example = new Story(0, [{ type: 'intent', id: 1, name: 'intent_example' }, { type: 'utter', id: 2, name: 'utter_example'}], 'story_example1')
-    const tree = renderer
-        .create(<Router>
-            <StoryCard
-                story={story_example}
-                highlighted_text=''
-            />
-        </Router>)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const story_example = new Story(0, [{ type: 'intent', id: 1, name: 'intent_example' }, { type: 'utter', id: 2, name: 'utter_example' }], 'story_example1');
+  const tree = renderer
+    .create(<Router>
+      <StoryCard
+        story={story_example}
+        highlighted_text=""
+      />
+            </Router>)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/ducks/intents.test.js b/app/src/tests/ducks/intents.test.js
index 0ea7d39..0879909 100644
--- a/app/src/tests/ducks/intents.test.js
+++ b/app/src/tests/ducks/intents.test.js
@@ -1,155 +1,154 @@
 import { Intent } from '../../utils/DataFormat';
 import {
-    addIntent,
-    setIntentContent,
-    deleteIntentContent,
-    undoDeleteIntentContent,
-    selectIntent,
-    createNewIntent,
-    setIntentName,
-    notifyAction,
-    getIntents
+  addIntent,
+  setIntentContent,
+  deleteIntentContent,
+  undoDeleteIntentContent,
+  selectIntent,
+  createNewIntent,
+  setIntentName,
+  notifyAction,
+  getIntents,
 } from '../../ducks/intents';
 
 import { clone } from '../../utils/utils';
 
 const INITIAL_STATE = {
-    intents: [],
-    mode: 'Intent',
-    name: '',
-    helper_text: '',
-    old_name: '',
-    notification_text: '',
-    content: [''],
-    old_content: [''],
+  intents: [],
+  mode: 'Intent',
+  name: '',
+  helper_text: '',
+  old_name: '',
+  notification_text: '',
+  content: [''],
+  old_content: [''],
 };
 
 describe('add intent method', () => {
-    it('should add an empty intent sample to state', () => {
-        let state =  clone(INITIAL_STATE);
-        state.content = ['', '']
-        state.old_content = ['', '']
-        expect(addIntent()).toEqual(state);
-    })
-})
+  it('should add an empty intent sample to state', () => {
+    const state = clone(INITIAL_STATE);
+    state.content = ['', ''];
+    state.old_content = ['', ''];
+    expect(addIntent()).toEqual(state);
+  });
+});
 
 describe('set intent content method', () => {
-    it('should set content to intent', () => {
-        let action = {
-            text: 'test',
-            intent_position: 0
-        };
-        let new_state = setIntentContent(INITIAL_STATE, action)
-        let state = clone(INITIAL_STATE);
-        state.content = ['test'];
-        expect(new_state).toEqual(state);
-    })
-})
+  it('should set content to intent', () => {
+    const action = {
+      text: 'test',
+      intent_position: 0,
+    };
+    const new_state = setIntentContent(INITIAL_STATE, action);
+    const state = clone(INITIAL_STATE);
+    state.content = ['test'];
+    expect(new_state).toEqual(state);
+  });
+});
 
 describe('delete intent content method', () => {
-    it('should delete intent content sample to state', () => {
-        let action = {
-            intent_position: 0
-        };
-        let state = clone(INITIAL_STATE);
-        state.content = ['test', 'test2'];
-        let new_state = clone(state);
-        new_state.content = ['test2'];
-        new_state.old_content = ['test', 'test2'];
-        expect(deleteIntentContent(state, action)).toEqual(new_state);
-    })
-})
-
-describe('undo delete intent content method',() => {
-    it('shoud set the intent content to the old state', () => {
-        let state = clone(INITIAL_STATE);
-        state.content = ['test2'];
-        state.old_content = ['test', 'test2'];
-        let new_state = clone(state);
-        new_state.content = state.old_content;
-        expect(undoDeleteIntentContent(state)).toEqual(new_state)
-    })
-})
-
-describe('select intent method',() => {
-    it('shoud set the selected item to the intent requested', () => {
-        let intent_test = new Intent(1,'intent_test', ['test_sample1', 'test_sample2']);
-        let action = {
-            item: intent_test,
-            item_position:0
-        }
-        let state = clone(INITIAL_STATE);
-        state.intents.push(intent_test);
-        let new_state = clone(state);
-        new_state.id = intent_test.id;
-        new_state.name = intent_test.name;
-        new_state.old_name = intent_test.name;
-        new_state.selected_item_position = 0;
-        new_state.content = intent_test.samples;
-        new_state.old_content = intent_test.samples;
-
-        expect(selectIntent(state, action)).toEqual(new_state);
-
-    })
-})
+  it('should delete intent content sample to state', () => {
+    const action = {
+      intent_position: 0,
+    };
+    const state = clone(INITIAL_STATE);
+    state.content = ['test', 'test2'];
+    const new_state = clone(state);
+    new_state.content = ['test2'];
+    new_state.old_content = ['test', 'test2'];
+    expect(deleteIntentContent(state, action)).toEqual(new_state);
+  });
+});
+
+describe('undo delete intent content method', () => {
+  it('shoud set the intent content to the old state', () => {
+    const state = clone(INITIAL_STATE);
+    state.content = ['test2'];
+    state.old_content = ['test', 'test2'];
+    const new_state = clone(state);
+    new_state.content = state.old_content;
+    expect(undoDeleteIntentContent(state)).toEqual(new_state);
+  });
+});
+
+describe('select intent method', () => {
+  it('shoud set the selected item to the intent requested', () => {
+    const intent_test = new Intent(1, 'intent_test', ['test_sample1', 'test_sample2']);
+    const action = {
+      item: intent_test,
+      item_position: 0,
+    };
+    const state = clone(INITIAL_STATE);
+    state.intents.push(intent_test);
+    const new_state = clone(state);
+    new_state.id = intent_test.id;
+    new_state.name = intent_test.name;
+    new_state.old_name = intent_test.name;
+    new_state.selected_item_position = 0;
+    new_state.content = intent_test.samples;
+    new_state.old_content = intent_test.samples;
+
+    expect(selectIntent(state, action)).toEqual(new_state);
+  });
+});
 
 describe('create new intent method', () => {
-    it('should create a new intent', () => {
-        let new_state = clone(INITIAL_STATE);
-        let intent_test = new Intent();
-        new_state.id =intent_test.id;
-        new_state.selected_item_position = -1;
-        new_state.name = intent_test.name;
-        new_state.old_name = intent_test.name;
-        new_state.content = [...intent_test.samples];
-        new_state.old_content = [...intent_test.samples];
-
-        expect(createNewIntent(INITIAL_STATE)).toEqual(new_state)
-    })
-})
+  it('should create a new intent', () => {
+    const new_state = clone(INITIAL_STATE);
+    const intent_test = new Intent();
+    new_state.id = intent_test.id;
+    new_state.selected_item_position = -1;
+    new_state.name = intent_test.name;
+    new_state.old_name = intent_test.name;
+    new_state.content = [...intent_test.samples];
+    new_state.old_content = [...intent_test.samples];
+
+    expect(createNewIntent(INITIAL_STATE)).toEqual(new_state);
+  });
+});
 
 describe('set intent name method', () => {
-    it('should update the name', () => {
-        let action = {
-            name: 'new name test',
-            helper_text: 'helper text test'
-        };
-        let new_state = clone(INITIAL_STATE);
-        new_state.name = action.name;
-        new_state.helper_text = action.helper_text;
-
-        expect(setIntentName(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+  it('should update the name', () => {
+    const action = {
+      name: 'new name test',
+      helper_text: 'helper text test',
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.name = action.name;
+    new_state.helper_text = action.helper_text;
+
+    expect(setIntentName(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('notify action method', () => {
-    it('should update the notification text', () => {
-        let action = {
-            text: 'new notification'
-        };
-        let new_state = clone(INITIAL_STATE);
-        new_state.notification_text = action.text;
+  it('should update the notification text', () => {
+    const action = {
+      text: 'new notification',
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.notification_text = action.text;
 
-        expect(notifyAction(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+    expect(notifyAction(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('get intents method', () => {
-    it('should update the intents state', () => {
-        let action = {
-            intents: [
-                new Intent(1,'intent_test', ['sample_test'])
-            ]
-        };
-        let new_state = clone(INITIAL_STATE);
-        new_state.intents = action.intents;
-
-        expect(getIntents(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+  it('should update the intents state', () => {
+    const action = {
+      intents: [
+        new Intent(1, 'intent_test', ['sample_test']),
+      ],
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.intents = action.intents;
+
+    expect(getIntents(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 // describe('create or update item method', () => {
 //     it('should create or update a new item', () => {
-        
+
 //     })
-// })
\ No newline at end of file
+// })
diff --git a/app/src/tests/ducks/stories.test.js b/app/src/tests/ducks/stories.test.js
index 4cc978c..1d53a7f 100644
--- a/app/src/tests/ducks/stories.test.js
+++ b/app/src/tests/ducks/stories.test.js
@@ -3,198 +3,194 @@ import { clone } from '../../utils/utils';
 import { message } from '../../utils/messages';
 
 import {
-    getIntents,
-    getUtters,
-    getStories,
-    getStory,
-    validationContent,
-    reorderContent,
-    deleteContent,
-    undoDeleteContent,
-    notifyAction,
-    notifyContentTextValidation,
-    addToStory,
-    createNewStory,
-    createOrUpdateItem
+  getIntents,
+  getUtters,
+  getStories,
+  getStory,
+  validationContent,
+  reorderContent,
+  deleteContent,
+  undoDeleteContent,
+  notifyAction,
+  notifyContentTextValidation,
+  addToStory,
+  createNewStory,
+  createOrUpdateItem,
 
 } from '../../ducks/stories';
 
 const INITIAL_STATE = {
-    utters: [],
-    intents: [],
-    stories: [],
-    content: [],
-    name: "",
-    old_content: [],
-    story_id: "",
-    notification_text: "",
-    content_text_validation: "",
-    loading: false
+  utters: [],
+  intents: [],
+  stories: [],
+  content: [],
+  name: '',
+  old_content: [],
+  story_id: '',
+  notification_text: '',
+  content_text_validation: '',
+  loading: false,
 };
 
-describe('get intents method', () =>{
-    it('should add intents to the state', () => {
-        let intent = new Intent();
-        let action = {
-            intents: [ intent ]
-        };
-        let new_state = clone(INITIAL_STATE);
-        new_state.intents = action.intents;
+describe('get intents method', () => {
+  it('should add intents to the state', () => {
+    const intent = new Intent();
+    const action = {
+      intents: [intent],
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.intents = action.intents;
 
-        expect(getIntents(INITIAL_STATE, action)).toEqual(new_state);
-
-    })
-})
+    expect(getIntents(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('get utters method', () => {
-    it('should add utters to the state', () => {
-        let utter = new Utter();
-        let action = {
-            utters: [utter]
-        };
-        let new_state = clone(INITIAL_STATE);
-        new_state.utters = action.utters;
-
-        expect(getUtters(INITIAL_STATE, action)).toEqual(new_state);
-
-    })
-})
+  it('should add utters to the state', () => {
+    const utter = new Utter();
+    const action = {
+      utters: [utter],
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.utters = action.utters;
+
+    expect(getUtters(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('get stories method', () => {
-    it('should add stories to the state', () => {
-        let story = new Story();
-        let action = {
-            stories: [story]
-        };
-        let new_state = clone(INITIAL_STATE);
-        new_state.stories = action.stories;
-
-        expect(getStories(INITIAL_STATE, action)).toEqual(new_state);
-
-    })
-})
+  it('should add stories to the state', () => {
+    const story = new Story();
+    const action = {
+      stories: [story],
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.stories = action.stories;
+
+    expect(getStories(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('get story method', () => {
-    it('should add the story content to the state', () => {
-        let story = new Story(1, 'story_test_1', [ {id: 1, type: 'intent'} ]);
-        let action = {
-            story: story
-        };
-        let new_state = clone(INITIAL_STATE);
-        new_state.name = action.story.name;
-        new_state.story_id = action.story.id;
-        new_state.content = action.story.content;
-        new_state.old_content = action.story.content;
-
-        expect(getStory(INITIAL_STATE, action)).toEqual(new_state);
-
-    })
-})
+  it('should add the story content to the state', () => {
+    const story = new Story(1, 'story_test_1', [{ id: 1, type: 'intent' }]);
+    const action = {
+      story,
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.name = action.story.name;
+    new_state.story_id = action.story.id;
+    new_state.content = action.story.content;
+    new_state.old_content = action.story.content;
+
+    expect(getStory(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('validate content method', () => {
-    it('should warn about two intents problem', () => {
-        let content = [{ id: 1, type: 'utter' }, { id: 1, type: 'intent' }, { id: 2, type: 'intent' }];
-        expect(validationContent(content)).toEqual(message.story.two_intents)
-    })
-
-    it('should warn about starting with intents problem', () => {
-        let content = [{ id: 1, type: 'utter' }, { id: 1, type: 'intent' }, { id: 1, type: 'utter' }];
-        expect(validationContent(content)).toEqual(message.story.first_element)
-    })
-
-    it('should return a empty string when everything is fine', () => {
-        let content = [{ id: 1, type: 'intent' }, { id: 1, type: 'utter' }];
-        expect(validationContent(content)).toEqual('')
-    })
-})
+  it('should warn about two intents problem', () => {
+    const content = [{ id: 1, type: 'utter' }, { id: 1, type: 'intent' }, { id: 2, type: 'intent' }];
+    expect(validationContent(content)).toEqual(message.story.two_intents);
+  });
+
+  it('should warn about starting with intents problem', () => {
+    const content = [{ id: 1, type: 'utter' }, { id: 1, type: 'intent' }, { id: 1, type: 'utter' }];
+    expect(validationContent(content)).toEqual(message.story.first_element);
+  });
+
+  it('should return a empty string when everything is fine', () => {
+    const content = [{ id: 1, type: 'intent' }, { id: 1, type: 'utter' }];
+    expect(validationContent(content)).toEqual('');
+  });
+});
 
 describe('reorder content method', () => {
-    it('should reorder the content', () => {
-        let state = clone(INITIAL_STATE);
-        state.content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }, { id: 3, type: 'utter' }];
-        let action = {
-            start_index: 1,
-            end_index: 2
-        }
-        let new_state = clone(INITIAL_STATE);
-        new_state.content = [{ id: 1, type: 'intent' }, { id: 3, type: 'utter' }, { id: 2, type: 'utter' }];
-        new_state.old_content = state.content;
-        expect(reorderContent(state, action)).toEqual(new_state);
-    })
-})
+  it('should reorder the content', () => {
+    const state = clone(INITIAL_STATE);
+    state.content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }, { id: 3, type: 'utter' }];
+    const action = {
+      start_index: 1,
+      end_index: 2,
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.content = [{ id: 1, type: 'intent' }, { id: 3, type: 'utter' }, { id: 2, type: 'utter' }];
+    new_state.old_content = state.content;
+    expect(reorderContent(state, action)).toEqual(new_state);
+  });
+});
 
 describe('delete content method', () => {
-    it('should delete the selected content from state', () => {
-        let state = clone(INITIAL_STATE);
-        state.content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }, { id: 3, type: 'utter' }];
-        let action = {
-            content_position: 2
-        };
-        let new_state = clone(state);
-        new_state.content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }];
-        new_state.old_content = state.content;
-        expect(deleteContent(state, action)).toEqual(new_state);
-    })
-})
+  it('should delete the selected content from state', () => {
+    const state = clone(INITIAL_STATE);
+    state.content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }, { id: 3, type: 'utter' }];
+    const action = {
+      content_position: 2,
+    };
+    const new_state = clone(state);
+    new_state.content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }];
+    new_state.old_content = state.content;
+    expect(deleteContent(state, action)).toEqual(new_state);
+  });
+});
 describe('undo delete content method', () => {
-    it('should return to the previous state', () => {
-        let state = clone(INITIAL_STATE);
-        state.content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }];
-        state.old_content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }, { id: 3, type: 'utter' }];
+  it('should return to the previous state', () => {
+    const state = clone(INITIAL_STATE);
+    state.content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }];
+    state.old_content = [{ id: 1, type: 'intent' }, { id: 2, type: 'utter' }, { id: 3, type: 'utter' }];
 
-        let new_state = clone(INITIAL_STATE);
-        new_state.content = state.old_content;
-        new_state.old_content = state.old_content;
+    const new_state = clone(INITIAL_STATE);
+    new_state.content = state.old_content;
+    new_state.old_content = state.old_content;
 
-        expect(undoDeleteContent(state)).toEqual(new_state);
-    })
-})
+    expect(undoDeleteContent(state)).toEqual(new_state);
+  });
+});
 
 describe('notify action method', () => {
-    it('should add to state the notification text', () => {
-        let action = {
-            text: 'notification text example'
-        };
+  it('should add to state the notification text', () => {
+    const action = {
+      text: 'notification text example',
+    };
 
-        let new_state = clone(INITIAL_STATE);
-        new_state.notification_text= action.text;
+    const new_state = clone(INITIAL_STATE);
+    new_state.notification_text = action.text;
 
-        expect(notifyAction(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+    expect(notifyAction(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('notify content text validation method', () => {
-    it('should add to state the content text validation', () => {
-        let action = {
-            text: 'text example'
-        };
+  it('should add to state the content text validation', () => {
+    const action = {
+      text: 'text example',
+    };
 
-        let new_state = clone(INITIAL_STATE);
-        new_state.content_text_validation= action.text;
+    const new_state = clone(INITIAL_STATE);
+    new_state.content_text_validation = action.text;
 
-        expect(notifyContentTextValidation(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+    expect(notifyContentTextValidation(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('add to story method', () => {
-    it('should add content to story', () => {
-        let action = {
-            mode: 'intent',
-            item: 1
-        };
-        let new_state = clone(INITIAL_STATE);
-        new_state.content = [{...action.item, type: action.mode}]
-
-        expect(addToStory(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+  it('should add content to story', () => {
+    const action = {
+      mode: 'intent',
+      item: 1,
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.content = [{ ...action.item, type: action.mode }];
+
+    expect(addToStory(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('create new story method', () => {
-    it('should return the story states to adapt to a new story', () => {
-        let state = clone(INITIAL_STATE);
-        state.name = 'teste 1';
-        state.notification_text = 'notification example';
-        state.story_id = 1; 
-        expect(createNewStory(state)).toEqual(INITIAL_STATE);
-    })
-})
+  it('should return the story states to adapt to a new story', () => {
+    const state = clone(INITIAL_STATE);
+    state.name = 'teste 1';
+    state.notification_text = 'notification example';
+    state.story_id = 1;
+    expect(createNewStory(state)).toEqual(INITIAL_STATE);
+  });
+});
diff --git a/app/src/tests/ducks/utters.test.js b/app/src/tests/ducks/utters.test.js
index 8306b27..28755ae 100644
--- a/app/src/tests/ducks/utters.test.js
+++ b/app/src/tests/ducks/utters.test.js
@@ -1,188 +1,188 @@
 import { Utter } from '../../utils/DataFormat';
 import {
-    addUtterContent,
-    setUtterContent,
-    deleteUtterContent,
-    undoDeleteUtterContent,
-    selectUtter,
-    createNewUtter,
-    setUtterName,
-    notifyAction,
-    getUtters,
-    changeUtterForm
+  addUtterContent,
+  setUtterContent,
+  deleteUtterContent,
+  undoDeleteUtterContent,
+  selectUtter,
+  createNewUtter,
+  setUtterName,
+  notifyAction,
+  getUtters,
+  changeUtterForm,
 } from '../../ducks/utters';
 
 import { clone } from '../../utils/utils';
 
 const INITIAL_STATE = {
-    mode: "Utter",
-    name: "",
-    helper_text: "",
-    old_name: "",
-    notification_text: "",
-    content: [[""]],
-    old_content: [[""]],
-    multiple_alternatives: false,
+  mode: 'Utter',
+  name: '',
+  helper_text: '',
+  old_name: '',
+  notification_text: '',
+  content: [['']],
+  old_content: [['']],
+  multiple_alternatives: false,
 };
 
 describe('add utter content method', () => {
-    it('should add utter to state in sequence', () => {
-        let new_state = clone(INITIAL_STATE);
-        new_state.content = [['', '']]
-        new_state.old_content = [['', '']]
-        expect(addUtterContent(INITIAL_STATE)).toEqual(new_state);
-    })
-
-    it('should add utter to state in alternatives', () => {
-        let state = clone(INITIAL_STATE);
-        state.multiple_alternatives = true
-        let new_state = clone(state);
-        new_state.content = [[''], ['']]
-        new_state.old_content = [[''], ['']]
-        expect(addUtterContent(state)).toEqual(new_state);
-    })
-})
+  it('should add utter to state in sequence', () => {
+    const new_state = clone(INITIAL_STATE);
+    new_state.content = [['', '']];
+    new_state.old_content = [['', '']];
+    expect(addUtterContent(INITIAL_STATE)).toEqual(new_state);
+  });
+
+  it('should add utter to state in alternatives', () => {
+    const state = clone(INITIAL_STATE);
+    state.multiple_alternatives = true;
+    const new_state = clone(state);
+    new_state.content = [[''], ['']];
+    new_state.old_content = [[''], ['']];
+    expect(addUtterContent(state)).toEqual(new_state);
+  });
+});
 
 describe('set utter content method', () => {
-    it('should add content to state', () =>{
-        let action = {
-            utter_position: 0,
-            text_position: 0,
-            text: 'test utter text'
-        }
-        let new_state = clone(INITIAL_STATE);
-        new_state.content = [[action.text]];
-
-        expect(setUtterContent(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+  it('should add content to state', () => {
+    const action = {
+      utter_position: 0,
+      text_position: 0,
+      text: 'test utter text',
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.content = [[action.text]];
+
+    expect(setUtterContent(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('delete utter content method', () => {
-    it('should delete utter content in state', () =>{
-        let action = {
-            utter_position: 0,
-            text_position: 1
-        }
-        let state = clone(INITIAL_STATE);
-        state.content = [['test1', 'test2']];
-        let new_state = clone(INITIAL_STATE);
-        new_state.content = [['test1']];
-        new_state.old_content = state.content;
-
-        expect(deleteUtterContent(state, action)).toEqual(new_state);
-    })
-})
+  it('should delete utter content in state', () => {
+    const action = {
+      utter_position: 0,
+      text_position: 1,
+    };
+    const state = clone(INITIAL_STATE);
+    state.content = [['test1', 'test2']];
+    const new_state = clone(INITIAL_STATE);
+    new_state.content = [['test1']];
+    new_state.old_content = state.content;
+
+    expect(deleteUtterContent(state, action)).toEqual(new_state);
+  });
+});
 
 describe('undo delete utter content', () => {
-    it('should return to the old content', () => {
-        let state = clone(INITIAL_STATE);
-        state.content = [['test1']];
-        state.old_content = [['test1', 'test2']];
-        let new_state = clone(state)
-        new_state.content = [['test1', 'test2']];
+  it('should return to the old content', () => {
+    const state = clone(INITIAL_STATE);
+    state.content = [['test1']];
+    state.old_content = [['test1', 'test2']];
+    const new_state = clone(state);
+    new_state.content = [['test1', 'test2']];
 
-        expect(undoDeleteUtterContent(state)).toEqual(new_state)
-    })
-})
+    expect(undoDeleteUtterContent(state)).toEqual(new_state);
+  });
+});
 
 describe('select utter method', () => {
-    it('should add utter info to state', () => {
-        let utter_example = new Utter(1, 'test_utter', false, [['utter example']]);
-        let action = {
-            item: utter_example,
-            item_position: 0
-        }
-        let state = clone(INITIAL_STATE);
-        state.utters = [utter_example];
-
-        let new_state = clone(state)
-        new_state.name = action.item.name;
-        new_state.old_name = action.item.name;
-        new_state.content = action.item.alternatives;
-        new_state.old_content = action.item.alternatives;
-        new_state.id = action.item.id;
-        new_state.selected_item_position = 0;
-
-        expect(selectUtter(state, action)).toEqual(new_state);
-    })
-})
+  it('should add utter info to state', () => {
+    const utter_example = new Utter(1, 'test_utter', false, [['utter example']]);
+    const action = {
+      item: utter_example,
+      item_position: 0,
+    };
+    const state = clone(INITIAL_STATE);
+    state.utters = [utter_example];
+
+    const new_state = clone(state);
+    new_state.name = action.item.name;
+    new_state.old_name = action.item.name;
+    new_state.content = action.item.alternatives;
+    new_state.old_content = action.item.alternatives;
+    new_state.id = action.item.id;
+    new_state.selected_item_position = 0;
+
+    expect(selectUtter(state, action)).toEqual(new_state);
+  });
+});
 
 describe('create new utter method', () => {
-    it('should add new utter to state', () => {
-        let new_utter = new Utter();
-        let new_state = clone(INITIAL_STATE);
-        new_state.id = new_utter.id
-        new_state.name = new_utter.name
-        new_state.old_name = new_utter.name
-        new_state.selected_item_position = -1
-        new_state.multiple_alternatives = new_utter.multiple_alternatives
-        new_state.content = new_utter.alternatives
-        new_state.old_content = new_utter.alternatives
-
-        expect(createNewUtter(INITIAL_STATE)).toEqual(new_state);
-    })
-})
+  it('should add new utter to state', () => {
+    const new_utter = new Utter();
+    const new_state = clone(INITIAL_STATE);
+    new_state.id = new_utter.id;
+    new_state.name = new_utter.name;
+    new_state.old_name = new_utter.name;
+    new_state.selected_item_position = -1;
+    new_state.multiple_alternatives = new_utter.multiple_alternatives;
+    new_state.content = new_utter.alternatives;
+    new_state.old_content = new_utter.alternatives;
+
+    expect(createNewUtter(INITIAL_STATE)).toEqual(new_state);
+  });
+});
 
 describe('set utter name method', () => {
-    it('should update utter name on state', () => {
-        let action = {
-            name: 'new name example',
-            helper_text: 'helper text example'
-        }
-        let new_state = clone(INITIAL_STATE);
-        new_state.name = action.name;
-        new_state.helper_text = action.helper_text;
-
-        expect(setUtterName(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+  it('should update utter name on state', () => {
+    const action = {
+      name: 'new name example',
+      helper_text: 'helper text example',
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.name = action.name;
+    new_state.helper_text = action.helper_text;
+
+    expect(setUtterName(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('notify action method', () => {
-    it('should update the notification text on state', () => {
-        let action = {
-            text: 'new notification example'
-        }
-        let new_state = clone(INITIAL_STATE);
-        new_state.notification_text = action.text;        
+  it('should update the notification text on state', () => {
+    const action = {
+      text: 'new notification example',
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.notification_text = action.text;
 
-        expect(notifyAction(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+    expect(notifyAction(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('get utters method', () => {
-    it('should add utters to state', () => {
-        let utter1 = new Utter(1, 'test_utter1', false, [['utter example']]);
-        let utter2 = new Utter(2, 'test_utter2', true, [['utter example'],['another example']]);
-        let action = {
-            utters: [utter1, utter2]
-        }
-        let new_state = clone(INITIAL_STATE);
-        new_state.utters = action.utters;        
-
-        expect(getUtters(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
+  it('should add utters to state', () => {
+    const utter1 = new Utter(1, 'test_utter1', false, [['utter example']]);
+    const utter2 = new Utter(2, 'test_utter2', true, [['utter example'], ['another example']]);
+    const action = {
+      utters: [utter1, utter2],
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.utters = action.utters;
+
+    expect(getUtters(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
 
 describe('change utter form method', () => {
-    it('should change the utter content with sequence option', () => {
-        let action = {
-            content: [['utter example'], ['another example']],
-            multiple_alternatives: false
-        }
-        let new_state = clone(INITIAL_STATE);
-        new_state.multiple_alternatives = action.multiple_alternatives;
-        new_state.content = [['utter example', 'another example']];
-        expect(changeUtterForm(INITIAL_STATE, action)).toEqual(new_state);
-    })
-
-    it('should change the utter content with alternatives option', () => {
-        let action = {
-            content: [['utter example', 'another example']],
-            multiple_alternatives: true
-        }
-        let new_state = clone(INITIAL_STATE);
-        new_state.multiple_alternatives = action.multiple_alternatives;
-        new_state.content = [['utter example'], ['another example']];
-        expect(changeUtterForm(INITIAL_STATE, action)).toEqual(new_state);
-    })
-})
\ No newline at end of file
+  it('should change the utter content with sequence option', () => {
+    const action = {
+      content: [['utter example'], ['another example']],
+      multiple_alternatives: false,
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.multiple_alternatives = action.multiple_alternatives;
+    new_state.content = [['utter example', 'another example']];
+    expect(changeUtterForm(INITIAL_STATE, action)).toEqual(new_state);
+  });
+
+  it('should change the utter content with alternatives option', () => {
+    const action = {
+      content: [['utter example', 'another example']],
+      multiple_alternatives: true,
+    };
+    const new_state = clone(INITIAL_STATE);
+    new_state.multiple_alternatives = action.multiple_alternatives;
+    new_state.content = [['utter example'], ['another example']];
+    expect(changeUtterForm(INITIAL_STATE, action)).toEqual(new_state);
+  });
+});
diff --git a/app/src/tests/icons/AppIcon.test.js b/app/src/tests/icons/AppIcon.test.js
index c6a72b2..7dbf499 100644
--- a/app/src/tests/icons/AppIcon.test.js
+++ b/app/src/tests/icons/AppIcon.test.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import AppIcon from '../../icons/AppIcon';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import AppIcon from '../../icons/AppIcon';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-
-    const tree = renderer
-        .create(<AppIcon/>)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<AppIcon />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/icons/IntentIcon.test.js b/app/src/tests/icons/IntentIcon.test.js
index 30f4400..064c10a 100644
--- a/app/src/tests/icons/IntentIcon.test.js
+++ b/app/src/tests/icons/IntentIcon.test.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import IntentIcon from '../../icons/IntentIcon';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import IntentIcon from '../../icons/IntentIcon';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-
-    const tree = renderer
-        .create(<IntentIcon />)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<IntentIcon />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/icons/StoryIcon.test.js b/app/src/tests/icons/StoryIcon.test.js
index 025cb33..6918d66 100644
--- a/app/src/tests/icons/StoryIcon.test.js
+++ b/app/src/tests/icons/StoryIcon.test.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import StoryIcon from '../../icons/StoryIcon';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import StoryIcon from '../../icons/StoryIcon';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-
-    const tree = renderer
-        .create(<StoryIcon />)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<StoryIcon />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/icons/UtterIcon.test.js b/app/src/tests/icons/UtterIcon.test.js
index fd8b303..0a2945c 100644
--- a/app/src/tests/icons/UtterIcon.test.js
+++ b/app/src/tests/icons/UtterIcon.test.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import UtterIcon from '../../icons/UtterIcon';
 import Adapter from 'enzyme-adapter-react-16';
 import renderer from 'react-test-renderer';
 import Enzyme from 'enzyme';
+import UtterIcon from '../../icons/UtterIcon';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 it('renders correctly', () => {
-
-    const tree = renderer
-        .create(<UtterIcon />)
-        .toJSON();
-    expect(tree).toMatchSnapshot();
-});
\ No newline at end of file
+  const tree = renderer
+    .create(<UtterIcon />)
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/src/tests/utils.test.js b/app/src/tests/utils.test.js
index a3a1db0..d4a93cf 100644
--- a/app/src/tests/utils.test.js
+++ b/app/src/tests/utils.test.js
@@ -1,45 +1,43 @@
 import {
-    isButtonEnabled,
-    setHighlight,
-    clone
+  isButtonEnabled,
+  setHighlight,
+  clone,
 } from '../utils/utils';
 
 describe('is button enabled method', () => {
-    it('should return button state', () => {
-        let content = 'test content';
-        let old_content = 'test old content';
-        let name = 'test name';
-        let old_name = 'test old name';
-        let helper_text = '';
-        let no_empty_fields = true;
+  it('should return button state', () => {
+    const content = 'test content';
+    const old_content = 'test old content';
+    const name = 'test name';
+    const old_name = 'test old name';
+    const helper_text = '';
+    const no_empty_fields = true;
 
-        expect(isButtonEnabled(content, old_content, name, old_name, helper_text, no_empty_fields));
-    })
-})
+    expect(isButtonEnabled(content, old_content, name, old_name, helper_text, no_empty_fields));
+  });
+});
 
 describe('set highlight method', () => {
-    it('should return highlight', () => {
-        let name = 'test name';
-        let text = 'text example';
-        let result = ['test', 'name'];        
-        expect(setHighlight(name, text)).toEqual(result);
-
-    })
-})
+  it('should return highlight', () => {
+    const name = 'test name';
+    const text = 'text example';
+    const result = ['test', 'name'];
+    expect(setHighlight(name, text)).toEqual(result);
+  });
+});
 
 describe('set clone method', () => {
-    it('should return a clone of the object', () => {
-        let test_obj = {
-            name: 'test obj',
-            content: 'to test'
-        };
-        let clone_obj_test = clone(test_obj);
-        test_obj.name = 'other name'
-        let result = {
-            name: 'test obj',
-            content: 'to test'
-        };
-        expect(clone_obj_test).toEqual(result);
-
-    })
-})
\ No newline at end of file
+  it('should return a clone of the object', () => {
+    const test_obj = {
+      name: 'test obj',
+      content: 'to test',
+    };
+    const clone_obj_test = clone(test_obj);
+    test_obj.name = 'other name';
+    const result = {
+      name: 'test obj',
+      content: 'to test',
+    };
+    expect(clone_obj_test).toEqual(result);
+  });
+});
diff --git a/app/src/utils/DataFormat.js b/app/src/utils/DataFormat.js
index f233060..d116cd3 100644
--- a/app/src/utils/DataFormat.js
+++ b/app/src/utils/DataFormat.js
@@ -1,29 +1,29 @@
 export class Utter {
-    constructor(
-        id = '',
-        name = '',
-        multiple_alternatives = false,
-        alternatives = [['']]
-    ) {
-        this.id = id;
-        this.name = name;
-        this.alternatives = alternatives;
-        this.multiple_alternatives = multiple_alternatives;
-    }
-};
+  constructor(
+    id = '',
+    name = '',
+    multiple_alternatives = false,
+    alternatives = [['']],
+  ) {
+    this.id = id;
+    this.name = name;
+    this.alternatives = alternatives;
+    this.multiple_alternatives = multiple_alternatives;
+  }
+}
 
 export class Intent {
-    constructor(id = '', name = '', samples = ['']) {
-        this.id = id;
-        this.name = name;
-        this.samples = samples;
-    }
-};
+  constructor(id = '', name = '', samples = ['']) {
+    this.id = id;
+    this.name = name;
+    this.samples = samples;
+  }
+}
 
 export class Story {
-    constructor(id = '', content = [], name = ''){
-        this.id = id;
-        this.name = name;
-        this.content = content;
-    }
-};
\ No newline at end of file
+  constructor(id = '', content = [], name = '') {
+    this.id = id;
+    this.name = name;
+    this.content = content;
+  }
+}
diff --git a/app/src/utils/messages.js b/app/src/utils/messages.js
index 9695352..6bd1d94 100644
--- a/app/src/utils/messages.js
+++ b/app/src/utils/messages.js
@@ -1,41 +1,41 @@
 export const message = {
-    deleted: "Item apagado",
-    no_examples: "",
-    no_result: "Nenhum item encontrado",
-    repeated_name: "Tente um nome diferente, este já existe",
-    no_special_char: "Use apenas letras sem acentos, números ou _",
-    no_dialogs: "Clique nas perguntas e respostas para montar um diálogo com exemplos de interação esperados",
-    delete_confirmation: "Apagar item?",
-    download: "Exportar conteúdo",
-    story: {
-        created: "Diálogo criado",
-        deleted: "Diálogo apagado",
-        updated: "Diálogo atualizado",
-        create_button: "Criar novo diálogo",
-        first_element: "O diálogo deve começar com uma pergunta",
-        two_intents: "Adicione uma resposta depois de cada pergunta",
-    },
-    intent: {
-        created: "Pergunta criada",
-        deleted: "Pergunta apagada",
-        updated: "Pergunta atualizada",
-        toolbar_name: "Título da pergunta",
-        list_filter: "Perguntas cadastradas",
-        create_button: "Criar nova pergunta",
-        placeholder: "Ex: Geral_Cumprimentar, Servico_Como_Cadastrar",
-        name_good_pratice: "Para identificar as perguntas claramente, indique o assunto principal e depois o tipo de pergunta, separado por '_'",
-    },
-    utter: {
-        created: "Resposta criada",
-        deleted: "Resposta apagada",
-        selection: "Balões aparecem:",
-        sequence_text: "em sequência",
-        updated: "Resposta atualizada",
-        toolbar_name: "Título da resposta",
-        create_button: "Criar nova resposta",
-        list_filter: "Respostas cadastradas",
-        alternatives_text: "como alternativas",
-        placeholder: "Ex: Resp_Geral_Cumprimentar, Resp_Servico_Como_Cadastrar",
-        name_good_pratice: "Para identificar as respostas claramente, use 'Resp_' e o título da pergunta correspondente, se existir",
-    }
-}
\ No newline at end of file
+  deleted: 'Item apagado',
+  no_examples: '',
+  no_result: 'Nenhum item encontrado',
+  repeated_name: 'Tente um nome diferente, este já existe',
+  no_special_char: 'Use apenas letras sem acentos, números ou _',
+  no_dialogs: 'Clique nas perguntas e respostas para montar um diálogo com exemplos de interação esperados',
+  delete_confirmation: 'Apagar item?',
+  download: 'Exportar conteúdo',
+  story: {
+    created: 'Diálogo criado',
+    deleted: 'Diálogo apagado',
+    updated: 'Diálogo atualizado',
+    create_button: 'Criar novo diálogo',
+    first_element: 'O diálogo deve começar com uma pergunta',
+    two_intents: 'Adicione uma resposta depois de cada pergunta',
+  },
+  intent: {
+    created: 'Pergunta criada',
+    deleted: 'Pergunta apagada',
+    updated: 'Pergunta atualizada',
+    toolbar_name: 'Título da pergunta',
+    list_filter: 'Perguntas cadastradas',
+    create_button: 'Criar nova pergunta',
+    placeholder: 'Ex: Geral_Cumprimentar, Servico_Como_Cadastrar',
+    name_good_pratice: "Para identificar as perguntas claramente, indique o assunto principal e depois o tipo de pergunta, separado por '_'",
+  },
+  utter: {
+    created: 'Resposta criada',
+    deleted: 'Resposta apagada',
+    selection: 'Balões aparecem:',
+    sequence_text: 'em sequência',
+    updated: 'Resposta atualizada',
+    toolbar_name: 'Título da resposta',
+    create_button: 'Criar nova resposta',
+    list_filter: 'Respostas cadastradas',
+    alternatives_text: 'como alternativas',
+    placeholder: 'Ex: Resp_Geral_Cumprimentar, Resp_Servico_Como_Cadastrar',
+    name_good_pratice: "Para identificar as respostas claramente, use 'Resp_' e o título da pergunta correspondente, se existir",
+  },
+};
diff --git a/app/src/utils/url_routes.js b/app/src/utils/url_routes.js
index 03a9634..ae498d8 100644
--- a/app/src/utils/url_routes.js
+++ b/app/src/utils/url_routes.js
@@ -1,7 +1,7 @@
-export const BASE = process.env.REACT_APP_URL_API + 'api/v1/';
-export const ITEMS_BASE = BASE + 'projects/1/';
+export const BASE = `${process.env.REACT_APP_URL_API}api/v1/`;
+export const ITEMS_BASE = `${BASE}projects/1/`;
 
-export const UTTER_URL = ITEMS_BASE + "utters/";
-export const STORY_URL = ITEMS_BASE + "stories/";
-export const INTENT_URL = ITEMS_BASE + "intents/";
-export const DOWNLOAD_URL = BASE + "files/1/zip";
+export const UTTER_URL = `${ITEMS_BASE}utters/`;
+export const STORY_URL = `${ITEMS_BASE}stories/`;
+export const INTENT_URL = `${ITEMS_BASE}intents/`;
+export const DOWNLOAD_URL = `${BASE}files/1/zip`;
diff --git a/app/src/utils/utils.js b/app/src/utils/utils.js
index 66f10a3..0b9e845 100644
--- a/app/src/utils/utils.js
+++ b/app/src/utils/utils.js
@@ -1,34 +1,34 @@
-import React from "react";
+import React from 'react';
 
 export const isButtonEnabled = (content, old_content, name, old_name, helper_text = '', no_empty_fields) => {
-    const name_changed = (name !== old_name);
-    const content_changed = JSON.stringify(content) !== JSON.stringify(old_content);
-    const have_changes = (content_changed || name_changed);
+  const name_changed = (name !== old_name);
+  const content_changed = JSON.stringify(content) !== JSON.stringify(old_content);
+  const have_changes = (content_changed || name_changed);
 
-    const no_errors = helper_text.length === 0;
-    const no_empty_name = name.length !== 0;
+  const no_errors = helper_text.length === 0;
+  const no_empty_name = name.length !== 0;
 
-    return (
-        no_errors &&
-        have_changes &&
-        no_empty_name &&
-        no_empty_fields
-    );
-}
+  return (
+    no_errors
+        && have_changes
+        && no_empty_name
+        && no_empty_fields
+  );
+};
 
 export const setHighlight = (name, highlighted_text) => {
-    let texts = name.replace(highlighted_text, " " + highlighted_text + " ").split(" ");
+  const texts = name.replace(highlighted_text, ` ${highlighted_text} `).split(' ');
 
-    return texts.map((text, index) => (
-      (text === highlighted_text) ? <span key={index + "filter_text"} style={{ color: "#f15035" }}>{text}</span> : text
-    ));
-}
+  return texts.map((text, index) => (
+    (text === highlighted_text) ? <span key={`${index}filter_text`} style={{ color: '#f15035' }}>{text}</span> : text
+  ));
+};
 
 export function clone(obj) {
-  if (null == obj || "object" != typeof obj) return obj;
-  var copy = obj.constructor();
-  for (var attr in obj) {
+  if (obj == null || typeof obj !== 'object') return obj;
+  const copy = obj.constructor();
+  for (const attr in obj) {
     if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
   }
   return copy;
-}
\ No newline at end of file
+}