diff --git a/components/ACheckbox.vue b/components/ACheckbox.vue
index a3ec5f0f..47764c3c 100644
--- a/components/ACheckbox.vue
+++ b/components/ACheckbox.vue
@@ -234,10 +234,6 @@ watch(
         background-color: v-bind(color);
       }
 
-      &:focus + .slider {
-        box-shadow: 0 0 1px v-bind(color);
-      }
-
       &:checked + .slider:before {
         transform: translateX(20px);
       }
@@ -290,4 +286,15 @@ watch(
     }
   }
 }
+
+.custom-checkbox input:checked:disabled ~ .checkmark-lab {
+  background-color: var(--a-grey-dark) !important;
+
+  &:after {
+    display: block;
+    border-color: var(--a-white) !important;
+  }
+}
+
+
 </style>
diff --git a/components/ADropdown.vue b/components/ADropdown.vue
index 54dcb513..6581e78f 100644
--- a/components/ADropdown.vue
+++ b/components/ADropdown.vue
@@ -3,8 +3,7 @@ import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
 import AButton from "./AButton.vue";
 import ACard from "./ACard.vue";
 import { useColor } from "../stores/color";
-import { defineProps, computed, PropType, withDefaults } from "vue";
-import type { Colors } from "../stores/color";
+import { defineProps, computed, withDefaults } from "vue";
 import { useElementBounding, onClickOutside } from "@vueuse/core";
 
 interface DropdownProps {
diff --git a/components/AInput.vue b/components/AInput.vue
index 8a4dd129..d54475d5 100644
--- a/components/AInput.vue
+++ b/components/AInput.vue
@@ -14,7 +14,15 @@ export interface AInputProps {
   label?: string | null;
   full?: boolean;
   required?: boolean;
-  type?: "text" | "phone" | "password" | "time" | "search" | "number" | "email" | "color";
+  type?:
+    | "text"
+    | "phone"
+    | "password"
+    | "time"
+    | "search"
+    | "number"
+    | "email"
+    | "color";
   modelValue?: Array<string> | string;
 }
 
@@ -426,5 +434,21 @@ const preventClear = (event: KeyboardEvent) => {
     align-items: center;
     padding: 0 16px 0 0;
   }
+
+  @media screen and (max-width: 768px) {
+    height: 50px;
+
+    // PHONE
+    &.a-input-phone {
+      .phone-label {
+        top: 7px;
+      }
+    }
+
+    // LABEL
+    label {
+      top: 7px;
+    }
+  }
 }
 </style>
