diff --git a/datacenterlight/locale/de/LC_MESSAGES/django.mo b/datacenterlight/locale/de/LC_MESSAGES/django.mo
index 8f00cac9..0e1ee99d 100644
Binary files a/datacenterlight/locale/de/LC_MESSAGES/django.mo and b/datacenterlight/locale/de/LC_MESSAGES/django.mo differ
diff --git a/datacenterlight/locale/de/LC_MESSAGES/django.po b/datacenterlight/locale/de/LC_MESSAGES/django.po
index ca4f8e6c..28006abf 100644
--- a/datacenterlight/locale/de/LC_MESSAGES/django.po
+++ b/datacenterlight/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-06-07 02:09+0530\n"
+"POT-Creation-Date: 2017-06-11 17:42+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"
@@ -77,40 +77,34 @@ msgstr "Vielen Dank!"
 
 #: templates/datacenterlight/index.html:62
 #: templates/datacenterlight/index.html:160
-#: templates/datacenterlight/index.html:345
-#: templates/datacenterlight/new-order.html:62
-#: templates/datacenterlight/new-order.html:203
-#: templates/datacenterlight/order.html:62
-#: templates/datacenterlight/order.html:203
+#: templates/datacenterlight/index.html:383
+#: templates/datacenterlight/order.html:24
+#: templates/datacenterlight/order.html:165
 #: templates/datacenterlight/pricing.html:62
 #: templates/datacenterlight/pricing.html:190
-#: templates/datacenterlight/success.html:62
+#: templates/datacenterlight/success.html:23
 msgid "What is it"
 msgstr "Was ist es?"
 
 #: templates/datacenterlight/index.html:65
 #: templates/datacenterlight/index.html:189
-#: templates/datacenterlight/index.html:348
-#: templates/datacenterlight/new-order.html:65
-#: templates/datacenterlight/new-order.html:206
-#: templates/datacenterlight/order.html:65
-#: templates/datacenterlight/order.html:206
+#: templates/datacenterlight/index.html:386
+#: templates/datacenterlight/order.html:27
+#: templates/datacenterlight/order.html:168
 #: templates/datacenterlight/pricing.html:65
 #: templates/datacenterlight/pricing.html:193
-#: templates/datacenterlight/success.html:65
+#: templates/datacenterlight/success.html:26
 msgid "Scale out"
 msgstr "Skalierung"
 
 #: templates/datacenterlight/index.html:68
 #: templates/datacenterlight/index.html:215
-#: templates/datacenterlight/index.html:351
-#: templates/datacenterlight/new-order.html:68
-#: templates/datacenterlight/new-order.html:209
-#: templates/datacenterlight/order.html:68
-#: templates/datacenterlight/order.html:209
+#: templates/datacenterlight/index.html:389
+#: templates/datacenterlight/order.html:30
+#: templates/datacenterlight/order.html:171
 #: templates/datacenterlight/pricing.html:68
 #: templates/datacenterlight/pricing.html:196
-#: templates/datacenterlight/success.html:68
+#: templates/datacenterlight/success.html:29
 msgid "Reliable and light"
 msgstr "Zuverlässig und leicht"
 
@@ -119,14 +113,12 @@ msgid "Order VM"
 msgstr "VM bestellen"
 
 #: templates/datacenterlight/index.html:74
-#: templates/datacenterlight/index.html:358
-#: templates/datacenterlight/new-order.html:74
-#: templates/datacenterlight/new-order.html:216
-#: templates/datacenterlight/order.html:74
-#: templates/datacenterlight/order.html:216
+#: templates/datacenterlight/index.html:396
+#: templates/datacenterlight/order.html:36
+#: templates/datacenterlight/order.html:178
 #: templates/datacenterlight/pricing.html:74
 #: templates/datacenterlight/pricing.html:203
-#: templates/datacenterlight/success.html:74
+#: templates/datacenterlight/success.html:35
 msgid "Contact"
 msgstr "Kontakt"
 
