diff --git a/app/views/search/hda.html.slim b/app/views/search/hda.html.slim
index d7ba2be6..3e981ef0 100644
--- a/app/views/search/hda.html.slim
+++ b/app/views/search/hda.html.slim
@@ -26,26 +26,28 @@
         .myhda_empty
           = t 'no_documents_found'
 
-  #search-pagination
-    .pagination
+  nav
+    ul.pagination
       - if @page != 1
-        span.previous_page =link_to t('previous'), query: @query, page: @page-1, per_page: @rpp
-        '
+        li.page-item
+          span.page-link = link_to t('previous'), query: @query, page: @page-1, per_page: @rpp
+
       - if @page > 5
-        =link_to "1", query: @query, page: 1, per_page: @rpp
-        '
-        =link_to "2", query: @query, page: 2, per_page: @rpp
-        '
-        ' ..
-      -(1..4).each do |p|
-        - page = @page-(5-p)
-        - unless page < 1
-          =link_to page, query: @query, page: page, per_page: @rpp
-          '
-      em.current = @page
+        span.page-link = link_to "1", query: @query, page: 1, per_page: @rpp
+        span.page-link = link_to "2", query: @query, page: 2, per_page: @rpp
+
+        em.current.page-link = ".."
+
+      - else
+        -(1..4).each do |p|
+            - page = @page-(5-p)
+            - unless page < 1
+              span.page-link = link_to page, query: @query, page: page, per_page: @rpp
+
+      em.current.page-link = @page
       - unless @results.size < @rpp
-        '
         -(1..6).each do |p|
-          =link_to @page+p, query: @query, rel: "next", page: @page+p, per_page: @rpp
-          '
-        span.next_page =link_to t('next'), query: @query, page: @page+1, per_page: @rpp
+          span.page-link = link_to @page+p, query: @query, rel: "next", page: @page+p, per_page: @rpp
+
+        li.page-item
+          span.page-link = link_to t('next'), query: @query, page: @page+1, per_page: @rpp
diff --git a/public/themes/default/stylesheets/style.css b/public/themes/default/stylesheets/style.css
index 86bec6fe..2e5028cb 100644
--- a/public/themes/default/stylesheets/style.css
+++ b/public/themes/default/stylesheets/style.css
@@ -1365,6 +1365,19 @@ td.align-top {
     padding: 1px 4px;
     width: auto; }
 
+span.page-link{
+  padding: 0px !important;
+}
+
+span.page-link a{
+  display: inline-block;
+  padding: 0.5rem 0.75rem;
+}
+
+span.page-link a:hover{
+  text-decoration: none;
+}
+
 #footer {
   position: relative;
   margin-top: -50px;