diff --git a/frontend/src/components/ContactDrawer/index.js b/frontend/src/components/ContactDrawer/index.js
index bb6dc9c..185d502 100644
--- a/frontend/src/components/ContactDrawer/index.js
+++ b/frontend/src/components/ContactDrawer/index.js
@@ -11,6 +11,7 @@ import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
 
+
 import { i18n } from "../../translate/i18n";
 import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank";
 import ContactModal from "../ContactModal";
@@ -18,6 +19,8 @@ import ContactDrawerSkeleton from "../ContactDrawerSkeleton";
 
 const drawerWidth = 320;
 
+
+
 const useStyles = makeStyles(theme => ({
 	drawer: {
 		width: drawerWidth,
@@ -148,6 +151,7 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 								variant="outlined"
 								className={classes.contactExtraInfo}
 							>
+
 								<InputLabel>{info.name}</InputLabel>
 								<LinkifyWithTargetBlank>
 									<Typography noWrap style={{ paddingTop: 2 }}>
diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
index 95f1fcd..557d89e 100644
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -12,7 +12,7 @@ import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 import Avatar from "@material-ui/core/Avatar";
-
+import WhatsAppIcon from "@material-ui/icons/WhatsApp";
 import SearchIcon from "@material-ui/icons/Search";
 import TextField from "@material-ui/core/TextField";
 import InputAdornment from "@material-ui/core/InputAdornment";
@@ -88,6 +88,7 @@ const useStyles = makeStyles(theme => ({
 const Contacts = () => {
 	const classes = useStyles();
 	const history = useHistory();
+	const userId = +localStorage.getItem("userId");
 
 	const [loading, setLoading] = useState(false);
 	const [pageNumber, setPageNumber] = useState(1);
@@ -164,6 +165,33 @@ const Contacts = () => {
 		setContactModalOpen(false);
 	};
 
+	const handleSaveTicket = async contactId => {
+		if (!contactId) return;
+		setLoading(true);
+		try {
+			const { data: ticket } = await api.post("/tickets", {
+				contactId: contactId,
+				userId: userId,
+				status: "open",
+			});
+			history.push(`/tickets/${ticket.id}`);
+		} catch (err) {
+			const errorMsg = err.response?.data?.error;
+			if (errorMsg) {
+				if (i18n.exists(`backendErrors.${errorMsg}`)) {
+					toast.error(i18n.t(`backendErrors.${errorMsg}`));
+				} else {
+					toast.error(err.response.data.error);
+				}
+			} else {
+				toast.error("Unknown error");
+			}
+		}
+		setLoading(false);
+		
+	};
+
+
 	const hadleEditContact = contactId => {
 		setSelectedContactId(contactId);
 		setContactModalOpen(true);
@@ -308,11 +336,19 @@ const Contacts = () => {
 									<TableCell>{contact.number}</TableCell>
 									<TableCell>{contact.email}</TableCell>
 									<TableCell align="right">
+
+										<IconButton size = "small"
+										onClick = {()=> handleSaveTicket(contact.id)}
+										>
+										   <WhatsAppIcon/>
+										</IconButton>
+
 										<IconButton
 											size="small"
 											onClick={() => hadleEditContact(contact.id)}
 										>
-											<EditIcon />
+										
+										<EditIcon />
 										</IconButton>
 
 										<IconButton