@@ -181,97 +173,79 @@ msgstr ""
 "Angebot ist aufgrund unserer leichten Infrastruktur überaus kostengünstig."
 
 #: templates/datacenterlight/index.html:236
-#: templates/datacenterlight/new-order.html:106
-#: templates/datacenterlight/order.html:106
-#: templates/datacenterlight/pricing.html:106
-msgid "We are cutting down the costs significantly!"
-msgstr "Wir sorgen dafür, dass die Kosten für Sie signifikant abnehmen"
+#: templates/datacenterlight/order.html:143
+#: templates/datacenterlight/pricing.html:168
+msgid "Simple and affordable: Try our virtual machine with featherlight price."
+msgstr "Einfach und bezahlbar: Teste nun unsere virtuellen Maschinen mit federleichten Preisen."
 
 #: templates/datacenterlight/index.html:237
 msgid "Affordable VM hosting based in Switzerland"
 msgstr "Bezahlbares VM Hosting in der Schweiz"
 
-#: templates/datacenterlight/index.html:244
-#: templates/datacenterlight/new-order.html:119
-#: templates/datacenterlight/order.html:119
+#: templates/datacenterlight/index.html:248
+#: templates/datacenterlight/order.html:81
 #: templates/datacenterlight/pricing.html:119
 msgid "VM hosting"
 msgstr "VM Hosting"
 
-#: templates/datacenterlight/index.html:251
-msgid "Based in Switzerland"
-msgstr "Standort des Datacenters ist in der Schweiz"
-
-#: templates/datacenterlight/index.html:260
-msgid "10 GB Storage (SSD)"
-msgstr "10 GB Storage (SSD)"
-
-#: templates/datacenterlight/index.html:263
-#: templates/datacenterlight/new-order.html:171
-#: templates/datacenterlight/order.html:171
-#: templates/datacenterlight/pricing.html:161
-msgid "Order Now!"
-msgstr "Bestelle jetzt!"
-
-#: templates/datacenterlight/index.html:279
-msgid "I want to have it!"
-msgstr "Das möchte ich haben!"
-
-#: templates/datacenterlight/index.html:306
-msgid "Switzerland "
-msgstr "Schweiz"
-
-#: templates/datacenterlight/index.html:323
-msgid "Questions?"
-msgstr "Fragen?"
-
-#: templates/datacenterlight/index.html:323
-msgid "Contact us!"
-msgstr "Kontaktiere uns!"
-
-#: templates/datacenterlight/index.html:341
-#: templates/datacenterlight/new-order.html:199
-#: templates/datacenterlight/order.html:199
-#: templates/datacenterlight/pricing.html:186
-msgid "Home"
-msgstr "Home"
-
-#: templates/datacenterlight/index.html:354
-#: templates/datacenterlight/new-order.html:212
-#: templates/datacenterlight/order.html:212
-#: templates/datacenterlight/pricing.html:199
-msgid "Pricing"
-msgstr "Preise"
-
-#: templates/datacenterlight/new-order.html:71
-#: templates/datacenterlight/order.html:71
-#: templates/datacenterlight/pricing.html:71
-#: templates/datacenterlight/success.html:71
-msgid "Buy VM"
-msgstr "VM Kaufen"
-
-#: templates/datacenterlight/new-order.html:127
-#: templates/datacenterlight/order.html:127
+#: templates/datacenterlight/index.html:256
+#: templates/datacenterlight/order.html:89
 #: templates/datacenterlight/pricing.html:127
 msgid "Hosted in Switzerland"
 msgstr "Standort des Datacenters ist in der Schweiz"
 
-#: templates/datacenterlight/new-order.html:144
-#: templates/datacenterlight/order.html:144
+#: templates/datacenterlight/index.html:273
+#: templates/datacenterlight/order.html:106
 #: templates/datacenterlight/pricing.html:144
 msgid "GB Storage (SSD)"
 msgstr "GB Storage (SSD)"
 
