diff --git a/Changelog b/Changelog
index 7e174401..d23979ae 100644
--- a/Changelog
+++ b/Changelog
@@ -1,3 +1,12 @@
+1.0.20: 2017-07-18
+    * #3590: [digitalglarus] Added impact hub partner logo and text in digitalglarus
+             [datacenterlight, hosting] Fixed overlapping of date and billing address in the mobile view
+    * #3580: [datacenterlight, hosting] Introduced newly designed payment page. Customized Stripe credit card input fields
+    * #3568: [all] Improved the way of adding Google analytics (ga) code. We now have ga code for ungleich, digitalglarus, blog, hosting
+             and datacenterlight
+    * #3564: [datacenterlight] Improved calculator form validations, both client side and server side
+             [datacenterlight] Changed "Place order" button to "Submit" in the payment page
+    * #3540: [datacenterlight] Improved credit card section with Stripe clarification texts and corresponding DE translations
 1.0.19: 2017-07-09
     * [blog] Added a space between "Posted on" and the "Date"
     * [datacenterlight, digitalglarus] Introduced Google Analytics for DCL and digitalglarus.ch
diff --git a/datacenterlight/templates/datacenterlight/order_detail.html b/datacenterlight/templates/datacenterlight/order_detail.html
index da95161c..4b8862df 100644
--- a/datacenterlight/templates/datacenterlight/order_detail.html
+++ b/datacenterlight/templates/datacenterlight/order_detail.html
@@ -25,7 +25,13 @@
                     </div>
                     <hr>
                     <div class="row">
-                        <div class="col-xs-6">
+                        <div class="col-xs-12 col-sm-6 pull-right order-confirm-date">
+                            <address>
+                                <strong>{% trans "Date"%}:</strong><br>
+                                <span id="order-created_at">{% now "Y-m-d H:i" %}</span><br><br>
+                            </address>
+                        </div>
+                        <div class="col-xs-12 col-sm-6">
                             <address>
                             <h3><b>{% trans "Billed To:"%}</b></h3>
                             {% with request.session.billing_address_data as billing_address %}
@@ -34,13 +40,6 @@
                             {% endwith %}
                             </address>
                         </div>
-                        <div class="col-xs-6 text-right">
-                            <address>
-                                <strong>{% trans "Date"%}:</strong><br>
-                                <span id="order-created_at">{% now "Y-m-d H:i" %}</span><br><br>
-                            </address>
-
-                        </div>
                     </div>
                     <div class="row">
                         <div class="col-xs-6">
diff --git a/digitalglarus/locale/de/LC_MESSAGES/django.po b/digitalglarus/locale/de/LC_MESSAGES/django.po
index ffbfcc91..f4193749 100644
--- a/digitalglarus/locale/de/LC_MESSAGES/django.po
+++ b/digitalglarus/locale/de/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-05-30 13:47+0000\n"
+"POT-Creation-Date: 2017-07-16 17:50+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -18,7 +18,7 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: cms_templates/djangocms_blog/_header_post_detail.html:20
+#: cms_templates/djangocms_blog/_header_post_detail.html:21
 #: digitalglarus/templates/digitalglarus/post_detail.html:19
 #: ungleich/templates/ungleich/djangocms_blog/includes/blog_item.html:19
 msgid "Posted on"
@@ -80,27 +80,27 @@ msgstr "von"
 msgid "Digital Glarus Gallery"
 msgstr ""
 
-#: digitalglarus/cms_plugins.py:21
+#: digitalglarus/cms_plugins.py:22
 msgid "Digital Glarus Supporters"
 msgstr ""
 
-#: digitalglarus/forms.py:35 digitalglarus/forms.py:70 nosystemd/forms.py:47
-#: utils/forms.py:109
+#: digitalglarus/forms.py:34 digitalglarus/forms.py:69 nosystemd/forms.py:47
+#: utils/forms.py:107
 msgid "Street Address"
 msgstr "Adresse"
 
-#: digitalglarus/forms.py:36 digitalglarus/forms.py:71 nosystemd/forms.py:48
-#: utils/forms.py:110 utils/forms.py:124
+#: digitalglarus/forms.py:35 digitalglarus/forms.py:70 nosystemd/forms.py:48
+#: utils/forms.py:108 utils/forms.py:123
 msgid "City"
 msgstr "Stadt"
 
-#: digitalglarus/forms.py:37 digitalglarus/forms.py:72 nosystemd/forms.py:49
-#: utils/forms.py:111 utils/forms.py:125
+#: digitalglarus/forms.py:36 digitalglarus/forms.py:71 nosystemd/forms.py:49
+#: utils/forms.py:109 utils/forms.py:124
 msgid "Postal Code"
 msgstr "Postleitzahl"
 
-#: digitalglarus/forms.py:38 digitalglarus/forms.py:73 nosystemd/forms.py:50
-#: utils/forms.py:112 utils/forms.py:126
+#: digitalglarus/forms.py:37 digitalglarus/forms.py:72 nosystemd/forms.py:50
+#: utils/forms.py:110 utils/forms.py:125
 msgid "Country"
 msgstr "Land"
 
@@ -116,7 +116,7 @@ msgid "previous"
 msgstr "vorherige"
 
 #: digitalglarus/templates/glarus_blog/post_list.html:26
-#: dynamicweb/settings/base.py:182 templates/cms/__init__.py:10
+#: dynamicweb/settings/base.py:192 templates/cms/__init__.py:10
 #: templates/cms/ungleichch/__init__.py:5
 msgid "Page"
 msgstr "Seite"
@@ -135,22 +135,22 @@ msgstr "nächste"
 msgid "Change to language:"
 msgstr "Sprache wechseln zu: "
 
-#: digitalglarus/templates/new_base_glarus.html:168
-#: digitalglarus/templates/new_base_glarus.html:191
+#: digitalglarus/templates/new_base_glarus.html:161
+#: digitalglarus/templates/new_base_glarus.html:184
 #: digitalglarus/templates/new_base_glarus_c.html:176
 #: digitalglarus/templates/new_base_glarus_c.html:199
 msgid "Bookings"
 msgstr ""
 
-#: digitalglarus/templates/new_base_glarus.html:172
-#: digitalglarus/templates/new_base_glarus.html:195
+#: digitalglarus/templates/new_base_glarus.html:165
+#: digitalglarus/templates/new_base_glarus.html:188
 #: digitalglarus/templates/new_base_glarus_c.html:180
 #: digitalglarus/templates/new_base_glarus_c.html:203
 msgid "Membership"
 msgstr ""
 
-#: digitalglarus/templates/new_base_glarus.html:178
-#: digitalglarus/templates/new_base_glarus.html:201
+#: digitalglarus/templates/new_base_glarus.html:171
+#: digitalglarus/templates/new_base_glarus.html:194
 #: digitalglarus/templates/new_base_glarus_c.html:186
 #: digitalglarus/templates/new_base_glarus_c.html:209
 #: nosystemd/templates/nosystemd/base.html:76
@@ -247,106 +247,71 @@ msgstr "befurworter/?$"
 msgid "Message Successfully Sent"
 msgstr ""
 
-#: dynamicweb/settings-test/__init__.py:178
+#: dynamicweb/settings-test/__init__.py:181
 msgid "US English"
 msgstr ""
 
-#: dynamicweb/settings-test/__init__.py:179
+#: dynamicweb/settings-test/__init__.py:182
 msgid "German"
 msgstr ""
 
-#: dynamicweb/settings-test/__init__.py:232
-#: dynamicweb/settings-test/__init__.py:241
-#: dynamicweb/settings/__init__old.py:232
-#: dynamicweb/settings/__init__old.py:241 dynamicweb/settings/base.py:270
-#: dynamicweb/settings/base.py:279
+#: dynamicweb/settings-test/__init__.py:235
+#: dynamicweb/settings-test/__init__.py:244 dynamicweb/settings/base.py:280
+#: dynamicweb/settings/base.py:289
 msgid "Content"
 msgstr ""
 
-#: dynamicweb/settings/__init__old.py:178 dynamicweb/settings/base.py:211
-msgid "English"
-msgstr ""
-
-#: dynamicweb/settings/__init__old.py:179 dynamicweb/settings/base.py:212
-msgid "Deutsch"
-msgstr ""
-
-#: dynamicweb/settings/base.py:171
+#: dynamicweb/settings/base.py:181
 msgid "default"
 msgstr ""
 
-#: dynamicweb/settings/base.py:172
+#: dynamicweb/settings/base.py:182
 msgid "2 Column"
 msgstr ""
 
-#: dynamicweb/settings/base.py:173
+#: dynamicweb/settings/base.py:183
 msgid "3 Column"
 msgstr ""
 
-#: dynamicweb/settings/base.py:174 templates/cms/__init__.py:4
+#: dynamicweb/settings/base.py:184 templates/cms/__init__.py:4
 #: templates/cms/digitalglarus/__init__.py:4
 msgid "DG.About"
 msgstr ""
 
-#: dynamicweb/settings/base.py:175 templates/cms/__init__.py:5
+#: dynamicweb/settings/base.py:185 templates/cms/__init__.py:5
 #: templates/cms/digitalglarus/__init__.py:5
 #, fuzzy
 #| msgid "contact/?$"
 msgid "DG.Contact"
 msgstr "kontakt/?$"
 
-#: dynamicweb/settings/base.py:176 templates/cms/__init__.py:6
+#: dynamicweb/settings/base.py:186 templates/cms/__init__.py:6
 #: templates/cms/digitalglarus/__init__.py:6
 msgid "DG.Home"
 msgstr ""
 
-#: dynamicweb/settings/base.py:177 templates/cms/__init__.py:7
+#: dynamicweb/settings/base.py:187 templates/cms/__init__.py:7
 #: templates/cms/digitalglarus/__init__.py:7
 msgid "DG.CoWork"
 msgstr ""
 
-#: dynamicweb/settings/base.py:179
+#: dynamicweb/settings/base.py:189
 msgid "DG.OneColumn"
 msgstr ""
 
-#: dynamicweb/settings/base.py:181 templates/cms/__init__.py:9
+#: dynamicweb/settings/base.py:191 templates/cms/__init__.py:9
 #: templates/cms/ungleichch/__init__.py:4
 msgid "Blog"
 msgstr ""
 
-#: membership/forms.py:43 utils/forms.py:142
-msgid "Name"
-msgstr "Name"
-
-#: membership/forms.py:43
-#, fuzzy
-msgid "Card number"
-msgstr "Kartennummer"
-
-#: membership/forms.py:43
-msgid "Expiry date"
-msgstr "Ablaufdatum"
-
-#: membership/forms.py:44
-msgid "CCV"
+#: dynamicweb/settings/base.py:221
+msgid "English"
 msgstr ""
 
-#: membership/models.py:67
-msgid "staff status"
+#: dynamicweb/settings/base.py:222
+msgid "Deutsch"
 msgstr ""
 
-#: membership/models.py:69
-msgid "Designates whether the user can log into this admin site."
-msgstr ""
-
-#: membership/models.py:181
-msgid "Use this pattern(MM/YYYY)."
-msgstr ""
-
-#: membership/models.py:182
-msgid "Wrong CCV number."
-msgstr "Falsche CCV Nummer"
-
 #: nosystemd/forms.py:46
 msgid "Amount"
 msgstr "Betrag"
