diff --git a/themes/first/layouts/_default/list.html b/themes/first/layouts/_default/list.html
index 9e1f6b8..6f8c4a0 100644
--- a/themes/first/layouts/_default/list.html
+++ b/themes/first/layouts/_default/list.html
@@ -2,7 +2,7 @@
   <div class="content">
 
     {{ .Content }}
-    <ul>
+    <ul class="pages-list">
       {{ range .Pages }}
         <li> <a href="{{.URL}}"> {{ .Title }} </a> </li>
       {{ end }}
diff --git a/themes/first/src/css/color.less b/themes/first/src/css/color.less
index e79afca..1754e1f 100644
--- a/themes/first/src/css/color.less
+++ b/themes/first/src/css/color.less
@@ -16,4 +16,8 @@
 @color-nav-text: rgb(255, 255, 255);
 @color-nav-item-border: rgb(59, 206, 59);
 
-@color-sidebar-font: rgb(0, 0, 0);
\ No newline at end of file
+@color-sidebar-font: rgb(0, 0, 0);
+
+@color-pages-list: rgb(159, 197, 159);
+@color-pages-list-border: rgb(15, 49, 15);
+@color-pages-list-text: rgb(0, 0, 0);
\ No newline at end of file
diff --git a/themes/first/src/css/main.less b/themes/first/src/css/main.less
index e6e27b9..761e1cc 100644
--- a/themes/first/src/css/main.less
+++ b/themes/first/src/css/main.less
@@ -67,6 +67,34 @@ body {
   }
 }
 
+// listings of articles
+ul.pages-list{
+  list-style-type: none;
+  margin-left: .0em;
+  padding-left: .0em;
+
+  li {
+
+    a {
+    padding-left: 1.3em;
+    padding-right: 1.0em;
+    padding-top: 1.0em;
+    padding-bottom: 1.0em;
+
+    margin-top: 0.5em;
+    margin-bottom: 0em;
+    background-color: @color-pages-list;
+
+    border-left: 3px solid @color-pages-list-border;
+      display: block;
+      text-align: left;
+      text-decoration: none;
+      color: @color-pages-list-text;
+    }
+    
+  }
+}
+
 @media @non-desktop {
   body nav#TableOfContents {
     display: none;
@@ -84,7 +112,6 @@ body {
     }
 
     font-family: @font-sidebar;
-
     color: @color-sidebar-font;
 
     a:link,a:visited,a:active {
@@ -129,6 +156,7 @@ pre {
   }
 }
 
+
 .inline-code{
   color: @color-code-inline;