diff --git a/package.json b/package.json
index 6e732b7b..364c578c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fastybird/web-ui-theme",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "FastyBird basic theme & Vue components for web apps",
   "keywords": [
     "fastybird",
diff --git a/src/assets/components/ui/fb-divider.scss b/src/assets/components/ui/fb-divider.scss
index ceb11d95..f09b5f25 100644
--- a/src/assets/components/ui/fb-divider.scss
+++ b/src/assets/components/ui/fb-divider.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@import "../../variables/colors";
 @import "../../variables/screen";
 @import "../../variables/texts";
 
@@ -9,3 +10,5 @@ $divider-size-half: math.ceil(math.div($divider-size, 2)) !default;
 $divider-margin: 2rem 0;
 $divider-color: #ddd;
 $screen-tablet-min: $screen-sm-min;
+$screen-gradient-color: $gray-light;
+$screen-gradient-bgcolor: transparent;
diff --git a/src/components/ui/FbAlert/types.ts b/src/components/ui/FbAlert/types.ts
index 4df52272..e75bfe38 100644
--- a/src/components/ui/FbAlert/types.ts
+++ b/src/components/ui/FbAlert/types.ts
@@ -1,5 +1,5 @@
 import { FbUiVariantTypes } from "@/types";
 
 export interface IFbUiAlertProps {
-  variant: FbUiVariantTypes;
+  variant?: FbUiVariantTypes;
 }
diff --git a/src/components/ui/FbButton/types.ts b/src/components/ui/FbButton/types.ts
index 07260976..1d309e95 100644
--- a/src/components/ui/FbButton/types.ts
+++ b/src/components/ui/FbButton/types.ts
@@ -6,16 +6,16 @@ import {
 } from "@/types";
 
 export interface IFbUiButtonProps {
-  action: string | { [key: string]: any } | null;
-  actionType: FbUiButtonActionsTypes;
-  type: FbUiButtonButtonTypes;
-  size: FbSizeTypes;
-  variant: FbUiButtonVariantTypes;
-  block: boolean;
-  uppercase: boolean;
-  pill: boolean;
-  thick: boolean;
-  active: boolean;
-  disabled: boolean;
-  loading: boolean;
+  action?: string | { [key: string]: any } | null;
+  actionType?: FbUiButtonActionsTypes;
+  type?: FbUiButtonButtonTypes;
+  size?: FbSizeTypes;
+  variant?: FbUiButtonVariantTypes;
+  block?: boolean;
+  uppercase?: boolean;
+  pill?: boolean;
+  thick?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
 }
diff --git a/src/components/ui/FbComponentLoading/types.ts b/src/components/ui/FbComponentLoading/types.ts
index 81b44a8b..943c128b 100644
--- a/src/components/ui/FbComponentLoading/types.ts
+++ b/src/components/ui/FbComponentLoading/types.ts
@@ -1,6 +1,6 @@
 import { FbSizeTypes } from "@/types";
 
 export interface IFbUiComponentLoadingProps {
-  text: string;
-  size: FbSizeTypes;
+  text?: string;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbComponentLoadingError/types.ts b/src/components/ui/FbComponentLoadingError/types.ts
index 252f7be0..8962e381 100644
--- a/src/components/ui/FbComponentLoadingError/types.ts
+++ b/src/components/ui/FbComponentLoadingError/types.ts
@@ -1,6 +1,6 @@
 import { FbSizeTypes } from "@/types";
 
 export interface IFbUiComponentLoadingErrorProps {
-  text: string;
-  size: FbSizeTypes;
+  text?: string;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbConfirmationWindow/types.ts b/src/components/ui/FbConfirmationWindow/types.ts
index f5f779c0..1b3ec9f2 100644
--- a/src/components/ui/FbConfirmationWindow/types.ts
+++ b/src/components/ui/FbConfirmationWindow/types.ts
@@ -5,14 +5,14 @@ import {
 } from "@/types";
 
 export interface IFbUiConfirmationWindowProps {
-  size: FbSizeTypes;
-  primaryButton: FbUiConfirmationWindowPrimaryButtonTypes;
-  variant: FbUiVariantTypes;
-  showYes: boolean;
-  yesBtnLabel: string;
-  showNo: boolean;
-  noBtnLabel: string;
-  enableClosing: boolean;
-  transparentBg: boolean;
-  show: boolean;
+  size?: FbSizeTypes;
+  primaryButton?: FbUiConfirmationWindowPrimaryButtonTypes;
+  variant?: FbUiVariantTypes;
+  showYes?: boolean;
+  yesBtnLabel?: string;
+  showNo?: boolean;
+  noBtnLabel?: string;
+  enableClosing?: boolean;
+  transparentBg?: boolean;
+  show?: boolean;
 }
diff --git a/src/components/ui/FbDivider/index.scss b/src/components/ui/FbDivider/index.scss
index 1ac7075b..6e37131b 100644
--- a/src/components/ui/FbDivider/index.scss
+++ b/src/components/ui/FbDivider/index.scss
@@ -46,6 +46,37 @@
         }
       }
     }
