diff --git a/frontend/src/components/university/modules/GenericModule.js b/frontend/src/components/university/modules/GenericModule.js
index 1a633b884910a5c04be139da1e6423f79a8c31cf..6a3f015a6db0d9af59fb92c8a09d0d4664a7c2a3 100644
--- a/frontend/src/components/university/modules/GenericModule.js
+++ b/frontend/src/components/university/modules/GenericModule.js
@@ -12,6 +12,7 @@ import green from '@material-ui/core/colors/green';
 
 import MyComponent from '../../MyComponent';
 import isModerationRequired from '../../../utils/isModerationRequired';
+import Alert from './editors/Alert';
 
 import {
   serverModerationStatusFetchData,
@@ -81,16 +82,44 @@ class GenericModule extends MyComponent {
     pendingModerationOpen: false,
     rawModelDataForEditor: this.props.rawModelData,
     forceSave: false,
+    alert: { open: false }
   };
 
-  handleOpenEditor = () => {
-    this.setState({ editorOpen: true });
+  handleOpenEditor = (force = false) => {
+    if (force || this.props.rawModelData.pending_moderation.length == 0) {
+      this.setState({ editorOpen: true });
+    } else {
+      this.setState({
+        alert: {
+          open: true,
+          info: false,
+          title: "Une version est en attente de modération",
+          description: "Vous vous apprêter à éditer le module tel qu'il est présenté sur la page principale. Toutefois, il conseillé d'éditer le module à partir de la version en attente de modération car cette dernière sera écrasée par votre contribution.",
+          agreeText: "Ok, je vais voir la version en attente de modération",
+          disagreeText: "Je ne veux pas me baser sur le travail en attente de modération",
+          handleResponse: (agree) => {
+            if (agree) {
+              this.handleOpenPendingModeration();
+            } else {
+              this.handleOpenEditor(true);
+            }
+          },
+          multilineButtons: true,
+        }
+      })
+    }
+
+
   };
 
   handleCloseEditor = () => {
     this.setState({ editorOpen: false, dataToSave: null });
   };
 
+  handleCloseAlert = () => {
+    this.setState({ alert: { open: false } })
+  }
+
   handleCloseHistory = () => {
     this.setState({ historyOpen: false });
   };
@@ -107,6 +136,8 @@ class GenericModule extends MyComponent {
     this.setState({ pendingModerationOpen: false });
   }
 
+
+
   handleEditPendingModeration = (rawModelData) => {
     this.setState({
       rawModelDataForEditor: rawModelData,
@@ -170,6 +201,10 @@ class GenericModule extends MyComponent {
 
     return (
       <div>
+        <Alert
+          {...this.state.alert}
+          handleClose={this.handleCloseAlert}
+        />
         <this.props.editor
           open={this.state.editorOpen}
           handleCloseEditor={this.handleCloseEditor}
diff --git a/frontend/src/components/university/modules/editors/Alert.js b/frontend/src/components/university/modules/editors/Alert.js
index f55a7750210a044cbf856d0f19aad20056eba19b..555ba39822a81d30ababb0de7b71b5b5f679b6f1 100644
--- a/frontend/src/components/university/modules/editors/Alert.js
+++ b/frontend/src/components/university/modules/editors/Alert.js
@@ -7,36 +7,66 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 
+import withStyles from '@material-ui/core/styles/withStyles';
+import compose from 'recompose/compose';
+
+const styles = theme => ({
+  multilineButton: {
+    display: 'block',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  button: {}
+})
+
 class Alert extends React.Component {
 
   render() {
+    const { classes } = this.props;
     return (
       <Dialog
         open={this.props.open}
       >
-        <DialogTitle>{this.props.title}</DialogTitle>
-        <DialogContent>
-          <DialogContentText style={{whiteSpace: 'pre-wrap'}}>
-            {this.props.description}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          {
-            this.props.info ?
-              <Button onClick={() => { this.props.handleClose(); this.props.handleResponse() }} color="primary">
-                {this.props.infoText}
-              </Button>
-              :
-              <div>
-                <Button onClick={() => { this.props.handleClose(); this.props.handleResponse(false) }} color="primary">
-                  {this.props.disagreeText}
-                </Button>
-                <Button onClick={() => { this.props.handleClose(); this.props.handleResponse(true) }} color="primary" autoFocus>
-                  {this.props.agreeText}
-                </Button>
-              </div>
-          }
-        </DialogActions>
+        {
+          this.props.open ?
+            <div>
+              <DialogTitle>{this.props.title}</DialogTitle>
+              <DialogContent>
+                <DialogContentText style={{ whiteSpace: 'pre-wrap' }}>
+                  {this.props.description}
+                </DialogContentText>
+              </DialogContent>
+              <DialogActions>
+                {
+                  this.props.info ?
+                    <Button onClick={() => { this.props.handleClose(); this.props.handleResponse() }} color="primary">
+                      {this.props.infoText}
+                    </Button>
+                    :
+                    <div>
+                      <Button
+                        onClick={() => { this.props.handleClose(); this.props.handleResponse(false) }}
+                        color='secondary'
+                        className={this.props.multilineButtons ? classes.multilineButton : classes.button}
+                      >
+                        {this.props.disagreeText}
+                      </Button>
+                      <Button
+                        onClick={() => { this.props.handleClose(); this.props.handleResponse(true) }}
+                        className={this.props.multilineButtons ? classes.multilineButton : classes.button}
+                        variant='outlined'
+                        color="primary"
+                        autoFocus
+                      >
+                        {this.props.agreeText}
+                      </Button>
+                    </div>
+                }
+              </DialogActions>
+            </div>
+            :
+            <div></div>
+        }
       </Dialog >
     );
   }
@@ -50,6 +80,7 @@ Alert.defaultProps = {
   agreeText: "OK",
   disagreeText: "Annuler",
   infoText: "J'ai compris",
+  multilineButtons: false,
   handleClose: () => { Console.log("Missing function for closing alert.") },
   handleResponse: () => { Console.log("Missing function for handling post close.") }
 }
@@ -64,7 +95,10 @@ Alert.propTypes = {
   description: PropTypes.string,
   handleClose: PropTypes.func.isRequired,
   handleResponse: PropTypes.func.isRequired,
+  multilineButtons: PropTypes.bool.isRequired,
 };
 
 
-export default Alert;
\ No newline at end of file
+export default compose(
+  withStyles(styles, { withTheme: true }),
+)(Alert);