@@ -502,979 +467,987 @@ msgstr ""
 msgid "DG.Detail"
 msgstr ""
 
-#: ungleich/cms_toolbar.py:24
+#: ungleich/cms_toolbar.py:23
 msgid "Page Header"
 msgstr ""
 
-#: ungleich/views.py:78
+#: ungleich/views.py:79
 #, python-format
 msgid "No %(verbose_name)s found matching the query"
 msgstr ""
 
-#: utils/fields.py:7
+#: utils/fields.py:6
 msgid "Andorra"
 msgstr ""
 
-#: utils/fields.py:8
+#: utils/fields.py:7
 msgid "United Arab Emirates"
 msgstr ""
 
-#: utils/fields.py:9
+#: utils/fields.py:8
 msgid "Afghanistan"
 msgstr ""
 
-#: utils/fields.py:10
+#: utils/fields.py:9
 msgid "Antigua & Barbuda"
 msgstr ""
 
-#: utils/fields.py:11
+#: utils/fields.py:10
 msgid "Anguilla"
 msgstr ""
 
-#: utils/fields.py:12
+#: utils/fields.py:11
 msgid "Albania"
 msgstr ""
 
-#: utils/fields.py:13
+#: utils/fields.py:12
 msgid "Armenia"
 msgstr ""
 
-#: utils/fields.py:14
+#: utils/fields.py:13
 msgid "Netherlands Antilles"
 msgstr ""
 
-#: utils/fields.py:15
+#: utils/fields.py:14
 msgid "Angola"
 msgstr ""
 
-#: utils/fields.py:16
+#: utils/fields.py:15
 msgid "Antarctica"
 msgstr ""
 
-#: utils/fields.py:17
+#: utils/fields.py:16
 msgid "Argentina"
 msgstr ""
 
-#: utils/fields.py:18
+#: utils/fields.py:17
 msgid "American Samoa"
 msgstr ""
 
-#: utils/fields.py:19
+#: utils/fields.py:18
 msgid "Austria"
 msgstr ""
 
-#: utils/fields.py:20
+#: utils/fields.py:19
 msgid "Australia"
 msgstr ""
 
-#: utils/fields.py:21
+#: utils/fields.py:20
 msgid "Aruba"
 msgstr ""
 
-#: utils/fields.py:22
+#: utils/fields.py:21
 msgid "Azerbaijan"
 msgstr ""
 
-#: utils/fields.py:23
+#: utils/fields.py:22
 msgid "Bosnia and Herzegovina"
 msgstr ""
 
-#: utils/fields.py:24
+#: utils/fields.py:23
 msgid "Barbados"
 msgstr ""
 
-#: utils/fields.py:25
+#: utils/fields.py:24
 msgid "Bangladesh"
 msgstr ""
 
-#: utils/fields.py:26
+#: utils/fields.py:25
 msgid "Belgium"
 msgstr ""
 
-#: utils/fields.py:27
+#: utils/fields.py:26
 msgid "Burkina Faso"
 msgstr ""
 
-#: utils/fields.py:28
+#: utils/fields.py:27
 msgid "Bulgaria"
 msgstr ""
 
-#: utils/fields.py:29
+#: utils/fields.py:28
 msgid "Bahrain"
 msgstr ""
 
-#: utils/fields.py:30
+#: utils/fields.py:29
 msgid "Burundi"
 msgstr ""
 
-#: utils/fields.py:31
+#: utils/fields.py:30
 msgid "Benin"
 msgstr ""
 
-#: utils/fields.py:32
+#: utils/fields.py:31
 msgid "Bermuda"
 msgstr ""
 
-#: utils/fields.py:33
+#: utils/fields.py:32
 msgid "Brunei Darussalam"
 msgstr ""
 
-#: utils/fields.py:34
+#: utils/fields.py:33
 msgid "Bolivia"
 msgstr ""
 
-#: utils/fields.py:35
+#: utils/fields.py:34
 msgid "Brazil"
 msgstr ""
 
-#: utils/fields.py:36
+#: utils/fields.py:35
 msgid "Bahama"
 msgstr ""
 
-#: utils/fields.py:37
+#: utils/fields.py:36
 msgid "Bhutan"
 msgstr ""
 
-#: utils/fields.py:38
+#: utils/fields.py:37
 msgid "Bouvet Island"
 msgstr ""
 
-#: utils/fields.py:39
+#: utils/fields.py:38
 msgid "Botswana"
 msgstr ""
 
-#: utils/fields.py:40
+#: utils/fields.py:39
 msgid "Belarus"
 msgstr ""
 
-#: utils/fields.py:41
+#: utils/fields.py:40
 msgid "Belize"
 msgstr ""
 
-#: utils/fields.py:42
+#: utils/fields.py:41
 msgid "Canada"
 msgstr ""
 
-#: utils/fields.py:43
+#: utils/fields.py:42
 msgid "Cocos (Keeling) Islands"
 msgstr ""
 
-#: utils/fields.py:44
+#: utils/fields.py:43
 msgid "Central African Republic"
 msgstr ""
 
-#: utils/fields.py:45
+#: utils/fields.py:44
 msgid "Congo"
 msgstr ""
 
-#: utils/fields.py:46
+#: utils/fields.py:45
 msgid "Switzerland"
 msgstr ""
 
-#: utils/fields.py:47
+#: utils/fields.py:46
 msgid "Ivory Coast"
 msgstr ""
 
-#: utils/fields.py:48
+#: utils/fields.py:47
 msgid "Cook Iislands"
 msgstr ""
 
-#: utils/fields.py:49
+#: utils/fields.py:48
 msgid "Chile"
 msgstr ""
 
-#: utils/fields.py:50
+#: utils/fields.py:49
 msgid "Cameroon"
 msgstr ""
 
-#: utils/fields.py:51
+#: utils/fields.py:50
 msgid "China"
 msgstr ""
 
-#: utils/fields.py:52
+#: utils/fields.py:51
 msgid "Colombia"
 msgstr ""
 
-#: utils/fields.py:53
+#: utils/fields.py:52
 msgid "Costa Rica"
 msgstr ""
 
-#: utils/fields.py:54
+#: utils/fields.py:53
 msgid "Cuba"
 msgstr ""
 
-#: utils/fields.py:55
+#: utils/fields.py:54
 msgid "Cape Verde"
 msgstr ""
 
-#: utils/fields.py:56
+#: utils/fields.py:55
 msgid "Christmas Island"
 msgstr ""
 
-#: utils/fields.py:57
+#: utils/fields.py:56
 msgid "Cyprus"
 msgstr ""
 
-#: utils/fields.py:58
+#: utils/fields.py:57
 msgid "Czech Republic"
 msgstr ""
 
-#: utils/fields.py:59
+#: utils/fields.py:58
 msgid "Germany"
 msgstr ""
 
-#: utils/fields.py:60
+#: utils/fields.py:59
 msgid "Djibouti"
 msgstr ""
 
-#: utils/fields.py:61
+#: utils/fields.py:60
 msgid "Denmark"
 msgstr ""
 
-#: utils/fields.py:62
+#: utils/fields.py:61
 msgid "Dominica"
 msgstr ""
 
-#: utils/fields.py:63
+#: utils/fields.py:62
 msgid "Dominican Republic"
 msgstr ""
 
-#: utils/fields.py:64
+#: utils/fields.py:63
 msgid "Algeria"
 msgstr ""
 
-#: utils/fields.py:65
+#: utils/fields.py:64
 msgid "Ecuador"
 msgstr ""
 
-#: utils/fields.py:66
+#: utils/fields.py:65
 msgid "Estonia"
 msgstr ""
 
-#: utils/fields.py:67
+#: utils/fields.py:66
 msgid "Egypt"
 msgstr ""
 
-#: utils/fields.py:68
+#: utils/fields.py:67
 msgid "Western Sahara"
 msgstr ""
 
-#: utils/fields.py:69
+#: utils/fields.py:68
 msgid "Eritrea"
 msgstr ""
 
-#: utils/fields.py:70
+#: utils/fields.py:69
 msgid "Spain"
 msgstr ""
 
-#: utils/fields.py:71
+#: utils/fields.py:70
 msgid "Ethiopia"
 msgstr ""
 
-#: utils/fields.py:72
+#: utils/fields.py:71
 msgid "Finland"
 msgstr ""
 
-#: utils/fields.py:73
+#: utils/fields.py:72
 msgid "Fiji"
 msgstr ""
 
-#: utils/fields.py:74
+#: utils/fields.py:73
 msgid "Falkland Islands (Malvinas)"
 msgstr ""
 
-#: utils/fields.py:75
+#: utils/fields.py:74
 msgid "Micronesia"
 msgstr ""
 
-#: utils/fields.py:76
+#: utils/fields.py:75
 msgid "Faroe Islands"
 msgstr ""
 
-#: utils/fields.py:77
+#: utils/fields.py:76
 msgid "France"
 msgstr ""
 
-#: utils/fields.py:78
+#: utils/fields.py:77
 msgid "France, Metropolitan"
 msgstr ""
 
-#: utils/fields.py:79
+#: utils/fields.py:78
 msgid "Gabon"
 msgstr ""
 
-#: utils/fields.py:80
+#: utils/fields.py:79
 msgid "United Kingdom (Great Britain)"
 msgstr ""
 
-#: utils/fields.py:81
+#: utils/fields.py:80
 msgid "Grenada"
 msgstr ""
 
-#: utils/fields.py:82
+#: utils/fields.py:81
 msgid "Georgia"
 msgstr ""
 
-#: utils/fields.py:83
+#: utils/fields.py:82
 msgid "French Guiana"
 msgstr ""
 
-#: utils/fields.py:84
+#: utils/fields.py:83
 msgid "Ghana"
 msgstr ""
 
-#: utils/fields.py:85
+#: utils/fields.py:84
 msgid "Gibraltar"
 msgstr ""
 
-#: utils/fields.py:86
+#: utils/fields.py:85
 msgid "Greenland"
 msgstr ""
 
-#: utils/fields.py:87
+#: utils/fields.py:86
 msgid "Gambia"
 msgstr ""
 
-#: utils/fields.py:88
+#: utils/fields.py:87
 msgid "Guinea"
 msgstr ""
 
-#: utils/fields.py:89
+#: utils/fields.py:88
 msgid "Guadeloupe"
 msgstr ""
 
-#: utils/fields.py:90
+#: utils/fields.py:89
 msgid "Equatorial Guinea"
 msgstr ""
 
-#: utils/fields.py:91
+#: utils/fields.py:90
 msgid "Greece"
 msgstr ""
 
-#: utils/fields.py:92
+#: utils/fields.py:91
 msgid "South Georgia and the South Sandwich Islands"
 msgstr ""
 
-#: utils/fields.py:93
+#: utils/fields.py:92
 msgid "Guatemala"
 msgstr ""
 
-#: utils/fields.py:94
+#: utils/fields.py:93
 msgid "Guam"
 msgstr ""
 
-#: utils/fields.py:95
+#: utils/fields.py:94
 msgid "Guinea-Bissau"
 msgstr ""
 
-#: utils/fields.py:96
+#: utils/fields.py:95
 msgid "Guyana"
 msgstr ""
 
-#: utils/fields.py:97
+#: utils/fields.py:96
 msgid "Hong Kong"
 msgstr ""
 
-#: utils/fields.py:98
+#: utils/fields.py:97
 msgid "Heard & McDonald Islands"
 msgstr ""
 
