diff --git a/app/assets/images/mCSB_buttons.png b/app/assets/images/mCSB_buttons.png
deleted file mode 100644
index 44388680..00000000
Binary files a/app/assets/images/mCSB_buttons.png and /dev/null differ
diff --git a/app/assets/javascripts/lib/cloudcarousel.js b/app/assets/javascripts/lib/cloudcarousel.js
index 8cfe5ae0..31a9aa7a 100644
--- a/app/assets/javascripts/lib/cloudcarousel.js
+++ b/app/assets/javascripts/lib/cloudcarousel.js
@@ -177,10 +177,20 @@ jQuery.browser = browser;
 		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
 		if (options.mouseWheel)
 		{
+			// START METAMAPS CODE
+			$('body').bind('mousewheel',this,function(event, delta) {					 
+					 if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.isSwitchingSet) {
+					 	event.data.rotate(delta);
+					 	return false;
+					 }
+				 });
+			// END METAMAPS CODE
+			/* ORIGINAL CODE
 			$(container).bind('mousewheel',this,function(event, delta) {					 
 					 event.data.rotate(delta);
 					 return false;
 				 });
+			*/
 		}
 		$(container).bind('mouseover click',this,function(event){
 			
diff --git a/app/assets/javascripts/src/JIT.js b/app/assets/javascripts/src/JIT.js
index de6aacb7..1f1c6333 100644
--- a/app/assets/javascripts/src/JIT.js
+++ b/app/assets/javascripts/src/JIT.js
@@ -2450,9 +2450,13 @@ Extras.Classes.Navigation = new Class({
     
     // START METAMAPS CODE
 	  if (e.target.id != 'infovis-canvas') return;
+    if (Metamaps.Create.newTopic.beingCreated) return;
 	  // END METAMAPS CODE
   
-    $.event.stop($.event.get(e, win));
+    //$.event.stop($.event.get(e, win));
+    // END METAMAPS CODE
+    // ORIGINAL CODE $.event.stop($.event.get(e, win));
+
     var val = this.config.zooming / 1000,
         ans = 1 + scroll * val;
         
diff --git a/app/assets/javascripts/src/Metamaps.GlobalUI.js b/app/assets/javascripts/src/Metamaps.GlobalUI.js
index b0b5e1b8..fc8f46ea 100644
--- a/app/assets/javascripts/src/Metamaps.GlobalUI.js
+++ b/app/assets/javascripts/src/Metamaps.GlobalUI.js
@@ -107,16 +107,7 @@ Metamaps.GlobalUI = {
         $('#lightbox_screen').animate({
                     'opacity': '0.42'
         }, 200);
-
-        if (Metamaps.Create && !Metamaps.Create.metacodeScrollerInit) {
-            $('.customMetacodeList, .metacodeSetList').mCustomScrollbar({
-                mouseWheelPixels: 200,
-                advanced: {
-                    updateOnContentResize: true
-                }
-            });
-            Metamaps.Create.metacodeScrollerInit = true;
-        }
+        
         if (which == "switchMetacodes") {
             Metamaps.Create.isSwitchingSet = true;
         }
diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js
index 5b9f7458..7cd25ef8 100644
--- a/app/assets/javascripts/src/Metamaps.JIT.js
+++ b/app/assets/javascripts/src/Metamaps.JIT.js
@@ -11,7 +11,6 @@ Metamaps.JIT = {
 
         $(".zoomIn").click(self.zoomIn);
         $(".zoomOut").click(self.zoomOut);
-        $(".centerMap").click(self.centerMap);
         $(".zoomExtents").click(self.zoomExtents);
     },
     /**
@@ -690,8 +689,6 @@ Metamaps.JIT = {
         var self = Metamaps.JIT;
 
         if (node && !node.nodeFrom) {
-            Metamaps.Create.newTopic.hide();
-            Metamaps.Create.newSynapse.hide();
             var pos = eventInfo.getPos();
             // if it's a left click, or a touch, move the node
             if (e.touches || (e.button == 0 && !e.altKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
@@ -738,6 +735,8 @@ Metamaps.JIT = {
                     tempNode = node;
                     tempInit = true;
 
+                    Metamaps.Create.newTopic.hide();
+                    Metamaps.Create.newSynapse.hide();
                     // set the draw synapse start positions
                     var l = Metamaps.Selected.Nodes.length;
                     if (l > 0) {
@@ -763,8 +762,7 @@ Metamaps.JIT = {
                 temp = eventInfo.getNode();
                 if (temp != false && temp.id != node.id && Metamaps.Selected.Nodes.indexOf(temp) == -1) { // this means a Node has been returned
                     tempNode2 = temp;
-                    Metamaps.Visualize.mGraph.plot();
-
+                    
                     Metamaps.Mouse.synapseEndCoordinates = {
                         x: tempNode2.pos.getc().x,
                         y: tempNode2.pos.getc().y
@@ -775,8 +773,7 @@ Metamaps.JIT = {
                         n.setData('dim', 25, 'current');
                     });
                     temp.setData('dim', 35, 'current');
-                    Metamaps.Visualize.mGraph.fx.plotNode(tempNode, Metamaps.Visualize.mGraph.canvas);
-                    Metamaps.Visualize.mGraph.fx.plotNode(temp, Metamaps.Visualize.mGraph.canvas);
+                    Metamaps.Visualize.mGraph.plot();
                 } else if (!temp) {
                     tempNode2 = null;
                     Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
@@ -787,8 +784,6 @@ Metamaps.JIT = {
                     var myY = e.clientY - 30;
                     $('#new_topic').css('left', myX + "px");
                     $('#new_topic').css('top', myY + "px");
-                    $('#new_synapse').css('left', myX + "px");
-                    $('#new_synapse').css('top', myY + "px");
                     Metamaps.Create.newTopic.x = eventInfo.getPos().x;
                     Metamaps.Create.newTopic.y = eventInfo.getPos().y;
                     Metamaps.Visualize.mGraph.plot();
@@ -803,6 +798,7 @@ Metamaps.JIT = {
     }, // onDragMoveTopicHandler
     onDragCancelHandler: function (node, eventInfo, e) {
         tempNode = null;
+        if (tempNode2) tempNode2.setData('dim', 25, 'current');
         tempNode2 = null;
         tempInit = false;
         // reset the draw synapse positions to false
@@ -811,7 +807,7 @@ Metamaps.JIT = {
         Metamaps.Visualize.mGraph.plot();
     }, // onDragCancelHandler
     onDragEndTopicHandler: function (node, eventInfo, e) {
-        var mapping;
+        var midpoint = {}, pixelPos, mapping;
 
         if (tempInit && tempNode2 == null) {
             // this means you want to add a new topic, and then a synapse
@@ -822,6 +818,13 @@ Metamaps.JIT = {
             Metamaps.Create.newTopic.addSynapse = false;
             Metamaps.Create.newSynapse.topic1id = tempNode.id;
             Metamaps.Create.newSynapse.topic2id = tempNode2.id;
+            tempNode2.setData('dim', 25, 'current');
+            Metamaps.Visualize.mGraph.plot();
+            midpoint.x = tempNode.pos.getc().x + (tempNode2.pos.getc().x - tempNode.pos.getc().x) / 2;
+            midpoint.y = tempNode.pos.getc().y + (tempNode2.pos.getc().y - tempNode.pos.getc().y) / 2;
+            pixelPos = Metamaps.Util.coordsToPixels(midpoint);
+            $('#new_synapse').css('left', pixelPos.x + "px");
+            $('#new_synapse').css('top', pixelPos.y + "px");
             Metamaps.Create.newSynapse.open();
             tempNode = null;
             tempNode2 = null;
@@ -830,11 +833,22 @@ Metamaps.JIT = {
             // this means you dragged an existing node, autosave that to the database
             if (Metamaps.Active.Map) {
                 mapping = node.getData('mapping');
-                mapping.set({
+                mapping.save({
                     xloc: node.getPos().x,
                     yloc: node.getPos().y
                 });
-                mapping.save();
+                // also save any other selected nodes that also got dragged along
+                var l = Metamaps.Selected.Nodes.length;
+                for (var i = l - 1; i >= 0; i -= 1) {
+                    var n = Metamaps.Selected.Nodes[i];
+                    if (n !== node) {
+                        mapping = n.getData('mapping');
+                        mapping.save({
+                            xloc: n.getPos().x,
+                            yloc: n.getPos().y
+                        });
+                    }
+                };
             }
         }
     }, //onDragEndTopicHandler
@@ -1114,6 +1128,9 @@ Metamaps.JIT = {
 
         if (Metamaps.Visualize.mGraph.busy) return;
 
+        // select the node
+        Metamaps.Control.selectNode(node, e);
+
         // delete old right click menu
         $('.rightclickmenu').remove();
         // create new menu for clicked on node
diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index 67eb5517..84700063 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -360,7 +360,6 @@ Metamaps.Backbone.init = function () {
  */
 Metamaps.Create = {
     isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
-    metacodeScrollerInit: false, // indicates whether the scrollbar in the custom metacode set space has been init
     selectedMetacodeSet: null,
     selectedMetacodeSetIndex: null,
     selectedMetacodeNames: [],
@@ -438,7 +437,8 @@ Metamaps.Create = {
         $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
             titleBox: $('#metacodeImgTitle'),
             yRadius: 40,
-            xPos: 150,
+            xRadius: 190,
+            xPos: 170,
             yPos: 40,
             speed: 0.3,
             mouseWheel: true,
@@ -522,7 +522,8 @@ Metamaps.Create = {
             $("#metacodeImg").CloudCarousel({
                 titleBox: $('#metacodeImgTitle'),
                 yRadius: 40,
-                xPos: 150,
+                xRadius: 190,
+                xPos: 170,
                 yPos: 40,
                 speed: 0.3,
                 mouseWheel: true,
@@ -611,6 +612,8 @@ Metamaps.Create = {
             Metamaps.Create.newTopic.addSynapse = false;
             Metamaps.Create.newSynapse.topic1id = 0;
             Metamaps.Create.newSynapse.topic2id = 0;
+            Metamaps.Mouse.synapseStartCoordinates = [];
+            Metamaps.Visualize.mGraph.plot();
         },
         getSearchQuery: function () {
             var self = Metamaps.Create.newSynapse;
@@ -1400,6 +1403,20 @@ Metamaps.Util = {
     getDistance: function (p1, p2) {
         return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
     },
+    coordsToPixels: function (coords) {
+        var canvas = Metamaps.Visualize.mGraph.canvas,
+            s = canvas.getSize(),
+            p = canvas.getPos(),
+            ox = canvas.translateOffsetX,
+            oy = canvas.translateOffsetY,
+            sx = canvas.scaleOffsetX,
+            sy = canvas.scaleOffsetY;
+        var pixels = {
+          x: (coords.x / (1/sx)) + p.x + s.width/2 + ox,
+          y: (coords.y / (1/sy)) + p.y + s.height/2 + oy
+        };
+        return pixels;
+    },
     generateOptionsList: function (data) {
         var newlist = "";
         for (var i = 0; i < data.length; i++) {
@@ -1727,18 +1744,7 @@ Metamaps.Realtime = {
         var self = Metamaps.Realtime;
         var socket = Metamaps.Realtime.socket;
 
-        var c = data.usercoords,
-            canvas = Metamaps.Visualize.mGraph.canvas,
-            s = canvas.getSize(),
-            p = canvas.getPos(),
-            ox = canvas.translateOffsetX,
-            oy = canvas.translateOffsetY,
-            sx = canvas.scaleOffsetX,
-            sy = canvas.scaleOffsetY;
-        var pixels = {
-          x: (c.x / (1/sx)) + p.x + s.width/2 + ox,
-          y: (c.y / (1/sy)) + p.y + s.height/2 + oy
-        };
+        var pixels = Metamaps.Util.coordsToPixels(data.usercoords);
         $('#compass' + data.userid).css({
             left: pixels.x + 'px',
             top: pixels.y + 'px'
@@ -3099,6 +3105,8 @@ Metamaps.Map = {
             $('.rightclickmenu').remove();
             Metamaps.TopicCard.hideCard();
             Metamaps.SynapseCard.hideCard();
+            Metamaps.Create.newTopic.hide();
+            Metamaps.Create.newSynapse.hide();
             Metamaps.Realtime.endActiveMap();
         }
     },
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index ebb6c2b5..711d0b8f 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -230,46 +230,42 @@ input[type="submit"]:active {
     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
-#closenewtopic,
-#closenewsynapse {
-    position: absolute;
-    top: 3px;
-    right: 3px;
-}
 .new_topic {
     /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
     top: -1000px;
     left: -1000px;
     display: block;
     position: absolute;
-    width: 300px;
-    margin: -40px 0 0 -50px;
-}
-.new_synapse {
-    display: none;
-    position: absolute;
+    width: 340px;
+    margin: -40px 0 0 -35px;
+    z-index: 1;
 }
+
 #new_topic .twitter-typeahead {
     position: absolute !important;
     top: 40px;
-    left: 50px;
+    left: 35px;
     z-index: 9999;
-    width: 202px;
-    height: 37px;
-    font-family: ':atp';
+    width: 270px;
+    height: 42px;
 }
 .new_topic #topic_name,
 .new_topic .tt-hint {
-    width: 190px;
-    background: rgba(0, 0, 0, 0.8);
-    height: 25px;
+    width: 254px;
+    background: #FFFFFF;
+    height: 14px;
     margin: 0;
-    padding: 5px 5px;
-    border: 1px solid black;
+    padding: 14px 8px;
+    border: none;
+    border-radius: 2px;
     outline: none;
-    font-size: 25px;
-    line-height: 35px;
-    color: rgba(255, 255, 255, 0.7);
+    font-size: 14px;
+    line-height: 14px;
+    color: #424242;
+    font-family: 'din-medium', helvetica, sans-serif;
+}
+.new_topic .tt-hint {
+    color: #BDBDBD;
 }
 .openMetacodeSwitcher {
     display: block;
@@ -279,7 +275,7 @@ input[type="submit"]:active {
     position: absolute;
     z-index: 2;
     top: 20px;
-    left: 30px;
+    left: 16px;
 }
 .openMetacodeSwitcher:hover {
     background-position: -16px 0;
@@ -291,27 +287,15 @@ input[type="submit"]:active {
     float: left;
     width: 120px;
     text-align: center;
-    margin-left: 90px;
+    margin-left: 110px;
 }
 /* synapse autocomplete */
-
-.new_topic #topic_name {
-    color: white;
-}
-.new_topic .tt-hint {
-    color: grey;
-}
-.new_topic #topic_name,
-.new_topic .tt-hint {
-    width: 190px;
-    background: rgba(0, 0, 0, 0.8);
-    height: 25px;
-    margin: 0;
-    padding: 5px 5px;
-    border: 1px solid black;
-    outline: none;
-    font-size: 18px;
-    line-height: 35px;
+.new_synapse {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    margin-left: -135px;
+    margin-top: -21px;
 }
 .new_synapse #synapse_desc {
     color: rgba(255, 255, 255, 0.7);
@@ -321,15 +305,18 @@ input[type="submit"]:active {
 }
 .new_synapse #synapse_desc,
 .new_synapse .tt-hint {
-    width: 200px;
-    background: rgba(0, 0, 0, 0.8);
-    height: 18px;
+    width: 254px;
+    background: #FFFFFF;
+    height: 14px;
     margin: 0;
-    padding: 5px 5px;
-    border: 1px solid black;
+    padding: 14px 8px;
+    border: none;
+    border-radius: 2px;
     outline: none;
-    font-size: 16px;
-    line-height: 20px;
+    font-size: 14px;
+    line-height: 14px;
+    color: #424242;
+    font-family: 'din-medium', helvetica, sans-serif;
 }
 label,
 select,
@@ -909,35 +896,98 @@ float: left;
 
 #new_topic .tt-suggestion.tt-is-under-cursor,
 #new_topic .tt-suggestion.tt-is-under-mouse-cursor {
-    background: #0E161D;
+    background: #E0E0E0;
 }
 #new_topic .tt-suggestion {
-    padding: 5px;
-    background: rgba(42, 52, 60, 0.9);
-    ;
+    background: #F5F5F5;
+    width: 270px;
+    position: relative;
 }
 #new_topic .autocompleteSection {
     float: left;
 }
+#new_topic .topicType {
+    padding: 4px 0 0 4px;
+}
 #new_topic .topicTitle {
-    width: 130px;
-    line-height: 22px;
+    width: 190px;
+    line-height: 14px;
+    font-size: 14px;
+    padding: 9px 0 9px 4px;
+}
+#new_topic .expandTopicMetadata {
+    display:none;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-repeat: no-repeat;
+    background-image: url(arrowright_sprite.png);
+    background-position: 0 -32px;
+}
+#new_topic .tt-suggestion.tt-is-under-cursor .expandTopicMetadata,
+#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata {
+    display: block;
+}
+#new_topic .tt-suggestion.tt-is-under-cursor .topicMetadata,
+#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata {
+    display: block;
+}
+#new_topic .topicMetadata {
+    position: absolute;
+    display: none;
+    top: -18px;
+    right: -100px;
+    width: 100px;
+    height: 70px;
+    background-color: #E0E0E0;
+    font-family: 'din-regular', helvetica, sans-serif;
+    font-size: 14px;
 }
 #new_topic .topicPermission {
-    width: 20px;
-    height: 20px;
+    width: 32px;
+    height: 32px;
     background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 16px 16px;
+    background-image: url(permissions32_sprite.png);
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+}
+#new_topic .topicPermission.commons {
+    background-position: 0 0;
+}
+#new_topic .topicPermission.public {
+    background-position: -64px 0;
+}
+#new_topic .topicPermission.private {
+    background-position: -32px 0;
+}
+#new_topic .topicNumMaps {
+    height: 14px;
+    padding: 1px 0 1px 32px;
+    background-image: url(metamap16.png);
+    background-repeat: no-repeat;
+    background-position: 8px 0;
+    position: absolute;
+    top: 10px;
+}
+#new_topic .topicNumSynapses {
+    height: 14px;
+    padding: 1px 0 1px 32px;
+    background-image: url(synapse16.png);
+    background-repeat: no-repeat;
+    background-position: 8px 0;
+    position: absolute;
+    bottom: 10px;
 }
 #new_topic .topicOriginatorIcon {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 16px 16px;
-    background-image: url(MMCCicon_mapper.png);
+    position: absolute;
+    top: 8px;
+    right: 8px;
+}
+#new_topic .topicOriginatorIcon img {
+    border-radius: 12px;
 }
 #new_topic .topicOriginatorIcon:hover .tip {
     display: block;
