diff --git a/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js b/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js
index 1a52ef5c39a96a40eee46c80c4e359dfed69d3df..6e6efaccfb93ff90f0f8d30e9a805ececd0eac22 100644
--- a/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js	
+++ b/Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js	
@@ -27,7 +27,7 @@
 
   const hintWords = require('./hint_words');
   
-  var HINT_ELEMENT_CLASS        = "CodeMirror-hint";
+  var HINT_ELEMENT_CLASS = "CodeMirror-function-definition";
   var mac = /Mac/.test(navigator.platform);
 
   function parseOptions(cm, pos, options) {
@@ -205,6 +205,7 @@
       elt.className = className;
       if (cur.render) cur.render(elt, data, cur);
       else { 
+        elt.appendChild(ownerDocument.createTextNode("Function typing \n\n"));
         var rexp_name = new RegExp(/(.*\:\:)(.*)/.source, "g");
         var m = rexp_name.exec(cur.displayText || getText(cur));
         var b_elem = ownerDocument.createElement("b"); 
diff --git a/Frontend Angular 4/src/styles/hints.css b/Frontend Angular 4/src/styles/hints.css
index e533fc2863ba89cdfa3a9e7686ed8be3d5062353..b6511c011e7a0244528801611ecfc56f7f7fd964 100644
--- a/Frontend Angular 4/src/styles/hints.css	
+++ b/Frontend Angular 4/src/styles/hints.css	
@@ -9,7 +9,7 @@
   box-shadow: 2px 3px 5px rgba(0,0,0,.2);
   border-radius: 3px;
   border: 1px solid rgb(43, 43, 43) !important;
-  background: black !important;
+  background: rgb(43, 43, 43) !important;
   font-size: 90%;
   font-family: monospace;
   
@@ -24,9 +24,18 @@
   white-space: pre;
   color: white !important;
   cursor: pointer;
+} 
+
+.CodeMirror-function-definition {
+  margin: 5px;
+  padding: 0 4px;
+  border-radius: 2px;
+  white-space: pre;
+  color: white !important;
+  cursor: default;
 }
 
 li.CodeMirror-hint-active {
   background: rgb(21, 117, 226) !important;
   color: white;
-}
+}