diff --git a/backend/backend_app/serializers.py b/backend/backend_app/serializers.py
index 90940ef69ef4a36d2079717c84427250ca32e504..aa8ac9aca832a718bd69304607467f1c5a0295f0 100644
--- a/backend/backend_app/serializers.py
+++ b/backend/backend_app/serializers.py
@@ -9,10 +9,14 @@ from backend_app.models.exchange import Exchange
 
 class CourseFeedbackSerializer(EssentialModuleSerializer):
     course_code = serializers.SerializerMethodField()  # needed for the front
+    course_title = serializers.SerializerMethodField()  # needed for the front
 
     def get_course_code(self, obj):
         return obj.course.code
 
+    def get_course_title(self, obj):
+        return obj.course.title
+
     def update(self, instance, validated_data):
         instance.untouched = False
         return super().update(instance, validated_data)
@@ -21,6 +25,7 @@ class CourseFeedbackSerializer(EssentialModuleSerializer):
         model = CourseFeedback
         fields = EssentialModuleSerializer.Meta.fields + (
             "course_code",
+            "course_title",
             "language",
             "comment",
             "adequation",
diff --git a/frontend/src/components/app/UnlinkedPartners.js b/frontend/src/components/app/UnlinkedPartners.js
index 3b43253704895fcde8afd5de451e9439721e518a..bbaf959b7ebeed4aad532a5d3c99f4725ba6f8ae 100644
--- a/frontend/src/components/app/UnlinkedPartners.js
+++ b/frontend/src/components/app/UnlinkedPartners.js
@@ -60,9 +60,14 @@ class UnlinkedPartners extends CustomComponentForAPI {
             nUnlinked > 0 ?
               <>
                 <Typography variant={"caption"} color={"primary"}>
-                  ⚠&nbsp;{unlinkedPartners.length} universités partenaires de l'UTC
-                  ne sont pas encore pleinement disponible(s) sur la plateforme.
-                  Plus d'informations&nbsp;
+                  ⚠&nbsp;
+                  {
+                    nUnlinked === 1 ?
+                      "1 université partenaire de l'UTC n'est pas encore pleinement disponible"
+                      :
+                      `${nUnlinked} universités partenaires de l'UTC ne sont pas encore pleinement disponibles`
+                  }
+                  sur la plateforme. Plus d'informations&nbsp;
                   <CustomLink to={APP_ROUTES.aboutUnlinkedPartners}>
                     <Typography variant={"caption"} color={"primary"}>
                       ici
diff --git a/frontend/src/components/common/SimplePopupMenu.js b/frontend/src/components/common/SimplePopupMenu.js
index ab963ee849a9cef72c2fd27d31aaa8fabf23f3f3..4358a57ef691b249c46c28c70ce5e9ac9e86fdc7 100644
--- a/frontend/src/components/common/SimplePopupMenu.js
+++ b/frontend/src/components/common/SimplePopupMenu.js
@@ -32,8 +32,8 @@ function SimplePopupMenu(props) {
         onClose={handleClose}
       >
         {
-          props.items.map(({label, onClick}, key) => (
-            <MenuItem key={key} onClick={() => {
+          props.items.map(({label, onClick, disabled}, key) => (
+            <MenuItem key={key} disabled={disabled} onClick={() => {
               onClick();
               handleClose();
             }}>
@@ -51,6 +51,7 @@ SimplePopupMenu.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
+    disabled: PropTypes.bool.isRequired,
   })).isRequired,
   renderHolder: PropTypes.func.isRequired,
 };
diff --git a/frontend/src/components/form/Form.js b/frontend/src/components/form/Form.js
index 3eea5f0879096a5b045c0bb917a67c63c74cc982..1dcae0fba762812d9e3ec640388985e61225229e 100644
--- a/frontend/src/components/form/Form.js
+++ b/frontend/src/components/form/Form.js
@@ -152,6 +152,8 @@ class Form extends Component {
       // we need to compare objects (ie JSON objects) differently
       if (typeof cmp1 === "object") {
         return !isEqual(cmp1, cmp2);
+      } else if ((typeof cmp1 === "number") || (typeof cmp2 === "number")) {
+        return cmp1 != cmp2; // allow 93 == "93.00"
       } else {
         return cmp1 !== cmp2;
       }
diff --git a/frontend/src/components/form/fields/Field.js b/frontend/src/components/form/fields/Field.js
index c373cab920258fcdb3571eba6bbac9034c2eeb2e..c129c0395d26ef8644df99a912c8ad90b1a9e9e7 100644
--- a/frontend/src/components/form/fields/Field.js
+++ b/frontend/src/components/form/fields/Field.js
@@ -134,7 +134,7 @@ Field.propTypes = {
   required: PropTypes.bool.isRequired, // is the field required ?
   label: PropTypes.string, // text to go along the field
   comment: PropTypes.string, // text to give more information on what is expected
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, // value of the field
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // value of the field
   form: PropTypes.object, // required in constructor (reference of to the) form containing the field
   fieldMapping: PropTypes.string.isRequired, // name of the field in the data
 };
diff --git a/frontend/src/components/form/fields/NumberField.js b/frontend/src/components/form/fields/NumberField.js
index 94b4a80b5991f54eb777e6923b499932344d18b7..212bc12281069dbd8d3f93621b14b16248f8d5d1 100644
--- a/frontend/src/components/form/fields/NumberField.js
+++ b/frontend/src/components/form/fields/NumberField.js
@@ -39,8 +39,11 @@ class NumberField extends Field {
   }
 
   serializeFromField() {
-    const value = super.serializeFromField();
-    return parseFloat(value);
+    const value = super.serializeFromField(),
+      parsed = parseFloat(value);
+
+    if (isNaN(parsed)) return null;
+    else return parsed;
   }
 
   handleChangeValue(val) {
diff --git a/frontend/src/components/pages/PageEditExchangeFeedbacks.js b/frontend/src/components/pages/PageEditExchangeFeedbacks.js
index 5298caf75bb83b851d2b5e771e0cc61a5f03f951..c38c7d9f3780eff3759e142471c11d5e7a5ed745 100644
--- a/frontend/src/components/pages/PageEditExchangeFeedbacks.js
+++ b/frontend/src/components/pages/PageEditExchangeFeedbacks.js
@@ -45,7 +45,7 @@ class PageEditExchangeFeedbacks extends CustomComponentForAPI {
     if (id) {
       return (
         <>
-          <Typography variant={"h3"}>
+          <Typography variant={"h4"}>
             {
               univId ? <CustomLink to={APP_ROUTES.forUniversity(univId)}>{univName}</CustomLink>
                 :
diff --git a/frontend/src/components/recommendation/SelectListSubPage.js b/frontend/src/components/recommendation/SelectListSubPage.js
index 48171cd6a969b69aaecac975ff03252c74d875d1..bf7a7474a6315a73ddfd4ec00bf4a794590c8779 100644
--- a/frontend/src/components/recommendation/SelectListSubPage.js
+++ b/frontend/src/components/recommendation/SelectListSubPage.js
@@ -103,6 +103,7 @@ class SelectListSubPage extends CustomComponentForAPI {
                         <SimplePopupMenu
                           items={[
                             {
+                              disabled: false,
                               label: "Confirmer",
                               onClick: () => this.props.deleteList(list.id, () => this.props.invalidateReadAll())
                             },
diff --git a/frontend/src/components/recommendation/view/View.js b/frontend/src/components/recommendation/view/View.js
index b9996c006741012938032a78a9e691b491194119..37972d9a50faed691ae8c7015749d2357ccb107f 100644
--- a/frontend/src/components/recommendation/view/View.js
+++ b/frontend/src/components/recommendation/view/View.js
@@ -452,6 +452,7 @@ class View extends React.Component {
         <SimplePopupMenu
           items={[
             {
+              disabled: false,
               label: "Confirmer",
               onClick: () => this.deleteBlock()
             },
@@ -466,8 +467,8 @@ class View extends React.Component {
 
         <SimplePopupMenu
           items={[
-            {label: "Markdown", onClick: () => this.addBlock("text-block")},
-            {label: "Université", onClick: () => this.addBlock("univ-block")},
+            {label: "Markdown", onClick: () => this.addBlock("text-block"), disabled: false,},
+            {label: "Université", onClick: () => this.addBlock("univ-block"), disabled: false,},
           ]}
           renderHolder={({onClick}) => (
             <Button variant={"contained"}
diff --git a/frontend/src/components/search/UnivList.js b/frontend/src/components/search/UnivList.js
index a5d15ebb9dafba37507c2d6697a2fd0ea3ef32e5..92b359380dc666083ac0ac01cf2a5ba1842afdba 100644
--- a/frontend/src/components/search/UnivList.js
+++ b/frontend/src/components/search/UnivList.js
@@ -9,7 +9,6 @@ import Divider from "@material-ui/core/Divider";
 import Button from "@material-ui/core/Button";
 import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
-import SwipeableViews from "react-swipeable-views";
 import range from "../../utils/range";
 import {APP_ROUTES} from "../../config/appRoutes";
 import isEqual from "lodash/isEqual";
@@ -69,35 +68,24 @@ class UnivList extends React.Component {
 
     return (
       <div className={classes.root}>
-        <SwipeableViews
-          axis={theme.direction === "rtl" ? "x-reverse" : "x"}
-          index={this.state.activeStep}
-          onChangeIndex={(step) => this.handleStepChange(step)}
-          enableMouseEvents
-        >
-
-          {range(maxSteps).map(page => (
-            <div key={page}>
-              <List component="nav">
-                <Divider/>
-                {getIndexesOnPage(page).map(
-                  univIdx => (
-                    <CustomNavLink to={APP_ROUTES.forUniversity(universitiesToList[univIdx].id)} key={univIdx}>
-                      <ListItem button divider={true} key={univIdx}>
-                        <ListItemText primary={universitiesToList[univIdx].name}/>
-                      </ListItem>
-                    </CustomNavLink>
-                  )
-                )}
-              </List>
-            </div>
-          ))}
-        </SwipeableViews>
 
+        <List component="nav">
+          <Divider/>
+          {getIndexesOnPage(activeStep).map(
+            univIdx => (
+              <CustomNavLink to={APP_ROUTES.forUniversity(universitiesToList[univIdx].id)} key={univIdx}>
+                <ListItem button divider={true} key={univIdx}>
+                  <ListItemText primary={universitiesToList[univIdx].name}/>
+                </ListItem>
+              </CustomNavLink>
+            )
+          )}
+        </List>
 
         <MobileStepper
           steps={maxSteps}
           position="static"
+          variant={"progress"}
           activeStep={activeStep}
           className={classes.mobileStepper}
           nextButton={
diff --git a/frontend/src/components/university/UniversityTemplate.js b/frontend/src/components/university/UniversityTemplate.js
index dc6f6908ad1a7fdacb6a7aca3e043dd42bbd8185..93021b1e3bfc8a9b23a27fd7ea517af9cf7a8e0c 100644
--- a/frontend/src/components/university/UniversityTemplate.js
+++ b/frontend/src/components/university/UniversityTemplate.js
@@ -58,7 +58,7 @@ class UniversityTemplate extends Component {
       {value} = this.state;
 
     let scroll = true;
-    if (isWidthUp("lg", width)) {
+    if (isWidthUp("sm", width)) {
       scroll = false;
     }
 
diff --git a/frontend/src/components/university/editors/UniversityGeneralEditor.js b/frontend/src/components/university/editors/UniversityGeneralEditor.js
index 47a0c95263de00174eb20dc13de5d2e8c421e718..84235fb849e67be7dfd18f1227e1f75f57960bca 100644
--- a/frontend/src/components/university/editors/UniversityGeneralEditor.js
+++ b/frontend/src/components/university/editors/UniversityGeneralEditor.js
@@ -32,12 +32,14 @@ class UniversityGeneralForm extends Form {
                    {...this.getReferenceAndValue("website")}
                    maxLength={300}
                    isUrl={true}/>
-
-        <TextField label={"Logo de l'université"}
-                   {...this.getReferenceAndValue("logo")}
-                   maxLength={300}
-                   isUrl={true}
-                   urlExtensions={["jpg", "png", "svg"]}/>
+        {/*           Logo feature is not ready yet */}
+        {this.renderHiddenField({fieldMapping: "logo"})}
+        {/*<TextField label={"Logo de l'université"}*/}
+        {/*           {...this.getReferenceAndValue("logo")}*/}
+        {/*           required={false}*/}
+        {/*           maxLength={300}*/}
+        {/*           isUrl={true}*/}
+        {/*           urlExtensions={["jpg", "png", "svg"]}/>*/}
       </>
     );
   }
diff --git a/frontend/src/components/university/modules/common/ModuleGroupWrapper.js b/frontend/src/components/university/modules/common/ModuleGroupWrapper.js
index 74c7a63885e1d0611214b51e35407e311689bbac..25e97b23b4c2cc529a31559aeccf846ce27d61a9 100644
--- a/frontend/src/components/university/modules/common/ModuleGroupWrapper.js
+++ b/frontend/src/components/university/modules/common/ModuleGroupWrapper.js
@@ -122,9 +122,6 @@ const styles = theme => ({
     // marginBottom: theme.spacing(2),
     flexGrow: 1,
   },
-  green: {
-    color: green.A200,
-  },
   button: {
     width: theme.spacing(5),
     height: theme.spacing(5),
diff --git a/frontend/src/components/university/modules/common/ModuleWrapper.js b/frontend/src/components/university/modules/common/ModuleWrapper.js
index 1c3556e4f9fcb2799b32c46c4ca97da37fb45db2..4618f365560d4f21046acdeb4a3bc3b24abb1d93 100644
--- a/frontend/src/components/university/modules/common/ModuleWrapper.js
+++ b/frontend/src/components/university/modules/common/ModuleWrapper.js
@@ -1,22 +1,17 @@
-import React, { Component } from "react";
+import React, {Component} from "react";
 import PropTypes from "prop-types";
 
 import withStyles from "@material-ui/core/styles/withStyles";
 import compose from "recompose/compose";
 
 import Paper from "@material-ui/core/Paper";
-import red from "@material-ui/core/colors/red";
-import orange from "@material-ui/core/colors/orange";
-import green from "@material-ui/core/colors/green";
 
 import Alert from "../../../common/Alert";
-
-
-import renderUsefulLinks from "./moduleWrapperFunctions/renderUsefulLinks";
-import renderFirstRow from "./moduleWrapperFunctions/renderFirstRow";
-import renderTitle from "./moduleWrapperFunctions/renderTitle";
+import ModuleTitle from "./subComponents/ModuleTitle";
 import History from "./History";
 import PendingModeration from "./PendingModeration";
+import ModuleFirstRow from "./subComponents/ModuleFirstRow";
+import UsefulLinks from "./subComponents/UsefulLinks";
 
 
 /**
@@ -41,7 +36,7 @@ class ModuleWrapper extends Component {
     historyOpen: false,
     pendingModerationOpen: false,
     rawModelDataForEditor: this.props.rawModelData,
-    alert: { open: false }
+    alert: {open: false}
   };
 
   /**
@@ -53,7 +48,7 @@ class ModuleWrapper extends Component {
    */
   openEditorPanel(ignorePendingModeration = false) {
     if (ignorePendingModeration || !this.props.rawModelData.has_pending_moderation) {
-      this.setState({ editorOpen: true });
+      this.setState({editorOpen: true});
     } else {
       this.alertThereIsSomethingPendingModeration();
     }
@@ -67,7 +62,7 @@ class ModuleWrapper extends Component {
    * @memberof ModuleWrapper
    */
   closeEditorPanel(somethingWasSaved = false) {
-    this.setState({ editorOpen: false });
+    this.setState({editorOpen: false});
     if (somethingWasSaved && this.props.moduleInGroupInfos.isInGroup) {
       this.props.moduleInGroupInfos.invalidateGroup();
     }
@@ -134,7 +129,7 @@ class ModuleWrapper extends Component {
    * @memberof ModuleWrapper
    */
   renderTitle(rawModelData) {
-    return renderTitle(rawModelData, this.props.classes, this.props.buildTitle);
+    return <ModuleTitle rawModelData={rawModelData} buildTitle={this.props.buildTitle}/>;
   }
 
   /**
@@ -148,7 +143,7 @@ class ModuleWrapper extends Component {
     return (
       <>
         {this.props.renderCore(rawModelData, this.props.coreClasses, this.props.outsideData)}
-        {renderUsefulLinks(rawModelData, this.props.classes, this.props.theme)}
+        <UsefulLinks usefulLinks={rawModelData.useful_links}/>
       </>
     );
   }
@@ -160,7 +155,7 @@ class ModuleWrapper extends Component {
    * @memberof ModuleWrapper
    */
   openPendingModerationPanel() {
-    this.setState({ pendingModerationOpen: true });
+    this.setState({pendingModerationOpen: true});
   }
 
   /**
@@ -169,7 +164,7 @@ class ModuleWrapper extends Component {
    * @memberof ModuleWrapper
    */
   closePendingModerationPanel() {
-    this.setState({ pendingModerationOpen: false });
+    this.setState({pendingModerationOpen: false});
   }
 
   /**
@@ -178,7 +173,7 @@ class ModuleWrapper extends Component {
    * @memberof ModuleWrapper
    */
   closeHistoryPanel() {
-    this.setState({ historyOpen: false });
+    this.setState({historyOpen: false});
   }
 
   /**
@@ -189,7 +184,7 @@ class ModuleWrapper extends Component {
    * @memberof ModuleWrapper
    */
   render() {
-    const { classes, rawModelData } = this.props;
+    const {classes, rawModelData} = this.props;
 
     return (
       <>
@@ -203,7 +198,7 @@ class ModuleWrapper extends Component {
         {this.state.alert.open ?
           <Alert
             {...this.state.alert}
-            handleClose={() => this.setState({ alert: { open: false } })}
+            handleClose={() => this.setState({alert: {open: false}})}
           />
           :
           <></>
@@ -211,7 +206,7 @@ class ModuleWrapper extends Component {
         {this.state.historyOpen ?
           <History
             renderer={this}
-            modelInfo={{ contentTypeId: rawModelData.content_type_id, id: rawModelData.id }}
+            modelInfo={{contentTypeId: rawModelData.content_type_id, id: rawModelData.id}}
             closeHistoryPanel={() => this.closeHistoryPanel()}
             editFromVersion={(modelData) => this.editFromVersion(modelData)}
           />
@@ -221,7 +216,7 @@ class ModuleWrapper extends Component {
         {this.state.pendingModerationOpen ?
           <PendingModeration
             renderer={this}
-            modelInfo={{ contentTypeId: rawModelData.content_type_id, id: rawModelData.id }}
+            modelInfo={{contentTypeId: rawModelData.content_type_id, id: rawModelData.id}}
             closePendingModerationPanel={() => this.closePendingModerationPanel()}
             editFromPendingModeration={(pendingModelData) => this.editFromPendingModeration(pendingModelData)}
             moderatePendingModeration={(modelData) => this.moderatePendingModeration(modelData)}
@@ -231,7 +226,12 @@ class ModuleWrapper extends Component {
           <></>
         }
         <Paper className={classes.root} square={true}>
-          {renderFirstRow.bind(this)()}
+          <ModuleFirstRow editCurrent={() => this.editCurrent()}
+                          openHistoryPanel={() => this.setState({historyOpen: true})}
+                          openPendingModerationPanel={() => this.openPendingModerationPanel()}
+                          rawModelData={rawModelData}
+                          buildTitle={this.props.buildTitle}
+                          Icon={this.props.Icon}/>
           {this.renderCore(this.props.rawModelData)}
         </Paper>
       </>
@@ -273,21 +273,23 @@ class ModuleWrapper extends Component {
 
 ModuleWrapper.defaultProps = {
   buildTitle: () => null,
-  moduleInGroupInfos: { isInGroup: false, invalidateGroup: () => null },
+  moduleInGroupInfos: {isInGroup: false, invalidateGroup: () => null},
   coreClasses: {}, // REFACTO: not needed with hooks ?
   Icon: undefined,
 };
 
 ModuleWrapper.propTypes = {
   classes: PropTypes.object.isRequired,
-  theme: PropTypes.object.isRequired,
   rawModelData: PropTypes.object.isRequired,
   buildTitle: PropTypes.func.isRequired,
   renderCore: PropTypes.func.isRequired,
   coreClasses: PropTypes.object.isRequired,
   outsideData: PropTypes.object,
   Icon: PropTypes.object,
-  moduleInGroupInfos: PropTypes.shape({ isInGroup: PropTypes.bool.isRequired, invalidateGroup: PropTypes.func }).isRequired,
+  moduleInGroupInfos: PropTypes.shape({
+    isInGroup: PropTypes.bool.isRequired,
+    invalidateGroup: PropTypes.func
+  }).isRequired,
 };
 
 
@@ -297,42 +299,9 @@ const styles = theme => ({
     padding: theme.spacing(1),
     // marginBottom: theme.spacing(2)
   },
-  rootLinks: {
-    display: "flex",
-    justifyContent: "flex-start",
-    flexWrap: "wrap",
-  },
-  green: {
-    color: green.A700,
-  },
-  orange: {
-    color: orange.A700,
-  },
-  red: {
-    color: red.A700
-  },
-  disabled: {
-    color: theme.palette.action.disabled
-  },
-  button: {
-    width: theme.spacing(5),
-    height: theme.spacing(5),
-    // margin: theme.spacing(0.5),
-  },
-  chip: {
-    margin: theme.spacing(1),
-  },
-  titleContainer: {
-    display: "flex",
-    alignItems: "center",
-  },
-  titleIcon: {
-    paddingRight: theme.spacing(1),
-    ...theme.typography.h4,
-  }
 });
 
 
 export default compose(
-  withStyles(styles, { withTheme: true }),
+  withStyles(styles),
 )(ModuleWrapper);
diff --git a/frontend/src/components/university/modules/common/moduleWrapperFunctions/getModerationTooltipAndClass.js b/frontend/src/components/university/modules/common/moduleWrapperFunctions/getModerationTooltipAndClass.js
index d26a56eec32a013b790fa61370a5cff694f0a19e..ee705d0e04574fef39101400e7ee59975c95d888 100644
--- a/frontend/src/components/university/modules/common/moduleWrapperFunctions/getModerationTooltipAndClass.js
+++ b/frontend/src/components/university/modules/common/moduleWrapperFunctions/getModerationTooltipAndClass.js
@@ -13,7 +13,7 @@ export default function getModerationTooltipAndClass(hasPendingModeration, userC
     };
   } else {
     return {
-      moderTooltip: "Aucune mise-à-jour de ce module est en attente de modération pour ce module.",
+      moderTooltip: "Aucune mise-à-jour de ce module est en attente de modération.",
       moderClass: "green"
     };
   }
diff --git a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderFirstRow.js b/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderFirstRow.js
deleted file mode 100644
index 022bdfad94102930ec2b17c1b84a1851a48013bf..0000000000000000000000000000000000000000
--- a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderFirstRow.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from "react";
-import renderTitle from "./renderTitle";
-import renderUpdateInfo from "./renderUpdateInfo";
-import getEditTooltipAndClass from "./getEditTooltipAndClass";
-import getVersionTooltipAndClass from "./getVersionTooltipAndClass";
-import getModerationTooltipAndClass from "./getModerationTooltipAndClass";
-
-import Grid from "@material-ui/core/Grid";
-import MyBadge from "../../../../common/MyBadge";
-import IconButton from "@material-ui/core/IconButton";
-
-import VerifiedUserIcon from "@material-ui/icons/VerifiedUser";
-import CreateIcon from "@material-ui/icons/Create";
-
-import SettingsBackRestoreIcon from "@material-ui/icons/SettingsBackupRestore";
-import Tooltip from "@material-ui/core/Tooltip";
-
-
-export default function renderFirstRow() {
-  const {classes, theme, rawModelData, Icon} = this.props,
-    nbVersions = Math.max(0, rawModelData.nb_versions),
-    hasPendingModeration = rawModelData.has_pending_moderation;
-
-  const {user_can_edit: userCanEdit, user_can_moderate: userCanModerate, versioned} = rawModelData.obj_info,
-    {versionTooltip, versionClass} = getVersionTooltipAndClass(nbVersions),
-    {moderTooltip, moderClass} = getModerationTooltipAndClass(hasPendingModeration, userCanEdit),
-    {editTooltip, editClass} = getEditTooltipAndClass(userCanEdit, userCanModerate);
-
-  return (
-    <Grid container spacing={1}>
-      <Grid item xs style={{paddingBottom: theme.spacing(1)}}>
-        {renderTitle(this.props.rawModelData, this.props.classes, this.props.buildTitle, Icon)}
-        {renderUpdateInfo.bind(this)()}
-      </Grid>
-      <Grid item xs={4} style={{textAlign: "right"}}>
-
-        <Tooltip title={moderTooltip} placement="top">
-          <div
-            style={{display: "inline-block"}}> {/* Needed to fire events for the tooltip when below is disabled! when below is disabled!! */}
-            <MyBadge badgeContent={hasPendingModeration ? 1 : 0} color="secondary" minNumber={1}>
-              <IconButton aria-label="Modération" disabled={moderClass === "disabled" || moderClass === "green"}
-                          onClick={() => this.openPendingModerationPanel()} className={classes.button}>
-                <VerifiedUserIcon className={classes[moderClass]}/>
-              </IconButton>
-            </MyBadge>
-          </div>
-        </Tooltip>
-
-        <Tooltip title={editTooltip} placement="top">
-          <div style={{display: "inline-block"}}> {/* Needed to fire events for the tooltip when below is disabled!! */}
-            <IconButton aria-label="Éditer" className={classes.button} disabled={editClass === "disabled"}
-                        onClick={() => this.editCurrent()}>
-              <CreateIcon className={classes[editClass]}/>
-            </IconButton>
-          </div>
-        </Tooltip>
-
-        {
-          versioned ?
-            <Tooltip title={versionTooltip} placement="top">
-              <div
-                style={{display: "inline-block"}}> {/* Needed to fire events for the tooltip when below is disabled!! */}
-                <MyBadge badgeContent={nbVersions} color="secondary" minNumber={2}>
-                  <IconButton aria-label="Restorer" disabled={versionClass === "disabled"} className={classes.button}
-                              onClick={() => this.setState({historyOpen: true})}>
-                    <SettingsBackRestoreIcon className={classes[versionClass]}/>
-                  </IconButton>
-                </MyBadge>
-              </div>
-            </Tooltip>
-            :
-            <></>
-        }
-
-      </Grid>
-
-    </Grid>
-  );
-}
diff --git a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderTitle.js b/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderTitle.js
deleted file mode 100644
index d33185c11069feda78984efedc70fbae72ad6f28..0000000000000000000000000000000000000000
--- a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderTitle.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import NotificationImportantIcon from "@material-ui/icons/NotificationImportant";
-import Typography from "@material-ui/core/Typography";
-import classNames from "classnames";
-
-export default function renderTitle(rawModelData, classes, buildTitle, Icon) {
-
-  const importanceLevel = rawModelData.importance_level;
-  const title = buildTitle(rawModelData);
-  if (title) {
-    if (Icon) {
-      return (
-        <div className={classes.titleContainer}>
-          <Typography variant='h4'><Icon color={"action"}/>&nbsp;{title}</Typography>
-        </div>
-      );
-    }
-    if (importanceLevel && importanceLevel !== "-") {
-      let c = classNames(classes.titleIcon);
-      if (importanceLevel === "++") {
-        c = classNames(classes.titleIcon, classes.red);
-      } else if (importanceLevel === "+") {
-        c = classNames(classes.titleIcon, classes.orange);
-      }
-      return (
-        <div className={classes.titleContainer}>
-          <NotificationImportantIcon className={c}/>
-          <Typography variant='h4'>{title}</Typography>
-        </div>
-      );
-    } else {
-      return (
-        <Typography variant='h4'>{title}</Typography>
-      );
-    }
-  } else {
-    return (<></>);
-  }
-}
diff --git a/frontend/src/components/university/modules/common/subComponents/ModuleFirstRow.js b/frontend/src/components/university/modules/common/subComponents/ModuleFirstRow.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a0da3774b0f4071cb33909abf333b6127bdd822
--- /dev/null
+++ b/frontend/src/components/university/modules/common/subComponents/ModuleFirstRow.js
@@ -0,0 +1,187 @@
+import React from "react";
+import ModuleTitle from "./ModuleTitle";
+import getEditTooltipAndClass from "../moduleWrapperFunctions/getEditTooltipAndClass";
+import getVersionTooltipAndClass from "../moduleWrapperFunctions/getVersionTooltipAndClass";
+import getModerationTooltipAndClass from "../moduleWrapperFunctions/getModerationTooltipAndClass";
+import MyBadge from "../../../../common/MyBadge";
+import IconButton from "@material-ui/core/IconButton";
+
+import VerifiedUserIcon from "@material-ui/icons/VerifiedUser";
+import CreateIcon from "@material-ui/icons/Create";
+import MoreIcon from "@material-ui/icons/MoreHoriz";
+
+import SettingsBackRestoreIcon from "@material-ui/icons/SettingsBackupRestore";
+import Tooltip from "@material-ui/core/Tooltip";
+import PropTypes from "prop-types";
+import {makeStyles} from "@material-ui/styles";
+import green from "@material-ui/core/colors/green";
+import orange from "@material-ui/core/colors/orange";
+import red from "@material-ui/core/colors/red";
+import UpdateInfo from "./UpdateInfo";
+import SimplePopupMenu from "../../../../common/SimplePopupMenu";
+
+
+const useStyles = makeStyles(theme => {
+
+  const onDesktops = "@media (min-width:450px)";
+  const onMobiles = "@media (max-width:450px)";
+
+  return {
+    button: {
+      width: theme.spacing(5),
+      height: theme.spacing(5),
+      // margin: theme.spacing(0.5),
+    },
+    green: {
+      color: green.A700,
+    },
+    orange: {
+      color: orange.A700,
+    },
+    red: {
+      color: red.A700
+    },
+    container: {
+      display: "flex",
+      justifyContent: "space-between"
+    },
+    itemLeft: {
+      paddingBottom: theme.spacing(1)
+    },
+    itemRight: {
+      textAlign: "right",
+      [onDesktops]: {
+        minWidth: 130,
+      },
+      [onMobiles]: {
+        minWidth: 45,
+      }
+    },
+    desktopsOnly: {
+      [onMobiles]: {
+        display: "none",
+      }
+    },
+    mobilesOnly: {
+      [onDesktops]: {
+        display: "none",
+      }
+    }
+  };
+});
+
+
+function ModuleFirstRow(props) {
+  const classes = useStyles();
+
+  const {rawModelData, Icon, buildTitle} = props,
+    nbVersions = Math.max(0, rawModelData.nb_versions),
+    hasPendingModeration = rawModelData.has_pending_moderation;
+
+  const {user_can_edit: userCanEdit, user_can_moderate: userCanModerate, versioned} = rawModelData.obj_info,
+    {versionTooltip, versionClass} = getVersionTooltipAndClass(nbVersions),
+    {moderTooltip, moderClass} = getModerationTooltipAndClass(hasPendingModeration, userCanEdit),
+    {editTooltip, editClass} = getEditTooltipAndClass(userCanEdit, userCanModerate);
+
+  const moderDisabled = moderClass === "disabled" || moderClass === "green",
+    editDisabled = editClass === "disabled",
+    versionDisabled = (!versioned) || versionClass === "disabled";
+
+  const menuItems = [
+    {
+      disabled: moderDisabled,
+      label: "En attente de modération",
+      onClick: () => props.openPendingModerationPanel(),
+    },
+    {
+      disabled: editDisabled,
+      label: "Éditer l'élément",
+      onClick: () => props.editCurrent(),
+    },
+    {
+      disabled: versionDisabled,
+      label: "Précédente(s) version(s)",
+      onClick: () => props.openHistoryPanel(),
+    }
+  ];
+
+  return (
+    <div className={classes.container}>
+
+      <div className={classes.itemLeft}>
+        <ModuleTitle rawModelData={rawModelData} buildTitle={buildTitle} Icon={Icon}/>
+        <UpdateInfo rawModelData={rawModelData}/>
+      </div>
+
+      <div className={classes.itemRight}>
+
+        <div className={classes.desktopsOnly}>
+
+          <Tooltip title={moderTooltip} placement="top">
+            <div
+              style={{display: "inline-block"}}> {/* Needed to fire events for the tooltip when below is disabled! when below is disabled!! */}
+              <MyBadge badgeContent={hasPendingModeration ? 1 : 0} color="secondary" minNumber={1}>
+                <IconButton aria-label="Modération" disabled={moderDisabled}
+                            onClick={() => props.openPendingModerationPanel()} className={classes.button}>
+                  <VerifiedUserIcon className={classes[moderClass]}/>
+                </IconButton>
+              </MyBadge>
+            </div>
+          </Tooltip>
+
+          <Tooltip title={editTooltip} placement="top">
+            <div
+              style={{display: "inline-block"}}> {/* Needed to fire events for the tooltip when below is disabled!! */}
+              <IconButton aria-label="Éditer" className={classes.button} disabled={editDisabled}
+                          onClick={() => props.editCurrent()}>
+                <CreateIcon className={classes[editClass]}/>
+              </IconButton>
+            </div>
+          </Tooltip>
+
+          {
+            versioned ?
+              <Tooltip title={versionTooltip} placement="top">
+                <div
+                  style={{display: "inline-block"}}> {/* Needed to fire events for the tooltip when below is disabled!! */}
+                  <MyBadge badgeContent={nbVersions} color="secondary" minNumber={2}>
+                    <IconButton aria-label="Restorer" disabled={versionDisabled} className={classes.button}
+                                onClick={() => props.openHistoryPanel()}>
+                      <SettingsBackRestoreIcon className={classes[versionClass]}/>
+                    </IconButton>
+                  </MyBadge>
+                </div>
+              </Tooltip>
+              :
+              <></>
+          }
+        </div>
+        <div className={classes.mobilesOnly}>
+          <SimplePopupMenu
+            items={menuItems}
+            renderHolder={({onClick}) => (
+              <IconButton color={"secondary"}
+                          onClick={onClick}
+
+                          disabled={moderDisabled && editDisabled && versionDisabled}>
+                <MoreIcon/>
+              </IconButton>
+            )}/>
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
+
+ModuleFirstRow.propTypes = {
+  openHistoryPanel: PropTypes.func.isRequired,
+  editCurrent: PropTypes.func.isRequired,
+  openPendingModerationPanel: PropTypes.func.isRequired,
+  rawModelData: PropTypes.object.isRequired,
+  Icon: PropTypes.object,
+  buildTitle: PropTypes.func.isRequired,
+};
+
+export default ModuleFirstRow;
\ No newline at end of file
diff --git a/frontend/src/components/university/modules/common/subComponents/ModuleTitle.js b/frontend/src/components/university/modules/common/subComponents/ModuleTitle.js
new file mode 100644
index 0000000000000000000000000000000000000000..282d3f42e1400e696d296471d7d65435ad3c55a0
--- /dev/null
+++ b/frontend/src/components/university/modules/common/subComponents/ModuleTitle.js
@@ -0,0 +1,80 @@
+import React from "react";
+import NotificationImportantIcon from "@material-ui/icons/NotificationImportant";
+import Typography from "@material-ui/core/Typography";
+import classNames from "classnames";
+import {makeStyles} from "@material-ui/styles";
+import green from "@material-ui/core/colors/green";
+import orange from "@material-ui/core/colors/orange";
+import red from "@material-ui/core/colors/red";
+import PropTypes from "prop-types";
+
+
+const useStyles = makeStyles(theme => ({
+  titleContainer: {
+    display: "flex",
+    alignItems: "center",
+  },
+  titleIcon: {
+    paddingRight: theme.spacing(1),
+    ...theme.typography.h4,
+  },
+  green: {
+    color: green.A700,
+  },
+  orange: {
+    color: orange.A700,
+  },
+  red: {
+    color: red.A700
+  },
+}));
+
+
+function ModuleTitle(props) {
+
+  const classes = useStyles();
+
+  const {rawModelData, buildTitle, Icon} = props,
+    importanceLevel = rawModelData.importance_level,
+    title = buildTitle(rawModelData);
+
+
+  if (title) {
+    if (Icon) {
+      return (
+        <div className={classes.titleContainer}>
+          <Typography variant="h4"><Icon color={"action"}/>&nbsp;{title}</Typography>
+        </div>
+      );
+    }
+    if (importanceLevel && importanceLevel !== "-") {
+      let c = classNames(classes.titleIcon);
+      if (importanceLevel === "++") {
+        c = classNames(classes.titleIcon, classes.red);
+      } else if (importanceLevel === "+") {
+        c = classNames(classes.titleIcon, classes.orange);
+      }
+      return (
+        <div className={classes.titleContainer}>
+          <NotificationImportantIcon className={c}/>
+          <Typography variant="h4">{title}</Typography>
+        </div>
+      );
+    } else {
+      return (
+        <Typography variant="h4">{title}</Typography>
+      );
+    }
+  } else {
+    return (<></>);
+  }
+
+}
+
+ModuleTitle.propTypes = {
+  rawModelData: PropTypes.object.isRequired,
+  buildTitle: PropTypes.func.isRequired,
+  Icon: PropTypes.object,
+};
+
+export default ModuleTitle;
\ No newline at end of file
diff --git a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderUpdateInfo.js b/frontend/src/components/university/modules/common/subComponents/UpdateInfo.js
similarity index 82%
rename from frontend/src/components/university/modules/common/moduleWrapperFunctions/renderUpdateInfo.js
rename to frontend/src/components/university/modules/common/subComponents/UpdateInfo.js
index b98705153fef79197ac698691950e59307d88a40..181caeef41edf054684921e93c408a4896e18e9f 100644
--- a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderUpdateInfo.js
+++ b/frontend/src/components/university/modules/common/subComponents/UpdateInfo.js
@@ -2,9 +2,11 @@ import React from "react";
 import Typography from "@material-ui/core/Typography";
 import dateTimeStrToStr from "../../../../../utils/dateTimeStrToStr";
 import LinkToUser from "../../../../common/LinkToUser";
+import PropTypes from "prop-types";
 
-export default function renderUpdateInfo() {
-  const {rawModelData} = this.props,
+
+function UpdateInfo(props) {
+  const {rawModelData} = props,
     {updated_by, updated_on} = rawModelData,
     updaterId = updated_by.user_id,
     updaterPseudo = updated_by.user_goes_by,
@@ -31,4 +33,8 @@ export default function renderUpdateInfo() {
 
 }
 
+UpdateInfo.propTypes = {
+  rawModelData: PropTypes.object.isRequired,
+};
 
+export default UpdateInfo;
diff --git a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderUsefulLinks.js b/frontend/src/components/university/modules/common/subComponents/UsefulLinks.js
similarity index 54%
rename from frontend/src/components/university/modules/common/moduleWrapperFunctions/renderUsefulLinks.js
rename to frontend/src/components/university/modules/common/subComponents/UsefulLinks.js
index 1731abf7e8891c940aa86d1be9355f54f6a5c310..046d9ef602fac7dcfc7f3156a3316b043dfe872a 100644
--- a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderUsefulLinks.js
+++ b/frontend/src/components/university/modules/common/subComponents/UsefulLinks.js
@@ -3,22 +3,42 @@ import Typography from "@material-ui/core/Typography";
 import Chip from "@material-ui/core/Chip";
 import Avatar from "@material-ui/core/Avatar";
 import LinkIcon from "@material-ui/icons/Link";
+import PropTypes from "prop-types";
+import {makeStyles} from "@material-ui/styles";
 
-export default function renderUsefulLinks(rawModelData, classes, theme) {
-  const usefulLinks = rawModelData.useful_links;
 
-  if (!usefulLinks) {
-    return (<></>);
+const useStyles = makeStyles(theme => ({
+  container: {
+    paddingTop: theme.spacing(2)
+  },
+  rootLinks: {
+    display: "flex",
+    justifyContent: "flex-start",
+    flexWrap: "wrap",
+  },
+  chip: {
+    margin: theme.spacing(1),
+  },
+}));
+
+
+function UsefulLinks({usefulLinks}) {
+
+  const classes = useStyles();
+
+  if (!Array.isArray(usefulLinks)) {
+    return <></>;
   }
 
   const nbItems = usefulLinks.length;
-  if (nbItems == 0) {
-    return (<></>);
+  if (nbItems === 0) {
+    return <></>;
   }
+
   const s = nbItems > 1 ? "s" : "";
   return (
-    <>
-      <Typography variant='caption' style={{ paddingTop: theme.spacing(2) }}> Source{s} :</Typography>
+    <div className={classes.container}>
+      <Typography variant='caption'> Source{s} :</Typography>
       <div className={classes.rootLinks}>
         {
           usefulLinks.map((el, index) => {
@@ -27,7 +47,7 @@ export default function renderUsefulLinks(rawModelData, classes, theme) {
                 key={index}
                 avatar={
                   <Avatar>
-                    <LinkIcon />
+                    <LinkIcon/>
                   </Avatar>
                 }
                 label={el.description}
@@ -41,6 +61,12 @@ export default function renderUsefulLinks(rawModelData, classes, theme) {
         }
 
       </div>
-    </>
+    </div>
   );
 }
+
+UsefulLinks.propTypes = {
+  usefulLinks: PropTypes.array,
+};
+
+export default UsefulLinks;
\ No newline at end of file
diff --git a/frontend/src/components/university/modules/previousExchangeFeedback/CourseFeedback.js b/frontend/src/components/university/modules/previousExchangeFeedback/CourseFeedback.js
index 67c94a0866c3e75810a2ca12f08ee5c11aeea148..d7dbd2737cdc8df6f17efd1ce26ca404876cf300 100644
--- a/frontend/src/components/university/modules/previousExchangeFeedback/CourseFeedback.js
+++ b/frontend/src/components/university/modules/previousExchangeFeedback/CourseFeedback.js
@@ -61,7 +61,12 @@ export function CourseFeedbackCore(props) {
 
   return (
     <div className={classes.smallCard}>
-      <Chip label={courseCode} color="default" className={classes.chip}/>
+      {
+        courseCode ?
+          <Chip label={courseCode} color="default" className={classes.chip}/>
+          :
+          <></>
+      }
       {
         renderUtcInfo ?
           <>
@@ -135,7 +140,7 @@ export function CourseFeedbackCore(props) {
 }
 
 CourseFeedbackCore.propTypes = {
-  courseCode: PropTypes.string.isRequired,
+  courseCode: PropTypes.string,
   courseCategory: PropTypes.string,
   courseProfile: PropTypes.string,
   courseTitle: PropTypes.string,
@@ -177,7 +182,14 @@ function CourseFeedback(props) {
       comment: course.course_feedback.comment,
       id: course.course_feedback.id,
     }));
-  coursesData.sort((a, b) => a.courseCode.localeCompare(b.courseCode));
+  coursesData.sort((a, b) => {
+    if (typeof a.courseCode === "string" && typeof b.courseCode === "string")
+      return a.courseCode.localeCompare(b.courseCode);
+    // if no valid course code, we try the course title
+    if (typeof a.courseTitle === "string" && typeof b.courseTitle === "string")
+      return a.courseTitle.localeCompare(b.courseTitle);
+    return 0;
+  });
 
   return (
     <>
diff --git a/frontend/src/components/university/modules/previousExchangeFeedback/edit/EditModuleCoursesFeedback.js b/frontend/src/components/university/modules/previousExchangeFeedback/edit/EditModuleCoursesFeedback.js
index c4a5190971e89614073f231b2c12d3a9b0ef29db..d240a266991ba562e9c554b0d5a93fe1a090e413 100644
--- a/frontend/src/components/university/modules/previousExchangeFeedback/edit/EditModuleCoursesFeedback.js
+++ b/frontend/src/components/university/modules/previousExchangeFeedback/edit/EditModuleCoursesFeedback.js
@@ -42,7 +42,22 @@ class EditModuleCoursesFeedback extends CustomComponentForAPI {
   customRender() {
     const {classes} = this.props,
       courseFeedbacks = this.getLatestReadData("courseFeedbacks");
-    courseFeedbacks.sort((a, b) => a.course_code.localeCompare(b.courseCode));
+
+    courseFeedbacks.sort((a, b) => {
+      if (
+        (typeof a.course_code === "string")
+        &&
+        (typeof b.course_code === "string")
+      ) return a.course_code.localeCompare(b.course_code);
+      // if no valid course code, we try the course title
+      if (
+        (typeof a.course_title === "string")
+        &&
+        (typeof b.course_title === "string")
+      ) return a.course_title.localeCompare(b.course_title);
+
+      return 0;
+    });
 
     return (
       <>
@@ -65,7 +80,7 @@ class EditModuleCoursesFeedback extends CustomComponentForAPI {
           courseFeedbacks.map(el =>
             <div key={el.id} className={classes.wrapper}>
               <ModuleWrapper
-                buildTitle={() => `Avis sur ${el.course_code}`}
+                buildTitle={() => `Avis sur ${el.course_title} ${el.course_code ? "(" + el.course_code + ")" : ""}`}
                 rawModelData={el}
                 editor={CourseFeedbackEditor}
                 renderCore={renderCore}
diff --git a/frontend/src/components/university/tabs/TipsAndTricksTab.js b/frontend/src/components/university/tabs/TipsAndTricksTab.js
index 4c1329c0cd47a280cf25115c2309603ede6e5292..243846be03bd0c0fc3040274eccebfa57a373b84 100644
--- a/frontend/src/components/university/tabs/TipsAndTricksTab.js
+++ b/frontend/src/components/university/tabs/TipsAndTricksTab.js
@@ -29,7 +29,7 @@ const UNIVERSITY_TAGS = [
 ];
 
 const COUNTRY_TAGS = [
-  ["immigration", "Immigration/VISA", GavelIcon],
+  ["immigration", "Immigration & VISA", GavelIcon],
   ["administrative", "Administration", AccountBalanceIcon],
   ["culture", "Culture", AllInclusiveIcon],
   ["tourism", "Tourisme", BeachAccessIcon],