@@ -1437,9 +1487,8 @@ float: left;
 .customMetacodeList,
 .metacodeSetList {
     height: 301px;
-    overflow: hidden;
+    overflow-y: auto;
     margin: 5px 0 15px 0;
-    /*  border-bottom: 1px solid #BBB;*/
 }
 .customMetacodeList ul li {
     cursor: pointer;
@@ -1937,8 +1986,8 @@ float: left;
 #wrapper .requestInvite {
     width: 700px;
     margin: 0 auto;
-    padding: 20px;
-    background: rgba(0, 0, 0, 0.4);
+    padding: 0 0 60px 0;
+    background: #FFFFFF;
     color: white;
     height: 100%;
     overflow: hidden;
diff --git a/app/helpers/topics_helper.rb b/app/helpers/topics_helper.rb
index f6587c4c..84c0d9a7 100644
--- a/app/helpers/topics_helper.rb
+++ b/app/helpers/topics_helper.rb
@@ -15,6 +15,7 @@ module TopicsHelper
       topic['mapCount'] = t.maps.count
       topic['synapseCount'] = t.synapses.count
       topic['originator'] = t.user.name
+      topic['originatorImage'] = t.user.image
       topic['rtype'] = "topic"
       
       temp.push topic
diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb
index ee6d5409..a8f10590 100644
--- a/app/views/layouts/_templates.html.erb
+++ b/app/views/layouts/_templates.html.erb
@@ -167,11 +167,17 @@
     </script>
 
     <script type="text/template" id="topicAutocompleteTemplate">
-        <img class="autocompleteSection topicType" width="22" height="22" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
+        <img class="autocompleteSection topicType" width="24" height="24" src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
         <p class="autocompleteSection topicTitle">{{label}}</p>
-        <div class="autocompleteSection topicPermission {{permission}}"></div>
-        <div class="autocompleteSection topicOriginatorIcon hoverForTip">
-            <span class="tip topicOriginator">{{originator}}</span>
+        <div class="expandTopicMetadata"></div>
+        <div class="topicMetadata">
+          <div class="topicNumMaps">{{mapCount}}</div>
+          <div class="topicNumSynapses">{{synapseCount}}</div>
+          <div class="topicOriginatorIcon hoverForTip">
+              <img width="24" height="24" src="{{originatorImage}}" />
+              <span class="tip topicOriginator">{{originator}}</span>
+          </div>
+          <div class="topicPermission {{permission}}"></div>
         </div>
         <div class="clearfloat"></div>
     </script>
diff --git a/app/views/main/requestinvite.html.erb b/app/views/main/requestinvite.html.erb
index 4f0f2b18..2b147db0 100644
--- a/app/views/main/requestinvite.html.erb
+++ b/app/views/main/requestinvite.html.erb
@@ -9,9 +9,3 @@
 <div id="yield">
 <iframe class="requestInvite" src="https://docs.google.com/forms/d/1lWoKPFHErsDfV5l7-SvcHxwX3vDi9nNNVW0rFMgJwgg/viewform?embedded=true" width="700" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
 </div>
-
-<script>
-$(document).ready(function() {
-  $('.requestInvite').height( (parseInt($('body').height()) - 40) ); 
-});
-</script>