diff --git a/backend/src/controllers/QuickAnswerController.ts b/backend/src/controllers/QuickAnswerController.ts
new file mode 100644
index 0000000..3828e91
--- /dev/null
+++ b/backend/src/controllers/QuickAnswerController.ts
@@ -0,0 +1,117 @@
+import * as Yup from "yup";
+import { Request, Response } from "express";
+import { getIO } from "../libs/socket";
+
+import ListQuickAnswerService from "../services/QuickAnswerService/ListQuickAnswerService";
+import CreateQuickAnswerService from "../services/QuickAnswerService/CreateQuickAnswerService";
+import ShowQuickAnswerService from "../services/QuickAnswerService/ShowQuickAnswerService";
+import UpdateQuickAnswerService from "../services/QuickAnswerService/UpdateQuickAnswerService";
+import DeleteQuickAnswerService from "../services/QuickAnswerService/DeleteQuickAnswerService";
+
+import AppError from "../errors/AppError";
+
+type IndexQuery = {
+  searchParam: string;
+  pageNumber: string;
+};
+
+interface QuickAnswerData {
+  shortcut: string;
+  message: string;
+}
+
+export const index = async (req: Request, res: Response): Promise<Response> => {
+  const { searchParam, pageNumber } = req.query as IndexQuery;
+
+  const { quickAnswers, count, hasMore } = await ListQuickAnswerService({
+    searchParam,
+    pageNumber
+  });
+
+  return res.json({ quickAnswers, count, hasMore });
+};
+
+export const store = async (req: Request, res: Response): Promise<Response> => {
+  const newQuickAnswer: QuickAnswerData = req.body;
+
+  const QuickAnswerSchema = Yup.object().shape({
+    shortcut: Yup.string().required(),
+    message: Yup.string().required()
+  });
+
+  try {
+    await QuickAnswerSchema.validate(newQuickAnswer);
+  } catch (err) {
+    throw new AppError(err.message);
+  }
+
+  const quickAnswer = await CreateQuickAnswerService({
+    ...newQuickAnswer
+  });
+
+  const io = getIO();
+  io.emit("quickAnswer", {
+    action: "create",
+    quickAnswer
+  });
+
+  return res.status(200).json(quickAnswer);
+};
+
+export const show = async (req: Request, res: Response): Promise<Response> => {
+  const { quickAnswerId } = req.params;
+
+  const quickAnswer = await ShowQuickAnswerService(quickAnswerId);
+
+  return res.status(200).json(quickAnswer);
+};
+
+export const update = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const quickAnswerData: QuickAnswerData = req.body;
+
+  const schema = Yup.object().shape({
+    shortcut: Yup.string(),
+    message: Yup.string()
+  });
+
+  try {
+    await schema.validate(quickAnswerData);
+  } catch (err) {
+    throw new AppError(err.message);
+  }
+
+  const { quickAnswerId } = req.params;
+
+  const quickAnswer = await UpdateQuickAnswerService({
+    quickAnswerData,
+    quickAnswerId
+  });
+
+  const io = getIO();
+  io.emit("quickAnswer", {
+    action: "update",
+    quickAnswer
+  });
+
+  return res.status(200).json(quickAnswer);
+};
+
+export const remove = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { quickAnswerId } = req.params;
+
+  await DeleteQuickAnswerService(quickAnswerId);
+
+  const io = getIO();
+  io.emit("quickAnswer", {
+    action: "delete",
+    quickAnswerId
+  });
+
+  return res.status(200).json({ message: "Quick Answer deleted" });
+};
diff --git a/backend/src/database/index.ts b/backend/src/database/index.ts
index b62e840..4c230ac 100644
--- a/backend/src/database/index.ts
+++ b/backend/src/database/index.ts
@@ -9,6 +9,7 @@ import Message from "../models/Message";
 import Queue from "../models/Queue";
 import WhatsappQueue from "../models/WhatsappQueue";
 import UserQueue from "../models/UserQueue";
+import QuickAnswer from "../models/QuickAnswer";
 
 // eslint-disable-next-line
 const dbConfig = require("../config/database");
@@ -26,7 +27,8 @@ const models = [
   Setting,
   Queue,
   WhatsappQueue,
-  UserQueue
+  UserQueue,
+  QuickAnswer
 ];
 
 sequelize.addModels(models);
diff --git a/backend/src/database/migrations/20210818102605-create-quickAnswers.ts b/backend/src/database/migrations/20210818102605-create-quickAnswers.ts
new file mode 100644
index 0000000..e7e81ee
--- /dev/null
+++ b/backend/src/database/migrations/20210818102605-create-quickAnswers.ts
@@ -0,0 +1,34 @@
+import { QueryInterface, DataTypes } from "sequelize";
+
+module.exports = {
+  up: (queryInterface: QueryInterface) => {
+    return queryInterface.createTable("QuickAnswers", {
+      id: {
+        type: DataTypes.INTEGER,
+        autoIncrement: true,
+        primaryKey: true,
+        allowNull: false
+      },
+      shortcut: {
+        type: DataTypes.TEXT,
+        allowNull: false
+      },
+      message: {
+        type: DataTypes.TEXT,
+        allowNull: false
+      },
+      createdAt: {
+        type: DataTypes.DATE,
+        allowNull: false
+      },
+      updatedAt: {
+        type: DataTypes.DATE,
+        allowNull: false
+      }
+    });
+  },
+
+  down: (queryInterface: QueryInterface) => {
+    return queryInterface.dropTable("QuickAnswers");
+  }
+};
diff --git a/backend/src/models/QuickAnswer.ts b/backend/src/models/QuickAnswer.ts
new file mode 100644
index 0000000..3549734
--- /dev/null
+++ b/backend/src/models/QuickAnswer.ts
@@ -0,0 +1,32 @@
+import {
+  Table,
+  Column,
+  DataType,
+  CreatedAt,
+  UpdatedAt,
+  Model,
+  PrimaryKey,
+  AutoIncrement
+} from "sequelize-typescript";
+
+@Table
+class QuickAnswer extends Model<QuickAnswer> {
+  @PrimaryKey
+  @AutoIncrement
+  @Column
+  id: number;
+
+  @Column(DataType.TEXT)
+  shortcut: string;
+
+  @Column(DataType.TEXT)
+  message: string;
+
+  @CreatedAt
+  createdAt: Date;
+
+  @UpdatedAt
+  updatedAt: Date;
+}
+
+export default QuickAnswer;
diff --git a/backend/src/routes/index.ts b/backend/src/routes/index.ts
index 7043f61..4109c7b 100644
--- a/backend/src/routes/index.ts
+++ b/backend/src/routes/index.ts
@@ -9,6 +9,7 @@ import whatsappRoutes from "./whatsappRoutes";
 import messageRoutes from "./messageRoutes";
 import whatsappSessionRoutes from "./whatsappSessionRoutes";
 import queueRoutes from "./queueRoutes";
+import quickAnswerRoutes from "./quickAnswerRoutes";
 
 const routes = Router();
 
@@ -22,5 +23,6 @@ routes.use(messageRoutes);
 routes.use(messageRoutes);
 routes.use(whatsappSessionRoutes);
 routes.use(queueRoutes);
+routes.use(quickAnswerRoutes);
 
 export default routes;
diff --git a/backend/src/routes/quickAnswerRoutes.ts b/backend/src/routes/quickAnswerRoutes.ts
new file mode 100644
index 0000000..eab4557
--- /dev/null
+++ b/backend/src/routes/quickAnswerRoutes.ts
@@ -0,0 +1,30 @@
+import express from "express";
+import isAuth from "../middleware/isAuth";
+
+import * as QuickAnswerController from "../controllers/QuickAnswerController";
+
+const quickAnswerRoutes = express.Router();
+
+quickAnswerRoutes.get("/quickAnswers", isAuth, QuickAnswerController.index);
+
+quickAnswerRoutes.get(
+  "/quickAnswers/:quickAnswerId",
+  isAuth,
+  QuickAnswerController.show
+);
+
+quickAnswerRoutes.post("/quickAnswers", isAuth, QuickAnswerController.store);
+
+quickAnswerRoutes.put(
+  "/quickAnswers/:quickAnswerId",
+  isAuth,
+  QuickAnswerController.update
+);
+
+quickAnswerRoutes.delete(
+  "/quickAnswers/:quickAnswerId",
+  isAuth,
+  QuickAnswerController.remove
+);
+
+export default quickAnswerRoutes;
diff --git a/backend/src/services/QuickAnswerService/CreateQuickAnswerService.ts b/backend/src/services/QuickAnswerService/CreateQuickAnswerService.ts
new file mode 100644
index 0000000..80668e1
--- /dev/null
+++ b/backend/src/services/QuickAnswerService/CreateQuickAnswerService.ts
@@ -0,0 +1,26 @@
+import AppError from "../../errors/AppError";
+import QuickAnswer from "../../models/QuickAnswer";
+
+interface Request {
+  shortcut: string;
+  message: string;
+}
+
+const CreateQuickAnswerService = async ({
+  shortcut,
+  message
+}: Request): Promise<QuickAnswer> => {
+  const nameExists = await QuickAnswer.findOne({
+    where: { shortcut }
+  });
+
+  if (nameExists) {
+    throw new AppError("ERR__SHORTCUT_DUPLICATED");
+  }
+
+  const quickAnswer = await QuickAnswer.create({ shortcut, message });
+
+  return quickAnswer;
+};
+
+export default CreateQuickAnswerService;
diff --git a/backend/src/services/QuickAnswerService/DeleteQuickAnswerService.ts b/backend/src/services/QuickAnswerService/DeleteQuickAnswerService.ts
new file mode 100644
index 0000000..1cc21b2
--- /dev/null
+++ b/backend/src/services/QuickAnswerService/DeleteQuickAnswerService.ts
@@ -0,0 +1,16 @@
+import QuickAnswer from "../../models/QuickAnswer";
+import AppError from "../../errors/AppError";
+
+const DeleteQuickAnswerService = async (id: string): Promise<void> => {
+  const quickAnswer = await QuickAnswer.findOne({
+    where: { id }
+  });
+
+  if (!quickAnswer) {
+    throw new AppError("ERR_NO_QUICK_ANSWER_FOUND", 404);
+  }
+
+  await quickAnswer.destroy();
+};
+
+export default DeleteQuickAnswerService;
diff --git a/backend/src/services/QuickAnswerService/ListQuickAnswerService.ts b/backend/src/services/QuickAnswerService/ListQuickAnswerService.ts
new file mode 100644
index 0000000..0ddcbcc
--- /dev/null
+++ b/backend/src/services/QuickAnswerService/ListQuickAnswerService.ts
@@ -0,0 +1,45 @@
+import { Sequelize } from "sequelize";
+import QuickAnswer from "../../models/QuickAnswer";
+
+interface Request {
+  searchParam?: string;
+  pageNumber?: string;
+}
+
+interface Response {
+  quickAnswers: QuickAnswer[];
+  count: number;
+  hasMore: boolean;
+}
+
+const ListQuickAnswerService = async ({
+  searchParam = "",
+  pageNumber = "1"
+}: Request): Promise<Response> => {
+  const whereCondition = {
+    message: Sequelize.where(
+      Sequelize.fn("LOWER", Sequelize.col("message")),
+      "LIKE",
+      `%${searchParam.toLowerCase().trim()}%`
+    )
+  };
+  const limit = 20;
+  const offset = limit * (+pageNumber - 1);
+
+  const { count, rows: quickAnswers } = await QuickAnswer.findAndCountAll({
+    where: whereCondition,
+    limit,
+    offset,
+    order: [["message", "ASC"]]
+  });
+
+  const hasMore = count > offset + quickAnswers.length;
+
+  return {
+    quickAnswers,
+    count,
+    hasMore
+  };
+};
+
+export default ListQuickAnswerService;
diff --git a/backend/src/services/QuickAnswerService/ShowQuickAnswerService.ts b/backend/src/services/QuickAnswerService/ShowQuickAnswerService.ts
new file mode 100644
index 0000000..1ed3d2e
--- /dev/null
+++ b/backend/src/services/QuickAnswerService/ShowQuickAnswerService.ts
@@ -0,0 +1,14 @@
+import QuickAnswer from "../../models/QuickAnswer";
+import AppError from "../../errors/AppError";
+
+const ShowQuickAnswerService = async (id: string): Promise<QuickAnswer> => {
+  const quickAnswer = await QuickAnswer.findByPk(id);
+
+  if (!quickAnswer) {
+    throw new AppError("ERR_NO_QUICK_ANSWERS_FOUND", 404);
+  }
+
+  return quickAnswer;
+};
+
+export default ShowQuickAnswerService;
diff --git a/backend/src/services/QuickAnswerService/UpdateQuickAnswerService.ts b/backend/src/services/QuickAnswerService/UpdateQuickAnswerService.ts
new file mode 100644
index 0000000..e50351b
--- /dev/null
+++ b/backend/src/services/QuickAnswerService/UpdateQuickAnswerService.ts
@@ -0,0 +1,40 @@
+import QuickAnswer from "../../models/QuickAnswer";
+import AppError from "../../errors/AppError";
+
+interface QuickAnswerData {
+  shortcut?: string;
+  message?: string;
+}
+
+interface Request {
+  quickAnswerData: QuickAnswerData;
+  quickAnswerId: string;
+}
+
+const UpdateQuickAnswerService = async ({
+  quickAnswerData,
+  quickAnswerId
+}: Request): Promise<QuickAnswer> => {
+  const { shortcut, message } = quickAnswerData;
+
+  const quickAnswer = await QuickAnswer.findOne({
+    where: { id: quickAnswerId },
+    attributes: ["id", "shortcut", "message"]
+  });
+
+  if (!quickAnswer) {
+    throw new AppError("ERR_NO_QUICK_ANSWERS_FOUND", 404);
+  }
+  await quickAnswer.update({
+    shortcut,
+    message
+  });
+
+  await quickAnswer.reload({
+    attributes: ["id", "shortcut", "message"]
+  });
+
+  return quickAnswer;
+};
+
+export default UpdateQuickAnswerService;
diff --git a/frontend/src/App.js b/frontend/src/App.js
index f1dfbde..ff22dac 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -2,46 +2,46 @@ import React, { useState, useEffect } from "react";
 import Routes from "./routes";
 import "react-toastify/dist/ReactToastify.css";
 
-import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+import { createTheme, ThemeProvider } from "@material-ui/core/styles";
 import { ptBR } from "@material-ui/core/locale";
 
 const App = () => {
-	const [locale, setLocale] = useState();
+  const [locale, setLocale] = useState();
 
-	const theme = createMuiTheme(
-		{
-			scrollbarStyles: {
-				"&::-webkit-scrollbar": {
-					width: "8px",
-					height: "8px",
-				},
-				"&::-webkit-scrollbar-thumb": {
-					boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
-					backgroundColor: "#e8e8e8",
-				},
-			},
-			palette: {
-				primary: { main: "#2576d2" },
-			},
-		},
-		locale
-	);
+  const theme = createTheme(
+    {
+      scrollbarStyles: {
+        "&::-webkit-scrollbar": {
+          width: "8px",
+          height: "8px",
+        },
+        "&::-webkit-scrollbar-thumb": {
+          boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
+          backgroundColor: "#e8e8e8",
+        },
+      },
+      palette: {
+        primary: { main: "#2576d2" },
+      },
+    },
+    locale
+  );
 
-	useEffect(() => {
-		const i18nlocale = localStorage.getItem("i18nextLng");
-		const browserLocale =
-			i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);
+  useEffect(() => {
+    const i18nlocale = localStorage.getItem("i18nextLng");
+    const browserLocale =
+      i18nlocale.substring(0, 2) + i18nlocale.substring(3, 5);
 
-		if (browserLocale === "ptBR") {
-			setLocale(ptBR);
-		}
-	}, []);
+    if (browserLocale === "ptBR") {
+      setLocale(ptBR);
+    }
+  }, []);
 
-	return (
-		<ThemeProvider theme={theme}>
-			<Routes />
-		</ThemeProvider>
-	);
+  return (
+    <ThemeProvider theme={theme}>
+      <Routes />
+    </ThemeProvider>
+  );
 };
 
 export default App;
diff --git a/frontend/src/components/ColorPicker/index.js b/frontend/src/components/ColorPicker/index.js
index b89b233..c10360e 100644
--- a/frontend/src/components/ColorPicker/index.js
+++ b/frontend/src/components/ColorPicker/index.js
@@ -4,28 +4,28 @@ import React, { useState } from "react";
 import { GithubPicker } from "react-color";
 
 const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
-	const [selectedColor, setSelectedColor] = useState(currentColor);
+  const [selectedColor, setSelectedColor] = useState(currentColor);
 
-	const handleChange = color => {
-		setSelectedColor(color.hex);
-		handleClose();
-	};
+  const handleChange = (color) => {
+    setSelectedColor(color.hex);
+    handleClose();
+  };
 
-	return (
-		<Dialog
-			onClose={handleClose}
-			aria-labelledby="simple-dialog-title"
-			open={open}
-		>
-			<GithubPicker
-				width={"100%"}
-				triangle="hide"
-				color={selectedColor}
-				onChange={handleChange}
-				onChangeComplete={color => onChange(color.hex)}
-			/>
-		</Dialog>
-	);
+  return (
+    <Dialog
+      onClose={handleClose}
+      aria-labelledby="simple-dialog-title"
+      open={open}
+    >
+      <GithubPicker
+        width={"100%"}
+        triangle="hide"
+        color={selectedColor}
+        onChange={handleChange}
+        onChangeComplete={(color) => onChange(color.hex)}
+      />
+    </Dialog>
+  );
 };
 
 export default ColorPicker;