-#: templates/datacenterlight/new-order.html:181
-#: templates/datacenterlight/order.html:181
-#: templates/datacenterlight/pricing.html:168
-msgid "Simple and affordable: Try our virtual machine with featherlight price."
-msgstr ""
-"Einfach und bezahlbar: Testen Sie unsere virtuellen Maschinen mit  "
-"federleichten Preisen"
+#: templates/datacenterlight/index.html:297
+#: templates/datacenterlight/order.html:133
+#: templates/datacenterlight/pricing.html:161
+msgid "Order Now!"
+msgstr "Bestelle jetzt!"
 
-#: templates/datacenterlight/new-order.html:184
-#: templates/datacenterlight/order.html:184
+#: templates/datacenterlight/index.html:317
+msgid "I want to have it!"
+msgstr "Das möchte ich haben!"
+
+#: templates/datacenterlight/index.html:344
+msgid "Switzerland "
+msgstr "Schweiz"
+
+#: templates/datacenterlight/index.html:361
+msgid "Questions?"
+msgstr "Fragen?"
+
+#: templates/datacenterlight/index.html:361
+msgid "Contact us!"
+msgstr "Kontaktiere uns!"
+
+#: templates/datacenterlight/index.html:379
+#: templates/datacenterlight/order.html:161
+#: templates/datacenterlight/pricing.html:186
+msgid "Home"
+msgstr "Home"
+
+#: templates/datacenterlight/index.html:392
+#: templates/datacenterlight/order.html:174
+#: templates/datacenterlight/pricing.html:199
+msgid "Pricing"
+msgstr "Preise"
+
+#: templates/datacenterlight/order.html:33
+#: templates/datacenterlight/pricing.html:71
+#: templates/datacenterlight/success.html:32
+msgid "Buy VM"
+msgstr "VM Kaufen"
+
+#: templates/datacenterlight/order.html:68
+#: templates/datacenterlight/pricing.html:106
+msgid "We are cutting down the costs significantly!"
+msgstr "Wir sorgen dafür, dass die Kosten für Sie signifikant abnehmen"
+
+#: templates/datacenterlight/order.html:146
 #: templates/datacenterlight/pricing.html:171
 msgid ""
 "Our VMs are hosted in Glarus, Switzerland, and our website is currently "
@@ -288,16 +262,22 @@ msgstr ""
 "uns unter support@datacenterlight.ch. Unser Team wird sich umgehend um dein "
 "Anliegen kümmern!"
 
-#: templates/datacenterlight/success.html:101
+#: templates/datacenterlight/success.html:62
 msgid "Thank you for order! Our team will contact you via email"
 msgstr ""
 "Vielen Dank für die Bestellung. Unser Team setzt sich sobald wie möglich mit "
 "Ihnen via E-Mail in Verbindung."
 
-#: templates/datacenterlight/success.html:103
+#: templates/datacenterlight/success.html:64
 msgid "as soon as possible!"
 msgstr ""
 
+#~ msgid "Based in Switzerland"
+#~ msgstr "Standort des Datacenters ist in der Schweiz"
+
+#~ msgid "10 GB Storage (SSD)"
+#~ msgstr "10 GB Storage (SSD)"
+
 #~ msgid "Request Newsletter"
 #~ msgstr "Newsletter abonnieren"
 
diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css
index cff8063a..ab601052 100755
--- a/datacenterlight/static/datacenterlight/css/landing-page.css
+++ b/datacenterlight/static/datacenterlight/css/landing-page.css
@@ -616,6 +616,12 @@ h6 {
     max-width: 400px;
     position: relative;
 }
