diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 7b3f0713..f980da75 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -43,5 +43,4 @@
 //= require ./src/Metamaps.Mobile
 //= require ./src/Metamaps.Admin
 //= require ./src/Metamaps.Import
-//= require ./src/Metamaps.Header
 //= require ./src/Metamaps.JIT
diff --git a/app/assets/javascripts/src/Metamaps.Backbone.js b/app/assets/javascripts/src/Metamaps.Backbone.js
index b21397aa..d05ffe3a 100644
--- a/app/assets/javascripts/src/Metamaps.Backbone.js
+++ b/app/assets/javascripts/src/Metamaps.Backbone.js
@@ -121,36 +121,6 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
     }
     return this.get('mappers')
   },
-  attrForCards: function () {
-    function capitalize (string) {
-      return string.charAt(0).toUpperCase() + string.slice(1)
-    }
-
-    var n = this.get('name')
-    var d = this.get('desc')
-
-    var maxNameLength = 32
-    var maxDescLength = 118
-    var truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + '...' : n) : ''
-    var truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + '...' : d) : ''
-
-    var obj = {
-      id: this.id,
-      name: truncatedName,
-      fullName: n,
-      desc: truncatedDesc,
-      permission: this.get('permission') ? capitalize(this.get('permission')) : 'Commons',
-      editPermission: this.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEdit' : 'cannotEdit',
-      contributor_count_number: '<span class="cCountColor">' + this.get('contributor_count') + '</span>',
-      contributor_count_string: this.get('contributor_count') === 1 ? ' contributor' : ' contributors',
-      topic_count_number: '<span class="tCountColor">' + this.get('topic_count') + '</span>',
-      topic_count_string: this.get('topic_count') === 1 ? ' topic' : ' topics',
-      synapse_count_number: '<span class="sCountColor">' + this.get('synapse_count') + '</span>',
-      synapse_count_string: this.get('synapse_count') === 1 ? ' synapse' : ' synapses',
-      screenshot: '<img src="' + this.get('screenshot_url') + '" />'
-    }
-    return obj
-  },
   updateView: function () {
     var map = Metamaps.Active.Map
     var isActiveMap = this.id === map.id
@@ -159,6 +129,7 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
       this.updateMapWrapper()
       // mobile menu
       $('#header_content').html(this.get('name'))
+      document.title = this.get('name') + ' | Metamaps'
     }
   },
   updateMapWrapper: function () {
diff --git a/app/assets/javascripts/src/Metamaps.GlobalUI.js b/app/assets/javascripts/src/Metamaps.GlobalUI.js
index 97752a8a..a6466fdc 100644
--- a/app/assets/javascripts/src/Metamaps.GlobalUI.js
+++ b/app/assets/javascripts/src/Metamaps.GlobalUI.js
@@ -51,31 +51,26 @@ $(document).ready(function () {
           Metamaps[prop].hasOwnProperty('init') &&
           typeof (Metamaps[prop].init) == 'function'
       ) {
-          Metamaps[prop].init();
+          Metamaps[prop].init()
       }
   }
   // load whichever page you are on
   if (Metamaps.currentSection === "explore") {
-      var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1);
+      var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1)
 
-      Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
+      Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] )
       if (Metamaps.currentPage === "mapper") {
-          Metamaps.Views.exploreMaps.fetchUserThenRender();
-          Metamaps.Header.fetchUserThenChangeSection(!!Metamaps.Active.Mapper, Metamaps.Maps.Mapper.mapperId)
+          Metamaps.Views.exploreMaps.fetchUserThenRender()
       }
       else {
-          Metamaps.Views.exploreMaps.render();
-          Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, Metamaps.currentPage)
+          Metamaps.Views.exploreMaps.render()
       }
