diff --git a/Helios/Views/Configurator/Index.cshtml b/Helios/Views/Configurator/Index.cshtml
index 0e2ed14d28bfb03415776e8d646613696af767aa..f3a03eadcf864cebf017eee6a25bfaa5589e40bf 100644
--- a/Helios/Views/Configurator/Index.cshtml
+++ b/Helios/Views/Configurator/Index.cshtml
@@ -12,72 +12,77 @@
 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 
-    <h5>Roof #1</h5>
+    <div class="input-border">
+        <h5>Roof #1</h5>
 
-    <div class="form-group">
-        @Html.LabelFor(model => model.Roofs[0].Area, htmlAttributes: new { @class = "control-label col-md-2" })
-        <div class="col-md-10">
-            @Html.EditorFor(model => model.Roofs[0].Area, new { htmlAttributes = new { @class = "form-control" } })
-            @Html.ValidationMessageFor(model => model.Roofs[0].Area, "", new { @class = "text-danger" })
+        <div class="form-group">
+            @Html.LabelFor(model => model.Roofs[0].Area, htmlAttributes: new { @class = "control-label col-md-3" })
+            <div class="col-md-10">
+                @Html.EditorFor(model => model.Roofs[0].Area, new { htmlAttributes = new { @class = "form-control" } })
+                @Html.ValidationMessageFor(model => model.Roofs[0].Area, "", new { @class = "text-danger" })
+            </div>
         </div>
-    </div>
 
-    <div class="form-group">
-        @Html.LabelFor(model => model.Roofs[0].Elevation, htmlAttributes: new { @class = "control-label col-md-2" })
-        <div class="col-md-10">
-            @Html.EditorFor(model => model.Roofs[0].Elevation, new { htmlAttributes = new { @class = "form-control" } })
-            @Html.ValidationMessageFor(model => model.Roofs[0].Elevation, "", new { @class = "text-danger" })
+        <div class="form-group">
+            @Html.LabelFor(model => model.Roofs[0].Elevation, htmlAttributes: new { @class = "control-label col-md-3" })
+            <div class="col-md-10">
+                @Html.EditorFor(model => model.Roofs[0].Elevation, new { htmlAttributes = new { @class = "form-control" } })
+                @Html.ValidationMessageFor(model => model.Roofs[0].Elevation, "", new { @class = "text-danger" })
+            </div>
         </div>
     </div>
 
-    <h5>Roof #2</h5>
+    <div class="input-border">
+        <h5>Roof #2</h5>
 
-    <div class="form-group">
-        @Html.LabelFor(model => model.Roofs[1].Area, htmlAttributes: new { @class = "control-label col-md-2" })
-        <div class="col-md-10">
-            @Html.EditorFor(model => model.Roofs[1].Area, new { htmlAttributes = new { @class = "form-control" } })
-            @Html.ValidationMessageFor(model => model.Roofs[1].Area, "", new { @class = "text-danger" })
+        <div class="form-group">
+            @Html.LabelFor(model => model.Roofs[1].Area, htmlAttributes: new { @class = "control-label col-md-3" })
+            <div class="col-md-10">
+                @Html.EditorFor(model => model.Roofs[1].Area, new { htmlAttributes = new { @class = "form-control" } })
+                @Html.ValidationMessageFor(model => model.Roofs[1].Area, "", new { @class = "text-danger" })
+            </div>
         </div>
-    </div>
 
-    <div class="form-group">
-        @Html.LabelFor(model => model.Roofs[1].Elevation, htmlAttributes: new { @class = "control-label col-md-2" })
-        <div class="col-md-10">
-            @Html.EditorFor(model => model.Roofs[1].Elevation, new { htmlAttributes = new { @class = "form-control" } })
-            @Html.ValidationMessageFor(model => model.Roofs[1].Elevation, "", new { @class = "text-danger" })
+        <div class="form-group">
+            @Html.LabelFor(model => model.Roofs[1].Elevation, htmlAttributes: new { @class = "control-label col-md-3" })
+            <div class="col-md-10">
+                @Html.EditorFor(model => model.Roofs[1].Elevation, new { htmlAttributes = new { @class = "form-control" } })
+                @Html.ValidationMessageFor(model => model.Roofs[1].Elevation, "", new { @class = "text-danger" })
+            </div>
         </div>
     </div>
 