+.price-calc-section .landing {
+    width: 100% !important;
+}
+.no-padding{
+    padding:0 !important;
+}
 .price-calc-section .card .img-beta{
     position: absolute;
     top: 5px;
diff --git a/datacenterlight/templates/datacenterlight/index.html b/datacenterlight/templates/datacenterlight/index.html
index ee2a6ac8..4c47fd8f 100755
--- a/datacenterlight/templates/datacenterlight/index.html
+++ b/datacenterlight/templates/datacenterlight/index.html
@@ -233,36 +233,74 @@
         <!-- Page Features -->
             <div class="row text-center">
                 <div class="col-xs-12 col-md-6 text">
-                    <h2 class="section-heading">{% trans "We are cutting down the costs significantly!" %}</h2>
+                    <h2 class="section-heading">{% trans "Simple and affordable: Try our virtual machine with featherlight price." %}</h2>
                     <p class="lead">{% trans "Affordable VM hosting based in Switzerland" %}</p>
                 </div>
 
                 <div class="col-xs-12 col-md-6 hero-feature">
-                    <div class="card">
-                        <div class="caption">
-                            <div class="title">
-                               <h3>{% trans "VM hosting" %} </h3> 
+                    <div class="price-calc-section no-padding">
+                        <div class="landing card">
+                            <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
+                            <div class="caption">
+                                <form id="order_form" method="POST" action="">
+                                    {% csrf_token %}
+                                    <div class="title">
+                                       <h3>{% trans "VM hosting" %} </h3>
+                                    </div>
+                                    <div class="price">
+                                        <span id="total">15</span>
+                                        <span>CHF</span>
+                                    </div>
+                                    <div class="descriptions">
+                                        <div class="description">
+                                            <p>{% trans "Hosted in Switzerland" %}</p>
+                                        </div>
+                                        <div class="description">
+                                            <i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
+                                            <input class="input-price" type="number"  min="1" max="42" id="coreValue" name="cpu">
+                                            <span> Core</span>
+                                            <i class="fa fa-plus-circle right" data-plus="cpu"  aria-hidden="true"></i>
+                                        </div>
+                                        <div class="description">
+                                            <i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
+                                            <input id="ramValue" class="input-price" type="number"  min="2" max="200"  name="ram">
+                                            <span> GB RAM</span>
+                                            <i class="fa fa-plus-circle right" data-plus="ram"  aria-hidden="true"></i>
+                                        </div>
+                                        <div class="description">
+                                            <i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
+                                            <input id="storageValue" class="input-price" type="number"  min="10" max="500" step="10" name="storage">
+                                            <span>{% trans "GB Storage (SSD)" %}</span>
+                                            <i class="fa fa-plus-circle right" data-plus="storage"  aria-hidden="true"></i>
+                                        </div>
+                                        <div class="description select-configuration input">
+                                            <label for="config">OS</label>
+                                            <select name="config" id="">
+                                                {% for template in templates %}
+                                                    <option value="{{template.id}}">{{template.name}} </option>
+                                                {% endfor %}
+                                            </select>
+                                        </div>
+                                        <input type="hidden" name="total">
+                                        <!--<div class="description check-ip">
+                                            <input type="checkbox" name="ipv6"> Ipv6 Only<br>
+                                        </div>-->
+                                        <div class="description input">
+                                            <label for="name">Name</label>
+                                            <input type="text" name="name" placeholder="Your Name">
+                                        </div>
+                                        <div class="description input">
+                                            <label for="email">Email</label>
+                                            <input type="email" name="email" placeholder="Your Email">
+                                        </div>
+                                    </div>
+                                    <input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
+                                </form>
                             </div>
-                          <div class="price">
-                              <span>15 CHF/month</span>
-                          </div>
-                          <div class="descriptions">
-                              <div class="description">
-                                <p>{% trans "Based in Switzerland" %}</p>
-                              </div>
-                              <div class="description">
-                                <p>1 Core, </p>
-                              </div>
-                              <div class="description">
-                                <p>2 GB RAM, </p>
-                              </div>
-                              <div class="description">
-                                <p>{% trans "10 GB Storage (SSD)" %}</p>
-                              </div>
-                          </div>
-						  <a href="{% url 'datacenterlight:order' %}" class="btn btn-primary">{% trans "Order Now!" %}</a>
-                      </div>
-                      <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
+                            <div>
+                                <div id="error_message_box" class="error-message-box"></div>
+                            </div>
+                        </div>
                     </div>
 
                 </div>
@@ -366,22 +404,48 @@
 
     <!-- jQuery -->
     <script src="{% static 'datacenterlight/js/jquery.js' %}"></script>
-
-<script type="text/javascript">
-      window.onload=function(){
-        $('.selectpicker').selectpicker({
-             style: 'btn-link',
-             windowPadding: 10,
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function(){
+            $.validator.setDefaults({
+                ignore: []
+            });
+            $('#order_form').validate({
+                wrapper: 'div',
+                errorLabelContainer: "#error_message_box",
+                rules: {
+                    name: {
+                        required: true,
+                        minlength: 3
+                    },
+                    email: {
+                        required: true,
+                        email: true
+                    }
+                },
+                messages: {
+                    name: "Please enter your name",
+                    email: "Please enter a valid email address"
+                },
+                submitHandler: function (form) {
+                    return true;
+                }
+            });
         });
 
-  		$.ajax({
-	        url: "{% url 'datacenterlight:beta_access' %}",
-				context: document.body
-			}).done(function(response) {
-				$('#beta_access_form').html(response);
-			});
-       };
-</script>
+        window.onload=function(){
+          $('.selectpicker').selectpicker({
+               style: 'btn-link',
+               windowPadding: 10,
+          });
+          $.ajax({
+            url: "{% url 'datacenterlight:beta_access' %}",
+                context: document.body
+            }).done(function(response) {
+                $('#beta_access_form').html(response);
+          });
+        };
+    </script>
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
 
diff --git a/datacenterlight/views.py b/datacenterlight/views.py
index d7b6a3e5..80b608a4 100644
--- a/datacenterlight/views.py
+++ b/datacenterlight/views.py
@@ -239,6 +239,71 @@ class IndexView(CreateView):
     form_class = BetaAccessForm
     success_url = "/datacenterlight#requestform"
     success_message = "Thank you, we will contact you as soon as possible"
+    
+    def get(self, request, *args, **kwargs):
+        try:
+            manager = OpenNebulaManager()
+            templates = manager.get_templates()
+            context = {
+                'templates': VirtualMachineTemplateSerializer(templates, many=True).data,
+            }
+        except:
+            messages.error( request,
+                'We have a temporary problem to connect to our backend. \
+                Please try again in a few minutes'
+                )
+            context = {
+                'error' : 'connection'
+                    }
+        return render(request, self.template_name, context)
+
+    def post(self, request):
+        cores = request.POST.get('cpu')
+        memory = request.POST.get('ram')
+        storage = request.POST.get('storage')
+        price = request.POST.get('total')
+        template_id = int(request.POST.get('config'))
+        manager = OpenNebulaManager()
+        template = manager.get_template(template_id)
+        template_data = VirtualMachineTemplateSerializer(template).data
+        
+        name = request.POST.get('name')
+        email = request.POST.get('email')
+        name_field = forms.CharField()
+        email_field = forms.EmailField()
+        try:
+            name = name_field.clean(name)
+        except ValidationError as err:
+            messages.add_message(self.request, messages.ERROR, '%(value) is not a proper name.'.format(name))
+            return HttpResponseRedirect(reverse('datacenterlight:order'))
+
+        try:    
+            email = email_field.clean(email)
+        except ValidationError as err:
+            messages.add_message(self.request, messages.ERROR, '%(value) is not a proper email.'.format(email))
+            return HttpResponseRedirect(reverse('datacenterlight:order'))
+
+        context = {
+            'base_url': "{0}://{1}".format(self.request.scheme, self.request.get_host()),
+            'name': name,
+            'email': email,
+            'cores': cores,
+            'memory': memory,
+            'storage': storage,
+            'price': price,
+            'template': template_data['name'],
+        }
+        email_data = {
+            'subject': 'New Order Received',
+            'to': 'info@ungleich.ch',
+            'context': context,
+            'template_name': 'new_order_notification',
+            'template_path': 'datacenterlight/emails/'
+        }
+        email = BaseEmail(**email_data)
+        email.send()
+
+        return HttpResponseRedirect(reverse('datacenterlight:order_success'))
 
     def get_success_url(self):
         success_url = reverse('datacenterlight:index')