diff --git a/ckanext/pages/assets/css/pages_list.css b/ckanext/pages/assets/css/pages_list.css
new file mode 100644
index 00000000..120c35f6
--- /dev/null
+++ b/ckanext/pages/assets/css/pages_list.css
@@ -0,0 +1,44 @@
+.page-card {
+    background-color:#ecedef;
+    padding:2rem 2rem;
+}
+
+.col-md-4 {
+    margin-left:15px;
+    width:31.6%; /* non-css3 fallback */
+    width: calc( 33.33333333% - 15px ); /* css3 calculation */
+}
+
+.read-more {
+    display:block;
+    width:fit-content;
+    text-decoration: none;
+    padding: 5px;
+    color: var(--color-1) !important;
+    border: 1px solid var(--color-1) !important;
+    margin-top: 15px;
+    border-radius: 3px;
+    background-color: transparent;
+    width:max-content;
+}
+
+.read-more:hover {
+    text-decoration:none;
+    border: 1px solid white!important;
+    color: white!important;
+    background: var(--color-2);
+}
+
+a.page-title {
+    font-size: 15pt;
+    height: 2.35em !important;
+    font-weight: bold;
+    overflow: hidden;
+    color: var(--color-1) !important;
+}
+
+div.page-content {
+    color: var(--color-1) !important;
+    height: 5.8em !important;
+    overflow: hidden !important;
+}
\ No newline at end of file
diff --git a/ckanext/pages/assets/index.png b/ckanext/pages/assets/index.png
new file mode 100644
index 00000000..fb2fe87b
Binary files /dev/null and b/ckanext/pages/assets/index.png differ
diff --git a/ckanext/pages/theme/templates_main/ckanext_pages/pages_list.html b/ckanext/pages/theme/templates_main/ckanext_pages/pages_list.html
index 46a1d996..a6324564 100644
--- a/ckanext/pages/theme/templates_main/ckanext_pages/pages_list.html
+++ b/ckanext/pages/theme/templates_main/ckanext_pages/pages_list.html
@@ -1,5 +1,10 @@
 {% extends 'ckanext_pages/edit_base.html' %} 
 
+{% block styles %}
+  {{super()}}
+  <link rel="stylesheet" href="/css/pages_list.css">
+{% endblock %}
+
 {% block page_primary_action %}
   {% if h.check_access('ckanext_pages_update', {}) %}
     {% if h.ckan_version().split('.')[1] | int >= 9 %}
diff --git a/ckanext/pages/theme/templates_main/ckanext_pages/snippets/pages_list.html b/ckanext/pages/theme/templates_main/ckanext_pages/snippets/pages_list.html
index e865dfbd..a35c0cb9 100644
--- a/ckanext/pages/theme/templates_main/ckanext_pages/snippets/pages_list.html
+++ b/ckanext/pages/theme/templates_main/ckanext_pages/snippets/pages_list.html
@@ -19,7 +19,7 @@ <h2>Pages</h2>
 
 {% if pages %}
   {% set editor = h.get_wysiwyg_editor() %}
-
+  <div class="container" style="width:100%;">
     {% for page in pages %}
       {% if ckan_29_or_higher %}
         {% if id %} {# this is for orgs and groups #}
@@ -40,22 +40,22 @@ <h2>Pages</h2>
         {% endif %}
 
       {% endif %}
-      <div class="row page-list-item dataset-item">
+      <div class="col-md-4 page-list-item page-card">
       {% if page.image %}
         <div class="span3 image">
           <a style="background-image:url({{ page.image }})" href="{{ url }}">
           </a>
         </div>
-        <div class="span8">
+        <div class="span8" style="margin-top:1rem;">
            <h3 class="dataset-heading">
-              <a href="{{ url }}" >{{ page.title }}</a>
+              <a href="{{ url }}" class="page-title">{{ page.title }}</a>
               {% if page.publish_date %}
                  <small class="date"> {{ h.render_datetime(page.publish_date) }} </small>
               {% endif %}
             </h3>
             {% if page.content %}
               {% if editor %}
-              <div>
+              <div class="page-content">
                 {{page.content|striptags|truncate}}
               </div>
               {% else %}
@@ -64,31 +64,39 @@ <h3 class="dataset-heading">
             {% else %}
               <p class="empty">{{ _('This page currently has no content') }}</p>
             {% endif %}
+            <a class="read-more"  href="{{ url }}">Read More</a>
         </div>
       {% else %}
-        <div class="span11">
+      <div class="span3 image">
+          <img class="feed-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRdmmJPKK_ynmtZgkngAz35PeqZueJv1RNIEzUZV6TNZV8ijqLe" alt="No Image Found" style="display: block;height: 136px;background-position: center center;background-size: cover;">
+      </div>
+          <div class="span11" style="margin-top:1rem;">
           <h3 class="dataset-heading">
-            <a href="{{ url }}" >{{ page.title }}</a>
+            <a href="{{ url }}"  class="page-title">{{ page.title }}</a>
             {% if page.publish_date %}
                <small class="date"> {{ h.render_datetime(page.publish_date) }} </small>
             {% endif %}
           </h3>
           {% if page.content %}
             {% if editor %}
-            <div>
+            <div class="page-content">
               {{page.content|striptags|truncate}}
             </div>
             {% else %}
               {{ h.markdown_extract(page.content) }}
             {% endif %}
+
+            
           {% else %}
             <p class="empty">{{ _('This page currently has no content') }}</p>
           {% endif %}
+          <a class="read-more"  href="{{ url }}">Read More</a>
         </div>
       {% endif %}
       </div>
+    
     {% endfor %}
-
+  </div>
 {% else %}
     {% if type == 'blog' %}
       <p class="empty">{{ _('There are currently no blog articles here') }}</p>