diff --git a/app/assets/images/common/lang-nl/button-background-ideal-active-border.png b/app/assets/images/common/lang-nl/button-background-ideal-active-border.png
new file mode 100644
index 000000000..b05443243
Binary files /dev/null and b/app/assets/images/common/lang-nl/button-background-ideal-active-border.png differ
diff --git a/app/assets/images/pages/play/modal/lang-nl/buy-gems-background-NL.png b/app/assets/images/pages/play/modal/lang-nl/buy-gems-background-NL.png
new file mode 100644
index 000000000..a1a2576f9
Binary files /dev/null and b/app/assets/images/pages/play/modal/lang-nl/buy-gems-background-NL.png differ
diff --git a/app/styles/play/modal/lang-nl/buy-gems-modal-nl.sass b/app/styles/play/modal/lang-nl/buy-gems-modal-nl.sass
new file mode 100644
index 000000000..b01b39cdf
--- /dev/null
+++ b/app/styles/play/modal/lang-nl/buy-gems-modal-nl.sass
@@ -0,0 +1,96 @@
+@import "app/styles/mixins"
+
+#buy-gems-modal-nl
+
+ //- Header
+
+ h1
+ position: absolute
+ left: 325px
+ top: -70px
+ margin: 0
+ width: 612px
+ text-align: center
+ color: rgb(254,188,68)
+ font-size: 38px
+ text-shadow: black 4px 4px 0, black -4px -4px 0, black 4px -4px 0, black -4px 4px 0, black 4px 0px 0, black 0px -4px 0, black -4px 0px 0, black 0px 4px 0
+
+ //- Clear modal defaults
+ .modal-dialog
+ margin: 150px auto 0 auto
+ padding: 0
+ width: 1300px
+ height: 460px
+ background: none
+
+ //- Background
+ #buy-gems-background
+ position: absolute
+ top: -157px
+ left: -2px
+
+ //- Close modal button
+
+ #close-modal
+ position: absolute
+ left: 1005px
+ top: -80px
+ width: 60px
+ height: 60px
+ color: white
+ text-align: center
+ font-size: 30px
+ padding-top: 15px
+ cursor: pointer
+ @include rotate(-3deg)
+
+ &:hover
+ color: yellow
+
+ //- Products
+
+ #products
+ position: absolute
+ left: 55px
+ top: 242px
+ width: 1300px
+ height: 140px
+
+ .product
+ width: 228px
+ height: 136px
+ float: left
+ text-align: center
+ margin-right: 12px
+ position: relative
+
+ h4
+ font-size: 20px
+ color: rgb(22,16,5)
+
+ h3
+ margin-top: 10px
+ text-transform: uppercase
+ color: rgb(22,16,5)
+
+ button
+ position: absolute
+ width: 80%
+ left: 10%
+ bottom: -30px
+
+ .btn-ideal
+ border-image: url(/images/common/lang-nl/button-background-ideal-active-border.png) 14 20 20 fill round
+ color: #f2f2f2
+
+ a
+ color: #f2f2f2
+ text-decoration: none
+
+ //- Errors
+ .alert
+ position: absolute
+ left: 10%
+ width: 80%
+ top: 20px
+ border: 5px solid gray
diff --git a/app/templates/play/modal/buy-gems-modal.jade b/app/templates/play/modal/buy-gems-modal.jade
index 261fa9e41..e5c603a28 100644
--- a/app/templates/play/modal/buy-gems-modal.jade
+++ b/app/templates/play/modal/buy-gems-modal.jade
@@ -1,16 +1,19 @@
.modal-dialog
- .modal-content
-
+ .modal-content
+
if view.state === 'purchasing'
.alert.alert-info(data-i18n="buy_gems.purchasing")
-
+
else if view.state === 'retrying'
#retrying-alert.alert.alert-danger(data-i18n="buy_gems.retrying")
else
- img(src="/images/pages/play/modal/buy-gems-background.png")#buy-gems-background
- h1(data-i18n="play.buy_gems")
-
+ if (me.get('preferredLanguage',true) || 'en-US').split('-')[0] == 'nl'
+ img(src="/images/pages/play/modal/lang-nl/buy-gems-background-NL.png")#buy-gems-background)
+ else
+ img(src="/images/pages/play/modal/buy-gems-background.png")#buy-gems-background
+ h1(data-i18n="play.buy_gems")
+
#products
for product in view.products.models
.product
@@ -19,6 +22,16 @@
button.btn.btn-illustrated.btn-lg(value=product.get('name'))
span= product.get('priceString')
+ if (me.get('preferredLanguage',true) || 'en-US').split('-')[0] == 'nl'
+ .product
+ h4.subscription-gem-amount x{{gems}} / mo
+ h3
+ | 1, 3, 6 OF 12
+ br
+ | MAANDEN
+ a(href="http://www.codecombat.nl/kopen", target="_blank")
+ button.btn.btn-ideal.btn-illustrated.btn-lg.btn-succes PREPAID CODES
+
.product
h4.subscription-gem-amount x{{gems}} / mo
h3(data-i18n="account.subscription")
diff --git a/app/views/play/modal/BuyGemsModal.coffee b/app/views/play/modal/BuyGemsModal.coffee
index 3ec531ee1..816715cce 100644
--- a/app/views/play/modal/BuyGemsModal.coffee
+++ b/app/views/play/modal/BuyGemsModal.coffee
@@ -6,7 +6,11 @@ SubscribeModal = require 'views/core/SubscribeModal'
Products = require 'collections/Products'
module.exports = class BuyGemsModal extends ModalView
- id: 'buy-gems-modal'
+ id:
+ if (me.get('preferredLanguage',true) || 'en-US').split('-')[0] == 'nl'
+ 'buy-gems-modal-nl'
+ else
+ 'buy-gems-modal'
template: template
plain: true