-    <h5>Energy Information</h5>
+    <div class="input-border">
+        <h5>Energy Information</h5>
 
-    <div class="form-group">
-        @Html.LabelFor(model => model.PowerRequired, htmlAttributes: new { @class = "control-label col-md-2" })
-        <div class="col-md-10">
-            @Html.EditorFor(model => model.PowerRequired, new { htmlAttributes = new { @class = "form-control" } })
-            @Html.ValidationMessageFor(model => model.PowerRequired, "", new { @class = "text-danger" })
+        <div class="form-group">
+            @Html.LabelFor(model => model.PowerRequired, htmlAttributes: new { @class = "control-label col-md-3" })
+            <div class="col-md-10">
+                @Html.EditorFor(model => model.PowerRequired, new { htmlAttributes = new { @class = "form-control" } })
+                @Html.ValidationMessageFor(model => model.PowerRequired, "", new { @class = "text-danger" })
+            </div>
         </div>
-    </div>
 
-    <div class="form-group">
-        @Html.LabelFor(model => model.MaximumPower, htmlAttributes: new { @class = "control-label col-md-2" })
-        <div class="col-md-10">
-            @Html.EditorFor(model => model.MaximumPower, new { htmlAttributes = new { @class = "form-control" } })
-            @Html.ValidationMessageFor(model => model.MaximumPower, "", new { @class = "text-danger" })
+        <div class="form-group">
+            @Html.LabelFor(model => model.MaximumPower, htmlAttributes: new { @class = "control-label col-md-3" })
+            <div class="col-md-10">
+                @Html.EditorFor(model => model.MaximumPower, new { htmlAttributes = new { @class = "form-control" } })
+                @Html.ValidationMessageFor(model => model.MaximumPower, "", new { @class = "text-danger" })
+            </div>
         </div>
-    </div>
 
-    <div class="form-group">
-        @Html.LabelFor(model => model.Budget, htmlAttributes: new { @class = "control-label col-md-2" })
-        <div class="col-md-10">
-            @Html.EditorFor(model => model.Budget, new { htmlAttributes = new { @class = "form-control" } })
-            @Html.ValidationMessageFor(model => model.Budget, "", new { @class = "text-danger" })
+        <div class="form-group">
+            @Html.LabelFor(model => model.Budget, htmlAttributes: new { @class = "control-label col-md-3" })
+            <div class="col-md-10">
+                @Html.EditorFor(model => model.Budget, new { htmlAttributes = new { @class = "form-control" } })
+                @Html.ValidationMessageFor(model => model.Budget, "", new { @class = "text-danger" })
+            </div>
         </div>
-    </div>
-
-    <div class="form-group">
-        <div class="col-md-offset-2 col-md-10">
-            <input type="submit" value="Create" class="btn btn-default" />
+        </div>
+        <div class="form-group">
+            <div class="col-md-offset-2 col-md-10">
+                <input type="submit" value="Submit" class="btn btn-primary" />
+            </div>
         </div>
     </div>
-</div>
-}
\ No newline at end of file
+    }
diff --git a/Helios/wwwroot/css/site.css b/Helios/wwwroot/css/site.css
index 3470064446490109f5dc33325495dc51c6d44dcd..154949f78cf1ab05e08a65dcbf80d2121bb9009d 100644
--- a/Helios/wwwroot/css/site.css
+++ b/Helios/wwwroot/css/site.css
@@ -16,3 +16,11 @@ html {
 body {
   margin-bottom: 60px;
 }
+
+.input-border {
+    border: gray;
+    border-style: solid;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 20px;
+}