-#: utils/fields.py:99
+#: utils/fields.py:98
 msgid "Honduras"
 msgstr ""
 
-#: utils/fields.py:100
+#: utils/fields.py:99
 msgid "Croatia"
 msgstr ""
 
-#: utils/fields.py:101
+#: utils/fields.py:100
 msgid "Haiti"
 msgstr ""
 
-#: utils/fields.py:102
+#: utils/fields.py:101
 msgid "Hungary"
 msgstr ""
 
-#: utils/fields.py:103
+#: utils/fields.py:102
 msgid "Indonesia"
 msgstr ""
 
-#: utils/fields.py:104
+#: utils/fields.py:103
 msgid "Ireland"
 msgstr ""
 
-#: utils/fields.py:105
+#: utils/fields.py:104
 msgid "Israel"
 msgstr ""
 
-#: utils/fields.py:106
+#: utils/fields.py:105
 msgid "India"
 msgstr ""
 
-#: utils/fields.py:107
+#: utils/fields.py:106
 msgid "British Indian Ocean Territory"
 msgstr ""
 
-#: utils/fields.py:108
+#: utils/fields.py:107
 msgid "Iraq"
 msgstr ""
 
-#: utils/fields.py:109
+#: utils/fields.py:108
 msgid "Islamic Republic of Iran"
 msgstr ""
 
-#: utils/fields.py:110
+#: utils/fields.py:109
 msgid "Iceland"
 msgstr ""
 
-#: utils/fields.py:111
+#: utils/fields.py:110
 msgid "Italy"
 msgstr ""
 
-#: utils/fields.py:112
+#: utils/fields.py:111
 msgid "Jamaica"
 msgstr ""
 
-#: utils/fields.py:113
+#: utils/fields.py:112
 msgid "Jordan"
 msgstr ""
 
-#: utils/fields.py:114
+#: utils/fields.py:113
 msgid "Japan"
 msgstr ""
 
-#: utils/fields.py:115
+#: utils/fields.py:114
 msgid "Kenya"
 msgstr ""
 
-#: utils/fields.py:116
+#: utils/fields.py:115
 msgid "Kyrgyzstan"
 msgstr ""
 
-#: utils/fields.py:117
+#: utils/fields.py:116
 msgid "Cambodia"
 msgstr ""
 
-#: utils/fields.py:118
+#: utils/fields.py:117
 msgid "Kiribati"
 msgstr ""
 
-#: utils/fields.py:119
+#: utils/fields.py:118
 msgid "Comoros"
 msgstr ""
 
-#: utils/fields.py:120
+#: utils/fields.py:119
 msgid "St. Kitts and Nevis"
 msgstr ""
 
-#: utils/fields.py:121
+#: utils/fields.py:120
 msgid "Korea, Democratic People's Republic of"
 msgstr ""
 
-#: utils/fields.py:122
+#: utils/fields.py:121
 msgid "Korea, Republic of"
 msgstr ""
 
-#: utils/fields.py:123
+#: utils/fields.py:122
 msgid "Kuwait"
 msgstr ""
 
-#: utils/fields.py:124
+#: utils/fields.py:123
 msgid "Cayman Islands"
 msgstr ""
 
-#: utils/fields.py:125
+#: utils/fields.py:124
 msgid "Kazakhstan"
 msgstr ""
 
-#: utils/fields.py:126
+#: utils/fields.py:125
 msgid "Lao People's Democratic Republic"
 msgstr ""
 
-#: utils/fields.py:127
+#: utils/fields.py:126
 msgid "Lebanon"
 msgstr ""
 
-#: utils/fields.py:128
+#: utils/fields.py:127
 msgid "Saint Lucia"
 msgstr ""
 
-#: utils/fields.py:129
+#: utils/fields.py:128
 msgid "Liechtenstein"
 msgstr ""
 
-#: utils/fields.py:130
+#: utils/fields.py:129
 msgid "Sri Lanka"
 msgstr ""
 
-#: utils/fields.py:131
+#: utils/fields.py:130
 msgid "Liberia"
 msgstr ""
 
-#: utils/fields.py:132
+#: utils/fields.py:131
 msgid "Lesotho"
 msgstr ""
 
-#: utils/fields.py:133
+#: utils/fields.py:132
 msgid "Lithuania"
 msgstr ""
 
-#: utils/fields.py:134
+#: utils/fields.py:133
 msgid "Luxembourg"
 msgstr ""
 
-#: utils/fields.py:135
+#: utils/fields.py:134
 msgid "Latvia"
 msgstr ""
 
-#: utils/fields.py:136
+#: utils/fields.py:135
 msgid "Libyan Arab Jamahiriya"
 msgstr ""
 
-#: utils/fields.py:137
+#: utils/fields.py:136
 msgid "Morocco"
 msgstr ""
 
-#: utils/fields.py:138
+#: utils/fields.py:137
 msgid "Monaco"
 msgstr ""
 
-#: utils/fields.py:139
+#: utils/fields.py:138
 msgid "Moldova, Republic of"
 msgstr ""
 
-#: utils/fields.py:140
+#: utils/fields.py:139
 msgid "Madagascar"
 msgstr ""
 
-#: utils/fields.py:141
+#: utils/fields.py:140
 msgid "Marshall Islands"
 msgstr ""
 
-#: utils/fields.py:142
+#: utils/fields.py:141
 msgid "Mali"
 msgstr ""
 
-#: utils/fields.py:143
+#: utils/fields.py:142
 msgid "Mongolia"
 msgstr ""
 
-#: utils/fields.py:144
+#: utils/fields.py:143
 msgid "Myanmar"
 msgstr ""
 
-#: utils/fields.py:145
+#: utils/fields.py:144
 msgid "Macau"
 msgstr ""
 
-#: utils/fields.py:146
+#: utils/fields.py:145
 msgid "Northern Mariana Islands"
 msgstr ""
 
-#: utils/fields.py:147
+#: utils/fields.py:146
 msgid "Martinique"
 msgstr ""
 
-#: utils/fields.py:148
+#: utils/fields.py:147
 msgid "Mauritania"
 msgstr ""
 
-#: utils/fields.py:149
+#: utils/fields.py:148
 msgid "Monserrat"
 msgstr ""
 
-#: utils/fields.py:150
+#: utils/fields.py:149
 msgid "Malta"
 msgstr ""
 
-#: utils/fields.py:151
+#: utils/fields.py:150
 msgid "Mauritius"
 msgstr ""
 
-#: utils/fields.py:152
+#: utils/fields.py:151
 msgid "Maldives"
 msgstr ""
 
-#: utils/fields.py:153
+#: utils/fields.py:152
 msgid "Malawi"
 msgstr ""
 
-#: utils/fields.py:154
+#: utils/fields.py:153
 msgid "Mexico"
 msgstr ""
 
-#: utils/fields.py:155
+#: utils/fields.py:154
 msgid "Malaysia"
 msgstr ""
 
-#: utils/fields.py:156
+#: utils/fields.py:155
 msgid "Mozambique"
 msgstr ""
 
-#: utils/fields.py:157
+#: utils/fields.py:156
 msgid "Namibia"
 msgstr ""
 
-#: utils/fields.py:158
+#: utils/fields.py:157
 msgid "New Caledonia"
 msgstr ""
 
-#: utils/fields.py:159
+#: utils/fields.py:158
 msgid "Niger"
 msgstr ""
 
-#: utils/fields.py:160
+#: utils/fields.py:159
 msgid "Norfolk Island"
 msgstr ""
 
-#: utils/fields.py:161
+#: utils/fields.py:160
 msgid "Nigeria"
 msgstr ""
 
-#: utils/fields.py:162
+#: utils/fields.py:161
 msgid "Nicaragua"
 msgstr ""
 
-#: utils/fields.py:163
+#: utils/fields.py:162
 msgid "Netherlands"
 msgstr ""
 
-#: utils/fields.py:164
+#: utils/fields.py:163
 msgid "Norway"
 msgstr ""
 
-#: utils/fields.py:165
+#: utils/fields.py:164
 msgid "Nepal"
 msgstr ""
 
-#: utils/fields.py:166
+#: utils/fields.py:165
 msgid "Nauru"
 msgstr ""
 
-#: utils/fields.py:167
+#: utils/fields.py:166
 msgid "Niue"
 msgstr ""
 
-#: utils/fields.py:168
+#: utils/fields.py:167
 msgid "New Zealand"
 msgstr ""
 
-#: utils/fields.py:169
+#: utils/fields.py:168
 msgid "Oman"
 msgstr ""
 
-#: utils/fields.py:170
+#: utils/fields.py:169
 msgid "Panama"
 msgstr ""
 
-#: utils/fields.py:171
+#: utils/fields.py:170
 msgid "Peru"
 msgstr ""
 
-#: utils/fields.py:172
+#: utils/fields.py:171
 msgid "French Polynesia"
 msgstr ""
 
-#: utils/fields.py:173
+#: utils/fields.py:172
 msgid "Papua New Guinea"
 msgstr ""
 
-#: utils/fields.py:174
+#: utils/fields.py:173
 msgid "Philippines"
 msgstr ""
 
-#: utils/fields.py:175
+#: utils/fields.py:174
 msgid "Pakistan"
 msgstr ""
 
-#: utils/fields.py:176
+#: utils/fields.py:175
 msgid "Poland"
 msgstr ""
 
-#: utils/fields.py:177
+#: utils/fields.py:176
 msgid "St. Pierre & Miquelon"
 msgstr ""
 
-#: utils/fields.py:178
+#: utils/fields.py:177
 msgid "Pitcairn"
 msgstr ""
 
-#: utils/fields.py:179
+#: utils/fields.py:178
 msgid "Puerto Rico"
 msgstr ""
 
-#: utils/fields.py:180
+#: utils/fields.py:179
 msgid "Portugal"
 msgstr ""
 
-#: utils/fields.py:181
+#: utils/fields.py:180
 msgid "Palau"
 msgstr ""
 
-#: utils/fields.py:182
+#: utils/fields.py:181
 msgid "Paraguay"
 msgstr ""
 
-#: utils/fields.py:183
+#: utils/fields.py:182
 msgid "Qatar"
 msgstr ""
 
-#: utils/fields.py:184
+#: utils/fields.py:183
 msgid "Reunion"
 msgstr ""
 
-#: utils/fields.py:185
+#: utils/fields.py:184
 msgid "Romania"
 msgstr ""
 
-#: utils/fields.py:186
+#: utils/fields.py:185
 msgid "Russian Federation"
 msgstr ""
 
-#: utils/fields.py:187
+#: utils/fields.py:186
 msgid "Rwanda"
 msgstr ""
 
-#: utils/fields.py:188
+#: utils/fields.py:187
 msgid "Saudi Arabia"
 msgstr ""
 
-#: utils/fields.py:189
+#: utils/fields.py:188
 msgid "Solomon Islands"
 msgstr ""
 
-#: utils/fields.py:190
+#: utils/fields.py:189
 msgid "Seychelles"
 msgstr ""
 
-#: utils/fields.py:191
+#: utils/fields.py:190
 msgid "Sudan"
 msgstr ""
 
-#: utils/fields.py:192
+#: utils/fields.py:191
 msgid "Sweden"
 msgstr ""
 