diff --git a/frontend/src/components/MainContainer/index.js b/frontend/src/components/MainContainer/index.js
index 24b7b9a..0045703 100644
--- a/frontend/src/components/MainContainer/index.js
+++ b/frontend/src/components/MainContainer/index.js
@@ -3,29 +3,31 @@ import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 
-const useStyles = makeStyles(theme => ({
-	mainContainer: {
-		flex: 1,
-		padding: theme.spacing(2),
-		height: `calc(100% - 48px)`,
-	},
+const useStyles = makeStyles((theme) => ({
+  mainContainer: {
+    flex: 1,
+    // padding: theme.spacing(2),
+    // height: `calc(100% - 48px)`,
+    padding: 0,
+    height: "100%",
+  },
 
-	contentWrapper: {
-		height: "100%",
-		overflowY: "hidden",
-		display: "flex",
-		flexDirection: "column",
-	},
+  contentWrapper: {
+    height: "100%",
+    overflowY: "hidden",
+    display: "flex",
+    flexDirection: "column",
+  },
 }));
 
 const MainContainer = ({ children }) => {
-	const classes = useStyles();
+  const classes = useStyles();
 
-	return (
-		<Container className={classes.mainContainer}>
-			<div className={classes.contentWrapper}>{children}</div>
-		</Container>
-	);
+  return (
+    <Container className={classes.mainContainer} maxWidth={false}>
+      <div className={classes.contentWrapper}>{children}</div>
+    </Container>
+  );
 };
 
 export default MainContainer;
diff --git a/frontend/src/components/MessageInput/index.js b/frontend/src/components/MessageInput/index.js
index a6ce895..3a33829 100644
--- a/frontend/src/components/MessageInput/index.js
+++ b/frontend/src/components/MessageInput/index.js
@@ -12,6 +12,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import { green } from "@material-ui/core/colors";
 import AttachFileIcon from "@material-ui/icons/AttachFile";
 import IconButton from "@material-ui/core/IconButton";
+import MoreVert from "@material-ui/icons/MoreVert";
 import MoodIcon from "@material-ui/icons/Mood";
 import SendIcon from "@material-ui/icons/Send";
 import CancelIcon from "@material-ui/icons/Cancel";
@@ -19,7 +20,14 @@ import ClearIcon from "@material-ui/icons/Clear";
 import MicIcon from "@material-ui/icons/Mic";
 import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
 import HighlightOffIcon from "@material-ui/icons/HighlightOff";
-import { FormControlLabel, Switch } from "@material-ui/core";
+import {
+  FormControlLabel,
+  Hidden,
+  Menu,
+  MenuItem,
+  Switch,
+} from "@material-ui/core";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 
 import { i18n } from "../../translate/i18n";
 import api from "../../services/api";
@@ -31,483 +39,636 @@ import toastError from "../../errors/toastError";
 
 const Mp3Recorder = new MicRecorder({ bitRate: 128 });
 
-const useStyles = makeStyles(theme => ({
-	mainWrapper: {
-		background: "#eee",
-		display: "flex",
-		flexDirection: "column",
-		alignItems: "center",
-		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
-	},
+const useStyles = makeStyles((theme) => ({
+  mainWrapper: {
+    background: "#eee",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    borderTop: "1px solid rgba(0, 0, 0, 0.12)",
+    [theme.breakpoints.down("sm")]: {
+      position: "fixed",
+      bottom: 0,
+      width: "100%",
+    },
+  },
 
-	newMessageBox: {
-		background: "#eee",
-		width: "100%",
-		display: "flex",
-		padding: "7px",
-		alignItems: "center",
-	},
+  newMessageBox: {
+    background: "#eee",
+    width: "100%",
+    display: "flex",
+    padding: "7px",
+    alignItems: "center",
+  },
 
-	messageInputWrapper: {
-		padding: 6,
-		marginRight: 7,
-		background: "#fff",
-		display: "flex",
-		borderRadius: 20,
-		flex: 1,
-	},
+  messageInputWrapper: {
+    padding: 6,
+    marginRight: 7,
+    background: "#fff",
+    display: "flex",
+    borderRadius: 20,
+    flex: 1,
+    position: "relative",
+  },
 
-	messageInput: {
-		paddingLeft: 10,
-		flex: 1,
-		border: "none",
-	},
+  messageInput: {
+    paddingLeft: 10,
+    flex: 1,
+    border: "none",
+  },
 
-	sendMessageIcons: {
-		color: "grey",
-	},
+  sendMessageIcons: {
+    color: "grey",
+  },
 
-	uploadInput: {
-		display: "none",
-	},
+  uploadInput: {
+    display: "none",
+  },
 
-	viewMediaInputWrapper: {
-		display: "flex",
-		padding: "10px 13px",
-		position: "relative",
-		justifyContent: "space-between",
-		alignItems: "center",
-		backgroundColor: "#eee",
-		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
-	},
+  viewMediaInputWrapper: {
+    display: "flex",
+    padding: "10px 13px",
+    position: "relative",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "#eee",
+    borderTop: "1px solid rgba(0, 0, 0, 0.12)",
+  },
 
-	emojiBox: {
-		position: "absolute",
-		bottom: 63,
-		width: 40,
-		borderTop: "1px solid #e8e8e8",
-	},
+  emojiBox: {
+    position: "absolute",
+    bottom: 63,
+    width: 40,
+    borderTop: "1px solid #e8e8e8",
+  },
 
-	circleLoading: {
-		color: green[500],
-		opacity: "70%",
-		position: "absolute",
-		top: "20%",
-		left: "50%",
-		marginLeft: -12,
-	},
+  circleLoading: {
+    color: green[500],
+    opacity: "70%",
+    position: "absolute",
+    top: "20%",
+    left: "50%",
+    marginLeft: -12,
+  },
 
-	audioLoading: {
-		color: green[500],
-		opacity: "70%",
-	},
+  audioLoading: {
+    color: green[500],
+    opacity: "70%",
+  },
 
-	recorderWrapper: {
-		display: "flex",
-		alignItems: "center",
-		alignContent: "middle",
-	},
+  recorderWrapper: {
+    display: "flex",
+    alignItems: "center",
+    alignContent: "middle",
+  },
 
-	cancelAudioIcon: {
-		color: "red",
-	},
+  cancelAudioIcon: {
+    color: "red",
+  },
 
-	sendAudioIcon: {
-		color: "green",
-	},
+  sendAudioIcon: {
+    color: "green",
+  },
 
-	replyginMsgWrapper: {
-		display: "flex",
-		width: "100%",
-		alignItems: "center",
-		justifyContent: "center",
-		paddingTop: 8,
-		paddingLeft: 73,
-		paddingRight: 7,
-	},
+  replyginMsgWrapper: {
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingTop: 8,
+    paddingLeft: 73,
+    paddingRight: 7,
+  },
 
-	replyginMsgContainer: {
-		flex: 1,
-		marginRight: 5,
-		overflowY: "hidden",
-		backgroundColor: "rgba(0, 0, 0, 0.05)",
-		borderRadius: "7.5px",
-		display: "flex",
-		position: "relative",
-	},
+  replyginMsgContainer: {
+    flex: 1,
+    marginRight: 5,
+    overflowY: "hidden",
+    backgroundColor: "rgba(0, 0, 0, 0.05)",
+    borderRadius: "7.5px",
+    display: "flex",
+    position: "relative",
+  },
 
-	replyginMsgBody: {
-		padding: 10,
-		height: "auto",
-		display: "block",
-		whiteSpace: "pre-wrap",
-		overflow: "hidden",
-	},
+  replyginMsgBody: {
+    padding: 10,
+    height: "auto",
+    display: "block",
+    whiteSpace: "pre-wrap",
+    overflow: "hidden",
+  },
 
-	replyginContactMsgSideColor: {
-		flex: "none",
-		width: "4px",
-		backgroundColor: "#35cd96",
-	},
+  replyginContactMsgSideColor: {
+    flex: "none",
+    width: "4px",
+    backgroundColor: "#35cd96",
+  },
 
-	replyginSelfMsgSideColor: {
-		flex: "none",
-		width: "4px",
-		backgroundColor: "#6bcbef",
-	},
+  replyginSelfMsgSideColor: {
+    flex: "none",
+    width: "4px",
+    backgroundColor: "#6bcbef",
+  },
 
-	messageContactName: {
-		display: "flex",
-		color: "#6bcbef",
-		fontWeight: 500,
-	},
+  messageContactName: {
+    display: "flex",
+    color: "#6bcbef",
+    fontWeight: 500,
+  },
+  messageQuickAnswersWrapper: {
+    margin: 0,
+    position: "absolute",
+    bottom: "50px",
+    background: "#ffffff",
+    padding: "2px",
+    border: "1px solid #CCC",
+    left: 0,
+    width: "100%",
+    "& li": {
+      listStyle: "none",
+      "& a": {
+        display: "block",
+        padding: "8px",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        maxHeight: "32px",
+        "&:hover": {
+          background: "#F1F1F1",
+          cursor: "pointer",
+        },
+      },
+    },
+  },
 }));
 
 const MessageInput = ({ ticketStatus }) => {
-	const classes = useStyles();
-	const { ticketId } = useParams();
+  const classes = useStyles();
+  const { ticketId } = useParams();
 
-	const [medias, setMedias] = useState([]);
-	const [inputMessage, setInputMessage] = useState("");
-	const [showEmoji, setShowEmoji] = useState(false);
-	const [loading, setLoading] = useState(false);
-	const [recording, setRecording] = useState(false);
-	const inputRef = useRef();
-	const { setReplyingMessage, replyingMessage } = useContext(
-		ReplyMessageContext
-	);
-	const { user } = useContext(AuthContext);
+  const [medias, setMedias] = useState([]);
+  const [inputMessage, setInputMessage] = useState("");
+  const [showEmoji, setShowEmoji] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [recording, setRecording] = useState(false);
+  const [quickAnswers, setQuickAnswer] = useState([]);
+  const [typeBar, setTypeBar] = useState(false);
+  const inputRef = useRef();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const { setReplyingMessage, replyingMessage } =
+    useContext(ReplyMessageContext);
+  const { user } = useContext(AuthContext);
 
-	const [signMessage, setSignMessage] = useLocalStorage("signOption", true);
+  const [signMessage, setSignMessage] = useLocalStorage("signOption", true);
 
-	useEffect(() => {
-		inputRef.current.focus();
-	}, [replyingMessage]);
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [replyingMessage]);
 
-	useEffect(() => {
-		inputRef.current.focus();
-		return () => {
-			setInputMessage("");
-			setShowEmoji(false);
-			setMedias([]);
-			setReplyingMessage(null);
-		};
-	}, [ticketId, setReplyingMessage]);
+  useEffect(() => {
+    inputRef.current.focus();
+    return () => {
+      setInputMessage("");
+      setShowEmoji(false);
+      setMedias([]);
+      setReplyingMessage(null);
+    };
+  }, [ticketId, setReplyingMessage]);
 
-	const handleChangeInput = e => {
-		setInputMessage(e.target.value);
-	};
+  const handleChangeInput = (e) => {
+    setInputMessage(e.target.value);
+    handleLoadQuickAnswer(e.target.value);
+  };
 
-	const handleAddEmoji = e => {
-		let emoji = e.native;
-		setInputMessage(prevState => prevState + emoji);
-	};
+  const handleQuickAnswersClick = (value) => {
+    setInputMessage(value);
+    setTypeBar(false);
+  };
 
-	const handleChangeMedias = e => {
-		if (!e.target.files) {
-			return;
-		}
+  const handleAddEmoji = (e) => {
+    let emoji = e.native;
+    setInputMessage((prevState) => prevState + emoji);
+  };
 
-		const selectedMedias = Array.from(e.target.files);
-		setMedias(selectedMedias);
-	};
+  const handleChangeMedias = (e) => {
+    if (!e.target.files) {
+      return;
+    }
 
-	const handleInputPaste = e => {
-		if (e.clipboardData.files[0]) {
-			setMedias([e.clipboardData.files[0]]);
-		}
-	};
+    const selectedMedias = Array.from(e.target.files);
+    setMedias(selectedMedias);
+  };
 
-	const handleUploadMedia = async e => {
-		setLoading(true);
-		e.preventDefault();
+  const handleInputPaste = (e) => {
+    if (e.clipboardData.files[0]) {
+      setMedias([e.clipboardData.files[0]]);
+    }
+  };
 
-		const formData = new FormData();
-		formData.append("fromMe", true);
-		medias.forEach(media => {
-			formData.append("medias", media);
-			formData.append("body", media.name);
-		});
+  const handleUploadMedia = async (e) => {
+    setLoading(true);
+    e.preventDefault();
 
-		try {
-			await api.post(`/messages/${ticketId}`, formData);
-		} catch (err) {
-			toastError(err);
-		}
+    const formData = new FormData();
+    formData.append("fromMe", true);
+    medias.forEach((media) => {
+      formData.append("medias", media);
+      formData.append("body", media.name);
+    });
 
-		setLoading(false);
-		setMedias([]);
-	};
+    try {
+      await api.post(`/messages/${ticketId}`, formData);
+    } catch (err) {
+      toastError(err);
+    }
 
-	const handleSendMessage = async () => {
-		if (inputMessage.trim() === "") return;
-		setLoading(true);
+    setLoading(false);
+    setMedias([]);
+  };
 
-		const message = {
-			read: 1,
-			fromMe: true,
-			mediaUrl: "",
-			body: signMessage
-				? `*${user?.name}:*\n${inputMessage.trim()}`
-				: inputMessage.trim(),
-			quotedMsg: replyingMessage,
-		};
-		try {
-			await api.post(`/messages/${ticketId}`, message);
-		} catch (err) {
-			toastError(err);
-		}
+  const handleSendMessage = async () => {
+    if (inputMessage.trim() === "") return;
+    setLoading(true);
 
-		setInputMessage("");
-		setShowEmoji(false);
-		setLoading(false);
-		setReplyingMessage(null);
-	};
+    const message = {
+      read: 1,
+      fromMe: true,
+      mediaUrl: "",
+      body: signMessage
+        ? `*${user?.name}:*\n${inputMessage.trim()}`
+        : inputMessage.trim(),
+      quotedMsg: replyingMessage,
+    };
+    try {
+      await api.post(`/messages/${ticketId}`, message);
+    } catch (err) {
+      toastError(err);
+    }
 
-	const handleStartRecording = async () => {
-		setLoading(true);
-		try {
-			await navigator.mediaDevices.getUserMedia({ audio: true });
-			await Mp3Recorder.start();
-			setRecording(true);
-			setLoading(false);
-		} catch (err) {
-			toastError(err);
-			setLoading(false);
-		}
-	};
+    setInputMessage("");
+    setShowEmoji(false);
+    setLoading(false);
+    setReplyingMessage(null);
+  };
 
-	const handleUploadAudio = async () => {
-		setLoading(true);
-		try {
-			const [, blob] = await Mp3Recorder.stop().getMp3();
-			if (blob.size < 10000) {
-				setLoading(false);
-				setRecording(false);
-				return;
-			}
+  const handleStartRecording = async () => {
+    setLoading(true);
+    try {
+      await navigator.mediaDevices.getUserMedia({ audio: true });
+      await Mp3Recorder.start();
+      setRecording(true);
+      setLoading(false);
+    } catch (err) {
+      toastError(err);
+      setLoading(false);
+    }
+  };
 
-			const formData = new FormData();
-			const filename = `${new Date().getTime()}.mp3`;
-			formData.append("medias", blob, filename);
-			formData.append("body", filename);
-			formData.append("fromMe", true);
+  const handleLoadQuickAnswer = async (value) => {
+    if (value && value.indexOf("/") === 0) {
+      try {
+        const { data } = await api.get("/quickAnswers/", {
+          params: { searchParam: inputMessage.substring(1) },
+        });
+        setQuickAnswer(data.quickAnswers);
+        if (data.quickAnswers.length > 0) {
+          setTypeBar(true);
+        } else {
+          setTypeBar(false);
+        }
+      } catch (err) {
+        setTypeBar(false);
+      }
+    } else {
+      setTypeBar(false);
+    }
+  };
 
-			await api.post(`/messages/${ticketId}`, formData);
-		} catch (err) {
-			toastError(err);
-		}
+  const handleUploadAudio = async () => {
+    setLoading(true);
+    try {
+      const [, blob] = await Mp3Recorder.stop().getMp3();
+      if (blob.size < 10000) {
+        setLoading(false);
+        setRecording(false);
+        return;
+      }
 
-		setRecording(false);
-		setLoading(false);
-	};
+      const formData = new FormData();
+      const filename = `${new Date().getTime()}.mp3`;
+      formData.append("medias", blob, filename);
+      formData.append("body", filename);
+      formData.append("fromMe", true);
 
-	const handleCancelAudio = async () => {
-		try {
-			await Mp3Recorder.stop().getMp3();
-			setRecording(false);
-		} catch (err) {
-			toastError(err);
-		}
-	};
+      await api.post(`/messages/${ticketId}`, formData);
+    } catch (err) {
+      toastError(err);
+    }
 
-	const renderReplyingMessage = message => {
-		return (
-			<div className={classes.replyginMsgWrapper}>
-				<div className={classes.replyginMsgContainer}>
-					<span
-						className={clsx(classes.replyginContactMsgSideColor, {
-							[classes.replyginSelfMsgSideColor]: !message.fromMe,
-						})}
-					></span>
-					<div className={classes.replyginMsgBody}>
-						{!message.fromMe && (
-							<span className={classes.messageContactName}>
-								{message.contact?.name}
-							</span>
-						)}
-						{message.body}
-					</div>
-				</div>
-				<IconButton
-					aria-label="showRecorder"
-					component="span"
-					disabled={loading || ticketStatus !== "open"}
-					onClick={() => setReplyingMessage(null)}
-				>
-					<ClearIcon className={classes.sendMessageIcons} />
-				</IconButton>
-			</div>
-		);
-	};
+    setRecording(false);
+    setLoading(false);
+  };
 
-	if (medias.length > 0)
-		return (
-			<Paper elevation={0} square className={classes.viewMediaInputWrapper}>
-				<IconButton
-					aria-label="cancel-upload"
-					component="span"
-					onClick={e => setMedias([])}
-				>
-					<CancelIcon className={classes.sendMessageIcons} />
-				</IconButton>
+  const handleCancelAudio = async () => {
+    try {
+      await Mp3Recorder.stop().getMp3();
+      setRecording(false);
+    } catch (err) {
+      toastError(err);
+    }
+  };
 
-				{loading ? (
-					<div>
-						<CircularProgress className={classes.circleLoading} />
-					</div>
-				) : (
-					<span>
-						{medias[0]?.name}
-						{/* <img src={media.preview} alt=""></img> */}
-					</span>
-				)}
-				<IconButton
-					aria-label="send-upload"
-					component="span"
-					onClick={handleUploadMedia}
-					disabled={loading}
-				>
-					<SendIcon className={classes.sendMessageIcons} />
-				</IconButton>
-			</Paper>
-		);
-	else {
-		return (
-			<Paper square elevation={0} className={classes.mainWrapper}>
-				{replyingMessage && renderReplyingMessage(replyingMessage)}
-				<div className={classes.newMessageBox}>
-					<IconButton
-						aria-label="emojiPicker"
-						component="span"
-						disabled={loading || recording || ticketStatus !== "open"}
-						onClick={e => setShowEmoji(prevState => !prevState)}
-					>
-						<MoodIcon className={classes.sendMessageIcons} />
-					</IconButton>
-					{showEmoji ? (
-						<div className={classes.emojiBox}>
-							<Picker
-								perLine={16}
-								showPreview={false}
-								showSkinTones={false}
-								onSelect={handleAddEmoji}
-							/>
-						</div>
-					) : null}
+  const handleOpenMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
 
-					<input
-						multiple
-						type="file"
-						id="upload-button"
-						disabled={loading || recording || ticketStatus !== "open"}
-						className={classes.uploadInput}
-						onChange={handleChangeMedias}
-					/>
-					<label htmlFor="upload-button">
-						<IconButton
-							aria-label="upload"
-							component="span"
-							disabled={loading || recording || ticketStatus !== "open"}
-						>
-							<AttachFileIcon className={classes.sendMessageIcons} />
-						</IconButton>
-					</label>
-					<FormControlLabel
-						style={{ marginRight: 7, color: "gray" }}
-						label={i18n.t("messagesInput.signMessage")}
-						labelPlacement="start"
-						control={
-							<Switch
-								size="small"
-								checked={signMessage}
-								onChange={e => {
-									setSignMessage(e.target.checked);
-								}}
-								name="showAllTickets"
-								color="primary"
-							/>
-						}
-					/>
-					<div className={classes.messageInputWrapper}>
-						<InputBase
-							inputRef={input => {
-								input && input.focus();
-								input && (inputRef.current = input);
-							}}
-							className={classes.messageInput}
-							placeholder={
-								ticketStatus === "open"
-									? i18n.t("messagesInput.placeholderOpen")
-									: i18n.t("messagesInput.placeholderClosed")
-							}
-							multiline
-							rowsMax={5}
-							value={inputMessage}
-							onChange={handleChangeInput}
-							disabled={recording || loading || ticketStatus !== "open"}
-							onPaste={e => {
-								ticketStatus === "open" && handleInputPaste(e);
-							}}
-							onKeyPress={e => {
-								if (loading || e.shiftKey) return;
-								else if (e.key === "Enter") {
-									handleSendMessage();
-								}
-							}}
-						/>
-					</div>
-					{inputMessage ? (
-						<IconButton
-							aria-label="sendMessage"
-							component="span"
-							onClick={handleSendMessage}
-							disabled={loading}
-						>
-							<SendIcon className={classes.sendMessageIcons} />
-						</IconButton>
-					) : recording ? (
-						<div className={classes.recorderWrapper}>
-							<IconButton
-								aria-label="cancelRecording"
-								component="span"
-								fontSize="large"
-								disabled={loading}
-								onClick={handleCancelAudio}
-							>
-								<HighlightOffIcon className={classes.cancelAudioIcon} />
-							</IconButton>
-							{loading ? (
-								<div>
-									<CircularProgress className={classes.audioLoading} />
-								</div>
-							) : (
-								<RecordingTimer />
-							)}
+  const handleMenuItemClick = (event) => {
+    setAnchorEl(null);
+  };
 
-							<IconButton
-								aria-label="sendRecordedAudio"
-								component="span"
-								onClick={handleUploadAudio}
-								disabled={loading}
-							>
-								<CheckCircleOutlineIcon className={classes.sendAudioIcon} />
-							</IconButton>
-						</div>
-					) : (
-						<IconButton
-							aria-label="showRecorder"
-							component="span"
-							disabled={loading || ticketStatus !== "open"}
-							onClick={handleStartRecording}
-						>
-							<MicIcon className={classes.sendMessageIcons} />
-						</IconButton>
-					)}
-				</div>
-			</Paper>
-		);
-	}
+  const renderReplyingMessage = (message) => {
+    return (
+      <div className={classes.replyginMsgWrapper}>
+        <div className={classes.replyginMsgContainer}>
+          <span
+            className={clsx(classes.replyginContactMsgSideColor, {
+              [classes.replyginSelfMsgSideColor]: !message.fromMe,
+            })}
+          ></span>
+          <div className={classes.replyginMsgBody}>
+            {!message.fromMe && (
+              <span className={classes.messageContactName}>
+                {message.contact?.name}
+              </span>
+            )}
+            {message.body}
+          </div>
+        </div>
+        <IconButton
+          aria-label="showRecorder"
+          component="span"
+          disabled={loading || ticketStatus !== "open"}
+          onClick={() => setReplyingMessage(null)}
+        >
+          <ClearIcon className={classes.sendMessageIcons} />
+        </IconButton>
+      </div>
+    );
+  };
+
+  if (medias.length > 0)
+    return (
+      <Paper elevation={0} square className={classes.viewMediaInputWrapper}>
+        <IconButton
+          aria-label="cancel-upload"
+          component="span"
+          onClick={(e) => setMedias([])}
+        >
+          <CancelIcon className={classes.sendMessageIcons} />
+        </IconButton>
+
+        {loading ? (
+          <div>
+            <CircularProgress className={classes.circleLoading} />
+          </div>
+        ) : (
+          <span>
+            {medias[0]?.name}
+            {/* <img src={media.preview} alt=""></img> */}
+          </span>
+        )}
+        <IconButton
+          aria-label="send-upload"
+          component="span"
+          onClick={handleUploadMedia}
+          disabled={loading}
+        >
+          <SendIcon className={classes.sendMessageIcons} />
+        </IconButton>
+      </Paper>
+    );
+  else {
+    return (
+      <Paper square elevation={0} className={classes.mainWrapper}>
+        {replyingMessage && renderReplyingMessage(replyingMessage)}
+        <div className={classes.newMessageBox}>
+          <Hidden only={["sm", "xs"]}>
+            <IconButton
+              aria-label="emojiPicker"
+              component="span"
+              disabled={loading || recording || ticketStatus !== "open"}
+              onClick={(e) => setShowEmoji((prevState) => !prevState)}
+            >
+              <MoodIcon className={classes.sendMessageIcons} />
+            </IconButton>
+            {showEmoji ? (
+              <div className={classes.emojiBox}>
+                <ClickAwayListener onClickAway={(e) => setShowEmoji(false)}>
+                  <Picker
+                    perLine={16}
+                    showPreview={false}
+                    showSkinTones={false}
+                    onSelect={handleAddEmoji}
+                  />
+                </ClickAwayListener>
+              </div>
+            ) : null}
+
+            <input
+              multiple
+              type="file"
+              id="upload-button"
+              disabled={loading || recording || ticketStatus !== "open"}
+              className={classes.uploadInput}
+              onChange={handleChangeMedias}
+            />
+            <label htmlFor="upload-button">
+              <IconButton
+                aria-label="upload"
+                component="span"
+                disabled={loading || recording || ticketStatus !== "open"}
+              >
+                <AttachFileIcon className={classes.sendMessageIcons} />
+              </IconButton>
+            </label>
+            <FormControlLabel
+              style={{ marginRight: 7, color: "gray" }}
+              label={i18n.t("messagesInput.signMessage")}
+              labelPlacement="start"
+              control={
+                <Switch
+                  size="small"
+                  checked={signMessage}
+                  onChange={(e) => {
+                    setSignMessage(e.target.checked);
+                  }}
+                  name="showAllTickets"
+                  color="primary"
+                />
+              }
+            />
+          </Hidden>
+          <Hidden only={["md", "lg", "xl"]}>
+            <IconButton
+              aria-controls="simple-menu"
+              aria-haspopup="true"
+              onClick={handleOpenMenuClick}
+            >
+              <MoreVert></MoreVert>
+            </IconButton>
+            <Menu
+              id="simple-menu"
+              keepMounted
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={handleMenuItemClick}
+            >
+              <MenuItem onClick={handleMenuItemClick}>
+                <IconButton
+                  aria-label="emojiPicker"
+                  component="span"
+                  disabled={loading || recording || ticketStatus !== "open"}
+                  onClick={(e) => setShowEmoji((prevState) => !prevState)}
+                >
+                  <MoodIcon className={classes.sendMessageIcons} />
+                </IconButton>
+              </MenuItem>
+              <MenuItem onClick={handleMenuItemClick}>
+                <input
+                  multiple
+                  type="file"
+                  id="upload-button"
+                  disabled={loading || recording || ticketStatus !== "open"}
+                  className={classes.uploadInput}
+                  onChange={handleChangeMedias}
+                />
+                <label htmlFor="upload-button">
+                  <IconButton
+                    aria-label="upload"
+                    component="span"
+                    disabled={loading || recording || ticketStatus !== "open"}
+                  >
+                    <AttachFileIcon className={classes.sendMessageIcons} />
+                  </IconButton>
+                </label>
+              </MenuItem>
+              <MenuItem onClick={handleMenuItemClick}>
+                <FormControlLabel
+                  style={{ marginRight: 7, color: "gray" }}
+                  label={i18n.t("messagesInput.signMessage")}
+                  labelPlacement="start"
+                  control={
+                    <Switch
+                      size="small"
+                      checked={signMessage}
+                      onChange={(e) => {
+                        setSignMessage(e.target.checked);
+                      }}
+                      name="showAllTickets"
+                      color="primary"
+                    />
+                  }
+                />
+              </MenuItem>
+            </Menu>
+          </Hidden>
+          <div className={classes.messageInputWrapper}>
+            <InputBase
+              inputRef={(input) => {
+                input && input.focus();
+                input && (inputRef.current = input);
+              }}
+              className={classes.messageInput}
+              placeholder={
+                ticketStatus === "open"
+                  ? i18n.t("messagesInput.placeholderOpen")
+                  : i18n.t("messagesInput.placeholderClosed")
+              }
+              multiline
+              rowsMax={5}
+              value={inputMessage}
+              onChange={handleChangeInput}
+              disabled={recording || loading || ticketStatus !== "open"}
+              onPaste={(e) => {
+                ticketStatus === "open" && handleInputPaste(e);
+              }}
+              onKeyPress={(e) => {
+                if (loading || e.shiftKey) return;
+                else if (e.key === "Enter") {
+                  handleSendMessage();
+                }
+              }}
+            />
+            {typeBar ? (
+              <ul className={classes.messageQuickAnswersWrapper}>
+                {quickAnswers.map((value, index) => {
+                  return (
+                    <li
+                      className={classes.messageQuickAnswersWrapperItem}
+                      key={index}
+                    >
+                      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                      <a onClick={() => handleQuickAnswersClick(value.message)}>
+                        {`${value.shortcut} - ${value.message}`}
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : (
+              <div></div>
+            )}
+          </div>
+          {inputMessage ? (
+            <IconButton
+              aria-label="sendMessage"
+              component="span"
+              onClick={handleSendMessage}
+              disabled={loading}
+            >
+              <SendIcon className={classes.sendMessageIcons} />
+            </IconButton>
+          ) : recording ? (
+            <div className={classes.recorderWrapper}>
+              <IconButton
+                aria-label="cancelRecording"
+                component="span"
+                fontSize="large"
+                disabled={loading}
+                onClick={handleCancelAudio}
+              >
+                <HighlightOffIcon className={classes.cancelAudioIcon} />
+              </IconButton>
+              {loading ? (
+                <div>
+                  <CircularProgress className={classes.audioLoading} />
+                </div>
+              ) : (
+                <RecordingTimer />
+              )}
+
+              <IconButton
+                aria-label="sendRecordedAudio"
+                component="span"
+                onClick={handleUploadAudio}
+                disabled={loading}
+              >
+                <CheckCircleOutlineIcon className={classes.sendAudioIcon} />
+              </IconButton>
+            </div>
+          ) : (
+            <IconButton
+              aria-label="showRecorder"
+              component="span"
+              disabled={loading || ticketStatus !== "open"}
+              onClick={handleStartRecording}
+            >
+              <MicIcon className={classes.sendMessageIcons} />
+            </IconButton>
+          )}
+        </div>
+      </Paper>
+    );
+  }
 };
 
 export default MessageInput;
diff --git a/frontend/src/components/MessageOptionsMenu/index.js b/frontend/src/components/MessageOptionsMenu/index.js
index 83a0b6e..ea0dd0b 100644
--- a/frontend/src/components/MessageOptionsMenu/index.js
+++ b/frontend/src/components/MessageOptionsMenu/index.js
@@ -10,62 +10,62 @@ import { ReplyMessageContext } from "../../context/ReplyingMessage/ReplyingMessa
 import toastError from "../../errors/toastError";
 
 const MessageOptionsMenu = ({ message, menuOpen, handleClose, anchorEl }) => {
-	const { setReplyingMessage } = useContext(ReplyMessageContext);
-	const [confirmationOpen, setConfirmationOpen] = useState(false);
+  const { setReplyingMessage } = useContext(ReplyMessageContext);
+  const [confirmationOpen, setConfirmationOpen] = useState(false);
 
-	const handleDeleteMessage = async () => {
-		try {
-			await api.delete(`/messages/${message.id}`);
-		} catch (err) {
-			toastError(err);
-		}
-	};
+  const handleDeleteMessage = async () => {
+    try {
+      await api.delete(`/messages/${message.id}`);
+    } catch (err) {
+      toastError(err);
+    }
+  };
 
-	const hanldeReplyMessage = () => {
-		setReplyingMessage(message);
-		handleClose();
-	};
+  const hanldeReplyMessage = () => {
+    setReplyingMessage(message);
+    handleClose();
+  };
 
-	const handleOpenConfirmationModal = e => {
-		setConfirmationOpen(true);
-		handleClose();
-	};
+  const handleOpenConfirmationModal = (e) => {
+    setConfirmationOpen(true);
+    handleClose();
+  };
 
-	return (
-		<>
-			<ConfirmationModal
-				title={i18n.t("messageOptionsMenu.confirmationModal.title")}
-				open={confirmationOpen}
-				onClose={setConfirmationOpen}
-				onConfirm={handleDeleteMessage}
-			>
-				{i18n.t("messageOptionsMenu.confirmationModal.message")}
-			</ConfirmationModal>
-			<Menu
-				anchorEl={anchorEl}
-				getContentAnchorEl={null}
-				anchorOrigin={{
-					vertical: "bottom",
-					horizontal: "right",
-				}}
-				transformOrigin={{
-					vertical: "top",
-					horizontal: "right",
-				}}
-				open={menuOpen}
-				onClose={handleClose}
-			>
-				{message.fromMe && (
-					<MenuItem onClick={handleOpenConfirmationModal}>
-						{i18n.t("messageOptionsMenu.delete")}
-					</MenuItem>
-				)}
-				<MenuItem onClick={hanldeReplyMessage}>
-					{i18n.t("messageOptionsMenu.reply")}
-				</MenuItem>
-			</Menu>
-		</>
-	);
+  return (
+    <>
+      <ConfirmationModal
+        title={i18n.t("messageOptionsMenu.confirmationModal.title")}
+        open={confirmationOpen}
+        onClose={setConfirmationOpen}
+        onConfirm={handleDeleteMessage}
+      >
+        {i18n.t("messageOptionsMenu.confirmationModal.message")}
+      </ConfirmationModal>
+      <Menu
+        anchorEl={anchorEl}
+        getContentAnchorEl={null}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        open={menuOpen}
+        onClose={handleClose}
+      >
+        {message.fromMe && (
+          <MenuItem onClick={handleOpenConfirmationModal}>
+            {i18n.t("messageOptionsMenu.delete")}
+          </MenuItem>
+        )}
+        <MenuItem onClick={hanldeReplyMessage}>
+          {i18n.t("messageOptionsMenu.reply")}
+        </MenuItem>
+      </Menu>
+    </>
+  );
 };
 
 export default MessageOptionsMenu;
diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index e22af75..ef91b81 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -6,19 +6,19 @@ import clsx from "clsx";
 
 import { green } from "@material-ui/core/colors";
 import {
-	Button,
-	CircularProgress,
-	Divider,
-	IconButton,
-	makeStyles,
+  Button,
+  CircularProgress,
+  Divider,
+  IconButton,
+  makeStyles,
 } from "@material-ui/core";
 import {
-	AccessTime,
-	Block,
-	Done,
-	DoneAll,
-	ExpandMore,
-	GetApp,
+  AccessTime,
+  Block,
+  Done,
+  DoneAll,
+  ExpandMore,
+  GetApp,
 } from "@material-ui/icons";
 
 import MarkdownWrapper from "../MarkdownWrapper";
@@ -29,623 +29,626 @@ import whatsBackground from "../../assets/wa-background.png";
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
 
-const useStyles = makeStyles(theme => ({
-	messagesListWrapper: {
-		overflow: "hidden",
-		position: "relative",
-		display: "flex",
-		flexDirection: "column",
-		flexGrow: 1,
-	},
+const useStyles = makeStyles((theme) => ({
+  messagesListWrapper: {
+    overflow: "hidden",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+  },
 
-	messagesList: {
-		backgroundImage: `url(${whatsBackground})`,
-		display: "flex",
-		flexDirection: "column",
-		flexGrow: 1,
-		padding: "20px 20px 20px 20px",
-		overflowY: "scroll",
-		...theme.scrollbarStyles,
-	},
+  messagesList: {
+    backgroundImage: `url(${whatsBackground})`,
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    padding: "20px 20px 20px 20px",
+    overflowY: "scroll",
+    [theme.breakpoints.down("sm")]: {
+      paddingBottom: "90px",
+    },
+    ...theme.scrollbarStyles,
+  },
 
-	circleLoading: {
-		color: green[500],
-		position: "absolute",
-		opacity: "70%",
-		top: 0,
-		left: "50%",
-		marginTop: 12,
-	},
+  circleLoading: {
+    color: green[500],
+    position: "absolute",
+    opacity: "70%",
+    top: 0,
+    left: "50%",
+    marginTop: 12,
+  },
 
-	messageLeft: {
-		marginRight: 20,
-		marginTop: 2,
-		minWidth: 100,
-		maxWidth: 600,
-		height: "auto",
-		display: "block",
-		position: "relative",
-		"&:hover #messageActionsButton": {
-			display: "flex",
-			position: "absolute",
-			top: 0,
-			right: 0,
-		},
+  messageLeft: {
+    marginRight: 20,
+    marginTop: 2,
+    minWidth: 100,
+    maxWidth: 600,
+    height: "auto",
+    display: "block",
+    position: "relative",
+    "&:hover #messageActionsButton": {
+      display: "flex",
+      position: "absolute",
+      top: 0,
+      right: 0,
+    },
 
-		whiteSpace: "pre-wrap",
-		backgroundColor: "#ffffff",
-		color: "#303030",
-		alignSelf: "flex-start",
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 8,
-		borderBottomLeftRadius: 8,
-		borderBottomRightRadius: 8,
-		paddingLeft: 5,
-		paddingRight: 5,
-		paddingTop: 5,
-		paddingBottom: 0,
-		boxShadow: "0 1px 1px #b3b3b3",
-	},
+    whiteSpace: "pre-wrap",
+    backgroundColor: "#ffffff",
+    color: "#303030",
+    alignSelf: "flex-start",
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    paddingLeft: 5,
+    paddingRight: 5,
+    paddingTop: 5,
+    paddingBottom: 0,
+    boxShadow: "0 1px 1px #b3b3b3",
+  },
 
-	quotedContainerLeft: {
-		margin: "-3px -80px 6px -6px",
-		overflow: "hidden",
-		backgroundColor: "#f0f0f0",
-		borderRadius: "7.5px",
-		display: "flex",
-		position: "relative",
-	},
+  quotedContainerLeft: {
+    margin: "-3px -80px 6px -6px",
+    overflow: "hidden",
+    backgroundColor: "#f0f0f0",
+    borderRadius: "7.5px",
+    display: "flex",
+    position: "relative",
+  },
 
-	quotedMsg: {
-		padding: 10,
-		maxWidth: 300,
-		height: "auto",
-		display: "block",
-		whiteSpace: "pre-wrap",
-		overflow: "hidden",
-	},
+  quotedMsg: {
+    padding: 10,
+    maxWidth: 300,
+    height: "auto",
+    display: "block",
+    whiteSpace: "pre-wrap",
+    overflow: "hidden",
+  },
 
-	quotedSideColorLeft: {
-		flex: "none",
-		width: "4px",
-		backgroundColor: "#6bcbef",
-	},
+  quotedSideColorLeft: {
+    flex: "none",
+    width: "4px",
+    backgroundColor: "#6bcbef",
+  },
 
-	messageRight: {
-		marginLeft: 20,
-		marginTop: 2,
-		minWidth: 100,
-		maxWidth: 600,
-		height: "auto",
-		display: "block",
-		position: "relative",
-		"&:hover #messageActionsButton": {
-			display: "flex",
-			position: "absolute",
-			top: 0,
-			right: 0,
-		},
+  messageRight: {
+    marginLeft: 20,
+    marginTop: 2,
+    minWidth: 100,
+    maxWidth: 600,
+    height: "auto",
+    display: "block",
+    position: "relative",
+    "&:hover #messageActionsButton": {
+      display: "flex",
+      position: "absolute",
+      top: 0,
+      right: 0,
+    },
 
-		whiteSpace: "pre-wrap",
-		backgroundColor: "#dcf8c6",
-		color: "#303030",
-		alignSelf: "flex-end",
-		borderTopLeftRadius: 8,
-		borderTopRightRadius: 8,
-		borderBottomLeftRadius: 8,
-		borderBottomRightRadius: 0,
-		paddingLeft: 5,
-		paddingRight: 5,
-		paddingTop: 5,
-		paddingBottom: 0,
-		boxShadow: "0 1px 1px #b3b3b3",
-	},
+    whiteSpace: "pre-wrap",
+    backgroundColor: "#dcf8c6",
+    color: "#303030",
+    alignSelf: "flex-end",
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 0,
+    paddingLeft: 5,
+    paddingRight: 5,
+    paddingTop: 5,
+    paddingBottom: 0,
+    boxShadow: "0 1px 1px #b3b3b3",
+  },
 
-	quotedContainerRight: {
-		margin: "-3px -80px 6px -6px",
-		overflowY: "hidden",
-		backgroundColor: "#cfe9ba",
-		borderRadius: "7.5px",
-		display: "flex",
-		position: "relative",
-	},
+  quotedContainerRight: {
+    margin: "-3px -80px 6px -6px",
+    overflowY: "hidden",
+    backgroundColor: "#cfe9ba",
+    borderRadius: "7.5px",
+    display: "flex",
+    position: "relative",
+  },
 
-	quotedMsgRight: {
-		padding: 10,
-		maxWidth: 300,
-		height: "auto",
-		whiteSpace: "pre-wrap",
-	},
+  quotedMsgRight: {
+    padding: 10,
+    maxWidth: 300,
+    height: "auto",
+    whiteSpace: "pre-wrap",
+  },
 
-	quotedSideColorRight: {
-		flex: "none",
-		width: "4px",
-		backgroundColor: "#35cd96",
-	},
+  quotedSideColorRight: {
+    flex: "none",
+    width: "4px",
+    backgroundColor: "#35cd96",
+  },
 
-	messageActionsButton: {
-		display: "none",
-		position: "relative",
-		color: "#999",
-		zIndex: 1,
-		backgroundColor: "inherit",
-		opacity: "90%",
-		"&:hover, &.Mui-focusVisible": { backgroundColor: "inherit" },
-	},
+  messageActionsButton: {
+    display: "none",
+    position: "relative",
+    color: "#999",
+    zIndex: 1,
+    backgroundColor: "inherit",
+    opacity: "90%",
+    "&:hover, &.Mui-focusVisible": { backgroundColor: "inherit" },
+  },
 
-	messageContactName: {
-		display: "flex",
-		color: "#6bcbef",
-		fontWeight: 500,
-	},
+  messageContactName: {
+    display: "flex",
+    color: "#6bcbef",
+    fontWeight: 500,
+  },
 
-	textContentItem: {
-		overflowWrap: "break-word",
-		padding: "3px 80px 6px 6px",
-	},
+  textContentItem: {
+    overflowWrap: "break-word",
+    padding: "3px 80px 6px 6px",
+  },
 
-	textContentItemDeleted: {
-		fontStyle: "italic",
-		color: "rgba(0, 0, 0, 0.36)",
-		overflowWrap: "break-word",
-		padding: "3px 80px 6px 6px",
-	},
+  textContentItemDeleted: {
+    fontStyle: "italic",
+    color: "rgba(0, 0, 0, 0.36)",
+    overflowWrap: "break-word",
+    padding: "3px 80px 6px 6px",
+  },
 
-	messageMedia: {
-		objectFit: "cover",
-		width: 250,
-		height: 200,
-		borderTopLeftRadius: 8,
-		borderTopRightRadius: 8,
-		borderBottomLeftRadius: 8,
-		borderBottomRightRadius: 8,
-	},
+  messageMedia: {
+    objectFit: "cover",
+    width: 250,
+    height: 200,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+  },
 
-	timestamp: {
-		fontSize: 11,
-		position: "absolute",
-		bottom: 0,
-		right: 5,
-		color: "#999",
-	},
+  timestamp: {
+    fontSize: 11,
+    position: "absolute",
+    bottom: 0,
+    right: 5,
+    color: "#999",
+  },
 
-	dailyTimestamp: {
-		alignItems: "center",
-		textAlign: "center",
-		alignSelf: "center",
-		width: "110px",
-		backgroundColor: "#e1f3fb",
-		margin: "10px",
-		borderRadius: "10px",
-		boxShadow: "0 1px 1px #b3b3b3",
-	},
+  dailyTimestamp: {
+    alignItems: "center",
+    textAlign: "center",
+    alignSelf: "center",
+    width: "110px",
+    backgroundColor: "#e1f3fb",
+    margin: "10px",
+    borderRadius: "10px",
+    boxShadow: "0 1px 1px #b3b3b3",
+  },
 
-	dailyTimestampText: {
-		color: "#808888",
-		padding: 8,
-		alignSelf: "center",
-		marginLeft: "0px",
-	},
+  dailyTimestampText: {
+    color: "#808888",
+    padding: 8,
+    alignSelf: "center",
+    marginLeft: "0px",
+  },
 
-	ackIcons: {
-		fontSize: 18,
-		verticalAlign: "middle",
-		marginLeft: 4,
-	},
+  ackIcons: {
+    fontSize: 18,
+    verticalAlign: "middle",
+    marginLeft: 4,
+  },
 
-	deletedIcon: {
-		fontSize: 18,
-		verticalAlign: "middle",
-		marginRight: 4,
-	},
+  deletedIcon: {
+    fontSize: 18,
+    verticalAlign: "middle",
+    marginRight: 4,
+  },
 
-	ackDoneAllIcon: {
-		color: green[500],
-		fontSize: 18,
-		verticalAlign: "middle",
-		marginLeft: 4,
-	},
+  ackDoneAllIcon: {
+    color: green[500],
+    fontSize: 18,
+    verticalAlign: "middle",
+    marginLeft: 4,
+  },
 
-	downloadMedia: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		backgroundColor: "inherit",
-		padding: 10,
-	},
+  downloadMedia: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "inherit",
+    padding: 10,
+  },
 }));
 
 const reducer = (state, action) => {
-	if (action.type === "LOAD_MESSAGES") {
-		const messages = action.payload;
-		const newMessages = [];
+  if (action.type === "LOAD_MESSAGES") {
+    const messages = action.payload;
+    const newMessages = [];
 
-		messages.forEach(message => {
-			const messageIndex = state.findIndex(m => m.id === message.id);
-			if (messageIndex !== -1) {
-				state[messageIndex] = message;
-			} else {
-				newMessages.push(message);
-			}
-		});
+    messages.forEach((message) => {
+      const messageIndex = state.findIndex((m) => m.id === message.id);
+      if (messageIndex !== -1) {
+        state[messageIndex] = message;
+      } else {
+        newMessages.push(message);
+      }
+    });
 
-		return [...newMessages, ...state];
-	}
+    return [...newMessages, ...state];
+  }
 
-	if (action.type === "ADD_MESSAGE") {
-		const newMessage = action.payload;
-		const messageIndex = state.findIndex(m => m.id === newMessage.id);
+  if (action.type === "ADD_MESSAGE") {
+    const newMessage = action.payload;
+    const messageIndex = state.findIndex((m) => m.id === newMessage.id);
 
-		if (messageIndex !== -1) {
-			state[messageIndex] = newMessage;
-		} else {
-			state.push(newMessage);
-		}
+    if (messageIndex !== -1) {
+      state[messageIndex] = newMessage;
+    } else {
+      state.push(newMessage);
+    }
 
-		return [...state];
-	}
+    return [...state];
+  }
 
-	if (action.type === "UPDATE_MESSAGE") {
-		const messageToUpdate = action.payload;
-		const messageIndex = state.findIndex(m => m.id === messageToUpdate.id);
+  if (action.type === "UPDATE_MESSAGE") {
+    const messageToUpdate = action.payload;
+    const messageIndex = state.findIndex((m) => m.id === messageToUpdate.id);
 
-		if (messageIndex !== -1) {
-			state[messageIndex] = messageToUpdate;
-		}
+    if (messageIndex !== -1) {
+      state[messageIndex] = messageToUpdate;
+    }
 
-		return [...state];
-	}
+    return [...state];
+  }
 
-	if (action.type === "RESET") {
-		return [];
-	}
+  if (action.type === "RESET") {
+    return [];
+  }
 };
 
 const MessagesList = ({ ticketId, isGroup }) => {
-	const classes = useStyles();
+  const classes = useStyles();
 
-	const [messagesList, dispatch] = useReducer(reducer, []);
-	const [pageNumber, setPageNumber] = useState(1);
-	const [hasMore, setHasMore] = useState(false);
-	const [loading, setLoading] = useState(false);
-	const lastMessageRef = useRef();
+  const [messagesList, dispatch] = useReducer(reducer, []);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const lastMessageRef = useRef();
 
-	const [selectedMessage, setSelectedMessage] = useState({});
-	const [anchorEl, setAnchorEl] = useState(null);
-	const messageOptionsMenuOpen = Boolean(anchorEl);
-	const currentTicketId = useRef(ticketId);
+  const [selectedMessage, setSelectedMessage] = useState({});
+  const [anchorEl, setAnchorEl] = useState(null);
+  const messageOptionsMenuOpen = Boolean(anchorEl);
+  const currentTicketId = useRef(ticketId);
 
-	useEffect(() => {
-		dispatch({ type: "RESET" });
-		setPageNumber(1);
+  useEffect(() => {
+    dispatch({ type: "RESET" });
+    setPageNumber(1);
 
-		currentTicketId.current = ticketId;
-	}, [ticketId]);
+    currentTicketId.current = ticketId;
+  }, [ticketId]);
 
-	useEffect(() => {
-		setLoading(true);
-		const delayDebounceFn = setTimeout(() => {
-			const fetchMessages = async () => {
-				try {
-					const { data } = await api.get("/messages/" + ticketId, {
-						params: { pageNumber },
-					});
+  useEffect(() => {
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      const fetchMessages = async () => {
+        try {
+          const { data } = await api.get("/messages/" + ticketId, {
+            params: { pageNumber },
+          });
 
-					if (currentTicketId.current === ticketId) {
-						dispatch({ type: "LOAD_MESSAGES", payload: data.messages });
-						setHasMore(data.hasMore);
-						setLoading(false);
-					}
+          if (currentTicketId.current === ticketId) {
+            dispatch({ type: "LOAD_MESSAGES", payload: data.messages });
+            setHasMore(data.hasMore);
+            setLoading(false);
+          }
 
-					if (pageNumber === 1 && data.messages.length > 1) {
-						scrollToBottom();
-					}
-				} catch (err) {
-					setLoading(false);
-					toastError(err);
-				}
-			};
-			fetchMessages();
-		}, 500);
-		return () => {
-			clearTimeout(delayDebounceFn);
-		};
-	}, [pageNumber, ticketId]);
+          if (pageNumber === 1 && data.messages.length > 1) {
+            scrollToBottom();
+          }
+        } catch (err) {
+          setLoading(false);
+          toastError(err);
+        }
+      };
+      fetchMessages();
+    }, 500);
+    return () => {
+      clearTimeout(delayDebounceFn);
+    };
+  }, [pageNumber, ticketId]);
 
-	useEffect(() => {
-		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+  useEffect(() => {
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("connect", () => socket.emit("joinChatBox", ticketId));
+    socket.on("connect", () => socket.emit("joinChatBox", ticketId));
 
-		socket.on("appMessage", data => {
-			if (data.action === "create") {
-				dispatch({ type: "ADD_MESSAGE", payload: data.message });
-				scrollToBottom();
-			}
+    socket.on("appMessage", (data) => {
+      if (data.action === "create") {
+        dispatch({ type: "ADD_MESSAGE", payload: data.message });
+        scrollToBottom();
+      }
 
-			if (data.action === "update") {
-				dispatch({ type: "UPDATE_MESSAGE", payload: data.message });
-			}
-		});
+      if (data.action === "update") {
+        dispatch({ type: "UPDATE_MESSAGE", payload: data.message });
+      }
+    });
 
-		return () => {
-			socket.disconnect();
-		};
-	}, [ticketId]);
+    return () => {
+      socket.disconnect();
+    };
+  }, [ticketId]);
 
-	const loadMore = () => {
-		setPageNumber(prevPageNumber => prevPageNumber + 1);
-	};
+  const loadMore = () => {
+    setPageNumber((prevPageNumber) => prevPageNumber + 1);
+  };
 
-	const scrollToBottom = () => {
-		if (lastMessageRef.current) {
-			lastMessageRef.current.scrollIntoView({});
-		}
-	};
+  const scrollToBottom = () => {
+    if (lastMessageRef.current) {
+      lastMessageRef.current.scrollIntoView({});
+    }
+  };
 
-	const handleScroll = e => {
-		if (!hasMore) return;
-		const { scrollTop } = e.currentTarget;
+  const handleScroll = (e) => {
+    if (!hasMore) return;
+    const { scrollTop } = e.currentTarget;
 
-		if (scrollTop === 0) {
-			document.getElementById("messagesList").scrollTop = 1;
-		}
+    if (scrollTop === 0) {
+      document.getElementById("messagesList").scrollTop = 1;
+    }
 
-		if (loading) {
-			return;
-		}
+    if (loading) {
+      return;
+    }
 
-		if (scrollTop < 50) {
-			loadMore();
-		}
-	};
+    if (scrollTop < 50) {
+      loadMore();
+    }
+  };
 
-	const handleOpenMessageOptionsMenu = (e, message) => {
-		setAnchorEl(e.currentTarget);
-		setSelectedMessage(message);
-	};
+  const handleOpenMessageOptionsMenu = (e, message) => {
+    setAnchorEl(e.currentTarget);
+    setSelectedMessage(message);
+  };
 
-	const handleCloseMessageOptionsMenu = e => {
-		setAnchorEl(null);
-	};
+  const handleCloseMessageOptionsMenu = (e) => {
+    setAnchorEl(null);
+  };
 
-	const checkMessageMedia = message => {
-		if (message.mediaType === "image") {
-			return <ModalImageCors imageUrl={message.mediaUrl} />;
-		}
-		if (message.mediaType === "audio") {
-			return (
-				<audio controls>
-					<source src={message.mediaUrl} type="audio/ogg"></source>
-				</audio>
-			);
-		}
+  const checkMessageMedia = (message) => {
+    if (message.mediaType === "image") {
+      return <ModalImageCors imageUrl={message.mediaUrl} />;
+    }
+    if (message.mediaType === "audio") {
+      return (
+        <audio controls>
+          <source src={message.mediaUrl} type="audio/ogg"></source>
+        </audio>
+      );
+    }
 
-		if (message.mediaType === "video") {
-			return (
-				<video
-					className={classes.messageMedia}
-					src={message.mediaUrl}
-					controls
-				/>
-			);
-		} else {
-			return (
-				<>
-					<div className={classes.downloadMedia}>
-						<Button
-							startIcon={<GetApp />}
-							color="primary"
-							variant="outlined"
-							target="_blank"
-							href={message.mediaUrl}
-						>
-							Download
-						</Button>
-					</div>
-					<Divider />
-				</>
-			);
-		}
-	};
+    if (message.mediaType === "video") {
+      return (
+        <video
+          className={classes.messageMedia}
+          src={message.mediaUrl}
+          controls
+        />
+      );
+    } else {
+      return (
+        <>
+          <div className={classes.downloadMedia}>
+            <Button
+              startIcon={<GetApp />}
+              color="primary"
+              variant="outlined"
+              target="_blank"
+              href={message.mediaUrl}
+            >
+              Download
+            </Button>
+          </div>
+          <Divider />
+        </>
+      );
+    }
+  };
 
-	const renderMessageAck = message => {
-		if (message.ack === 0) {
-			return <AccessTime fontSize="small" className={classes.ackIcons} />;
-		}
-		if (message.ack === 1) {
-			return <Done fontSize="small" className={classes.ackIcons} />;
-		}
-		if (message.ack === 2) {
-			return <DoneAll fontSize="small" className={classes.ackIcons} />;
-		}
-		if (message.ack === 3 || message.ack === 4) {
-			return <DoneAll fontSize="small" className={classes.ackDoneAllIcon} />;
-		}
-	};
+  const renderMessageAck = (message) => {
+    if (message.ack === 0) {
+      return <AccessTime fontSize="small" className={classes.ackIcons} />;
+    }
+    if (message.ack === 1) {
+      return <Done fontSize="small" className={classes.ackIcons} />;
+    }
+    if (message.ack === 2) {
+      return <DoneAll fontSize="small" className={classes.ackIcons} />;
+    }
+    if (message.ack === 3 || message.ack === 4) {
+      return <DoneAll fontSize="small" className={classes.ackDoneAllIcon} />;
+    }
+  };
 
-	const renderDailyTimestamps = (message, index) => {
-		if (index === 0) {
-			return (
-				<span
-					className={classes.dailyTimestamp}
-					key={`timestamp-${message.id}`}
-				>
-					<div className={classes.dailyTimestampText}>
-						{format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
-					</div>
-				</span>
-			);
-		}
-		if (index < messagesList.length - 1) {
-			let messageDay = parseISO(messagesList[index].createdAt);
-			let previousMessageDay = parseISO(messagesList[index - 1].createdAt);
+  const renderDailyTimestamps = (message, index) => {
+    if (index === 0) {
+      return (
+        <span
+          className={classes.dailyTimestamp}
+          key={`timestamp-${message.id}`}
+        >
+          <div className={classes.dailyTimestampText}>
+            {format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
+          </div>
+        </span>
+      );
+    }
+    if (index < messagesList.length - 1) {
+      let messageDay = parseISO(messagesList[index].createdAt);
+      let previousMessageDay = parseISO(messagesList[index - 1].createdAt);
 
-			if (!isSameDay(messageDay, previousMessageDay)) {
-				return (
-					<span
-						className={classes.dailyTimestamp}
-						key={`timestamp-${message.id}`}
-					>
-						<div className={classes.dailyTimestampText}>
-							{format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
-						</div>
-					</span>
-				);
-			}
-		}
-		if (index === messagesList.length - 1) {
-			return (
-				<div
-					key={`ref-${message.createdAt}`}
-					ref={lastMessageRef}
-					style={{ float: "left", clear: "both" }}
-				/>
-			);
-		}
-	};
+      if (!isSameDay(messageDay, previousMessageDay)) {
+        return (
+          <span
+            className={classes.dailyTimestamp}
+            key={`timestamp-${message.id}`}
+          >
+            <div className={classes.dailyTimestampText}>
+              {format(parseISO(messagesList[index].createdAt), "dd/MM/yyyy")}
+            </div>
+          </span>
+        );
+      }
+    }
+    if (index === messagesList.length - 1) {
+      return (
+        <div
+          key={`ref-${message.createdAt}`}
+          ref={lastMessageRef}
+          style={{ float: "left", clear: "both" }}
+        />
+      );
+    }
+  };
 
-	const renderMessageDivider = (message, index) => {
-		if (index < messagesList.length && index > 0) {
-			let messageUser = messagesList[index].fromMe;
-			let previousMessageUser = messagesList[index - 1].fromMe;
+  const renderMessageDivider = (message, index) => {
+    if (index < messagesList.length && index > 0) {
+      let messageUser = messagesList[index].fromMe;
+      let previousMessageUser = messagesList[index - 1].fromMe;
 
-			if (messageUser !== previousMessageUser) {
-				return (
-					<span style={{ marginTop: 16 }} key={`divider-${message.id}`}></span>
-				);
-			}
-		}
-	};
+      if (messageUser !== previousMessageUser) {
+        return (
+          <span style={{ marginTop: 16 }} key={`divider-${message.id}`}></span>
+        );
+      }
+    }
+  };
 
-	const renderQuotedMessage = message => {
-		return (
-			<div
-				className={clsx(classes.quotedContainerLeft, {
-					[classes.quotedContainerRight]: message.fromMe,
-				})}
-			>
-				<span
-					className={clsx(classes.quotedSideColorLeft, {
-						[classes.quotedSideColorRight]: message.quotedMsg?.fromMe,
-					})}
-				></span>
-				<div className={classes.quotedMsg}>
-					{!message.quotedMsg?.fromMe && (
-						<span className={classes.messageContactName}>
-							{message.quotedMsg?.contact?.name}
-						</span>
-					)}
-					{message.quotedMsg?.body}
-				</div>
-			</div>
-		);
-	};
+  const renderQuotedMessage = (message) => {
+    return (
+      <div
+        className={clsx(classes.quotedContainerLeft, {
+          [classes.quotedContainerRight]: message.fromMe,
+        })}
+      >
+        <span
+          className={clsx(classes.quotedSideColorLeft, {
+            [classes.quotedSideColorRight]: message.quotedMsg?.fromMe,
+          })}
+        ></span>
+        <div className={classes.quotedMsg}>
+          {!message.quotedMsg?.fromMe && (
+            <span className={classes.messageContactName}>
+              {message.quotedMsg?.contact?.name}
+            </span>
+          )}
+          {message.quotedMsg?.body}
+        </div>
+      </div>
+    );
+  };
 
-	const renderMessages = () => {
-		if (messagesList.length > 0) {
-			const viewMessagesList = messagesList.map((message, index) => {
-				if (!message.fromMe) {
-					return (
-						<React.Fragment key={message.id}>
-							{renderDailyTimestamps(message, index)}
-							{renderMessageDivider(message, index)}
-							<div className={classes.messageLeft}>
-								<IconButton
-									variant="contained"
-									size="small"
-									id="messageActionsButton"
-									disabled={message.isDeleted}
-									className={classes.messageActionsButton}
-									onClick={e => handleOpenMessageOptionsMenu(e, message)}
-								>
-									<ExpandMore />
-								</IconButton>
-								{isGroup && (
-									<span className={classes.messageContactName}>
-										{message.contact?.name}
-									</span>
-								)}
-								{message.mediaUrl && checkMessageMedia(message)}
-								<div className={classes.textContentItem}>
-									{message.quotedMsg && renderQuotedMessage(message)}
-									<MarkdownWrapper>{message.body}</MarkdownWrapper>
-									<span className={classes.timestamp}>
-										{format(parseISO(message.createdAt), "HH:mm")}
-									</span>
-								</div>
-							</div>
-						</React.Fragment>
-					);
-				} else {
-					return (
-						<React.Fragment key={message.id}>
-							{renderDailyTimestamps(message, index)}
-							{renderMessageDivider(message, index)}
-							<div className={classes.messageRight}>
-								<IconButton
-									variant="contained"
-									size="small"
-									id="messageActionsButton"
-									disabled={message.isDeleted}
-									className={classes.messageActionsButton}
-									onClick={e => handleOpenMessageOptionsMenu(e, message)}
-								>
-									<ExpandMore />
-								</IconButton>
-								{message.mediaUrl && checkMessageMedia(message)}
-								<div
-									className={clsx(classes.textContentItem, {
-										[classes.textContentItemDeleted]: message.isDeleted,
-									})}
-								>
-									{message.isDeleted && (
-										<Block
-											color="disabled"
-											fontSize="small"
-											className={classes.deletedIcon}
-										/>
-									)}
-									{message.quotedMsg && renderQuotedMessage(message)}
-									<MarkdownWrapper>{message.body}</MarkdownWrapper>
-									<span className={classes.timestamp}>
-										{format(parseISO(message.createdAt), "HH:mm")}
-										{renderMessageAck(message)}
-									</span>
-								</div>
-							</div>
-						</React.Fragment>
-					);
-				}
-			});
-			return viewMessagesList;
-		} else {
-			return <div>Say hello to your new contact!</div>;
-		}
-	};
+  const renderMessages = () => {
+    if (messagesList.length > 0) {
+      const viewMessagesList = messagesList.map((message, index) => {
+        if (!message.fromMe) {
+          return (
+            <React.Fragment key={message.id}>
+              {renderDailyTimestamps(message, index)}
+              {renderMessageDivider(message, index)}
+              <div className={classes.messageLeft}>
+                <IconButton
+                  variant="contained"
+                  size="small"
+                  id="messageActionsButton"
+                  disabled={message.isDeleted}
+                  className={classes.messageActionsButton}
+                  onClick={(e) => handleOpenMessageOptionsMenu(e, message)}
+                >
+                  <ExpandMore />
+                </IconButton>
+                {isGroup && (
+                  <span className={classes.messageContactName}>
+                    {message.contact?.name}
+                  </span>
+                )}
+                {message.mediaUrl && checkMessageMedia(message)}
+                <div className={classes.textContentItem}>
+                  {message.quotedMsg && renderQuotedMessage(message)}
+                  <MarkdownWrapper>{message.body}</MarkdownWrapper>
+                  <span className={classes.timestamp}>
+                    {format(parseISO(message.createdAt), "HH:mm")}
+                  </span>
+                </div>
+              </div>
+            </React.Fragment>
+          );
+        } else {
+          return (
+            <React.Fragment key={message.id}>
+              {renderDailyTimestamps(message, index)}
+              {renderMessageDivider(message, index)}
+              <div className={classes.messageRight}>
+                <IconButton
+                  variant="contained"
+                  size="small"
+                  id="messageActionsButton"
+                  disabled={message.isDeleted}
+                  className={classes.messageActionsButton}
+                  onClick={(e) => handleOpenMessageOptionsMenu(e, message)}
+                >
+                  <ExpandMore />
+                </IconButton>
+                {message.mediaUrl && checkMessageMedia(message)}
+                <div
+                  className={clsx(classes.textContentItem, {
+                    [classes.textContentItemDeleted]: message.isDeleted,
+                  })}
+                >
+                  {message.isDeleted && (
+                    <Block
+                      color="disabled"
+                      fontSize="small"
+                      className={classes.deletedIcon}
+                    />
+                  )}
+                  {message.quotedMsg && renderQuotedMessage(message)}
+                  <MarkdownWrapper>{message.body}</MarkdownWrapper>
+                  <span className={classes.timestamp}>
+                    {format(parseISO(message.createdAt), "HH:mm")}
+                    {renderMessageAck(message)}
+                  </span>
+                </div>
+              </div>
+            </React.Fragment>
+          );
+        }
+      });
+      return viewMessagesList;
+    } else {
+      return <div>Say hello to your new contact!</div>;
+    }
+  };
 
-	return (
-		<div className={classes.messagesListWrapper}>
-			<MessageOptionsMenu
-				message={selectedMessage}
-				anchorEl={anchorEl}
-				menuOpen={messageOptionsMenuOpen}
-				handleClose={handleCloseMessageOptionsMenu}
-			/>
-			<div
-				id="messagesList"
-				className={classes.messagesList}
-				onScroll={handleScroll}
-			>
-				{messagesList.length > 0 ? renderMessages() : []}
-			</div>
-			{loading && (
-				<div>
-					<CircularProgress className={classes.circleLoading} />
-				</div>
-			)}
-		</div>
-	);
+  return (
+    <div className={classes.messagesListWrapper}>
+      <MessageOptionsMenu
+        message={selectedMessage}
+        anchorEl={anchorEl}
+        menuOpen={messageOptionsMenuOpen}
+        handleClose={handleCloseMessageOptionsMenu}
+      />
+      <div
+        id="messagesList"
+        className={classes.messagesList}
+        onScroll={handleScroll}
+      >
+        {messagesList.length > 0 ? renderMessages() : []}
+      </div>
+      {loading && (
+        <div>
+          <CircularProgress className={classes.circleLoading} />
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default MessagesList;
diff --git a/frontend/src/components/QuickAnswersModal/index.js b/frontend/src/components/QuickAnswersModal/index.js
new file mode 100644
index 0000000..ba100c6
--- /dev/null
+++ b/frontend/src/components/QuickAnswersModal/index.js
@@ -0,0 +1,222 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import * as Yup from "yup";
+import { Formik, Form, Field } from "formik";
+import { toast } from "react-toastify";
+
+import {
+  makeStyles,
+  Button,
+  TextField,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  CircularProgress,
+} from "@material-ui/core";
+import { green } from "@material-ui/core/colors";
+import { i18n } from "../../translate/i18n";
+
+import api from "../../services/api";
+import toastError from "../../errors/toastError";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexWrap: "wrap",
+  },
+  textField: {
+    marginRight: theme.spacing(1),
+    width: "100%",
+  },
+
+  btnWrapper: {
+    position: "relative",
+  },
+
+  buttonProgress: {
+    color: green[500],
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    marginTop: -12,
+    marginLeft: -12,
+  },
+  textQuickAnswerContainer: {
+    width: "100%",
+  },
+}));
+
+const QuickAnswerSchema = Yup.object().shape({
+  shortcut: Yup.string()
+    .min(2, "Too Short!")
+    .max(15, "Too Long!")
+    .required("Required"),
+  message: Yup.string()
+    .min(8, "Too Short!")
+    .max(30000, "Too Long!")
+    .required("Required"),
+});
+
+const QuickAnswersModal = ({
+  open,
+  onClose,
+  quickAnswerId,
+  initialValues,
+  onSave,
+}) => {
+  const classes = useStyles();
+  const isMounted = useRef(true);
+
+  const initialState = {
+    shortcut: "",
+    message: "",
+  };
+
+  const [quickAnswer, setQuickAnswer] = useState(initialState);
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const fetchQuickAnswer = async () => {
+      if (initialValues) {
+        setQuickAnswer((prevState) => {
+          return { ...prevState, ...initialValues };
+        });
+      }
+
+      if (!quickAnswerId) return;
+
+      try {
+        const { data } = await api.get(`/quickAnswers/${quickAnswerId}`);
+        if (isMounted.current) {
+          setQuickAnswer(data);
+        }
+      } catch (err) {
+        toastError(err);
+      }
+    };
+
+    fetchQuickAnswer();
+  }, [quickAnswerId, open, initialValues]);
+
+  const handleClose = () => {
+    onClose();
+    setQuickAnswer(initialState);
+  };
+
+  const handleSaveQuickAnswer = async (values) => {
+    try {
+      if (quickAnswerId) {
+        await api.put(`/quickAnswers/${quickAnswerId}`, values);
+        handleClose();
+      } else {
+        const { data } = await api.post("/quickAnswers", values);
+        if (onSave) {
+          onSave(data);
+        }
+        handleClose();
+      }
+      toast.success(i18n.t("quickAnswersModal.success"));
+    } catch (err) {
+      toastError(err);
+    }
+  };
+
+  return (
+    <div className={classes.root}>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        maxWidth="sm"
+        fullWidth
+        scroll="paper"
+      >
+        <DialogTitle id="form-dialog-title">
+          {quickAnswerId
+            ? `${i18n.t("quickAnswersModal.title.edit")}`
+            : `${i18n.t("quickAnswersModal.title.add")}`}
+        </DialogTitle>
+        <Formik
+          initialValues={quickAnswer}
+          enableReinitialize={true}
+          validationSchema={QuickAnswerSchema}
+          onSubmit={(values, actions) => {
+            setTimeout(() => {
+              handleSaveQuickAnswer(values);
+              actions.setSubmitting(false);
+            }, 400);
+          }}
+        >
+          {({ values, errors, touched, isSubmitting }) => (
+            <Form>
+              <DialogContent dividers>
+                <div className={classes.textQuickAnswerContainer}>
+                  <Field
+                    as={TextField}
+                    label={i18n.t("quickAnswersModal.form.shortcut")}
+                    name="shortcut"
+                    autoFocus
+                    error={touched.shortcut && Boolean(errors.shortcut)}
+                    helperText={touched.shortcut && errors.shortcut}
+                    variant="outlined"
+                    margin="dense"
+                    className={classes.textField}
+                    fullWidth
+                  />
+                </div>
+                <div className={classes.textQuickAnswerContainer}>
+                  <Field
+                    as={TextField}
+                    label={i18n.t("quickAnswersModal.form.message")}
+                    name="message"
+                    error={touched.message && Boolean(errors.message)}
+                    helperText={touched.message && errors.message}
+                    variant="outlined"
+                    margin="dense"
+                    className={classes.textField}
+                    multiline
+                    rows={5}
+                    fullWidth
+                  />
+                </div>
+              </DialogContent>
+              <DialogActions>
+                <Button
+                  onClick={handleClose}
+                  color="secondary"
+                  disabled={isSubmitting}
+                  variant="outlined"
+                >
+                  {i18n.t("quickAnswersModal.buttons.cancel")}
+                </Button>
+                <Button
+                  type="submit"
+                  color="primary"
+                  disabled={isSubmitting}
+                  variant="contained"
+                  className={classes.btnWrapper}
+                >
+                  {quickAnswerId
+                    ? `${i18n.t("quickAnswersModal.buttons.okEdit")}`
+                    : `${i18n.t("quickAnswersModal.buttons.okAdd")}`}
+                  {isSubmitting && (
+                    <CircularProgress
+                      size={24}
+                      className={classes.buttonProgress}
+                    />
+                  )}
+                </Button>
+              </DialogActions>
+            </Form>
+          )}
+        </Formik>
+      </Dialog>
+    </div>
+  );
+};
+
+export default QuickAnswersModal;
diff --git a/frontend/src/components/Ticket/index.js b/frontend/src/components/Ticket/index.js
index c2cdd37..f5b041b 100644
--- a/frontend/src/components/Ticket/index.js
+++ b/frontend/src/components/Ticket/index.js
@@ -19,144 +19,167 @@ import toastError from "../../errors/toastError";
 
 const drawerWidth = 320;
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		display: "flex",
-		height: "100%",
-		position: "relative",
-		overflow: "hidden",
-	},
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    height: "100%",
+    position: "relative",
+    overflow: "hidden",
+  },
 
-	mainWrapper: {
-		flex: 1,
-		height: "100%",
-		display: "flex",
-		flexDirection: "column",
-		overflow: "hidden",
-		borderTopLeftRadius: 0,
-		borderBottomLeftRadius: 0,
-		borderLeft: "0",
-		marginRight: -drawerWidth,
-		transition: theme.transitions.create("margin", {
-			easing: theme.transitions.easing.sharp,
-			duration: theme.transitions.duration.leavingScreen,
-		}),
-	},
+  ticketInfo: {
+    maxWidth: "50%",
+    flexBasis: "50%",
+    [theme.breakpoints.down("sm")]: {
+      maxWidth: "80%",
+      flexBasis: "80%",
+    },
+  },
+  ticketActionButtons: {
+    maxWidth: "50%",
+    flexBasis: "50%",
+    display: "flex",
+    [theme.breakpoints.down("sm")]: {
+      maxWidth: "100%",
+      flexBasis: "100%",
+      marginBottom: "5px",
+    },
+  },
 
-	mainWrapperShift: {
-		borderTopRightRadius: 0,
-		borderBottomRightRadius: 0,
-		transition: theme.transitions.create("margin", {
-			easing: theme.transitions.easing.easeOut,
-			duration: theme.transitions.duration.enteringScreen,
-		}),
-		marginRight: 0,
-	},
+  mainWrapper: {
+    flex: 1,
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderLeft: "0",
+    marginRight: -drawerWidth,
+    transition: theme.transitions.create("margin", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+
+  mainWrapperShift: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    transition: theme.transitions.create("margin", {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginRight: 0,
+  },
 }));
 
 const Ticket = () => {
-	const { ticketId } = useParams();
-	const history = useHistory();
-	const classes = useStyles();
+  const { ticketId } = useParams();
+  const history = useHistory();
+  const classes = useStyles();
 
-	const [drawerOpen, setDrawerOpen] = useState(false);
-	const [loading, setLoading] = useState(true);
-	const [contact, setContact] = useState({});
-	const [ticket, setTicket] = useState({});
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [contact, setContact] = useState({});
+  const [ticket, setTicket] = useState({});
 
-	useEffect(() => {
-		setLoading(true);
-		const delayDebounceFn = setTimeout(() => {
-			const fetchTicket = async () => {
-				try {
-					const { data } = await api.get("/tickets/" + ticketId);
+  useEffect(() => {
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      const fetchTicket = async () => {
+        try {
+          const { data } = await api.get("/tickets/" + ticketId);
 
-					setContact(data.contact);
-					setTicket(data);
-					setLoading(false);
-				} catch (err) {
-					setLoading(false);
-					toastError(err);
-				}
-			};
-			fetchTicket();
-		}, 500);
-		return () => clearTimeout(delayDebounceFn);
-	}, [ticketId, history]);
+          setContact(data.contact);
+          setTicket(data);
+          setLoading(false);
+        } catch (err) {
+          setLoading(false);
+          toastError(err);
+        }
+      };
+      fetchTicket();
+    }, 500);
+    return () => clearTimeout(delayDebounceFn);
+  }, [ticketId, history]);
 
-	useEffect(() => {
-		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+  useEffect(() => {
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("connect", () => socket.emit("joinChatBox", ticketId));
+    socket.on("connect", () => socket.emit("joinChatBox", ticketId));
 
-		socket.on("ticket", data => {
-			if (data.action === "update") {
-				setTicket(data.ticket);
-			}
+    socket.on("ticket", (data) => {
+      if (data.action === "update") {
+        setTicket(data.ticket);
+      }
 
-			if (data.action === "delete") {
-				toast.success("Ticket deleted sucessfully.");
-				history.push("/tickets");
-			}
-		});
+      if (data.action === "delete") {
+        toast.success("Ticket deleted sucessfully.");
+        history.push("/tickets");
+      }
+    });
 
-		socket.on("contact", data => {
-			if (data.action === "update") {
-				setContact(prevState => {
-					if (prevState.id === data.contact?.id) {
-						return { ...prevState, ...data.contact };
-					}
-					return prevState;
-				});
-			}
-		});
+    socket.on("contact", (data) => {
+      if (data.action === "update") {
+        setContact((prevState) => {
+          if (prevState.id === data.contact?.id) {
+            return { ...prevState, ...data.contact };
+          }
+          return prevState;
+        });
+      }
+    });
 
-		return () => {
-			socket.disconnect();
-		};
-	}, [ticketId, history]);
+    return () => {
+      socket.disconnect();
+    };
+  }, [ticketId, history]);
 
-	const handleDrawerOpen = () => {
-		setDrawerOpen(true);
-	};
+  const handleDrawerOpen = () => {
+    setDrawerOpen(true);
+  };
 
-	const handleDrawerClose = () => {
-		setDrawerOpen(false);
-	};
+  const handleDrawerClose = () => {
+    setDrawerOpen(false);
+  };
 
-	return (
-		<div className={classes.root} id="drawer-container">
-			<Paper
-				variant="outlined"
-				elevation={0}
-				className={clsx(classes.mainWrapper, {
-					[classes.mainWrapperShift]: drawerOpen,
-				})}
-			>
-				<TicketHeader loading={loading}>
-					<TicketInfo
-						contact={contact}
-						ticket={ticket}
-						onClick={handleDrawerOpen}
-					/>
-					<TicketActionButtons ticket={ticket} />
-				</TicketHeader>
-				<ReplyMessageProvider>
-					<MessagesList
-						ticketId={ticketId}
-						isGroup={ticket.isGroup}
-					></MessagesList>
-					<MessageInput ticketStatus={ticket.status} />
-				</ReplyMessageProvider>
-			</Paper>
-			<ContactDrawer
-				open={drawerOpen}
-				handleDrawerClose={handleDrawerClose}
-				contact={contact}
-				loading={loading}
-			/>
-		</div>
-	);
+  return (
+    <div className={classes.root} id="drawer-container">
+      <Paper
+        variant="outlined"
+        elevation={0}
+        className={clsx(classes.mainWrapper, {
+          [classes.mainWrapperShift]: drawerOpen,
+        })}
+      >
+        <TicketHeader loading={loading}>
+          <div className={classes.ticketInfo}>
+            <TicketInfo
+              contact={contact}
+              ticket={ticket}
+              onClick={handleDrawerOpen}
+            />
+          </div>
+          <div className={classes.ticketActionButtons}>
+            <TicketActionButtons ticket={ticket} />
+          </div>
+        </TicketHeader>
+        <ReplyMessageProvider>
+          <MessagesList
+            ticketId={ticketId}
+            isGroup={ticket.isGroup}
+          ></MessagesList>
+          <MessageInput ticketStatus={ticket.status} />
+        </ReplyMessageProvider>
+      </Paper>
+      <ContactDrawer
+        open={drawerOpen}
+        handleDrawerClose={handleDrawerClose}
+        contact={contact}
+        loading={loading}
+      />
+    </div>
+  );
 };
 
 export default Ticket;
diff --git a/frontend/src/components/TicketHeader/index.js b/frontend/src/components/TicketHeader/index.js
index d05c296..453d52b 100644
--- a/frontend/src/components/TicketHeader/index.js
+++ b/frontend/src/components/TicketHeader/index.js
@@ -1,32 +1,44 @@
 import React from "react";
 
-import { Card } from "@material-ui/core";
+import { Card, Button } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import TicketHeaderSkeleton from "../TicketHeaderSkeleton";
+import ArrowBackIos from "@material-ui/icons/ArrowBackIos";
+import { useHistory } from "react-router-dom";
 
-const useStyles = makeStyles(theme => ({
-	ticketHeader: {
-		display: "flex",
-		backgroundColor: "#eee",
-		flex: "none",
-		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
-	},
+const useStyles = makeStyles((theme) => ({
+  ticketHeader: {
+    display: "flex",
+    backgroundColor: "#eee",
+    flex: "none",
+    borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+    [theme.breakpoints.down("sm")]: {
+      flexWrap: "wrap",
+    },
+  },
 }));
 
 const TicketHeader = ({ loading, children }) => {
-	const classes = useStyles();
+  const classes = useStyles();
+  const history = useHistory();
+  const handleBack = () => {
+    history.push("/tickets");
+  };
 
-	return (
-		<>
-			{loading ? (
-				<TicketHeaderSkeleton />
-			) : (
-				<Card square className={classes.ticketHeader}>
-					{children}
-				</Card>
-			)}
-		</>
-	);
+  return (
+    <>
+      {loading ? (
+        <TicketHeaderSkeleton />
+      ) : (
+        <Card square className={classes.ticketHeader}>
+          <Button color="primary" onClick={handleBack}>
+            <ArrowBackIos />
+          </Button>
+          {children}
+        </Card>
+      )}
+    </>
+  );
 };
 
 export default TicketHeader;
diff --git a/frontend/src/components/TicketsManager/index.js b/frontend/src/components/TicketsManager/index.js
index dbcf0af..53e0e7a 100644
--- a/frontend/src/components/TicketsManager/index.js
+++ b/frontend/src/components/TicketsManager/index.js
@@ -22,215 +22,215 @@ import { Can } from "../Can";
 import TicketsQueueSelect from "../TicketsQueueSelect";
 import { Button } from "@material-ui/core";
 
-const useStyles = makeStyles(theme => ({
-	ticketsWrapper: {
-		position: "relative",
-		display: "flex",
-		height: "100%",
-		flexDirection: "column",
-		overflow: "hidden",
-		borderTopRightRadius: 0,
-		borderBottomRightRadius: 0,
-	},
+const useStyles = makeStyles((theme) => ({
+  ticketsWrapper: {
+    position: "relative",
+    display: "flex",
+    height: "100%",
+    flexDirection: "column",
+    overflow: "hidden",
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
 
-	tabsHeader: {
-		flex: "none",
-		backgroundColor: "#eee",
-	},
+  tabsHeader: {
+    flex: "none",
+    backgroundColor: "#eee",
+  },
 
-	settingsIcon: {
-		alignSelf: "center",
-		marginLeft: "auto",
-		padding: 8,
-	},
+  settingsIcon: {
+    alignSelf: "center",
+    marginLeft: "auto",
+    padding: 8,
+  },
 
-	tab: {
-		minWidth: 120,
-		width: 120,
-	},
+  tab: {
+    minWidth: 120,
+    width: 120,
+  },
 
-	ticketOptionsBox: {
-		display: "flex",
-		justifyContent: "space-between",
-		alignItems: "center",
-		background: "#fafafa",
-		padding: theme.spacing(1),
-	},
+  ticketOptionsBox: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: "#fafafa",
+    padding: theme.spacing(1),
+  },
 
-	serachInputWrapper: {
-		flex: 1,
-		background: "#fff",
-		display: "flex",
-		borderRadius: 40,
-		padding: 4,
-		marginRight: theme.spacing(1),
-	},
+  serachInputWrapper: {
+    flex: 1,
+    background: "#fff",
+    display: "flex",
+    borderRadius: 40,
+    padding: 4,
+    marginRight: theme.spacing(1),
+  },
 
-	searchIcon: {
-		color: "grey",
-		marginLeft: 6,
-		marginRight: 6,
-		alignSelf: "center",
-	},
+  searchIcon: {
+    color: "grey",
+    marginLeft: 6,
+    marginRight: 6,
+    alignSelf: "center",
+  },
 
-	searchInput: {
-		flex: 1,
-		border: "none",
-		borderRadius: 30,
-	},
+  searchInput: {
+    flex: 1,
+    border: "none",
+    borderRadius: 30,
+  },
 }));
 
 const TicketsManager = () => {
-	const classes = useStyles();
+  const classes = useStyles();
 
-	const [searchParam, setSearchParam] = useState("");
-	const [tab, setTab] = useState("open");
-	const [newTicketModalOpen, setNewTicketModalOpen] = useState(false);
-	const [showAllTickets, setShowAllTickets] = useState(false);
-	const searchInputRef = useRef();
-	const { user } = useContext(AuthContext);
+  const [searchParam, setSearchParam] = useState("");
+  const [tab, setTab] = useState("open");
+  const [newTicketModalOpen, setNewTicketModalOpen] = useState(false);
+  const [showAllTickets, setShowAllTickets] = useState(false);
+  const searchInputRef = useRef();
+  const { user } = useContext(AuthContext);
 
-	const userQueueIds = user.queues.map(q => q.id);
-	const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []);
+  const userQueueIds = user.queues.map((q) => q.id);
+  const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []);
 
-	useEffect(() => {
-		if (tab === "search") {
-			searchInputRef.current.focus();
-		}
-	}, [tab]);
+  useEffect(() => {
+    if (tab === "search") {
+      searchInputRef.current.focus();
+    }
+  }, [tab]);
 
-	let searchTimeout;
+  let searchTimeout;
 
-	const handleSearch = e => {
-		const searchedTerm = e.target.value.toLowerCase();
+  const handleSearch = (e) => {
+    const searchedTerm = e.target.value.toLowerCase();
 
-		clearTimeout(searchTimeout);
+    clearTimeout(searchTimeout);
 
-		if (searchedTerm === "") {
-			setSearchParam(searchedTerm);
-			setTab("open");
-			return;
-		}
+    if (searchedTerm === "") {
+      setSearchParam(searchedTerm);
+      setTab("open");
+      return;
+    }
 
-		searchTimeout = setTimeout(() => {
-			setSearchParam(searchedTerm);
-		}, 500);
-	};
+    searchTimeout = setTimeout(() => {
+      setSearchParam(searchedTerm);
+    }, 500);
+  };
 
-	const handleChangeTab = (e, newValue) => {
-		setTab(newValue);
-	};
+  const handleChangeTab = (e, newValue) => {
+    setTab(newValue);
+  };
 
-	return (
-		<Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
-			<NewTicketModal
-				modalOpen={newTicketModalOpen}
-				onClose={e => setNewTicketModalOpen(false)}
-			/>
-			<Paper elevation={0} square className={classes.tabsHeader}>
-				<Tabs
-					value={tab}
-					onChange={handleChangeTab}
-					variant="fullWidth"
-					indicatorColor="primary"
-					textColor="primary"
-					aria-label="icon label tabs example"
-				>
-					<Tab
-						value={"open"}
-						icon={<MoveToInboxIcon />}
-						label={i18n.t("tickets.tabs.open.title")}
-						classes={{ root: classes.tab }}
-					/>
-					<Tab
-						value={"closed"}
-						icon={<CheckBoxIcon />}
-						label={i18n.t("tickets.tabs.closed.title")}
-						classes={{ root: classes.tab }}
-					/>
-					<Tab
-						value={"search"}
-						icon={<SearchIcon />}
-						label={i18n.t("tickets.tabs.search.title")}
-						classes={{ root: classes.tab }}
-					/>
-				</Tabs>
-			</Paper>
-			<Paper square elevation={0} className={classes.ticketOptionsBox}>
-				{tab === "search" ? (
-					<div className={classes.serachInputWrapper}>
-						<SearchIcon className={classes.searchIcon} />
-						<InputBase
-							className={classes.searchInput}
-							inputRef={searchInputRef}
-							placeholder={i18n.t("tickets.search.placeholder")}
-							type="search"
-							onChange={handleSearch}
-						/>
-					</div>
-				) : (
-					<>
-						<Button
-							variant="outlined"
-							color="primary"
-							onClick={() => setNewTicketModalOpen(true)}
-						>
-							{i18n.t("ticketsManager.buttons.newTicket")}
-						</Button>
-						<Can
-							role={user.profile}
-							perform="tickets-manager:showall"
-							yes={() => (
-								<FormControlLabel
-									label={i18n.t("tickets.buttons.showAll")}
-									labelPlacement="start"
-									control={
-										<Switch
-											size="small"
-											checked={showAllTickets}
-											onChange={() =>
-												setShowAllTickets(prevState => !prevState)
-											}
-											name="showAllTickets"
-											color="primary"
-										/>
-									}
-								/>
-							)}
-						/>
-					</>
-				)}
-				<TicketsQueueSelect
-					style={{ marginLeft: 6 }}
-					selectedQueueIds={selectedQueueIds}
-					userQueues={user?.queues}
-					onChange={values => setSelectedQueueIds(values)}
-				/>
-			</Paper>
-			<TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
-				<TicketsList
-					status="open"
-					showAll={showAllTickets}
-					selectedQueueIds={selectedQueueIds}
-				/>
-				<TicketsList status="pending" selectedQueueIds={selectedQueueIds} />
-			</TabPanel>
-			<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
-				<TicketsList
-					status="closed"
-					showAll={true}
-					selectedQueueIds={selectedQueueIds}
-				/>
-			</TabPanel>
-			<TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
-				<TicketsList
-					searchParam={searchParam}
-					showAll={true}
-					selectedQueueIds={selectedQueueIds}
-				/>
-			</TabPanel>
-		</Paper>
-	);
+  return (
+    <Paper elevation={0} variant="outlined" className={classes.ticketsWrapper}>
+      <NewTicketModal
+        modalOpen={newTicketModalOpen}
+        onClose={(e) => setNewTicketModalOpen(false)}
+      />
+      <Paper elevation={0} square className={classes.tabsHeader}>
+        <Tabs
+          value={tab}
+          onChange={handleChangeTab}
+          variant="fullWidth"
+          indicatorColor="primary"
+          textColor="primary"
+          aria-label="icon label tabs example"
+        >
+          <Tab
+            value={"open"}
+            icon={<MoveToInboxIcon />}
+            label={i18n.t("tickets.tabs.open.title")}
+            classes={{ root: classes.tab }}
+          />
+          <Tab
+            value={"closed"}
+            icon={<CheckBoxIcon />}
+            label={i18n.t("tickets.tabs.closed.title")}
+            classes={{ root: classes.tab }}
+          />
+          <Tab
+            value={"search"}
+            icon={<SearchIcon />}
+            label={i18n.t("tickets.tabs.search.title")}
+            classes={{ root: classes.tab }}
+          />
+        </Tabs>
+      </Paper>
+      <Paper square elevation={0} className={classes.ticketOptionsBox}>
+        {tab === "search" ? (
+          <div className={classes.serachInputWrapper}>
+            <SearchIcon className={classes.searchIcon} />
+            <InputBase
+              className={classes.searchInput}
+              inputRef={searchInputRef}
+              placeholder={i18n.t("tickets.search.placeholder")}
+              type="search"
+              onChange={handleSearch}
+            />
+          </div>
+        ) : (
+          <>
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={() => setNewTicketModalOpen(true)}
+            >
+              {i18n.t("ticketsManager.buttons.newTicket")}
+            </Button>
+            <Can
+              role={user.profile}
+              perform="tickets-manager:showall"
+              yes={() => (
+                <FormControlLabel
+                  label={i18n.t("tickets.buttons.showAll")}
+                  labelPlacement="start"
+                  control={
+                    <Switch
+                      size="small"
+                      checked={showAllTickets}
+                      onChange={() =>
+                        setShowAllTickets((prevState) => !prevState)
+                      }
+                      name="showAllTickets"
+                      color="primary"
+                    />
+                  }
+                />
+              )}
+            />
+          </>
+        )}
+        <TicketsQueueSelect
+          style={{ marginLeft: 6 }}
+          selectedQueueIds={selectedQueueIds}
+          userQueues={user?.queues}
+          onChange={(values) => setSelectedQueueIds(values)}
+        />
+      </Paper>
+      <TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
+        <TicketsList
+          status="open"
+          showAll={showAllTickets}
+          selectedQueueIds={selectedQueueIds}
+        />
+        <TicketsList status="pending" selectedQueueIds={selectedQueueIds} />
+      </TabPanel>
+      <TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
+        <TicketsList
+          status="closed"
+          showAll={true}
+          selectedQueueIds={selectedQueueIds}
+        />
+      </TabPanel>
+      <TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
+        <TicketsList
+          searchParam={searchParam}
+          showAll={true}
+          selectedQueueIds={selectedQueueIds}
+        />
+      </TabPanel>
+    </Paper>
+  );
 };
 
 export default TicketsManager;
diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js
index ebffadc..fe49700 100644
--- a/frontend/src/layout/MainListItems.js
+++ b/frontend/src/layout/MainListItems.js
@@ -14,6 +14,7 @@ import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
 import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
 import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
 import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
+import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
 
 import { i18n } from "../translate/i18n";
 import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
@@ -21,109 +22,115 @@ import { AuthContext } from "../context/Auth/AuthContext";
 import { Can } from "../components/Can";
 
 function ListItemLink(props) {
-	const { icon, primary, to, className } = props;
+  const { icon, primary, to, className } = props;
 
-	const renderLink = React.useMemo(
-		() =>
-			React.forwardRef((itemProps, ref) => (
-				<RouterLink to={to} ref={ref} {...itemProps} />
-			)),
-		[to]
-	);
+  const renderLink = React.useMemo(
+    () =>
+      React.forwardRef((itemProps, ref) => (
+        <RouterLink to={to} ref={ref} {...itemProps} />
+      )),
+    [to]
+  );
 
-	return (
-		<li>
-			<ListItem button component={renderLink} className={className}>
-				{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
-				<ListItemText primary={primary} />
-			</ListItem>
-		</li>
-	);
+  return (
+    <li>
+      <ListItem button component={renderLink} className={className}>
+        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+        <ListItemText primary={primary} />
+      </ListItem>
+    </li>
+  );
 }
 
-const MainListItems = () => {
-	const { whatsApps } = useContext(WhatsAppsContext);
-	const { user } = useContext(AuthContext);
-	const [connectionWarning, setConnectionWarning] = useState(false);
+const MainListItems = (props) => {
+  const { drawerClose } = props;
+  const { whatsApps } = useContext(WhatsAppsContext);
+  const { user } = useContext(AuthContext);
+  const [connectionWarning, setConnectionWarning] = useState(false);
 
-	useEffect(() => {
-		const delayDebounceFn = setTimeout(() => {
-			if (whatsApps.length > 0) {
-				const offlineWhats = whatsApps.filter(whats => {
-					return (
-						whats.status === "qrcode" ||
-						whats.status === "PAIRING" ||
-						whats.status === "DISCONNECTED" ||
-						whats.status === "TIMEOUT" ||
-						whats.status === "OPENING"
-					);
-				});
-				if (offlineWhats.length > 0) {
-					setConnectionWarning(true);
-				} else {
-					setConnectionWarning(false);
-				}
-			}
-		}, 2000);
-		return () => clearTimeout(delayDebounceFn);
-	}, [whatsApps]);
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(() => {
+      if (whatsApps.length > 0) {
+        const offlineWhats = whatsApps.filter((whats) => {
+          return (
+            whats.status === "qrcode" ||
+            whats.status === "PAIRING" ||
+            whats.status === "DISCONNECTED" ||
+            whats.status === "TIMEOUT" ||
+            whats.status === "OPENING"
+          );
+        });
+        if (offlineWhats.length > 0) {
+          setConnectionWarning(true);
+        } else {
+          setConnectionWarning(false);
+        }
+      }
+    }, 2000);
+    return () => clearTimeout(delayDebounceFn);
+  }, [whatsApps]);
 
-	return (
-		<div>
-			<ListItemLink
-				to="/"
-				primary="Dashboard"
-				icon={<DashboardOutlinedIcon />}
-			/>
-			<ListItemLink
-				to="/connections"
-				primary={i18n.t("mainDrawer.listItems.connections")}
-				icon={
-					<Badge badgeContent={connectionWarning ? "!" : 0} color="error">
-						<SyncAltIcon />
-					</Badge>
-				}
-			/>
-			<ListItemLink
-				to="/tickets"
-				primary={i18n.t("mainDrawer.listItems.tickets")}
-				icon={<WhatsAppIcon />}
-			/>
+  return (
+    <div onClick={drawerClose}>
+      <ListItemLink
+        to="/"
+        primary="Dashboard"
+        icon={<DashboardOutlinedIcon />}
+      />
+      <ListItemLink
+        to="/connections"
+        primary={i18n.t("mainDrawer.listItems.connections")}
+        icon={
+          <Badge badgeContent={connectionWarning ? "!" : 0} color="error">
+            <SyncAltIcon />
+          </Badge>
+        }
+      />
+      <ListItemLink
+        to="/tickets"
+        primary={i18n.t("mainDrawer.listItems.tickets")}
+        icon={<WhatsAppIcon />}
+      />
 
-			<ListItemLink
-				to="/contacts"
-				primary={i18n.t("mainDrawer.listItems.contacts")}
-				icon={<ContactPhoneOutlinedIcon />}
-			/>
-			<Can
-				role={user.profile}
-				perform="drawer-admin-items:view"
-				yes={() => (
-					<>
-						<Divider />
-						<ListSubheader inset>
-							{i18n.t("mainDrawer.listItems.administration")}
-						</ListSubheader>
-						<ListItemLink
-							to="/users"
-							primary={i18n.t("mainDrawer.listItems.users")}
-							icon={<PeopleAltOutlinedIcon />}
-						/>
-						<ListItemLink
-							to="/queues"
-							primary={i18n.t("mainDrawer.listItems.queues")}
-							icon={<AccountTreeOutlinedIcon />}
-						/>
-						<ListItemLink
-							to="/settings"
-							primary={i18n.t("mainDrawer.listItems.settings")}
-							icon={<SettingsOutlinedIcon />}
-						/>
-					</>
-				)}
-			/>
-		</div>
-	);
+      <ListItemLink
+        to="/contacts"
+        primary={i18n.t("mainDrawer.listItems.contacts")}
+        icon={<ContactPhoneOutlinedIcon />}
+      />
+      <ListItemLink
+        to="/quickAnswers"
+        primary={i18n.t("mainDrawer.listItems.quickAnswers")}
+        icon={<QuestionAnswerOutlinedIcon />}
+      />
+      <Can
+        role={user.profile}
+        perform="drawer-admin-items:view"
+        yes={() => (
+          <>
+            <Divider />
+            <ListSubheader inset>
+              {i18n.t("mainDrawer.listItems.administration")}
+            </ListSubheader>
+            <ListItemLink
+              to="/users"
+              primary={i18n.t("mainDrawer.listItems.users")}
+              icon={<PeopleAltOutlinedIcon />}
+            />
+            <ListItemLink
+              to="/queues"
+              primary={i18n.t("mainDrawer.listItems.queues")}
+              icon={<AccountTreeOutlinedIcon />}
+            />
+            <ListItemLink
+              to="/settings"
+              primary={i18n.t("mainDrawer.listItems.settings")}
+              icon={<SettingsOutlinedIcon />}
+            />
+          </>
+        )}
+      />
+    </div>
+  );
 };
 
 export default MainListItems;
diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js
index 76074a2..589b133 100644
--- a/frontend/src/layout/index.js
+++ b/frontend/src/layout/index.js
@@ -1,17 +1,17 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import clsx from "clsx";
 
 import {
-	makeStyles,
-	Drawer,
-	AppBar,
-	Toolbar,
-	List,
-	Typography,
-	Divider,
-	MenuItem,
-	IconButton,
-	Menu,
+  makeStyles,
+  Drawer,
+  AppBar,
+  Toolbar,
+  List,
+  Typography,
+  Divider,
+  MenuItem,
+  IconButton,
+  Menu,
 } from "@material-ui/core";
 
 import MenuIcon from "@material-ui/icons/Menu";
@@ -24,221 +24,245 @@ import UserModal from "../components/UserModal";
 import { AuthContext } from "../context/Auth/AuthContext";
 import BackdropLoading from "../components/BackdropLoading";
 import { i18n } from "../translate/i18n";
-import { useLocalStorage } from "../hooks/useLocalStorage";
 
 const drawerWidth = 240;
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		display: "flex",
-		height: "100vh",
-	},
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    height: "100vh",
+    [theme.breakpoints.down("sm")]: {
+      height: "calc(100vh - 56px)",
+    },
+  },
 
-	toolbar: {
-		paddingRight: 24, // keep right padding when drawer closed
-	},
-	toolbarIcon: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "flex-end",
-		padding: "0 8px",
-		minHeight: "48px",
-	},
-	appBar: {
-		zIndex: theme.zIndex.drawer + 1,
-		transition: theme.transitions.create(["width", "margin"], {
-			easing: theme.transitions.easing.sharp,
-			duration: theme.transitions.duration.leavingScreen,
-		}),
-	},
-	appBarShift: {
-		marginLeft: drawerWidth,
-		width: `calc(100% - ${drawerWidth}px)`,
-		transition: theme.transitions.create(["width", "margin"], {
-			easing: theme.transitions.easing.sharp,
-			duration: theme.transitions.duration.enteringScreen,
-		}),
-	},
-	menuButton: {
-		marginRight: 36,
-	},
-	menuButtonHidden: {
-		display: "none",
-	},
-	title: {
-		flexGrow: 1,
-	},
-	drawerPaper: {
-		position: "relative",
-		whiteSpace: "nowrap",
-		width: drawerWidth,
-		transition: theme.transitions.create("width", {
-			easing: theme.transitions.easing.sharp,
-			duration: theme.transitions.duration.enteringScreen,
-		}),
-	},
-	drawerPaperClose: {
-		overflowX: "hidden",
-		transition: theme.transitions.create("width", {
-			easing: theme.transitions.easing.sharp,
-			duration: theme.transitions.duration.leavingScreen,
-		}),
-		width: theme.spacing(7),
-		[theme.breakpoints.up("sm")]: {
-			width: theme.spacing(9),
-		},
-	},
-	appBarSpacer: {
-		minHeight: "48px",
-	},
-	content: {
-		flex: 1,
-		overflow: "auto",
-	},
-	container: {
-		paddingTop: theme.spacing(4),
-		paddingBottom: theme.spacing(4),
-	},
-	paper: {
-		padding: theme.spacing(2),
-		display: "flex",
-		overflow: "auto",
-		flexDirection: "column",
-	},
+  toolbar: {
+    paddingRight: 24, // keep right padding when drawer closed
+  },
+  toolbarIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: "0 8px",
+    minHeight: "48px",
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  menuButton: {
+    marginRight: 36,
+  },
+  menuButtonHidden: {
+    display: "none",
+  },
+  title: {
+    flexGrow: 1,
+  },
+  drawerPaper: {
+    position: "relative",
+    whiteSpace: "nowrap",
+    width: drawerWidth,
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerPaperClose: {
+    overflowX: "hidden",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: theme.spacing(7),
+    [theme.breakpoints.up("sm")]: {
+      width: theme.spacing(9),
+    },
+  },
+  appBarSpacer: {
+    minHeight: "48px",
+  },
+  content: {
+    flex: 1,
+    overflow: "auto",
+  },
+  container: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+  },
+  paper: {
+    padding: theme.spacing(2),
+    display: "flex",
+    overflow: "auto",
+    flexDirection: "column",
+  },
 }));
 
 const LoggedInLayout = ({ children }) => {
-	const classes = useStyles();
-	const [userModalOpen, setUserModalOpen] = useState(false);
-	const [anchorEl, setAnchorEl] = useState(null);
-	const [menuOpen, setMenuOpen] = useState(false);
-	const { handleLogout, loading } = useContext(AuthContext);
-	const [drawerOpen, setDrawerOpen] = useLocalStorage("drawerOpen", true);
-	const { user } = useContext(AuthContext);
+  const classes = useStyles();
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const { handleLogout, loading } = useContext(AuthContext);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerVariant, setDrawerVariant] = useState("permanent");
+  const { user } = useContext(AuthContext);
 
-	const handleMenu = event => {
-		setAnchorEl(event.currentTarget);
-		setMenuOpen(true);
-	};
+  useEffect(() => {
+    if (document.body.offsetWidth > 600) {
+      setDrawerOpen(true);
+    }
+  }, []);
 
-	const handleCloseMenu = () => {
-		setAnchorEl(null);
-		setMenuOpen(false);
-	};
+  useEffect(() => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerVariant("temporary");
+    } else {
+      setDrawerVariant("permanent");
+    }
+  }, [drawerOpen]);
 
-	const handleOpenUserModal = () => {
-		setUserModalOpen(true);
-		handleCloseMenu();
-	};
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+    setMenuOpen(true);
+  };
 
-	const handleClickLogout = () => {
-		handleCloseMenu();
-		handleLogout();
-	};
+  const handleCloseMenu = () => {
+    setAnchorEl(null);
+    setMenuOpen(false);
+  };
 
-	if (loading) {
-		return <BackdropLoading />;
-	}
+  const handleOpenUserModal = () => {
+    setUserModalOpen(true);
+    handleCloseMenu();
+  };
 
-	return (
-		<div className={classes.root}>
-			<Drawer
-				variant="permanent"
-				classes={{
-					paper: clsx(
-						classes.drawerPaper,
-						!drawerOpen && classes.drawerPaperClose
-					),
-				}}
-				open={drawerOpen}
-			>
-				<div className={classes.toolbarIcon}>
-					<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
-						<ChevronLeftIcon />
-					</IconButton>
-				</div>
-				<Divider />
-				<List>
-					<MainListItems />
-				</List>
-				<Divider />
-			</Drawer>
-			<UserModal
-				open={userModalOpen}
-				onClose={() => setUserModalOpen(false)}
-				userId={user?.id}
-			/>
-			<AppBar
-				position="absolute"
-				className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
-				color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
-			>
-				<Toolbar variant="dense" className={classes.toolbar}>
-					<IconButton
-						edge="start"
-						color="inherit"
-						aria-label="open drawer"
-						onClick={() => setDrawerOpen(!drawerOpen)}
-						className={clsx(
-							classes.menuButton,
-							drawerOpen && classes.menuButtonHidden
-						)}
-					>
-						<MenuIcon />
-					</IconButton>
-					<Typography
-						component="h1"
-						variant="h6"
-						color="inherit"
-						noWrap
-						className={classes.title}
-					>
-						WhaTicket
-					</Typography>
-					{user.id && <NotificationsPopOver />}
+  const handleClickLogout = () => {
+    handleCloseMenu();
+    handleLogout();
+  };
 
-					<div>
-						<IconButton
-							aria-label="account of current user"
-							aria-controls="menu-appbar"
-							aria-haspopup="true"
-							onClick={handleMenu}
-							color="inherit"
-						>
-							<AccountCircle />
-						</IconButton>
-						<Menu
-							id="menu-appbar"
-							anchorEl={anchorEl}
-							getContentAnchorEl={null}
-							anchorOrigin={{
-								vertical: "bottom",
-								horizontal: "right",
-							}}
-							transformOrigin={{
-								vertical: "top",
-								horizontal: "right",
-							}}
-							open={menuOpen}
-							onClose={handleCloseMenu}
-						>
-							<MenuItem onClick={handleOpenUserModal}>
-								{i18n.t("mainDrawer.appBar.user.profile")}
-							</MenuItem>
-							<MenuItem onClick={handleClickLogout}>
-								{i18n.t("mainDrawer.appBar.user.logout")}
-							</MenuItem>
-						</Menu>
-					</div>
-				</Toolbar>
-			</AppBar>
-			<main className={classes.content}>
-				<div className={classes.appBarSpacer} />
+  const drawerClose = () => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerOpen(false);
+    }
+  };
 
