diff --git a/share/layout/html.tt b/share/layout/html.tt
index fb3c612b40..9d1a47ad0c 100644
--- a/share/layout/html.tt
+++ b/share/layout/html.tt
@@ -33,6 +33,7 @@
 
         <script type="text/javascript" src="/js/plugins/msgbox/jquery.msgbox.js"></script>
         <link rel="stylesheet" type="text/css" href="/js/plugins/msgbox/jquery.msgbox.css" />
+        <link rel="stylesheet" type="text/css" href="/css/main.css" />
     </head>
     [% content %]
 </html>
diff --git a/share/static/css/main.css b/share/static/css/main.css
new file mode 100644
index 0000000000..b58cd85f25
--- /dev/null
+++ b/share/static/css/main.css
@@ -0,0 +1,188 @@
+/* ---------
+  Globals
+------------*/
+
+body {
+    overflow-y: scroll;
+}
+
+/* ---------
+  The modal
+------------*/
+
+div.ngcp-modal {
+    max-width: 816px;
+    width: 100%;
+    margin: -250px 0 0 -408px;
+    top: 50%;
+    left: 50%; /* override responsive css (bootstrap-responsive.css) */
+    display: block;
+}
+@media (max-width: 830px) {
+    div.ngcp-modal {
+        margin-left: -50%;
+    }
+}
+
+div.ngcp-modal .table thead tr th, div.modal .table tbody tr td {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+div.ngcp-modal .help-inline {
+    clear: both;
+    float: left;
+}
+
+/* ---------
+  Datatable (main one)
+------------*/
+
+table.ngcp-datatable {
+    margin: 1em 0;
+    clear: both;
+}
+
+table.ngcp-datatable .header {
+    cursor: pointer;
+}
+
+table.ngcp-datatable .header:after {
+  content: "";
+  float: right;
+  margin-top: 7px;
+  border-width: 0 4px 4px;
+  border-style: solid;
+  border-color: #fff transparent;
+  visibility: hidden;
+}
+table.ngcp-datatable .header:hover:after {
+  visibility: visible;
+}
+table.ngcp-datatable .headerSortDown:after, table.ngcp-datatable .headerSortDown:hover:after {
+  visibility: visible;
+  filter: alpha(opacity=60);
+  -moz-opacity: 0.6;
+  opacity: 0.6;
+}
+table.ngcp-datatable .headerSortUp:after {
+  border-bottom: none;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #fff;
+  visibility: visible;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  filter: alpha(opacity=60);
+  -moz-opacity: 0.6;
+  opacity: 0.6;
+}
+
+.ngcp-actions-column { /* TODO: use responsive design */
+    white-space: nowrap;
+}
+
+div.ngcp-separator {
+    margin-top:10px;
+}
+
+/* ---------
+  sw_actions (Action Buttons)
+------------*/
+
+div.sw_actions {
+    visibility: hidden;
+}
+
+div.sw_actions a {
+    display:inline;
+    line-height:16px;
+    margin-left:5px;
+}
+
+div.sw_actions a:first-child {
+    margin-left:0px;
+}
+
+div.sw_actions a i {
+    line-height:1em;
+    margin-top:2px;
+}
+
+/* ---------
+  Datatable (without closer spec)
+------------*/
+
+div.dataTables_length label {
+    width: 460px;
+    float: left;
+    text-align: left;
+}
+ 
+div.dataTables_filter, div.dataTables_paginate {
+    float: right;
+}
+@media (max-width: 300px) {
+    div.dataTables_filter {
+        float: none;
+    }
+}
+ 
+div.dataTables_info {
+    padding-top: 8px;
+}
+ 
+div.dataTables_paginate {
+    float: right;
+    margin: 0;
+}
+@media (min-width: 767px) {
+    div.dataTables_paginate {
+        width: 227px;
+    }
+}
+
+/* ---------
+  Datatable Field (inside modal)
+------------*/
+
+div.ngcp-modal .dataTables_wrapper {
+    padding: 5px;
+}
+
+div.ngcp-modal .control-group.error .dataTables_wrapper {
+    border: 1px solid #B94A48;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -mozilla-border-radius: 3px;
+}
+
+div.ngcp-modal .dataTables_wrapper input[type="text"] {
+    line-height: 10px;
+    height: 10px;
+}
+
+div.ngcp-modal .control-group.error .dataTables_wrapper input[type="text"] {
+    border: 1px solid #cccccc;
+}
+
+/* ---------
+  Preferences view
+------------*/
+
+.ngcp-entry-disabled {
+	text-decoration: line-through;
+}
+
+/* ---------
+  Widgets
+------------*/
+
+.plan .plan-features {
+    min-height:135px; /* 3 rows */
+}
+
+.plan .ngcp-green-ok {
+    color:#0f0;
+}
diff --git a/share/templates/helpers/datatables.tt b/share/templates/helpers/datatables.tt
index a9c7b4b272..686447a860 100644
--- a/share/templates/helpers/datatables.tt
+++ b/share/templates/helpers/datatables.tt
@@ -1,123 +1,3 @@
-<style scoped="scoped">
-div.modal {
-    max-width: 816px;
-    width: 100%;
-    margin: -250px 0 0 -408px;
-    top: 50%;
-    left: 50%; /* override responsive css (bootstrap-responsive.css) */
-}
-@media (max-width: 830px) {
-    div.modal {
-        margin-left: -50%;
-    }
-}
-
-div.modal .table thead tr th, div.modal .table tbody tr td {
-    padding-top: 4px;
-    padding-bottom: 4px;
-}
-
-div.modal .help-inline {
-    clear: both;
-    float: left;
-}
-
-div.dataTables_length label {
-    width: 460px;
-    float: left;
-    text-align: left;
-}
- 
-div.dataTables_filter, div.dataTables_paginate {
-    float: right;
-}
-@media (max-width: 300px) {
-    div.dataTables_filter {
-        float: none;
-    }
-}
- 
-div.dataTables_info {
-    padding-top: 8px;
-}
- 
-div.dataTables_paginate {
-    float: right;
-    margin: 0;
-}
-@media (min-width: 767px) {
-    div.dataTables_paginate {
-        width: 227px;
-    }
-}
-
- 
-table {
-    margin: 1em 0;
-    clear: both;
-}
-
-table .header {
-    cursor: pointer;
-}
-
-table .header:after {
-  content: "";
-  float: right;
-  margin-top: 7px;
-  border-width: 0 4px 4px;
-  border-style: solid;
-  border-color: #fff transparent;
-  visibility: hidden;
-}
-table .header:hover:after {
-  visibility: visible;
-}
-table .headerSortDown:after, table .headerSortDown:hover:after {
-  visibility: visible;
-  filter: alpha(opacity=60);
-  -moz-opacity: 0.6;
-  opacity: 0.6;
-}
-table .headerSortUp:after {
-  border-bottom: none;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 4px solid #fff;
-  visibility: visible;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  filter: alpha(opacity=60);
-  -moz-opacity: 0.6;
-  opacity: 0.6;
-}
-
-div.modal .dataTables_wrapper {
-    padding: 5px;
-}
-
-div.modal .control-group.error .dataTables_wrapper {
-    border: 1px solid #B94A48;
-    border-radius: 3px;
-    -webkit-border-radius: 3px;
-    -mozilla-border-radius: 3px;
-}
-
-div.modal .dataTables_wrapper input[type="text"] {
-    line-height: 10px;
-    height: 10px;
-}
-
-div.modal .control-group.error .dataTables_wrapper input[type="text"] {
-    border: 1px solid #cccccc;
-}
-
-.actions-column { /* TODO: use responsive design */
-    white-space: nowrap;
-}
-
-</style>
 <script src="/js/libs/datatables-bootstrap-paging.js"></script>
 <script type="text/javascript">
 
@@ -148,16 +28,16 @@ $(document).ready(function() {
                     return '' +
                     '<div class="sw_actions pull-right">' +
                     [%- IF helper.has_edit != 0 %]
-                      '<a style="display:inline;line-height:16px;" class="btn btn-small btn-primary" href="[% helper.base_uri %]/' + full[0] + '/edit">' +
-                        '<i class="icon-edit" style="line-height:1em;margin-top:2px"></i> Edit' +
+                      '<a class="btn btn-small btn-primary" href="[% helper.base_uri %]/' + full[0] + '/edit">' +
+                        '<i class="icon-edit"></i> Edit' +
                       '</a>' +
                     [%- END %]
-                      '<a style="display:inline;line-height:16px;margin-left:5px;" class="btn btn-small btn-secondary" href="[% helper.base_uri %]/' + full[0] + '/delete" data-confirm="Delete">' +
-                        '<i class="icon-trash" style="line-height:1em;margin-top:2px"></i> Delete' +
+                      '<a class="btn btn-small btn-secondary" href="[% helper.base_uri %]/' + full[0] + '/delete" data-confirm="Delete">' +
+                        '<i class="icon-trash"></i> Delete' +
                       '</a>' +
                     [%- IF helper.extra_buttons.size > 0 %]
                         [% FOR b IN helper.extra_buttons %]
-                            '<a style="display:inline;line-height:16px;margin-left:5px;" class="btn btn-small btn-tertiary" href="[% helper.base_uri %]/' + full[0] + '/' +
+                            '<a class="btn btn-small btn-tertiary" href="[% helper.base_uri %]/' + full[0] + '/' +
                             '[% b.1 %]' + '">' +
                             '[% b.0 %]' +
                             '</a>' +
@@ -167,7 +47,7 @@ $(document).ready(function() {
                 },
                 "mData": null,
                 "bSortable": false,
-                "sClass": "actions-column",
+                "sClass": "ngcp-actions-column",
             }
 		],
 		"aoColumnDefs": [
@@ -210,16 +90,16 @@ $(document).ready(function() {
 </div>
 [% END -%]
 
-<div style="margin-top:10px;"></div>
+<div class="ngcp-separator"></div>
 
-<table class="table table-bordered table-striped table-highlight table-hover" id="[% helper.name.remove('[\s+\.]') %]_table">
+<table class="table table-bordered table-striped table-highlight table-hover ngcp-datatable" id="[% helper.name.remove('[\s+\.]') %]_table">
     <thead>
         <tr>
             [% FOREACH t IN helper.column_titles -%]
             <th>[% t %]</th>
             [% END -%]
             [% # one for actions -%]
-            <th class="actions-column"></th>
+            <th class="ngcp-actions-column"></th>
         </tr>
     </thead>
     <tbody>
@@ -230,7 +110,7 @@ $(document).ready(function() {
 </table>
 
 [% IF helper.edit_flag || helper.create_flag == 1 -%]
-<div id="mod_edit" class="modal hide" style="display:block">
+<div id="mod_edit" class="modal hide ngcp-modal">
     <div class="modal-header">
         <button id="mod_close" type="button" class="close">×</button>
         <h3>[% helper.create_flag == 1 ? 'Create' : 'Edit' %] [% helper.name %]</h3>
diff --git a/share/templates/helpers/pref_table.tt b/share/templates/helpers/pref_table.tt
index 86fea371ec..b39092a7f8 100644
--- a/share/templates/helpers/pref_table.tt
+++ b/share/templates/helpers/pref_table.tt
@@ -1,13 +1,3 @@
-<style type="text/css" scoped="scoped">
-body {
-    overflow-y: scroll;
-}
-
-.entry-disabled {
-	text-decoration: line-through;
-}
-</style>
-
 <a href="[% c.uri_for() %]">&lt; Back</a>
 
 [% IF helper.messages -%]
@@ -18,7 +8,7 @@ body {
 </div>
 [% END -%]
 
-<div style="margin-top:10px;"></div>
+<div class="ngcp-separator"></div>
 
 <div class="accordion" id="preference_groups">
 [% FOREACH group IN helper.pref_groups %]
@@ -67,7 +57,7 @@ body {
                         [% ELSE %]
                             [% FOR value IN r.value -%]
                                 [% IF value.substr(0,1) == '#' -%]
-                                    <span class="entry-disabled">[% value.substr(1) %]</span>
+                                    <span class="ngcp-entry-disabled">[% value.substr(1) %]</span>
                                 [% ELSE -%]
                                     [% value %]
                                 [% END -%]
@@ -83,8 +73,8 @@ body {
                     [% END %]
                 </td>
                 <td>
-                    <div class="sw_actions pull-right" style="visibility:hidden;">
-                        <a style="display:inline;line-height:16px;" class="btn btn-small btn-primary" href="[% c.uri_for(helper.domain_id,'preferences', r.id, 'edit') %]"><i class="icon-edit" style="line-height:1em;margin-top:2px"></i> Edit</a>
+                    <div class="sw_actions pull-right">
+                        <a class="btn btn-small btn-primary" href="[% c.uri_for(helper.domain_id,'preferences', r.id, 'edit') %]"><i class="icon-edit"></i> Edit</a>
                     </div>
                 </td>
             </tr>
@@ -112,7 +102,7 @@ $(function() {
 </script>
 
 [% IF helper.edit_preference -%]
-<div id="mod_edit" class="modal hide" style="display:block">
+<div id="mod_edit" class="modal hide ngcp-modal">
     <div class="modal-header">
         <button id="mod_close" type="button" class="close">×</button>
         <h3>Edit Preference [% helper.preference_meta.attribute %]</h3>
@@ -121,7 +111,7 @@ $(function() {
         <div class="modal-body">
         [% FOREACH v IN helper.preference.all %]
             [% IF v.value.substr(0,1) == '#' %]
-                <input type="text" value="[% v.value.substr(1) %]" disabled="disabled" class="entry-disabled"></input>
+                <input type="text" value="[% v.value.substr(1) %]" disabled="disabled" class="ngcp-entry-disabled"></input>
             [% ELSE %]
                 <input type="text" value="[% v.value %]" disabled="disabled"></input>
             [% END %]
diff --git a/share/templates/widgets/admin_billing_overview.tt b/share/templates/widgets/admin_billing_overview.tt
index 848708d69b..0b1f6753e8 100644
--- a/share/templates/widgets/admin_billing_overview.tt
+++ b/share/templates/widgets/admin_billing_overview.tt
@@ -7,7 +7,7 @@
                 <span class="term">Billing Profiles</span>
             </div>
         </div>
-        <div class="plan-features" style="min-height:135px;"><!-- 3 rows -->
+        <div class="plan-features">
             <ul>
                 <li><strong>€2000</strong> Peering Costs</li>
                 <li><strong>€5000</strong> Reseller Revenue</li>
diff --git a/share/templates/widgets/admin_peering_overview.tt b/share/templates/widgets/admin_peering_overview.tt
index 7f31c1df1c..0818f5a490 100644
--- a/share/templates/widgets/admin_peering_overview.tt
+++ b/share/templates/widgets/admin_peering_overview.tt
@@ -7,7 +7,7 @@
                 <span class="term">Peering Groups</span>
             </div>
         </div>
-        <div class="plan-features" style="min-height:135px;"><!-- 3 rows -->
+        <div class="plan-features">
             <ul>
                 <li><strong>12</strong> Peering Servers</li>
                 <li><strong>24</strong> Peering Rules</li>
diff --git a/share/templates/widgets/admin_reseller_overview.tt b/share/templates/widgets/admin_reseller_overview.tt
index cd0cd9c5b4..7f40f3cbc7 100644
--- a/share/templates/widgets/admin_reseller_overview.tt
+++ b/share/templates/widgets/admin_reseller_overview.tt
@@ -7,7 +7,7 @@
                 <span class="term">Resellers</span>
             </div>
         </div>
-        <div class="plan-features" style="min-height:135px;"><!-- 3 rows -->
+        <div class="plan-features">
             <ul>
                 <li><strong>13</strong> Domains</li>
                 <li><strong>22745</strong> Accounts</li>
diff --git a/share/templates/widgets/admin_system_overview.tt b/share/templates/widgets/admin_system_overview.tt
index 57b0ee3ab8..6094cc95cd 100644
--- a/share/templates/widgets/admin_system_overview.tt
+++ b/share/templates/widgets/admin_system_overview.tt
@@ -3,11 +3,11 @@
         <div class="plan-header">
             <div class="plan-title">System Status</div>
             <div class="plan-price">
-                <span style="color:#0f0;">&#9702;</span>
+                <span class="ngcp-green-ok">&#9702;</span>
                 <span class="term">All services running</span>
             </div>
         </div>
-        <div class="plan-features" style="min-height:135px;"><!-- 3 rows -->
+        <div class="plan-features">
             <ul>
                 <li>Applications <strong>Ok</strong></li>
                 <li>System <strong>Ok</strong></li>
diff --git a/share/templates/widgets/reseller_domain_overview.tt b/share/templates/widgets/reseller_domain_overview.tt
index 2fd4b50f80..eed2985386 100644
--- a/share/templates/widgets/reseller_domain_overview.tt
+++ b/share/templates/widgets/reseller_domain_overview.tt
@@ -7,7 +7,7 @@
                 <span class="term">Domains</span>
             </div>
         </div>
-        <div class="plan-features" style="min-height:135px;"><!-- 3 rows -->
+        <div class="plan-features">
             <ul>
                 <li><strong>4674</strong> Accounts</li>
                 <li><strong>12456</strong> Subscribers</li>