-#: utils/fields.py:193
+#: utils/fields.py:192
 msgid "Singapore"
 msgstr ""
 
-#: utils/fields.py:194
+#: utils/fields.py:193
 msgid "St. Helena"
 msgstr ""
 
-#: utils/fields.py:195
+#: utils/fields.py:194
 msgid "Slovenia"
 msgstr ""
 
-#: utils/fields.py:196
+#: utils/fields.py:195
 msgid "Svalbard & Jan Mayen Islands"
 msgstr ""
 
-#: utils/fields.py:197
+#: utils/fields.py:196
 msgid "Slovakia"
 msgstr ""
 
-#: utils/fields.py:198
+#: utils/fields.py:197
 msgid "Sierra Leone"
 msgstr ""
 
-#: utils/fields.py:199
+#: utils/fields.py:198
 msgid "San Marino"
 msgstr ""
 
-#: utils/fields.py:200
+#: utils/fields.py:199
 msgid "Senegal"
 msgstr ""
 
-#: utils/fields.py:201
+#: utils/fields.py:200
 msgid "Somalia"
 msgstr ""
 
-#: utils/fields.py:202
+#: utils/fields.py:201
 msgid "Suriname"
 msgstr ""
 
-#: utils/fields.py:203
+#: utils/fields.py:202
 msgid "Sao Tome & Principe"
 msgstr ""
 
-#: utils/fields.py:204
+#: utils/fields.py:203
 msgid "El Salvador"
 msgstr ""
 
-#: utils/fields.py:205
+#: utils/fields.py:204
 msgid "Syrian Arab Republic"
 msgstr ""
 
-#: utils/fields.py:206
+#: utils/fields.py:205
 msgid "Swaziland"
 msgstr ""
 
-#: utils/fields.py:207
+#: utils/fields.py:206
 msgid "Turks & Caicos Islands"
 msgstr ""
 
-#: utils/fields.py:208
+#: utils/fields.py:207
 msgid "Chad"
 msgstr ""
 
-#: utils/fields.py:209
+#: utils/fields.py:208
 msgid "French Southern Territories"
 msgstr ""
 
-#: utils/fields.py:210
+#: utils/fields.py:209
 msgid "Togo"
 msgstr ""
 
-#: utils/fields.py:211
+#: utils/fields.py:210
 msgid "Thailand"
 msgstr ""
 
-#: utils/fields.py:212
+#: utils/fields.py:211
 msgid "Tajikistan"
 msgstr ""
 
-#: utils/fields.py:213
+#: utils/fields.py:212
 msgid "Tokelau"
 msgstr ""
 
-#: utils/fields.py:214
+#: utils/fields.py:213
 msgid "Turkmenistan"
 msgstr ""
 
-#: utils/fields.py:215
+#: utils/fields.py:214
 msgid "Tunisia"
 msgstr ""
 
-#: utils/fields.py:216
+#: utils/fields.py:215
 msgid "Tonga"
 msgstr ""
 
-#: utils/fields.py:217
+#: utils/fields.py:216
 msgid "East Timor"
 msgstr ""
 
-#: utils/fields.py:218
+#: utils/fields.py:217
 msgid "Turkey"
 msgstr ""
 
-#: utils/fields.py:219
+#: utils/fields.py:218
 msgid "Trinidad & Tobago"
 msgstr ""
 
-#: utils/fields.py:220
+#: utils/fields.py:219
 msgid "Tuvalu"
 msgstr ""
 
-#: utils/fields.py:221
+#: utils/fields.py:220
 msgid "Taiwan, Province of China"
 msgstr ""
 
-#: utils/fields.py:222
+#: utils/fields.py:221
 msgid "Tanzania, United Republic of"
 msgstr ""
 
-#: utils/fields.py:223
+#: utils/fields.py:222
 msgid "Ukraine"
 msgstr ""
 
-#: utils/fields.py:224
+#: utils/fields.py:223
 msgid "Uganda"
 msgstr ""
 
-#: utils/fields.py:225
+#: utils/fields.py:224
 msgid "United States Minor Outlying Islands"
 msgstr ""
 
-#: utils/fields.py:226
+#: utils/fields.py:225
 msgid "United States of America"
 msgstr ""
 
-#: utils/fields.py:227
+#: utils/fields.py:226
 msgid "Uruguay"
 msgstr ""
 
-#: utils/fields.py:228
+#: utils/fields.py:227
 msgid "Uzbekistan"
 msgstr ""
 
-#: utils/fields.py:229
+#: utils/fields.py:228
 msgid "Vatican City State (Holy See)"
 msgstr ""
 
-#: utils/fields.py:230
+#: utils/fields.py:229
 msgid "St. Vincent & the Grenadines"
 msgstr ""
 
-#: utils/fields.py:231
+#: utils/fields.py:230
 msgid "Venezuela"
 msgstr ""
 
-#: utils/fields.py:232
+#: utils/fields.py:231
 msgid "British Virgin Islands"
 msgstr ""
 
-#: utils/fields.py:233
+#: utils/fields.py:232
 msgid "United States Virgin Islands"
 msgstr ""
 
-#: utils/fields.py:234
+#: utils/fields.py:233
 msgid "Viet Nam"
 msgstr ""
 
-#: utils/fields.py:235
+#: utils/fields.py:234
 msgid "Vanuatu"
 msgstr ""
 
-#: utils/fields.py:236
+#: utils/fields.py:235
 msgid "Wallis & Futuna Islands"
 msgstr ""
 
-#: utils/fields.py:237
+#: utils/fields.py:236
 msgid "Samoa"
 msgstr ""
 
-#: utils/fields.py:238
+#: utils/fields.py:237
 msgid "Yemen"
 msgstr ""
 
-#: utils/fields.py:239
+#: utils/fields.py:238
 msgid "Mayotte"
 msgstr ""
 
-#: utils/fields.py:240
+#: utils/fields.py:239
 msgid "Yugoslavia"
 msgstr ""
 
-#: utils/fields.py:241
+#: utils/fields.py:240
 msgid "South Africa"
 msgstr ""
 
-#: utils/fields.py:242
+#: utils/fields.py:241
 msgid "Zambia"
 msgstr ""
 
-#: utils/fields.py:243
+#: utils/fields.py:242
 msgid "Zaire"
 msgstr ""
 
-#: utils/fields.py:244
+#: utils/fields.py:243
 msgid "Zimbabwe"
 msgstr ""
 
-#: utils/fields.py:245
+#: utils/fields.py:244
 msgid "Unknown or unspecified country"
 msgstr ""
 
-#: utils/forms.py:20
+#: utils/forms.py:21
 msgid "Enter your name or company name"
 msgstr "Geben Sie Ihren Namen oder der Ihrer Firma ein"
 
-#: utils/forms.py:123
+#: utils/forms.py:106
+msgid "Cardholder Name"
+msgstr "Name des Kartenbesitzer"
+
+#: utils/forms.py:122
 msgid "Street Building"
 msgstr ""
 
+#: utils/forms.py:142
+msgid "Name"
+msgstr "Name"
+
 #: utils/forms.py:143
 msgid "Email"
 msgstr "Email"
@@ -1487,6 +1460,16 @@ msgstr "Telefon"
 msgid "Message"
 msgstr "Nachricht"
 
+#, fuzzy
+#~ msgid "Card number"
+#~ msgstr "Kartennummer"
+
+#~ msgid "Expiry date"
+#~ msgstr "Ablaufdatum"
+
+#~ msgid "Wrong CCV number."
+#~ msgstr "Falsche CCV Nummer"
+
 #~ msgid "home/?$"
 #~ msgstr "haus/?$"
 
diff --git a/digitalglarus/static/digitalglarus/img/impacthub_logo.jpg b/digitalglarus/static/digitalglarus/img/impacthub_logo.jpg
new file mode 100644
index 00000000..075fe83e
Binary files /dev/null and b/digitalglarus/static/digitalglarus/img/impacthub_logo.jpg differ
diff --git a/digitalglarus/templates/digitalglarus/index.html b/digitalglarus/templates/digitalglarus/index.html
index 0a371bb1..b57e54b5 100644
--- a/digitalglarus/templates/digitalglarus/index.html
+++ b/digitalglarus/templates/digitalglarus/index.html
@@ -121,7 +121,48 @@
   p a{
     color: #ecf0f1;
   }
-
+  .section-top-content {
+    font-size: 30px;
+    font-weight: 600;
+    padding-top: 50px;
+   }
+  .section-top-content span{
+    font-weight: 300;
+   }
+   .section-top-txt {
+    padding-top: 80px;
+    text-transform: uppercase;
+    text-align: right;
+   }
+   .section-top-img {
+	   padding:0px;
+	 }
+@media(max-width:500px)  {
+	.section-top-txt {
+    padding: 55px 5px 0 0px;
+	}
+	.section-top-content {
+    font-size: 28px;
+   }
+}
+@media(max-width:360px)  {
+	.section-top-txt {
+    padding: 32px 5px 0 0px;
+	}
+	.section-top-content {
+    font-size: 18px;
+   }
+}
+@media screen and (min-device-width: 768px) and (max-device-width: 991px) { 
+	.section-top-txt {
+    padding-top: 43px;
+     }
+}
+@media screen and (min-device-width: 992px) and (max-device-width: 1200px) { 
+	.section-top-txt {
+    padding-top: 65px;
+     }
+}
   </style>
 
 
@@ -132,7 +173,15 @@
     <section id="services">
       <div class="container">
     <div class="row">
-      <div class="col-lg-12 text-center wow fadeInDown">
+      <div class="col-lg-12 text-center wow fadeInDown section-top-content">
+        <div class="col-lg-3 col-sm-2 col-xs-12"></div>
+        <div class="col-lg-6 col-sm-10 col-xs-12">
+			<div class="col-lg-5 col-sm-5 col-xs-6 section-top-txt">Partner <span>of</span></div>
+			<div class="col-lg-7 col-sm-4 col-xs-6 section-top-img"><a href="https://zurich.impacthub.ch" target="_blank"><img src="{% static 'digitalglarus/img/impacthub_logo.jpg' %}" class="img-responsive" alt=""></a></div>
+		</div>
+        <div class="col-lg-3 col-sm-12 col-xs-12"></div>
+      </div>
+      <div class="col-lg-12 col-xs-12 text-center wow fadeInDown">
         <h2 class="section-heading">In Digital Glarus you can..</h2>
         <hr class="primary">
       </div>
@@ -526,4 +575,4 @@
   </div>
 </div> -->
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/hosting/locale/de/LC_MESSAGES/django.po b/hosting/locale/de/LC_MESSAGES/django.po
index 89257629..d102e74a 100644
--- a/hosting/locale/de/LC_MESSAGES/django.po
+++ b/hosting/locale/de/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-07-11 00:02+0530\n"
+"POT-Creation-Date: 2017-07-17 00:53+0530\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -26,47 +26,47 @@ msgstr "Dein Account wurde noch nicht aktiviert."
 msgid "Paste here your public key"
 msgstr "Fügen Sie Ihren public key ein"
 
-#: templates/hosting/base_short.html:68
+#: templates/hosting/base_short.html:71
 msgid "My Virtual Machines"
 msgstr "Meine virtuellen Maschinen"
 
-#: templates/hosting/base_short.html:73 templates/hosting/orders.html.py:12
+#: templates/hosting/base_short.html:76 templates/hosting/orders.html.py:12
 msgid "My Orders"
 msgstr "Meine Bestellungen"
 
