diff --git a/mayan/apps/common/static/css/960-fluid-devel.css b/mayan/apps/common/static/css/960-fluid-devel.css
deleted file mode 100644
index 72e0d88198..0000000000
--- a/mayan/apps/common/static/css/960-fluid-devel.css
+++ /dev/null
@@ -1,343 +0,0 @@
-/*
-	Variable Grid System (Fluid Version).
-	Learn more ~ http://www.spry-soft.com/grids/
-	Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/
-
-	Licensed under GPL and MIT.
-*/
-
-
-/* Containers
-----------------------------------------------------------------------------------------------------*/
-.container_12 {
-	width: 100%;
-	/*margin-left: 4%;
-	margin-right: 4%;*/
-}
-
-/* Grid >> Global
-----------------------------------------------------------------------------------------------------*/
-
-.grid_1,
-.grid_2,
-.grid_3,
-.grid_4,
-.grid_5,
-.grid_6,
-.grid_7,
-.grid_8,
-.grid_9,
-.grid_10,
-.grid_11,
-.grid_12 {
-	display:inline;
-	float: left;
-	position: relative;
-	/*margin-left: 1%;
-	margin-right: 1%;*/
-}
-
-/* Grid >> Children (Alpha ~ First, Omega ~ Last)
-----------------------------------------------------------------------------------------------------*/
-
-.alpha {
-	margin-left: 0;
-}
-
-.omega {
-	margin-right: 0;
-}
-
-/* Grid >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .grid_1 {
-	width:8.333%;
-}
-
-.container_12 .grid_2 {
-	width:16.667%;
-}
-
-.container_12 .grid_3 {
-	width:25.0%;
-}
-
-.container_12 .grid_4 {
-	width:33.333%;
-}
-
-.container_12 .grid_5 {
-	width:41.667%;
-}
-
-.container_12 .grid_6 {
-	width:50.0%;
-}
-
-.container_12 .grid_7 {
-	width:58.333%;
-}
-
-.container_12 .grid_8 {
-	width:66.667%;
-}
-
-.container_12 .grid_9 {
-	width:75.0%;
-}
-
-.container_12 .grid_10 {
-	width:83.333%;
-}
-
-.container_12 .grid_11 {
-	width:91.667%;
-}
-
-.container_12 .grid_12 {
-	width:100.0%;
-}
-
-
-
-/* Prefix Extra Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .prefix_1 {
-	padding-left:8.333%;
-}
-
-.container_12 .prefix_2 {
-	padding-left:16.667%;
-}
-
-.container_12 .prefix_3 {
-	padding-left:25.0%;
-}
-
-.container_12 .prefix_4 {
-	padding-left:33.333%;
-}
-
-.container_12 .prefix_5 {
-	padding-left:41.667%;
-}
-
-.container_12 .prefix_6 {
-	padding-left:50.0%;
-}
-
-.container_12 .prefix_7 {
-	padding-left:58.333%;
-}
-
-.container_12 .prefix_8 {
-	padding-left:66.667%;
-}
-
-.container_12 .prefix_9 {
-	padding-left:75.0%;
-}
-
-.container_12 .prefix_10 {
-	padding-left:83.333%;
-}
-
-.container_12 .prefix_11 {
-	padding-left:91.667%;
-}
-
-
-
-/* Suffix Extra Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .suffix_1 {
-	padding-right:8.333%;
-}
-
-.container_12 .suffix_2 {
-	padding-right:16.667%;
-}
-
-.container_12 .suffix_3 {
-	padding-right:25.0%;
-}
-
-.container_12 .suffix_4 {
-	padding-right:33.333%;
-}
-
-.container_12 .suffix_5 {
-	padding-right:41.667%;
-}
-
-.container_12 .suffix_6 {
-	padding-right:50.0%;
-}
-
-.container_12 .suffix_7 {
-	padding-right:58.333%;
-}
-
-.container_12 .suffix_8 {
-	padding-right:66.667%;
-}
-
-.container_12 .suffix_9 {
-	padding-right:75.0%;
-}
-
-.container_12 .suffix_10 {
-	padding-right:83.333%;
-}
-
-.container_12 .suffix_11 {
-	padding-right:91.667%;
-}
-
-
-
-/* Push Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .push_1 {
-	left:8.333%;
-}
-
-.container_12 .push_2 {
-	left:16.667%;
-}
-
-.container_12 .push_3 {
-	left:25.0%;
-}
-
-.container_12 .push_4 {
-	left:33.333%;
-}
-
-.container_12 .push_5 {
-	left:41.667%;
-}
-
-.container_12 .push_6 {
-	left:50.0%;
-}
-
-.container_12 .push_7 {
-	left:58.333%;
-}
-
-.container_12 .push_8 {
-	left:66.667%;
-}
-
-.container_12 .push_9 {
-	left:75.0%;
-}
-
-.container_12 .push_10 {
-	left:83.333%;
-}
-
-.container_12 .push_11 {
-	left:91.667%;
-}
-
-
-
-/* Pull Space >> 12 Columns
-----------------------------------------------------------------------------------------------------*/
-
-
-.container_12 .pull_1 {
-	left:-8.333%;
-}
-
-.container_12 .pull_2 {
-	left:-16.667%;
-}
-
-.container_12 .pull_3 {
-	left:-25.0%;
-}
-
-.container_12 .pull_4 {
-	left:-33.333%;
-}
-
-.container_12 .pull_5 {
-	left:-41.667%;
-}
-
-.container_12 .pull_6 {
-	left:-50.0%;
-}
-
-.container_12 .pull_7 {
-	left:-58.333%;
-}
-
-.container_12 .pull_8 {
-	left:-66.667%;
-}
-
-.container_12 .pull_9 {
-	left:-75.0%;
-}
-
-.container_12 .pull_10 {
-	left:-83.333%;
-}
-
-.container_12 .pull_11 {
-	left:-91.667%;
-}
-
-
-
-
-/* Clear Floated Elements
-----------------------------------------------------------------------------------------------------*/
-
-/* http://sonspring.com/journal/clearing-floats */
-
-.clear {
-	clear: both;
-	display: block;
-	overflow: hidden;
-	visibility: hidden;
-	width: 0;
-	height: 0;
-}
-
-/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
-
-.clearfix:after {
-	clear: both;
-	content: ' ';
-	display: block;
-	font-size: 0;
-	line-height: 0;
-	visibility: hidden;
-	width: 0;
-	height: 0;
-}
-
-.clearfix {
-	display: inline-block;
-}
-
-* html .clearfix {
-	height: 1%;
-}
-
-.clearfix {
-	display: block;
-}
diff --git a/mayan/apps/common/static/css/960-fluid.css b/mayan/apps/common/static/css/960-fluid.css
deleted file mode 100644
index 105d0652a9..0000000000
--- a/mayan/apps/common/static/css/960-fluid.css
+++ /dev/null
@@ -1 +0,0 @@
-.container_12 {width: 100%;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12 {display:inline;float: left;position: relative;}.alpha {margin-left: 0;}.omega {margin-right: 0;}.container_12 .grid_1 {width:8.333%;}.container_12 .grid_2 {width:16.667%;}.container_12 .grid_3 {width:25.0%;}.container_12 .grid_4 {width:33.333%;}.container_12 .grid_5 {width:41.667%;}.container_12 .grid_6 {width:50.0%;}.container_12 .grid_7 {width:58.333%;}.container_12 .grid_8 {width:66.667%;}.container_12 .grid_9 {width:75.0%;}.container_12 .grid_10 {width:83.333%;}.container_12 .grid_11 {width:91.667%;}.container_12 .grid_12 {width:100.0%;}.container_12 .prefix_1 {padding-left:8.333%;}.container_12 .prefix_2 {padding-left:16.667%;}.container_12 .prefix_3 {padding-left:25.0%;}.container_12 .prefix_4 {padding-left:33.333%;}.container_12 .prefix_5 {padding-left:41.667%;}.container_12 .prefix_6 {padding-left:50.0%;}.container_12 .prefix_7 {padding-left:58.333%;}.container_12 .prefix_8 {padding-left:66.667%;}.container_12 .prefix_9 {padding-left:75.0%;}.container_12 .prefix_10 {padding-left:83.333%;}.container_12 .prefix_11 {padding-left:91.667%;}.container_12 .suffix_1 {padding-right:8.333%;}.container_12 .suffix_2 {padding-right:16.667%;}.container_12 .suffix_3 {padding-right:25.0%;}.container_12 .suffix_4 {padding-right:33.333%;}.container_12 .suffix_5 {padding-right:41.667%;}.container_12 .suffix_6 {padding-right:50.0%;}.container_12 .suffix_7 {padding-right:58.333%;}.container_12 .suffix_8 {padding-right:66.667%;}.container_12 .suffix_9 {padding-right:75.0%;}.container_12 .suffix_10 {padding-right:83.333%;}.container_12 .suffix_11 {padding-right:91.667%;}.container_12 .push_1 {left:8.333%;}.container_12 .push_2 {left:16.667%;}.container_12 .push_3 {left:25.0%;}.container_12 .push_4 {left:33.333%;}.container_12 .push_5 {left:41.667%;}.container_12 .push_6 {left:50.0%;}.container_12 .push_7 {left:58.333%;}.container_12 .push_8 {left:66.667%;}.container_12 .push_9 {left:75.0%;}.container_12 .push_10 {left:83.333%;}.container_12 .push_11 {left:91.667%;}.container_12 .pull_1 {left:-8.333%;}.container_12 .pull_2 {left:-16.667%;}.container_12 .pull_3 {left:-25.0%;}.container_12 .pull_4 {left:-33.333%;}.container_12 .pull_5 {left:-41.667%;}.container_12 .pull_6 {left:-50.0%;}.container_12 .pull_7 {left:-58.333%;}.container_12 .pull_8 {left:-66.667%;}.container_12 .pull_9 {left:-75.0%;}.container_12 .pull_10 {left:-83.333%;}.container_12 .pull_11 {left:-91.667%;}.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}
diff --git a/mayan/apps/common/views.py b/mayan/apps/common/views.py
index 6f18326520..9564d3f038 100644
--- a/mayan/apps/common/views.py
+++ b/mayan/apps/common/views.py
@@ -129,7 +129,7 @@ def assign_remove(request, left_list, right_list, add_method, remove_method, lef
         'subtemplates_list': [
             {
                 'name': 'main/generic_form_subtemplate.html',
-                'grid': 6,
+                'grid': 12,
                 'context': {
                     'form': unselected_list,
                     'title': left_list_title or ' ',
@@ -139,7 +139,7 @@ def assign_remove(request, left_list, right_list, add_method, remove_method, lef
             },
             {
                 'name': 'main/generic_form_subtemplate.html',
-                'grid': 6,
+                'grid': 12,
                 'grid_clear': True,
                 'context': {
                     'form': selected_list,
diff --git a/mayan/apps/main/templates/main/base.html b/mayan/apps/main/templates/main/base.html
index 43aafd4d63..4eb48a0dd4 100644
--- a/mayan/apps/main/templates/main/base.html
+++ b/mayan/apps/main/templates/main/base.html
@@ -34,9 +34,15 @@
             <link rel="stylesheet" href="{% static 'web_theme_media/stylesheets/themes/activo/style.css' %}" type="text/css" media="screen" />
             <link rel="stylesheet" href="{% static 'packages/animate-custom.css' %}" type="text/css" media="screen" />
             <link rel="stylesheet" href="{% static 'css/famfamfam-silk-sprite.css' %}" type="text/css" media="screen" />
-            <link rel="stylesheet" href="{% static 'css/960-fluid.css' %}" type="text/css" media="screen" />
             <link rel="stylesheet" href="{% static 'css/override.css' %}" type="text/css" media="screen" />
             <link rel="stylesheet" href="{% static 'packages/fancyBox-master/source/jquery.fancybox.css' %}" type="text/css" media="screen" />
+
+            <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/base-min.css' %}" type="text/css" media="screen" />
+            <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/grids-core-min.css' %}" type="text/css" media="screen" />
+            <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/grids-min.css' %}" type="text/css" media="screen" />
+            <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/forms-nr-min.css' %}" type="text/css" media="screen" />
+            <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/buttons-min.css' %}" type="text/css" media="screen" />
+
             <style type="text/css">
                 #fancybox-left-ico {
                  left: 20px;
diff --git a/mayan/apps/main/templates/main/generic_detail.html b/mayan/apps/main/templates/main/generic_detail.html
index 1ebaa988c9..e261dd8376 100644
--- a/mayan/apps/main/templates/main/generic_detail.html
+++ b/mayan/apps/main/templates/main/generic_detail.html
@@ -58,9 +58,14 @@
         {% endwith %}
     {% endif %}
 
-    <div class="container_12">
+    <div class="pure-g">
         {% for subtemplate in subtemplates_list %}
-            <div class="grid_{{ subtemplate.grid|default:12 }}">
+
+            {% if subtemplate.grid %}
+                <div class="pure-u-{{ subtemplate.grid }}-24">
+            {% else %}
+                <div class="pure-u-1">
+            {% endif %}
                 {% with "true" as read_only %}
                     {% render_subtemplate subtemplate.name subtemplate.context as rendered_subtemplate %}
                     <div class="generic_subform">
diff --git a/mayan/apps/main/templates/main/generic_form.html b/mayan/apps/main/templates/main/generic_form.html
index f9c4fbeda1..c15d3687fa 100644
--- a/mayan/apps/main/templates/main/generic_form.html
+++ b/mayan/apps/main/templates/main/generic_form.html
@@ -33,9 +33,15 @@
         </div>
     {% endif %}
 
-    <div class="container_12">
+    <div class="pure-g">
+
         {% for subtemplate in subtemplates_list %}
-            <div class="grid_{{ subtemplate.grid|default:12 }}">
+
+            {% if subtemplate.grid %}
+                <div class="pure-u-{{ subtemplate.grid }}-24">
+            {% else %}
+                <div class="pure-u-1">
+            {% endif %}
                 {% if subtemplate.form %}
                     {% render_subtemplate subtemplate.name subtemplate.context as rendered_subtemplate %}
                         <div class="generic_subform">
diff --git a/mayan/apps/main/templates/main/generic_list_horizontal_subtemplate.html b/mayan/apps/main/templates/main/generic_list_horizontal_subtemplate.html
index ddcadc73b2..da23b70c19 100644
--- a/mayan/apps/main/templates/main/generic_list_horizontal_subtemplate.html
+++ b/mayan/apps/main/templates/main/generic_list_horizontal_subtemplate.html
@@ -3,11 +3,11 @@
         {{ title }}
     </h2>
 
-    <div class="inner">
-        <div class="group navform wat-cf">
-            {% for object in object_list %}
+    <div class="pure-g tc">
+        {% for object in object_list %}
+            <div class="pure-u-4-24">
                 {{ object }}
-            {% endfor %}
-        </div>
+            </div>
+        {% endfor %}
     </div>
 </div>
diff --git a/mayan/apps/main/templates/main/home.html b/mayan/apps/main/templates/main/home.html
index 6b66cc6d1a..e1a0b37937 100644
--- a/mayan/apps/main/templates/main/home.html
+++ b/mayan/apps/main/templates/main/home.html
@@ -6,11 +6,6 @@
 {% load project_tags %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/base-min.css' %}" type="text/css" media="screen" />
-    <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/grids-core-min.css' %}" type="text/css" media="screen" />
-    <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/grids-min.css' %}" type="text/css" media="screen" />
-    <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/forms-nr-min.css' %}" type="text/css" media="screen" />
-    <link rel="stylesheet" href="{% static 'common/packages/pure-release-0.5.0/buttons-min.css' %}" type="text/css" media="screen" />
 {% endblock %}
 
 {% block content %}
diff --git a/mayan/apps/navigation/widgets.py b/mayan/apps/navigation/widgets.py
index a025a3d566..0f58a02f43 100644
--- a/mayan/apps/navigation/widgets.py
+++ b/mayan/apps/navigation/widgets.py
@@ -40,7 +40,13 @@ def render_widget(request, link):
     links = resolve_links(context, [link], current_view, current_path, parsed_query_string)
     if links:
         link = links[0]
-        return mark_safe(u'<a style="text-decoration:none; margin-right: 10px;" href="%(url)s"><button style="vertical-align: top; padding: 1px; width: 110px; height: 100px; margin: 10px;"><img src="%(static_url)s" alt="%(image_alt)s" /><p style="margin: 0px 0px 0px 0px;">%(string)s</p></button></a>' % {
+        return mark_safe(u'\
+            <a class="pure-button mayan-button-big" href="%(url)s">\
+                <p>\
+                    <img src="%(static_url)s"><br>\
+                    %(string)s\
+                </p>\
+            </a>' % {
             'url': reverse(link['view']) if 'view' in link else link['url'],
             'static_url': staticfiles_storage.url('main/icons/{0}'.format(link.get('icon', 'link_button.png'))),
             'string': link['text'],