+
+    &[data-variant="gradient"] {
+      height: 1px;
+      border: 0;
+      background: $screen-gradient-color;
+      background:
+        -webkit-gradient(
+          linear,
+          0 0,
+          100% 0,
+          from($screen-gradient-bgcolor),
+          to($screen-gradient-bgcolor),
+          color-stop(50%, $screen-gradient-color)
+        );
+
+      &[data-type="vertical"] {
+        @media (min-width: $screen-tablet-min) {
+          height: 100%;
+          width: 1px;
+          background:
+            -webkit-gradient(
+              linear,
+              0 100%,
+              0 0,
+              from($screen-gradient-bgcolor),
+              to($screen-gradient-bgcolor),
+              color-stop(50%, $screen-gradient-color)
+            );
+        }
+      }
+    }
   }
 
   &__content {
diff --git a/src/components/ui/FbDivider/index.vue b/src/components/ui/FbDivider/index.vue
index d3f1bcbe..59c6dfe1 100644
--- a/src/components/ui/FbDivider/index.vue
+++ b/src/components/ui/FbDivider/index.vue
@@ -1,6 +1,15 @@
 <template>
+  <hr
+    v-if="variant === variantTypes.GRADIENT"
+    :data-type="type"
+    :data-variant="variant"
+    class="fb-theme-ui-divider__container"
+  >
+
   <div
+    v-else
     :data-type="type"
+    :data-variant="variant"
     class="fb-theme-ui-divider__container"
   >
     <div class="fb-theme-ui-divider__content">
@@ -15,7 +24,7 @@ import {
   PropType,
 } from 'vue'
 
-import { FbUiDividerVariantTypes } from '@/types'
+import { FbUiDividerTypeTypes, FbUiDividerVariantTypes } from '@/types'
 
 export default defineComponent({
 
@@ -24,19 +33,37 @@ export default defineComponent({
   props: {
 
     type: {
+      type: String as PropType<FbUiDividerTypeTypes>,
+      default: FbUiDividerTypeTypes.HORIZONTAL,
+      validator: (value: FbUiDividerTypeTypes) => {
+        // The value must match one of these strings
+        return [
+          FbUiDividerTypeTypes.HORIZONTAL,
+          FbUiDividerTypeTypes.VERTICAL,
+        ].includes(value)
+      },
+    },
+
+    variant: {
       type: String as PropType<FbUiDividerVariantTypes>,
-      default: FbUiDividerVariantTypes.HORIZONTAL,
+      default: FbUiDividerVariantTypes.DEFAULT,
       validator: (value: FbUiDividerVariantTypes) => {
         // The value must match one of these strings
         return [
-          FbUiDividerVariantTypes.HORIZONTAL,
-          FbUiDividerVariantTypes.VERTICAL,
+          FbUiDividerVariantTypes.DEFAULT,
+          FbUiDividerVariantTypes.GRADIENT,
         ].includes(value)
       },
     },
 
   },
 
+  setup() {
+    return {
+      variantTypes: FbUiDividerVariantTypes,
+    }
+  },
+
 })
 </script>
 
diff --git a/src/components/ui/FbDivider/stories.ts b/src/components/ui/FbDivider/stories.ts
index 1e59d0ef..cbd3a34c 100644
--- a/src/components/ui/FbDivider/stories.ts
+++ b/src/components/ui/FbDivider/stories.ts
@@ -4,7 +4,7 @@ import {
   Story,
 } from '@storybook/vue3'
 
-import { FbUiDividerVariantTypes } from '@/types'
+import { FbUiDividerTypeTypes, FbUiDividerVariantTypes } from '@/types'
 
 import { IFbUiDividerProps } from './types'
 import FbUiDivider from './index.vue'
@@ -26,15 +26,29 @@ export default {
     type: {
       type: { name: 'string', required: false },
       control: { type: 'select' },
-      defaultValue: FbUiDividerVariantTypes.HORIZONTAL,
+      defaultValue: FbUiDividerTypeTypes.HORIZONTAL,
       options: [
-        FbUiDividerVariantTypes.HORIZONTAL,
-        FbUiDividerVariantTypes.VERTICAL,
+        FbUiDividerTypeTypes.HORIZONTAL,
+        FbUiDividerTypeTypes.VERTICAL,
       ],
       description: 'Divider type',
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: FbUiDividerVariantTypes.HORIZONTAL },
+        defaultValue: { summary: FbUiDividerTypeTypes.HORIZONTAL },
+      },
+    },
+    variant: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      defaultValue: FbUiDividerVariantTypes.DEFAULT,
+      options: [
+        FbUiDividerVariantTypes.DEFAULT,
+        FbUiDividerVariantTypes.GRADIENT,
+      ],
+      description: 'Divider variant',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: FbUiDividerVariantTypes.DEFAULT },
       },
     },
   },
