diff --git a/app/locale/en.coffee b/app/locale/en.coffee
index 08db78355..8ca59d54d 100644
--- a/app/locale/en.coffee
+++ b/app/locale/en.coffee
@@ -64,6 +64,7 @@
     next: "Next"  # Go from choose hero to choose inventory before playing a level
     change_hero: "Change Hero"  # Go back from choose inventory to choose hero
     choose_inventory: "Equip Items"
+    buy_gems: "Buy Gems"
     older_campaigns: "Older Campaigns"
     anonymous: "Anonymous Player"
     level_difficulty: "Difficulty: "
diff --git a/app/styles/play/modal/buy-gems-modal.sass b/app/styles/play/modal/buy-gems-modal.sass
new file mode 100644
index 000000000..b7edc5092
--- /dev/null
+++ b/app/styles/play/modal/buy-gems-modal.sass
@@ -0,0 +1,8 @@
+#buy-gems-modal
+  button
+    width: 100%
+    margin-bottom: 10px
+    
+  .gem
+    width: 20px
+    height: 20px
\ No newline at end of file
diff --git a/app/templates/play/modal/buy-gems-modal.jade b/app/templates/play/modal/buy-gems-modal.jade
new file mode 100644
index 000000000..6833949f6
--- /dev/null
+++ b/app/templates/play/modal/buy-gems-modal.jade
@@ -0,0 +1,14 @@
+extends /templates/modal/modal_base
+
+block modal-header-content
+  h3(data-i18n='play.buy_gems')
+
+block modal-body-content
+  for product in products
+    button.product.btn.btn-lg(value=product.id)
+      img.gem(src="/images/common/gem.png")
+      span x#{product.gems): #{product.price}
+
+block modal-footer
+  .modal-footer
+    button(data-dismiss="modal", data-i18n="common.cancel").btn Cancel
diff --git a/app/templates/play/world-map-view.jade b/app/templates/play/world-map-view.jade
index 3290ea6d5..2f254f7d8 100644
--- a/app/templates/play/world-map-view.jade
+++ b/app/templates/play/world-map-view.jade
@@ -40,6 +40,7 @@
   button.btn.items(data-toggle='coco-modal', data-target='play/modal/PlayItemsModal', data-i18n="[title]play.items")
   button.btn.heroes(data-toggle='coco-modal', data-target='play/modal/PlayHeroesModal', data-i18n="[title]play.heroes")
   if me.isAdmin()
+    button.btn.gems(data-toggle='coco-modal', data-target='play/modal/BuyGemsModal', data-i18n="[title]play.buy_gems")
     button.btn.achievements(data-toggle='coco-modal', data-target='play/modal/PlayAchievementsModal', data-i18n="[title]play.achievements")
     button.btn.account(data-toggle='coco-modal', data-target='play/modal/PlayAccountModal', data-i18n="[title]play.account")
     button.btn.settings(data-toggle='coco-modal', data-target='play/modal/PlaySettingsModal', data-i18n="[title]play.settings")
diff --git a/app/views/play/modal/BuyGemsModal.coffee b/app/views/play/modal/BuyGemsModal.coffee
new file mode 100644
index 000000000..29581a908
--- /dev/null
+++ b/app/views/play/modal/BuyGemsModal.coffee
@@ -0,0 +1,37 @@
+ModalView = require 'views/kinds/ModalView'
+template = require 'templates/play/modal/buy-gems-modal'
+
+module.exports = class BuyGemsModal extends ModalView
+  id: 'buy-gems-modal'
+  template: template
+  plain: true
+  
+  events:
+    'click button.product': 'onClickProductButton' 
+  
+  getRenderData: ->
+    c = super()
+    c.products = @getProducts()
+    return c
+    
+  getProducts: ->
+    if application.isIPadApp
+      # Inject IAP data here.
+      
+    else
+      return [
+        { price: '$4.99', gems: 5000, id: 'gems_5' }
+        { price: '$9.99', gems: 11000, id: 'gems_10' }
+        { price: '$19.99', gems: 25000, id: 'gems_20' }
+      ]
+
+  onClickProductButton: (e) ->
+    productID = $(e.target).closest('button.product').val()
+    product = _.find @getProducts(), { id: productID }
+    console.log 'wanna purchase product', product
+    
+    if application.isIPadApp
+      # Trigger IAP here.
+      
+    else
+      @$el.find('.modal-body').append($('<div class="alert alert-danger">Not implemented</div>'))
\ No newline at end of file