diff --git a/app/assets/stylesheets/base.scss.erb b/app/assets/stylesheets/base.scss.erb
index 5cabd00f..499b92cd 100644
--- a/app/assets/stylesheets/base.scss.erb
+++ b/app/assets/stylesheets/base.scss.erb
@@ -185,123 +185,215 @@
 }
 
 .CardOnGraph .links {
-  position:relative;
+  position: relative;
   border-bottom: 1px solid #BDBDBD;
   border-top: 1px solid #BDBDBD;
   background-color: #e0e0e0;
-}
 
-.linkItem {
-  float:left;
-  height:46px;
-  z-index: 1;
-  position: relative;
-  color: #424242;
-  font-size: 14px;
-  line-height:14px;
-  height:12px;
-  padding:17px 0;
-}
-.linkItem a {
-  color: #424242;
-}
-
-.CardOnGraph .icon {
-  position:absolute;
-  width:100%;
-  z-index:1;
-  padding: 0;
-  height: 48px;
-}
-
-.contributor {
-  .contributorIcon {
-    display: inline-block;
-    vertical-align: middle;
-    border-radius: 14px;
-    margin: 5px;
-  }
-  span {
-    font-family: 'din-regular', sans-serif;
+  .linkItem {
+    float:left;
+    height:46px;
+    z-index: 1;
+    position: relative;
+    color: #424242;
     font-size: 14px;
+    line-height:14px;
+    height:12px;
+    padding:17px 0;
+
+    a {
+      color: #424242;
+    }
   }
-}
 
-.linkItem.mapCount {
-  margin-left: 12px;
-  width: 24px;
-  padding:17px 0 17px 36px;
-}
-.linkItem.mapCount .mapCountIcon {
-  position: absolute;
-  top: 8px;
-  left: 0;
-  width: 32px;
-  height: 32px;
-  background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  cursor: pointer;
-}
-.linkItem.mapCount:hover .mapCountIcon {
-  background-position: 0 -32px;
-}
+  .icon {
+    position:absolute;
+    width:100%;
+    z-index:1;
+    padding: 0;
+    height: 48px;
+    left: -16px;
+  }
+  
+  .contributor {
+    margin-left: 24px;
+    bottom: 7px;
 
-.linkItem.mapCount:hover .hoverTip {
-  display: block;
-}
-.CardOnGraph .mapCount .tip, .CardonGraph .mapCount .hoverTip {
-  top: 44px;
-  left: 0px;
-  font-size: 12px !important;
-}
+    .contributorIcon {
+      display: inline-block;
+      vertical-align: middle;
+      border-radius: 14px;
+      margin: 5px;
+    }
+    span {
+      font-family: 'din-regular', sans-serif;
+      font-size: 14px;
+    }
 
-.hoverTip {
-  white-space: nowrap;
-  font-family: 'din-regular';
-  top: 44px;
-  left: 0px;
-  font-size: 12px !important;
-  display: none;
-  position: absolute;
-  background: black;
-  color: white;
-  border-radius: 4px;
-  line-height: 17px;
-  padding: 3px 5px 2px;
-  z-index: 100;
-}
+    .contributorIcon {
+      position: absolute;
+      top: 8px;
+      left: 0;
+      border-radius: 16px;
+    }
 
+    .contributorName {
+      display: none;
+      position: absolute;
+      background: black;
+      text-align: center;
+      color: white;
+      border-radius: 2px;
+      font-family: din-regular;
+      line-height: 15px;
+      font-size: 12px;
+      padding: 3px 5px 2px;
+      white-space: nowrap;
+      margin-top: 36px;
+      margin-left: -32px;
+    }
 
-.CardOnGraph .mapCount .tip:before, .CardOnGraph .mapCount .hoverTip:before {
-  content: '';
-  position: absolute;
-  top: 26px;
-  left: 10px;
-  margin-top: -30px;
-  width: 0;
-  height: 0;
-  border-bottom: 4px solid #000000;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
+    &:hover .contributorName {
+      display: block;
+    }
+  }
 
-.CardOnGraph .mapCount .tip li {
-  list-style-type: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 6px 10px;
-  display: block;
-  height: 14px;
-  font-family: 'din-regular', helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 14px;
-  position: relative;
-}
+  .mapCount {
+    margin-left: 48px;
+    width: 24px;
+    padding:17px 0 17px 36px;
 
-.CardOnGraph .mapCount li.hideExtra {
-  display: none;
+    .mapCountIcon {
+      position: absolute;
+      top: 8px;
+      left: 0;
+      width: 32px;
+      height: 32px;
+      background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
+      background-repeat: no-repeat;
+      background-position: 0 0;
+      cursor: pointer;
+    }
+
+    &:hover .mapCountIcon {
+      background-position: 0 -32px;
+    }
+
+    .tip, .hoverTip {
+      top: 44px;
+      left: 0px;
+      font-size: 12px !important;
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 26px;
+        left: 10px;
+        margin-top: -30px;
+        width: 0;
+        height: 0;
+        border-bottom: 4px solid #000000;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+      }
+    }
+
+    .hoverTip {
+      white-space: nowrap;
+      font-family: 'din-regular';
+      top: 44px;
+      left: 0px;
+      font-size: 12px !important;
+      display: none;
+      position: absolute;
+      background: black;
+      color: white;
+      border-radius: 4px;
+      line-height: 17px;
+      padding: 3px 5px 2px;
+      z-index: 100;
+    }
+
+    &:hover .hoverTip {
+      display: block;
+    }
+
+    .tip a {
+      color: white;
+    }
+
+    .tip a:hover {
+      color: #757575;
+    }
+
+    .tip li {
+      list-style-type: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 6px 10px;
+      display: block;
+      height: 14px;
+      font-family: 'din-regular', helvetica, sans-serif;
+      font-size: 14px;
+      line-height: 14px;
+      position: relative;
+    }
+
+    li.hideExtra {
+      display: none;
+    }
+  }
+
+  .synapseCount {
+    margin-left: 2px;
+    width: 24px;
+    padding:17px 0 17px 32px;
+
+    .synapseCountIcon {
+      position: absolute;
+      top: 8px;
+      left: 0;
+      width: 32px;
+      height: 32px;
+      background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
+      background-repeat: no-repeat;
+      background-position: 0 0;
+    }
+    hover .synapseCountIcon {
+      background-position: 0 -32px;
+    }
+    .tip {
+      position: absolute;
+      background: black;
+      width: auto;
+      top: 44px;
+      color: white;
+      white-space: nowrap;
+      border-radius: 2px;
+      font-size: 12px !important;
+      font-family: 'din-regular';
+      line-height: 12px;
+      padding: 4px 4px 4px;
+      z-index: 100;
+    }
+
+    &:hover .tip {
+      display: block;
+    }
+
+    .tip:before {
+      content: '';
+      position: absolute;
+      margin-top: -8px;
+      margin-left: 6px;
+      width: 0;
+      height: 0;
+      border-bottom: 4px solid black;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+    }
+  }
 }
 
 .showMore {
@@ -309,66 +401,6 @@
   color: #4FC059;
 }
 
-.mapCount .tip a {
-  color: white;
-}
-
-.mapCount .tip a:hover {
-  color: #757575;
-}
-
-
-.linkItem.synapseCount {
-  margin-left: 2px;
-  width: 24px;
-  padding:17px 0 17px 32px;
-}
-.linkItem.synapseCount .synapseCountIcon {
-  position: absolute;
-  top: 8px;
-  left: 0;
-  width: 32px;
-  height: 32px;
-  background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
-  background-repeat: no-repeat;
-  background-position: 0 0;
-}
-.linkItem.synapseCount:hover .synapseCountIcon {
-  background-position: 0 -32px;
-}
-
-.CardOnGraph .synapseCount .tip {
-  position: absolute;
-  background: black;
-  width: auto;
-  top: 44px;
-  color: white;
-  white-space: nowrap;
-  border-radius: 2px;
-  font-size: 12px !important;
-  font-family: 'din-regular';
-  line-height: 12px;
-  padding: 4px 4px 4px;
-  z-index: 100;
-}
-
-.CardOnGraph .synapseCount:hover .tip {
-  display: block;
-}
-
-.CardOnGraph .synapseCount .tip:before {
-  content: '';
-  position: absolute;
-  margin-top: -8px;
-  margin-left: 6px;
-  width: 0;
-  height: 0;
-  border-bottom: 4px solid black;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-
-
 .mapPerm {
   width: 32px;
   height: 32px;
diff --git a/frontend/src/components/TopicCard.js b/frontend/src/components/TopicCard.js
index e7775f71..43ba1fe8 100644
--- a/frontend/src/components/TopicCard.js
+++ b/frontend/src/components/TopicCard.js
@@ -326,17 +326,20 @@ class ReactTopicCard extends Component {
     const { linkEdit, embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state
     const values = funcs.buildObject(topic, ActiveMapper)
     var authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
+
     let classname = 'permission'
-    if (authorizedToEdit) classname += ' canEdit'
-    else classname += ' cannotEdit'
+    if (authorizedToEdit) {
+      classname += ' canEdit'
+    } else {
+      classname += ' cannotEdit'
+    }
+
     if (topic.authorizePermissionChange(ActiveMapper)) classname += ' yourTopic'
     const hasAttachment = topic.get('link') && topic.get('link') !== ''
 
     return (
       <div className={classname}>
         <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${values.id}`}>
-          <div className="metacodeImage" style={{backgroundImage: `url(${values.imgsrc})`}}></div>
-          <span className="metacodeName">{values.metacode}</span>
           <span className="title">
             <div className="titleWrapper" id="titleActivator">
               <span className="best_in_place best_in_place_name">