diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index e0e642fa9..bcbae41fb 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -23,25 +23,47 @@
     }
   }
   .actions{
-    text-align:center;
-    padding:10px 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2% 0; /* about .dashboard-container's left / right margin */
+    @media screen and ( min-width: 600px ){
+      flex-direction: row;
+    }
     .action{
-      width:calc(90% - 26px);
-      margin:7px 3px;
+      flex-basis: 0;
+      flex-grow: 1;
+      flex-shrink: 0;
+      width: 100%;
       color:$black;
       padding:10px 0px;
       border-radius:3px;
       min-width:115px;
-      display:inline-block;
-      transition: background-color 250ms ease;
+      transition: background-color 250ms ease, opacity 250ms ease;
       font-family: $helvetica-condensed;
       font-stretch:condensed;
-      font-size: 1.2em;
+      font-size: 1.1em;
+      text-align: center;
       &.active{
         background: $purple;
       }
-      @media screen and ( min-width: 600px ){
-        width:calc(25% - 16px);
+      &:not(.active):hover{
+        background: $light-medium-purple;
+      }
+      &:not(:last-child) {
+        /* gap between actions */
+        margin-bottom: 8px;
+        @media screen and ( min-width: 600px ){
+          margin-bottom: 0;
+          margin-right: 8px;
+        }
+      }
+      span {
+        display: inline-block;
+        @media screen and ( min-width: 600px ) and  ( max-width: 800px ){
+          display: block;
+        }
       }
     }
   }
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
index 2204e9544..d7cd9cd15 100644
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -5,6 +5,7 @@ $green: #66e2d5;
 $light-green: lighten($green,30%);
 $dark-purple: #4e57ef;
 $purple: #cfd7ff;
+$light-medium-purple: lighten($purple, 4%);
 $light-purple: lighten($purple, 7%);
 $blue: #1395b8;
 $sky-blue: #557de8;
diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb
index 7bdb93b6f..0c6bd9c2a 100644
--- a/app/views/dashboards/show.html.erb
+++ b/app/views/dashboards/show.html.erb
@@ -2,9 +2,18 @@
 
 <div class="dashboard-container">
   <div class="actions">
-    <a class="action <%= 'active' if params[:which] == "organization" || params[:which].blank? %>" href="/dashboard">POSTS (<%= @user.articles_count %>)</a>
-    <a class="action <%= 'active' if params[:which] == "user_followers" %>" href="/dashboard/user_followers">FOLLOWERS (<%= @user.followers_count %>)</a>
-    <a class="action <%= 'active' if params[:which] == "following_users" %>" href="/dashboard/following_users">FOLLOWING (<%= @user.following_users_count %>)</a>
+    <a class="action <%= 'active' if params[:which] == "organization" || params[:which].blank? %>" href="/dashboard">
+      <span>POSTS</span>
+      <span>(<%= @user.articles_count %>)</span>
+    </a>
+    <a class="action <%= 'active' if params[:which] == "user_followers" %>" href="/dashboard/user_followers">
+      <span>FOLLOWERS</span>
+      <span>(<%= @user.followers_count %>)</span>
+    </a>
+    <a class="action <%= 'active' if params[:which] == "following_users" %>" href="/dashboard/following_users">
+      <span>FOLLOWING</span>
+      <span>(<%= @user.following_users_count %>)</span>
+    </a>
   </div>
 <% if @user.org_admin && @user.organization %>
   <h1>