diff --git a/src/components/Paginate.jsx b/src/components/Paginate.jsx
index a177e31..34ecd8e 100644
--- a/src/components/Paginate.jsx
+++ b/src/components/Paginate.jsx
@@ -2,6 +2,7 @@ import React, {Component, Fragment} from 'react';
 
 const LEFT_PAGE = 'LEFT';
 const RIGHT_PAGE = 'RIGHT';
+const SPACE = 'SPACE';
 
 /**
  * Helper method for creating a range of numbers
@@ -54,7 +55,7 @@ export default class Paginate extends Component {
     handleClick(page) {
         return (evt) => {
             evt.preventDefault();
-            if(this.state.currentPage !== page) this.gotoPage(page);
+            if (this.state.currentPage !== page) this.gotoPage(page);
         }
     }
 
@@ -114,17 +115,17 @@ export default class Paginate extends Component {
             // handle: (1) < {5 6} [7] {8 9} (10)
             if (hasLeftSpill && !hasRightSpill) {
                 const extraPages = range(startPage - spillOffset, startPage - 1);
-                pages = [LEFT_PAGE, ...extraPages, ...pages];
+                pages = [LEFT_PAGE, 1, SPACE, ...extraPages, ...pages];
                 // handle: (1) {2 3} [4] {5 6} > (10)
             } else if (!hasLeftSpill && hasRightSpill) {
                 const extraPages = range(endPage + 1, endPage + spillOffset);
-                pages = [...pages, ...extraPages, RIGHT_PAGE];
+                pages = [1, ...pages, ...extraPages, SPACE, totalPages, RIGHT_PAGE];
                 // handle: (1) < {4 5} [6] {7 8} > (10)
             } else if (hasLeftSpill && hasRightSpill) {
-                pages = [LEFT_PAGE, ...pages, RIGHT_PAGE];
+                pages = [LEFT_PAGE, 1, SPACE, ...pages, SPACE, totalPages, RIGHT_PAGE];
             }
 
-            return [1, ...pages, totalPages];
+            return pages;
 
         }
 
@@ -143,20 +144,23 @@ export default class Paginate extends Component {
             if (page === LEFT_PAGE) return (
                 <li key={page} className="page-item">
                     <a className="page-link" href={this.makePageLink(this.state.currentPage - 1)} onClick={this.handleMoveLeft}>
-                        <span>&laquo;</span>
+                        <span>Anterior</span>
                     </a>
                 </li>
             );
             if (page === RIGHT_PAGE) return (
                 <li key={page} className="page-item">
                     <a className="page-link" href={this.makePageLink(this.state.currentPage + 1)} onClick={this.handleMoveRight}>
-                        <span>&raquo;</span>
+                        <span>Siguiente</span>
                     </a>
                 </li>
             );
+            if (page === SPACE) return (
+                <span className='spacing'>…</span>
+            );
             return (
-                <li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
-                    <a className="page-link" href={this.makePageLink(page)} onClick={this.handleClick(page)}>{page}</a>
+                <li key={page} className='page-item '>
+                    <a className={`page-link ${currentPage === page ? 'active' : ''}`} href={this.makePageLink(page)} onClick={this.handleClick(page)}>{page}</a>
                 </li>
             );
         })
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 1bbf1e8..74b449c 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -76,28 +76,42 @@ h1, h2, h3, h4 {
 ul.pagination {
   display: flex;
   margin: 1rem auto;
-  justify-content: center;
 
   .page-item {
-    border: 1px solid var(--gray-2);
+    height: 2rem;
 
-    &.active {
-      background-color: var(--accent);
+    .page-link {
+      display: inline-block;
+      height: 100%;
 
-      a {
-        color: white;
+      border: 1px solid var(--gray-2);
+      border-radius: 3px;
+      margin-right: .4rem;
+      padding: .5rem 1em;
+
+      color: var(--black);
+      text-decoration: none;
+      font-size: .75rem;
+      line-height: 1;
+
+      &.active {
+        background-color: var(--accent);
+        color: var(--white);
+      }
+
+      &:hover:not(.active) {
+        background-color: var(--gray-2);
+        border: 1px solid var(--gray-3);
+      }
+
+      &:focus {
+        outline: none;
       }
     }
   }
 
-  .page-link {
-    color: var(--black);
-    text-decoration: none;
-    padding: 0 1rem;
-
-    @media (max-width: 767px) {
-      padding: 0 .4rem;
-    }
+  .spacing {
+    margin: auto 1rem;
   }
 }