diff --git a/src/components/ContentComponents/Feedback/FeedbackModal.tsx b/src/components/ContentComponents/Feedback/FeedbackModal.tsx
index a6eb89972e820c444e7259e12716fdb448fcbf57..ed2d84d083dd30b48b718f2e9160350b5fdae168 100644
--- a/src/components/ContentComponents/Feedback/FeedbackModal.tsx
+++ b/src/components/ContentComponents/Feedback/FeedbackModal.tsx
@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
+import { withClient, Client } from 'cozy-client'
 import { translate } from 'cozy-ui/react/I18n'
+import { detect } from 'detect-browser'
+
 import Modal from 'components/CommonKit/Modal/Modal'
 import StyledButton from 'components/CommonKit/Button/StyledButton'
 import StyledIconBorderedButton from 'components/CommonKit/IconButton/StyledIconBorderedButton'
@@ -11,55 +14,109 @@ import IdeaOffIcon from 'assets/icons/visu/feedback/idea-off.svg'
 import OtherOnIcon from 'assets/icons/visu/feedback/other-on.svg'
 import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
 
+const FEEDBACK_EMAIL = 'yoan.vallet@soprasteria.com'
+const browser = detect()
+
 interface FeedbackModalProps {
   opened: boolean
-  t: Function
   handleCloseClick: () => void
+  t: Function
+  client: Client
 }
 
 const FeedbackModal: React.FC<FeedbackModalProps> = ({
   opened,
-  t,
   handleCloseClick,
+  t,
+  client,
 }: FeedbackModalProps) => {
   const [type, setType] = useState<string>('bug')
   const [description, setDescription] = useState<string>('')
   const [email, setEmail] = useState<string>('')
+  const [sending, setSending] = useState<boolean>(false)
+  const [sent, setSent] = useState<boolean>(false)
 
-  const sendEmail = () => {
-    console.log(type, description, email)
+  const clearInput = () => {
     setType('bug')
     setDescription('')
     setEmail('')
   }
 
-  const selectorItem = (itemType: string) => {
-    const getOnIcon = (_type: string) => {
-      switch (_type) {
-        case 'bug':
-          return BugOnIcon
-        case 'idea':
-          return IdeaOnIcon
-        case 'other':
-          return OtherOnIcon
-        default:
-          return BugOnIcon
-      }
+  const closeModal = () => {
+    clearInput()
+    handleCloseClick()
+  }
+
+  const sendEmail = async () => {
+    setSending(true)
+    console.log(type, description, email)
+
+    const envInfo =
+      `Ecolyo` +
+      // `\nv${appMetadata.version}` +
+      '\n\nBrowser:' +
+      `\nOn ${browser && browser.os}` +
+      `\nFrom ${browser && browser.name}` +
+      `\n${browser && browser.version}` +
+      '\n\nNavigator:' +
+      `\nOn ${navigator.platform}` +
+      `\nFrom ${navigator.vendor}` +
+      `\n${navigator.userAgent}`
+
+    const mailContent =
+      'Type: ' +
+      type +
+      '\n\nDescription:\n' +
+      description +
+      '\n\nEmail: ' +
+      email +
+      '\n_______________\n' +
+      envInfo
+
+    const mailData = {
+      mode: 'from',
+      to: [{ name: 'Support', email: FEEDBACK_EMAIL }],
+      subject: '[Ecolyo] - Feedbacks - ' + type,
+      parts: [{ type: 'text/plain', body: mailContent }],
     }
-    const getOffIcon = (_type: string) => {
-      switch (_type) {
-        case 'bug':
-          return BugOffIcon
-        case 'idea':
-          return IdeaOffIcon
-        case 'other':
-          return OtherOffIcon
-        default:
-          return BugOffIcon
-      }
+    try {
+      const jobCollection = client.collection('io.cozy.jobs')
+      await jobCollection.create('sendmail', mailData)
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e)
+    }
+    setSending(false)
+    closeModal()
+  }
+
+  const getOnIcon = (_type: string) => {
+    switch (_type) {
+      case 'bug':
+        return BugOnIcon
+      case 'idea':
+        return IdeaOnIcon
+      case 'other':
+        return OtherOnIcon
+      default:
+        return BugOnIcon
     }
+  }
+  const getOffIcon = (_type: string) => {
+    switch (_type) {
+      case 'bug':
+        return BugOffIcon
+      case 'idea':
+        return IdeaOffIcon
+      case 'other':
+        return OtherOffIcon
+      default:
+        return BugOffIcon
+    }
+  }
+
+  const selectorItem = (itemType: string) => {
     const selected = type === itemType
-    console.log(itemType, selected)
     return (
       <div className="fb-selector-item">
         <StyledIconBorderedButton
@@ -83,11 +140,7 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
   }
 
   return (
-    <Modal
-      open={opened}
-      yellowBorder={true}
-      handleCloseClick={handleCloseClick}
-    >
+    <Modal open={opened} yellowBorder={true} handleCloseClick={closeModal}>
       <div className="fb-root">
         <div className="fb-header text-18-bold">{t('feedback.title')}</div>
         <div className="fb-content">
@@ -133,4 +186,4 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
   )
 }
 
-export default translate()(FeedbackModal)
+export default translate()(withClient(FeedbackModal))