diff --git a/components/ALinearBreadCrumb.vue b/components/ALinearBreadCrumb.vue
new file mode 100644
index 00000000..c3f2cc96
--- /dev/null
+++ b/components/ALinearBreadCrumb.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface ALineardBreadCrumb {
+  path?: string;
+  root: string;
+  splitChar: string;
+  separator: string;
+}
+
+const props = withDefaults(defineProps<ALineardBreadCrumb>(), {
+  path: "",
+  root: "Home",
+  splitChar: "/",
+  separator: "/",
+});
+
+const emit = defineEmits(["updatePath"]);
+
+const pathSegments = computed(() =>
+  props.path.split(props.splitChar).filter(Boolean)
+);
+
+const goToFolderLevel = (level: number) => {
+  const newPath = pathSegments.value.slice(0, level + 1).join(props.splitChar);
+  emit("updatePath", newPath);
+};
+
+const isBreadcrumbEmpty = computed(() => pathSegments.value.length === 0);
+</script>
+
+<template>
+  <div class="breadcrumb-container">
+    <button
+      :class="{ 'empty-breadcrumb': isBreadcrumbEmpty }"
+      @click="goToFolderLevel(-1)"
+    >
+      {{ root }}
+    </button>
+
+    <span
+      v-for="(segment, index) in pathSegments"
+      :key="index"
+      class="breadcrumb-content"
+    >
+      <p class="separator">{{ separator }}</p>
+      <button class="breadcrumb" @click="goToFolderLevel(index)">
+        {{ segment }}
+      </button>
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.breadcrumb-container {
+  display: flex;
+
+  button {
+    font-size: 12px;
+    height: 20px;
+    color: var(--a-secondary);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &.empty-breadcrumb {
+      color: var(--a-black);
+    }
+  }
+
+  .breadcrumb-content {
+    display: flex;
+    color: var(--a-secondary);
+
+    button {
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--a-secondary);
+    }
+
+    &:nth-last-child(1) {
+      color: var(--a-black);
+
+      button {
+        color: var(--a-black);
+      }
+    }
+
+    .separator {
+      margin: 1px 3px 0 3px;
+    }
+  }
+}
+</style>
diff --git a/components/AModal.vue b/components/AModal.vue
index 1adb0076..16516aae 100644
--- a/components/AModal.vue
+++ b/components/AModal.vue
@@ -300,7 +300,7 @@ defineExpose({
       // HEADER
       .a-card-head {
         display: flex;
-        padding: 16px;
+        padding: 16px 44px 16px 16px;
         border-bottom: 1px solid var(--a-grey-light);
         min-height: 87px;
 
diff --git a/components/ATabs.vue b/components/ATabs.vue
index 166ab5cb..f9daf2ab 100644
--- a/components/ATabs.vue
+++ b/components/ATabs.vue
@@ -15,6 +15,7 @@ export interface ATabsProps {
   slow?: boolean;
   modelValue?: string | number;
   color?: Colors;
+  shadow?: string;
 }
 
 export interface ATabsEmits {
@@ -28,12 +29,13 @@ const props = withDefaults(defineProps<ATabsProps>(), {
   selected: undefined,
   modelValue: undefined,
   color: "tertiary",
+  shadow: "#fafafa",
 });
 
 const mainColor = computed(() => props.color);
 
 const color = useColor(mainColor);
-const colorLight = useColor(mainColor, "lightest");
+// const colorLight = useColor(mainColor, "lightest");
 
 const activeValue = computed({
   get() {
@@ -51,7 +53,7 @@ function toggle(value: string) {
 </script>
 
 <template>
-  <div class="a-tabs">
+  <div class="a-tabs" :style="{ '--shadow': shadow }">
     <div class="a-tabs-container">
       <div
         v-for="(tab, key) in tabs"
@@ -100,164 +102,185 @@ function toggle(value: string) {
 </template>
 
 <style scoped lang="scss">
-.a-tabs-container {
-  display: flex;
-  flex-wrap: wrap;
-
-  .a-tab {
+.a-tabs {
+  .a-tabs-container {
+    position: relative;
     display: flex;
-    outline-offset: 10px;
-    border-bottom: 2px solid var(--a-grey-light);
-    /* transition: background 0.25s ease-in-out; */
-
-    &:nth-last-child(1) {
-      a {
-        padding-right: 0;
-      }
-    }
+    overflow-x: scroll;
+    flex-wrap: wrap;
 
-    a {
-      position: relative;
-      padding: 15px 20px 15px 0;
-      color: var(--a-grey);
-      font-size: 16px;
-      font-weight: 500;
-      transition: color 0.25s ease-in-out;
-
-      //IF IMG OR SVG ADD
-      span {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-
-        :slotted(img),
-        :slotted(svg) {
-          width: 15px;
-
-          path {
-            fill: var(--a-grey);
-            transition: fill 0.25s ease-in-out;
-          }
-        }
-      }
-    }
+    .a-tab {
+      display: flex;
+      outline-offset: 10px;
+      border-bottom: 2px solid var(--a-grey-light);
 
-    &.is-active {
       &:nth-last-child(1) {
         a {
           padding-right: 0;
+        }
+      }
 
-          &:after {
-            animation: appearLast 0.25s ease-in-out forwards;
+      a {
+        position: relative;
+        padding: 15px 20px 15px 0;
+        color: var(--a-grey);
+        font-size: 16px;
+        font-weight: 500;
+        transition: color 0.25s ease-in-out;
+        white-space: nowrap;
+
+        //IF IMG OR SVG ADD
+        span {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          :slotted(img),
+          :slotted(svg) {
+            width: 15px;
+
+            path {
+              fill: var(--a-grey);
+              transition: fill 0.25s ease-in-out;
+            }
           }
         }
       }
 
-      a {
-        color: var(--a-black);
-
-        &:after {
-          content: "";
-          position: absolute;
-          width: 0%;
-          height: 2px;
-          background: v-bind(color);
-          bottom: -2px;
-          left: 0;
-          animation: appear 0.25s ease-in-out forwards;
+      &.is-active {
+        &:nth-last-child(1) {
+          a {
+            padding-right: 0;
+
+            &:after {
+              animation: appearLast 0.25s ease-in-out forwards;
+            }
+          }
         }
 
-        @keyframes appear {
-          0% {
+        a {
+          color: var(--a-black);
+
+          &:after {
+            content: "";
+            position: absolute;
             width: 0%;
+            height: 2px;
+            background: v-bind(color);
+            bottom: -2px;
+            left: 0;
+            animation: appear 0.25s ease-in-out forwards;
+
+            @media screen and (max-width: 767px) {
+              animation: appearM 0.25s ease-in-out forwards;
+            }
           }
-          100% {
-            width: calc(100% - 20px);
+
+          @keyframes appear {
+            0% {
+              width: 0%;
+            }
+            100% {
+              width: calc(100% - 20px);
+            }
           }
-        }
 
-        @keyframes appearLast {
-          0% {
-            width: 0%;
+          @keyframes appearM {
+            0% {
+              width: 0%;
+            }
+            100% {
+              width: calc(100% - 9px);
+            }
           }
-          100% {
-            width: calc(100%);
+
+          @keyframes appearLast {
+            0% {
+              width: 0%;
+            }
+            100% {
+              width: calc(100%);
+            }
           }
-        }
 
-        //IF IMG OR SVG ADD
-        span {
-          :slotted(img),
-          :slotted(svg) {
-            path {
-              fill: v-bind(color);
+          //IF IMG OR SVG ADD
+          span {
+            :slotted(img),
+            :slotted(svg) {
+              path {
+                fill: v-bind(color);
+              }
             }
           }
         }
       }
-    }
 
-    &:hover {
-      /* background: v-bind(colorLight); */
+      &:hover {
+        /* background: v-bind(colorLight); */
 
-      a {
-        color: v-bind(color);
-
-        //IF IMG OR SVG ADD
-        span {
-          :slotted(img),
-          :slotted(svg) {
-            path {
-              fill: v-bind(color);
+        a {
+          color: v-bind(color);
+
+          //IF IMG OR SVG ADD
+          span {
+            :slotted(img),
+            :slotted(svg) {
+              path {
+                fill: v-bind(color);
+              }
             }
           }
         }
       }
-    }
 
-    &:focus {
-      /* background: v-bind(colorLight); */
+      &:focus {
+        /* background: v-bind(colorLight); */
 
-      a {
-        -webkit-box-shadow: inset 0px 0px 0px 1px var(--a-info);
-        -moz-box-shadow: inset 0px 0px 0px 1px var(--a-info);
-        box-shadow: inset 0px 0px 0px 1px var(--a-info);
-        border-radius: 5px;
-        color: v-bind(color);
+        a {
+          -webkit-box-shadow: inset 0px 0px 0px 1px var(--a-info);
+          -moz-box-shadow: inset 0px 0px 0px 1px var(--a-info);
+          box-shadow: inset 0px 0px 0px 1px var(--a-info);
+          border-radius: 5px;
+          color: v-bind(color);
+        }
       }
     }
-  }
-
-  @media screen and (max-width: 767px) {
-    .a-tab {
-      a {
-        padding: 2px 9px 2px 9px;
-        font-size: 10px;
-
-        span {
-          height: 14px;
-          gap: 5px;
 
-          :slotted(img),
-          :slotted(svg) {
-            width: 9px;
-          }
-        }
-      }
+    .tab-notif {
+      margin-top: 3px;
+      height: 15px;
+      width: 22px;
+      background: var(--a-primary-lightest);
+      color: var(--a-primary);
+      font-size: 8px;
+      border-radius: 50px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 
-  .tab-notif {
-    margin-top: 3px;
-    height: 15px;
-    width: 22px;
-    background: var(--a-primary-lightest);
-    color: var(--a-primary);
-    font-size: 8px;
-    border-radius: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  @media screen and (max-width: 1024px) {
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 20px;
+      height: 56px;
+      background: linear-gradient(
+        to right,
+        var(--a-transparent),
+        var(--shadow) 100%
+      );
+      top: 0;
+      right: 0;
+    }
+
+    .a-tabs-container {
+      flex-wrap: nowrap;
+      padding-right: 20px;
+    }
   }
 }
 </style>
diff --git a/components/ATextarea.vue b/components/ATextarea.vue
index 55cadf1d..8c04d393 100644
--- a/components/ATextarea.vue
+++ b/components/ATextarea.vue
@@ -81,6 +81,7 @@ const color = useColor(mainColor);
 
     .textarea {
       font-family: inherit;
+      background-color: inherit;
     }
 
     &::after {
@@ -90,7 +91,7 @@ const color = useColor(mainColor);
       left: 0;
       width: 100%;
       height: 30px;
-      background: var(--a-white);
+      background-color: inherit;
       pointer-events: none;
       border-radius: 10px;
     }
diff --git a/index.scss b/index.scss
index 89fda905..87041ea7 100644
--- a/index.scss
+++ b/index.scss
@@ -4,3 +4,5 @@
 @import "./scss/_font.scss";
 @import "./scss/layout.scss";
 @import "./scss/scrollbar.scss";
+@import "./scss/notyf.scss";
+@import "./scss/typography.scss";
diff --git a/scss/notyf.scss b/scss/notyf.scss
new file mode 100644
index 00000000..88702ddf
--- /dev/null
+++ b/scss/notyf.scss
@@ -0,0 +1,73 @@
+.notyf {
+  .notyf__toast {
+    border-radius: 5px;
+    font-size: 12px;
+
+    &.notyf__toast--default {
+      border: 1px solid var(--a-grey-light) !important;
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-grey-darker) !important;
+      }
+    }
+
+    &.notyf__toast--warning {
+      border: 1px solid var(--a-warning-light);
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-warning-darker) !important;
+      }
+    }
+
+    &.notyf__toast--success {
+      border: 1px solid var(--a-success-light);
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-success-darker) !important;
+      }
+    }
+
+    &.notyf__toast--info {
+      border: 1px solid var(--a-info-light);
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-info-darker) !important;
+      }
+    }
+
+    &.notyf__toast--error {
+      border: 1px solid var(--a-danger-light);
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-danger-darker) !important;
+      }
+    }
+
+    .notyf__wrapper {
+      padding: 15px 20px;
+
+      .notyf__dismiss {
+        .notyf__dismiss-btn {
+          background-color: transparent;
+          opacity: 1;
+
+          &:hover {
+            opacity: 0.5;
+          }
+
+          &::before {
+            background: var(--a-black);
+            width: 1px;
+            height: 10px;
+          }
+
+          &::after {
+            background: var(--a-black);
+            width: 1px;
+            height: 10px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/scss/typography.scss b/scss/typography.scss
new file mode 100644
index 00000000..619a7624
--- /dev/null
+++ b/scss/typography.scss
@@ -0,0 +1,62 @@
+// HEADING & SUBHEAD
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-weight: 700;
+
+  &h1 {
+    font-size: 36px;
+  }
+
+  &h2 {
+    font-size: 32px;
+  }
+
+  &h3 {
+    font-size: 28px;
+  }
+
+  &h4 {
+    font-size: 24px;
+  }
+
+  &h5 {
+    font-size: 20px;
+  }
+
+  &.subhead {
+    font-weight: 500;
+  }
+}
+
+// BODY MEDIUM & REGULAR
+p {
+  font-size: 14px;
+  font-weight: 400;
+
+  &.p1 {
+    font-size: 20px;
+  }
+
+  &.p2 {
+    font-size: 16px;
+  }
+
+  &.p3 {
+    font-size: 14px;
+  }
+
+  &.p4 {
+    font-size: 12px;
+  }
+
+  &.p5 {
+    font-size: 10px;
+  }
+
+  &.medium {
+    font-weight: 500;
+  }
+}
diff --git a/stores/notification.ts b/stores/notification.ts
index e0f6869d..c3a0f96d 100644
--- a/stores/notification.ts
+++ b/stores/notification.ts
@@ -4,18 +4,19 @@ import "notyf/notyf.min.css";
 import { Notyf } from "notyf";
 import { useColor } from "./color";
 
-const getNotyf = () : Notyf => {
-  if((window as any).notyf === undefined) {
+const getNotyf = (): Notyf => {
+  if ((window as any).notyf === undefined) {
     (window as any).notyf = new Notyf({
-      duration: 5000,
+      duration: 50000,
+      dismissible: true,
       position: {
         x: "right",
         y: "top",
-      }
+      },
     });
   }
   return (window as any).notyf;
-}
+};
 
 class Notification {
   private options: Partial<INotyfNotificationOptions>;
@@ -37,52 +38,39 @@ class Notification {
 }
 
 export const useNotification = createGlobalState(() => {
-  const colorInfo = useColor("info");
-  const colorSuccess = useColor("success");
-  const colorError = useColor("danger");
-  return {
-    dismissAll: () => getNotyf().dismissAll(),
-    success(payload: MaybeRef<string | Partial<INotyfNotificationOptions>>) {
-      let payloadValue = toValue(payload);
-
-      if (typeof payloadValue === "string") 
-        payloadValue = {
-          message: payloadValue
-        };
-      
-      payloadValue.type = "success";
-      payloadValue.background = colorSuccess.value;
-      const notification = new Notification(payloadValue)
-      notification.show();
-      return notification;
-    },
-    error: (payload: MaybeRef<string | Partial<INotyfNotificationOptions>>) => {
-      let payloadValue = toValue(payload);
+  const colors = {
+    default: useColor("grey-lightest"),
+    warning: useColor("warning-lightest"),
+    success: useColor("success-lightest"),
+    info: useColor("info-lightest"),
+    error: useColor("danger-lightest"),
+  };
 
-      if (typeof payloadValue === "string") 
-        payloadValue = {
-          message: payloadValue
-        };
-      
-      payloadValue.type = "error";
-      payloadValue.background = colorError.value;
-      const notification = new Notification(payloadValue)
-      notification.show();
-      return notification;
-    },
-    info: (payload: MaybeRef<string | Partial<INotyfNotificationOptions>>) => {
-      let payloadValue = toValue(payload);
+  const createNotification = (
+    type: keyof typeof colors,
+    payload: MaybeRef<string | Partial<INotyfNotificationOptions>>
+  ) => {
+    let payloadValue = toValue(payload);
 
-      if (typeof payloadValue === "string") 
-        payloadValue = {
-          message: payloadValue
-        };
-      
-      payloadValue.type = "info";
-      payloadValue.background = colorInfo.value;
-      const notification = new Notification(payloadValue)
-      notification.show();
-      return notification;
+    if (typeof payloadValue === "string") {
+      payloadValue = { message: payloadValue };
     }
+
+    // payloadValue.type = type;
+    payloadValue.className = `notyf__toast--${type}`;
+    payloadValue.background = colors[type].value;
+
+    const notification = new Notification(payloadValue);
+    notification.show();
+    return notification;
+  };
+
+  return {
+    dismissAll: () => getNotyf().dismissAll(),
+    default: (payload) => createNotification("default", payload),
+    warning: (payload) => createNotification("warning", payload),
+    success: (payload) => createNotification("success", payload),
+    info: (payload) => createNotification("info", payload),
+    error: (payload) => createNotification("error", payload),
   };
 });
diff --git a/stories/components/ALinearBreadCrumb.story.vue b/stories/components/ALinearBreadCrumb.story.vue
new file mode 100644
index 00000000..787be69e
--- /dev/null
+++ b/stories/components/ALinearBreadCrumb.story.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import ALinearBreadCrumb from "../../components/ALinearBreadCrumb.vue";
+import "../../index.scss";
+import { ref } from "vue";
+
+const path = ref("Step I/Step II/Step III");
+const path2 = ref("Step I-Step II-Step III-Step IV");
+
+const updatePath = (newPath: string) => {
+  path.value = newPath;
+};
+
+const updatePath2 = (newPath: string) => {
+  path2.value = newPath;
+};
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 400 }">
+    <Variant title="default">
+      <ALinearBreadCrumb :path="path" @updatePath="updatePath" />
+    </Variant>
+    <Variant title="splitChar/separator">
+      <ALinearBreadCrumb
+        :path="path2"
+        splitChar="-"
+        separator="*"
+        @updatePath="updatePath2"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# ALinearBreadCrumb
+
+The `ALinearBreadCrumb` component is a simple breadcrumb component that allows users to navigate through a hierarchy of tabs.
+
+## Usage
+
+The `ALinearBreadCrumb` component offers the following options:
+
+- `path` (string, required): The value of the currently selected tab.
+- `updatePath` (function, required): A function that updates the value of the currently selected tab.
+- `splitChar` (string, optional, default: "/"): The character used to split the path into segments.
+- `separator` (string, optional, default: "/"): The character used visualy to separate the segments in the breadcrumb.
+</docs>
diff --git a/stories/components/ALoader.story.vue b/stories/components/ALoader.story.vue
index cf62ec53..5bd37c82 100644
--- a/stories/components/ALoader.story.vue
+++ b/stories/components/ALoader.story.vue
@@ -9,17 +9,15 @@ import "../../index.scss";
     <Variant title="default">
       <ALoader />
     </Variant>
+    <Variant title="color">
+      <ALoader color="tertiary" />
+    </Variant>
     <Variant title="button">
-      <AButton color="tertiary" size="large">
+      <AButton color="tertiary">
         <ALoader />
       </AButton>
     </Variant>
-    <Variant title="color">
-      <AButton color="secondary" full>
-        <ALoader color="secondary" />
-      </AButton>
-    </Variant>
-    <Variant title="color">
+    <Variant title="button/color">
       <AButton color="warning" full>
         <ALoader color="tertiary" />
       </AButton>
diff --git a/stories/components/ASelect.story.vue b/stories/components/ASelect.story.vue
index aef75313..aec3af92 100644
--- a/stories/components/ASelect.story.vue
+++ b/stories/components/ASelect.story.vue
@@ -77,4 +77,14 @@ The `ASelect` component accepts the following properties:
 - `placeholder` (string, optional): Placeholder text for the input. Default is "Type your tag..".
 - `color` (string, optional): Specifies the color of the input.
 - `tag-color` (string, optional): Specifies the color of the tag.
+- `mode` (string, optional): Specifies the mode of the select input. Possible values are `single` and `multiple`. Default is `tags`.
+- `disabled` (boolean, optional): Disables the input. Default is `false`.
+- `createOption` (boolean, optional): Allows the creation of new options. Default is `false`.
+- `openDirection` (string, optional): Specifies the direction in which the dropdown should open. Possible values are `top` and `bottom`.
+- `required` (boolean, optional): Marks the input as required. Default is `false`.
+- `searchable` (boolean, optional): Enables search functionality. Default is `true`.
+- `name` (string, optional): Specifies the name attribute of the input.
+- `label` (string, optional): Specifies the label text.
+- `closeOnSelect` (boolean, optional): Determines whether the dropdown should close after selecting an option. Default is `true`.
+- `appendToBody` (boolean, optional): Appends the dropdown to the body. Default is `false`.
 </docs>
diff --git a/stories/components/ATabs.story.vue b/stories/components/ATabs.story.vue
index 9094e888..85137030 100644
--- a/stories/components/ATabs.story.vue
+++ b/stories/components/ATabs.story.vue
@@ -3,7 +3,13 @@ import ATabs from "../../components/ATabs.vue";
 import AIcon from "../../components/AIcon.vue";
 import "../../index.scss";
 
-const tabs = [
+const tabs1 = [
+  { label: "Home", value: "home" },
+  { label: "Profile", value: "profile" },
+  { label: "Settings", value: "settings" },
+  { label: "About", value: "about" },
+];
+const tabs2 = [
   { label: "Home", value: "home", icon: "home", notif: "8" },
   { label: "Profile", value: "profile", icon: "account_circle", notif: "27" },
   { label: "Settings", value: "settings", icon: "settings", notif: "10" },
@@ -14,16 +20,19 @@ const tabs = [
 <template>
   <Story :layout="{ type: 'grid', width: 400 }">
     <Variant title="default">
-      <ATabs :tabs="tabs" />
+      <ATabs :tabs="tabs1" />
     </Variant>
     <Variant title="with initial selection">
-      <ATabs :tabs="tabs" modelValue="profile" />
+      <ATabs :tabs="tabs1" modelValue="profile" />
     </Variant>
     <Variant title="custom color">
-      <ATabs :tabs="tabs" color="primary" modelValue="settings" />
+      <ATabs :tabs="tabs1" color="primary" modelValue="settings" />
+    </Variant>
+    <Variant title="with notif">
+      <ATabs :tabs="tabs2" />
     </Variant>
-    <Variant title="slow transition">
-      <ATabs :tabs="tabs" color="success" modelValue="home" slow>
+    <Variant title="with icon">
+      <ATabs :tabs="tabs2" color="success" modelValue="home" slow>
         <template #tab> </template>
         <template #tab-link-label="{ tab }">
           <AIcon :icon="tab.icon" type="rounded" />
diff --git a/stories/components/ATypography.story.vue b/stories/components/ATypography.story.vue
new file mode 100644
index 00000000..df42397f
--- /dev/null
+++ b/stories/components/ATypography.story.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import "../../index.scss";
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 400 }">
+    <Variant title="Heading">
+      <h1>Heading h1</h1>
+      <h2>Heading h2</h2>
+      <h3>Heading h3</h3>
+      <h4>Heading h4</h4>
+      <h5>Heading h5</h5>
+    </Variant>
+    <Variant title="Subhead">
+      <h1 class="subhead">Subhead h1 -> 'subhead'</h1>
+      <h2 class="subhead">Subhead h2 -> 'subhead'</h2>
+      <h3 class="subhead">Subhead h3 -> 'subhead'</h3>
+      <h4 class="subhead">Subhead h4 -> 'subhead'</h4>
+      <h5 class="subhead">Subhead h5 -> 'subhead'</h5>
+    </Variant>
+    <Variant title="Body medium">
+      <p class="p1 medium">Body -> 'p1 medium'</p>
+      <p class="p2 medium">Body -> 'p2 medium'</p>
+      <p class="p3 medium">Body -> 'p3 medium'</p>
+      <p class="p4 medium">Body -> 'p4 medium'</p>
+      <p class="p5 medium">Body -> 'p5 medium'</p>
+    </Variant>
+    <Variant title="Body regular">
+      <p class="p1">Body regular -> 'p1'</p>
+      <p class="p2">Body regular -> 'p2'</p>
+      <p class="p3">Body regular -> 'p3'</p>
+      <p class="p4">Body regular -> 'p4'</p>
+      <p class="p5">Body regular -> 'p5'</p>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# ATypography
+
+The `ATypography` component is a simple component to display text with different styles.
+</docs>
diff --git a/stories/stores/notification.story.vue b/stories/stores/notification.story.vue
index 2986244e..683c6bab 100644
--- a/stories/stores/notification.story.vue
+++ b/stories/stores/notification.story.vue
@@ -4,32 +4,65 @@ import "../../index.scss";
 import { useNotification } from "../../stores/notification";
 
 const notification = useNotification();
-
 </script>
 <template>
   <Story :layout="{ type: 'grid', width: 200 }">
+    <Variant title="default">
+      <AButton @click="notification.default('Default Text')" color="grey-light"
+        >Default</AButton
+      >
+    </Variant>
+    <Variant title="warning">
+      <AButton
+        @click="notification.warning('Warning Text')"
+        color="warning-light"
+        >Warning</AButton
+      >
+    </Variant>
     <Variant title="success">
-      <AButton @click="notification.success('Success')" color="success">Success</AButton>
+      <AButton
+        @click="notification.success('Success Text')"
+        color="success-light"
+        >Success</AButton
+      >
+    </Variant>
+    <Variant title="info">
+      <AButton @click="notification.info('Info Text')" color="info-light"
+        >Info</AButton
+      >
     </Variant>
     <Variant title="error">
-      <AButton @click="notification.error('Success')" color="danger">Error</AButton>
+      <AButton @click="notification.error('Error Text')" color="danger"
+        >Error</AButton
+      >
     </Variant>
   </Story>
 </template>
 
 <docs lang="md">
-  ## useNotification
+## useNotification
+
+The `useNotification` function is a custom hook that provides methods for displaying success and error notifications.
+
+### Methods
+
+### default(message: string)
+
+Displays a default notification with the specified message.
+
+#### warning(message: string)
 
-  The `useNotification` function is a custom hook that provides methods for displaying success and error notifications.
+Displays a warning notification with the specified message.
 
-  ### Methods
+#### success(message: string)
 
-  #### success(message: string)
+Displays a success notification with the specified message.
 
-  Displays a success notification with the specified message.
+#### info(message: string)
 
-  #### error(message: string)
+Displays an info notification with the specified message.
 
-  Displays an error notification with the specified message.
+#### error(message: string)
 
+Displays an error notification with the specified message.
 </docs>