-#: templates/hosting/base_short.html:82
+#: templates/hosting/base_short.html:85
 msgid "Keys"
 msgstr "Schlüssel"
 
-#: templates/hosting/base_short.html:87
+#: templates/hosting/base_short.html:90
 msgid "Notifications "
 msgstr "Benachrichtigungen"
 
-#: templates/hosting/base_short.html:90
+#: templates/hosting/base_short.html:93
 msgid "Logout"
 msgstr "Abmelden"
 
-#: templates/hosting/base_short.html:95
+#: templates/hosting/base_short.html:98
 msgid "How it works"
 msgstr "So funktioniert es"
 
-#: templates/hosting/base_short.html:98
+#: templates/hosting/base_short.html:101
 msgid "Your infrastructure"
 msgstr "deine Infrastruktur"
 
-#: templates/hosting/base_short.html:101
+#: templates/hosting/base_short.html:104
 msgid "Our inftrastructure"
 msgstr "Unsere Infrastruktur"
 
-#: templates/hosting/base_short.html:104
+#: templates/hosting/base_short.html:107
 msgid "Pricing"
 msgstr "Preise"
 
-#: templates/hosting/base_short.html:107
+#: templates/hosting/base_short.html:110
 msgid "Contact"
 msgstr "Kontakt"
 
-#: templates/hosting/base_short.html:110
+#: templates/hosting/base_short.html:113
 #: templates/hosting/confirm_reset_password.html:38
 #: templates/hosting/login.html:17 templates/hosting/login.html.py:26
 #: templates/hosting/reset_password.html:32 templates/hosting/signup.html:30
@@ -289,23 +289,23 @@ msgstr "Bezahlmethode"
 msgid "Order summary"
 msgstr "Bestellungsübersicht"
 
-#: templates/hosting/order_detail.html:65 templates/hosting/payment.html:17
+#: templates/hosting/order_detail.html:65 templates/hosting/payment.html:13
 #: templates/hosting/virtual_machine_detail.html:76
 msgid "Cores"
 msgstr "Prozessorkerne"
 
-#: templates/hosting/order_detail.html:67 templates/hosting/payment.html:20
+#: templates/hosting/order_detail.html:67 templates/hosting/payment.html:16
 #: templates/hosting/virtual_machine_detail.html:82
 msgid "Memory"
 msgstr "Arbeitsspeicher"
 
-#: templates/hosting/order_detail.html:69 templates/hosting/payment.html:23
+#: templates/hosting/order_detail.html:69 templates/hosting/payment.html:19
 msgid "Disk space"
 msgstr "Festplattenkapazität"
 
-#: templates/hosting/order_detail.html:71
+#: templates/hosting/order_detail.html:71 templates/hosting/payment.html:41
 msgid "Total"
-msgstr ""
+msgstr "Gesamt"
 
 #: templates/hosting/order_detail.html:77
 msgid "Finish Configuration"
@@ -349,46 +349,98 @@ msgstr "Schliessen"
 msgid "Delete"
 msgstr "Löschen"
 
-#: templates/hosting/payment.html:12
-msgid "Billing Amount"
-msgstr "Rechnungsbetrag"
+#: templates/hosting/payment.html:10
+msgid "Your Order"
+msgstr "Deine Bestellung"
 
-#: templates/hosting/payment.html:26
+#: templates/hosting/payment.html:22
 #: templates/hosting/virtual_machine_detail.html:98
 msgid "Configuration"
 msgstr "Konfiguration"
 
-#: templates/hosting/payment.html:38
+#: templates/hosting/payment.html:41
+msgid "including VAT"
+msgstr "inkl. Mehrwertsteuer"
+
+#: templates/hosting/payment.html:55
 msgid "Billing Address"
 msgstr "Rechnungsadresse"
 
-#: templates/hosting/payment.html:52
+#: templates/hosting/payment.html:66
 msgid "Credit Card"
 msgstr "Kreditkarte"
 
-#: templates/hosting/payment.html:56
+#: templates/hosting/payment.html:71
 msgid ""
-"Please fill in your credit card information below. We are using <a href="
-"\"https://stripe.com\" target=\"_blank\">Stripe</a> for payment and do not "
-"store your information in our database."
+"\n"
+"                                Please fill in your credit card information "
+"below. We are using <a\n"
+"                                    href=\"https://stripe.com\" target="
+"\"_blank\">Stripe</a> for payment and do not store\n"
+"                                your information in our database.\n"
+"                                "
 msgstr ""
-"Bitte füll deine Kreditkarteninformationen unten aus. Wir nutzen <a href="
+"\n"
+"Bitte füll Deine Kreditkarteninformationen unten aus. Wir nutzen <a href="
 "\"https://stripe.com\" target=\"_blank\">Stripe</a> für die Bezahlung und "
 "speichern keine Informationen in unserer Datenbank."
 
-#: templates/hosting/payment.html:71 templates/hosting/payment.html.py:96
+#: templates/hosting/payment.html:90
 msgid ""
-"You are not making any payment yet. After submitting your card information, "
-"you will be taken to the Confirm Order Page."
+"\n"
+"                                        You are not making any payment yet. "
+"After submitting your card\n"
+"                                        information, you will be taken to "
+"the Confirm Order Page.\n"
+"                                        "
 msgstr ""
-"Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe deiner "
+"\n"
+"Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe Deiner "
 "Kreditkateninformationen wirst du auf die Bestellbestätigungsseite "
 "weitergeleitet."
 
-#: templates/hosting/payment.html:76 templates/hosting/payment.html.py:100
+#: templates/hosting/payment.html:101 templates/hosting/payment.html.py:143
 msgid "Submit"
 msgstr "Absenden"
 
+#: templates/hosting/payment.html:113
+msgid "Card Number"
+msgstr "Kreditkartennummer"
+
+#: templates/hosting/payment.html:117
+msgid "Expiry Date"
+msgstr "Ablaufdatum"
+
+#: templates/hosting/payment.html:122
+msgid "CVC"
+msgstr ""
+
+#: templates/hosting/payment.html:126
+msgid "Card Type"
+msgstr "Kartentyp"
+
+#: templates/hosting/payment.html:135
+msgid ""
+"\n"
+"                                            You are not making any payment "
+"yet. After submitting your card\n"
+"                                            information, you will be taken "
+"to the Confirm Order Page.\n"
+"                                            "
+msgstr ""
+"\n"
+"Es wird noch keine Bezahlung vorgenommen. Nach der Eingabe Deiner "
+"Kreditkateninformationen wirst du auf die Bestellbestätigungsseite "
+"weitergeleitet."
+
+#: templates/hosting/payment.html:178
+msgid "Processing"
+msgstr "Weiter"
+
+#: templates/hosting/payment.html:179
+msgid "Enter your credit card number"
+msgstr "Deine Kreditkartennummer"
+
 #: templates/hosting/reset_password.html:15
 msgid "Reset your password"
 msgstr "Passwort zurücksetzen"
@@ -529,12 +581,15 @@ msgstr "Du kannst dich nun"
 msgid "Sorry. Your request is invalid."
 msgstr "Entschuldigung, deine Anfrage ist ungültig."
 
-#: views.py:756
+#: views.py:757
 msgid ""
 "We could not find the requested VM. Please                            "
 "contact Data Center Light Support."
 msgstr ""
 
+#~ msgid "Billing Amount"
+#~ msgstr "Rechnungsbetrag"
+
 #~ msgid "Payment Details"
 #~ msgstr "Rechnungsdetails"
 
@@ -552,15 +607,9 @@ msgstr ""
 #~ msgid "CARD NUMBER"
 #~ msgstr "Kreditkartennummer"
 
-#~ msgid "Valid Card Number"
-#~ msgstr "Gültige Kreditkartennummer"
-
 #~ msgid "EXPIRATION DATE"
 #~ msgstr "Ablaufdatum"
 
-#~ msgid "CV CODE"
-#~ msgstr "CV Code"
-
 #~ msgid "Home"
 #~ msgstr "Home"
 
diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css
index 0c927239..b1972eed 100644
--- a/hosting/static/hosting/css/landing-page.css
+++ b/hosting/static/hosting/css/landing-page.css
@@ -4,14 +4,15 @@
  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-
 @font-face {
     font-family: 'Lato-Regular';
     src: url('../fonts/Lato/Lato-Regular.ttf');
 }
+
 @font-face {
     src: url('../fonts/Lato/Lato-Black.ttf');
 }