@@ -77,19 +91,19 @@ export const Horizontal: Story<TemplateArgs> = () => {
           <span>Content</span>
         </div>
         <div style="position: relative;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.HORIZONTAL}">AND</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}">AND</fb-ui-divider>
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
         </div>
         <div style="position: relative;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.HORIZONTAL}">AND</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}">AND</fb-ui-divider>
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
         </div>
         <div style="position: relative;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.HORIZONTAL}">=</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}">=</fb-ui-divider>
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
@@ -108,19 +122,81 @@ export const Vertical: Story<TemplateArgs> = () => {
           <span>Content</span>
         </div>
         <div style="position: relative; width: 50px;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.VERTICAL}">OR</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}">OR</fb-ui-divider>
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative; width: 50px;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}">OR</fb-ui-divider>
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative; width: 50px;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}">OR</fb-ui-divider>
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+      </div>
+    `,
+  }
+}
+
+export const GradientHorizontal: Story<TemplateArgs> = () => {
+  return {
+    components: { FbUiDivider },
+    template: `
+      <div style="display: flex; flex-direction: column;">
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.HORIZONTAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
+        </div>
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+      </div>
+    `,
+  }
+}
+
+export const GradientVertical: Story<TemplateArgs> = () => {
+  return {
+    components: { FbUiDivider },
+    template: `
+      <div style="display: flex; flex-direction: row;">
+        <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
+          <span>Content</span>
+        </div>
+        <div style="position: relative; width: 50px;">
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
         </div>
         <div style="position: relative; width: 50px;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.VERTICAL}">OR</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
         </div>
         <div style="position: relative; width: 50px;">
-          <fb-ui-divider type="${FbUiDividerVariantTypes.VERTICAL}">OR</fb-ui-divider>
+          <fb-ui-divider type="${FbUiDividerTypeTypes.VERTICAL}" variant="${FbUiDividerVariantTypes.GRADIENT}" />
         </div>
         <div style="border: 1px solid rgb(221, 221, 221);height: 100px;flex-grow: 2;display: flex;place-content: center;justify-content: center;align-items: center;">
           <span>Content</span>
diff --git a/src/components/ui/FbDivider/types.ts b/src/components/ui/FbDivider/types.ts
index a37ea59e..b2d25881 100644
--- a/src/components/ui/FbDivider/types.ts
+++ b/src/components/ui/FbDivider/types.ts
@@ -1,5 +1,9 @@
-import { FbUiDividerVariantTypes } from "@/types";
+import {
+  FbUiDividerTypeTypes,
+  FbUiDividerVariantTypes,
+} from '@/types'
 
 export interface IFbUiDividerProps {
-  type: FbUiDividerVariantTypes;
+  type?: FbUiDividerTypeTypes;
+  variant?: FbUiDividerVariantTypes;
 }
