diff --git a/package.json b/package.json
index 72ee3e4d..3e937584 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fastybird/web-ui-theme",
-  "version": "0.6.7",
+  "version": "0.7.0",
   "description": "FastyBird basic theme & Vue components for web apps",
   "keywords": [
     "fastybird",
diff --git a/src/assets/components/layout/fb-header.scss b/src/assets/components/layout/fb-header.scss
index 7717e732..b498e9cf 100644
--- a/src/assets/components/layout/fb-header.scss
+++ b/src/assets/components/layout/fb-header.scss
@@ -10,7 +10,6 @@ $header-font-weight: normal;
 $hamburger-bar-line-height: 2px !default;
 $hamburger-bar-line-width: 22px !default;
 $hamburger-bar-line-distance: 5px !default;
-$screen-tablet-min: $screen-sm-min;
 
 @mixin shadow {
   @include box-shadow(0 3px 9px rgba(0, 0, 0, 0.5));
diff --git a/src/assets/components/layout/fb-off-canvas.scss b/src/assets/components/layout/fb-off-canvas.scss
index e88e1403..412aef40 100644
--- a/src/assets/components/layout/fb-off-canvas.scss
+++ b/src/assets/components/layout/fb-off-canvas.scss
@@ -1,20 +1,8 @@
 @import "../../variables/colors";
-@import "../../variables/layout";
 @import "../../variables/screen";
 @import "../../variables/texts";
 @import "../../mixins/utilities";
 
-$off-canvas-header-height: 5rem;
-$off-canvas-header-padding: 0 $padding-md;
-$off-canvas-header-color: $color-primary-contrast;
-$off-canvas-header-bg-color: $color-primary;
-$off-canvas-header-font-size: $font-size-h4;
-$off-canvas-header-font-weight: $headings-font-weight;
-$off-canvas-header-line-height: $headings-line-height;
-$off-canvas-header-color: $color-primary-contrast;
-$off-canvas-button-color: $color-primary-contrast;
-$off-canvas-button-font-size: 2.5rem;
-$off-canvas-button-line-height: 5rem;
 $off-canvas-overlay-color: rgb(0 0 0 / 50%);
 $off-canvas-overlay-zindex: $zindex-off-canvas-background;
 $off-canvas-body-color: $bg-color-body;
diff --git a/src/components/layout/FbHeader/Button/index.vue b/src/components/layout/FbHeader/Button/index.vue
index fb639d00..c30257fb 100644
--- a/src/components/layout/FbHeader/Button/index.vue
+++ b/src/components/layout/FbHeader/Button/index.vue
@@ -1,8 +1,57 @@
 <template>
-  <teleport
-    :to="`#${teleportTarget}`"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport :to="`#${teleportTarget}`">
+      <template v-if="actionType === menuItemTypes.LINK">
+        <a
+          :href="action"
+          :class="['fb-theme-layout-header-button__container', {'fb-theme-layout-header-button__container-small': small}, {'fb-theme-layout-header-button__container-textual': !('icon' in $slots)}, {'fb-theme-layout-header-button__container-left': left}, {'fb-theme-layout-header-button__container-right': right}]"
+          @click.prevent="$emit('click', $event)"
+        >
+          <template v-if="'icon' in $slots">
+            <slot name="icon" />
+          </template>
+
+          <template v-else>
+            {{ label }}
+          </template>
+        </a>
+      </template>
+
+      <template v-else-if="actionType === menuItemTypes.VUE_LINK">
+        <router-link
+          :to="action"
+          :class="['fb-theme-layout-header-button__container', {'fb-theme-layout-header-button__container-small': small}, {'fb-theme-layout-header-button__container-textual': !('icon' in $slots)}, {'fb-theme-layout-header-button__container-left': left}, {'fb-theme-layout-header-button__container-right': right}]"
+          @click.prevent="$emit('click', $event)"
+        >
+          <template v-if="'icon' in $slots">
+            <slot name="icon" />
+          </template>
+
+          <template v-else>
+            {{ label }}
+          </template>
+        </router-link>
+      </template>
+
+      <template v-else-if="actionType === menuItemTypes.BUTTON">
+        <button
+          role="button"
+          :class="['fb-theme-layout-header-button__container', {'fb-theme-layout-header-button__container-small': small}, {'fb-theme-layout-header-button__container-textual': !('icon' in $slots)}, {'fb-theme-layout-header-button__container-left': left}, {'fb-theme-layout-header-button__container-right': right}]"
+          @click.prevent="$emit('click', $event)"
+        >
+          <template v-if="'icon' in $slots">
+            <slot name="icon" />
+          </template>
+
+          <template v-else>
+            {{ label }}
+          </template>
+        </button>
+      </template>
+    </teleport>
+  </template>
+
+  <template v-else>
     <template v-if="actionType === menuItemTypes.LINK">
       <a
         :href="action"
@@ -50,7 +99,7 @@
         </template>
       </button>
     </template>
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">
diff --git a/src/components/layout/FbHeader/Button/types.ts b/src/components/layout/FbHeader/Button/types.ts
index 77344482..daa87f18 100644
--- a/src/components/layout/FbHeader/Button/types.ts
+++ b/src/components/layout/FbHeader/Button/types.ts
@@ -1,9 +1,9 @@
 import { FbMenuItemTypes } from "@/types";
 
 export interface IFbLayoutHeaderButtonProps {
-  type: FbMenuItemTypes;
+  actionType: FbMenuItemTypes;
+  action: string | { [key: string]: any } | null;
   label: string | null;
-  link: string | null;
   small: boolean;
   left: boolean;
   right: boolean;
diff --git a/src/components/layout/FbHeader/Content/index.vue b/src/components/layout/FbHeader/Content/index.vue
index 164a3cd8..39c938d5 100644
--- a/src/components/layout/FbHeader/Content/index.vue
+++ b/src/components/layout/FbHeader/Content/index.vue
@@ -1,12 +1,17 @@
 <template>
-  <teleport
-    to="#fb-layout-header-sub-content"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport to="#fb-layout-header-sub-content">
+      <div class="fb-theme-layout-phone-header-content__container">
+        <slot />
+      </div>
+    </teleport>
+  </template>
+
+  <template v-else>
     <div class="fb-theme-layout-phone-header-content__container">
       <slot />
     </div>
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">
diff --git a/src/components/layout/FbHeader/Heading/index.vue b/src/components/layout/FbHeader/Heading/index.vue
index 66c59343..8d0b0fae 100644
--- a/src/components/layout/FbHeader/Heading/index.vue
+++ b/src/components/layout/FbHeader/Heading/index.vue
@@ -1,8 +1,29 @@
 <template>
-  <teleport
-    to="#fb-layout-header-heading"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport to="#fb-layout-header-heading">
+      <div class="fb-theme-layout-phone-header-heading__container">
+        <div :class="['fb-theme-layout-phone-header-heading__heading', `fb-theme-layout-phone-header-heading__heading-${align}`]">
+          <h1 v-if="subHeading === null">
+            {{ heading }}
+          </h1>
+
+          <h1 v-if="subHeading !== null">
+            <span>{{ heading }}</span>
+            <small>{{ subHeading }}</small>
+          </h1>
+        </div>
+
+        <div
+          v-if="'icon' in $slots"
+          class="fb-theme-layout-phone-header-heading__icon"
+        >
+          <slot name="icon" />
+        </div>
+      </div>
+    </teleport>
+  </template>
+
+  <template v-else>
     <div class="fb-theme-layout-phone-header-heading__container">
       <div :class="['fb-theme-layout-phone-header-heading__heading', `fb-theme-layout-phone-header-heading__heading-${align}`]">
         <h1 v-if="subHeading === null">
@@ -22,7 +43,7 @@
         <slot name="icon" />
       </div>
     </div>
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">
diff --git a/src/components/layout/FbHeader/Icon/index.vue b/src/components/layout/FbHeader/Icon/index.vue
index 522969f4..bc412c10 100644
--- a/src/components/layout/FbHeader/Icon/index.vue
+++ b/src/components/layout/FbHeader/Icon/index.vue
@@ -1,14 +1,21 @@
 <template>
-  <teleport
-    :to="`#${teleportTarget}`"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport :to="`#${teleportTarget}`">
+      <div
+        :class="['fb-theme-layout-header-icon__container', {'fb-theme-layout-header-icon__container-left': left}, {'fb-theme-layout-header-icon__container-right': right}]"
+      >
+        <slot />
+      </div>
+    </teleport>
+  </template>
+
+  <template v-else>
     <div
       :class="['fb-theme-layout-header-icon__container', {'fb-theme-layout-header-icon__container-left': left}, {'fb-theme-layout-header-icon__container-right': right}]"
     >
       <slot />
     </div>
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">
diff --git a/src/components/layout/FbHeader/Spacer/index.vue b/src/components/layout/FbHeader/Spacer/index.vue
index 63c2b800..9dc16de7 100644
--- a/src/components/layout/FbHeader/Spacer/index.vue
+++ b/src/components/layout/FbHeader/Spacer/index.vue
@@ -1,10 +1,13 @@
 <template>
-  <teleport
-    :to="`#${teleportTarget}`"
-    :disabled="!teleport"
-  >
+  <template v-if="teleport">
+    <teleport :to="`#${teleportTarget}`">
+      <div :class="['fb-theme-layout-header__spacer', {'fb-theme-layout-header__spacer-left': left}, {'fb-theme-layout-header__spacer-right': right}, {'fb-theme-layout-header__spacer-center': !right && !left}]" />
+    </teleport>
+  </template>
+
+  <template v-else>
     <div :class="['fb-theme-layout-header__spacer', {'fb-theme-layout-header__spacer-left': left}, {'fb-theme-layout-header__spacer-right': right}, {'fb-theme-layout-header__spacer-center': !right && !left}]" />
-  </teleport>
+  </template>
 </template>
 
 <script lang="ts">
diff --git a/src/components/layout/FbHeader/index.scss b/src/components/layout/FbHeader/index.scss
index bca0424a..e6f9e6cb 100644
--- a/src/components/layout/FbHeader/index.scss
+++ b/src/components/layout/FbHeader/index.scss
@@ -7,10 +7,6 @@
     z-index: $z-index;
 
     @include shadow;
-
-    @media (min-width: $screen-tablet-min) {
-      display: none !important;
-    }
   }
 
   &__heading {
diff --git a/src/components/layout/FbOffCanvas/Body/index.scss b/src/components/layout/FbOffCanvas/Body/index.scss
deleted file mode 100644
index 42f3fa7f..00000000
--- a/src/components/layout/FbOffCanvas/Body/index.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@import "../../../../assets/components/layout/fb-off-canvas";
-
-.fb-theme-layout-off-canvas-body {
-  &__container {
-    height: 100%;
-    max-height: 100%;
-    overflow: hidden;
-  }
-
-  &__header {
-    line-height: 5rem;
-    padding: $off-canvas-header-padding;
-    color: $off-canvas-header-color;
-    background-color: $off-canvas-header-bg-color;
-    height: $off-canvas-header-height;
-
-    @include flex-box;
-
-    &-heading {
-      align-items: center;
-      text-align: center;
-      order: 2;
-      flex-grow: 2;
-
-      @include flex-heading;
-
-      &-title {
-        flex-grow: 2;
-        flex-direction: column;
-        justify-content: center;
-
-        @include flex-heading-title;
-
-        h4 {
-          font-size: $off-canvas-header-font-size;
-          font-weight: $off-canvas-header-font-weight;
-          line-height: $off-canvas-header-line-height;
-          color: $off-canvas-header-color;
-          margin: 0;
-          width: 100%;
-
-          small {
-            display: block;
-            font-size: 75%;
-            color: $off-canvas-header-color;
-          }
-        }
-      }
-    }
-
-    &-left-button {
-      text-align: left;
-      order: 1;
-    }
-
-    &-right-button {
-      text-align: right;
-      order: 3;
-    }
-
-    &-left-button,
-    &-right-button {
-      flex-grow: 1;
-      flex-basis: 10%;
-    }
-  }
-
-  &__body {
-    position: absolute;
-    top: 5rem;
-    bottom: 0;
-    right: 0;
-    width: 450px;
-    overflow-y: auto;
-  }
-}
diff --git a/src/components/layout/FbOffCanvas/Body/index.vue b/src/components/layout/FbOffCanvas/Body/index.vue
deleted file mode 100644
index ddeea72f..00000000
--- a/src/components/layout/FbOffCanvas/Body/index.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div class="fb-theme-layout-off-canvas-body__container">
-    <div class="fb-theme-layout-off-canvas-body__header">
-      <div class="fb-theme-layout-off-canvas-body__header-heading">
-        <div class="fb-theme-layout-off-canvas-body__header-heading-title">
-          <h4>
-            <slot name="heading" />
-
-            <small v-if="'subheading' in $slots">
-              <slot name="subheading" />
-            </small>
-          </h4>
-        </div>
-      </div>
-
-      <div class="fb-theme-layout-off-canvas-body__header-left-button">
-        <slot name="left-button" />
-      </div>
-
-      <div class="fb-theme-layout-off-canvas-body__header-right-button">
-        <slot name="right-button" />
-      </div>
-    </div>
-
-    <div class="fb-theme-layout-off-canvas-body__body">
-      <slot name="body" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-
-  name: 'FbLayoutOffCanvasBody',
-
-})
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import 'index';
-</style>
diff --git a/src/components/layout/FbOffCanvas/Button/index.scss b/src/components/layout/FbOffCanvas/Button/index.scss
deleted file mode 100644
index 11d024fa..00000000
--- a/src/components/layout/FbOffCanvas/Button/index.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "../../../../assets/components/layout/fb-off-canvas";
-
-.fb-theme-layout-off-canvas-button {
-  &__container {
-    display: block;
-    background-color: transparent;
-    background-image: none;
-    border: none;
-    line-height: $off-canvas-button-line-height;
-    font-size: $off-canvas-button-font-size;
-    text-align: center;
-    text-transform: lowercase;
-    color: $off-canvas-button-color;
-    outline: none;
-  }
-}
diff --git a/src/components/layout/FbOffCanvas/Button/index.vue b/src/components/layout/FbOffCanvas/Button/index.vue
deleted file mode 100644
index 8d577f8d..00000000
--- a/src/components/layout/FbOffCanvas/Button/index.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <button
-    class="fb-theme-layout-off-canvas-button__container"
-    @click.prevent="$emit('click')"
-  >
-    <slot />
-  </button>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-
-  name: 'FbLayoutOffCanvasButton',
-
-  emits: ['click'],
-
-})
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import 'index';
-</style>
diff --git a/src/components/layout/FbOffCanvas/index.ts b/src/components/layout/FbOffCanvas/index.ts
deleted file mode 100644
index a0cc6049..00000000
--- a/src/components/layout/FbOffCanvas/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as FbLayoutOffCanvas } from "./index.vue";
-export { default as FbLayoutOffCanvasBody } from "./Body/index.vue";
-export { default as FbLayoutOffCanvasButton } from "./Button/index.vue";
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
index 39a3f076..6e4e9b23 100644
--- a/src/components/layout/index.ts
+++ b/src/components/layout/index.ts
@@ -2,7 +2,7 @@ export { default as FbLayoutContent } from "./FbContent/index.vue";
 export { default as FbLayoutExpandableBox } from "./FbExpandableBox/index.vue";
 export { default as FbLayoutFooter } from "./FbFooter/index.vue";
 export * from "./FbHeader";
-export * from "./FbOffCanvas";
+export { default as FbOffCanvas } from "./FbOffCanvas/index.vue";
 export * from "./FbNavigation";
 export * from "./FbPhoneMenu";
 export { default as FbLayoutPreviewHeading } from "./FbPreviewHeading/index.vue";