+
 @font-face {
     font-family: 'Lato-Light';
     src: url('../fonts/Lato/Lato-Light.ttf');
@@ -33,6 +34,7 @@ h6 {
     font-family: 'Lato-Regular', sans-serif;
     font-weight: 300;
 }
+
 .topnav {
     font-size: 14px;
 }
@@ -191,17 +193,19 @@ h6 {
     float: right;
     margin-top: 0;
 }
+
 /*------Auth section---------*/
-.auth-container{
+.auth-container {
     height: 100vh;
     position: relative;
 }
-.auth-bg{
+
+.auth-bg {
     background: url(../img/auth-bg.jpg);
     position: fixed;
     left: 0;
     top: 0;
-     width: 100%;
+    width: 100%;
     height: 100vh;
     background-repeat: no-repeat;
     background-position: center center;
@@ -209,7 +213,8 @@ h6 {
     background-attachment: fixed;
 
 }
-.auth-bg::before{
+
+.auth-bg::before {
     content: "";
     position: absolute;
     top: 0;
@@ -219,26 +224,30 @@ h6 {
     background: rgba(75, 75, 101, 0.55);
     z-index: 1;
 }
-.auth-container .container{
+
+.auth-container .container {
     z-index: 1000;
 }
-.auth-container .auth-content{
+
+.auth-container .auth-content {
     width: 100%;
     margin: 0 auto;
     max-width: 390px;
 }
-.auth-container .auth-center{
-    position: absolute; 
-    left: 50%; 
-    top: 50%; 
-    transform: translate(-50%,-50%); 
+
+.auth-container .auth-center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
     width: 100%;
 }
 
-.auth-container .auth-title{
+.auth-container .auth-title {
     margin-bottom: 50px;
 }
-.auth-container .auth-title h2{
+
+.auth-container .auth-title h2 {
     color: #fff;
     font-size: 44px;
     text-align: center;
@@ -247,7 +256,8 @@ h6 {
     margin-bottom: 30px;
     position: relative;
 }
-.auth-container .auth-title h2::after{
+
+.auth-container .auth-title h2::after {
     content: "";
     position: absolute;
     bottom: -20px;
@@ -258,17 +268,17 @@ h6 {
     transform: translate(-50%, 0);
 }
 
-.auth-box{
+.auth-box {
     background: #fff;
     padding: 0;
     padding-bottom: 30px;
     box-sizing: border-box;
-    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
     border-radius: 4px;
     z-index: 10;
 }
 
-.auth-box .section-heading{
+.auth-box .section-heading {
     color: #5a5a5a;
     padding-top: 30px;
     padding-bottom: 5px;
@@ -279,42 +289,51 @@ h6 {
     border-radius: 3px 3px 0px 0px;
     margin: 0 auto;
 }
-.auth-box .form{
+
+.auth-box .form {
     padding: 20px;
     width: 80%;
     margin: 0 auto;
 }
-.auth-box .form .red{
+
+.auth-box .form .red {
     color: #ea3a3a;
 }
-.auth-box .form .btn{
-    box-shadow: 0 0px 9px rgba(0,0,0,0.19), 0 3px 5px rgba(0,0,0,0.23);
+
+.auth-box .form .btn {
+    box-shadow: 0 0px 9px rgba(0, 0, 0, 0.19), 0 3px 5px rgba(0, 0, 0, 0.23);
     letter-spacing: 3px;
     font-size: 17px;
     text-transform: uppercase;
 }
-.auth-box .form .form-control{
+
+.auth-box .form .form-control {
     height: 44px;
     font-size: 16px;
 }
+
 .auth-box .auth-footer {
     text-align: center;
     padding: 10px;
 }
-.auth-box .auth-footer .text{
+
+.auth-box .auth-footer .text {
     color: #777;
 }
-.auth-box .auth-footer .links a{
-    color: #1e94cc;
-}
-.auth-box .auth-footer .links a:hover{
+
+.auth-box .auth-footer .links a {
     color: #1e94cc;
 }
 
-.auth-box.sign-up{
+.auth-box .auth-footer .links a:hover {
+    color: #1e94cc;
+}
+
+.auth-box.sign-up {
     padding-bottom: 5px;
 }
-.auth-box.sign-up .form{
+
+.auth-box.sign-up .form {
     padding: 15px 20px 0 20px;
 }
 
@@ -325,6 +344,7 @@ h6 {
     line-height: 30px;
     font-family: 'Lato' !important;
 }
+
 .sign-up-message a {
     font-size: 18px;
     color: #1e94cc !important;
@@ -353,38 +373,47 @@ h6 {
     ul.banner-social-buttons > li:last-child {
         margin-bottom: 0;
     }
+
     .auth-box .form {
         padding: 15px 0px 0 0;
     }
+
     .auth-box.sign-up .form {
         padding: 15px 0px 0 0;
     }
+
     .auth-box .form .form-control {
         height: 44px;
         font-size: 13px;
     }
+
     .auth-container .auth-title {
         display: none;
     }
 }
+
 @media (max-width: 540px) {
-    .auth-container .auth-title h2{
+    .auth-container .auth-title h2 {
         font-size: 32px;
         width: 90%;
         margin-bottom: 50px;
     }
-    .auth-container.auth-signup .auth-title h2{
+
+    .auth-container.auth-signup .auth-title h2 {
         font-size: 20px;
         width: 90%;
         margin-bottom: 50px;
     }
+
     .auth-box .form {
         width: 90%;
     }
+
     .auth-box .section-heading {
         font-size: 15px;
     }
 }
+
 footer {
     padding: 2%;
     background-color: #f8f8f8;
@@ -418,3 +447,246 @@ a.unlink:hover {
     color: inherit;
 }
 
+/***** DCL payment page **********/
+.dcl-order-container {
+    font-family: Lato;
+}
+
+.dcl-order-table-header {
+    border-bottom: 1px solid #eee;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 16px;
+    color: #333;
+    text-align: center;
+    font-weight: 300;
+}
+
+.dcl-order-table-content {
+    border-bottom: 1px solid #eee;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 18px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.tbl-content {
+}
+
+.dcl-order-table-total {
+    border-bottom: 4px solid #eee;
+    padding-top: 15px;
+    padding-bottom: 20px;
+    font-size: 20px;
+    font-weight: 600;
+    color: #999;
+}
+
+.dcl-order-table-total span {
+    font-size: 13px;
+    color: #999;
+    font-weight: 400;
+    padding-left: 5px;
+}
+
+.dcl-order-table-total .tbl-total {
+    text-align: center;
+    color: #000;
+}
+
+.tbl-no-padding {
+    padding: 0px;
+}
+
+.dcl-billing-sec {
+    margin-top: 50px;
+}
+
+.dcl-order-sec {
+    padding: 0 30px;
+}
+
+.card-warning-content {
+    font-family: Lato;
+    border: 1px solid #a1a1a1;
+    border-radius: 3px;
+    padding: 5px;
+}
+
+.stripe-payment-btn {
+    outline: none;
+    width: auto;
+    float: right;
+    font-style: normal;
+    font-weight: 300;
+    position: absolute;
+    padding-left: 30px;
+    padding-right: 30px;
+    right: 0;
+}
+
+.brand {
+}
+
+.brand #brand-icon {
+}
+
+.card-number-element {
+}
+
+.card-expiry-element {
+}
+
+.card-cvc-element label {
+    padding-left: 10px;
+}
+
+.card-element {
+    margin-bottom: 10px;
+    padding: 0;
+}
+
+.card-element label{
+    width:100%;
+    margin-bottom:0px;
+}
+
+.my-input {
+   border-bottom: 1px solid #ccc;
+ }
+
+.card-cvc-element .my-input {
+    padding-left: 10px;
+}
+
+#card-errors {
+    clear: both;
+    padding: 0 0 10px;
+    color: #eb4d5c;
+}
+
+.credit-card-goup{
+    padding: 0;
+}
+
+.order-confirm-date{
+    text-align:right;
+}
+
+@media (max-width: 767px) {
+    .dcl-order-table-total span {
+        padding-left: 3px;
+    }
+
+    .dcl-order-sec {
+        padding: 10px 20px 30px 20px;
+        border-bottom: 4px solid #eee;
+    }
+
+    .tbl-header {
+        border-bottom: 1px solid #eee;
+        padding: 10px 0;
+    }
+
+    .tbl-content {
+        border-bottom: 1px solid #eee;
+        padding: 10px 0;
+    }
+
+    .dcl-order-table-header {
+        border-bottom: 0px solid #eee;
+        padding: 10px 0;
+        text-align: left;
+    }
+
+    .dcl-order-table-content {
+        border-bottom: 0px solid #eee;
+        padding: 10px 0;
+        text-align: right;
+        font-size: 16px;
+    }
+
+    .dcl-order-table-total {
+        font-size: 18px;
+        color: #000;
+        padding: 10px 0;
+        border-bottom: 0px solid #eee;
+    }
+
+    .dcl-order-table-total .tbl-total {
+        padding: 0px;
+        text-align: right;
+    }
+
+    .dcl-billing-sec {
+        margin-top: 30px;
+        margin-bottom: 30px;
+    }
+
+    .brand {
+    }
+
+    .card-expiry-element {
+    padding-right: 10px;
+    }
+
+    .card-cvc-element {
+    padding-left: 10px;
+    }
+    
+    .hide-mobile{
+    display:none;
+    }
+    
+    #billing-form .form-control {
+    box-shadow: none !important;
+    font-weight: 400;
+    }
+
+    .order-confirm-date{
+        text-align:left;
+    }
+}
+
+@media (min-width: 1200px) {
+    .dcl-order-container {
+        width: 990px;
+        padding-right: 15px;
+        padding-left: 15px;
+        margin-right: auto;
+        margin-left: auto;
+    }
+}
+
+@media (min-width: 768px) {
+    .dcl-billing {
+        padding-right: 50px;
+        border-right: 1px solid #eee;
+    }
+
+    .dcl-creditcard {
+        padding-left: 50px;
+    }
+
+    .tbl-tot {
+        padding-left: 17px;
+    }
+
+    .content-dashboard {
+        /*width: auto !important;*/
+    }
+
+}
+
+@media only screen and (max-width: 1040px) and (min-width: 768px) {
+    .content-dashboard {
+        width: 96% !important;
+    }
+}
+
+@media only screen and (max-width: 1330px) and (min-width: 1200px) {
+    .content-dashboard {
+        width: 100% !important;
+    }
+}
diff --git a/hosting/static/hosting/js/payment.js b/hosting/static/hosting/js/payment.js
index af9a9e71..6149a30a 100644
--- a/hosting/static/hosting/js/payment.js
+++ b/hosting/static/hosting/js/payment.js
@@ -1,39 +1,143 @@
-$( document ).ready(function() {
+var cardBrandToPfClass = {
+    'visa': 'pf-visa',
+    'mastercard': 'pf-mastercard',
+    'amex': 'pf-american-express',
+    'discover': 'pf-discover',
+    'diners': 'pf-diners',
+    'jcb': 'pf-jcb',
+    'unknown': 'pf-credit-card'
+};
+function setBrandIcon(brand) {
+    var brandIconElement = document.getElementById('brand-icon');
+    var pfClass = 'pf-credit-card';
+    if (brand in cardBrandToPfClass) {
+        pfClass = cardBrandToPfClass[brand];
+    }
+    for (var i = brandIconElement.classList.length - 1; i >= 0; i--) {
+        brandIconElement.classList.remove(brandIconElement.classList[i]);
+    }
+    brandIconElement.classList.add('pf');
+    brandIconElement.classList.add(pfClass);
+}
 
 
+$(document).ready(function () {
+    $.ajaxSetup({
+        beforeSend: function (xhr, settings) {
+            function getCookie(name) {
+                var cookieValue = null;
+                if (document.cookie && document.cookie != '') {
+                    var cookies = document.cookie.split(';');
+                    for (var i = 0; i < cookies.length; i++) {
+                        var cookie = jQuery.trim(cookies[i]);
+                        // Does this cookie string begin with the name we want?
+                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                            break;
+                        }
+                    }
+                }
+                return cookieValue;
+            }
 
-
-    $.ajaxSetup({ 
-         beforeSend: function(xhr, settings) {
-             function getCookie(name) {
-                 var cookieValue = null;
-                 if (document.cookie && document.cookie != '') {
-                     var cookies = document.cookie.split(';');
-                     for (var i = 0; i < cookies.length; i++) {
-                         var cookie = jQuery.trim(cookies[i]);
-                         // Does this cookie string begin with the name we want?
-                         if (cookie.substring(0, name.length + 1) == (name + '=')) {
-                             cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                             break;
-                         }
-                     }
-                 }
-                 return cookieValue;
-             }
-             if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
-                 // Only send the token to relative URLs i.e. locally.
-                 xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
-             }
-         } 
+            if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
+                // Only send the token to relative URLs i.e. locally.
+                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
+            }
+        }
     });
 
 
     var hasCreditcard = window.hasCreditcard || false;
-    if (!hasCreditcard){
+    if (!hasCreditcard) {
         var stripe = Stripe(window.stripeKey);
-        var elements = stripe.elements({locale: window.current_lan});
-        var card = elements.create('card', options={hidePostalCode: true});
-        card.mount('#card-element');
+        var element_style = {
+            fonts: [{
+                family: 'lato-light',
+                src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Light.woff) format("woff2")'
+            }, {
+                family: 'lato-regular',
+                src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Regular.woff) format("woff2")'
+            }
+            ],
+            locale: window.current_lan
+        };
+        var elements = stripe.elements(element_style);
+        var credit_card_text_style = {
+            base: {
+                iconColor: '#666EE8',
+                color: '#31325F',
+                lineHeight: '25px',
+                fontWeight: 300,
+                fontFamily: "'lato-light', sans-serif",
+                fontSize: '14px',
+                '::placeholder': {
+                    color: '#777'
+                }
+            },
+            invalid: {
+                iconColor: '#eb4d5c',
+                color: '#eb4d5c',
+                lineHeight: '25px',
+                fontWeight: 300,
+                fontFamily: "'lato-regular', sans-serif",
+                fontSize: '14px',
+                '::placeholder': {
+                    color: '#eb4d5c',
+                    fontWeight: 400
+                }
+            }
+        };
+        var credit_card_cvv_style = {
+            base: {
+                iconColor: '#666EE8',
+                color: '#31325F',
+                lineHeight: '25px',
+                fontWeight: 300,
+                fontFamily: "'lato-regular', sans-serif",
+                fontSize: '14px',
+                '::placeholder': {
+                    color: '#555'
+                }
+            },
+            invalid: {
+                iconColor: '#eb4d5c',
+                color: '#eb4d5c',
+                lineHeight: '25px',
+                fontWeight: 300,
+                fontFamily: "'lato-regular', sans-serif",
+                fontSize: '14px',
+                '::placeholder': {
+                    color: '#eb4d5c',
+                    fontWeight: 600
+                }
+            }
+        };
+
+        var enter_ccard_text = "Enter your credit card number";
+        if (typeof window.enter_your_card_text !== 'undefined') {
+            enter_ccard_text = window.enter_your_card_text;
+        }
+        var cardNumberElement = elements.create('cardNumber', {
+            style: credit_card_text_style,
+            placeholder: enter_ccard_text
+        });
+        cardNumberElement.mount('#card-number-element');
+
+        var cardExpiryElement = elements.create('cardExpiry', {
+            style: credit_card_text_style
+        });
+        cardExpiryElement.mount('#card-expiry-element');
+
+        var cardCvcElement = elements.create('cardCvc', {
+            style: credit_card_text_style
+        });
+        cardCvcElement.mount('#card-cvc-element');
+        cardNumberElement.on('change', function (event) {
+            if (event.brand) {
+                setBrandIcon(event.brand);
+            }
+        });
     }
     console.log("has creditcard", hasCreditcard);
     // hasCreditcard= true;
@@ -42,85 +146,58 @@ $( document ).ready(function() {
     submit_form_btn.on('click', submit_payment);
 
 
-    function submit_payment(e){ 
-      e.preventDefault();
-      console.log("creditcard sdasd");
-      // if (hasCreditcard) {
-         $('#billing-form').submit();
-      // }
-     
+    function submit_payment(e) {
+        e.preventDefault();
+        console.log("creditcard sdasd");
+        // if (hasCreditcard) {
+        $('#billing-form').submit();
+        // }
+
     }
 
 
+    var $form_new = $('#payment-form-new');
+    $form_new.submit(payWithStripe_new);
 
-    var $form = $('#payment-form');
-    $form.submit(payWithStripe);
-
-    /* If you're using Stripe for payments */
-    function payWithStripe(e) {
+    function payWithStripe_new(e) {
         e.preventDefault();
 
         function stripeTokenHandler(token) {
-          // Insert the token ID into the form so it gets submitted to the server
-          var form = document.getElementById('payment-form');
-          var hiddenInput = document.createElement('input');
-          $('#id_token').val(token.id);
-
-          $('#billing-form').submit();
+            // Insert the token ID into the form so it gets submitted to the server
+            var form = document.getElementById('payment-form-new');
+            $('#id_token').val(token.id);
+            $('#billing-form').submit();
         }
 
 
-        stripe.createToken(card).then(function(result) {
+        stripe.createToken(cardNumberElement).then(function (result) {
             if (result.error) {
-              // Inform the user if there was an error
-              var errorElement = document.getElementById('card-errors');
-              errorElement.textContent = result.error.message;
+                // Inform the user if there was an error
+                var errorElement = document.getElementById('card-errors');
+                errorElement.textContent = result.error.message;
             } else {
-                $form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
+                var process_text = "Processing";
+                if (typeof window.processing_text !== 'undefined') {
+                    process_text = window.processing_text
+                }
+
+                $form_new.find('[type=submit]').html(process_text + ' <i class="fa fa-spinner fa-pulse"></i>');
                 // Send the token to your server
                 stripeTokenHandler(result.token);
             }
         });
-
-        // /* Visual feedback */
-        // $form.find('[type=submit]').html('Validating <i class="fa fa-spinner fa-pulse"></i>');
-
-        // var PublishableKey = window.stripeKey;
-        // Stripe.setPublishableKey(PublishableKey);
-        // Stripe.card.createToken($form, function stripeResponseHandler(status, response) {
-        //     if (response.error) {
-        //         /* Visual feedback */
-        //         $form.find('[type=submit]').html('Try again');
-        //         /* Show Stripe errors on the form */
-        //         $form.find('.payment-errors').text(response.error.message);
-        //         $form.find('.payment-errors').closest('.row').show();
-        //     } else {
-        //         /* Visual feedback */
-        //         $form.find('[type=submit]').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
-        //         /* Hide Stripe errors on the form */
-        //         $form.find('.payment-errors').closest('.row').hide();
-        //         $form.find('.payment-errors').text("");
-        //         // response contains id and card, which contains additional card details
-        //         var token = response.id;
-        //         // AJAX
-
-        //         //set token  on a hidden input
-        //         $('#id_token').val(token);
-        //         $('#billing-form').submit();
-        //     }
-        // });
     }
 
     /* Form validation */
-    $.validator.addMethod("month", function(value, element) {
-      return this.optional(element) || /^(01|02|03|04|05|06|07|08|09|10|11|12)$/.test(value);
+    $.validator.addMethod("month", function (value, element) {
+        return this.optional(element) || /^(01|02|03|04|05|06|07|08|09|10|11|12)$/.test(value);
     }, "Please specify a valid 2-digit month.");
 
-    $.validator.addMethod("year", function(value, element) {
-      return this.optional(element) || /^[0-9]{2}$/.test(value);
+    $.validator.addMethod("year", function (value, element) {
+        return this.optional(element) || /^[0-9]{2}$/.test(value);
     }, "Please specify a valid 2-digit year.");
 
-    validator = $form.validate({
+    validator = $form_new.validate({
         rules: {
             cardNumber: {
                 required: true,
@@ -140,28 +217,16 @@ $( document ).ready(function() {
                 digits: true
             }
         },
-        highlight: function(element) {
+        highlight: function (element) {
             $(element).closest('.form-control').removeClass('success').addClass('error');
         },
-        unhighlight: function(element) {
+        unhighlight: function (element) {
             $(element).closest('.form-control').removeClass('error').addClass('success');
         },
-        errorPlacement: function(error, element) {
+        errorPlacement: function (error, element) {
             $(element).closest('.form-group').append(error);
         }
     });
-
-    paymentFormReady = function() {
-        if ($form.find('[name=cardNumber]').hasClass("success") &&
-            $form.find('[name=expMonth]').hasClass("success") &&
-            $form.find('[name=expYear]').hasClass("success") &&
-            $form.find('[name=cvCode]').val().length > 1) {
-            return true;
-        } else {
-            return false;
-        }
-    };
-
     // $form.find('[type=submit]').prop('disabled', true);
     // var readyInterval = setInterval(function() {
     //     if (paymentFormReady()) {
diff --git a/hosting/templates/hosting/order_detail.html b/hosting/templates/hosting/order_detail.html
index 761550fe..9231bca8 100644
--- a/hosting/templates/hosting/order_detail.html
+++ b/hosting/templates/hosting/order_detail.html
@@ -24,15 +24,7 @@
     		</div>
     		<hr>
     		<div class="row">
-    			<div class="col-xs-6">
-    				<address>
-                    <h3><b>{% trans "Billed To:"%}</b></h3>
-    					{{user.name}}<br>
-                        {{order.billing_address.street_address}},{{order.billing_address.postal_code}}<br>
-                        {{order.billing_address.city}}, {{order.billing_address.country}}.
-    				</address>
-    			</div>
-                <div class="col-xs-6 text-right">
+				<div class="col-xs-12 col-md-6 pull-right order-confirm-date">
                     <address>
                         <strong>{% trans "Date"%}:</strong><br>
                         <span id="order-created_at">{{order.created_at|date:'Y-m-d H:i'}}</span><br><br>
@@ -44,6 +36,15 @@
                     </address>
 
                 </div>
+    			<div class="col-xs-12 col-md-6">
+    				<address>
+                    <h3><b>{% trans "Billed To:"%}</b></h3>
+    					{{user.name}}<br>
+                        {{order.billing_address.street_address}},{{order.billing_address.postal_code}}<br>
+                        {{order.billing_address.city}}, {{order.billing_address.country}}.
+    				</address>
+    			</div>
+                
     		</div>
     		<div class="row">
     			<div class="col-xs-6">
diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html
index faacee82..d03713c1 100644
--- a/hosting/templates/hosting/payment.html
+++ b/hosting/templates/hosting/payment.html
@@ -2,139 +2,182 @@
 {% load staticfiles bootstrap3 i18n %}
 {% block content %}
 <!-- Credit card form -->
-<div>
-	<div class="payment-container">
-		<div class="row">
-		    <div class="col-xs-12 col-md-offset-2 col-md-4 summary-box">
-            	<form role="form" novalidate>
-            		<div class="row">
-            			<div class="col-xs-12">
-								<h3><b>{%trans "Billing Amount" %}</b></h3>
-							<hr>
-							<div class="content">
-								<!-- <p><b>Type</b> <span class="pull-right">{{request.session.vm_specs.location_code}}</span></p> -->
-								<!-- <hr> -->
-								<p><b>{%trans "Cores"%}</b> <span
-                                    class="pull-right">{{request.session.specs.cpu|floatformat}}</span></p>
-								<hr>
-								<p><b>{%trans "Memory"%}</b> <span
-                                    class="pull-right">{{request.session.specs.memory|floatformat}} GB</span></p>
-								<hr>
-								<p><b>{%trans "Disk space"%}</b> <span
-                                    class="pull-right">{{request.session.specs.disk_size|floatformat}} GB</span></p>
-								<hr>
-								<p><b>{%trans "Configuration"%}</b> <span
-                                    class="pull-right">{{request.session.template.name}}</span></p>
-								<hr>
-								<h4>Total<p
-                                    class="pull-right"><b>{{request.session.specs.price }} CHF</b></p></h4>
-							</div>
-						</div>
-					</div>
-				</form>
-
-			</div>
-			<div class="col-xs-12 col-md-4  billing">
-				<h3><b>{%trans "Billing Address"%}</b></h3>
-				<hr>
-				<form role="form" id="billing-form" method="post" action="" novalidate>
-	                {% for field in form %}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.1.2/css/paymentfont.min.css"/>
+<div class="dcl-order-container">
+    <div class="payment-container">
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-sec">
+                <h3><strong>{%trans "Your Order" %}</strong></h3>
+                <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-header">
+                    <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-header">
+                        {%trans "Cores" %}
+                    </div>
+                    <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-header">
+                        {%trans "Memory" %}
+                    </div>
+                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-header">
+                        {%trans "Disk space" %}
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-header">
+                        {%trans "Configuration" %}
+                    </div>
+                </div>
+                <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-content">
+                    <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-content">
+                        {{request.session.specs.cpu|floatformat}}
+                    </div>
+                    <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-content">
+                        {{request.session.specs.memory|floatformat}} GB
+                    </div>
+                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-content">
+                        {{request.session.specs.disk_size|floatformat}} GB
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-content">
+                        {{request.session.template.name}}
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-table-total">
+                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-tot tbl-no-padding">
+                        {%trans "Total" %} <span>{%trans "including VAT" %}</span>
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-no-padding">
+                        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"></div>
+                        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-total">{{request.session.specs.price}}
+                            CHF
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-billing-sec">
+                <div class="col-xs-12 col-sm-5 col-md-6  billing dcl-billing">
+                    <h3><b>{%trans "Billing Address"%}</b></h3>
+                    <hr>
+                    <form role="form" id="billing-form" method="post" action="" novalidate>
+                        {% for field in form %}
                         {% csrf_token %}
-	                    {% bootstrap_field field show_label=False type='fields'%}
-	                {% endfor %}
-	                {% bootstrap_form_errors form type='non_fields'%}
-                </form>
-			</div>
-		</div>
-	    <div class="row">
-	    	<div class="col-xs-12 col-md-offset-2 col-md-4 "></div>
-	        <div class="col-xs-12 col-md-4 creditcard-box">
-				<h3><b>{%trans "Credit Card"%}</b></h3>
-				<hr>
-	            <div>
-					<div>
-						<p> {% trans 'Please fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.' %}</p>
-					</div>
-					<br>
-	                <div>
-                    {% if credit_card_data.last4 %}
-                      <form role="form" id="payment-form-with-creditcard"novalidate>
-                        <h5 class="billing-head">Credit Card</h5>
-                        <h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
-                        <h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
-                        <input type="hidden" name="credit_card_needed" value="false"/>
-                      </form>
-
-		       <div class="row">
-			       <br>
-			       <div class="col-xs-12>
-				       <p style="font-family: Lato;border: 1px solid #a1a1a1;border-radius: 3px; padding: 5px; ">{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}</p>
-			       </div>
-			       <div class="col-xs-12">
-                      	           <div class="col-xs-6 pull-right">
-                                       <button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;" id="payment_button_with_creditcard" class="btn btn-success" type="submit">
-							 {% trans "Submit" %}
-				       </button>
-				   </div>
-		               </div>
-		      </div>
-                    {% else %}
-
-
-	                    <form role="form" id="payment-form" novalidate>
+                        {% bootstrap_field field show_label=False type='fields'%}
+                        {% endfor %}
+                        {% bootstrap_form_errors form type='non_fields'%}
+                    </form>
+                </div>
+                <div class="col-xs-12 col-sm-7 col-md-6 creditcard-box dcl-creditcard">
+                    <h3><b>{%trans "Credit Card"%}</b></h3>
+                    <hr>
+                    <div>
+                        <div>
+                            <p>
+                                {% blocktrans %}
+                                Please fill in your credit card information below. We are using <a
+                                    href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store
+                                your information in our database.
+                                {% endblocktrans %}
+                            </p>
+                        </div>
+                        <br>
+                        <div>
+                            {% if credit_card_data.last4 %}
+                            <form role="form" id="payment-form-with-creditcard" novalidate>
+                                <h5 class="billing-head">Credit Card</h5>
+                                <h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
+                                <h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
+                                <input type="hidden" name="credit_card_needed" value="false"/>
+                            </form>
                             <div class="row">
-                            <div class="form-group col-xs-12">
-                            <div id="card-element">
-                              <!-- a Stripe Element will be inserted here. -->
-                              </div>
+                                <div class="col-xs-12">
+                                    <p>
+                                        {% blocktrans %}
+                                        You are not making any payment yet. After submitting your card
+                                        information, you will be taken to the Confirm Order Page.
+                                        {% endblocktrans %}
+                                    </p>
+                                </div>
+                                <div class="col-xs-12">
+                                    <div class="col-xs-6 pull-right">
+                                        <button id="payment_button_with_creditcard" class="btn btn-success stripe-payment-btn"
+                                                type="submit">
+                                            {%trans "Submit" %}
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
-                             </div>
-                             <div id="card-errors" role="alert"></div>
-	                        <div class="row">
-								<br>
-								<div class="col-xs-12">
-									<p style="font-family: Lato;border: 1px solid #a1a1a1;border-radius: 3px; padding: 5px;"> {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}</p>
-								</div>
-							    <div class="col-xs-12">
-									<div class="col-xs-6 pull-right">
-										<button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;" class="btn btn-success" type="submit">{% trans "Submit" %}</button>
-									</div>
-								</div>
-	                        </div>
-	                        <div class="row" style="display:none;">
-	                            <div class="col-xs-12">
-	                                <p class="payment-errors"></p>
-	                            </div>
-	                        </div>
-	                        {% if paymentError %}
-	                        <div class="row">
-	                            <div class="col-xs-12">
-	                            	<p>
-	                             	{% bootstrap_alert paymentError alert_type='danger' %}
-	                             	</p>
-	                            </div>
-	                        </div>
-	                        {% endif %}
 
+                            {% else %}
+                            <form action="" id="payment-form-new" method="POST">
+                                <input type="hidden" name="token"/>
+                                <div class="group">
+                                    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-9 credit-card-goup">
+                                       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element card-number-element">
+                                           <label>{%trans "Card Number" %}</label>
+                                           <div id="card-number-element" class="field my-input"></div>
+                                       </div>
+                                       <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3 card-element card-expiry-element">
+                                           <label>{%trans "Expiry Date" %}</label>
+                                           <div id="card-expiry-element" class="field my-input"></div>
+                                       </div>
+                                       <div class="col-xs-12 col-sm-2 col-md-6 col-lg-7 hide-mobile"></div>
+                                       <div class="col-xs-3 col-sm-3 col-md-3 col-lg-2 card-element card-cvc-element">
+                                           <label>{%trans "CVC" %}</label>
+                                           <div id="card-cvc-element" class="field my-input"></div>
+                                       </div>
+                                       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 card-element brand">
+                                           <label>{%trans "Card Type" %}</label>
+                                           <i class="pf pf-credit-card" id="brand-icon"></i>
+                                       </div>
+                                    </div>
+                                </div>
+                                <div id="card-errors" role="alert"></div>
+                                <div class="row">
+                                    <div class="col-xs-12">
+                                        <p class="card-warning-content">
+                                            {% blocktrans %}
+                                            You are not making any payment yet. After submitting your card
+                                            information, you will be taken to the Confirm Order Page.
+                                            {% endblocktrans %}
+                                        </p>
+                                    </div>
+                                    <div class="col-xs-12">
+                                        <div class="col-xs-6 pull-right">
+                                            <button class="btn btn-success stripe-payment-btn" type="submit">{%trans "Submit" %}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
 
-	                    </form>
-                    {% endif %}
-
-	                </div>
-	            </div>
-	        </div>
-	    </div>
-	</div>
+                                <div class="row" style="display:none;">
+                                    <div class="col-xs-12">
+                                        <p class="payment-errors"></p>
+                                    </div>
+                                </div>
+                                {% if paymentError %}
+                                <div class="row">
+                                    <div class="col-xs-12">
+                                        <p>
+                                            {% bootstrap_alert paymentError alert_type='danger' %}
+                                        </p>
+                                    </div>
+                                </div>
+                                {% endif %}
+                            </form>
 
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <!-- stripe key data -->
 {% if stripe_key %}
 {% get_current_language as LANGUAGE_CODE %}
 <script type="text/javascript">
+    window.processing_text = '{%trans "Processing" %}';
+    window.enter_your_card_text = '{%trans "Enter your credit card number" %}';
 
-
-     (function () {
+    (function () {
         window.stripeKey = "{{stripe_key}}";
         window.current_lan = "{{LANGUAGE_CODE}}";
     })();
@@ -143,7 +186,9 @@
 
 {% if credit_card_data.last4 and credit_card_data.cc_brand %}
 <script type="text/javascript">
-     (function () {window.hasCreditcard = true;})();
+    (function () {
+        window.hasCreditcard = true;
+    })();
 </script>
 
 {%endif%}
diff --git a/hosting/views.py b/hosting/views.py
index e0554ebf..520894ae 100644
--- a/hosting/views.py
+++ b/hosting/views.py
@@ -440,6 +440,7 @@ class PaymentVMView(LoginRequiredMixin, FormView):
 
         form_kwargs.update({
             'initial': {
+                'cardholder_name': current_billing_address.cardholder_name,
                 'street_address': current_billing_address.street_address,
                 'city': current_billing_address.city,
                 'postal_code': current_billing_address.postal_code,
diff --git a/membership/models.py b/membership/models.py
index 96bf4c50..a84d12ca 100644
--- a/membership/models.py
+++ b/membership/models.py
@@ -51,6 +51,8 @@ class MyUserManager(BaseUserManager):
                                 name=name,
                                 )
         user.is_admin = True
+        user.is_active = True
+        user.is_superuser = True
         user.save(using=self._db)
         return user
 
diff --git a/utils/forms.py b/utils/forms.py
index 15086dc6..c521e3ba 100644
--- a/utils/forms.py
+++ b/utils/forms.py
@@ -5,11 +5,12 @@ from django.core.mail import EmailMultiAlternatives
 from django.utils.translation import ugettext_lazy as _
 from django.contrib.auth import authenticate
 from membership.models import CustomUser
+
+
 # from utils.fields import CountryField
 
 
 class SignupFormMixin(forms.ModelForm):
-
     confirm_password = forms.CharField(widget=forms.PasswordInput())
     password = forms.CharField(widget=forms.PasswordInput())
 
@@ -50,8 +51,6 @@ class LoginFormMixin(forms.Form):
             return email
         except CustomUser.DoesNotExist:
             raise forms.ValidationError("User does not exist")
-        else:
-            return email
 
 
 class PasswordResetRequestForm(forms.Form):
@@ -67,8 +66,6 @@ class PasswordResetRequestForm(forms.Form):
             return email
         except CustomUser.DoesNotExist:
             raise forms.ValidationError("User does not exist")
-        else:
-            return email
 
 
 class SetPasswordForm(forms.Form):
@@ -91,7 +88,7 @@ class SetPasswordForm(forms.Form):
             if password1 != password2:
                 raise forms.ValidationError(
                     self.error_messages['password_mismatch'],
-                    code='password_mismatch',)
+                    code='password_mismatch', )
         return password2
 
 
@@ -104,8 +101,9 @@ class BillingAddressForm(forms.ModelForm):
 
     class Meta:
         model = BillingAddress
-        fields = ['street_address', 'city', 'postal_code', 'country']
+        fields = ['cardholder_name', 'street_address', 'city', 'postal_code', 'country']
         labels = {
+            'cardholder_name': _('Cardholder Name'),
             'street_address': _('Street Address'),
             'city': _('City'),
             'postal_code': _('Postal Code'),
diff --git a/utils/models.py b/utils/models.py
index 2aee584b..c969a60c 100644
--- a/utils/models.py
+++ b/utils/models.py
@@ -8,6 +8,7 @@ from .fields import CountryField
 # Create your models here.
 
 class BaseBillingAddress(models.Model):
+    cardholder_name = models.CharField(max_length=100, default="")
     street_address = models.CharField(max_length=100)
     city = models.CharField(max_length=50)
     postal_code = models.CharField(max_length=50)
@@ -18,7 +19,6 @@ class BaseBillingAddress(models.Model):
 
 
 class BillingAddress(BaseBillingAddress):
-
     def __str__(self):
         return self.street_address
 
@@ -32,6 +32,7 @@ class UserBillingAddress(BaseBillingAddress):
 
     def to_dict(self):
         return {
+            'Cardholder Name': self.cardholder_name,
             'Street Address': self.street_address,
             'City': self.city,
             'Postal Code': self.postal_code,