-      Metamaps.GlobalUI.showDiv('#exploreMaps')
-      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
+      Metamaps.GlobalUI.showDiv('#explore')
   }
   else if (Metamaps.currentSection === "" && Metamaps.Active.Mapper) {
-      Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
-      Metamaps.Views.exploreMaps.render();
-      Metamaps.GlobalUI.showDiv('#exploreMaps')
-      Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'active')
-      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
+      Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active)
+      Metamaps.Views.exploreMaps.render()
+      Metamaps.GlobalUI.showDiv('#explore')
   }
   else if (Metamaps.Active.Map || Metamaps.Active.Topic) {
     Metamaps.Loading.show()
diff --git a/app/assets/javascripts/src/Metamaps.Header.js b/app/assets/javascripts/src/Metamaps.Header.js
deleted file mode 100644
index 3693163b..00000000
--- a/app/assets/javascripts/src/Metamaps.Header.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/* global Metamaps, $ */
-
-Metamaps.Header = {
-  init: function () {
-
-  },
-  fetchUserThenChangeSection: function (signedIn, mapperId) {
-    $.ajax({
-       url: '/users/' + mapperId + '.json',
-       success: function (response) {
-         Metamaps.Header.changeSection(signedIn, 'mapper', response.image, response.name)
-       },
-       error: function () {}
-    }); 
-  },
-  changeSection: function (signedIn, section, userAvatar, userName) {
-    ReactDOM.render(
-      React.createElement(Metamaps.ReactComponents.Header, { signedIn: signedIn, section: section, userAvatar: userAvatar, userName: userName }),
-      document.getElementById('exploreMapsHeader')
-    );
-  }
-}
diff --git a/app/assets/javascripts/src/Metamaps.Map.js b/app/assets/javascripts/src/Metamaps.Map.js
index 935037ca..c5a5adf2 100644
--- a/app/assets/javascripts/src/Metamaps.Map.js
+++ b/app/assets/javascripts/src/Metamaps.Map.js
@@ -481,17 +481,7 @@ Metamaps.Map.InfoBox = {
     var querystring = window.location.search.replace(/^\?/, '')
     if (querystring == 'new') { 
       self.open()
-      window.setTimeout(self.requestMapTitle, 3000)
-    }
-  },
-  requestMapTitle: function () {
-    var t = prompt('Please enter a name for your map. You can also set it any time using the map info panel.')
- 
-    if (t) {
-      Metamaps.Active.Map.set('name', t)
-      Metamaps.Active.Map.save()
-      $('#mapInfoName span').text(t)
-      document.title = t + ' | Metamaps'
+      $('.mapInfoBox').addClass('mapRequestTitle')
     }
   },
   toggleBox: function (event) {
@@ -592,6 +582,8 @@ Metamaps.Map.InfoBox = {
       Metamaps.Active.Map.trigger('saved')
       // mobile menu
       $('#header_content').html(name)
+      $('.mapInfoBox').removeClass('mapRequestTitle')
+      document.title = name + ' | Metamaps'
     })
 
     $('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () {
@@ -702,6 +694,7 @@ Metamaps.Map.InfoBox = {
    $('.collaboratorSearchField').typeahead('val', '')
   },
   updateNameDescPerm: function (name, desc, perm) {
+    $('.mapInfoBox').removeClass('mapRequestTitle')
     $('.mapInfoName .best_in_place_name').html(name)
     $('.mapInfoDesc .best_in_place_desc').html(desc)
     $('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm)
diff --git a/app/assets/javascripts/src/Metamaps.Router.js b/app/assets/javascripts/src/Metamaps.Router.js
index bac80fb8..511577ba 100644
--- a/app/assets/javascripts/src/Metamaps.Router.js
+++ b/app/assets/javascripts/src/Metamaps.Router.js
@@ -46,13 +46,7 @@
       if (Metamaps.Active.Mapper) {
         Metamaps.GlobalUI.hideDiv('#yield')
 
-        Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'active')
-        Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
-        Metamaps.GlobalUI.showDiv('#exploreMaps')
-        $('#exploreMaps').scrollTop(0)
-
-        Metamaps.GlobalUI.Search.open()
-        Metamaps.GlobalUI.Search.lock()
+        Metamaps.GlobalUI.showDiv('#explore')
 
         Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active)
         if (Metamaps.Maps.Active.length === 0) {
@@ -62,11 +56,8 @@
         }
       } else {
         // logged out home page
-        Metamaps.GlobalUI.hideDiv('#exploreMapsHeader')
-        Metamaps.GlobalUI.hideDiv('#exploreMaps')
+        Metamaps.GlobalUI.hideDiv('#explore')
         Metamaps.GlobalUI.showDiv('#yield')
-        Metamaps.GlobalUI.Search.unlock()
-        //Metamaps.GlobalUI.Search.close(0, true)
         Metamaps.Router.timeoutId = setTimeout(navigate, 500)
       }
 
@@ -143,15 +134,7 @@
         }
       }
 
