diff --git a/pages/_includes/parts/pagination.html b/pages/_includes/parts/pagination.html
index 491e94c79d373e371bca6504d6e4af8bbbcb3ce9..fa5ed37714f84c34f66a0b5d700753626b1bca84 100644
--- a/pages/_includes/parts/pagination.html
+++ b/pages/_includes/parts/pagination.html
@@ -1,9 +1,14 @@
 {% assign count = include.count | default: 5 %}
 {% assign active-item = include.active-item | default: 2 %}
-<ul class="pagination {{ include.class }}{% if include.pager %} pagination-pager{% endif %}">
-   <li class="page-item page-prev disabled">
+<ul class="pagination {{ include.class }}">
+   <li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
       <a class="page-link" href="#" tabindex="-1">
-         {% if include.left-icon %}<i class="{{ include.left-icon }}"></i>{% else %}Prev{% endif %}
+         {% if include.prev-description %}
+            <div class="page-item-subtitle">Previous</div>
+            <div class="page-item-title">{{ include.prev-description }}</div>
+         {% else %}
+            {% if include.icons %}{% include ui/icon.html icon="chevron-left" %}{% else %}Prev{% endif %}
+         {% endif %}
       </a>
    </li>
 
@@ -11,9 +16,15 @@
    <li class="page-item{% if i == active-item %} active{% endif %}"><a class="page-link" href="#">{{ i }}</a></li>
    {% endfor %}
 
-   <li class="page-item page-next">
+   <li class="page-item{% if include.prev-description %} page-next{% endif %}">
       <a class="page-link" href="#">
-         {% if include.right-icon %}<i class="{{ include.right-icon }}"></i>{% else %}Next{% endif %}
+
+         {% if include.next-description %}
+            <div class="page-item-subtitle">Next</div>
+            <div class="page-item-title">{{ include.next-description }}</div>
+         {% else %}
+            {% if include.icons %}{% include ui/icon.html icon="chevron-right" %}{% else %}Next{% endif %}
+         {% endif %}
       </a>
    </li>
 </ul>
diff --git a/pages/pagination.html b/pages/pagination.html
new file mode 100644
index 0000000000000000000000000000000000000000..0a52c5ce9f7a4f3066709bdd8658dfcf6ec884c3
--- /dev/null
+++ b/pages/pagination.html
@@ -0,0 +1,14 @@
+---
+title: Pagination
+---
+
+
+{% card %}
+   {% include parts/pagination.html %}
+   {% include parts/pagination.html icons=true %}
+{% endcard %}
+
+
+{% card %}
+   {% include parts/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
+{% endcard %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index df18a7f567043661afd2a1e214c74a785d9b450a..8c48b93af3840e02b54742101c853b0174a9db62 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,9 +1,9 @@
 // FONTS
-$font-family-base: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-base: "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
 // EXTERNAL FONTS
-$google-font-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" !default;
+$google-font-url: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700" !default;
 $icon-fonts: (
   "https://use.fontawesome.com/releases/v5.3.1/css/brands.css"
 ) !default;
@@ -26,7 +26,7 @@ $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 
-$blue: #467fcf !default;
+$blue: #458edd !default;
 $azure: #45aaf2 !default;
 $indigo: #6574cd !default;
 $purple: #a55eea !default;
@@ -47,7 +47,7 @@ $white: #fff !default;
 $body-bg: #f5f7fb !default;
 $body-bg-dark: mix(#fff, $dark, 8%) !default;
 
-$text-color: #647787 !default;
+$text-color: #495057 !default;
 $text-muted: #778ca2 !default;
 $text-muted-light: #adb5bd !default;
 
@@ -155,6 +155,13 @@ $container-max-widths: (
   xl: 1200px
 ) !default;
 
+//pagination
+$pagination-border-width: 0 !default;
+$pagination-padding-y: .25rem !default;
+$pagination-padding-x: .25rem !default;
+$pagination-color: $text-muted !default;
+$pagination-disabled-color: $text-muted-light !default;
+
 //docelowo przeniesc gdzieindziej
 $yiq-contrasted-threshold: 200 !default;
 
diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss
index 1246cc4c61ba25337cd3c5cb41b7270b42f95c47..49ea781c15ca67e910a0f4a7c005f899eb040122 100644
--- a/scss/layout/_core.scss
+++ b/scss/layout/_core.scss
@@ -1,3 +1,23 @@
 body {
-  background: $body-bg;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: none;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  -webkit-font-feature-settings: "liga" 0;
+  font-feature-settings: "liga" 0;
+}
+
+body *::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  transition: .3s background;
+}
+
+body *::-webkit-scrollbar-thumb {
+  background: $gray-400;
+}
+body *:hover::-webkit-scrollbar-thumb {
+  background: $gray-500;
 }
diff --git a/scss/ui-kit.scss b/scss/ui-kit.scss
index 98633a300730ab596bd3616bf40f70090e4dd80f..f098d83a84d4d1a90ab21aa2da608a25d518ca9a 100644
--- a/scss/ui-kit.scss
+++ b/scss/ui-kit.scss
@@ -51,6 +51,7 @@
 @import "ui/ribbons";
 @import "ui/nav";
 @import "ui/calendars";
+@import "ui/pagination";
 
 @import "ui/highlight";
 @import "ui/examples";
diff --git a/scss/ui/_pagination.scss b/scss/ui/_pagination.scss
new file mode 100644
index 0000000000000000000000000000000000000000..43a91fab52506e52e848e1719c9ba9c90b992fb8
--- /dev/null
+++ b/scss/ui/_pagination.scss
@@ -0,0 +1,52 @@
+.pagination {
+  user-select: none;
+}
+
+.page-link {
+  border-radius: $border-radius;
+  min-width: px2rem(26px);
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+.page-item {
+  text-align: center;
+
+  &.page-prev,
+  &.page-next {
+    flex: 0 0 50%;
+    text-align: left;
+  }
+
+  &.page-next {
+    margin-left: auto;
+    text-align: right;
+  }
+}
+
+.page-item-subtitle {
+  color: $text-muted;
+  text-transform: uppercase;
+  font-size: 12px;
+  margin-bottom: 2px;
+
+  .page-item.disabled &{
+    color: $pagination-disabled-color;
+  }
+}
+
+.page-item-title {
+  color: $text-color;
+  font-weight: 400;
+  font-size: $h3-font-size;
+
+  .page-link:hover & {
+    color: $link-color;
+  }
+
+  .page-item.disabled &{
+    color: $pagination-disabled-color;
+  }
+}