diff --git a/src/POSComponents/IosTab/GListCustom.vue b/src/POSComponents/IosTab/GListCustom.vue
new file mode 100644
index 00000000..f42a9747
--- /dev/null
+++ b/src/POSComponents/IosTab/GListCustom.vue
@@ -0,0 +1,98 @@
+<script>
+  import GList from "../../components/GList/GList";
+  import { GListItemAction } from "../../components/GList/GListFunctionalComponent"
+  export default {
+    name: 'GListCustom',
+    components: {GList, GListItemAction},
+    props: {
+      height: String,
+      width: String,
+      disabled: Boolean,
+      rounded: Boolean,
+      shaped: Boolean,
+      elevation: {
+        type: [Number, String],
+        default: 2,
+      },
+      dense: Boolean,
+      nav: Boolean,
+      items: Array,
+      multiSection: Boolean,
+      subheader: String,
+      divider: {
+        type: [Boolean, String],
+        default: false,
+      },
+      prependType: {
+        type: String,
+        default: 'icon',
+      },
+      subtitleWrap: Boolean,
+      value: [String, Object, Number, Array],
+      selectable: Boolean,
+      multiple: Boolean,
+      mandatory: Boolean,
+      allowDuplicates: Boolean,
+      itemValue: String,
+      itemTitle: {
+        type: String,
+        default: 'title'
+      },
+    },
+    setup(props, context) {
+      return () => (
+          <g-list {...{
+            props,
+            scopedSlots: {
+              append: ({item, index}) => (
+                  <g-list-item-action class="g-list-item-action" item={item}>{item.append}</g-list-item-action>
+              )
+            }
+          }
+          }>
+          </g-list>
+      )
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .g-list {
+    padding: 0;
+    border: 1px solid #D1D1D1;
+    border-radius: 4px;
+  }
+
+  ::v-deep .g-list-item-content {
+    margin-left: 0;
+    align-self: flex-start;
+    .g-list-item-text__sub {
+      font-family: "Muli", sans-serif;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 13px;
+    }
+  }
+
+  ::v-deep .g-list-item-action {
+    margin: 0 0 0 16px;
+    align-self: flex-start;
+  }
+
+  ::v-deep .g-list-item {
+    padding: 18px 27px 18px 27px;
+  }
+
+  ::v-deep .g-list-header {
+    padding: 0 0 0 26px;
+    font-family: "Muli" , sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 13px;
+    line-height: 16px;
+    color: #1D1D26;
+    background: #D8D8D8;
+    border-radius: 3px 3px 0 0;
+    align-items: center;
+  }
+</style>
diff --git a/src/POSComponents/IosTab/IosTab.vue b/src/POSComponents/IosTab/IosTab.vue
new file mode 100644
index 00000000..98e07afd
--- /dev/null
+++ b/src/POSComponents/IosTab/IosTab.vue
@@ -0,0 +1,106 @@
+<script>
+  import GTabs from "../../components/GTabs/GTabs";
+  import GTabItem from "../../components/GTabs/GTabItem";
+  import GTab from "../../components/GTabs/GTab";
+  import getVModel from "../../mixins/getVModel";
+
+  export default {
+  name: 'IosTab',
+  components: {GTab, GTabItem, GTabs},
+  props: {
+    items: Array,
+    value: null,
+    color: String,
+    textColor: String,
+    grow: Boolean,
+    sliderColor: String,
+    sliderSize: {
+      type: [Number, String],
+      default: 2
+    },
+    vertical: Boolean,
+    right: Boolean,
+    center: Boolean,
+    centerActive: Boolean,
+    icon: Boolean,
+    alignWithTitle: Boolean,
+  },
+  setup(props, context) {
+    const model = getVModel(props, context);
+    const gTabItems = () => props.items.map((item, index) => {
+      return (
+        <g-tab-item key={index} item={item}>
+          {item.title}
+        </g-tab-item>
+      )
+    });
+
+    return () => (
+      <g-tabs {
+        ...{
+          props: {
+            ...props,
+            ripple: false,
+            sliderColor: '#1271FF',
+            slideTransHorLeft: 'left 0.3s, right 0.3s',
+            slideTransHorRight: 'left 0.3s, right 0.3s',
+            sliderBorderColor: '29px',
+            sliderZindex: '-2',
+            sliderTop: '0px',
+            sliderHeight: '32px',
+          },
+          on: {
+            input(e) {
+              model.value = e
+            }
+          },
+          scopedSlots: {
+            tab: ({item, index}) => (
+                  <g-tab item={item} key={index} >{item.title}</g-tab>
+            )
+          }
+        }
+      }
+      >
+        {context.slots.default ? context.slots.default() : gTabItems()}
+      </g-tabs>
+    )
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "../../style/colors";
+  @import "../../style/variables";
+  .g-tabs-wrapper {
+    align-items: center;
+  }
+  ::v-deep .g-tab-items {
+    margin: 17px 0;
+    width: auto;
+  }
+  ::v-deep .g-tabs-bar {
+    mix-blend-mode: normal;
+    width: 261px;
+    min-height: 32px;
+    border-radius: 29px;
+    font-family: "Muli", sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 13px;
+    line-height: 16px;
+    text-align: center;
+  }
+  ::v-deep .g-tab {
+    flex-basis: 100%;
+    border-radius: 29px;
+    text-transform: none;
+    &:hover:before {
+      opacity: 0;
+    }
+    &:not(.g-tab__active):not(.g-tab__disabled) {
+      color: color("grey", "base");
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/src/POSComponents/IosTab/__story__/IosTab.stories.js b/src/POSComponents/IosTab/__story__/IosTab.stories.js
new file mode 100644
index 00000000..08bd7578
--- /dev/null
+++ b/src/POSComponents/IosTab/__story__/IosTab.stories.js
@@ -0,0 +1,562 @@
+import {withKnobs, text, boolean, number} from '@storybook/addon-knobs';
+import IosTab from '../IosTab';
+import GList from "../../../components/GList/GList";
+import GTabItemWebAnimation from "../../../components/GTabs/GTabItemWebAnimation";
+import GTabItemVueAnimation from "../../../components/GTabs/GTabItemVueAnimation";
+import GTabItem from "../../../components/GTabs/GTabItem";
+import GListCustom from '../GListCustom';
+
+export default {
+  title: 'IosTab',
+  decorators: [withKnobs]
+}
+
+export const tab = () => ({
+  components: {IosTab, GList, GListCustom, GTabItemWebAnimation, GTabItemVueAnimation, GTabItem},
+  data() {
+    return {
+      items: [
+        {
+          title: 'By Month',
+          icon: 'month',
+          subheader: '2019',
+          list: [
+            {
+              title: 'September',
+              subtitle: '25 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'August',
+              subtitle: '32 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'July',
+              subtitle: '52 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'June',
+              subtitle: '72 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'May',
+              subtitle: '35 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'April',
+              subtitle: '73 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'March',
+              subtitle: '43 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'February',
+              subtitle: '45 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'January',
+              subtitle: '15 Sales',
+              append: '€ 542.742,06'
+            }
+          ]
+        },
+        {
+          title: 'By Day',
+          icon: 'day',
+          subheader: '2019',
+          list: [
+            {
+              title: 'August',
+              subtitle: '25 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'September',
+              subtitle: '32 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'July',
+              subtitle: '52 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'June',
+              subtitle: '72 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'May',
+              subtitle: '35 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'April',
+              subtitle: '73 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'March',
+              subtitle: '43 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'February',
+              subtitle: '45 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'January',
+              subtitle: '15 Sales',
+              append: '€ 542.742,06'
+            }
+          ]
+        },
+      ],
+      model: null,
+    }
+  },
+  created() {
+    this.model = this.items[0]
+  },
+  props: {
+    color: {
+      type: String,
+      default: text('Color', '#D8D8D8')
+    },
+    textColor: {
+      type: String,
+      default: text('Text Color', 'white')
+    },
+    vertical: {
+      type: Boolean,
+      default: boolean('Vertical', false)
+    },
+    right: {
+      type: Boolean,
+      default: boolean('Right', false)
+    },
+    center: {
+      type: Boolean,
+      default: boolean('Center', false)
+    },
+    centerActive: {
+      default: boolean('Center active tab', true)
+    },
+    grow: {
+      type: Boolean,
+      default: boolean('Grow', false)
+    },
+    icon: {
+      type: Boolean,
+      default: boolean('Show icon', false)
+    },
+    sliderSize: {
+      type: Number,
+      default: number('Slider Size', 2)
+    },
+    sliderColor: {
+      type: String,
+      default: text('Slider Color', 'currentColor')
+    },
+  },
+  template: `
+    <ios-tab 
+      v-model="model" 
+      :items="items" 
+      :color="color" 
+      :text-color="textColor" 
+      :vertical="vertical"
+      :right="right" 
+      :center="center"
+      :center-active="centerActive"
+      :grow="grow"
+      :icon="icon"
+      :slider-size="sliderSize"
+      :slider-color="sliderColor"
+      >
+      <g-tab-item v-for="tabItem in items" :item="tabItem">
+        <g-list-custom :items="tabItem.list" :subheader="tabItem.subheader">
+        </g-list-custom>
+      </g-tab-item>
+    </ios-tab>
+  `,
+});
+
+export const tabVueAnimation = () => ({
+  components: {IosTab, GList, GListCustom, GTabItemWebAnimation, GTabItemVueAnimation, GTabItem},
+  data() {
+    return {
+      items: [
+        {
+          title: 'By Month',
+          icon: 'month',
+          subheader: '2019',
+          list: [
+            {
+              title: 'September',
+              subtitle: '25 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'August',
+              subtitle: '32 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'July',
+              subtitle: '52 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'June',
+              subtitle: '72 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'May',
+              subtitle: '35 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'April',
+              subtitle: '73 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'March',
+              subtitle: '43 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'February',
+              subtitle: '45 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'January',
+              subtitle: '15 Sales',
+              append: '€ 542.742,06'
+            }
+          ]
+        },
+        {
+          title: 'By day',
+          icon: 'day',
+          subheader: '2019',
+          list: [
+            {
+              title: 'August',
+              subtitle: '25 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'September',
+              subtitle: '32 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'July',
+              subtitle: '52 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'June',
+              subtitle: '72 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'May',
+              subtitle: '35 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'April',
+              subtitle: '73 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'March',
+              subtitle: '43 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'February',
+              subtitle: '45 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'January',
+              subtitle: '15 Sales',
+              append: '€ 542.742,06'
+            }
+          ]
+        },
+      ],
+      model: null,
+    }
+  },
+  created() {
+    this.model = this.items[0]
+  },
+  props: {
+    color: {
+      type: String,
+      default: text('Color', '#D8D8D8')
+    },
+    textColor: {
+      type: String,
+      default: text('Text Color', 'white')
+    },
+    vertical: {
+      type: Boolean,
+      default: boolean('Vertical', false)
+    },
+    right: {
+      type: Boolean,
+      default: boolean('Right', false)
+    },
+    center: {
+      type: Boolean,
+      default: boolean('Center', false)
+    },
+    centerActive: {
+      default: boolean('Center active tab', true)
+    },
+    grow: {
+      type: Boolean,
+      default: boolean('Grow', false)
+    },
+    icon: {
+      type: Boolean,
+      default: boolean('Show icon', false)
+    },
+    sliderSize: {
+      type: Number,
+      default: number('Slider Size', 2)
+    },
+    sliderColor: {
+      type: String,
+      default: text('Slider Color', 'currentColor')
+    },
+  },
+  template: `
+    <ios-tab 
+      v-model="model" 
+      :items="items" 
+      :color="color" 
+      :text-color="textColor" 
+      :vertical="vertical"
+      :right="right" 
+      :center="center"
+      :center-active="centerActive"
+      :grow="grow"
+      :icon="icon"
+      :slider-size="sliderSize"
+      :slider-color="sliderColor"
+      >
+      <g-tab-item-vue-animation v-for="tabItem in items" :item="tabItem">
+        <g-list-custom :items="tabItem.list" :subheader="tabItem.subheader">
+        </g-list-custom>
+      </g-tab-item-vue-animation>
+    </ios-tab>
+  `,
+});
+
+export const tabWebAnimation = () => ({
+  components: {IosTab, GList, GListCustom, GTabItemWebAnimation, GTabItemVueAnimation, GTabItem},
+  data() {
+    return {
+      items: [
+        {
+          title: 'By Month',
+          icon: 'month',
+          subheader: '2019',
+          list: [
+            {
+              title: 'September',
+              subtitle: '25 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'August',
+              subtitle: '32 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'July',
+              subtitle: '52 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'June',
+              subtitle: '72 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'May',
+              subtitle: '35 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'April',
+              subtitle: '73 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'March',
+              subtitle: '43 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'February',
+              subtitle: '45 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'January',
+              subtitle: '15 Sales',
+              append: '€ 542.742,06'
+            }
+          ]
+        },
+        {
+          title: 'By Day',
+          icon: 'day',
+          subheader: '2019',
+          list: [
+            {
+              title: 'August',
+              subtitle: '25 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'September',
+              subtitle: '32 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'July',
+              subtitle: '52 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'June',
+              subtitle: '72 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'May',
+              subtitle: '35 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'April',
+              subtitle: '73 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'March',
+              subtitle: '43 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'February',
+              subtitle: '45 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'January',
+              subtitle: '15 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'February',
+              subtitle: '45 Sales',
+              append: '€ 542.742,06'
+            },
+            {
+              title: 'January',
+              subtitle: '15 Sales',
+              append: '€ 542.742,06'
+            }
+          ]
+        },
+      ],
+      model: null,
+    }
+  },
+  created() {
+    this.model = this.items[0]
+  },
+  props: {
+    color: {
+      type: String,
+      default: text('Color', '#D8D8D8')
+    },
+    textColor: {
+      type: String,
+      default: text('Text Color', 'white')
+    },
+    vertical: {
+      type: Boolean,
+      default: boolean('Vertical', false)
+    },
+    right: {
+      type: Boolean,
+      default: boolean('Right', false)
+    },
+    center: {
+      type: Boolean,
+      default: boolean('Center', false)
+    },
+    centerActive: {
+      default: boolean('Center active tab', true)
+    },
+    grow: {
+      type: Boolean,
+      default: boolean('Grow', false)
+    },
+    icon: {
+      type: Boolean,
+      default: boolean('Show icon', false)
+    },
+    sliderSize: {
+      type: Number,
+      default: number('Slider Size', 2)
+    },
+    sliderColor: {
+      type: String,
+      default: text('Slider Color', 'currentColor')
+    },
+  },
+  template: `
+    <ios-tab 
+      v-model="model" 
+      :items="items" 
+      :color="color" 
+      :text-color="textColor" 
+      :vertical="vertical"
+      :right="right" 
+      :center="center"
+      :center-active="centerActive"
+      :grow="grow"
+      :icon="icon"
+      :slider-size="sliderSize"
+      :slider-color="sliderColor"
+      >
+      <g-tab-item-web-animation v-for="tabItem in items" :item="tabItem">
+        <g-list-custom :items="tabItem.list" :subheader="tabItem.subheader">
+        </g-list-custom>
+      </g-tab-item-web-animation>
+    </ios-tab>
+  `,
+});
\ No newline at end of file
diff --git a/src/components/GTabs/GTab.vue b/src/components/GTabs/GTab.vue
index a62df2d7..389975e3 100644
--- a/src/components/GTabs/GTab.vue
+++ b/src/components/GTabs/GTab.vue
@@ -22,7 +22,6 @@
     setup(props, context) {
       const model = inject('model', null);
       const isActive = computed(() => (model && isEqual(model.value, props.item)));
-
       const classes = computed(() => ({
         'g-tab': true,
         'waves-effect': props.ripple,
diff --git a/src/components/GTabs/GTabItem.vue b/src/components/GTabs/GTabItem.vue
index b1e4f959..13a2255e 100644
--- a/src/components/GTabs/GTabItem.vue
+++ b/src/components/GTabs/GTabItem.vue
@@ -12,11 +12,11 @@
       const _transition = inject('transition');
 
       return () =>
-        <transition name={_transition.value}>
-          <div vShow={show.value} className="g-tab-item">
-            {context.slots.default()}
-          </div>
-        </transition>
+          <transition name={_transition.value}>
+            <div vShow={show.value} className="g-tab-item">
+              {context.slots.default()}
+            </div>
+          </transition>
     }
   }
 </script>
diff --git a/src/components/GTabs/GTabItemVueAnimation.vue b/src/components/GTabs/GTabItemVueAnimation.vue
new file mode 100644
index 00000000..8b75c5ad
--- /dev/null
+++ b/src/components/GTabs/GTabItemVueAnimation.vue
@@ -0,0 +1,76 @@
+<script>
+  import { computed, inject } from '@vue/composition-api'
+
+  export default {
+    name: 'GTabItemVueAnimation',
+    props: {
+      item: null
+    },
+    setup(props, context) {
+      const model = inject('model');
+      const show = computed(() => (model.value === props.item));
+      const transitionDirection = inject('transition');
+
+      function onBeforeEnter(el) {
+        el.style.width = '100%';
+        if(transitionDirection.value.includes('reverse')){
+          el.style.transform = 'translateX(-101%)';
+        } else {
+          el.style.transform = 'translateX(101%)';
+        }
+      }
+
+      function onEnter(el, done) {
+        el.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
+        el.style.transitionDuration = '0.3s';
+        setTimeout(() => {
+          el.style.transform = 'translateX(0)';
+          done();
+        }, 30);
+      }
+
+      function onBeforeLeave(el) {
+        el.style.transform = 'translateX(0)';
+      }
+
+      function onLeave(el, done) {
+        el.style.width = '100%';
+        if(transitionDirection.value.includes('reverse')) {
+          el.style.transform = 'translateX(100%)';
+        } else {
+          el.style.transform = 'translateX(-100%)';
+        }
+        el.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
+        el.style.transitionDuration = '0.3s';
+        // setTimeout(() => {
+        done();
+        // }, 300);
+      }
+
+      function renderContent() {
+        if(show.value) {
+          return (
+            <div class="g-tab-item">
+              {context.slots.default()}
+            </div>
+          )
+        }
+      }
+
+      return () => (
+          <transition
+            vOn:before-enter={onBeforeEnter}
+            vOn:enter={onEnter}
+            vOn:before-leave={onBeforeLeave}
+            vOn:leave={onLeave}
+          >
+            {renderContent()}
+          </transition>
+      )
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/GTabs/GTabItemWebAnimation.vue b/src/components/GTabs/GTabItemWebAnimation.vue
new file mode 100644
index 00000000..564f41b8
--- /dev/null
+++ b/src/components/GTabs/GTabItemWebAnimation.vue
@@ -0,0 +1,74 @@
+<script>
+  import { watch, computed, inject } from '@vue/composition-api'
+
+  export default {
+    name: 'GTabItemWebAnimation',
+    props: {
+      item: null
+    },
+    setup(props, context) {
+      const model = inject('model');
+      const transitionDirection = inject('transition');
+      const show = computed(() => (model.value === props.item));
+
+      watch(
+          () => model.value,
+          () => {
+            animate();
+          },
+          { lazy: true}
+      );
+
+      function animate() {
+        context.root.$nextTick(() => {
+          if(transitionDirection.value.includes('reverse')) {
+            context.refs.itemRef && context.refs.itemRef.animate(
+                [
+                  {
+                    transform: 'translateX(-100%)',
+                  },
+                  {
+                    transform: 'translateX(0)',
+                  }
+                ],
+                {
+                  duration: 300,
+                  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                }
+            );
+          } else {
+            context.refs.itemRef && context.refs.itemRef.animate(
+                [
+                  {
+                    transform: 'translateX(100%)'
+                  },
+                  {
+                    transform: 'translateX(0)'
+                  }
+                ],
+                {
+                  duration: 300,
+                  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                }
+            );
+          }
+        })
+      }
+
+      const renderContent = () => {
+          return (
+            show.value && <div ref="itemRef" class="g-tab-item">
+                            {context.slots.default()}
+                          </div>
+          )
+      };
+
+      return {
+        renderContent
+      }
+    },
+    render(h) {
+      return this.renderContent()
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/components/GTabs/GTabItems.vue b/src/components/GTabs/GTabItems.vue
index f5eeeecd..d0c843f7 100644
--- a/src/components/GTabs/GTabItems.vue
+++ b/src/components/GTabs/GTabItems.vue
@@ -9,8 +9,8 @@
       value: null
     },
     setup(props, context) {
-      const model = inject('model', getVModel(props, context))
-      const items = inject('items', props.items)
+      const model = inject('model', getVModel(props, context));
+      const items = inject('items', props.items);
       provide('model', model);
 
       const transition = ref('g-tab-transition');
@@ -24,7 +24,7 @@
         } else {
           transition.value = 'g-tab-transition';
         }
-      }, { flush: 'pre' })
+      }, { flush: 'pre' });
 
       return () =>
         <div class="g-tab-items">
@@ -38,7 +38,6 @@
 	.g-tab-items {
 		contain: layout;
 		flex: 1 1 auto;
-		z-index: -1;
 		overflow: hidden;
 	}
 </style>
\ No newline at end of file
diff --git a/src/components/GTabs/GTabs.vue b/src/components/GTabs/GTabs.vue
index 8e30289e..6bbcb510 100644
--- a/src/components/GTabs/GTabs.vue
+++ b/src/components/GTabs/GTabs.vue
@@ -27,21 +27,47 @@
         type: [Number, String],
         default: 2
       },
+      slideTransHorLeft: {
+        type: String,
+        default: 'left 0.5s, right 1s'
+      },
+      slideTransHorRight: {
+        type: String,
+        default: 'left 1s, right 0.5s'
+      },
+      sliderBorderColor: {
+        type: String,
+        default: '0'
+      },
+      sliderZindex: {
+        type: String,
+      },
+      sliderTop: {
+        type: String,
+        default: '46px'
+      },
+      sliderHeight: {
+        type: String,
+        default: '2px'
+      },
       vertical: Boolean,
       right: Boolean,
       center: Boolean,
       centerActive: Boolean,
       icon: Boolean,
       alignWithTitle: Boolean,
+      showSlider: {
+        type: Boolean,
+        default: true
+      }
     },
     setup(props, context) {
       const model = getVModel(props, context);
-
       if (!model.value) {
         model.value = props.items.find(item => !item.disabled);
       }
       provide('model', model);
-      provide('items', props.items)
+      provide('items', props.items);
 
       const { getColorType, convertColorClass } = colorHandler();
 
@@ -70,26 +96,28 @@
 
       const sliderStyles = reactive({
         'width': '90px',
-        'height': '2px',
-        'top': '46px',
+        'height': props.sliderHeight,
+        'top': props.sliderTop,
         'right': 'auto',
         'left': '0',
         'bottom': 'auto',
         'background-color': 'currentColor',
-        'transition': 'left 1s, right 0.5s'
+        'border-radius': props.sliderBorderColor,
+        'transition': 'left 1s, right 0.5s',
+        'z-index': props.sliderZindex ? props.sliderZindex : '0'
       });
 
       function calculateSliderStyle() {
-        if (!itemsRef.value) return
-        const children = itemsRef.value.querySelector('.g-slide-group__content').children
+        if (!itemsRef.value) return;
+        const children = itemsRef.value.querySelector('.g-slide-group__content').children;
         const activeTab = find(children, i => i.classList.contains('g-tab__active'));
         sliderStyles.width = convertToUnit(props.vertical ? props.sliderSize : 'auto');
-        sliderStyles.height = convertToUnit(props.vertical ? activeTab.offsetHeight : props.sliderSize);
-        sliderStyles.top = convertToUnit(props.vertical ? activeTab.offsetTop : (activeTab.offsetHeight - props.sliderSize));
+        sliderStyles.height = convertToUnit(props.vertical ? activeTab.offsetHeight : (props.sliderHeight ? props.sliderHeight : props.sliderSize));
+        sliderStyles.top = convertToUnit(props.vertical ? activeTab.offsetTop : (props.sliderTop ? props.sliderTop : (activeTab.offsetHeight - props.sliderSize)));
 
-        const parent = context.refs.itemsRef.querySelector('.g-slide-group__content')
-        sliderStyles.left = convertToUnit(activeTab.offsetLeft)
-        sliderStyles.right = convertToUnit(parent.offsetWidth - activeTab.offsetWidth - activeTab.offsetLeft)
+        const parent = context.refs.itemsRef.querySelector('.g-slide-group__content');
+        sliderStyles.left = convertToUnit(activeTab.offsetLeft);
+        sliderStyles.right = convertToUnit(parent.offsetWidth - activeTab.offsetWidth - activeTab.offsetLeft);
 
         sliderStyles['background-color'] = props.sliderColor
           ? (getColorType(props.sliderColor) === 'style'
@@ -98,8 +126,18 @@
           : 'currentColor';
       }
 
-      const itemsRef = ref(null)
-      watch(() => [itemsRef.value, props.grow, props.right, props.center, props.vertical, props.sliderSize, props.sliderColor, props.alignWithTitle, props.icon], () => {
+      const itemsRef = ref(null);
+      watch(() => [
+          itemsRef.value,
+          props.grow,
+          props.right,
+          props.center,
+          props.vertical,
+          props.sliderSize,
+          props.sliderColor,
+          props.alignWithTitle,
+          props.icon
+      ], () => {
         calculateSliderStyle();
       });
 
@@ -121,53 +159,57 @@
           sliderStyles.height = 'auto';
         } else {
           if (activeTab.offsetLeft < +sliderStyles.left.replace('px', '')) {
-            sliderStyles['transition'] = 'left 0.5s, right 1s';
+            sliderStyles['transition'] = props.slideTransHorLeft;
           } else {
-            sliderStyles['transition'] = 'left 1s, right 0.5s';
+            sliderStyles['transition'] = props.slideTransHorRight;
           }
 
           sliderStyles.width = 'auto';
-          sliderStyles.right = convertToUnit(parent.offsetWidth - activeTab.offsetWidth - activeTab.offsetLeft)
-          sliderStyles.left = convertToUnit(activeTab.offsetLeft)
+          sliderStyles.right = convertToUnit(parent.offsetWidth - activeTab.offsetWidth - activeTab.offsetLeft);
+          sliderStyles.left = convertToUnit(activeTab.offsetLeft);
         }
       }, { lazy: true });
 
       const fullTitle = computed(() => {
         const noTitle = find(props.items, item => item.title === undefined);
-        console.warn(`Required prop title for tab`)
+        console.warn(`Required prop title for tab`);
         return !noTitle;
       });
 
-      const genWrapper = () => <g-layout className="g-tabs-wrapper" vertical={!props.vertical}>
-        <div className={tabsClasses.value} style={tabsStyles.value}>
-          <div ref="itemsRef"
-               className={{ ...barClasses.value, 'g-tabs-bar': true }}
-               style={barStyles.value}
-               v-resize={calculateSliderStyle}>
-            {genTabsBar()}
+      const genWrapper = () =>
+        <g-layout className="g-tabs-wrapper" vertical={!props.vertical}>
+          <div className={tabsClasses.value} style={tabsStyles.value}>
+            <div ref="itemsRef"
+                 className={{ ...barClasses.value, 'g-tabs-bar': true }}
+                 style={barStyles.value}
+                 v-resize={calculateSliderStyle}>
+              {genTabsBar()}
+            </div>
           </div>
-        </div>
-        {context.slots.default && context.slots.default()}
-      </g-layout>
+          {context.slots.default && context.slots.default()}
+        </g-layout>;
 
       const genTabIcon = (item) => {
         if (props.icon && item.icon) return <g-icon>{item.icon}</g-icon>
-      }
+      };
 
       const genTabs = () => {
         return props.items.map((item, index) => (
-          (context.slots.tab && context.slots.tab({ item, index }))
-          || <g-tab item={item} key={index}>
-            {genTabIcon(item)}
-            {item.title}
-          </g-tab>
-        ))
-      }
-
-      const genTabSlider = () => <div class="g-tabs-slider" style={sliderStyles}></div>
+            (context.slots.tab && context.slots.tab({ item, index })) ||
+            <g-tab item={item} key={index}>
+              {genTabIcon(item)}
+              {item.title}
+            </g-tab>
+          )
+        )
+      };
+
+      const genTabSlider = () =>
+          <div class="g-tabs-slider" style={sliderStyles}>
+          </div>;
 
       const genTabsBar = () => {
-        if (!fullTitle) return
+        if (!fullTitle) return;
         const slideGroupData = {
           props: {
             centerActive: props.centerActive,
@@ -177,13 +219,12 @@
             'click:prev': calculateSliderStyle,
             'click:next': calculateSliderStyle
           },
-          slot: 'tabs'
-        }
+        };
         return <g-slide-group {...slideGroupData} vModel={model.value} dense>
-          {genTabs()}
-          {genTabSlider()}
-        </g-slide-group>
-      }
+                 {genTabs()}
+                 {props.showSlider && genTabSlider()}
+               </g-slide-group>
+      };
 
       return () => <div class={['g-tabs-wrapper', props.vertical ? 'row-flex' : 'col-flex']}>
         <div class={tabsClasses.value} style={tabsStyles.value}>
diff --git a/src/components/GTabs/__story__/Tab.stories.js b/src/components/GTabs/__story__/Tab.stories.js
index 6c82ec05..fbcee6df 100644
--- a/src/components/GTabs/__story__/Tab.stories.js
+++ b/src/components/GTabs/__story__/Tab.stories.js
@@ -19,7 +19,7 @@ export const tab = () => ({
     return {
       items: [
         { title: 'Tab 1', icon: 'home' },
-        { title: 'Tab 2', icon: 'group' },
+        { title: 'Tab 232233', icon: 'group' },
         { title: 'Tab 3', icon: 'notifications' },
         { title: 'Tab 4', icon: 'block', disabled: true },
         { title: 'Tab 5', icon: 'phone' },