-      Metamaps.GlobalUI.Search.open()
-      Metamaps.GlobalUI.Search.lock()
-      Metamaps.GlobalUI.showDiv('#exploreMaps')
-      Metamaps.GlobalUI.showDiv('#exploreMapsHeader')
-      $('#exploreMaps').scrollTop(0)
-      if (id) {
-        Metamaps.Header.fetchUserThenChangeSection(!!Metamaps.Active.Mapper, id)
-      }
-      else Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, section)
+      Metamaps.GlobalUI.showDiv('#explore')
       Metamaps.GlobalUI.hideDiv('#yield')
       Metamaps.GlobalUI.hideDiv('#infovis')
       Metamaps.GlobalUI.hideDiv('#instructions')
@@ -174,8 +157,7 @@
       // can edit this map '.canEditMap'
 
       Metamaps.GlobalUI.hideDiv('#yield')
-      Metamaps.GlobalUI.hideDiv('#exploreMaps')
-      Metamaps.GlobalUI.hideDiv('#exploreMapsHeader')
+      Metamaps.GlobalUI.hideDiv('#explore')
 
       // clear the visualization, if there was one, before showing its div again
       if (Metamaps.Visualize.mGraph) {
@@ -187,9 +169,6 @@
       Metamaps.Topic.end()
       Metamaps.Active.Topic = null
 
-      //Metamaps.GlobalUI.Search.unlock()
-      //Metamaps.GlobalUI.Search.close(0, true)
-
       Metamaps.Loading.show()
       Metamaps.Map.end()
       Metamaps.Map.launch(id)
@@ -206,8 +185,7 @@
       $('.wrapper').addClass('topicPage')
 
       Metamaps.GlobalUI.hideDiv('#yield')
-      Metamaps.GlobalUI.hideDiv('#exploreMaps')
-      Metamaps.GlobalUI.hideDiv('#exploreMapsHeader')
+      Metamaps.GlobalUI.hideDiv('#explore')
 
       // clear the visualization, if there was one, before showing its div again
       if (Metamaps.Visualize.mGraph) {
@@ -219,9 +197,6 @@
       Metamaps.Map.end()
       Metamaps.Active.Map = null
 
-      //Metamaps.GlobalUI.Search.unlock()
-      //Metamaps.GlobalUI.Search.close(0, true)
-
       Metamaps.Topic.end()
       Metamaps.Topic.launch(id)
     }
diff --git a/app/assets/javascripts/src/Metamaps.Views.js b/app/assets/javascripts/src/Metamaps.Views.js
index 56096f0a..d027d22c 100644
--- a/app/assets/javascripts/src/Metamaps.Views.js
+++ b/app/assets/javascripts/src/Metamaps.Views.js
@@ -1,128 +1,87 @@
-/* global Metamaps, $, Hogan, Backbone */
+/* global Metamaps, $ */
 
 /*
  * Metamaps.Views.js.erb
  *
  * Dependencies:
- *  - Metamaps.Famous
  *  - Metamaps.Loading
+ *  - Metamaps.Active
+ *  - Metamaps.ReactComponents
  */
 
 Metamaps.Views = {
-  initialized: false
-}
-
-Metamaps.Views.init = function () {
-  Metamaps.Views.MapperCard = Backbone.View.extend({
-    template: Hogan.compile($('#mapperCardTemplate').html()),
-
-    tagName: 'div',
-
-    className: 'mapper',
-
-    render: function () {
-      this.$el.html(this.template.render(this.model))
-      return this
-    }
-  })
-
-  Metamaps.Views.MapCard = Backbone.View.extend({
-    template: Hogan.compile($('#mapCardTemplate').html()),
-
-    tagName: 'div',
-
-    className: 'map',
-
-    id: function () {
-      return this.model.id
-    },
-
-    initialize: function () {
-      this.listenTo(this.model, 'change', this.render)
-    },
-
-    render: function () {
-      this.$el.html(this.template.render(this.model.attrForCards()))
-      return this
-    }
-
-  })
-
-  var MapsWrapper = Backbone.View.extend({
-    initialize: function (opts) {},
+  exploreMaps: {
     setCollection: function (collection) {
-      if (this.collection) this.stopListening(this.collection)
-      this.collection = collection
-      this.listenTo(this.collection, 'add', this.render)
-      this.listenTo(this.collection, 'successOnFetch', this.handleSuccess)
-      this.listenTo(this.collection, 'errorOnFetch', this.handleError)
+      var self = Metamaps.Views.exploreMaps
+
+      if (self.collection) {
+        self.collection.off('add', self.render)
+        self.collection.off('successOnFetch', self.handleSuccess)
+        self.collection.off('errorOnFetch', self.handleError)
+      }
+      self.collection = collection
+      self.collection.on('add', self.render)
+      self.collection.on('successOnFetch', self.handleSuccess)
+      self.collection.on('errorOnFetch', self.handleError)
     },
     render: function (mapperObj, cb) {
-      var that = this
-
+      var self = Metamaps.Views.exploreMaps
+  
       if (typeof mapperObj === 'function') {
         cb = mapperObj
         mapperObj = null
       }
-
-      this.el.innerHTML = ''
-
-      // in case it is a page where we have to display the mapper card
-      if (mapperObj) {
-        var view = new Metamaps.Views.MapperCard({ model: mapperObj })
-
-        that.el.appendChild(view.render().el)
-      }
-
-      this.collection.each(function (map) {
-        var view = new Metamaps.Views.MapCard({ model: map })
-
-        that.el.appendChild(view.render().el)
-      })
-      this.$el.append('<div class="clearfloat"></div>')
       
-      if (this.collection.length >= 20 && this.collection.page != "loadedAll") {
-        this.$el.append('<button class="button loadMore">load more</button>')
-        this.$el.append('<div class="clearfloat"></div>')
+      var exploreObj = { 
+        currentUser: Metamaps.Active.Mapper,
+        section: self.collection.id,
+        displayStyle: 'grid',
+        maps: self.collection,
+        moreToLoad: self.collection.page != 'loadedAll',
+        user: mapperObj,
+        loadMore: self.loadMore
       }
+      ReactDOM.render(
+        React.createElement(Metamaps.ReactComponents.Maps, exploreObj),
+        document.getElementById('explore')
+      )
       
-      $('#exploreMaps').empty().html(this.el) 
-      this.$el.find('.loadMore').click(that.loadMore.bind(that))
       if (cb) cb()
       Metamaps.Loading.hide()
     },
     loadMore: function () {
-      if (this.collection.page != "loadedAll") {
-        this.collection.getMaps();
-      }
-      else {
-        this.$el.find('.loadMore').hide()
+      var self = Metamaps.Views.exploreMaps
+
+      if (self.collection.page != "loadedAll") {
+        self.collection.getMaps()
       }
+      else self.render()
     },
     handleSuccess: function (cb) {
-      if (this.collection && this.collection.id === 'mapper') {
-        this.fetchUserThenRender(cb)
+      var self = Metamaps.Views.exploreMaps
+
+      if (self.collection && self.collection.id === 'mapper') {
+        self.fetchUserThenRender(cb)
       } else {
-        this.render(cb)
+        self.render(cb)
       }
     },
     handleError: function () {
       console.log('error loading maps!') // TODO
     },
     fetchUserThenRender: function (cb) {
-      var that = this
+      var self = Metamaps.Views.exploreMaps
+      
       // first load the mapper object and then call the render function
       $.ajax({
-        url: '/users/' + this.collection.mapperId + '/details.json',
+        url: '/users/' + self.collection.mapperId + '/details.json',
         success: function (response) {
-          that.render(response, cb)
+          self.render(response, cb)
         },
         error: function () {
-          that.render(cb)
+          self.render(cb)
         }
       })
     }
-  })
-
-  Metamaps.Views.exploreMaps = new MapsWrapper()
+  }
 }
diff --git a/app/assets/stylesheets/application.css.erb b/app/assets/stylesheets/application.css.erb
index bf5079bb..f825392d 100644
--- a/app/assets/stylesheets/application.css.erb
+++ b/app/assets/stylesheets/application.css.erb
@@ -1522,6 +1522,39 @@ h3.filterBox {
     text-align: center;
     box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0px 3px 3px rgba(0,0,0,0.16);
 }
+.requestTitle {
+    display: none;
+    position: absolute;
+    background: black;
+    text-align: center;
+    text-transform: none;
+    color: white;
+    border-radius: 2px;
+    font-family: din-regular;
+    line-height: 18px;
+    font-size: 15px;
+    padding: 3px 5px 2px;
+    white-space: nowrap;
+    font-style: normal;
+    left: 50%;
+    margin-left: -100px;
+    top: -15px;
+}
+.mapRequestTitle .requestTitle {
+    display: block;
+}
+.requestTitle:after {
+    content: '';
+    position: absolute;
+    top: 23px;
+    left: 50%;
+    margin-left: -8px;
+    width: 0;
+    height: 0;
+    border-top: 10px solid #000000;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+}
 .mapInfoName {
     font-size: 18px;
     line-height: 20px;
diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb
index a1ea9c1d..140ee8db 100644
--- a/app/assets/stylesheets/clean.css.erb
+++ b/app/assets/stylesheets/clean.css.erb
@@ -613,8 +613,11 @@
 
 /* explore maps */
 
-#exploreMaps {
+#explore {
   display: none;
+}
+
+#exploreMaps {
   padding: 0 5%;
   position: absolute;
   width: 90%;
@@ -636,7 +639,6 @@
 }
 
 #exploreMapsHeader {
-  display: none;
   position: absolute;
   width: 100%;
 }
diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb
index dd9c2634..ff41c7dc 100644
--- a/app/views/layouts/_templates.html.erb
+++ b/app/views/layouts/_templates.html.erb
@@ -6,6 +6,7 @@
 <div class="templates">
     
     <script type="text/template" id="mapInfoBoxTemplate">
+  <div class="requestTitle">Click here to name this map!</div>
   <div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
   
   <div class="mapInfoStat">
@@ -45,55 +46,6 @@
     </div>
   </div>
     </script>
-    
-    <script type="text/template" id="mapCardTemplate">
-  <a href="/maps/{{id}}" data-router="true">
-  <div class="permission {{editPermission}}"> <!-- must be canEdit or cannotEdit -->
-	  <div class="mapCard">                                                   
-      <span class="title" title="{{fullName}}">                                                  
-        {{name}}
-      </span>  
-      <div class="mapScreenshot">
-        {{{screenshot}}}
-      </div>                                                  
-      <div class="scroll">                                                    
-        <div class="desc">                                                  
-          {{desc}}
-          <div class="clearfloat"></div>                              
-        </div>                                                                
-      </div>
-      <div class="mapMetadata">
-         <div class="metadataSection">{{{contributor_count_number}}}{{contributor_count_string}}</div>
-         <div class="metadataSection">{{{topic_count_number}}}{{topic_count_string}}</div>         
-         <div class="metadataSection mapPermission">{{permission}}</div> 
-         <div class="metadataSection">{{{synapse_count_number}}}{{synapse_count_string}}</div>         
-         <div class="clearfloat"></div>                               
-      </div>                                         
-    </div>
-  </div>
-  </a>
-    </script>
-
-    <script type="text/template" id="mapperCardTemplate">
-    <div class="mapperCard">                                                    
-      <div class="mapperImage">
-        <img src="{{image}}" width="96" height="96" />
-      </div> 
-      <div class="mapperName" title="{{name}}">                                                  
-        {{name}}
-      </div>
-      <div class="mapperInfo">
-        <div class="mapperCreatedAt">Mapper since: {{created_at}}</div>
-        <div class="mapperGeneration">Generation: {{generation}}</div>
-      </div>
-      <div class="mapperMetadata">
-         <div class="metadataSection metadataMaps"><div>{{numMaps}}</div>maps</div>
-         <div class="metadataSection metadataTopics"><div>{{numTopics}}</div>topics</div> 
-         <div class="metadataSection metadataSynapses"><div>{{numSynapses}}</div>synapses</div> 
-         <div class="clearfloat"></div>                               
-      </div>                                         
-    </div>
-    </script>
         
     <script type="text/template" id="topicSearchTemplate">
     <div class="result{{rtype}}">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 4463bb8e..61e8833a 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -44,8 +44,7 @@
             <% end %>
             <%= render :partial => 'layouts/lowermapelements' %>
 
-            <div id="exploreMaps"></div>
-            <div id="exploreMapsHeader"></div>
+            <div id="explore"></div>
             
             <div id="instructions">
               <div class="addTopic">
diff --git a/app/views/maps/_mapinfobox.html.erb b/app/views/maps/_mapinfobox.html.erb
index 49067d22..5a158d2d 100644
--- a/app/views/maps/_mapinfobox.html.erb
+++ b/app/views/maps/_mapinfobox.html.erb
@@ -6,6 +6,12 @@
   <%= @map && @map.user == user ? " yourMap" : "" %>
   <%= @map && policy(@map).update? ? " canEdit" : "" %>
   <%= @map && @map.permission != 'private' ? " shareable" : "" %>">
+
+  <% if current_user %>
+    <div class="requestTitle">
+      Click here to name this map!
+    </div>
+  <% end %>
   
   <% if @map %>
   <div class="mapInfoName" id="mapInfoName">
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index a208f170..832990b5 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -68,8 +68,8 @@ class Header extends Component {
       
             {mapper ? (
               <div className='exploreMapsButton active mapperButton'>
-                <img className='exploreMapperImage' width='24' height='24' src={this.props.userAvatar} />
-                <div className='exploreMapperName'>{this.props.userName}&rsquo;s Maps</div>
+                <img className='exploreMapperImage' width='24' height='24' src={this.props.user.image} />
+                <div className='exploreMapperName'>{this.props.user.name}&rsquo;s Maps</div>
                 <div className='clearfloat'></div>
               </div>
             ) : null }
@@ -83,8 +83,7 @@ class Header extends Component {
 Header.propTypes = {
   signedIn: PropTypes.bool.isRequired,
   section: PropTypes.string.isRequired,
-  userAvatar: PropTypes.string,
-  userName: PropTypes.string
+  user: PropTypes.object
 }
 
 export default Header
diff --git a/frontend/src/components/MapCard.js b/frontend/src/components/MapCard.js
new file mode 100644
index 00000000..bf1416fc
--- /dev/null
+++ b/frontend/src/components/MapCard.js
@@ -0,0 +1,74 @@
+import React, { Component, PropTypes } from 'react'
+
+class MapCard extends Component {
+  render = () => {
+    const { map, currentUser } = this.props
+    
+    function capitalize (string) {
+      return string.charAt(0).toUpperCase() + string.slice(1)
+    }
+
+    const n = map.get('name')
+    const d = map.get('desc')
+
+    const maxNameLength = 32
+    const maxDescLength = 118
+    const truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + '...' : n) : ''
+    const truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + '...' : d) : ''
+    const editPermission = map.authorizeToEdit(currentUser) ? 'canEdit' : 'cannotEdit'
+    
+    return (
+      <div className="map" id={ map.id }>
+        <a href={ '/maps/' + map.id } data-router="true">
+          <div className={ 'permission ' + editPermission }>
+  	        <div className="mapCard">                                         
+              <span className="title" title={ map.get('name') }>
+                { truncatedName }
+              </span>
+              <div className="mapScreenshot">
+                <img src={ map.get('screenshot_url') } />
+              </div>
+              <div className="scroll">
+                <div className="desc">
+                  { truncatedDesc }
+                  <div className="clearfloat"></div>
+                </div>
+              </div>
+              <div className="mapMetadata">
+                <div className="metadataSection">
+                  <span className="cCountColor">
+                    { map.get('contributor_count') }
+                  </span>
+                  { map.get('contributor_count') === 1 ? ' contributor' : ' contributors' }
+                </div>
+                <div className="metadataSection">
+                  <span className="tCountColor">
+                    { map.get('topic_count') }
+                  </span>
+                  { map.get('topic_count') === 1 ? ' topic' : ' topics' }
+                  </div> 
+                <div className="metadataSection mapPermission">
+                  { map.get('permission') ? capitalize(map.get('permission')) : 'Commons' }
+                </div>
+                <div className="metadataSection">
+                  <span className="sCountColor">
+                    { map.get('synapse_count') }
+                  </span>
+                  { map.get('synapse_count') === 1 ? ' synapse' : ' synapses' }
+                </div>
+                <div className="clearfloat"></div>
+              </div>                                         
+            </div>
+          </div>
+        </a>
+      </div>
+    )
+  }
+}
+
+MapCard.propTypes = {
+  map: PropTypes.object.isRequired,
+  currentUser: PropTypes.object
+}
+
+export default MapCard
diff --git a/frontend/src/components/MapListItem.js b/frontend/src/components/MapListItem.js
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/components/MapperCard.js b/frontend/src/components/MapperCard.js
new file mode 100644
index 00000000..e2f4cb33
--- /dev/null
+++ b/frontend/src/components/MapperCard.js
@@ -0,0 +1,36 @@
+import React, { Component, PropTypes } from 'react'
+
+class MapperCard extends Component {
+  render = () => {
+    const { user } = this.props
+    
+    return (
+      <div className="mapper">
+        <div className="mapperCard">                                                 
+          <div className="mapperImage">
+            <img src={ user.image } width="96" height="96" />
+          </div> 
+          <div className="mapperName" title={ user.name }>                                                  
+            { user.name }
+          </div>
+          <div className="mapperInfo">
+            <div className="mapperCreatedAt">Mapper since: { user.created_at }</div>
+            <div className="mapperGeneration">Generation: { user.generation }</div>
+          </div>
+          <div className="mapperMetadata">
+             <div className="metadataSection metadataMaps"><div>{ user.numMaps }</div>maps</div>
+             <div className="metadataSection metadataTopics"><div>{ user.numTopics }</div>topics</div> 
+             <div className="metadataSection metadataSynapses"><div>{ user.numSynapses }</div>synapses</div> 
+             <div className="clearfloat"></div>                               
+          </div>                                         
+        </div>
+      </div>
+    )
+  }
+}
+
+MapperCard.propTypes = {
+  user: PropTypes.object.isRequired
+}
+
+export default MapperCard
diff --git a/frontend/src/components/Maps.js b/frontend/src/components/Maps.js
new file mode 100644
index 00000000..0a784bd0
--- /dev/null
+++ b/frontend/src/components/Maps.js
@@ -0,0 +1,54 @@
+import React, { Component, PropTypes } from 'react'
+import Header from './Header.js'
+import MapperCard from './MapperCard.js'
+import MapCard from './MapCard.js'
+import MapListItem from './MapListItem.js'
+
+class Maps extends Component {
+  render = () => {
+    const { maps, currentUser, section, displayStyle, user, moreToLoad, loadMore } = this.props
+    let mapElements
+
+    if (displayStyle == 'grid') {
+      mapElements = maps.models.map(function (map) {
+        return <MapCard key={ map.id } map={ map } currentUser={ currentUser } />
+      })
+    }
+    else if (displayStyle == 'list') {
+      mapElements = maps.models.map(function (map) {
+        return <MapListItem key={ map.id } map={ map } />
+      })
+    }
+
+    return (
+      <div>
+        <div id='exploreMaps'>
+          <div>
+            { user ? <MapperCard user={ user } /> : null }
+            { mapElements }
+            <div className='clearfloat'></div>
+            { moreToLoad ? 
+                [<button className="button loadMore" onClick={ loadMore }>load more</button>, <div className='clearfloat'></div>]
+                : null }
+          </div>
+        </div>
+        <Header signedIn={ !!currentUser }
+          section={ section }
+          user={ user }
+          />
+      </div>
+    )
+  }
+}
+
+Maps.propTypes = {
+  section: PropTypes.string.isRequired,
+  maps: PropTypes.object.isRequired,
+  moreToLoad: PropTypes.bool.isRequired,
+  displayStyle: PropTypes.string,
+  user: PropTypes.object,
+  currentUser: PropTypes.object,
+  loadMore: PropTypes.func
+}
+
+export default Maps
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 1b61dac6..0556f4c1 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import Backbone from 'backbone'
 import _ from 'underscore'
-import Header from './components/Header.js'
+import Maps from './components/Maps.js'
 
 // this is optional really, if we import components directly React will be
 // in the bundle, so we won't need a global reference
@@ -14,5 +14,5 @@ window._ = _
 
 window.Metamaps = window.Metamaps || {}
 window.Metamaps.ReactComponents = {
-  Header
+  Maps
 }