diff --git a/app/assets/images/arrowperms_sprite.png b/app/assets/images/arrowperms_sprite.png
deleted file mode 100644
index eff00341..00000000
Binary files a/app/assets/images/arrowperms_sprite.png and /dev/null differ
diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb
index f0c3bd5a..15eacb3a 100644
--- a/app/assets/stylesheets/application.scss.erb
+++ b/app/assets/stylesheets/application.scss.erb
@@ -1914,14 +1914,10 @@ input.collaboratorSearchField {
     background-position: -32px 0;
 }
 .yourMap .mapPermission:hover {
-    background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>);
     cursor: pointer;
-    background-position: -32px 0;
 }
 .yourMap .mapPermission.minimize {
-    background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important;
     cursor: pointer;
-    background-position: 0 0;
 }
 .mapInfoBox .mapPermission .permissionSelect {
     list-style: none;
diff --git a/app/views/layouts/_foot.html.erb b/app/views/layouts/_foot.html.erb
index fd35e765..bc3d4223 100644
--- a/app/views/layouts/_foot.html.erb
+++ b/app/views/layouts/_foot.html.erb
@@ -15,7 +15,7 @@
 </script>
 <%= render :partial => 'layouts/lightboxes' %>
 <%= render :partial => 'layouts/templates' %>
-<%= render :partial => 'shared/metacodeBgColors' %>
+<%= render :partial => 'shared/metacodeCssColors' %>
 <%= render :partial => 'layouts/googleanalytics' if ENV["GA_TRACKING_CODE"].present? %>
 </body>
 </html>
diff --git a/app/views/shared/_metacodeBgColors.html.erb b/app/views/shared/_metacodeCssColors.html.erb
similarity index 51%
rename from app/views/shared/_metacodeBgColors.html.erb
rename to app/views/shared/_metacodeCssColors.html.erb
index 0fcf86dc..5ef6119e 100644
--- a/app/views/shared/_metacodeBgColors.html.erb
+++ b/app/views/shared/_metacodeCssColors.html.erb
@@ -1,7 +1,8 @@
 <style>
+<% # give text the color of the metacode by adding the class .metacodeColor{metacode-id} %>
 <% Metacode.all.each do |m| %>
 	<% if m.color %>
-		<%= ".mbg" + m.id.to_s + "{" %>
+		<%= ".metacodeColor" + m.id.to_s + "{" %>
 		<%= "color:" + m.color + " !important;" %>
 		<%= "}" %>
 	<% end %>
diff --git a/frontend/src/components/TopicCard/Follow.js b/frontend/src/components/TopicCard/Follow.js
index 509855e8..1aec6525 100644
--- a/frontend/src/components/TopicCard/Follow.js
+++ b/frontend/src/components/TopicCard/Follow.js
@@ -4,8 +4,18 @@ import PropTypes from 'prop-types'
 class Follow extends Component {
   render = () => {
     const { ActiveMapper, isFollowing, onTopicFollow } = this.props
-    return <div className='topicFollow' onClick={() => ActiveMapper && onTopicFollow()}>
-      {ActiveMapper ? isFollowing ? 'Unfollow' : 'Follow' : ''}
+    function onClick () {
+      if (ActiveMapper) {
+        onTopicFollow()
+      }
+    }
+    let innerValue
+    // only display either option if there is a user signed in
+    if (ActiveMapper) {
+      innerValue = isFollowing ? 'Unfollow' : 'Follow'
+    }
+    return <div className='topicFollow' onClick={onClick}>
+      {innerValue}
     </div>
   }
 }
diff --git a/frontend/src/components/TopicCard/Info.js b/frontend/src/components/TopicCard/Info.js
index 03d5da89..22c51189 100644
--- a/frontend/src/components/TopicCard/Info.js
+++ b/frontend/src/components/TopicCard/Info.js
@@ -1,6 +1,7 @@
 /* global $ */
 
-import React, { PropTypes, Component } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { Link } from 'react-router'
 
 class Info extends Component {
diff --git a/frontend/src/components/TopicCard/Links.js b/frontend/src/components/TopicCard/Links.js
index d245e945..1c822c34 100644
--- a/frontend/src/components/TopicCard/Links.js
+++ b/frontend/src/components/TopicCard/Links.js
@@ -40,7 +40,7 @@ class Links extends Component {
     return (
       <div className="links">
         <div className="linkItem icon metacodeItem">
-          <div className={`metacodeTitle mbg${metacode.get('id')}`}
+          <div className={`metacodeTitle metacodeColor${metacode.get('id')}`}
             onClick={() => authorizedToEdit && this.handleMetacodeBarClick()}
           >
             {metacode.get('name')}
diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js
index 7a6723f4..69ffa4e7 100644
--- a/frontend/src/components/TopicCard/index.js
+++ b/frontend/src/components/TopicCard/index.js
@@ -29,8 +29,8 @@ class ReactTopicCard extends Component {
     if (topic.authorizePermissionChange(currentUser)) classname += ' yourTopic'
 
     return (
-      <Draggable handle=".metacodeImage" defaultPosition={{x: 100, y: 100}}>
-        <div className="showcard mapElement mapElementHidden">
+      <Draggable handle='.metacodeImage' defaultPosition={{x: 100, y: 100}}>
+        <div className='showcard mapElement mapElementHidden'>
           <div className={classname}>
             <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}>
               <Links topic={topic}
@@ -53,7 +53,7 @@ class ReactTopicCard extends Component {
                 updateTopic={wrappedUpdateTopic}
               />
               <Info topic={topic} />
-              <div className="clearfloat"></div>
+              <div className='clearfloat' />
             </div>
           </div>
         </div>