diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java
index fcd48d9..c434a63 100644
--- a/sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java
+++ b/sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java
@@ -16,8 +16,8 @@ import static javafx.geometry.Orientation.VERTICAL;
 public class SliderPage extends AbstractPage {
 
     public static final String NAME = "Slider";
-    private static final int SLIDER_SIZE = 200;
-    private static final int SPACING = 40;
+    private static final int SLIDER_SIZE = 180;
+    private static final int SPACING = 20;
 
     @Override
     public String getName() { return NAME; }
diff --git a/styles/src/components/_pagination.scss b/styles/src/components/_pagination.scss
index 741abd2..9a2f322 100755
--- a/styles/src/components/_pagination.scss
+++ b/styles/src/components/_pagination.scss
@@ -2,6 +2,8 @@
 
 @use "../settings/icons";
 
+$button-radius: 10em !default;
+
 .pagination {
   -fx-padding: 0;
   -fx-arrow-button-gap: 4;
@@ -55,17 +57,17 @@
         -fx-spacing: 0;
 
         >.left-arrow-button {
-          -fx-background-radius: 10em;
+          -fx-background-radius: $button-radius;
           -fx-padding: 0 0.25em 0 0.083em; // center arrow inside the circle
         }
 
         >.right-arrow-button {
-          -fx-background-radius: 10em;
+          -fx-background-radius: $button-radius;
           -fx-padding: 0 0.083em 0 0.25em; // center arrow inside the circle
         }
 
         >.bullet-button {
-          -fx-background-radius: 0, 10em, 10em;
+          -fx-background-radius: 0, $button-radius, $button-radius;
           -fx-background-color: transparent, -color-border-default, -color-bg-subtle;
           -fx-background-insets: 0, 5, 6;
 
diff --git a/styles/src/components/_slider.scss b/styles/src/components/_slider.scss
index 4a29c7a..7559980 100755
--- a/styles/src/components/_slider.scss
+++ b/styles/src/components/_slider.scss
@@ -3,21 +3,25 @@
 @use "../settings/config" as cfg;
 @use "sass:math";
 
-$color-thumb:          if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
-$color-thumb-border:   $color-thumb           !default;
-$color-track:          -color-border-muted    !default;
-$color-track-progress: -color-accent-emphasis !default;
-$color-tick:           -color-fg-muted        !default;
+$color-thumb:              if(cfg.$darkMode, -color-fg-default, -color-accent-emphasis) !default;
+$color-thumb-border:       $color-thumb !default;
+$color-thumb-large:        if(cfg.$darkMode, $color-thumb, -color-fg-emphasis) !default;
+$color-thumb-large-border: if(cfg.$darkMode, $color-thumb, -color-accent-emphasis) !default;
+$color-track:              -color-border-muted    !default;
+$color-track-progress:     -color-accent-emphasis !default;
+$color-tick:               -color-fg-muted        !default;
 
-// this is padding ...
 $thumb-size: (
-  "small":  8px,
-  "medium": 10px,
-  "large":  12px
+  "small-h" : 8px,
+  "small-w" : 8px,
+  "medium-h": 10px,
+  "medium-w": 10px,
+  "large-h" : 12px,
+  "large-w" : 12px
 ) !default;
 
-// ... in combination with radius it can be converted to square or rectange
 $thumb-radius: 10em !default;
+$thumb-border-width: 2px !default;
 
 // visual track height (or width)
 $track-size: (
@@ -40,27 +44,14 @@ $tick-minor-size: 3px !default;
   -color-slider-tick:           $color-tick;
 
   &.large {
-    -color-slider-thumb:        if(cfg.$darkMode, $color-thumb, -color-fg-emphasis);
-    -color-slider-thumb-border: if(cfg.$darkMode, $color-thumb, -color-accent-emphasis);
+    -color-slider-thumb:        $color-thumb-large;
+    -color-slider-thumb-border: $color-thumb-large-border;
   }
 
   >.thumb {
     -fx-background-color: -color-slider-thumb-border, -color-slider-thumb;
     -fx-background-insets: 0, 2px;
     -fx-background-radius: $thumb-radius;
-    -fx-padding: map-get($thumb-size, "medium");
-  }
-
-  &.small {
-    >.thumb {
-      -fx-padding: map-get($thumb-size, "small");
-    }
-  }
-
-  &.large {
-    >.thumb {
-      -fx-padding: map-get($thumb-size, "large");
-    }
   }
 
   >.track {
@@ -95,39 +86,50 @@ $tick-minor-size: 3px !default;
 
   // center thumb over track horizontally
   &:horizontal {
+    >.thumb {
+      -fx-padding: map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w");
+    }
     >.track {
-      -fx-padding: map-get($thumb-size, "medium") 0 map-get($thumb-size, "medium") 0;
-      -fx-background-insets: 0, calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0
-                                calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0;
+      -fx-padding: map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h") 0;
+      -fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
+                                calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
     }
     >.progress {
       -fx-background-radius: $track-radius;
-      -fx-background-insets: 0, calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0
-                                calc(map-get($thumb-size, "medium") - map-get($track-size, "medium")) 0;
+      -fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
+                                calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
     }
   }
 
   &.small:horizontal {
+    >.thumb {
+      -fx-padding: map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w");
+    }
     >.track {
-      -fx-padding: map-get($thumb-size, "small") 0 map-get($thumb-size, "small") 0;
-      -fx-background-insets: 0, calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0
-                                calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0;
+      -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
+      -fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
+                                calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
     }
     >.progress {
-      -fx-padding: map-get($thumb-size, "small") 0 map-get($thumb-size, "small") 0;
-      -fx-background-insets: 0, calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0
-                                calc(map-get($thumb-size, "small") - map-get($track-size, "small")) 0;
+      -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
+      -fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
+                                calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
     }
   }
 
   &.large:horizontal {
+    >.thumb {
+      -fx-padding: map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "smlargeall-w");
+    }
     >.track {
-      -fx-padding: map-get($track-size, "large") 0 map-get($track-size, "large") 0;
-      -fx-background-insets: 0;
+      -fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
+      -fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
+                                calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
     }
     >.progress {
-      -fx-padding: map-get($track-size, "large") 0 map-get($track-size, "large") 0;
-      -fx-background-insets: 0;
+      -fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
+      -fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
+                                calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
     }
   }
 
@@ -137,39 +139,50 @@ $tick-minor-size: 3px !default;
 
   // center thumb over track vertically
   &:vertical {
+    >.thumb {
+      -fx-padding: map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h");
+    }
     >.track {
-      -fx-padding: 0 map-get($thumb-size, "medium") 0 map-get($thumb-size, "medium");
-      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium"))
-                                0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium"));
+      -fx-padding: 0 map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h");
+      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
+                                0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
     }
     >.progress {
       -fx-background-radius: $thumb-radius $thumb-radius $track-radius $track-radius;
-      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium"))
-                                0 calc(map-get($thumb-size, "medium") - map-get($track-size, "medium"));
+      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
+                                0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
     }
   }
 
   &.small:vertical {
+    >.thumb {
+      -fx-padding: map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h");
+    }
     >.track {
-      -fx-padding: 0 map-get($thumb-size, "small") 0 map-get($thumb-size, "small");
-      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small") - map-get($track-size, "small"))
-                                0 calc(map-get($thumb-size, "small") - map-get($track-size, "small"));
+      -fx-padding: 0 map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h");
+      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
+                                0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
     }
     >.progress {
-      -fx-padding: map-get($thumb-size, "small") 0 map-get($thumb-size, "small") 0;
-      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small") - map-get($track-size, "small"))
-                                0 calc(map-get($thumb-size, "small") - map-get($track-size, "small"));
+      -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
+      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
+                                0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
     }
   }
 
   &.large:vertical {
+    >.thumb {
+      -fx-padding: map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h");
+    }
     >.track {
-      -fx-padding: 0 map-get($track-size, "large") 0 map-get($track-size, "large");
-      -fx-background-insets: 0;
+      -fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
+      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
+                                0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
     }
     >.progress {
-      -fx-padding: 0 map-get($track-size, "large") 0 map-get($track-size, "large");
-      -fx-background-insets: 0;
+      -fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
+      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
+                                0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
     }
   }
 }
\ No newline at end of file
diff --git a/styles/src/nord-dark.scss b/styles/src/nord-dark.scss
index b712220..6c19a5e 100755
--- a/styles/src/nord-dark.scss
+++ b/styles/src/nord-dark.scss
@@ -151,13 +151,27 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
   $color-menubar-bg-hover: -color-base-7
 );
 
+@forward "components/pagination" as pagination-* with (
+  $button-radius: 1
+);
+
+@forward "components/slider" as slider-* with (
+  $thumb-size: (
+    "small-h": 8px, "medium-h": 10px, "large-h": 14px,
+    "small-w": 4px, "medium-w": 4px,  "large-w": 4px
+  ),
+  $track-size: ("small": 2px, "medium": 4px, "large": 12px),
+  $thumb-radius: 1,
+  $track-radius: 1
+);
+
 @forward "components/toolbar" as toolbar-* with (
   $color-bg-selected: -color-base-7
 );
 
 @forward "components/toggle-switch" as toggle-switch-* with (
-  $thumb-radius:       1px,
-  $thumb-area-radius:  1px,
+  $thumb-radius:       1,
+  $thumb-area-radius:  1,
   $thumb-padding:      0.8em,
   $thumb-area-padding: 0.8em 1.6em 0.8em 1.6em,
   $thumb-border-width: 3px
diff --git a/styles/src/nord-light.scss b/styles/src/nord-light.scss
index e6e944f..b0dee42 100755
--- a/styles/src/nord-light.scss
+++ b/styles/src/nord-light.scss
@@ -137,6 +137,22 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
 
 @use "general";
 
+@forward "components/pagination" as pagination-* with (
+  $button-radius: 1
+);
+
+@forward "components/slider" as slider-* with (
+  $color-thumb-large:        -color-accent-emphasis,
+  $color-thumb-large-border: -color-accent-emphasis,
+  $thumb-size: (
+    "small-h": 8px, "medium-h": 10px, "large-h": 14px,
+    "small-w": 4px, "medium-w": 4px,  "large-w": 4px
+  ),
+  $track-size: ("small": 2px, "medium": 4px, "large": 12px),
+  $thumb-radius: 0,
+  $track-radius: 0
+);
+
 @forward "components/toggle-switch" as toggle-switch-* with (
   $thumb-radius:       1px,
   $thumb-area-radius:  1px,