-				{children ? children : null}
-			</main>
-		</div>
-	);
+  if (loading) {
+    return <BackdropLoading />;
+  }
+
+  return (
+    <div className={classes.root}>
+      <Drawer
+        variant={drawerVariant}
+        className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
+        classes={{
+          paper: clsx(
+            classes.drawerPaper,
+            !drawerOpen && classes.drawerPaperClose
+          ),
+        }}
+        open={drawerOpen}
+      >
+        <div className={classes.toolbarIcon}>
+          <IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
+            <ChevronLeftIcon />
+          </IconButton>
+        </div>
+        <Divider />
+        <List>
+          <MainListItems drawerClose={drawerClose} />
+        </List>
+        <Divider />
+      </Drawer>
+      <UserModal
+        open={userModalOpen}
+        onClose={() => setUserModalOpen(false)}
+        userId={user?.id}
+      />
+      <AppBar
+        position="absolute"
+        className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
+        color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
+      >
+        <Toolbar variant="dense" className={classes.toolbar}>
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="open drawer"
+            onClick={() => setDrawerOpen(!drawerOpen)}
+            className={clsx(
+              classes.menuButton,
+              drawerOpen && classes.menuButtonHidden
+            )}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography
+            component="h1"
+            variant="h6"
+            color="inherit"
+            noWrap
+            className={classes.title}
+          >
+            WhaTicket
+          </Typography>
+          {user.id && <NotificationsPopOver />}
+
+          <div>
+            <IconButton
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleMenu}
+              color="inherit"
+            >
+              <AccountCircle />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              getContentAnchorEl={null}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "right",
+              }}
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              open={menuOpen}
+              onClose={handleCloseMenu}
+            >
+              <MenuItem onClick={handleOpenUserModal}>
+                {i18n.t("mainDrawer.appBar.user.profile")}
+              </MenuItem>
+              <MenuItem onClick={handleClickLogout}>
+                {i18n.t("mainDrawer.appBar.user.logout")}
+              </MenuItem>
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <main className={classes.content}>
+        <div className={classes.appBarSpacer} />
+
+        {children ? children : null}
+      </main>
+    </div>
+  );
 };
 
 export default LoggedInLayout;
diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
index e516228..1261cb5 100644
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -36,314 +36,314 @@ import { AuthContext } from "../../context/Auth/AuthContext";
 import { Can } from "../../components/Can";
 
 const reducer = (state, action) => {
-	if (action.type === "LOAD_CONTACTS") {
-		const contacts = action.payload;
-		const newContacts = [];
+  if (action.type === "LOAD_CONTACTS") {
+    const contacts = action.payload;
+    const newContacts = [];
 
-		contacts.forEach(contact => {
-			const contactIndex = state.findIndex(c => c.id === contact.id);
-			if (contactIndex !== -1) {
-				state[contactIndex] = contact;
-			} else {
-				newContacts.push(contact);
-			}
-		});
+    contacts.forEach((contact) => {
+      const contactIndex = state.findIndex((c) => c.id === contact.id);
+      if (contactIndex !== -1) {
+        state[contactIndex] = contact;
+      } else {
+        newContacts.push(contact);
+      }
+    });
 
-		return [...state, ...newContacts];
-	}
+    return [...state, ...newContacts];
+  }
 
-	if (action.type === "UPDATE_CONTACTS") {
-		const contact = action.payload;
-		const contactIndex = state.findIndex(c => c.id === contact.id);
+  if (action.type === "UPDATE_CONTACTS") {
+    const contact = action.payload;
+    const contactIndex = state.findIndex((c) => c.id === contact.id);
 
-		if (contactIndex !== -1) {
-			state[contactIndex] = contact;
-			return [...state];
-		} else {
-			return [contact, ...state];
-		}
-	}
+    if (contactIndex !== -1) {
+      state[contactIndex] = contact;
+      return [...state];
+    } else {
+      return [contact, ...state];
+    }
+  }
 
-	if (action.type === "DELETE_CONTACT") {
-		const contactId = action.payload;
+  if (action.type === "DELETE_CONTACT") {
+    const contactId = action.payload;
 
-		const contactIndex = state.findIndex(c => c.id === contactId);
-		if (contactIndex !== -1) {
-			state.splice(contactIndex, 1);
-		}
-		return [...state];
-	}
+    const contactIndex = state.findIndex((c) => c.id === contactId);
+    if (contactIndex !== -1) {
+      state.splice(contactIndex, 1);
+    }
+    return [...state];
+  }
 
-	if (action.type === "RESET") {
-		return [];
-	}
+  if (action.type === "RESET") {
+    return [];
+  }
 };
 
