diff --git a/frontend-js/src/main/js/gui/PanelControlElementType.js b/frontend-js/src/main/js/gui/PanelControlElementType.js
index 7b36049310b195e044f32a3b945a60952b53c686..dc2638d5d0835a8a0118d8200bd2559dec22ee4b 100644
--- a/frontend-js/src/main/js/gui/PanelControlElementType.js
+++ b/frontend-js/src/main/js/gui/PanelControlElementType.js
@@ -29,6 +29,10 @@ var PanelControlElementType = {
   USER_TAB_SURNAME_TEXT : "USER_TAB_SURNAME_TEXT",
   USER_TAB_EMAIL_TEXT : "USER_TAB_EMAIL_TEXT",
   USER_TAB_LOGOUT_BUTTON : "USER_TAB_LOGOUT_BUTTON",
+  
+  SUBMAP_TABLE : "SUBMAP_TABLE",
+  SUBMAP_DIV : "SUBMAP_DIV",
+  
 };
 
 module.exports = PanelControlElementType;
diff --git a/frontend-js/src/main/js/gui/SubmapPanel.js b/frontend-js/src/main/js/gui/SubmapPanel.js
index b2265e31e0cb71a83e9ccf6c0b5edcd470eb4565..b25ad41ab096dbf11b574f7c9850fc83c3a0856e 100644
--- a/frontend-js/src/main/js/gui/SubmapPanel.js
+++ b/frontend-js/src/main/js/gui/SubmapPanel.js
@@ -3,28 +3,53 @@
 /* exported logger */
 
 var Panel = require('./Panel');
+var PanelControlElementType = require('./PanelControlElementType');
 
 var logger = require('../logger');
+var Functions = require('../Functions');
 
 function SubmapPanel(params) {
   params.panelName = "user";
   Panel.call(this, params);
 
   var self = this;
-
+  self._createSubmapGui();
   self.refresh();
 }
 
 SubmapPanel.prototype = Object.create(Panel.prototype);
 SubmapPanel.prototype.constructor = SubmapPanel;
 
-SubmapPanel.prototype.getSubmapTable = function() {
-  return this.getElementByName(this.getElement(), "submapTable");
+SubmapPanel.prototype._createSubmapGui = function() {
+  var submapDiv = Functions.createElement({
+    type : "div",
+    name : "submapDiv",
+    className : "searchPanel"
+  });
+  this.getElement().appendChild(submapDiv);
+  this.setControlElement(PanelControlElementType.SUBMAP_DIV, submapDiv);
+
+  var generalOverlaysTitle = Functions.createElement({
+    type : "h5",
+    content : "SUBMAPS:"
+  });
+  submapDiv.appendChild(generalOverlaysTitle);
+
+  var submapTableDiv = Functions.createElement({
+    type : "table",
+    name : "submapTable",
+    className : "table table-bordered",
+    style : "width:100%"
+  });
+  submapDiv.appendChild(submapTableDiv);
+  this.setControlElement(PanelControlElementType.SUBMAP_TABLE, submapTableDiv);
+
 };
 
+
 SubmapPanel.prototype.refresh = function() {
   var self = this;
-  var table = self.getSubmapTable();
+  var table = self.getControlElement(PanelControlElementType.SUBMAP_TABLE);
   while (table.lastChild) {
     table.removeChild(table.lastChild);
   }
diff --git a/frontend-js/src/test/js/gui/SubmapPanel-test.js b/frontend-js/src/test/js/gui/SubmapPanel-test.js
index a9aa848b72950aed5a59c00f23f236b5e6abc8ea..25847c00598aaa547bd6939e747702e91deb0006 100644
--- a/frontend-js/src/test/js/gui/SubmapPanel-test.js
+++ b/frontend-js/src/test/js/gui/SubmapPanel-test.js
@@ -18,7 +18,7 @@ describe('SubmapPanel', function() {
   });
 
   it('contructor', function() {
-    var div = helper.createSubmapTab();
+    var div = document.createElement("div");
 
     var map = helper.createCustomMap();