diff --git a/src/components/ui/FbIconWithChild/types.ts b/src/components/ui/FbIconWithChild/types.ts
index 54a0a1e7..87019f06 100644
--- a/src/components/ui/FbIconWithChild/types.ts
+++ b/src/components/ui/FbIconWithChild/types.ts
@@ -4,6 +4,6 @@ import {
 } from "@/types";
 
 export interface IFbUiIconWithChildProps {
-  variant: FbUiVariantTypes;
-  size: FbSizeTypes;
+  variant?: FbUiVariantTypes;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbLoadingBox/types.ts b/src/components/ui/FbLoadingBox/types.ts
index e7686c0e..aeed6617 100644
--- a/src/components/ui/FbLoadingBox/types.ts
+++ b/src/components/ui/FbLoadingBox/types.ts
@@ -4,8 +4,8 @@ import {
 } from "@/types";
 
 export interface IFbUiLoadingBoxProps {
-  fullScreen: boolean;
-  animation: boolean;
-  variant: FbUiVariantTypes;
-  size: FbSizeTypes;
+  fullScreen?: boolean;
+  animation?: boolean;
+  variant?: FbUiVariantTypes;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbModalForm/index.vue b/src/components/ui/FbModalForm/index.vue
index 7508a8a2..f16c9b7a 100644
--- a/src/components/ui/FbModalForm/index.vue
+++ b/src/components/ui/FbModalForm/index.vue
@@ -119,6 +119,8 @@ import FbUiResultErr from '@/components/ui/FbResultErr/index.vue'
 import FbUiResultOk from '@/components/ui/FbResultOk/index.vue'
 import FbUiLoadingBox from '@/components/ui/FbLoadingBox/index.vue'
 
+import { IFbUiModalFormProps } from './types'
+
 export default defineComponent({
 
   name: 'FbUiModalForm',
@@ -213,7 +215,7 @@ export default defineComponent({
 
   emits: ['submit', 'close', 'cancel'],
 
-  setup(_props, context: SetupContext) {
+  setup(_props: IFbUiModalFormProps, context: SetupContext) {
     const initialTabindex = ref<number>(get(context, 'slots.form', []).length + 1)
 
     return {
diff --git a/src/components/ui/FbModalForm/types.ts b/src/components/ui/FbModalForm/types.ts
index 6e0943c0..7a95be85 100644
--- a/src/components/ui/FbModalForm/types.ts
+++ b/src/components/ui/FbModalForm/types.ts
@@ -5,16 +5,16 @@ import {
 } from "@/types";
 
 export interface IFbUiModalFormProps {
-  size: FbSizeTypes;
-  layout: FbUiModalLayoutTypes;
-  submitBtnLabel: string;
-  submitBtnShow: boolean;
-  cancelBtnLabel: string;
-  cancelBtnShow: boolean;
-  lockButtons: boolean;
-  lockSubmitButton: boolean;
-  transparentBg: boolean;
-  show: boolean;
-  state: FbFormResultTypes;
-  processingText: string | null;
+  size?: FbSizeTypes;
+  layout?: FbUiModalLayoutTypes;
+  submitBtnLabel?: string;
+  submitBtnShow?: boolean;
+  cancelBtnLabel?: string;
+  cancelBtnShow?: boolean;
+  lockButtons?: boolean;
+  lockSubmitButton?: boolean;
+  transparentBg?: boolean;
+  show?: boolean;
+  state?: FbFormResultTypes;
+  processingText?: string | null;
 }
diff --git a/src/components/ui/FbModalHeader/types.ts b/src/components/ui/FbModalHeader/types.ts
index bff27c6c..8b91d5b0 100644
--- a/src/components/ui/FbModalHeader/types.ts
+++ b/src/components/ui/FbModalHeader/types.ts
@@ -1,11 +1,11 @@
 import { FbUiModalLayoutTypes } from "@/types";
 
 export interface IFbUiModalHeaderProps {
-  layout: FbUiModalLayoutTypes;
-  leftBtnLabel: string;
-  showLeftBtn: boolean;
-  rightBtnLabel: string;
-  showRightBtn: boolean;
-  closeBtnLabel: string;
-  enableClosing: boolean;
+  layout?: FbUiModalLayoutTypes;
+  leftBtnLabel?: string;
+  showLeftBtn?: boolean;
+  rightBtnLabel?: string;
+  showRightBtn?: boolean;
+  closeBtnLabel?: string;
+  enableClosing?: boolean;
 }
diff --git a/src/components/ui/FbModalInfo/types.ts b/src/components/ui/FbModalInfo/types.ts
index bad9563d..03441948 100644
--- a/src/components/ui/FbModalInfo/types.ts
+++ b/src/components/ui/FbModalInfo/types.ts
@@ -4,10 +4,10 @@ import {
 } from "@/types";
 
 export interface IFbUiModalInfoProps {
-  size: FbSizeTypes;
-  layout: FbUiModalLayoutTypes;
-  enableClosing: boolean;
-  closeBtnLabel: string;
-  transparentBg: boolean;
-  show: boolean;
+  size?: FbSizeTypes;
+  layout?: FbUiModalLayoutTypes;
+  enableClosing?: boolean;
+  closeBtnLabel?: string;
+  transparentBg?: boolean;
+  show?: boolean;
 }
diff --git a/src/components/ui/FbModalWindow/types.ts b/src/components/ui/FbModalWindow/types.ts
index 77a69879..94956a56 100644
--- a/src/components/ui/FbModalWindow/types.ts
+++ b/src/components/ui/FbModalWindow/types.ts
@@ -4,18 +4,18 @@ import {
 } from "@/types";
 
 export interface IFbUiModalWindowProps {
-  size: FbSizeTypes;
-  layout: FbUiModalLayoutTypes;
-  width: string | number | null;
-  showHeader: boolean;
-  showFooter: boolean;
-  rightBtnLabel: string;
-  showRightBtn: boolean;
-  leftBtnLabel: string;
-  showLeftBtn: boolean;
-  closeBtnLabel: string;
-  enableClosing: boolean;
-  transparentBg: boolean;
-  loader: boolean;
-  show: boolean;
+  size?: FbSizeTypes;
+  layout?: FbUiModalLayoutTypes;
+  width?: string | number | null;
+  showHeader?: boolean;
+  showFooter?: boolean;
+  rightBtnLabel?: string;
+  showRightBtn?: boolean;
+  leftBtnLabel?: string;
+  showLeftBtn?: boolean;
+  closeBtnLabel?: string;
+  enableClosing?: boolean;
+  transparentBg?: boolean;
+  loader?: boolean;
+  show?: boolean;
 }
diff --git a/src/components/ui/FbNoResults/types.ts b/src/components/ui/FbNoResults/types.ts
index de95e115..8940154a 100644
--- a/src/components/ui/FbNoResults/types.ts
+++ b/src/components/ui/FbNoResults/types.ts
@@ -4,6 +4,6 @@ import {
 } from "@/types";
 
 export interface IFbUiNoResultsProps {
-  variant: FbUiVariantTypes;
-  size: FbSizeTypes;
+  variant?: FbUiVariantTypes;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbResultErr/types.ts b/src/components/ui/FbResultErr/types.ts
index 838827f6..d83d60d1 100644
--- a/src/components/ui/FbResultErr/types.ts
+++ b/src/components/ui/FbResultErr/types.ts
@@ -1,5 +1,5 @@
 import { FbSizeTypes } from "@/types";
 
 export interface IFbUiResultErrProps {
-  size: FbSizeTypes;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbResultOk/types.ts b/src/components/ui/FbResultOk/types.ts
index 2951f77b..41fbb0e5 100644
--- a/src/components/ui/FbResultOk/types.ts
+++ b/src/components/ui/FbResultOk/types.ts
@@ -1,5 +1,5 @@
 import { FbSizeTypes } from "@/types";
 
 export interface IFbUiResultOkProps {
-  size: FbSizeTypes;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbSpinner/types.ts b/src/components/ui/FbSpinner/types.ts
index 307758b4..4cf246cb 100644
--- a/src/components/ui/FbSpinner/types.ts
+++ b/src/components/ui/FbSpinner/types.ts
@@ -4,6 +4,6 @@ import {
 } from "@/types";
 
 export interface IFbUiSpinnerProps {
-  variant: FbUiVariantTypes;
-  size: FbSizeTypes;
+  variant?: FbUiVariantTypes;
+  size?: FbSizeTypes;
 }
diff --git a/src/components/ui/FbSwipeActions/SwipeList/index.vue b/src/components/ui/FbSwipeActions/SwipeList/index.vue
index 32591a93..3e7d47ef 100644
--- a/src/components/ui/FbSwipeActions/SwipeList/index.vue
+++ b/src/components/ui/FbSwipeActions/SwipeList/index.vue
@@ -14,7 +14,7 @@
         :threshold="threshold"
         :disabled="itemDisabled(item) || disabled"
         class="fb-theme-ui-swipe-actions-out__item"
-        @closed="onClosed(item, index, $event)"
+        @closed="onClosed(item, index)"
         @revealed="onRevealed(item, index, $event)"
         @leftRevealed="$emit('leftRevealed', { index, item, close: $event.close })"
         @rightRevealed="$emit('rightRevealed', { index, item, close: $event.close })"
@@ -115,7 +115,7 @@ export default defineComponent({
 
   emits: ['update:revealed', 'active', 'closed', 'revealed', 'leftRevealed', 'rightRevealed'],
 
-  setup(props: IFbUiSwipeActionsListProps, context: SetupContext) {
+  setup(props: IFbUiSwipeActionsListProps<any>, context: SetupContext) {
     const container = ref<HTMLElement | null>(null)
     const elements = ref<InstanceType<typeof FbUiSwipeActionsOut>[]>([])
     const innerRevealed = ref<{ [key: (number)]: TFbUiSwipeActionsOutDir }>(props.revealed || {})
@@ -189,7 +189,7 @@ export default defineComponent({
     watch(
       () => props.revealed,
       (val): void => {
-        innerRevealed.value = val
+        innerRevealed.value = val as { [key: (number)]: TFbUiSwipeActionsOutDir }
       },
     )
 
diff --git a/src/components/ui/FbSwipeActions/SwipeList/types.ts b/src/components/ui/FbSwipeActions/SwipeList/types.ts
index 90fa5ca5..c7be7b30 100644
--- a/src/components/ui/FbSwipeActions/SwipeList/types.ts
+++ b/src/components/ui/FbSwipeActions/SwipeList/types.ts
@@ -1,9 +1,9 @@
 import { TFbUiSwipeActionsOutDir } from '@/components/ui/FbSwipeActions/types'
 
-export interface IFbUiSwipeActionsListProps {
-  items: any[]
-  threshold: number
-  revealed: { [key: number]: TFbUiSwipeActionsOutDir }
-  disabled: boolean
-  itemDisabled: (item: any) => boolean
+export interface IFbUiSwipeActionsListProps<TItem> {
+  items: TItem[]
+  threshold?: number
+  revealed?: { [key: number]: TFbUiSwipeActionsOutDir }
+  disabled?: boolean
+  itemDisabled?: (item: TItem) => boolean
 }
diff --git a/src/components/ui/FbSwipeActions/SwipeOut/index.vue b/src/components/ui/FbSwipeActions/SwipeOut/index.vue
index c3e6d815..c3c3fc51 100644
--- a/src/components/ui/FbSwipeActions/SwipeOut/index.vue
+++ b/src/components/ui/FbSwipeActions/SwipeOut/index.vue
@@ -72,10 +72,10 @@ import {
 } from 'vue'
 
 import { TouchHorizontalPan } from '@/directives'
+import { ITouchHorizontalChanges } from '@/directives/types'
 import {
   IFbUiSwipeActionsOutProps,
   TFbUiSwipeActionsOutDir,
-  ITouchHorizontalChanges,
 } from '@/components/ui/FbSwipeActions/types'
 
 const translateX = (x: number): string => {
@@ -206,7 +206,7 @@ export default defineComponent({
 
       const newX = startLeft.value + offset.x
 
-      if ((startLeft.value === 0 && Math.abs(newX) <= props.threshold) || (distance.x >= props.threshold && ((startLeft.value > 0 && distance.x < leftActionsWidth.value) || (startLeft.value < 0 && distance.x < rightActionsWidth.value)))) {
+      if ((startLeft.value === 0 && Math.abs(newX) <= (props.threshold as number)) || (distance.x >= (props.threshold as number) && ((startLeft.value > 0 && distance.x < leftActionsWidth.value) || (startLeft.value < 0 && distance.x < rightActionsWidth.value)))) {
         reveal(false, false)
 
         return
@@ -375,7 +375,7 @@ export default defineComponent({
           return
         }
 
-        reveal(val, true)
+        reveal((val as boolean | TFbUiSwipeActionsOutDir), true)
       },
     )
 
diff --git a/src/components/ui/FbSwipeActions/SwipeOut/types.ts b/src/components/ui/FbSwipeActions/SwipeOut/types.ts
index 15c62987..ecf23b98 100644
--- a/src/components/ui/FbSwipeActions/SwipeOut/types.ts
+++ b/src/components/ui/FbSwipeActions/SwipeOut/types.ts
@@ -1,7 +1,7 @@
 export type TFbUiSwipeActionsOutDir = 'left' | 'right'
 
 export interface IFbUiSwipeActionsOutProps {
-  threshold: number
-  revealed: TFbUiSwipeActionsOutDir | boolean
-  disabled: boolean
+  threshold?: number
+  revealed?: TFbUiSwipeActionsOutDir | boolean
+  disabled?: boolean
 }
diff --git a/src/components/ui/FbSwipeActions/stories.ts b/src/components/ui/FbSwipeActions/stories.ts
index 7ecf29c2..216a18b2 100644
--- a/src/components/ui/FbSwipeActions/stories.ts
+++ b/src/components/ui/FbSwipeActions/stories.ts
@@ -26,7 +26,7 @@ export default {
   },
 } as Meta
 
-interface TemplateArgs extends IFbUiSwipeActionsListProps, Args {
+interface TemplateArgs extends IFbUiSwipeActionsListProps<any>, Args {
   default?: string
 }
 
diff --git a/src/components/ui/FbSwipeActions/types.ts b/src/components/ui/FbSwipeActions/types.ts
index c6b5a9aa..d7d20d29 100644
--- a/src/components/ui/FbSwipeActions/types.ts
+++ b/src/components/ui/FbSwipeActions/types.ts
@@ -1,71 +1,2 @@
 export * from "./SwipeList/types"
 export * from "./SwipeOut/types"
-
-export interface ITouchHorizontalDirectiveBinding {
-  value: (pan: ITouchHorizontalChanges) => void
-  oldValue?: (pan: ITouchHorizontalChanges) => void
-  modifiers: ITouchHorizontalDirectiveBindingModifiers
-}
-
-export interface ITouchHorizontalDirectiveBindingModifiers {
-  vertical?: boolean
-  horizontal?: boolean
-  mouse?: boolean
-  mousePrevent?: boolean
-  mouseMightPrevent?: boolean
-  mouseStop?: boolean
-  mouseAllDir?: boolean
-  prevent?: boolean
-  mightPrevent?: boolean
-  stop?: boolean
-}
-
-export type TTouchDirection = 'left' | 'right' | 'up' | 'down'
-
-export interface ITouchHorizontalDirectiveContext {
-  handler: (pan: ITouchHorizontalChanges) => void,
-  direction: { all: boolean, horizontal: boolean, vertical: boolean },
-  event?: {
-    x: number
-    y: number
-    time: number
-    mouse: boolean
-    detected: boolean
-    abort: boolean
-    isFirst: boolean
-    isFinal: boolean
-    lastX: number
-    lastY: number
-  }
-  mouseStart: (evt: MouseEvent) => void
-  mouseEnd: (evt: MouseEvent) => void
-  start: (evt: MouseEvent | TouchEvent, mouseEvent?: boolean) => void
-  end: (evt: MouseEvent | TouchEvent) => void
-  move: (evt: MouseEvent | TouchEvent) => void
-  touchTargetObserver?: MutationObserver
-}
-
-export interface ITouchHorizontalChanges {
-  evt: MouseEvent | TouchEvent
-  position: {
-    top: number
-    left: number
-  }
-  direction: TTouchDirection
-  isFirst: boolean
-  isFinal: boolean
-  isMouse: boolean
-  duration: number
-  distance: {
-    x: number
-    y: number
-  }
-  offset: {
-    x: number
-    y: number
-  }
-  delta: {
-    x: number
-    y: number
-  }
-}
diff --git a/src/components/ui/FbSwitchElement/stories.ts b/src/components/ui/FbSwitchElement/stories.ts
index ad524d01..2911bcd3 100644
--- a/src/components/ui/FbSwitchElement/stories.ts
+++ b/src/components/ui/FbSwitchElement/stories.ts
@@ -75,7 +75,7 @@ const Template: Story<TemplateArgs> = (args) => {
   return {
     components: { FbUiSwitchElement },
     setup(): any {
-      const status = ref<boolean>(args.status)
+      const status = ref<boolean>(args?.status ?? false)
 
       return { args, status }
     },
diff --git a/src/components/ui/FbSwitchElement/types.ts b/src/components/ui/FbSwitchElement/types.ts
index 38a41440..ca754e96 100644
--- a/src/components/ui/FbSwitchElement/types.ts
+++ b/src/components/ui/FbSwitchElement/types.ts
@@ -4,8 +4,8 @@ import {
 } from "@/types";
 
 export interface IFbUiSwitchElementProps {
-  status: boolean;
-  disabled: boolean;
-  variant: FbUiVariantTypes;
-  size: FbSizeTypes;
+  status?: boolean;
+  disabled?: boolean;
+  variant?: FbUiVariantTypes;
+  size?: FbSizeTypes;
 }
diff --git a/src/directives/TouchHorizontalPan.ts b/src/directives/TouchHorizontalPan.ts
index 92180fec..7ad0d6d6 100644
--- a/src/directives/TouchHorizontalPan.ts
+++ b/src/directives/TouchHorizontalPan.ts
@@ -6,7 +6,7 @@ import {
   ITouchHorizontalDirectiveBindingModifiers,
   ITouchHorizontalDirectiveContext,
   TTouchDirection,
-} from '@/components/ui/FbSwipeActions/types'
+} from './types'
 
 const testPassive = (): boolean => {
   let passive = false;
diff --git a/src/directives/types.ts b/src/directives/types.ts
new file mode 100644
index 00000000..aaf722da
--- /dev/null
+++ b/src/directives/types.ts
@@ -0,0 +1,68 @@
+export interface ITouchHorizontalDirectiveBinding {
+  value: (pan: ITouchHorizontalChanges) => void
+  oldValue?: (pan: ITouchHorizontalChanges) => void
+  modifiers: ITouchHorizontalDirectiveBindingModifiers
+}
+
+export interface ITouchHorizontalDirectiveBindingModifiers {
+  vertical?: boolean
+  horizontal?: boolean
+  mouse?: boolean
+  mousePrevent?: boolean
+  mouseMightPrevent?: boolean
+  mouseStop?: boolean
+  mouseAllDir?: boolean
+  prevent?: boolean
+  mightPrevent?: boolean
+  stop?: boolean
+}
+
+export type TTouchDirection = 'left' | 'right' | 'up' | 'down'
+
+export interface ITouchHorizontalDirectiveContext {
+  handler: (pan: ITouchHorizontalChanges) => void,
+  direction: { all: boolean, horizontal: boolean, vertical: boolean },
+  event?: {
+    x: number
+    y: number
+    time: number
+    mouse: boolean
+    detected: boolean
+    abort: boolean
+    isFirst: boolean
+    isFinal: boolean
+    lastX: number
+    lastY: number
+  }
+  mouseStart: (evt: MouseEvent) => void
+  mouseEnd: (evt: MouseEvent) => void
+  start: (evt: MouseEvent | TouchEvent, mouseEvent?: boolean) => void
+  end: (evt: MouseEvent | TouchEvent) => void
+  move: (evt: MouseEvent | TouchEvent) => void
+  touchTargetObserver?: MutationObserver
+}
+
+export interface ITouchHorizontalChanges {
+  evt: MouseEvent | TouchEvent
+  position: {
+    top: number
+    left: number
+  }
+  direction: TTouchDirection
+  isFirst: boolean
+  isFinal: boolean
+  isMouse: boolean
+  duration: number
+  distance: {
+    x: number
+    y: number
+  }
+  offset: {
+    x: number
+    y: number
+  }
+  delta: {
+    x: number
+    y: number
+  }
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index cbd5a097..4952bca9 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -8,6 +8,7 @@ export interface IPluginOptions {
 export type InstallFunction = Plugin & { installed?: boolean };
 
 export * from "../components/types";
+export * from "../directives/types";
 
 export enum FbMenuItemTypes {
     LINK = "link",
@@ -96,11 +97,16 @@ export enum FbUiConfirmationWindowPrimaryButtonTypes {
     NO = "no",
 }
 
-export enum FbUiDividerVariantTypes {
+export enum FbUiDividerTypeTypes {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical",
 }
 
+export enum FbUiDividerVariantTypes {
+    DEFAULT = "default",
+    GRADIENT = "gradient",
+}
+
 export enum FbUiTextAlignTypes {
     NONE = "none",
     LEFT = "left",