-const useStyles = makeStyles(theme => ({
-	mainPaper: {
-		flex: 1,
-		padding: theme.spacing(1),
-		overflowY: "scroll",
-		...theme.scrollbarStyles,
-	},
+const useStyles = makeStyles((theme) => ({
+  mainPaper: {
+    flex: 1,
+    padding: theme.spacing(1),
+    overflowY: "scroll",
+    ...theme.scrollbarStyles,
+  },
 }));
 
 const Contacts = () => {
-	const classes = useStyles();
-	const history = useHistory();
+  const classes = useStyles();
+  const history = useHistory();
 
-	const { user } = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
 
-	const [loading, setLoading] = useState(false);
-	const [pageNumber, setPageNumber] = useState(1);
-	const [searchParam, setSearchParam] = useState("");
-	const [contacts, dispatch] = useReducer(reducer, []);
-	const [selectedContactId, setSelectedContactId] = useState(null);
-	const [contactModalOpen, setContactModalOpen] = useState(false);
-	const [deletingContact, setDeletingContact] = useState(null);
-	const [confirmOpen, setConfirmOpen] = useState(false);
-	const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [searchParam, setSearchParam] = useState("");
+  const [contacts, dispatch] = useReducer(reducer, []);
+  const [selectedContactId, setSelectedContactId] = useState(null);
+  const [contactModalOpen, setContactModalOpen] = useState(false);
+  const [deletingContact, setDeletingContact] = useState(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
 
-	useEffect(() => {
-		dispatch({ type: "RESET" });
-		setPageNumber(1);
-	}, [searchParam]);
+  useEffect(() => {
+    dispatch({ type: "RESET" });
+    setPageNumber(1);
+  }, [searchParam]);
 
-	useEffect(() => {
-		setLoading(true);
-		const delayDebounceFn = setTimeout(() => {
-			const fetchContacts = async () => {
-				try {
-					const { data } = await api.get("/contacts/", {
-						params: { searchParam, pageNumber },
-					});
-					dispatch({ type: "LOAD_CONTACTS", payload: data.contacts });
-					setHasMore(data.hasMore);
-					setLoading(false);
-				} catch (err) {
-					toastError(err);
-				}
-			};
-			fetchContacts();
-		}, 500);
-		return () => clearTimeout(delayDebounceFn);
-	}, [searchParam, pageNumber]);
+  useEffect(() => {
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      const fetchContacts = async () => {
+        try {
+          const { data } = await api.get("/contacts/", {
+            params: { searchParam, pageNumber },
+          });
+          dispatch({ type: "LOAD_CONTACTS", payload: data.contacts });
+          setHasMore(data.hasMore);
+          setLoading(false);
+        } catch (err) {
+          toastError(err);
+        }
+      };
+      fetchContacts();
+    }, 500);
+    return () => clearTimeout(delayDebounceFn);
+  }, [searchParam, pageNumber]);
 
-	useEffect(() => {
-		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+  useEffect(() => {
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("contact", data => {
-			if (data.action === "update" || data.action === "create") {
-				dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
-			}
+    socket.on("contact", (data) => {
+      if (data.action === "update" || data.action === "create") {
+        dispatch({ type: "UPDATE_CONTACTS", payload: data.contact });
+      }
 
-			if (data.action === "delete") {
-				dispatch({ type: "DELETE_CONTACT", payload: +data.contactId });
-			}
-		});
+      if (data.action === "delete") {
+        dispatch({ type: "DELETE_CONTACT", payload: +data.contactId });
+      }
+    });
 
-		return () => {
-			socket.disconnect();
-		};
-	}, []);
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
 
-	const handleSearch = event => {
-		setSearchParam(event.target.value.toLowerCase());
-	};
+  const handleSearch = (event) => {
+    setSearchParam(event.target.value.toLowerCase());
+  };
 
-	const handleOpenContactModal = () => {
-		setSelectedContactId(null);
-		setContactModalOpen(true);
-	};
+  const handleOpenContactModal = () => {
+    setSelectedContactId(null);
+    setContactModalOpen(true);
+  };
 
-	const handleCloseContactModal = () => {
-		setSelectedContactId(null);
-		setContactModalOpen(false);
-	};
+  const handleCloseContactModal = () => {
+    setSelectedContactId(null);
+    setContactModalOpen(false);
+  };
 
-	const handleSaveTicket = async contactId => {
-		if (!contactId) return;
-		setLoading(true);
-		try {
-			const { data: ticket } = await api.post("/tickets", {
-				contactId: contactId,
-				userId: user?.id,
-				status: "open",
-			});
-			history.push(`/tickets/${ticket.id}`);
-		} catch (err) {
-			toastError(err);
-		}
-		setLoading(false);
-	};
+  const handleSaveTicket = async (contactId) => {
+    if (!contactId) return;
+    setLoading(true);
+    try {
+      const { data: ticket } = await api.post("/tickets", {
+        contactId: contactId,
+        userId: user?.id,
+        status: "open",
+      });
+      history.push(`/tickets/${ticket.id}`);
+    } catch (err) {
+      toastError(err);
+    }
+    setLoading(false);
+  };
 
-	const hadleEditContact = contactId => {
-		setSelectedContactId(contactId);
-		setContactModalOpen(true);
-	};
+  const hadleEditContact = (contactId) => {
+    setSelectedContactId(contactId);
+    setContactModalOpen(true);
+  };
 
-	const handleDeleteContact = async contactId => {
-		try {
-			await api.delete(`/contacts/${contactId}`);
-			toast.success(i18n.t("contacts.toasts.deleted"));
-		} catch (err) {
-			toastError(err);
-		}
-		setDeletingContact(null);
-		setSearchParam("");
-		setPageNumber(1);
-	};
+  const handleDeleteContact = async (contactId) => {
+    try {
+      await api.delete(`/contacts/${contactId}`);
+      toast.success(i18n.t("contacts.toasts.deleted"));
+    } catch (err) {
+      toastError(err);
+    }
+    setDeletingContact(null);
+    setSearchParam("");
+    setPageNumber(1);
+  };
 
-	const handleimportContact = async () => {
-		try {
-			await api.post("/contacts/import");
-			history.go(0);
-		} catch (err) {
-			toastError(err);
-		}
-	};
+  const handleimportContact = async () => {
+    try {
+      await api.post("/contacts/import");
+      history.go(0);
+    } catch (err) {
+      toastError(err);
+    }
+  };
 
-	const loadMore = () => {
-		setPageNumber(prevState => prevState + 1);
-	};
+  const loadMore = () => {
+    setPageNumber((prevState) => prevState + 1);
+  };
 
-	const handleScroll = e => {
-		if (!hasMore || loading) return;
-		const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-		if (scrollHeight - (scrollTop + 100) < clientHeight) {
-			loadMore();
-		}
-	};
+  const handleScroll = (e) => {
+    if (!hasMore || loading) return;
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollHeight - (scrollTop + 100) < clientHeight) {
+      loadMore();
+    }
+  };
 
-	return (
-		<MainContainer className={classes.mainContainer}>
-			<ContactModal
-				open={contactModalOpen}
-				onClose={handleCloseContactModal}
-				aria-labelledby="form-dialog-title"
-				contactId={selectedContactId}
-			></ContactModal>
-			<ConfirmationModal
-				title={
-					deletingContact
-						? `${i18n.t("contacts.confirmationModal.deleteTitle")} ${
-								deletingContact.name
-						  }?`
-						: `${i18n.t("contacts.confirmationModal.importTitlte")}`
-				}
-				open={confirmOpen}
-				onClose={setConfirmOpen}
-				onConfirm={e =>
-					deletingContact
-						? handleDeleteContact(deletingContact.id)
-						: handleimportContact()
-				}
-			>
-				{deletingContact
-					? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
-					: `${i18n.t("contacts.confirmationModal.importMessage")}`}
-			</ConfirmationModal>
-			<MainHeader>
-				<Title>{i18n.t("contacts.title")}</Title>
-				<MainHeaderButtonsWrapper>
-					<TextField
-						placeholder={i18n.t("contacts.searchPlaceholder")}
-						type="search"
-						value={searchParam}
-						onChange={handleSearch}
-						InputProps={{
-							startAdornment: (
-								<InputAdornment position="start">
-									<SearchIcon style={{ color: "gray" }} />
-								</InputAdornment>
-							),
-						}}
-					/>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={e => setConfirmOpen(true)}
-					>
-						{i18n.t("contacts.buttons.import")}
-					</Button>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={handleOpenContactModal}
-					>
-						{i18n.t("contacts.buttons.add")}
-					</Button>
-				</MainHeaderButtonsWrapper>
-			</MainHeader>
-			<Paper
-				className={classes.mainPaper}
-				variant="outlined"
-				onScroll={handleScroll}
-			>
-				<Table size="small">
-					<TableHead>
-						<TableRow>
-							<TableCell padding="checkbox" />
-							<TableCell>{i18n.t("contacts.table.name")}</TableCell>
-							<TableCell align="center">
-								{i18n.t("contacts.table.whatsapp")}
-							</TableCell>
-							<TableCell align="center">
-								{i18n.t("contacts.table.email")}
-							</TableCell>
-							<TableCell align="center">
-								{i18n.t("contacts.table.actions")}
-							</TableCell>
-						</TableRow>
-					</TableHead>
-					<TableBody>
-						<>
-							{contacts.map(contact => (
-								<TableRow key={contact.id}>
-									<TableCell style={{ paddingRight: 0 }}>
-										{<Avatar src={contact.profilePicUrl} />}
-									</TableCell>
-									<TableCell>{contact.name}</TableCell>
-									<TableCell align="center">{contact.number}</TableCell>
-									<TableCell align="center">{contact.email}</TableCell>
-									<TableCell align="center">
-										<IconButton
-											size="small"
-											onClick={() => handleSaveTicket(contact.id)}
-										>
-											<WhatsAppIcon />
-										</IconButton>
-										<IconButton
-											size="small"
-											onClick={() => hadleEditContact(contact.id)}
-										>
-											<EditIcon />
-										</IconButton>
-										<Can
-											role={user.profile}
-											perform="contacts-page:deleteContact"
-											yes={() => (
-												<IconButton
-													size="small"
-													onClick={e => {
-														setConfirmOpen(true);
-														setDeletingContact(contact);
-													}}
-												>
-													<DeleteOutlineIcon />
-												</IconButton>
-											)}
-										/>
-									</TableCell>
-								</TableRow>
-							))}
-							{loading && <TableRowSkeleton avatar columns={3} />}
-						</>
-					</TableBody>
-				</Table>
-			</Paper>
-		</MainContainer>
-	);
+  return (
+    <MainContainer className={classes.mainContainer}>
+      <ContactModal
+        open={contactModalOpen}
+        onClose={handleCloseContactModal}
+        aria-labelledby="form-dialog-title"
+        contactId={selectedContactId}
+      ></ContactModal>
+      <ConfirmationModal
+        title={
+          deletingContact
+            ? `${i18n.t("contacts.confirmationModal.deleteTitle")} ${
+                deletingContact.name
+              }?`
+            : `${i18n.t("contacts.confirmationModal.importTitlte")}`
+        }
+        open={confirmOpen}
+        onClose={setConfirmOpen}
+        onConfirm={(e) =>
+          deletingContact
+            ? handleDeleteContact(deletingContact.id)
+            : handleimportContact()
+        }
+      >
+        {deletingContact
+          ? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
+          : `${i18n.t("contacts.confirmationModal.importMessage")}`}
+      </ConfirmationModal>
+      <MainHeader>
+        <Title>{i18n.t("contacts.title")}</Title>
+        <MainHeaderButtonsWrapper>
+          <TextField
+            placeholder={i18n.t("contacts.searchPlaceholder")}
+            type="search"
+            value={searchParam}
+            onChange={handleSearch}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon style={{ color: "gray" }} />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={(e) => setConfirmOpen(true)}
+          >
+            {i18n.t("contacts.buttons.import")}
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleOpenContactModal}
+          >
+            {i18n.t("contacts.buttons.add")}
+          </Button>
+        </MainHeaderButtonsWrapper>
+      </MainHeader>
+      <Paper
+        className={classes.mainPaper}
+        variant="outlined"
+        onScroll={handleScroll}
+      >
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell padding="checkbox" />
+              <TableCell>{i18n.t("contacts.table.name")}</TableCell>
+              <TableCell align="center">
+                {i18n.t("contacts.table.whatsapp")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("contacts.table.email")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("contacts.table.actions")}
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <>
+              {contacts.map((contact) => (
+                <TableRow key={contact.id}>
+                  <TableCell style={{ paddingRight: 0 }}>
+                    {<Avatar src={contact.profilePicUrl} />}
+                  </TableCell>
+                  <TableCell>{contact.name}</TableCell>
+                  <TableCell align="center">{contact.number}</TableCell>
+                  <TableCell align="center">{contact.email}</TableCell>
+                  <TableCell align="center">
+                    <IconButton
+                      size="small"
+                      onClick={() => handleSaveTicket(contact.id)}
+                    >
+                      <WhatsAppIcon />
+                    </IconButton>
+                    <IconButton
+                      size="small"
+                      onClick={() => hadleEditContact(contact.id)}
+                    >
+                      <EditIcon />
+                    </IconButton>
+                    <Can
+                      role={user.profile}
+                      perform="contacts-page:deleteContact"
+                      yes={() => (
+                        <IconButton
+                          size="small"
+                          onClick={(e) => {
+                            setConfirmOpen(true);
+                            setDeletingContact(contact);
+                          }}
+                        >
+                          <DeleteOutlineIcon />
+                        </IconButton>
+                      )}
+                    />
+                  </TableCell>
+                </TableRow>
+              ))}
+              {loading && <TableRowSkeleton avatar columns={3} />}
+            </>
+          </TableBody>
+        </Table>
+      </Paper>
+    </MainContainer>
+  );
 };
 
 export default Contacts;
diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js
index ebb98d6..56c4f5d 100644
--- a/frontend/src/pages/Login/index.js
+++ b/frontend/src/pages/Login/index.js
@@ -30,105 +30,105 @@ import { AuthContext } from "../../context/Auth/AuthContext";
 // 	);
 // };
 
-const useStyles = makeStyles(theme => ({
-	paper: {
-		marginTop: theme.spacing(8),
-		display: "flex",
-		flexDirection: "column",
-		alignItems: "center",
-	},
-	avatar: {
-		margin: theme.spacing(1),
-		backgroundColor: theme.palette.secondary.main,
-	},
-	form: {
-		width: "100%", // Fix IE 11 issue.
-		marginTop: theme.spacing(1),
-	},
-	submit: {
-		margin: theme.spacing(3, 0, 2),
-	},
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    marginTop: theme.spacing(8),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: "100%", // Fix IE 11 issue.
+    marginTop: theme.spacing(1),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
 }));
 
 const Login = () => {
-	const classes = useStyles();
+  const classes = useStyles();
 
-	const [user, setUser] = useState({ email: "", password: "" });
+  const [user, setUser] = useState({ email: "", password: "" });
 
-	const { handleLogin } = useContext(AuthContext);
+  const { handleLogin } = useContext(AuthContext);
 
-	const handleChangeInput = e => {
-		setUser({ ...user, [e.target.name]: e.target.value });
-	};
+  const handleChangeInput = (e) => {
+    setUser({ ...user, [e.target.name]: e.target.value });
+  };
 
-	const handlSubmit = e => {
-		e.preventDefault();
-		handleLogin(user);
-	};
+  const handlSubmit = (e) => {
+    e.preventDefault();
+    handleLogin(user);
+  };
 
-	return (
-		<Container component="main" maxWidth="xs">
-			<CssBaseline />
-			<div className={classes.paper}>
-				<Avatar className={classes.avatar}>
-					<LockOutlinedIcon />
-				</Avatar>
-				<Typography component="h1" variant="h5">
-					{i18n.t("login.title")}
-				</Typography>
-				<form className={classes.form} noValidate onSubmit={handlSubmit}>
-					<TextField
-						variant="outlined"
-						margin="normal"
-						required
-						fullWidth
-						id="email"
-						label={i18n.t("login.form.email")}
-						name="email"
-						value={user.email}
-						onChange={handleChangeInput}
-						autoComplete="email"
-						autoFocus
-					/>
-					<TextField
-						variant="outlined"
-						margin="normal"
-						required
-						fullWidth
-						name="password"
-						label={i18n.t("login.form.password")}
-						type="password"
-						id="password"
-						value={user.password}
-						onChange={handleChangeInput}
-						autoComplete="current-password"
-					/>
-					<Button
-						type="submit"
-						fullWidth
-						variant="contained"
-						color="primary"
-						className={classes.submit}
-					>
-						{i18n.t("login.buttons.submit")}
-					</Button>
-					<Grid container>
-						<Grid item>
-							<Link
-								href="#"
-								variant="body2"
-								component={RouterLink}
-								to="/signup"
-							>
-								{i18n.t("login.buttons.register")}
-							</Link>
-						</Grid>
-					</Grid>
-				</form>
-			</div>
-			<Box mt={8}>{/* <Copyright /> */}</Box>
-		</Container>
-	);
+  return (
+    <Container component="main" maxWidth="xs">
+      <CssBaseline />
+      <div className={classes.paper}>
+        <Avatar className={classes.avatar}>
+          <LockOutlinedIcon />
+        </Avatar>
+        <Typography component="h1" variant="h5">
+          {i18n.t("login.title")}
+        </Typography>
+        <form className={classes.form} noValidate onSubmit={handlSubmit}>
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            id="email"
+            label={i18n.t("login.form.email")}
+            name="email"
+            value={user.email}
+            onChange={handleChangeInput}
+            autoComplete="email"
+            autoFocus
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label={i18n.t("login.form.password")}
+            type="password"
+            id="password"
+            value={user.password}
+            onChange={handleChangeInput}
+            autoComplete="current-password"
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+          >
+            {i18n.t("login.buttons.submit")}
+          </Button>
+          <Grid container>
+            <Grid item>
+              <Link
+                href="#"
+                variant="body2"
+                component={RouterLink}
+                to="/signup"
+              >
+                {i18n.t("login.buttons.register")}
+              </Link>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+      <Box mt={8}>{/* <Copyright /> */}</Box>
+    </Container>
+  );
 };
 
 export default Login;
diff --git a/frontend/src/pages/Queues/index.js b/frontend/src/pages/Queues/index.js
index 632fea3..0e239ee 100644
--- a/frontend/src/pages/Queues/index.js
+++ b/frontend/src/pages/Queues/index.js
@@ -3,16 +3,16 @@ import React, { useEffect, useReducer, useState } from "react";
 import openSocket from "socket.io-client";
 
 import {
-	Button,
-	IconButton,
-	makeStyles,
-	Paper,
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableRow,
-	Typography,
+  Button,
+  IconButton,
+  makeStyles,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
 } from "@material-ui/core";
 
 import MainContainer from "../../components/MainContainer";
@@ -28,241 +28,241 @@ import QueueModal from "../../components/QueueModal";
 import { toast } from "react-toastify";
 import ConfirmationModal from "../../components/ConfirmationModal";
 
-const useStyles = makeStyles(theme => ({
-	mainPaper: {
-		flex: 1,
-		padding: theme.spacing(1),
-		overflowY: "scroll",
-		...theme.scrollbarStyles,
-	},
-	customTableCell: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-	},
+const useStyles = makeStyles((theme) => ({
+  mainPaper: {
+    flex: 1,
+    padding: theme.spacing(1),
+    overflowY: "scroll",
+    ...theme.scrollbarStyles,
+  },
+  customTableCell: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
 }));
 
 const reducer = (state, action) => {
-	if (action.type === "LOAD_QUEUES") {
-		const queues = action.payload;
-		const newQueues = [];
+  if (action.type === "LOAD_QUEUES") {
+    const queues = action.payload;
+    const newQueues = [];
 
-		queues.forEach(queue => {
-			const queueIndex = state.findIndex(q => q.id === queue.id);
-			if (queueIndex !== -1) {
-				state[queueIndex] = queue;
-			} else {
-				newQueues.push(queue);
-			}
-		});
+    queues.forEach((queue) => {
+      const queueIndex = state.findIndex((q) => q.id === queue.id);
+      if (queueIndex !== -1) {
+        state[queueIndex] = queue;
+      } else {
+        newQueues.push(queue);
+      }
+    });
 
-		return [...state, ...newQueues];
-	}
+    return [...state, ...newQueues];
+  }
 
-	if (action.type === "UPDATE_QUEUES") {
-		const queue = action.payload;
-		const queueIndex = state.findIndex(u => u.id === queue.id);
+  if (action.type === "UPDATE_QUEUES") {
+    const queue = action.payload;
+    const queueIndex = state.findIndex((u) => u.id === queue.id);
 
-		if (queueIndex !== -1) {
-			state[queueIndex] = queue;
-			return [...state];
-		} else {
-			return [queue, ...state];
-		}
-	}
+    if (queueIndex !== -1) {
+      state[queueIndex] = queue;
+      return [...state];
+    } else {
+      return [queue, ...state];
+    }
+  }
 
-	if (action.type === "DELETE_QUEUE") {
-		const queueId = action.payload;
-		const queueIndex = state.findIndex(q => q.id === queueId);
-		if (queueIndex !== -1) {
-			state.splice(queueIndex, 1);
-		}
-		return [...state];
-	}
+  if (action.type === "DELETE_QUEUE") {
+    const queueId = action.payload;
+    const queueIndex = state.findIndex((q) => q.id === queueId);
+    if (queueIndex !== -1) {
+      state.splice(queueIndex, 1);
+    }
+    return [...state];
+  }
 
-	if (action.type === "RESET") {
-		return [];
-	}
+  if (action.type === "RESET") {
+    return [];
+  }
 };
 
 const Queues = () => {
-	const classes = useStyles();
+  const classes = useStyles();
 
-	const [queues, dispatch] = useReducer(reducer, []);
-	const [loading, setLoading] = useState(false);
+  const [queues, dispatch] = useReducer(reducer, []);
+  const [loading, setLoading] = useState(false);
 
-	const [queueModalOpen, setQueueModalOpen] = useState(false);
-	const [selectedQueue, setSelectedQueue] = useState(null);
-	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  const [queueModalOpen, setQueueModalOpen] = useState(false);
+  const [selectedQueue, setSelectedQueue] = useState(null);
+  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
 
-	useEffect(() => {
-		(async () => {
-			setLoading(true);
-			try {
-				const { data } = await api.get("/queue");
-				dispatch({ type: "LOAD_QUEUES", payload: data });
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      try {
+        const { data } = await api.get("/queue");
+        dispatch({ type: "LOAD_QUEUES", payload: data });
 
-				setLoading(false);
-			} catch (err) {
-				toastError(err);
-				setLoading(false);
-			}
-		})();
-	}, []);
+        setLoading(false);
+      } catch (err) {
+        toastError(err);
+        setLoading(false);
+      }
+    })();
+  }, []);
 
-	useEffect(() => {
-		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+  useEffect(() => {
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("queue", data => {
-			if (data.action === "update" || data.action === "create") {
-				dispatch({ type: "UPDATE_QUEUES", payload: data.queue });
-			}
+    socket.on("queue", (data) => {
+      if (data.action === "update" || data.action === "create") {
+        dispatch({ type: "UPDATE_QUEUES", payload: data.queue });
+      }
 
-			if (data.action === "delete") {
-				dispatch({ type: "DELETE_QUEUE", payload: data.queueId });
-			}
-		});
+      if (data.action === "delete") {
+        dispatch({ type: "DELETE_QUEUE", payload: data.queueId });
+      }
+    });
 
-		return () => {
-			socket.disconnect();
-		};
-	}, []);
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
 
-	const handleOpenQueueModal = () => {
-		setQueueModalOpen(true);
-		setSelectedQueue(null);
-	};
+  const handleOpenQueueModal = () => {
+    setQueueModalOpen(true);
+    setSelectedQueue(null);
+  };
 
-	const handleCloseQueueModal = () => {
-		setQueueModalOpen(false);
-		setSelectedQueue(null);
-	};
+  const handleCloseQueueModal = () => {
+    setQueueModalOpen(false);
+    setSelectedQueue(null);
+  };
 
-	const handleEditQueue = queue => {
-		setSelectedQueue(queue);
-		setQueueModalOpen(true);
-	};
+  const handleEditQueue = (queue) => {
+    setSelectedQueue(queue);
+    setQueueModalOpen(true);
+  };
 
-	const handleCloseConfirmationModal = () => {
-		setConfirmModalOpen(false);
-		setSelectedQueue(null);
-	};
+  const handleCloseConfirmationModal = () => {
+    setConfirmModalOpen(false);
+    setSelectedQueue(null);
+  };
 
-	const handleDeleteQueue = async queueId => {
-		try {
-			await api.delete(`/queue/${queueId}`);
-			toast.success(i18n.t("Queue deleted successfully!"));
-		} catch (err) {
-			toastError(err);
-		}
-		setSelectedQueue(null);
-	};
+  const handleDeleteQueue = async (queueId) => {
+    try {
+      await api.delete(`/queue/${queueId}`);
+      toast.success(i18n.t("Queue deleted successfully!"));
+    } catch (err) {
+      toastError(err);
+    }
+    setSelectedQueue(null);
+  };
 
-	return (
-		<MainContainer>
-			<ConfirmationModal
-				title={
-					selectedQueue &&
-					`${i18n.t("queues.confirmationModal.deleteTitle")} ${
-						selectedQueue.name
-					}?`
-				}
-				open={confirmModalOpen}
-				onClose={handleCloseConfirmationModal}
-				onConfirm={() => handleDeleteQueue(selectedQueue.id)}
-			>
-				{i18n.t("queues.confirmationModal.deleteMessage")}
-			</ConfirmationModal>
-			<QueueModal
-				open={queueModalOpen}
-				onClose={handleCloseQueueModal}
-				queueId={selectedQueue?.id}
-			/>
-			<MainHeader>
-				<Title>{i18n.t("queues.title")}</Title>
-				<MainHeaderButtonsWrapper>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={handleOpenQueueModal}
-					>
-						{i18n.t("queues.buttons.add")}
-					</Button>
-				</MainHeaderButtonsWrapper>
-			</MainHeader>
-			<Paper className={classes.mainPaper} variant="outlined">
-				<Table size="small">
-					<TableHead>
-						<TableRow>
-							<TableCell align="center">
-								{i18n.t("queues.table.name")}
-							</TableCell>
-							<TableCell align="center">
-								{i18n.t("queues.table.color")}
-							</TableCell>
-							<TableCell align="center">
-								{i18n.t("queues.table.greeting")}
-							</TableCell>
-							<TableCell align="center">
-								{i18n.t("queues.table.actions")}
-							</TableCell>
-						</TableRow>
-					</TableHead>
-					<TableBody>
-						<>
-							{queues.map(queue => (
-								<TableRow key={queue.id}>
-									<TableCell align="center">{queue.name}</TableCell>
-									<TableCell align="center">
-										<div className={classes.customTableCell}>
-											<span
-												style={{
-													backgroundColor: queue.color,
-													width: 60,
-													height: 20,
-													alignSelf: "center",
-												}}
-											/>
-										</div>
-									</TableCell>
-									<TableCell align="center">
-										<div className={classes.customTableCell}>
-											<Typography
-												style={{ width: 300, align: "center" }}
-												noWrap
-												variant="body2"
-											>
-												{queue.greetingMessage}
-											</Typography>
-										</div>
-									</TableCell>
-									<TableCell align="center">
-										<IconButton
-											size="small"
-											onClick={() => handleEditQueue(queue)}
-										>
-											<Edit />
-										</IconButton>
+  return (
+    <MainContainer>
+      <ConfirmationModal
+        title={
+          selectedQueue &&
+          `${i18n.t("queues.confirmationModal.deleteTitle")} ${
+            selectedQueue.name
+          }?`
+        }
+        open={confirmModalOpen}
+        onClose={handleCloseConfirmationModal}
+        onConfirm={() => handleDeleteQueue(selectedQueue.id)}
+      >
+        {i18n.t("queues.confirmationModal.deleteMessage")}
+      </ConfirmationModal>
+      <QueueModal
+        open={queueModalOpen}
+        onClose={handleCloseQueueModal}
+        queueId={selectedQueue?.id}
+      />
+      <MainHeader>
+        <Title>{i18n.t("queues.title")}</Title>
+        <MainHeaderButtonsWrapper>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleOpenQueueModal}
+          >
+            {i18n.t("queues.buttons.add")}
+          </Button>
+        </MainHeaderButtonsWrapper>
+      </MainHeader>
+      <Paper className={classes.mainPaper} variant="outlined">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell align="center">
+                {i18n.t("queues.table.name")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("queues.table.color")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("queues.table.greeting")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("queues.table.actions")}
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <>
+              {queues.map((queue) => (
+                <TableRow key={queue.id}>
+                  <TableCell align="center">{queue.name}</TableCell>
+                  <TableCell align="center">
+                    <div className={classes.customTableCell}>
+                      <span
+                        style={{
+                          backgroundColor: queue.color,
+                          width: 60,
+                          height: 20,
+                          alignSelf: "center",
+                        }}
+                      />
+                    </div>
+                  </TableCell>
+                  <TableCell align="center">
+                    <div className={classes.customTableCell}>
+                      <Typography
+                        style={{ width: 300, align: "center" }}
+                        noWrap
+                        variant="body2"
+                      >
+                        {queue.greetingMessage}
+                      </Typography>
+                    </div>
+                  </TableCell>
+                  <TableCell align="center">
+                    <IconButton
+                      size="small"
+                      onClick={() => handleEditQueue(queue)}
+                    >
+                      <Edit />
+                    </IconButton>
 
-										<IconButton
-											size="small"
-											onClick={() => {
-												setSelectedQueue(queue);
-												setConfirmModalOpen(true);
-											}}
-										>
-											<DeleteOutline />
-										</IconButton>
-									</TableCell>
-								</TableRow>
-							))}
-							{loading && <TableRowSkeleton columns={4} />}
-						</>
-					</TableBody>
-				</Table>
-			</Paper>
-		</MainContainer>
-	);
+                    <IconButton
+                      size="small"
+                      onClick={() => {
+                        setSelectedQueue(queue);
+                        setConfirmModalOpen(true);
+                      }}
+                    >
+                      <DeleteOutline />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {loading && <TableRowSkeleton columns={4} />}
+            </>
+          </TableBody>
+        </Table>
+      </Paper>
+    </MainContainer>
+  );
 };
 
 export default Queues;
diff --git a/frontend/src/pages/QuickAnswers/index.js b/frontend/src/pages/QuickAnswers/index.js
new file mode 100644
index 0000000..87958ea
--- /dev/null
+++ b/frontend/src/pages/QuickAnswers/index.js
@@ -0,0 +1,288 @@
+import React, { useState, useEffect, useReducer } from "react";
+import openSocket from "socket.io-client";
+
+import {
+  Button,
+  IconButton,
+  makeStyles,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  InputAdornment,
+  TextField,
+} from "@material-ui/core";
+import { Edit, DeleteOutline } from "@material-ui/icons";
+import SearchIcon from "@material-ui/icons/Search";
+
+import MainContainer from "../../components/MainContainer";
+import MainHeader from "../../components/MainHeader";
+import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper";
+import Title from "../../components/Title";
+
+import api from "../../services/api";
+import { i18n } from "../../translate/i18n";
+import TableRowSkeleton from "../../components/TableRowSkeleton";
+import QuickAnswersModal from "../../components/QuickAnswersModal";
+import ConfirmationModal from "../../components/ConfirmationModal";
+import { toast } from "react-toastify";
+import toastError from "../../errors/toastError";
+
+const reducer = (state, action) => {
+  if (action.type === "LOAD_QUICK_ANSWERS") {
+    const quickAnswers = action.payload;
+    const newQuickAnswers = [];
+
+    quickAnswers.forEach((quickAnswer) => {
+      const quickAnswerIndex = state.findIndex((q) => q.id === quickAnswer.id);
+      if (quickAnswerIndex !== -1) {
+        state[quickAnswerIndex] = quickAnswer;
+      } else {
+        newQuickAnswers.push(quickAnswer);
+      }
+    });
+
+    return [...state, ...newQuickAnswers];
+  }
+
+  if (action.type === "UPDATE_QUICK_ANSWERS") {
+    const quickAnswer = action.payload;
+    const quickAnswerIndex = state.findIndex((q) => q.id === quickAnswer.id);
+
+    if (quickAnswerIndex !== -1) {
+      state[quickAnswerIndex] = quickAnswer;
+      return [...state];
+    } else {
+      return [quickAnswer, ...state];
+    }
+  }
+
+  if (action.type === "DELETE_QUICK_ANSWERS") {
+    const quickAnswerId = action.payload;
+
+    const quickAnswerIndex = state.findIndex((q) => q.id === quickAnswerId);
+    if (quickAnswerIndex !== -1) {
+      state.splice(quickAnswerIndex, 1);
+    }
+    return [...state];
+  }
+
+  if (action.type === "RESET") {
+    return [];
+  }
+};
+
+const useStyles = makeStyles((theme) => ({
+  mainPaper: {
+    flex: 1,
+    padding: theme.spacing(1),
+    overflowY: "scroll",
+    ...theme.scrollbarStyles,
+  },
+}));
+
+const QuickAnswers = () => {
+  const classes = useStyles();
+
+  const [loading, setLoading] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [searchParam, setSearchParam] = useState("");
+  const [quickAnswers, dispatch] = useReducer(reducer, []);
+  const [selectedQuickAnswers, setSelectedQuickAnswers] = useState(null);
+  const [quickAnswersModalOpen, setQuickAnswersModalOpen] = useState(false);
+  const [deletingQuickAnswers, setDeletingQuickAnswers] = useState(null);
+  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+
+  useEffect(() => {
+    dispatch({ type: "RESET" });
+    setPageNumber(1);
+  }, [searchParam]);
+
+  useEffect(() => {
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      const fetchQuickAnswers = async () => {
+        try {
+          const { data } = await api.get("/quickAnswers/", {
+            params: { searchParam, pageNumber },
+          });
+          dispatch({ type: "LOAD_QUICK_ANSWERS", payload: data.quickAnswers });
+          setHasMore(data.hasMore);
+          setLoading(false);
+        } catch (err) {
+          toastError(err);
+        }
+      };
+      fetchQuickAnswers();
+    }, 500);
+    return () => clearTimeout(delayDebounceFn);
+  }, [searchParam, pageNumber]);
+
+  useEffect(() => {
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+
+    socket.on("quickAnswer", (data) => {
+      if (data.action === "update" || data.action === "create") {
+        dispatch({ type: "UPDATE_QUICK_ANSWERS", payload: data.quickAnswer });
+      }
+
+      if (data.action === "delete") {
+        dispatch({
+          type: "DELETE_QUICK_ANSWERS",
+          payload: +data.quickAnswerId,
+        });
+      }
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+
+  const handleSearch = (event) => {
+    setSearchParam(event.target.value.toLowerCase());
+  };
+
+  const handleOpenQuickAnswersModal = () => {
+    setSelectedQuickAnswers(null);
+    setQuickAnswersModalOpen(true);
+  };
+
+  const handleCloseQuickAnswersModal = () => {
+    setSelectedQuickAnswers(null);
+    setQuickAnswersModalOpen(false);
+  };
+
+  const handleEditQuickAnswers = (quickAnswer) => {
+    setSelectedQuickAnswers(quickAnswer);
+    setQuickAnswersModalOpen(true);
+  };
+
+  const handleDeleteQuickAnswers = async (quickAnswerId) => {
+    try {
+      await api.delete(`/quickAnswers/${quickAnswerId}`);
+      toast.success(i18n.t("quickAnswers.toasts.deleted"));
+    } catch (err) {
+      toastError(err);
+    }
+    setDeletingQuickAnswers(null);
+    setSearchParam("");
+    setPageNumber(1);
+  };
+
+  const loadMore = () => {
+    setPageNumber((prevState) => prevState + 1);
+  };
+
+  const handleScroll = (e) => {
+    if (!hasMore || loading) return;
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollHeight - (scrollTop + 100) < clientHeight) {
+      loadMore();
+    }
+  };
+
+  return (
+    <MainContainer>
+      <ConfirmationModal
+        title={
+          deletingQuickAnswers &&
+          `${i18n.t("quickAnswers.confirmationModal.deleteTitle")} ${
+            deletingQuickAnswers.shortcut
+          }?`
+        }
+        open={confirmModalOpen}
+        onClose={setConfirmModalOpen}
+        onConfirm={() => handleDeleteQuickAnswers(deletingQuickAnswers.id)}
+      >
+        {i18n.t("quickAnswers.confirmationModal.deleteMessage")}
+      </ConfirmationModal>
+      <QuickAnswersModal
+        open={quickAnswersModalOpen}
+        onClose={handleCloseQuickAnswersModal}
+        aria-labelledby="form-dialog-title"
+        quickAnswerId={selectedQuickAnswers && selectedQuickAnswers.id}
+      ></QuickAnswersModal>
+      <MainHeader>
+        <Title>{i18n.t("quickAnswers.title")}</Title>
+        <MainHeaderButtonsWrapper>
+          <TextField
+            placeholder={i18n.t("quickAnswers.searchPlaceholder")}
+            type="search"
+            value={searchParam}
+            onChange={handleSearch}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon style={{ color: "gray" }} />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleOpenQuickAnswersModal}
+          >
+            {i18n.t("quickAnswers.buttons.add")}
+          </Button>
+        </MainHeaderButtonsWrapper>
+      </MainHeader>
+      <Paper
+        className={classes.mainPaper}
+        variant="outlined"
+        onScroll={handleScroll}
+      >
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell align="center">
+                {i18n.t("quickAnswers.table.shortcut")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("quickAnswers.table.message")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("quickAnswers.table.actions")}
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <>
+              {quickAnswers.map((quickAnswer) => (
+                <TableRow key={quickAnswer.id}>
+                  <TableCell align="center">{quickAnswer.shortcut}</TableCell>
+                  <TableCell align="center">{quickAnswer.message}</TableCell>
+                  <TableCell align="center">
+                    <IconButton
+                      size="small"
+                      onClick={() => handleEditQuickAnswers(quickAnswer)}
+                    >
+                      <Edit />
+                    </IconButton>
+
+                    <IconButton
+                      size="small"
+                      onClick={(e) => {
+                        setConfirmModalOpen(true);
+                        setDeletingQuickAnswers(quickAnswer);
+                      }}
+                    >
+                      <DeleteOutline />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {loading && <TableRowSkeleton columns={3} />}
+            </>
+          </TableBody>
+        </Table>
+      </Paper>
+    </MainContainer>
+  );
+};
+
+export default QuickAnswers;
diff --git a/frontend/src/pages/Tickets/index.js b/frontend/src/pages/Tickets/index.js
index 9e6ea20..80eb909 100644
--- a/frontend/src/pages/Tickets/index.js
+++ b/frontend/src/pages/Tickets/index.js
@@ -8,69 +8,98 @@ import TicketsManager from "../../components/TicketsManager/";
 import Ticket from "../../components/Ticket/";
 
 import { i18n } from "../../translate/i18n";
+import Hidden from "@material-ui/core/Hidden";
 
-const useStyles = makeStyles(theme => ({
-	chatContainer: {
-		flex: 1,
-		// backgroundColor: "#eee",
-		padding: theme.spacing(4),
-		height: `calc(100% - 48px)`,
-		overflowY: "hidden",
-	},
+const useStyles = makeStyles((theme) => ({
+  chatContainer: {
+    flex: 1,
+    // // backgroundColor: "#eee",
+    // padding: theme.spacing(4),
+    height: `calc(100% - 48px)`,
+    overflowY: "hidden",
+  },
 
-	chatPapper: {
-		// backgroundColor: "red",
-		display: "flex",
-		height: "100%",
-	},
+  chatPapper: {
+    // backgroundColor: "red",
+    display: "flex",
+    height: "100%",
+  },
 
-	contactsWrapper: {
-		display: "flex",
-		height: "100%",
-		flexDirection: "column",
-		overflowY: "hidden",
-	},
-	messagessWrapper: {
-		display: "flex",
-		height: "100%",
-		flexDirection: "column",
-	},
-	welcomeMsg: {
-		backgroundColor: "#eee",
-		display: "flex",
-		justifyContent: "space-evenly",
-		alignItems: "center",
-		height: "100%",
-		textAlign: "center",
-	},
+  contactsWrapper: {
+    display: "flex",
+    height: "100%",
+    flexDirection: "column",
+    overflowY: "hidden",
+  },
+  contactsWrapperSmall: {
+    display: "flex",
+    height: "100%",
+    flexDirection: "column",
+    overflowY: "hidden",
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
+  },
+  messagessWrapper: {
+    display: "flex",
+    height: "100%",
+    flexDirection: "column",
+  },
+  welcomeMsg: {
+    backgroundColor: "#eee",
+    display: "flex",
+    justifyContent: "space-evenly",
+    alignItems: "center",
+    height: "100%",
+    textAlign: "center",
+    borderRadius: 0,
+  },
+  ticketsManager: {},
+  ticketsManagerClosed: {
+    [theme.breakpoints.down("sm")]: {
+      display: "none",
+    },
+  },
 }));
 
 const Chat = () => {
-	const classes = useStyles();
-	const { ticketId } = useParams();
+  const classes = useStyles();
+  const { ticketId } = useParams();
 
-	return (
-		<div className={classes.chatContainer}>
-			<div className={classes.chatPapper}>
-				<Grid container spacing={0}>
-					<Grid item xs={4} className={classes.contactsWrapper}>
-						<TicketsManager />
-					</Grid>
-					<Grid item xs={8} className={classes.messagessWrapper}>
-						{ticketId ? (
-							<>
-								<Ticket />
-							</>
-						) : (
-							<Paper square variant="outlined" className={classes.welcomeMsg}>
-								<span>{i18n.t("chat.noTicketMessage")}</span>
-							</Paper>
-						)}
-					</Grid>
-				</Grid>
-			</div>
-		</div>
-	);
+  return (
+    <div className={classes.chatContainer}>
+      <div className={classes.chatPapper}>
+        <Grid container spacing={0}>
+          {/* <Grid item xs={4} className={classes.contactsWrapper}> */}
+          <Grid
+            item
+            xs={12}
+            md={4}
+            className={
+              ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper
+            }
+          >
+            <TicketsManager />
+          </Grid>
+          <Grid item xs={12} md={8} className={classes.messagessWrapper}>
+            {/* <Grid item xs={8} className={classes.messagessWrapper}> */}
+            {ticketId ? (
+              <>
+                <Ticket />
+              </>
+            ) : (
+              <Hidden only={["sm", "xs"]}>
+                <Paper className={classes.welcomeMsg}>
+                  {/* <Paper square variant="outlined" className={classes.welcomeMsg}> */}
+                  <span>{i18n.t("chat.noTicketMessage")}</span>
+                </Paper>
+              </Hidden>
+            )}
+          </Grid>
+        </Grid>
+      </div>
+    </div>
+  );
 };
 
 export default Chat;
diff --git a/frontend/src/pages/Users/index.js b/frontend/src/pages/Users/index.js
index f4c8ae6..c7f5c1f 100644
--- a/frontend/src/pages/Users/index.js
+++ b/frontend/src/pages/Users/index.js
@@ -31,257 +31,257 @@ import ConfirmationModal from "../../components/ConfirmationModal";
 import toastError from "../../errors/toastError";
 
 const reducer = (state, action) => {
-	if (action.type === "LOAD_USERS") {
-		const users = action.payload;
-		const newUsers = [];
+  if (action.type === "LOAD_USERS") {
+    const users = action.payload;
+    const newUsers = [];
 
-		users.forEach(user => {
-			const userIndex = state.findIndex(u => u.id === user.id);
-			if (userIndex !== -1) {
-				state[userIndex] = user;
-			} else {
-				newUsers.push(user);
-			}
-		});
+    users.forEach((user) => {
+      const userIndex = state.findIndex((u) => u.id === user.id);
+      if (userIndex !== -1) {
+        state[userIndex] = user;
+      } else {
+        newUsers.push(user);
+      }
+    });
 
-		return [...state, ...newUsers];
-	}
+    return [...state, ...newUsers];
+  }
 
-	if (action.type === "UPDATE_USERS") {
-		const user = action.payload;
-		const userIndex = state.findIndex(u => u.id === user.id);
+  if (action.type === "UPDATE_USERS") {
+    const user = action.payload;
+    const userIndex = state.findIndex((u) => u.id === user.id);
 
-		if (userIndex !== -1) {
-			state[userIndex] = user;
-			return [...state];
-		} else {
-			return [user, ...state];
-		}
-	}
+    if (userIndex !== -1) {
+      state[userIndex] = user;
+      return [...state];
+    } else {
+      return [user, ...state];
+    }
+  }
 
-	if (action.type === "DELETE_USER") {
-		const userId = action.payload;
+  if (action.type === "DELETE_USER") {
+    const userId = action.payload;
 
-		const userIndex = state.findIndex(u => u.id === userId);
-		if (userIndex !== -1) {
-			state.splice(userIndex, 1);
-		}
-		return [...state];
-	}
+    const userIndex = state.findIndex((u) => u.id === userId);
+    if (userIndex !== -1) {
+      state.splice(userIndex, 1);
+    }
+    return [...state];
+  }
 
-	if (action.type === "RESET") {
-		return [];
-	}
+  if (action.type === "RESET") {
+    return [];
+  }
 };
 
-const useStyles = makeStyles(theme => ({
-	mainPaper: {
-		flex: 1,
-		padding: theme.spacing(1),
-		overflowY: "scroll",
-		...theme.scrollbarStyles,
-	},
+const useStyles = makeStyles((theme) => ({
+  mainPaper: {
+    flex: 1,
+    padding: theme.spacing(1),
+    overflowY: "scroll",
+    ...theme.scrollbarStyles,
+  },
 }));
 
 const Users = () => {
-	const classes = useStyles();
+  const classes = useStyles();
 
-	const [loading, setLoading] = useState(false);
-	const [pageNumber, setPageNumber] = useState(1);
-	const [hasMore, setHasMore] = useState(false);
-	const [selectedUser, setSelectedUser] = useState(null);
-	const [deletingUser, setDeletingUser] = useState(null);
-	const [userModalOpen, setUserModalOpen] = useState(false);
-	const [confirmModalOpen, setConfirmModalOpen] = useState(false);
-	const [searchParam, setSearchParam] = useState("");
-	const [users, dispatch] = useReducer(reducer, []);
+  const [loading, setLoading] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [hasMore, setHasMore] = useState(false);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [deletingUser, setDeletingUser] = useState(null);
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  const [searchParam, setSearchParam] = useState("");
+  const [users, dispatch] = useReducer(reducer, []);
 
-	useEffect(() => {
-		dispatch({ type: "RESET" });
-		setPageNumber(1);
-	}, [searchParam]);
+  useEffect(() => {
+    dispatch({ type: "RESET" });
+    setPageNumber(1);
+  }, [searchParam]);
 
-	useEffect(() => {
-		setLoading(true);
-		const delayDebounceFn = setTimeout(() => {
-			const fetchUsers = async () => {
-				try {
-					const { data } = await api.get("/users/", {
-						params: { searchParam, pageNumber },
-					});
-					dispatch({ type: "LOAD_USERS", payload: data.users });
-					setHasMore(data.hasMore);
-					setLoading(false);
-				} catch (err) {
-					toastError(err);
-				}
-			};
-			fetchUsers();
-		}, 500);
-		return () => clearTimeout(delayDebounceFn);
-	}, [searchParam, pageNumber]);
+  useEffect(() => {
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      const fetchUsers = async () => {
+        try {
+          const { data } = await api.get("/users/", {
+            params: { searchParam, pageNumber },
+          });
+          dispatch({ type: "LOAD_USERS", payload: data.users });
+          setHasMore(data.hasMore);
+          setLoading(false);
+        } catch (err) {
+          toastError(err);
+        }
+      };
+      fetchUsers();
+    }, 500);
+    return () => clearTimeout(delayDebounceFn);
+  }, [searchParam, pageNumber]);
 
-	useEffect(() => {
-		const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
+  useEffect(() => {
+    const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
 
-		socket.on("user", data => {
-			if (data.action === "update" || data.action === "create") {
-				dispatch({ type: "UPDATE_USERS", payload: data.user });
-			}
+    socket.on("user", (data) => {
+      if (data.action === "update" || data.action === "create") {
+        dispatch({ type: "UPDATE_USERS", payload: data.user });
+      }
 
-			if (data.action === "delete") {
-				dispatch({ type: "DELETE_USER", payload: +data.userId });
-			}
-		});
+      if (data.action === "delete") {
+        dispatch({ type: "DELETE_USER", payload: +data.userId });
+      }
+    });
 
-		return () => {
-			socket.disconnect();
-		};
-	}, []);
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
 
-	const handleOpenUserModal = () => {
-		setSelectedUser(null);
-		setUserModalOpen(true);
-	};
+  const handleOpenUserModal = () => {
+    setSelectedUser(null);
+    setUserModalOpen(true);
+  };
 
-	const handleCloseUserModal = () => {
-		setSelectedUser(null);
-		setUserModalOpen(false);
-	};
+  const handleCloseUserModal = () => {
+    setSelectedUser(null);
+    setUserModalOpen(false);
+  };
 
-	const handleSearch = event => {
-		setSearchParam(event.target.value.toLowerCase());
-	};
+  const handleSearch = (event) => {
+    setSearchParam(event.target.value.toLowerCase());
+  };
 
-	const handleEditUser = user => {
-		setSelectedUser(user);
-		setUserModalOpen(true);
-	};
+  const handleEditUser = (user) => {
+    setSelectedUser(user);
+    setUserModalOpen(true);
+  };
 
-	const handleDeleteUser = async userId => {
-		try {
-			await api.delete(`/users/${userId}`);
-			toast.success(i18n.t("users.toasts.deleted"));
-		} catch (err) {
-			toastError(err);
-		}
-		setDeletingUser(null);
-		setSearchParam("");
-		setPageNumber(1);
-	};
+  const handleDeleteUser = async (userId) => {
+    try {
+      await api.delete(`/users/${userId}`);
+      toast.success(i18n.t("users.toasts.deleted"));
+    } catch (err) {
+      toastError(err);
+    }
+    setDeletingUser(null);
+    setSearchParam("");
+    setPageNumber(1);
+  };
 
-	const loadMore = () => {
-		setPageNumber(prevState => prevState + 1);
-	};
+  const loadMore = () => {
+    setPageNumber((prevState) => prevState + 1);
+  };
 
-	const handleScroll = e => {
-		if (!hasMore || loading) return;
-		const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-		if (scrollHeight - (scrollTop + 100) < clientHeight) {
-			loadMore();
-		}
-	};
+  const handleScroll = (e) => {
+    if (!hasMore || loading) return;
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollHeight - (scrollTop + 100) < clientHeight) {
+      loadMore();
+    }
+  };
 
-	return (
-		<MainContainer>
-			<ConfirmationModal
-				title={
-					deletingUser &&
-					`${i18n.t("users.confirmationModal.deleteTitle")} ${
-						deletingUser.name
-					}?`
-				}
-				open={confirmModalOpen}
-				onClose={setConfirmModalOpen}
-				onConfirm={() => handleDeleteUser(deletingUser.id)}
-			>
-				{i18n.t("users.confirmationModal.deleteMessage")}
-			</ConfirmationModal>
-			<UserModal
-				open={userModalOpen}
-				onClose={handleCloseUserModal}
-				aria-labelledby="form-dialog-title"
-				userId={selectedUser && selectedUser.id}
-			/>
-			<MainHeader>
-				<Title>{i18n.t("users.title")}</Title>
-				<MainHeaderButtonsWrapper>
-					<TextField
-						placeholder={i18n.t("contacts.searchPlaceholder")}
-						type="search"
-						value={searchParam}
-						onChange={handleSearch}
-						InputProps={{
-							startAdornment: (
-								<InputAdornment position="start">
-									<SearchIcon style={{ color: "gray" }} />
-								</InputAdornment>
-							),
-						}}
-					/>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={handleOpenUserModal}
-					>
-						{i18n.t("users.buttons.add")}
-					</Button>
-				</MainHeaderButtonsWrapper>
-			</MainHeader>
-			<Paper
-				className={classes.mainPaper}
-				variant="outlined"
-				onScroll={handleScroll}
-			>
-				<Table size="small">
-					<TableHead>
-						<TableRow>
-							<TableCell align="center">{i18n.t("users.table.name")}</TableCell>
-							<TableCell align="center">
-								{i18n.t("users.table.email")}
-							</TableCell>
-							<TableCell align="center">
-								{i18n.t("users.table.profile")}
-							</TableCell>
-							<TableCell align="center">
-								{i18n.t("users.table.actions")}
-							</TableCell>
-						</TableRow>
-					</TableHead>
-					<TableBody>
-						<>
-							{users.map(user => (
-								<TableRow key={user.id}>
-									<TableCell align="center">{user.name}</TableCell>
-									<TableCell align="center">{user.email}</TableCell>
-									<TableCell align="center">{user.profile}</TableCell>
-									<TableCell align="center">
-										<IconButton
-											size="small"
-											onClick={() => handleEditUser(user)}
-										>
-											<EditIcon />
-										</IconButton>
+  return (
+    <MainContainer>
+      <ConfirmationModal
+        title={
+          deletingUser &&
+          `${i18n.t("users.confirmationModal.deleteTitle")} ${
+            deletingUser.name
+          }?`
+        }
+        open={confirmModalOpen}
+        onClose={setConfirmModalOpen}
+        onConfirm={() => handleDeleteUser(deletingUser.id)}
+      >
+        {i18n.t("users.confirmationModal.deleteMessage")}
+      </ConfirmationModal>
+      <UserModal
+        open={userModalOpen}
+        onClose={handleCloseUserModal}
+        aria-labelledby="form-dialog-title"
+        userId={selectedUser && selectedUser.id}
+      />
+      <MainHeader>
+        <Title>{i18n.t("users.title")}</Title>
+        <MainHeaderButtonsWrapper>
+          <TextField
+            placeholder={i18n.t("contacts.searchPlaceholder")}
+            type="search"
+            value={searchParam}
+            onChange={handleSearch}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon style={{ color: "gray" }} />
+                </InputAdornment>
+              ),
+            }}
+          />
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleOpenUserModal}
+          >
+            {i18n.t("users.buttons.add")}
+          </Button>
+        </MainHeaderButtonsWrapper>
+      </MainHeader>
+      <Paper
+        className={classes.mainPaper}
+        variant="outlined"
+        onScroll={handleScroll}
+      >
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell align="center">{i18n.t("users.table.name")}</TableCell>
+              <TableCell align="center">
+                {i18n.t("users.table.email")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("users.table.profile")}
+              </TableCell>
+              <TableCell align="center">
+                {i18n.t("users.table.actions")}
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <>
+              {users.map((user) => (
+                <TableRow key={user.id}>
+                  <TableCell align="center">{user.name}</TableCell>
+                  <TableCell align="center">{user.email}</TableCell>
+                  <TableCell align="center">{user.profile}</TableCell>
+                  <TableCell align="center">
+                    <IconButton
+                      size="small"
+                      onClick={() => handleEditUser(user)}
+                    >
+                      <EditIcon />
+                    </IconButton>
 
-										<IconButton
-											size="small"
-											onClick={e => {
-												setConfirmModalOpen(true);
-												setDeletingUser(user);
-											}}
-										>
-											<DeleteOutlineIcon />
-										</IconButton>
-									</TableCell>
-								</TableRow>
-							))}
-							{loading && <TableRowSkeleton columns={4} />}
-						</>
-					</TableBody>
-				</Table>
-			</Paper>
-		</MainContainer>
-	);
+                    <IconButton
+                      size="small"
+                      onClick={(e) => {
+                        setConfirmModalOpen(true);
+                        setDeletingUser(user);
+                      }}
+                    >
+                      <DeleteOutlineIcon />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {loading && <TableRowSkeleton columns={4} />}
+            </>
+          </TableBody>
+        </Table>
+      </Paper>
+    </MainContainer>
+  );
 };
 
 export default Users;
diff --git a/frontend/src/routes/Route.js b/frontend/src/routes/Route.js
index bf2a375..fab61b3 100644
--- a/frontend/src/routes/Route.js
+++ b/frontend/src/routes/Route.js
@@ -5,32 +5,32 @@ import { AuthContext } from "../context/Auth/AuthContext";
 import BackdropLoading from "../components/BackdropLoading";
 
 const Route = ({ component: Component, isPrivate = false, ...rest }) => {
-	const { isAuth, loading } = useContext(AuthContext);
+  const { isAuth, loading } = useContext(AuthContext);
 
-	if (!isAuth && isPrivate) {
-		return (
-			<>
-				{loading && <BackdropLoading />}
-				<Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
-			</>
-		);
-	}
+  if (!isAuth && isPrivate) {
+    return (
+      <>
+        {loading && <BackdropLoading />}
+        <Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
+      </>
+    );
+  }
 
-	if (isAuth && !isPrivate) {
-		return (
-			<>
-				{loading && <BackdropLoading />}
-				<Redirect to={{ pathname: "/", state: { from: rest.location } }} />;
-			</>
-		);
-	}
+  if (isAuth && !isPrivate) {
+    return (
+      <>
+        {loading && <BackdropLoading />}
+        <Redirect to={{ pathname: "/", state: { from: rest.location } }} />;
+      </>
+    );
+  }
 
-	return (
-		<>
-			{loading && <BackdropLoading />}
-			<RouterRoute {...rest} component={Component} />
-		</>
-	);
+  return (
+    <>
+      {loading && <BackdropLoading />}
+      <RouterRoute {...rest} component={Component} />
+    </>
+  );
 };
 
 export default Route;
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index 46b6cad..f303380 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -11,44 +11,51 @@ import Connections from "../pages/Connections/";
 import Settings from "../pages/Settings/";
 import Users from "../pages/Users";
 import Contacts from "../pages/Contacts/";
+import QuickAnswers from "../pages/QuickAnswers/";
 import Queues from "../pages/Queues/";
 import { AuthProvider } from "../context/Auth/AuthContext";
 import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext";
 import Route from "./Route";
 
 const Routes = () => {
-	return (
-		<BrowserRouter>
-			<AuthProvider>
-				<Switch>
-					<Route exact path="/login" component={Login} />
-					<Route exact path="/signup" component={Signup} />
-					<WhatsAppsProvider>
-						<LoggedInLayout>
-							<Route exact path="/" component={Dashboard} isPrivate />
-							<Route
-								exact
-								path="/tickets/:ticketId?"
-								component={Tickets}
-								isPrivate
-							/>
-							<Route
-								exact
-								path="/connections"
-								component={Connections}
-								isPrivate
-							/>
-							<Route exact path="/contacts" component={Contacts} isPrivate />
-							<Route exact path="/users" component={Users} isPrivate />
-							<Route exact path="/Settings" component={Settings} isPrivate />
-							<Route exact path="/Queues" component={Queues} isPrivate />
-						</LoggedInLayout>
-					</WhatsAppsProvider>
-				</Switch>
-				<ToastContainer autoClose={3000} />
-			</AuthProvider>
-		</BrowserRouter>
-	);
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <Switch>
+          <Route exact path="/login" component={Login} />
+          <Route exact path="/signup" component={Signup} />
+          <WhatsAppsProvider>
+            <LoggedInLayout>
+              <Route exact path="/" component={Dashboard} isPrivate />
+              <Route
+                exact
+                path="/tickets/:ticketId?"
+                component={Tickets}
+                isPrivate
+              />
+              <Route
+                exact
+                path="/connections"
+                component={Connections}
+                isPrivate
+              />
+              <Route exact path="/contacts" component={Contacts} isPrivate />
+              <Route exact path="/users" component={Users} isPrivate />
+              <Route
+                exact
+                path="/quickAnswers"
+                component={QuickAnswers}
+                isPrivate
+              />
+              <Route exact path="/Settings" component={Settings} isPrivate />
+              <Route exact path="/Queues" component={Queues} isPrivate />
+            </LoggedInLayout>
+          </WhatsAppsProvider>
+        </Switch>
+        <ToastContainer autoClose={3000} />
+      </AuthProvider>
+    </BrowserRouter>
+  );
 };
 
 export default Routes;
diff --git a/frontend/src/translate/languages/en.js b/frontend/src/translate/languages/en.js
index 625fbce..eec8776 100644
--- a/frontend/src/translate/languages/en.js
+++ b/frontend/src/translate/languages/en.js
@@ -1,412 +1,448 @@
 const messages = {
-	en: {
-		translations: {
-			signup: {
-				title: "Sign up",
-				toasts: {
-					success: "User created successfully! Please login!",
-					fail: "Error creating user. Check the reported data.",
-				},
-				form: {
-					name: "Name",
-					email: "Email",
-					password: "Password",
-				},
-				buttons: {
-					submit: "Register",
-					login: "Already have an account? Log in!",
-				},
-			},
-			login: {
-				title: "Login",
-				form: {
-					email: "Email",
-					password: "Password",
-				},
-				buttons: {
-					submit: "Enter",
-					register: "Don't have an account? Register!",
-				},
-			},
-			auth: {
-				toasts: {
-					success: "Login successfully!",
-				},
-			},
-			dashboard: {
-				charts: {
-					perDay: {
-						title: "Tickets today: ",
-					},
-				},
-			},
-			connections: {
-				title: "Connections",
-				toasts: {
-					deleted: "WhatsApp connection deleted sucessfully!",
-				},
-				confirmationModal: {
-					deleteTitle: "Delete",
-					deleteMessage: "Are you sure? It cannot be reverted.",
-					disconnectTitle: "Disconnect",
-					disconnectMessage: "Are you sure? You'll need to read QR Code again.",
-				},
-				buttons: {
-					add: "Add WhatsApp",
-					disconnect: "Disconnect",
-					tryAgain: "Try Again",
-					qrcode: "QR CODE",
-					newQr: "New QR CODE",
-					connecting: "Connectiing",
-				},
-				toolTips: {
-					disconnected: {
-						title: "Failed to start WhatsApp session",
-						content:
-							"Make sure your cell phone is connected to the internet and try again, or request a new QR Code",
-					},
-					qrcode: {
-						title: "Waiting for QR Code read",
-						content:
-							"Click on 'QR CODE' button and read the QR Code with your cell phone to start session",
-					},
-					connected: {
-						title: "Connection established",
-					},
-					timeout: {
-						title: "Connection with cell phone has been lost",
-						content:
-							"Make sure your cell phone is connected to the internet and WhatsApp is open, or click on 'Disconnect' button to get a new QRcode",
-					},
-				},
-				table: {
-					name: "Name",
-					status: "Status",
-					lastUpdate: "Last Update",
-					default: "Default",
-					actions: "Actions",
-					session: "Session",
-				},
-			},
-			whatsappModal: {
-				title: {
-					add: "Add WhatsApp",
-					edit: "Edit WhatsApp",
-				},
-				form: {
-					name: "Name",
-					default: "Default",
-				},
-				buttons: {
-					okAdd: "Add",
-					okEdit: "Save",
-					cancel: "Cancel",
-				},
-				success: "WhatsApp saved successfully.",
-			},
-			qrCode: {
-				message: "Read QrCode to start the session",
-			},
-			contacts: {
-				title: "Contacts",
-				toasts: {
-					deleted: "Contact deleted sucessfully!",
-				},
-				searchPlaceholder: "Search ...",
-				confirmationModal: {
-					deleteTitle: "Delete",
-					importTitlte: "Import contacts",
-					deleteMessage:
-						"Are you sure you want to delete this contact? All related tickets will be lost.",
-					importMessage: "Do you want to import all contacts from the phone?",
-				},
-				buttons: {
-					import: "Import Contacts",
-					add: "Add Contact",
-				},
-				table: {
-					name: "Name",
-					whatsapp: "WhatsApp",
-					email: "Email",
-					actions: "Actions",
-				},
-			},
-			contactModal: {
-				title: {
-					add: "Add contact",
-					edit: "Edit contact",
-				},
-				form: {
-					mainInfo: "Contact details",
-					extraInfo: "Additional information",
-					name: "Name",
-					number: "Whatsapp number",
-					email: "Email",
-					extraName: "Field name",
-					extraValue: "Value",
-				},
-				buttons: {
-					addExtraInfo: "Add information",
-					okAdd: "Add",
-					okEdit: "Save",
-					cancel: "Cancel",
-				},
-				success: "Contact saved successfully.",
-			},
-			queueModal: {
-				title: {
-					add: "Add queue",
-					edit: "Edit queue",
-				},
-				form: {
-					name: "Name",
-					color: "Color",
-					greetingMessage: "Greeting Message",
-				},
-				buttons: {
-					okAdd: "Add",
-					okEdit: "Save",
-					cancel: "Cancel",
-				},
-			},
-			userModal: {
-				title: {
-					add: "Add user",
-					edit: "Edit user",
-				},
-				form: {
-					name: "Name",
-					email: "Email",
-					password: "Password",
-					profile: "Profile",
-				},
-				buttons: {
-					okAdd: "Add",
-					okEdit: "Save",
-					cancel: "Cancel",
-				},
-				success: "User saved successfully.",
-			},
-			chat: {
-				noTicketMessage: "Select a ticket to start chatting.",
-			},
-			ticketsManager: {
-				buttons: {
-					newTicket: "New",
-				},
-			},
-			ticketsQueueSelect: {
-				placeholder: "Queues",
-			},
-			tickets: {
-				toasts: {
-					deleted: "The ticket you were on has been deleted.",
-				},
-				notification: {
-					message: "Message from",
-				},
-				tabs: {
-					open: { title: "Inbox" },
-					closed: { title: "Resolved" },
-					search: { title: "Search" },
-				},
-				search: {
-					placeholder: "Search tickets and messages.",
-				},
-				buttons: {
-					showAll: "All",
-				},
-			},
-			transferTicketModal: {
-				title: "Transfer Ticket",
-				fieldLabel: "Type to search for users",
-				noOptions: "No user found with this name",
-				buttons: {
-					ok: "Transfer",
-					cancel: "Cancel",
-				},
-			},
-			ticketsList: {
-				pendingHeader: "Queue",
-				assignedHeader: "Working on",
-				noTicketsTitle: "Nothing here!",
-				noTicketsMessage: "No tickets found with this status or search term.",
-				buttons: {
-					accept: "Accept",
-				},
-			},
-			newTicketModal: {
-				title: "Create Ticket",
-				fieldLabel: "Type to search for a contact",
-				add: "Add",
-				buttons: {
-					ok: "Save",
-					cancel: "Cancel",
-				},
-			},
-			mainDrawer: {
-				listItems: {
-					dashboard: "Dashboard",
-					connections: "Connections",
-					tickets: "Tickets",
-					contacts: "Contacts",
-					queues: "Queues",
-					administration: "Administration",
-					users: "Users",
-					settings: "Settings",
-				},
-				appBar: {
-					user: {
-						profile: "Profile",
-						logout: "Logout",
-					},
-				},
-			},
-			notifications: {
-				noTickets: "No notifications.",
-			},
-			queues: {
-				title: "Queues",
-				table: {
-					name: "Name",
-					color: "Color",
-					greeting: "Greeting message",
-					actions: "Actions",
-				},
-				buttons: {
-					add: "Add queue",
-				},
-				confirmationModal: {
-					deleteTitle: "Delete",
-					deleteMessage:
-						"Are you sure? It cannot be reverted! Tickets in this queue will still exist, but will not have any queues assigned.",
-				},
-			},
-			queueSelect: {
-				inputLabel: "Queues",
-			},
-			users: {
-				title: "Users",
-				table: {
-					name: "Name",
-					email: "Email",
-					profile: "Profile",
-					actions: "Actions",
-				},
-				buttons: {
-					add: "Add user",
-				},
-				toasts: {
-					deleted: "User deleted sucessfully.",
-				},
-				confirmationModal: {
-					deleteTitle: "Delete",
-					deleteMessage:
-						"All user data will be lost. Users' open tickets will be moved to queue.",
-				},
-			},
-			settings: {
-				success: "Settings saved successfully.",
-				title: "Settings",
-				settings: {
-					userCreation: {
-						name: "User creation",
-						options: {
-							enabled: "Enabled",
-							disabled: "Disabled",
-						},
-					},
-				},
-			},
-			messagesList: {
-				header: {
-					assignedTo: "Assigned to:",
-					buttons: {
-						return: "Return",
-						resolve: "Resolve",
-						reopen: "Reopen",
-						accept: "Accept",
-					},
-				},
-			},
-			messagesInput: {
-				placeholderOpen: "Type a message",
-				placeholderClosed: "Reopen or accept this ticket to send a message.",
-				signMessage: "Sign",
-			},
-			contactDrawer: {
-				header: "Contact details",
-				buttons: {
-					edit: "Edit contact",
-				},
-				extraInfo: "Other information",
-			},
-			ticketOptionsMenu: {
-				delete: "Delete",
-				transfer: "Transfer",
-				confirmationModal: {
-					title: "Delete ticket #",
-					titleFrom: "from contact ",
-					message: "Attention! All ticket's related messages will be lost.",
-				},
-				buttons: {
-					delete: "Delete",
-					cancel: "Cancel",
-				},
-			},
-			confirmationModal: {
-				buttons: {
-					confirm: "Ok",
-					cancel: "Cancel",
-				},
-			},
-			messageOptionsMenu: {
-				delete: "Delete",
-				reply: "Reply",
-				confirmationModal: {
-					title: "Delete message?",
-					message: "This action cannot be reverted.",
-				},
-			},
-			backendErrors: {
-				ERR_NO_OTHER_WHATSAPP:
-					"There must be at lest one default WhatsApp connection.",
-				ERR_NO_DEF_WAPP_FOUND:
-					"No default WhatsApp found. Check connections page.",
-				ERR_WAPP_NOT_INITIALIZED:
-					"This WhatsApp session is not initialized. Check connections page.",
-				ERR_WAPP_CHECK_CONTACT:
-					"Could not check WhatsApp contact. Check connections page.",
-				ERR_WAPP_INVALID_CONTACT: "This is not a valid whatsapp number.",
-				ERR_WAPP_DOWNLOAD_MEDIA:
-					"Could not download media from WhatsApp. Check connections page.",
-				ERR_INVALID_CREDENTIALS: "Authentication error. Please try again.",
-				ERR_SENDING_WAPP_MSG:
-					"Error sending WhatsApp message. Check connections page.",
-				ERR_DELETE_WAPP_MSG: "Couldn't delete message from WhatsApp.",
-				ERR_OTHER_OPEN_TICKET:
-					"There's already an open ticket for this contact.",
-				ERR_SESSION_EXPIRED: "Session expired. Please login.",
-				ERR_USER_CREATION_DISABLED:
-					"User creation was disabled by administrator.",
-				ERR_NO_PERMISSION: "You don't have permission to access this resource.",
-				ERR_DUPLICATED_CONTACT: "A contact with this number already exists.",
-				ERR_NO_SETTING_FOUND: "No setting found with this ID.",
-				ERR_NO_CONTACT_FOUND: "No contact found with this ID.",
-				ERR_NO_TICKET_FOUND: "No ticket found with this ID.",
-				ERR_NO_USER_FOUND: "No user found with this ID.",
-				ERR_NO_WAPP_FOUND: "No WhatsApp found with this ID.",
-				ERR_CREATING_MESSAGE: "Error while creating message on database.",
-				ERR_CREATING_TICKET: "Error while creating ticket on database.",
-				ERR_FETCH_WAPP_MSG:
-					"Error fetching the message in WhtasApp, maybe it is too old.",
-				ERR_QUEUE_COLOR_ALREADY_EXISTS:
-					"This color is already in use, pick another one.",
-				ERR_WAPP_GREETING_REQUIRED:
-					"Greeting message is required if there is more than one queue.",
-			},
-		},
-	},
+  en: {
+    translations: {
+      signup: {
+        title: "Sign up",
+        toasts: {
+          success: "User created successfully! Please login!",
+          fail: "Error creating user. Check the reported data.",
+        },
+        form: {
+          name: "Name",
+          email: "Email",
+          password: "Password",
+        },
+        buttons: {
+          submit: "Register",
+          login: "Already have an account? Log in!",
+        },
+      },
+      login: {
+        title: "Login",
+        form: {
+          email: "Email",
+          password: "Password",
+        },
+        buttons: {
+          submit: "Enter",
+          register: "Don't have an account? Register!",
+        },
+      },
+      auth: {
+        toasts: {
+          success: "Login successfully!",
+        },
+      },
+      dashboard: {
+        charts: {
+          perDay: {
+            title: "Tickets today: ",
+          },
+        },
+      },
+      connections: {
+        title: "Connections",
+        toasts: {
+          deleted: "WhatsApp connection deleted sucessfully!",
+        },
+        confirmationModal: {
+          deleteTitle: "Delete",
+          deleteMessage: "Are you sure? It cannot be reverted.",
+          disconnectTitle: "Disconnect",
+          disconnectMessage: "Are you sure? You'll need to read QR Code again.",
+        },
+        buttons: {
+          add: "Add WhatsApp",
+          disconnect: "Disconnect",
+          tryAgain: "Try Again",
+          qrcode: "QR CODE",
+          newQr: "New QR CODE",
+          connecting: "Connectiing",
+        },
+        toolTips: {
+          disconnected: {
+            title: "Failed to start WhatsApp session",
+            content:
+              "Make sure your cell phone is connected to the internet and try again, or request a new QR Code",
+          },
+          qrcode: {
+            title: "Waiting for QR Code read",
+            content:
+              "Click on 'QR CODE' button and read the QR Code with your cell phone to start session",
+          },
+          connected: {
+            title: "Connection established",
+          },
+          timeout: {
+            title: "Connection with cell phone has been lost",
+            content:
+              "Make sure your cell phone is connected to the internet and WhatsApp is open, or click on 'Disconnect' button to get a new QRcode",
+          },
+        },
+        table: {
+          name: "Name",
+          status: "Status",
+          lastUpdate: "Last Update",
+          default: "Default",
+          actions: "Actions",
+          session: "Session",
+        },
+      },
+      whatsappModal: {
+        title: {
+          add: "Add WhatsApp",
+          edit: "Edit WhatsApp",
+        },
+        form: {
+          name: "Name",
+          default: "Default",
+        },
+        buttons: {
+          okAdd: "Add",
+          okEdit: "Save",
+          cancel: "Cancel",
+        },
+        success: "WhatsApp saved successfully.",
+      },
+      qrCode: {
+        message: "Read QrCode to start the session",
+      },
+      contacts: {
+        title: "Contacts",
+        toasts: {
+          deleted: "Contact deleted sucessfully!",
+        },
+        searchPlaceholder: "Search ...",
+        confirmationModal: {
+          deleteTitle: "Delete",
+          importTitlte: "Import contacts",
+          deleteMessage:
+            "Are you sure you want to delete this contact? All related tickets will be lost.",
+          importMessage: "Do you want to import all contacts from the phone?",
+        },
+        buttons: {
+          import: "Import Contacts",
+          add: "Add Contact",
+        },
+        table: {
+          name: "Name",
+          whatsapp: "WhatsApp",
+          email: "Email",
+          actions: "Actions",
+        },
+      },
+      contactModal: {
+        title: {
+          add: "Add contact",
+          edit: "Edit contact",
+        },
+        form: {
+          mainInfo: "Contact details",
+          extraInfo: "Additional information",
+          name: "Name",
+          number: "Whatsapp number",
+          email: "Email",
+          extraName: "Field name",
+          extraValue: "Value",
+        },
+        buttons: {
+          addExtraInfo: "Add information",
+          okAdd: "Add",
+          okEdit: "Save",
+          cancel: "Cancel",
+        },
+        success: "Contact saved successfully.",
+      },
+      quickAnswersModal: {
+        title: {
+          add: "Add Quick Reply",
+          edit: "Edit Quick Answer",
+        },
+        form: {
+          shortcut: "Shortcut",
+          message: "Quick Reply",
+        },
+        buttons: {
+          okAdd: "Add",
+          okEdit: "Save",
+          cancel: "Cancel",
+        },
+        success: "Quick Reply saved successfully.",
+      },
+      queueModal: {
+        title: {
+          add: "Add queue",
+          edit: "Edit queue",
+        },
+        form: {
+          name: "Name",
+          color: "Color",
+          greetingMessage: "Greeting Message",
+        },
+        buttons: {
+          okAdd: "Add",
+          okEdit: "Save",
+          cancel: "Cancel",
+        },
+      },
+      userModal: {
+        title: {
+          add: "Add user",
+          edit: "Edit user",
+        },
+        form: {
+          name: "Name",
+          email: "Email",
+          password: "Password",
+          profile: "Profile",
+        },
+        buttons: {
+          okAdd: "Add",
+          okEdit: "Save",
+          cancel: "Cancel",
+        },
+        success: "User saved successfully.",
+      },
+      chat: {
+        noTicketMessage: "Select a ticket to start chatting.",
+      },
+      ticketsManager: {
+        buttons: {
+          newTicket: "New",
+        },
+      },
+      ticketsQueueSelect: {
+        placeholder: "Queues",
+      },
+      tickets: {
+        toasts: {
+          deleted: "The ticket you were on has been deleted.",
+        },
+        notification: {
+          message: "Message from",
+        },
+        tabs: {
+          open: { title: "Inbox" },
+          closed: { title: "Resolved" },
+          search: { title: "Search" },
+        },
+        search: {
+          placeholder: "Search tickets and messages.",
+        },
+        buttons: {
+          showAll: "All",
+        },
+      },
+      transferTicketModal: {
+        title: "Transfer Ticket",
+        fieldLabel: "Type to search for users",
+        noOptions: "No user found with this name",
+        buttons: {
+          ok: "Transfer",
+          cancel: "Cancel",
+        },
+      },
+      ticketsList: {
+        pendingHeader: "Queue",
+        assignedHeader: "Working on",
+        noTicketsTitle: "Nothing here!",
+        noTicketsMessage: "No tickets found with this status or search term.",
+        buttons: {
+          accept: "Accept",
+        },
+      },
+      newTicketModal: {
+        title: "Create Ticket",
+        fieldLabel: "Type to search for a contact",
+        add: "Add",
+        buttons: {
+          ok: "Save",
+          cancel: "Cancel",
+        },
+      },
+      mainDrawer: {
+        listItems: {
+          dashboard: "Dashboard",
+          connections: "Connections",
+          tickets: "Tickets",
+          contacts: "Contacts",
+          quickAnswers: "Quick Answers",
+          queues: "Queues",
+          administration: "Administration",
+          users: "Users",
+          settings: "Settings",
+        },
+        appBar: {
+          user: {
+            profile: "Profile",
+            logout: "Logout",
+          },
+        },
+      },
+      notifications: {
+        noTickets: "No notifications.",
+      },
+      queues: {
+        title: "Queues",
+        table: {
+          name: "Name",
+          color: "Color",
+          greeting: "Greeting message",
+          actions: "Actions",
+        },
+        buttons: {
+          add: "Add queue",
+        },
+        confirmationModal: {
+          deleteTitle: "Delete",
+          deleteMessage:
+            "Are you sure? It cannot be reverted! Tickets in this queue will still exist, but will not have any queues assigned.",
+        },
+      },
+      queueSelect: {
+        inputLabel: "Queues",
+      },
+      quickAnswers: {
+        title: "Quick Answers",
+        table: {
+          shortcut: "Shortcut",
+          message: "Quick Reply",
+          actions: "Actions",
+        },
+        buttons: {
+          add: "Add Quick Reply",
+        },
+        toasts: {
+          deleted: "Quick Reply deleted successfully.",
+        },
+        searchPlaceholder: "Search...",
+        confirmationModal: {
+          deleteTitle: "Are you sure you want to delete this Quick Reply: ",
+          deleteMessage: "This action cannot be undone.",
+        },
+      },
+      users: {
+        title: "Users",
+        table: {
+          name: "Name",
+          email: "Email",
+          profile: "Profile",
+          actions: "Actions",
+        },
+        buttons: {
+          add: "Add user",
+        },
+        toasts: {
+          deleted: "User deleted sucessfully.",
+        },
+        confirmationModal: {
+          deleteTitle: "Delete",
+          deleteMessage:
+            "All user data will be lost. Users' open tickets will be moved to queue.",
+        },
+      },
+      settings: {
+        success: "Settings saved successfully.",
+        title: "Settings",
+        settings: {
+          userCreation: {
+            name: "User creation",
+            options: {
+              enabled: "Enabled",
+              disabled: "Disabled",
+            },
+          },
+        },
+      },
+      messagesList: {
+        header: {
+          assignedTo: "Assigned to:",
+          buttons: {
+            return: "Return",
+            resolve: "Resolve",
+            reopen: "Reopen",
+            accept: "Accept",
+          },
+        },
+      },
+      messagesInput: {
+        placeholderOpen: "Type a message",
+        placeholderClosed: "Reopen or accept this ticket to send a message.",
+        signMessage: "Sign",
+      },
+      contactDrawer: {
+        header: "Contact details",
+        buttons: {
+          edit: "Edit contact",
+        },
+        extraInfo: "Other information",
+      },
+      ticketOptionsMenu: {
+        delete: "Delete",
+        transfer: "Transfer",
+        confirmationModal: {
+          title: "Delete ticket #",
+          titleFrom: "from contact ",
+          message: "Attention! All ticket's related messages will be lost.",
+        },
+        buttons: {
+          delete: "Delete",
+          cancel: "Cancel",
+        },
+      },
+      confirmationModal: {
+        buttons: {
+          confirm: "Ok",
+          cancel: "Cancel",
+        },
+      },
+      messageOptionsMenu: {
+        delete: "Delete",
+        reply: "Reply",
+        confirmationModal: {
+          title: "Delete message?",
+          message: "This action cannot be reverted.",
+        },
+      },
+      backendErrors: {
+        ERR_NO_OTHER_WHATSAPP:
+          "There must be at lest one default WhatsApp connection.",
+        ERR_NO_DEF_WAPP_FOUND:
+          "No default WhatsApp found. Check connections page.",
+        ERR_WAPP_NOT_INITIALIZED:
+          "This WhatsApp session is not initialized. Check connections page.",
+        ERR_WAPP_CHECK_CONTACT:
+          "Could not check WhatsApp contact. Check connections page.",
+        ERR_WAPP_INVALID_CONTACT: "This is not a valid whatsapp number.",
+        ERR_WAPP_DOWNLOAD_MEDIA:
+          "Could not download media from WhatsApp. Check connections page.",
+        ERR_INVALID_CREDENTIALS: "Authentication error. Please try again.",
+        ERR_SENDING_WAPP_MSG:
+          "Error sending WhatsApp message. Check connections page.",
+        ERR_DELETE_WAPP_MSG: "Couldn't delete message from WhatsApp.",
+        ERR_OTHER_OPEN_TICKET:
+          "There's already an open ticket for this contact.",
+        ERR_SESSION_EXPIRED: "Session expired. Please login.",
+        ERR_USER_CREATION_DISABLED:
+          "User creation was disabled by administrator.",
+        ERR_NO_PERMISSION: "You don't have permission to access this resource.",
+        ERR_DUPLICATED_CONTACT: "A contact with this number already exists.",
+        ERR_NO_SETTING_FOUND: "No setting found with this ID.",
+        ERR_NO_CONTACT_FOUND: "No contact found with this ID.",
+        ERR_NO_TICKET_FOUND: "No ticket found with this ID.",
+        ERR_NO_USER_FOUND: "No user found with this ID.",
+        ERR_NO_WAPP_FOUND: "No WhatsApp found with this ID.",
+        ERR_CREATING_MESSAGE: "Error while creating message on database.",
+        ERR_CREATING_TICKET: "Error while creating ticket on database.",
+        ERR_FETCH_WAPP_MSG:
+          "Error fetching the message in WhtasApp, maybe it is too old.",
+        ERR_QUEUE_COLOR_ALREADY_EXISTS:
+          "This color is already in use, pick another one.",
+        ERR_WAPP_GREETING_REQUIRED:
+          "Greeting message is required if there is more than one queue.",
+      },
+    },
+  },
 };
 
 export { messages };
diff --git a/frontend/src/translate/languages/es.js b/frontend/src/translate/languages/es.js
index 7204966..7ed0c69 100644
--- a/frontend/src/translate/languages/es.js
+++ b/frontend/src/translate/languages/es.js
@@ -1,418 +1,455 @@
 const messages = {
-	es: {
-		translations: {
-			signup: {
-				title: "Registro",
-				toasts: {
-					success:
-						"¡El usuario ha sido creado satisfactoriamente! ¡Ahora inicia sesión!",
-					fail: "Error creando el usuario. Verifica la data reportada.",
-				},
-				form: {
-					name: "Nombre",
-					email: "Correo Electrónico",
-					password: "Contraseña",
-				},
-				buttons: {
-					submit: "Regístrate",
-					login: "¿Ya tienes una cuenta? ¡Inicia sesión!",
-				},
-			},
-			login: {
-				title: "Inicio de Sesión",
-				form: {
-					email: "Correo Electrónico",
-					password: "Contraseña",
-				},
-				buttons: {
-					submit: "Ingresa",
-					register: "¿No tienes cuenta? ¡Regístrate!",
-				},
-			},
-			auth: {
-				toasts: {
-					success: "¡Inicio de sesión exitoso!",
-				},
-			},
-			dashboard: {
-				charts: {
-					perDay: {
-						title: "Tickets hoy: ",
-					},
-				},
-			},
-			connections: {
-				title: "Conexiones",
-				toasts: {
-					deleted:
-						"¡La conexión de WhatsApp ha sido borrada satisfactoriamente!",
-				},
-				confirmationModal: {
-					deleteTitle: "Borrar",
-					deleteMessage: "¿Estás seguro? Este proceso no puede ser revertido.",
-					disconnectTitle: "Desconectar",
-					disconnectMessage: "Estás seguro? Deberá volver a leer el código QR",
-				},
-				buttons: {
-					add: "Agrega WhatsApp",
-					disconnect: "Desconectar",
-					tryAgain: "Inténtalo de nuevo",
-					qrcode: "QR CODE",
-					newQr: "Nuevo QR CODE",
-					connecting: "Conectando",
-				},
-				toolTips: {
-					disconnected: {
-						title: "No se pudo iniciar la sesión de WhatsApp",
-						content:
-							"Asegúrese de que su teléfono celular esté conectado a Internet y vuelva a intentarlo o solicite un nuevo código QR",
-					},
-					qrcode: {
-						title: "Esperando la lectura del código QR",
-						content:
-							"Haga clic en el botón 'CÓDIGO QR' y lea el Código QR con su teléfono celular para iniciar la sesión",
-					},
-					connected: {
-						title: "Conexión establecida",
-					},
-					timeout: {
-						title: "Se perdió la conexión con el teléfono celular",
-						content:
-							"Asegúrese de que su teléfono celular esté conectado a Internet y que WhatsApp esté abierto, o haga clic en el botón 'Desconectar' para obtener un nuevo código QR",
-					},
-				},
-				table: {
-					name: "Nombre",
-					status: "Estado",
-					lastUpdate: "Última Actualización",
-					default: "Por Defecto",
-					actions: "Acciones",
-					session: "Sesión",
-				},
-			},
-			whatsappModal: {
-				title: {
-					add: "Agrega WhatsApp",
-					edit: "Edita WhatsApp",
-				},
-				form: {
-					name: "Nombre",
-					default: "Por Defecto",
-				},
-				buttons: {
-					okAdd: "Agregar",
-					okEdit: "Guardar",
-					cancel: "Cancelar",
-				},
-				success: "WhatsApp guardado satisfactoriamente.",
-			},
-			qrCode: {
-				message: "Lée el código QR para empezar la sesión.",
-			},
-			contacts: {
-				title: "Contactos",
-				toasts: {
-					deleted: "¡Contacto borrado satisfactoriamente!",
-				},
-				searchPlaceholder: "Buscar...",
-				confirmationModal: {
-					deleteTitle: "Borrar",
-					importTitlte: "Importar contactos",
-					deleteMessage:
-						"¿Estás seguro que deseas borrar este contacto? Todos los tickets relacionados se perderán.",
-					importMessage:
-						"¿Quieres importar todos los contactos desde tu teléfono?",
-				},
-				buttons: {
-					import: "Importar Contactos",
-					add: "Agregar Contacto",
-				},
-				table: {
-					name: "Nombre",
-					whatsapp: "WhatsApp",
-					email: "Correo Electrónico",
-					actions: "Acciones",
-				},
-			},
-			contactModal: {
-				title: {
-					add: "Agregar contacto",
-					edit: "Editar contacto",
-				},
-				form: {
-					mainInfo: "Detalles del contacto",
-					extraInfo: "Información adicional",
-					name: "Nombre",
-					number: "Número de Whatsapp",
-					email: "Correo Electrónico",
-					extraName: "Nombre del Campo",
-					extraValue: "Valor",
-				},
-				buttons: {
-					addExtraInfo: "Agregar información",
-					okAdd: "Agregar",
-					okEdit: "Guardar",
-					cancel: "Cancelar",
-				},
-				success: "Contacto guardado satisfactoriamente.",
-			},
-			queueModal: {
-				title: {
-					add: "Agregar cola",
-					edit: "Editar cola",
-				},
-				form: {
-					name: "Nombre",
-					color: "Color",
-					greetingMessage: "Mensaje de saludo",
-				},
-				buttons: {
-					okAdd: "Añadir",
-					okEdit: "Ahorrar",
-					cancel: "Cancelar",
-				},
-			},
-			userModal: {
-				title: {
-					add: "Agregar usuario",
-					edit: "Editar usuario",
-				},
-				form: {
-					name: "Nombre",
-					email: "Correo Electrónico",
-					password: "Contraseña",
-					profile: "Perfil",
-				},
-				buttons: {
-					okAdd: "Agregar",
-					okEdit: "Guardar",
-					cancel: "Cancelar",
-				},
-				success: "Usuario guardado satisfactoriamente.",
-			},
-			chat: {
-				noTicketMessage: "Selecciona un ticket para empezar a chatear.",
-			},
-			ticketsManager: {
-				buttons: {
-					newTicket: "Nuevo",
-				},
-			},
-			ticketsQueueSelect: {
-				placeholder: "Linhas",
-			},
-			tickets: {
-				toasts: {
-					deleted: "El ticket en el que estabas ha sido borrado.",
-				},
-				notification: {
-					message: "Mensaje de",
-				},
-				tabs: {
-					open: { title: "Bandeja" },
-					closed: { title: "Resueltos" },
-					search: { title: "Buscar" },
-				},
-				search: {
-					placeholder: "Buscar tickets y mensajes.",
-				},
-				buttons: {
-					showAll: "Todos",
-				},
-			},
-			transferTicketModal: {
-				title: "Transferir Ticket",
-				fieldLabel: "Escriba para buscar usuarios",
-				noOptions: "No se encontraron usuarios con ese nombre",
-				buttons: {
-					ok: "Transferir",
-					cancel: "Cancelar",
-				},
-			},
-			ticketsList: {
-				pendingHeader: "Cola",
-				assignedHeader: "Trabajando en",
-				noTicketsTitle: "¡Nada acá!",
-				noTicketsMessage:
-					"No se encontraron tickets con este estado o término de búsqueda",
-				buttons: {
-					accept: "Acceptar",
-				},
-			},
-			newTicketModal: {
-				title: "Crear Ticket",
-				fieldLabel: "Escribe para buscar un contacto",
-				add: "Añadir",
-				buttons: {
-					ok: "Guardar",
-					cancel: "Cancelar",
-				},
-			},
-			mainDrawer: {
-				listItems: {
-					dashboard: "Dashboard",
-					connections: "Conexiones",
-					tickets: "Tickets",
-					contacts: "Contactos",
-					queues: "Linhas",
-					administration: "Administración",
-					users: "Usuarios",
-					settings: "Configuración",
-				},
-				appBar: {
-					user: {
-						profile: "Perfil",
-						logout: "Cerrar Sesión",
-					},
-				},
-			},
-			notifications: {
-				noTickets: "Sin notificaciones.",
-			},
-			queues: {
-				title: "Linhas",
-				table: {
-					name: "Nombre",
-					color: "Color",
-					greeting: "Mensaje de saludo",
-					actions: "Comportamiento",
-				},
-				buttons: {
-					add: "Agregar cola",
-				},
-				confirmationModal: {
-					deleteTitle: "Eliminar",
-					deleteMessage:
-						"¿Estás seguro? ¡Esta acción no se puede revertir! Los tickets en esa cola seguirán existiendo, pero ya no tendrán ninguna cola asignada.",
-				},
-			},
-			queueSelect: {
-				inputLabel: "Linhas",
-			},
-			users: {
-				title: "Usuarios",
-				table: {
-					name: "Nombre",
-					email: "Correo Electrónico",
-					profile: "Perfil",
-					actions: "Acciones",
-				},
-				buttons: {
-					add: "Agregar usuario",
-				},
-				toasts: {
-					deleted: "Usuario borrado satisfactoriamente.",
-				},
-				confirmationModal: {
-					deleteTitle: "Borrar",
-					deleteMessage:
-						"Toda la información del usuario se perderá. Los tickets abiertos de los usuarios se moverán a la cola.",
-				},
-			},
-			settings: {
-				success: "Configuración guardada satisfactoriamente.",
-				title: "Configuración",
-				settings: {
-					userCreation: {
-						name: "Creación de usuarios",
-						options: {
-							enabled: "Habilitado",
-							disabled: "Deshabilitado",
-						},
-					},
-				},
-			},
-			messagesList: {
-				header: {
-					assignedTo: "Asignado a:",
-					buttons: {
-						return: "Devolver",
-						resolve: "Resolver",
-						reopen: "Reabrir",
-						accept: "Aceptar",
-					},
-				},
-			},
-			messagesInput: {
-				placeholderOpen: "Escribe un mensaje",
-				placeholderClosed:
-					"Vuelva a abrir o acepte este ticket para enviar un mensaje.",
-				signMessage: "Firmar",
-			},
-			contactDrawer: {
-				header: "Detalles del contacto",
-				buttons: {
-					edit: "Editar contacto",
-				},
-				extraInfo: "Otra información",
-			},
-			ticketOptionsMenu: {
-				delete: "Borrar",
-				transfer: "Transferir",
-				confirmationModal: {
-					title: "¿Borrar ticket #",
-					titleFrom: "del contacto ",
-					message:
-						"¡Atención! Todos los mensajes Todos los mensajes relacionados con el ticket se perderán.",
-				},
-				buttons: {
-					delete: "Borrar",
-					cancel: "Cancelar",
-				},
-			},
-			confirmationModal: {
-				buttons: {
-					confirm: "Ok",
-					cancel: "Cancelar",
-				},
-			},
-			messageOptionsMenu: {
-				delete: "Borrar",
-				reply: "Responder",
-				confirmationModal: {
-					title: "¿Borrar mensaje?",
-					message: "Esta acción no puede ser revertida.",
-				},
-			},
-			backendErrors: {
-				ERR_NO_OTHER_WHATSAPP:
-					"Debe haber al menos una conexión de WhatsApp predeterminada.",
-				ERR_NO_DEF_WAPP_FOUND:
-					"No se encontró WhatsApp predeterminado. Verifique la página de conexiones.",
-				ERR_WAPP_NOT_INITIALIZED:
-					"Esta sesión de WhatsApp no ​​está inicializada. Verifique la página de conexiones.",
-				ERR_WAPP_CHECK_CONTACT:
-					"No se pudo verificar el contacto de WhatsApp. Verifique la página de conexiones.",
-				ERR_WAPP_INVALID_CONTACT: "Este no es un número de whatsapp válido.",
-				ERR_WAPP_DOWNLOAD_MEDIA:
-					"No se pudieron descargar los medios de WhatsApp. Verifique la página de conexiones.",
-				ERR_INVALID_CREDENTIALS: "Error de autenticación. Vuelva a intentarlo.",
-				ERR_SENDING_WAPP_MSG:
-					"Error al enviar el mensaje de WhatsApp. Verifique la página de conexiones.",
-				ERR_DELETE_WAPP_MSG: "No se pudo borrar el mensaje de WhatsApp.",
-				ERR_OTHER_OPEN_TICKET: "Ya hay un ticket abierto para este contacto.",
-				ERR_SESSION_EXPIRED: "Sesión caducada. Inicie sesión.",
-				ERR_USER_CREATION_DISABLED:
-					"La creación de usuarios fue deshabilitada por el administrador.",
-				ERR_NO_PERMISSION: "No tienes permiso para acceder a este recurso.",
-				ERR_DUPLICATED_CONTACT: "Ya existe un contacto con este número.",
-				ERR_NO_SETTING_FOUND:
-					"No se encontró ninguna configuración con este ID.",
-				ERR_NO_CONTACT_FOUND: "No se encontró ningún contacto con este ID.",
-				ERR_NO_TICKET_FOUND: "No se encontró ningún ticket con este ID.",
-				ERR_NO_USER_FOUND: "No se encontró ningún usuario con este ID.",
-				ERR_NO_WAPP_FOUND: "No se encontró WhatsApp con este ID.",
-				ERR_CREATING_MESSAGE: "Error al crear el mensaje en la base de datos.",
-				ERR_CREATING_TICKET: "Error al crear el ticket en la base de datos.",
-				ERR_FETCH_WAPP_MSG:
-					"Error al obtener el mensaje en WhtasApp, tal vez sea demasiado antiguo.",
-				ERR_QUEUE_COLOR_ALREADY_EXISTS:
-					"Este color ya está en uso, elija otro.",
-				ERR_WAPP_GREETING_REQUIRED:
-					"El mensaje de saludo es obligatorio cuando hay más de una cola.",
-			},
-		},
-	},
+  es: {
+    translations: {
+      signup: {
+        title: "Registro",
+        toasts: {
+          success:
+            "¡El usuario ha sido creado satisfactoriamente! ¡Ahora inicia sesión!",
+          fail: "Error creando el usuario. Verifica la data reportada.",
+        },
+        form: {
+          name: "Nombre",
+          email: "Correo Electrónico",
+          password: "Contraseña",
+        },
+        buttons: {
+          submit: "Regístrate",
+          login: "¿Ya tienes una cuenta? ¡Inicia sesión!",
+        },
+      },
+      login: {
+        title: "Inicio de Sesión",
+        form: {
+          email: "Correo Electrónico",
+          password: "Contraseña",
+        },
+        buttons: {
+          submit: "Ingresa",
+          register: "¿No tienes cuenta? ¡Regístrate!",
+        },
+      },
+      auth: {
+        toasts: {
+          success: "¡Inicio de sesión exitoso!",
+        },
+      },
+      dashboard: {
+        charts: {
+          perDay: {
+            title: "Tickets hoy: ",
+          },
+        },
+      },
+      connections: {
+        title: "Conexiones",
+        toasts: {
+          deleted:
+            "¡La conexión de WhatsApp ha sido borrada satisfactoriamente!",
+        },
+        confirmationModal: {
+          deleteTitle: "Borrar",
+          deleteMessage: "¿Estás seguro? Este proceso no puede ser revertido.",
+          disconnectTitle: "Desconectar",
+          disconnectMessage: "Estás seguro? Deberá volver a leer el código QR",
+        },
+        buttons: {
+          add: "Agrega WhatsApp",
+          disconnect: "Desconectar",
+          tryAgain: "Inténtalo de nuevo",
+          qrcode: "QR CODE",
+          newQr: "Nuevo QR CODE",
+          connecting: "Conectando",
+        },
+        toolTips: {
+          disconnected: {
+            title: "No se pudo iniciar la sesión de WhatsApp",
+            content:
+              "Asegúrese de que su teléfono celular esté conectado a Internet y vuelva a intentarlo o solicite un nuevo código QR",
+          },
+          qrcode: {
+            title: "Esperando la lectura del código QR",
+            content:
+              "Haga clic en el botón 'CÓDIGO QR' y lea el Código QR con su teléfono celular para iniciar la sesión",
+          },
+          connected: {
+            title: "Conexión establecida",
+          },
+          timeout: {
+            title: "Se perdió la conexión con el teléfono celular",
+            content:
+              "Asegúrese de que su teléfono celular esté conectado a Internet y que WhatsApp esté abierto, o haga clic en el botón 'Desconectar' para obtener un nuevo código QR",
+          },
+        },
+        table: {
+          name: "Nombre",
+          status: "Estado",
+          lastUpdate: "Última Actualización",
+          default: "Por Defecto",
+          actions: "Acciones",
+          session: "Sesión",
+        },
+      },
+      whatsappModal: {
+        title: {
+          add: "Agrega WhatsApp",
+          edit: "Edita WhatsApp",
+        },
+        form: {
+          name: "Nombre",
+          default: "Por Defecto",
+        },
+        buttons: {
+          okAdd: "Agregar",
+          okEdit: "Guardar",
+          cancel: "Cancelar",
+        },
+        success: "WhatsApp guardado satisfactoriamente.",
+      },
+      qrCode: {
+        message: "Lée el código QR para empezar la sesión.",
+      },
+      contacts: {
+        title: "Contactos",
+        toasts: {
+          deleted: "¡Contacto borrado satisfactoriamente!",
+        },
+        searchPlaceholder: "Buscar...",
+        confirmationModal: {
+          deleteTitle: "Borrar",
+          importTitlte: "Importar contactos",
+          deleteMessage:
+            "¿Estás seguro que deseas borrar este contacto? Todos los tickets relacionados se perderán.",
+          importMessage:
+            "¿Quieres importar todos los contactos desde tu teléfono?",
+        },
+        buttons: {
+          import: "Importar Contactos",
+          add: "Agregar Contacto",
+        },
+        table: {
+          name: "Nombre",
+          whatsapp: "WhatsApp",
+          email: "Correo Electrónico",
+          actions: "Acciones",
+        },
+      },
+      contactModal: {
+        title: {
+          add: "Agregar contacto",
+          edit: "Editar contacto",
+        },
+        form: {
+          mainInfo: "Detalles del contacto",
+          extraInfo: "Información adicional",
+          name: "Nombre",
+          number: "Número de Whatsapp",
+          email: "Correo Electrónico",
+          extraName: "Nombre del Campo",
+          extraValue: "Valor",
+        },
+        buttons: {
+          addExtraInfo: "Agregar información",
+          okAdd: "Agregar",
+          okEdit: "Guardar",
+          cancel: "Cancelar",
+        },
+        success: "Contacto guardado satisfactoriamente.",
+      },
+      quickAnswersModal: {
+        title: {
+          add: "Agregar respuesta rápida",
+          edit: "Editar respuesta rápida",
+        },
+        form: {
+          shortcut: "Atajo",
+          message: "Respuesta rápida",
+        },
+        buttons: {
+          okAdd: "Agregar",
+          okEdit: "Guardar",
+          cancel: "Cancelar",
+        },
+        success: "Respuesta rápida guardada correctamente.",
+      },
+      queueModal: {
+        title: {
+          add: "Agregar cola",
+          edit: "Editar cola",
+        },
+        form: {
+          name: "Nombre",
+          color: "Color",
+          greetingMessage: "Mensaje de saludo",
+        },
+        buttons: {
+          okAdd: "Añadir",
+          okEdit: "Ahorrar",
+          cancel: "Cancelar",
+        },
+      },
+      userModal: {
+        title: {
+          add: "Agregar usuario",
+          edit: "Editar usuario",
+        },
+        form: {
+          name: "Nombre",
+          email: "Correo Electrónico",
+          password: "Contraseña",
+          profile: "Perfil",
+        },
+        buttons: {
+          okAdd: "Agregar",
+          okEdit: "Guardar",
+          cancel: "Cancelar",
+        },
+        success: "Usuario guardado satisfactoriamente.",
+      },
+      chat: {
+        noTicketMessage: "Selecciona un ticket para empezar a chatear.",
+      },
+      ticketsManager: {
+        buttons: {
+          newTicket: "Nuevo",
+        },
+      },
+      ticketsQueueSelect: {
+        placeholder: "Linhas",
+      },
+      tickets: {
+        toasts: {
+          deleted: "El ticket en el que estabas ha sido borrado.",
+        },
+        notification: {
+          message: "Mensaje de",
+        },
+        tabs: {
+          open: { title: "Bandeja" },
+          closed: { title: "Resueltos" },
+          search: { title: "Buscar" },
+        },
+        search: {
+          placeholder: "Buscar tickets y mensajes.",
+        },
+        buttons: {
+          showAll: "Todos",
+        },
+      },
+      transferTicketModal: {
+        title: "Transferir Ticket",
+        fieldLabel: "Escriba para buscar usuarios",
+        noOptions: "No se encontraron usuarios con ese nombre",
+        buttons: {
+          ok: "Transferir",
+          cancel: "Cancelar",
+        },
+      },
+      ticketsList: {
+        pendingHeader: "Cola",
+        assignedHeader: "Trabajando en",
+        noTicketsTitle: "¡Nada acá!",
+        noTicketsMessage:
+          "No se encontraron tickets con este estado o término de búsqueda",
+        buttons: {
+          accept: "Acceptar",
+        },
+      },
+      newTicketModal: {
+        title: "Crear Ticket",
+        fieldLabel: "Escribe para buscar un contacto",
+        add: "Añadir",
+        buttons: {
+          ok: "Guardar",
+          cancel: "Cancelar",
+        },
+      },
+      mainDrawer: {
+        listItems: {
+          dashboard: "Dashboard",
+          connections: "Conexiones",
+          tickets: "Tickets",
+          contacts: "Contactos",
+          quickAnswers: "Respuestas rápidas",
+          queues: "Linhas",
+          administration: "Administración",
+          users: "Usuarios",
+          settings: "Configuración",
+        },
+        appBar: {
+          user: {
+            profile: "Perfil",
+            logout: "Cerrar Sesión",
+          },
+        },
+      },
+      notifications: {
+        noTickets: "Sin notificaciones.",
+      },
+      queues: {
+        title: "Linhas",
+        table: {
+          name: "Nombre",
+          color: "Color",
+          greeting: "Mensaje de saludo",
+          actions: "Comportamiento",
+        },
+        buttons: {
+          add: "Agregar cola",
+        },
+        confirmationModal: {
+          deleteTitle: "Eliminar",
+          deleteMessage:
+            "¿Estás seguro? ¡Esta acción no se puede revertir! Los tickets en esa cola seguirán existiendo, pero ya no tendrán ninguna cola asignada.",
+        },
+      },
+      queueSelect: {
+        inputLabel: "Linhas",
+      },
+      quickAnswers: {
+        title: "Respuestas rápidas",
+        table: {
+          shortcut: "Atajo",
+          message: "Respuesta rápida",
+          actions: "Acciones",
+        },
+        buttons: {
+          add: "Agregar respuesta rápida",
+        },
+        toasts: {
+          deleted: "Respuesta rápida eliminada correctamente",
+        },
+        searchPlaceholder: "Buscar ...",
+        confirmationModal: {
+          deleteTitle:
+            "¿Está seguro de que desea eliminar esta respuesta rápida?",
+          deleteMessage: "Esta acción no se puede deshacer.",
+        },
+      },
+      users: {
+        title: "Usuarios",
+        table: {
+          name: "Nombre",
+          email: "Correo Electrónico",
+          profile: "Perfil",
+          actions: "Acciones",
+        },
+        buttons: {
+          add: "Agregar usuario",
+        },
+        toasts: {
+          deleted: "Usuario borrado satisfactoriamente.",
+        },
+        confirmationModal: {
+          deleteTitle: "Borrar",
+          deleteMessage:
+            "Toda la información del usuario se perderá. Los tickets abiertos de los usuarios se moverán a la cola.",
+        },
+      },
+      settings: {
+        success: "Configuración guardada satisfactoriamente.",
+        title: "Configuración",
+        settings: {
+          userCreation: {
+            name: "Creación de usuarios",
+            options: {
+              enabled: "Habilitado",
+              disabled: "Deshabilitado",
+            },
+          },
+        },
+      },
+      messagesList: {
+        header: {
+          assignedTo: "Asignado a:",
+          buttons: {
+            return: "Devolver",
+            resolve: "Resolver",
+            reopen: "Reabrir",
+            accept: "Aceptar",
+          },
+        },
+      },
+      messagesInput: {
+        placeholderOpen: "Escribe un mensaje",
+        placeholderClosed:
+          "Vuelva a abrir o acepte este ticket para enviar un mensaje.",
+        signMessage: "Firmar",
+      },
+      contactDrawer: {
+        header: "Detalles del contacto",
+        buttons: {
+          edit: "Editar contacto",
+        },
+        extraInfo: "Otra información",
+      },
+      ticketOptionsMenu: {
+        delete: "Borrar",
+        transfer: "Transferir",
+        confirmationModal: {
+          title: "¿Borrar ticket #",
+          titleFrom: "del contacto ",
+          message:
+            "¡Atención! Todos los mensajes Todos los mensajes relacionados con el ticket se perderán.",
+        },
+        buttons: {
+          delete: "Borrar",
+          cancel: "Cancelar",
+        },
+      },
+      confirmationModal: {
+        buttons: {
+          confirm: "Ok",
+          cancel: "Cancelar",
+        },
+      },
+      messageOptionsMenu: {
+        delete: "Borrar",
+        reply: "Responder",
+        confirmationModal: {
+          title: "¿Borrar mensaje?",
+          message: "Esta acción no puede ser revertida.",
+        },
+      },
+      backendErrors: {
+        ERR_NO_OTHER_WHATSAPP:
+          "Debe haber al menos una conexión de WhatsApp predeterminada.",
+        ERR_NO_DEF_WAPP_FOUND:
+          "No se encontró WhatsApp predeterminado. Verifique la página de conexiones.",
+        ERR_WAPP_NOT_INITIALIZED:
+          "Esta sesión de WhatsApp no ​​está inicializada. Verifique la página de conexiones.",
+        ERR_WAPP_CHECK_CONTACT:
+          "No se pudo verificar el contacto de WhatsApp. Verifique la página de conexiones.",
+        ERR_WAPP_INVALID_CONTACT: "Este no es un número de whatsapp válido.",
+        ERR_WAPP_DOWNLOAD_MEDIA:
+          "No se pudieron descargar los medios de WhatsApp. Verifique la página de conexiones.",
+        ERR_INVALID_CREDENTIALS: "Error de autenticación. Vuelva a intentarlo.",
+        ERR_SENDING_WAPP_MSG:
+          "Error al enviar el mensaje de WhatsApp. Verifique la página de conexiones.",
+        ERR_DELETE_WAPP_MSG: "No se pudo borrar el mensaje de WhatsApp.",
+        ERR_OTHER_OPEN_TICKET: "Ya hay un ticket abierto para este contacto.",
+        ERR_SESSION_EXPIRED: "Sesión caducada. Inicie sesión.",
+        ERR_USER_CREATION_DISABLED:
+          "La creación de usuarios fue deshabilitada por el administrador.",
+        ERR_NO_PERMISSION: "No tienes permiso para acceder a este recurso.",
+        ERR_DUPLICATED_CONTACT: "Ya existe un contacto con este número.",
+        ERR_NO_SETTING_FOUND:
+          "No se encontró ninguna configuración con este ID.",
+        ERR_NO_CONTACT_FOUND: "No se encontró ningún contacto con este ID.",
+        ERR_NO_TICKET_FOUND: "No se encontró ningún ticket con este ID.",
+        ERR_NO_USER_FOUND: "No se encontró ningún usuario con este ID.",
+        ERR_NO_WAPP_FOUND: "No se encontró WhatsApp con este ID.",
+        ERR_CREATING_MESSAGE: "Error al crear el mensaje en la base de datos.",
+        ERR_CREATING_TICKET: "Error al crear el ticket en la base de datos.",
+        ERR_FETCH_WAPP_MSG:
+          "Error al obtener el mensaje en WhtasApp, tal vez sea demasiado antiguo.",
+        ERR_QUEUE_COLOR_ALREADY_EXISTS:
+          "Este color ya está en uso, elija otro.",
+        ERR_WAPP_GREETING_REQUIRED:
+          "El mensaje de saludo es obligatorio cuando hay más de una cola.",
+      },
+    },
+  },
 };
 
 export { messages };
diff --git a/frontend/src/translate/languages/pt.js b/frontend/src/translate/languages/pt.js
index f223ead..1c3e400 100644
--- a/frontend/src/translate/languages/pt.js
+++ b/frontend/src/translate/languages/pt.js
@@ -1,414 +1,451 @@
 const messages = {
-	pt: {
-		translations: {
-			signup: {
-				title: "Cadastre-se",
-				toasts: {
-					success: "Usuário criado com sucesso! Faça seu login!!!.",
-					fail: "Erro ao criar usuário. Verifique os dados informados.",
-				},
-				form: {
-					name: "Nome",
-					email: "Email",
-					password: "Senha",
-				},
-				buttons: {
-					submit: "Cadastrar",
-					login: "Já tem uma conta? Entre!",
-				},
-			},
-			login: {
-				title: "Login",
-				form: {
-					email: "Email",
-					password: "Senha",
-				},
-				buttons: {
-					submit: "Entrar",
-					register: "Não tem um conta? Cadastre-se!",
-				},
-			},
-			auth: {
-				toasts: {
-					success: "Login efetuado com sucesso!",
-				},
-			},
-			dashboard: {
-				charts: {
-					perDay: {
-						title: "Tickets hoje: ",
-					},
-				},
-			},
-			connections: {
-				title: "Conexões",
-				toasts: {
-					deleted: "Conexão com o WhatsApp excluída com sucesso!",
-				},
-				confirmationModal: {
-					deleteTitle: "Deletar",
-					deleteMessage: "Você tem certeza? Essa ação não pode ser revertida.",
-					disconnectTitle: "Desconectar",
-					disconnectMessage:
-						"Tem certeza? Você precisará ler o QR Code novamente.",
-				},
-				buttons: {
-					add: "Adicionar WhatsApp",
-					disconnect: "desconectar",
-					tryAgain: "Tentar novamente",
-					qrcode: "QR CODE",
-					newQr: "Novo QR CODE",
-					connecting: "Conectando",
-				},
-				toolTips: {
-					disconnected: {
-						title: "Falha ao iniciar sessão do WhatsApp",
-						content:
-							"Certifique-se de que seu celular esteja conectado à internet e tente novamente, ou solicite um novo QR Code",
-					},
-					qrcode: {
-						title: "Esperando leitura do QR Code",
-						content:
-							"Clique no botão 'QR CODE' e leia o QR Code com o seu celular para iniciar a sessão",
-					},
-					connected: {
-						title: "Conexão estabelecida!",
-					},
-					timeout: {
-						title: "A conexão com o celular foi perdida",
-						content:
-							"Certifique-se de que seu celular esteja conectado à internet e o WhatsApp esteja aberto, ou clique no botão 'Desconectar' para obter um novo QR Code",
-					},
-				},
-				table: {
-					name: "Nome",
-					status: "Status",
-					lastUpdate: "Última atualização",
-					default: "Padrão",
-					actions: "Ações",
-					session: "Sessão",
-				},
-			},
-			whatsappModal: {
-				title: {
-					add: "Adicionar WhatsApp",
-					edit: "Editar WhatsApp",
-				},
-				form: {
-					name: "Nome",
-					default: "Padrão",
-				},
-				buttons: {
-					okAdd: "Adicionar",
-					okEdit: "Salvar",
-					cancel: "Cancelar",
-				},
-				success: "WhatsApp salvo com sucesso.",
-			},
-			qrCode: {
-				message: "Leia o QrCode para iniciar a sessão",
-			},
-			contacts: {
-				title: "Contatos",
-				toasts: {
-					deleted: "Contato excluído com sucesso!",
-				},
-				searchPlaceholder: "Pesquisar...",
-				confirmationModal: {
-					deleteTitle: "Deletar ",
-					importTitlte: "Importar contatos",
-					deleteMessage:
-						"Tem certeza que deseja deletar este contato? Todos os tickets relacionados serão perdidos.",
-					importMessage: "Deseja importas todos os contatos do telefone?",
-				},
-				buttons: {
-					import: "Importar Contatos",
-					add: "Adicionar Contato",
-				},
-				table: {
-					name: "Nome",
-					whatsapp: "WhatsApp",
-					email: "Email",
-					actions: "Ações",
-				},
-			},
-			contactModal: {
-				title: {
-					add: "Adicionar contato",
-					edit: "Editar contato",
-				},
-				form: {
-					mainInfo: "Dados do contato",
-					extraInfo: "Informações adicionais",
-					name: "Nome",
-					number: "Número do Whatsapp",
-					email: "Email",
-					extraName: "Nome do campo",
-					extraValue: "Valor",
-				},
-				buttons: {
-					addExtraInfo: "Adicionar informação",
-					okAdd: "Adicionar",
-					okEdit: "Salvar",
-					cancel: "Cancelar",
-				},
-				success: "Contato salvo com sucesso.",
-			},
-			queueModal: {
-				title: {
-					add: "Adicionar fila",
-					edit: "Editar fila",
-				},
-				form: {
-					name: "Nome",
-					color: "Cor",
-					greetingMessage: "Mensagem de saudação",
-				},
-				buttons: {
-					okAdd: "Adicionar",
-					okEdit: "Salvar",
-					cancel: "Cancelar",
-				},
-			},
-			userModal: {
-				title: {
-					add: "Adicionar usuário",
-					edit: "Editar usuário",
-				},
-				form: {
-					name: "Nome",
-					email: "Email",
-					password: "Senha",
-					profile: "Perfil",
-				},
-				buttons: {
-					okAdd: "Adicionar",
-					okEdit: "Salvar",
-					cancel: "Cancelar",
-				},
-				success: "Usuário salvo com sucesso.",
-			},
-			chat: {
-				noTicketMessage: "Selecione um ticket para começar a conversar.",
-			},
-			ticketsManager: {
-				buttons: {
-					newTicket: "Novo",
-				},
-			},
-			ticketsQueueSelect: {
-				placeholder: "Filas",
-			},
-			tickets: {
-				toasts: {
-					deleted: "O ticket que você estava foi deletado.",
-				},
-				notification: {
-					message: "Mensagem de",
-				},
-				tabs: {
-					open: { title: "Inbox" },
-					closed: { title: "Resolvidos" },
-					search: { title: "Busca" },
-				},
-				search: {
-					placeholder: "Buscar tickets e mensagens",
-				},
-				buttons: {
-					showAll: "Todos",
-				},
-			},
-			transferTicketModal: {
-				title: "Transferir Ticket",
-				fieldLabel: "Digite para buscar usuários",
-				noOptions: "Nenhum usuário encontrado com esse nome",
-				buttons: {
-					ok: "Transferir",
-					cancel: "Cancelar",
-				},
-			},
-			ticketsList: {
-				pendingHeader: "Aguardando",
-				assignedHeader: "Atendendo",
-				noTicketsTitle: "Nada aqui!",
-				noTicketsMessage:
-					"Nenhum ticket encontrado com esse status ou termo pesquisado",
-				buttons: {
-					accept: "Aceitar",
-				},
-			},
-			newTicketModal: {
-				title: "Criar Ticket",
-				fieldLabel: "Digite para pesquisar o contato",
-				add: "Adicionar",
-				buttons: {
-					ok: "Salvar",
-					cancel: "Cancelar",
-				},
-			},
-			mainDrawer: {
-				listItems: {
-					dashboard: "Dashboard",
-					connections: "Conexões",
-					tickets: "Tickets",
-					contacts: "Contatos",
-					queues: "Filas",
-					administration: "Administração",
-					users: "Usuários",
-					settings: "Configurações",
-				},
-				appBar: {
-					user: {
-						profile: "Perfil",
-						logout: "Sair",
-					},
-				},
-			},
-			notifications: {
-				noTickets: "Nenhuma notificação.",
-			},
-			queues: {
-				title: "Filas",
-				table: {
-					name: "Nome",
-					color: "Cor",
-					greeting: "Mensagem de saudação",
-					actions: "Ações",
-				},
-				buttons: {
-					add: "Adicionar fila",
-				},
-				confirmationModal: {
-					deleteTitle: "Excluir",
-					deleteMessage:
-						"Você tem certeza? Essa ação não pode ser revertida! Os tickets dessa fila continuarão existindo, mas não terão mais nenhuma fila atribuída.",
-				},
-			},
-			queueSelect: {
-				inputLabel: "Filas",
-			},
-			users: {
-				title: "Usuários",
-				table: {
-					name: "Nome",
-					email: "Email",
-					profile: "Perfil",
-					actions: "Ações",
-				},
-				buttons: {
-					add: "Adicionar usuário",
-				},
-				toasts: {
-					deleted: "Usuário excluído com sucesso.",
-				},
-				confirmationModal: {
-					deleteTitle: "Excluir",
-					deleteMessage:
-						"Todos os dados do usuário serão perdidos. Os tickets abertos deste usuário serão movidos para a fila.",
-				},
-			},
-			settings: {
-				success: "Configurações salvas com sucesso.",
-				title: "Configurações",
-				settings: {
-					userCreation: {
-						name: "Criação de usuário",
-						options: {
-							enabled: "Ativado",
-							disabled: "Desativado",
-						},
-					},
-				},
-			},
-			messagesList: {
-				header: {
-					assignedTo: "Atribuído à:",
-					buttons: {
-						return: "Retornar",
-						resolve: "Resolver",
-						reopen: "Reabrir",
-						accept: "Aceitar",
-					},
-				},
-			},
-			messagesInput: {
-				placeholderOpen: "Digite uma mensagem",
-				placeholderClosed:
-					"Reabra ou aceite esse ticket para enviar uma mensagem.",
-				signMessage: "Assinar",
-			},
-			contactDrawer: {
-				header: "Dados do contato",
-				buttons: {
-					edit: "Editar contato",
-				},
-				extraInfo: "Outras informações",
-			},
-			ticketOptionsMenu: {
-				delete: "Deletar",
-				transfer: "Transferir",
-				confirmationModal: {
-					title: "Deletar o ticket do contato",
-					message:
-						"Atenção! Todas as mensagens relacionadas ao ticket serão perdidas.",
-				},
-				buttons: {
-					delete: "Excluir",
-					cancel: "Cancelar",
-				},
-			},
-			confirmationModal: {
-				buttons: {
-					confirm: "Ok",
-					cancel: "Cancelar",
-				},
-			},
-			messageOptionsMenu: {
-				delete: "Deletar",
-				reply: "Responder",
-				confirmationModal: {
-					title: "Apagar mensagem?",
-					message: "Esta ação não pode ser revertida.",
-				},
-			},
-			backendErrors: {
-				ERR_NO_OTHER_WHATSAPP: "Deve haver pelo menos um WhatsApp padrão.",
-				ERR_NO_DEF_WAPP_FOUND:
-					"Nenhum WhatsApp padrão encontrado. Verifique a página de conexões.",
-				ERR_WAPP_NOT_INITIALIZED:
-					"Esta sessão do WhatsApp não foi inicializada. Verifique a página de conexões.",
-				ERR_WAPP_CHECK_CONTACT:
-					"Não foi possível verificar o contato do WhatsApp. Verifique a página de conexões",
-				ERR_WAPP_INVALID_CONTACT: "Este não é um número de Whatsapp válido.",
-				ERR_WAPP_DOWNLOAD_MEDIA:
-					"Não foi possível baixar mídia do WhatsApp. Verifique a página de conexões.",
-				ERR_INVALID_CREDENTIALS:
-					"Erro de autenticação. Por favor, tente novamente.",
-				ERR_SENDING_WAPP_MSG:
-					"Erro ao enviar mensagem do WhatsApp. Verifique a página de conexões.",
-				ERR_DELETE_WAPP_MSG: "Não foi possível excluir a mensagem do WhatsApp.",
-				ERR_OTHER_OPEN_TICKET: "Já existe um tíquete aberto para este contato.",
-				ERR_SESSION_EXPIRED: "Sessão expirada. Por favor entre.",
-				ERR_USER_CREATION_DISABLED:
-					"A criação do usuário foi desabilitada pelo administrador.",
-				ERR_NO_PERMISSION: "Você não tem permissão para acessar este recurso.",
-				ERR_DUPLICATED_CONTACT: "Já existe um contato com este número.",
-				ERR_NO_SETTING_FOUND: "Nenhuma configuração encontrada com este ID.",
-				ERR_NO_CONTACT_FOUND: "Nenhum contato encontrado com este ID.",
-				ERR_NO_TICKET_FOUND: "Nenhum tíquete encontrado com este ID.",
-				ERR_NO_USER_FOUND: "Nenhum usuário encontrado com este ID.",
-				ERR_NO_WAPP_FOUND: "Nenhum WhatsApp encontrado com este ID.",
-				ERR_CREATING_MESSAGE: "Erro ao criar mensagem no banco de dados.",
-				ERR_CREATING_TICKET: "Erro ao criar tíquete no banco de dados.",
-				ERR_FETCH_WAPP_MSG:
-					"Erro ao buscar a mensagem no WhtasApp, talvez ela seja muito antiga.",
-				ERR_QUEUE_COLOR_ALREADY_EXISTS:
-					"Esta cor já está em uso, escolha outra.",
-				ERR_WAPP_GREETING_REQUIRED:
-					"A mensagem de saudação é obrigatório quando há mais de uma fila.",
-			},
-		},
-	},
+  pt: {
+    translations: {
+      signup: {
+        title: "Cadastre-se",
+        toasts: {
+          success: "Usuário criado com sucesso! Faça seu login!!!.",
+          fail: "Erro ao criar usuário. Verifique os dados informados.",
+        },
+        form: {
+          name: "Nome",
+          email: "Email",
+          password: "Senha",
+        },
+        buttons: {
+          submit: "Cadastrar",
+          login: "Já tem uma conta? Entre!",
+        },
+      },
+      login: {
+        title: "Login",
+        form: {
+          email: "Email",
+          password: "Senha",
+        },
+        buttons: {
+          submit: "Entrar",
+          register: "Não tem um conta? Cadastre-se!",
+        },
+      },
+      auth: {
+        toasts: {
+          success: "Login efetuado com sucesso!",
+        },
+      },
+      dashboard: {
+        charts: {
+          perDay: {
+            title: "Tickets hoje: ",
+          },
+        },
+      },
+      connections: {
+        title: "Conexões",
+        toasts: {
+          deleted: "Conexão com o WhatsApp excluída com sucesso!",
+        },
+        confirmationModal: {
+          deleteTitle: "Deletar",
+          deleteMessage: "Você tem certeza? Essa ação não pode ser revertida.",
+          disconnectTitle: "Desconectar",
+          disconnectMessage:
+            "Tem certeza? Você precisará ler o QR Code novamente.",
+        },
+        buttons: {
+          add: "Adicionar WhatsApp",
+          disconnect: "desconectar",
+          tryAgain: "Tentar novamente",
+          qrcode: "QR CODE",
+          newQr: "Novo QR CODE",
+          connecting: "Conectando",
+        },
+        toolTips: {
+          disconnected: {
+            title: "Falha ao iniciar sessão do WhatsApp",
+            content:
+              "Certifique-se de que seu celular esteja conectado à internet e tente novamente, ou solicite um novo QR Code",
+          },
+          qrcode: {
+            title: "Esperando leitura do QR Code",
+            content:
+              "Clique no botão 'QR CODE' e leia o QR Code com o seu celular para iniciar a sessão",
+          },
+          connected: {
+            title: "Conexão estabelecida!",
+          },
+          timeout: {
+            title: "A conexão com o celular foi perdida",
+            content:
+              "Certifique-se de que seu celular esteja conectado à internet e o WhatsApp esteja aberto, ou clique no botão 'Desconectar' para obter um novo QR Code",
+          },
+        },
+        table: {
+          name: "Nome",
+          status: "Status",
+          lastUpdate: "Última atualização",
+          default: "Padrão",
+          actions: "Ações",
+          session: "Sessão",
+        },
+      },
+      whatsappModal: {
+        title: {
+          add: "Adicionar WhatsApp",
+          edit: "Editar WhatsApp",
+        },
+        form: {
+          name: "Nome",
+          default: "Padrão",
+        },
+        buttons: {
+          okAdd: "Adicionar",
+          okEdit: "Salvar",
+          cancel: "Cancelar",
+        },
+        success: "WhatsApp salvo com sucesso.",
+      },
+      qrCode: {
+        message: "Leia o QrCode para iniciar a sessão",
+      },
+      contacts: {
+        title: "Contatos",
+        toasts: {
+          deleted: "Contato excluído com sucesso!",
+        },
+        searchPlaceholder: "Pesquisar...",
+        confirmationModal: {
+          deleteTitle: "Deletar ",
+          importTitlte: "Importar contatos",
+          deleteMessage:
+            "Tem certeza que deseja deletar este contato? Todos os tickets relacionados serão perdidos.",
+          importMessage: "Deseja importas todos os contatos do telefone?",
+        },
+        buttons: {
+          import: "Importar Contatos",
+          add: "Adicionar Contato",
+        },
+        table: {
+          name: "Nome",
+          whatsapp: "WhatsApp",
+          email: "Email",
+          actions: "Ações",
+        },
+      },
+      contactModal: {
+        title: {
+          add: "Adicionar contato",
+          edit: "Editar contato",
+        },
+        form: {
+          mainInfo: "Dados do contato",
+          extraInfo: "Informações adicionais",
+          name: "Nome",
+          number: "Número do Whatsapp",
+          email: "Email",
+          extraName: "Nome do campo",
+          extraValue: "Valor",
+        },
+        buttons: {
+          addExtraInfo: "Adicionar informação",
+          okAdd: "Adicionar",
+          okEdit: "Salvar",
+          cancel: "Cancelar",
+        },
+        success: "Contato salvo com sucesso.",
+      },
+      quickAnswersModal: {
+        title: {
+          add: "Adicionar Resposta Rápida",
+          edit: "Editar Resposta Rápida",
+        },
+        form: {
+          shortcut: "Atalho",
+          message: "Resposta Rápida",
+        },
+        buttons: {
+          okAdd: "Adicionar",
+          okEdit: "Salvar",
+          cancel: "Cancelar",
+        },
+        success: "Resposta Rápida salva com sucesso.",
+      },
+      queueModal: {
+        title: {
+          add: "Adicionar fila",
+          edit: "Editar fila",
+        },
+        form: {
+          name: "Nome",
+          color: "Cor",
+          greetingMessage: "Mensagem de saudação",
+        },
+        buttons: {
+          okAdd: "Adicionar",
+          okEdit: "Salvar",
+          cancel: "Cancelar",
+        },
+      },
+      userModal: {
+        title: {
+          add: "Adicionar usuário",
+          edit: "Editar usuário",
+        },
+        form: {
+          name: "Nome",
+          email: "Email",
+          password: "Senha",
+          profile: "Perfil",
+        },
+        buttons: {
+          okAdd: "Adicionar",
+          okEdit: "Salvar",
+          cancel: "Cancelar",
+        },
+        success: "Usuário salvo com sucesso.",
+      },
+      chat: {
+        noTicketMessage: "Selecione um ticket para começar a conversar.",
+      },
+      ticketsManager: {
+        buttons: {
+          newTicket: "Novo",
+        },
+      },
+      ticketsQueueSelect: {
+        placeholder: "Filas",
+      },
+      tickets: {
+        toasts: {
+          deleted: "O ticket que você estava foi deletado.",
+        },
+        notification: {
+          message: "Mensagem de",
+        },
+        tabs: {
+          open: { title: "Inbox" },
+          closed: { title: "Resolvidos" },
+          search: { title: "Busca" },
+        },
+        search: {
+          placeholder: "Buscar tickets e mensagens",
+        },
+        buttons: {
+          showAll: "Todos",
+        },
+      },
+      transferTicketModal: {
+        title: "Transferir Ticket",
+        fieldLabel: "Digite para buscar usuários",
+        noOptions: "Nenhum usuário encontrado com esse nome",
+        buttons: {
+          ok: "Transferir",
+          cancel: "Cancelar",
+        },
+      },
+      ticketsList: {
+        pendingHeader: "Aguardando",
+        assignedHeader: "Atendendo",
+        noTicketsTitle: "Nada aqui!",
+        noTicketsMessage:
+          "Nenhum ticket encontrado com esse status ou termo pesquisado",
+        buttons: {
+          accept: "Aceitar",
+        },
+      },
+      newTicketModal: {
+        title: "Criar Ticket",
+        fieldLabel: "Digite para pesquisar o contato",
+        add: "Adicionar",
+        buttons: {
+          ok: "Salvar",
+          cancel: "Cancelar",
+        },
+      },
+      mainDrawer: {
+        listItems: {
+          dashboard: "Dashboard",
+          connections: "Conexões",
+          tickets: "Tickets",
+          contacts: "Contatos",
+          quickAnswers: "Respostas Rápidas",
+          queues: "Filas",
+          administration: "Administração",
+          users: "Usuários",
+          settings: "Configurações",
+        },
+        appBar: {
+          user: {
+            profile: "Perfil",
+            logout: "Sair",
+          },
+        },
+      },
+      notifications: {
+        noTickets: "Nenhuma notificação.",
+      },
+      queues: {
+        title: "Filas",
+        table: {
+          name: "Nome",
+          color: "Cor",
+          greeting: "Mensagem de saudação",
+          actions: "Ações",
+        },
+        buttons: {
+          add: "Adicionar fila",
+        },
+        confirmationModal: {
+          deleteTitle: "Excluir",
+          deleteMessage:
+            "Você tem certeza? Essa ação não pode ser revertida! Os tickets dessa fila continuarão existindo, mas não terão mais nenhuma fila atribuída.",
+        },
+      },
+      queueSelect: {
+        inputLabel: "Filas",
+      },
+      quickAnswers: {
+        title: "Respostas Rápidas",
+        table: {
+          shortcut: "Atalho",
+          message: "Resposta Rápida",
+          actions: "Ações",
+        },
+        buttons: {
+          add: "Adicionar Resposta Rápida",
+        },
+        toasts: {
+          deleted: "Resposta Rápida excluída com sucesso.",
+        },
+        searchPlaceholder: "Pesquisar...",
+        confirmationModal: {
+          deleteTitle:
+            "Você tem certeza que quer excluir esta Resposta Rápida: ",
+          deleteMessage: "Esta ação não pode ser revertida.",
+        },
+      },
+      users: {
+        title: "Usuários",
+        table: {
+          name: "Nome",
+          email: "Email",
+          profile: "Perfil",
+          actions: "Ações",
+        },
+        buttons: {
+          add: "Adicionar usuário",
+        },
+        toasts: {
+          deleted: "Usuário excluído com sucesso.",
+        },
+        confirmationModal: {
+          deleteTitle: "Excluir",
+          deleteMessage:
+            "Todos os dados do usuário serão perdidos. Os tickets abertos deste usuário serão movidos para a fila.",
+        },
+      },
+      settings: {
+        success: "Configurações salvas com sucesso.",
+        title: "Configurações",
+        settings: {
+          userCreation: {
+            name: "Criação de usuário",
+            options: {
+              enabled: "Ativado",
+              disabled: "Desativado",
+            },
+          },
+        },
+      },
+      messagesList: {
+        header: {
+          assignedTo: "Atribuído à:",
+          buttons: {
+            return: "Retornar",
+            resolve: "Resolver",
+            reopen: "Reabrir",
+            accept: "Aceitar",
+          },
+        },
+      },
+      messagesInput: {
+        placeholderOpen: "Digite uma mensagem",
+        placeholderClosed:
+          "Reabra ou aceite esse ticket para enviar uma mensagem.",
+        signMessage: "Assinar",
+      },
+      contactDrawer: {
+        header: "Dados do contato",
+        buttons: {
+          edit: "Editar contato",
+        },
+        extraInfo: "Outras informações",
+      },
+      ticketOptionsMenu: {
+        delete: "Deletar",
+        transfer: "Transferir",
+        confirmationModal: {
+          title: "Deletar o ticket do contato",
+          message:
+            "Atenção! Todas as mensagens relacionadas ao ticket serão perdidas.",
+        },
+        buttons: {
+          delete: "Excluir",
+          cancel: "Cancelar",
+        },
+      },
+      confirmationModal: {
+        buttons: {
+          confirm: "Ok",
+          cancel: "Cancelar",
+        },
+      },
+      messageOptionsMenu: {
+        delete: "Deletar",
+        reply: "Responder",
+        confirmationModal: {
+          title: "Apagar mensagem?",
+          message: "Esta ação não pode ser revertida.",
+        },
+      },
+      backendErrors: {
+        ERR_NO_OTHER_WHATSAPP: "Deve haver pelo menos um WhatsApp padrão.",
+        ERR_NO_DEF_WAPP_FOUND:
+          "Nenhum WhatsApp padrão encontrado. Verifique a página de conexões.",
+        ERR_WAPP_NOT_INITIALIZED:
+          "Esta sessão do WhatsApp não foi inicializada. Verifique a página de conexões.",
+        ERR_WAPP_CHECK_CONTACT:
+          "Não foi possível verificar o contato do WhatsApp. Verifique a página de conexões",
+        ERR_WAPP_INVALID_CONTACT: "Este não é um número de Whatsapp válido.",
+        ERR_WAPP_DOWNLOAD_MEDIA:
+          "Não foi possível baixar mídia do WhatsApp. Verifique a página de conexões.",
+        ERR_INVALID_CREDENTIALS:
+          "Erro de autenticação. Por favor, tente novamente.",
+        ERR_SENDING_WAPP_MSG:
+          "Erro ao enviar mensagem do WhatsApp. Verifique a página de conexões.",
+        ERR_DELETE_WAPP_MSG: "Não foi possível excluir a mensagem do WhatsApp.",
+        ERR_OTHER_OPEN_TICKET: "Já existe um tíquete aberto para este contato.",
+        ERR_SESSION_EXPIRED: "Sessão expirada. Por favor entre.",
+        ERR_USER_CREATION_DISABLED:
+          "A criação do usuário foi desabilitada pelo administrador.",
+        ERR_NO_PERMISSION: "Você não tem permissão para acessar este recurso.",
+        ERR_DUPLICATED_CONTACT: "Já existe um contato com este número.",
+        ERR_NO_SETTING_FOUND: "Nenhuma configuração encontrada com este ID.",
+        ERR_NO_CONTACT_FOUND: "Nenhum contato encontrado com este ID.",
+        ERR_NO_TICKET_FOUND: "Nenhum tíquete encontrado com este ID.",
+        ERR_NO_USER_FOUND: "Nenhum usuário encontrado com este ID.",
+        ERR_NO_WAPP_FOUND: "Nenhum WhatsApp encontrado com este ID.",
+        ERR_CREATING_MESSAGE: "Erro ao criar mensagem no banco de dados.",
+        ERR_CREATING_TICKET: "Erro ao criar tíquete no banco de dados.",
+        ERR_FETCH_WAPP_MSG:
+          "Erro ao buscar a mensagem no WhtasApp, talvez ela seja muito antiga.",
+        ERR_QUEUE_COLOR_ALREADY_EXISTS:
+          "Esta cor já está em uso, escolha outra.",
+        ERR_WAPP_GREETING_REQUIRED:
+          "A mensagem de saudação é obrigatório quando há mais de uma fila.",
+      },
+    },
+  },
 };
 
 export { messages };