diff --git a/packages/@kws3/ui/controls/Steps.svelte b/packages/@kws3/ui/controls/Steps.svelte
new file mode 100644
index 000000000..a22eceedd
--- /dev/null
+++ b/packages/@kws3/ui/controls/Steps.svelte
@@ -0,0 +1,111 @@
+<!--
+  @component
+
+
+  @param {array} [steps=[]] - Array of steps, which contains the `value`, `name`, `description` and `step_icon` property for each step
+
+Steps are automatically “numbered” by default,
+unless overridden by what is in the `value` property inside the steps array, Default: `[]`
+  @param {number} [active_index=0] - Index used to determine which step is active, Default: `0`
+  @param {''|'small'|'medium'|'large'} [size=""] - Size of the steps, Default: `""`
+  @param {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'} [color=""] - Colour of the active steps, Default: `""`
+  @param {boolean} [clickable=false] - Determines If the steps are navigable by clicking on the steps themselves, Default: `false`
+  @param {boolean} [icon_only=false] - If `true`, then the steps will display the icon from the default `step_icon` property, or the `step_icon` value from within the `steps` array; instead of numbers, or `value` in the `steps` array, Default: `false`
+  @param {string} [step_icon="check"] - The default icon used in all steps when `icon_only` is `true` unless overridden by another `step_icon` property within the steps array, Default: `"check"`
+  @param {boolean} [have_step_value=true] - When `false`, the step circle will not display numbers or `value` or `step_icon`, and be empty instead, Default: `true`
+  @param {boolean} [filled_step=false] - Determines if active steps appearance is filled(inverted) or not, Default: `false`
+  @param {string} [style=""] - Inline CSS for the Steps container, Default: `""`
+  @param {string} [class=""] - CSS classes for the steps container, Default: `""`
+
+-->
+<ul class="steps {klass} is-{size}" {style}>
+  {#each steps as step, idx}
+    <li
+      class="step-item is-{color} {active_index >= idx && !filled_step
+        ? 'is-active'
+        : ''} {active_index >= idx && filled_step ? 'is-completed' : ''}"
+      on:click={() => navigateStep(idx)}
+      style={clickable ? "cursor:pointer;" : ""}>
+      <div class="step-marker">
+        {#if have_step_value}
+          {#if icon_only}
+            <Icon icon={step.step_icon ? step.step_icon : step_icon} />
+          {:else if step.value}
+            {step.value}
+          {:else}
+            {idx + 1}
+          {/if}
+        {/if}
+      </div>
+      {#if step.name || step.description}
+        <div class="step-details">
+          <p class="step-title">{step.name}</p>
+          {#if step.description}
+            <p>{step.description}</p>
+          {/if}
+        </div>
+      {/if}
+    </li>
+  {/each}
+</ul>
+
+<script>
+  import { Icon } from "@kws3/ui";
+  /**
+   * Array of steps, which contains the `value`, `name`, `description` and `step_icon` property for each step
+   *
+   * Steps are automatically “numbered” by default,
+unless overridden by what is in the `value` property inside the steps array
+   * @any
+   */
+  export let steps = [],
+    /**
+     * Index used to determine which step is active
+     */
+    active_index = 0,
+    /**
+     * Size of the steps
+     * @type {''|'small'|'medium'|'large'}
+     */
+    size = "",
+    /**
+     * Colour of the active steps
+     * @type {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'}
+     */
+    color = "",
+    /**
+     * Determines If the steps are navigable by clicking on the steps themselves
+     */
+    clickable = false,
+    /**
+     * If `true`, then the steps will display the icon from the default `step_icon` property, or the `step_icon` value from within the `steps` array; instead of numbers, or `value` in the `steps` array
+     */
+    icon_only = false,
+    /**
+     * The default icon used in all steps when `icon_only` is `true` unless overridden by another `step_icon` property within the steps array
+     */
+    step_icon = "check",
+    /**
+     * When `false`, the step circle will not display numbers or `value` or `step_icon`, and be empty instead
+     */
+    have_step_value = true,
+    /**
+     * Determines if active steps appearance is filled(inverted) or not
+     */
+    filled_step = false,
+    /**
+     * Inline CSS for the Steps container
+     */
+    style = "";
+
+  /**
+   * CSS classes for the steps container
+   */
+  let klass = "";
+  export { klass as class };
+
+  function navigateStep(index) {
+    if (!clickable) return;
+    active_index = index;
+  }
+</script>
diff --git a/packages/@kws3/ui/index.js b/packages/@kws3/ui/index.js
index 0cd9ed522..3472cb20f 100644
--- a/packages/@kws3/ui/index.js
+++ b/packages/@kws3/ui/index.js
@@ -46,3 +46,5 @@ export { default as TileView } from "./datagrid/TileView/TileView.svelte";
 export { default as DataSearch } from "./datagrid/DataSearch/DataSearch.svelte";
 export { default as Pagination } from "./datagrid/Pagination/Pagination.svelte";
 export { default as DataSort } from "./datagrid/DataSort/DataSort.svelte";
+
+export { default as Steps } from "./controls/Steps.svelte";
diff --git a/packages/@kws3/ui/styles/Steps.scss b/packages/@kws3/ui/styles/Steps.scss
new file mode 100644
index 000000000..6767b7c13
--- /dev/null
+++ b/packages/@kws3/ui/styles/Steps.scss
@@ -0,0 +1,190 @@
+$kws-steps-maker-default-color: $grey-light !default;
+$kws-steps-marker-default-border: 0.2em solid #fff !default;
+$kws-steps-default-color: $grey-lighter !default;
+$kws-steps-completed-color: $primary !default;
+$kws-steps-active-color: $primary !default;
+$kws-steps-divider-height: 0.2em !default;
+
+@mixin steps-size($size) {
+  font-size: $size;
+  min-height: $size * 2;
+
+  .step-item {
+    &:not(:first-child)::before {
+      height: $kws-steps-divider-height;
+      width: 100%;
+      bottom: 0;
+      left: -50%;
+      top: #{$size};
+    }
+    .step-marker {
+      height: $size * 2;
+      width: $size * 2;
+      position: absolute;
+      left: calc(50% - #{$size});
+      .icon {
+        * {
+          font-size: $size;
+        }
+      }
+    }
+    .step-details {
+      margin-top: $size * 2;
+      margin-left: 0.5em;
+      margin-right: 0.5em;
+      padding-top: 0.2em;
+      .step-title {
+        font-size: $size * 1.2;
+        font-weight: $weight-semibold;
+      }
+    }
+  }
+}
+.steps {
+  @include block;
+  display: flex;
+  flex-wrap: wrap;
+
+  .step-item {
+    margin-top: 0;
+    position: relative;
+    flex-grow: 1;
+    flex-basis: 0;
+    &:not(:first-child) {
+      flex-basis: 1em;
+      flex-grow: 1;
+      flex-shrink: 1;
+      &::before {
+        // This will contain the horizontal or vertical divider
+        content: " ";
+        display: block;
+        position: absolute;
+      }
+    }
+    &::before {
+      background: linear-gradient(
+        to left,
+        $kws-steps-default-color 50%,
+        $kws-steps-active-color 50%
+      );
+      background-size: 200% 100%;
+      background-position: right bottom;
+      .step-marker {
+        color: $white;
+      }
+    }
+    &.is-active {
+      &::before {
+        background-position: left bottom;
+      }
+      .step-marker {
+        background-color: $white;
+        border-color: $kws-steps-active-color;
+        color: $kws-steps-active-color;
+      }
+    }
+    &.is-completed {
+      &::before {
+        background-position: left bottom;
+      }
+      .step-marker {
+        color: $white;
+        background-color: $kws-steps-completed-color;
+      }
+    }
+    .step-marker {
+      align-items: center;
+      display: flex;
+      border-radius: 50%;
+      font-weight: $weight-bold;
+      justify-content: center;
+      background: $kws-steps-maker-default-color;
+      color: $white;
+      border: $kws-steps-marker-default-border;
+      z-index: 1;
+    }
+    .step-details {
+      text-align: center;
+    }
+    // Override marker color per step
+    @each $name, $pair in $colors {
+      $color: nth($pair, 1);
+      $color-invert: nth($pair, 2);
+      &.is-#{$name} {
+        &::before {
+          background: linear-gradient(
+            to left,
+            $kws-steps-default-color 50%,
+            $color 50%
+          );
+          background-size: 200% 100%;
+          background-position: right bottom;
+        }
+        &.is-active {
+          &::before {
+            background-position: left bottom;
+          }
+          .step-marker {
+            background-color: $white;
+            border-color: $color;
+            color: $color;
+          }
+        }
+        &.is-completed {
+          &::before {
+            background-position: left bottom;
+          }
+          .step-marker {
+            color: $color-invert;
+            background-color: $color;
+          }
+        }
+      }
+    }
+  }
+  .steps-content {
+    align-items: stretch;
+    flex-basis: 100%;
+    margin: 2rem 0;
+    .step-content {
+      display: none;
+      &.is-active {
+        display: block;
+      }
+    }
+  }
+  .steps-actions {
+    display: flex;
+    align-items: stretch;
+    flex-basis: 100%;
+    .steps-action {
+      display: flex;
+      flex-basis: 0;
+      flex-grow: 1;
+      margin: 0.5rem;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  &.is-animated {
+    .step-item {
+      &::before {
+        transition: all 2s ease;
+      }
+      .step-marker {
+        transition: all 0s ease;
+        transition-delay: 1.5s;
+      }
+    }
+  }
+  @include steps-size($size-normal);
+  &.is-small {
+    @include steps-size($size-small);
+  }
+  &.is-medium {
+    @include steps-size($size-medium);
+  }
+  &.is-large {
+    @include steps-size($size-large);
+  }
+}
diff --git a/src/scss/_steps.sass b/src/scss/_steps.sass
deleted file mode 100644
index d93e0b4ee..000000000
--- a/src/scss/_steps.sass
+++ /dev/null
@@ -1,347 +0,0 @@
-$steps-default-color: $grey-lighter !default
-$steps-completed-color: $success !default
-$steps-active-color: $primary !default
-$steps-horizontal-min-width: 10em !default
-$steps-vertical-min-height: 4em !default
-$steps-marker-size: 2 !default
-$steps-divider-size: .4em !default
-$steps-gap-size: .3rem !default
-$steps-hollow-border-size: .3em !default
-$steps-thin-divider-size: 1px !default
-$steps-thin-marker-size: .8em !default
-
-=steps-horizontal
-  +tablet
-    &:not(.is-vertical)
-      @content
-  &.is-horizontal
-    @content
-
-=steps-vertical
-  +mobile
-    &:not(.is-horizontal)
-      @content
-  &.is-vertical
-    @content
-
-=steps-all-segments
-  &.steps .steps-segment
-    @content
-
-=steps-active-segment
-  &.steps .steps-segment.is-active
-    @content
-
-=steps-inactive-segments
-  &.steps .steps-segment.is-active ~ .steps-segment
-    @content
-
-.steps
-  +block
-
-  .steps-segment
-    position: relative
-    &:not(:last-child):after
-      // This will contain the horizontal or vertical divider
-      content: " "
-      display: block
-      position: absolute
-
-  +steps-vertical
-    .steps-segment
-      display: block
-      &:not(:last-child)
-        min-height: $steps-vertical-min-height
-
-  +steps-horizontal
-    display: flex
-    .steps-segment:not(:last-child)
-      flex-basis: 1rem
-      flex-grow: 1
-      flex-shrink: 1
-
-    &.is-narrow
-      .steps-segment
-        flex-grow: 0
-        &:not(:last-child)
-          min-width: $steps-horizontal-min-width
-
-    &.is-narrow.is-centered
-      justify-content: center
-
-    &.is-narrow.is-right
-      justify-content: flex-end
-
-    &.has-content-centered
-      text-align: center
-
-    &.is-balanced, &.has-content-centered
-      .steps-segment:last-child
-        flex-basis: 1rem
-        flex-grow: 1
-        flex-shrink: 1
-
-    &.is-narrow.has-content-centered
-      .steps-segment:last-child
-        flex-grow: 0
-        min-width: $steps-horizontal-min-width
-
-    .steps-content.is-divider-content
-      text-align: center
-
-  // Marker style
-  .steps-marker
-    align-items: center
-    display: flex
-    border-radius: 50%
-    font-weight: $weight-bold
-    justify-content: center
-    // Position & z-index are needed to put it above the divider
-    position: relative
-    z-index: 10
-
-
-// Use a mixin to define all ratios in the same spot
-=steps-size($size)
-  font-size: $size
-
-  .steps-marker
-    height: $size * $steps-marker-size
-    width: $size * $steps-marker-size
-
-  +steps-vertical
-    // Draw a vertical divider
-    .steps-segment:not(:last-child):after
-      // top and bottom position is almost touching the inner side of a hollow border marker
-      bottom: -$steps-gap-size * 0.8
-      left: calc(#{$size * ($steps-marker-size / 2)} - (#{$steps-divider-size / 2}))
-      top: ($size * $steps-marker-size) - ($steps-gap-size * 0.8)
-      width: $steps-divider-size
-
-    // Align the content with the marker
-    .steps-content
-      margin-left: calc(#{$size * $steps-marker-size / 2} + .5em)
-      margin-top: -$size * $steps-marker-size
-      padding-left: 1em
-      padding-bottom: 1em
-
-    .steps-content.is-divider-content
-      margin-top: 0
-      padding-bottom: 0
-
-    &.has-content-centered
-      .steps-content
-        padding-top: calc(#{$size * $steps-marker-size / 2} - .5em)
-
-    &:not(.is-thin)
-      &.has-gaps .steps-segment, .steps-segment.has-gaps
-        &:not(:last-child):after
-          top: ($size * $steps-marker-size) + $steps-gap-size
-          bottom:  $steps-gap-size
-
-  +steps-horizontal
-    // Draw a horizontal divider
-    .steps-segment:not(:last-child):after
-      height: $steps-divider-size
-      // top and bottom position is almost touching the inner side of a hollow border marker
-      left: ($size * $steps-marker-size) - ($steps-gap-size * 0.8)
-      right: -$steps-gap-size * 0.8
-      top: calc(#{$size * ($steps-marker-size / 2)} - (#{$steps-divider-size / 2}))
-
-    // Align the content with the marker
-    .steps-content
-      margin-left: $size * $steps-marker-size / 2
-      &:not(:last-child)
-        margin-right: -$size * $steps-marker-size / 2
-
-      &.is-divider-content
-        margin-right: -$size * $steps-marker-size / 2
-        padding-left: 2em
-        padding-right: 2em
-
-    &.has-content-centered
-      .steps-segment:not(:last-child):after
-        left: 50%
-        right: -50%
-      .steps-marker
-        position: absolute
-        left: calc(50% - #{$size * $steps-marker-size / 2})
-      .steps-content
-        margin-top: ($size * $steps-marker-size) + 0.5rem
-        margin-left: .5em
-        margin-right: .5em
-        padding-top: .2em
-
-    &:not(.is-thin)
-      &.has-gaps .steps-segment, .steps-segment.has-gaps
-        &:not(:last-child):after
-          left: ($size * $steps-marker-size) + $steps-gap-size
-          right:  $steps-gap-size
-
-      &.has-content-centered
-        &.has-gaps .steps-segment, .steps-segment.has-gaps
-          &:not(:last-child):after
-            left: calc(50% + #{($size * $steps-marker-size / 2) + $steps-gap-size})
-            right: calc(-50% + #{($size * $steps-marker-size / 2) + $steps-gap-size})
-
-.steps
-  +steps-size($size-normal)
-
-.steps.is-small
-  +steps-size($size-small)
-
-.steps.is-medium
-  +steps-size($size-medium)
-
-.steps.is-large
-  +steps-size($size-large)
-
-
-// Divider Default Colors
-.steps-segment
-  &:after
-    background-color: $steps-completed-color
-
-  &.is-active
-    &:after
-      background-color: $steps-default-color
-
-  &.is-active ~ .steps-segment
-    &:after
-      background-color: $steps-default-color
-
-// Marker Default Colors
-.steps:not(.is-hollow)
-  .steps-marker:not(.is-hollow)
-    background-color: $steps-completed-color
-    color: findColorInvert($steps-completed-color)
-
-  .steps-segment.is-active
-    .steps-marker:not(.is-hollow)
-      background-color: $steps-active-color
-      color: findColorInvert($steps-active-color)
-
-  .steps-segment.is-active
-    & ~ .steps-segment .steps-marker:not(.is-hollow)
-      background-color: $steps-default-color
-      color: findColorInvert($steps-default-color)
-
-// Hollow style
-.steps.is-hollow .steps-marker,
-.steps-marker.is-hollow
-  border: $steps-hollow-border-size solid $steps-completed-color
-
-.steps.is-hollow .is-active .steps-marker,
-.steps .is-active .steps-marker.is-hollow
-  border-color: $steps-active-color
-
-.steps.is-hollow .steps-segment.is-active ~ .steps-segment .steps-marker,
-.steps-segment.is-active ~ .steps-segment .steps-marker.is-hollow
-  border-color: $steps-default-color
-
-// Override marker color per step
-@each $name, $pair in $colors
-  $color: nth($pair, 1)
-  $color-invert: nth($pair, 2)
-  .steps:not(.is-hollow) .steps-marker:not(.is-hollow)
-    &.is-#{$name}
-      background-color: $color !important
-      color: $color-invert !important
-
-  .steps.is-hollow .steps-marker,
-  .steps .steps-marker.is-hollow
-    &.is-#{$name}
-      border-color: $color !important
-
-
-// Divider dashed style
-=steps-divider-background($angle, $color, $size)
-  background: repeating-linear-gradient($angle, $color, $color $size, transparent $size, transparent #{$size * 2})
-.steps
-  +steps-vertical
-    &.is-dashed .steps-segment, .steps-segment.is-dashed
-      &:after
-        +steps-divider-background(0deg, $steps-completed-color, 5px)
-
-    &.is-dashed .steps-segment.is-active,
-    &.is-dashed .steps-segment.is-active ~ .steps-segment,
-    .steps-segment.is-active.is-dashed,
-    .steps-segment.is-active ~ .steps-segment.is-dashed
-      &:after
-        +steps-divider-background(0deg, $steps-default-color, 5px)
-
-  +steps-horizontal
-    &.is-dashed .steps-segment,
-    .steps-segment.is-dashed
-      &:after
-        +steps-divider-background(90deg, $steps-completed-color, 10px)
-
-    // the active segment and any subsequent segment get the default colot
-    &.is-dashed .steps-segment.is-active,
-    &.is-dashed .steps-segment.is-active ~ .steps-segment,
-    .steps-segment.is-active.is-dashed,
-    .steps-segment.is-active ~ .steps-segment.is-dashed
-      &:after
-        +steps-divider-background(90deg, $steps-default-color, 10px)
-
-// Thin modifier
-.steps.is-thin
-  .steps-marker
-    width: $steps-thin-marker-size
-    height: $steps-thin-marker-size
-  &.is-hollow .steps-marker,
-  .steps-marker.is-hollow
-    border-width: $steps-thin-divider-size
-    height: calc(#{$steps-thin-marker-size} + #{$steps-thin-divider-size})
-    width: calc(#{$steps-thin-marker-size} + #{$steps-thin-divider-size})
-
-  +steps-vertical
-    .steps-segment
-      &:not(:last-child):after
-        bottom: 0
-        left: calc(#{$steps-thin-marker-size / 2} - #{$steps-thin-divider-size / 2})
-        top: $steps-thin-marker-size
-        width: $steps-thin-divider-size
-
-    .steps-content
-      margin-top: -$steps-thin-marker-size * 1.5
-      margin-left: $steps-thin-marker-size
-
-    &.has-gaps .steps-segment, .steps-segment.has-gaps
-      &:not(:last-child):after
-        bottom: $steps-thin-marker-size / 2
-        top: $steps-thin-marker-size * 1.5
-
-    &.has-content-centered
-      .steps-content
-        padding-top: $steps-thin-marker-size * 2
-
-  +steps-horizontal
-    .steps-segment
-      &:not(:last-child):after
-        left: $steps-thin-marker-size
-        right: 0
-        top: calc(#{$steps-thin-marker-size / 2} - #{$steps-thin-divider-size / 2})
-        height: $steps-thin-divider-size
-
-    .steps-content
-      margin-top: $steps-thin-marker-size
-
-    &.has-content-centered
-      .steps-segment
-        &:not(:last-child):after
-          left: calc(50% + #{$steps-thin-marker-size / 2})
-          right: calc(-50% + #{$steps-thin-marker-size / 2})
-      .steps-marker
-        position: absolute
-        left: calc(50% - #{$steps-thin-marker-size / 2})
-
-    &.has-gaps .steps-segment, .steps-segment.has-gaps
-      &:not(:last-child):after
-        left: $steps-thin-marker-size * 1.5
-        right: $steps-thin-marker-size / 2
-
-    &.has-content-centered.has-gaps .steps-segment, &.has-content-centered .steps-segment.has-gaps
-      &:not(:last-child):after
-        left: calc(50% + #{($steps-thin-marker-size / 2) + ($steps-thin-marker-size / 2)})
-        right: calc(-50% + #{($steps-thin-marker-size / 2) + ($steps-thin-marker-size / 2)})
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 2bad8bf72..56135dffe 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -13,7 +13,7 @@
 @import "_variables";
 //bulma itself
 @import "../../node_modules/bulma/bulma";
-@import "_steps.sass";
+
 html {
   overflow-x: scroll;
 }
@@ -102,6 +102,9 @@ pre.prismjs > code {
 //Tooltip
 @import "../../packages/@kws3/ui/styles/Tooltip.scss";
 
+//Steps
+@import "../../packages/@kws3/ui/styles/Steps.scss";
+
 // #stepsHolder{
 //   padding-top: 1.2rem;
 //   overflow: auto;
diff --git a/src/stories/controls/Steps/steps.stories.mdx b/src/stories/controls/Steps/steps.stories.mdx
new file mode 100644
index 000000000..ba74945bd
--- /dev/null
+++ b/src/stories/controls/Steps/steps.stories.mdx
@@ -0,0 +1,102 @@
+import { Story, Preview, Meta, ArgsTable, Source, Description, Canvas  } from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import { Steps } from '@kws3/ui';
+import { action } from '@storybook/addon-actions';
+
+export let args={
+  steps : [
+    {
+      "name": "Step One",
+      "description" : "Description 1"
+    },
+    {
+      "name": "Step Two",
+      "description" : "Description 2"
+    },
+    {
+      "name": "Step Three",
+      "description" : "Description 3"
+    },
+    {
+      "value" : "F",
+      "name" : "Finish",
+      "description" : "Icon and Value from steps array",
+      "step_icon" : "flag"
+    }
+  ],
+  active_index : 0,
+  size : "",
+  color : "",
+  clickable : true,
+  icon_only : false,
+  step_icon : "check",
+  have_step_value:true,
+  filled_step : false,
+  class : "",
+  style : ""
+};
+
+<Meta
+  title="Forms/Steps"
+  component={Steps}
+  args={args}
+  argTypes={{
+  color: {
+    control: 'select'
+  },
+  size: {
+    control: 'select'
+  }
+}}
+/>
+
+<Description markdown={dedent`
+# Steps
+## Display steps for a process
+`}/>
+
+<Canvas>
+  <Story
+  name="Steps"
+  args={args}
+  >
+  {(args) => ({
+    Component: Steps,
+    props: args,
+  })}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Steps" />
+
+### Usage
+#### Import the component:
+<Source
+  language="javascript"
+  code={
+    dedent`import { Steps } from '@kws3/ui';`
+  }
+/>
+
+#### Import the SCSS:
+<Source
+  language="javascript"
+  code={
+    dedent`@import '@kws3/ui/styles/Steps.scss';`
+  }
+/>
+
+#### SCSS customization variables with default values:
+<Source
+  language="css"
+  code={
+    dedent`
+      $kws-steps-maker-default-color: $grey-light !default;
+      $kws-steps-marker-default-border: 0.2em solid #fff !default;
+      $kws-steps-default-color: $grey-lighter !default;
+      $kws-steps-completed-color: $primary !default;
+      $kws-steps-active-color: $primary !default;
+      $kws-steps-divider-height: 0.2em !default;
+    `
+  }
+/>
diff --git a/src/stories/slidingpane/Slidingpane.svelte b/src/stories/slidingpane/Slidingpane.svelte
index f81c7ef22..dbcbfa156 100644
--- a/src/stories/slidingpane/Slidingpane.svelte
+++ b/src/stories/slidingpane/Slidingpane.svelte
@@ -5,19 +5,13 @@
       inner_style="border-width:0"
       style="margin: -1rem -1.3rem -0.8rem;">
       <div id="stepsHolder">
-        <ul class="steps has-content-centered is-horizontal">
-          {#each steps as step, idx}
-            <li
-              class="steps-segment {active_index == idx ? 'is-active' : ''}"
-              on:click={() => activateStep(idx)}
-              style="cursor:pointer;">
-              <span class="steps-marker">{idx + 1}</span>
-              <div class="steps-content">
-                <p>{steps[active_index].name}</p>
-              </div>
-            </li>
-          {/each}
-        </ul>
+        <Steps
+          {steps}
+          bind:active_index
+          size="small"
+          color="success"
+          clickable={true}
+          icon_only={true} />
       </div>
     </Message>
   </div>
@@ -145,7 +139,7 @@
 
 <script>
   import { onMount } from "svelte";
-  import { SlidingPane, SlidingPaneSet, Icon, Message } from "@kws3/ui";
+  import { SlidingPane, SlidingPaneSet, Steps, Icon, Message } from "@kws3/ui";
   export let pane_height = 150,
     style = "",
     v_center = true,