diff --git a/src/base/variable.less b/src/base/variable.less
index 095ed6e3..cf3c4f03 100644
--- a/src/base/variable.less
+++ b/src/base/variable.less
@@ -160,11 +160,11 @@
 @ColorSecondaryGrey60: var(--ColorSecondaryGrey60, #b5b5b5);
 @ColorSecondaryGrey40: var(--ColorSecondaryGrey40, #e0e0e0);
 @ColorSecondaryGrey20: var(--ColorSecondaryGrey20, #f5f5f5);
-@ColorSparkle20: var(--ColorSparkle20, #e8faf7);
-@ColorSparkle30: var(--ColorSparkle30, #a7f6e9);
-@ColorSparkle40: var(--ColorSparkle40, #7aebd9);
+@ColorSparkle20: var(--ColorSparkle20, #e5f1f7);
+@ColorSparkle30: var(--ColorSparkle30,#89dcff);
+@ColorSparkle40: var(--ColorSparkle40, #67c3ef);
 @ColorSparkle50: var(--ColorSparkle50, #1eccb0);
-@ColorSparkle60: var(--ColorSparkle60, #1e7b74);
+@ColorSparkle60: var(--ColorSparkle60, #0c5273);
 @ColorSparkle70: var(--ColorSparkle70, #0e5c4f);
 @ColorSparkle80: var(--ColorSparkle80, #08332c);
 @ColorSparkleInverse: var(--ColorSparkleInverse, #08332c);
diff --git a/src/components/NAvatar/NAvatar.vue b/src/components/NAvatar/NAvatar.vue
new file mode 100644
index 00000000..e661c6e6
--- /dev/null
+++ b/src/components/NAvatar/NAvatar.vue
@@ -0,0 +1,124 @@
+<template>
+    <div :style="avatarStyle" 
+    :class="{
+      'hover-bg': kind === 'image' && isClickable,
+      'hover-svg': kind === 'default' && isClickable,
+      'hover-initials': kind === 'initials' && isClickable
+    }"
+    aria-label="Avatar">
+      <img v-if="image && kind === 'image'" :src="image" alt="User Avatar" :style="imageStyle" />
+      <span v-else-if="initials && kind === 'initials'" class="textStyle"> {{ userInitials }}</span>
+      <svg v-else viewBox="0 0 24 24"  class="custom-fill-color" xmlns="http://www.w3.org/2000/svg" :transform="iconScaleTransform">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M 10.78 10.84 C 11.5508 11.0561 12.3652 11.0631 13.1396 10.8604 C 13.914 10.6577 14.6204 10.2525 15.1865 9.68648 C 15.7525 9.12045 16.1577 8.41396 16.3604 7.63957 C 16.5631 6.86518 16.5561 6.05078 16.34 5.28001 C 16.1352 4.53403 15.7399 3.85415 15.1929 3.30715 C 14.6459 2.76014 13.966 2.36482 13.22 2.16001 C 12.4492 1.94392 11.6348 1.93688 10.8604 2.1396 C 10.086 2.34232 9.37956 2.7475 8.81353 3.31353 C 8.2475 3.87956 7.84232 4.58605 7.6396 5.36044 C 7.43688 6.13484 7.44392 6.94923 7.66 7.72001 C 7.86481 8.46598 8.26014 9.14586 8.80714 9.69286 C 9.35415 10.2399 10.034 10.6352 10.78 10.84 Z M 12 12 C 9.87827 12 7.84344 12.8429 6.34315 14.3432 C 4.84285 15.8434 4 17.8783 4 20 C 4 20.5304 4.21071 21.0391 4.58579 21.4142 C 4.96086 21.7893 5.46957 22 6 22 H 18 C 18.5304 22 19.0391 21.7893 19.4142 21.4142 C 19.7893 21.0391 20 20.5304 20 20 C 20 17.8783 19.1571 15.8434 17.6569 14.3432 C 16.1566 12.8429 14.1217 12 12 12 Z"
+        ></path>
+      </svg>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name:"nitrozen-avatar",
+    props: {
+      size: {
+        type: String,
+        default: "medium",
+      },
+      kind: {
+        type: String,
+        default: "default"
+      },
+      initials: {
+        type: String,
+        default: ""
+      },
+      image: {
+        type: String,
+      },
+      isClickable: {
+        type: Boolean,
+        default:false
+      }
+    },
+    computed: {
+      avatarStyle() {
+        const sizes = {
+          small: "1.5rem",
+          medium: "2rem",
+          large: "2.5rem",
+          xsmall : "1rem",
+          xlarge: "3rem",
+          xxlarge: "7.5rem"
+
+        };
+  
+        const sizeValue = sizes[this.size] || sizes["medium"];
+        return {
+          width: sizeValue,
+          height: sizeValue,
+        };
+      },
+    iconScaleTransform() {
+      const scaleFactor = 0.7;
+      return `scale(${scaleFactor})`;
+    },
+    imageStyle() {
+      return {
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        objectFit:"cover"
+      };
+    },
+    userInitials() {
+      const names = this.initials.trim().split(" ");
+      if (names.length >= 2) {
+        return names[0][0].toUpperCase() + names[1][0].toUpperCase();
+      } else {
+        return names[0][0].toUpperCase() + names[0][1].toUpperCase();
+      }
+    },
+    },
+  };
+  </script>
+  
+  <style lang="less" scoped>
+  @import "./../../base/base.less";
+
+  div[aria-label="Avatar"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: @ColorSparkle20;
+  }
+  
+div[aria-label="Avatar"].hover-bg:hover img{
+  filter: brightness(110%);
+}
+
+div[aria-label="Avatar"].hover-svg:hover,
+div[aria-label="Avatar"].hover-svg:hover svg path {
+  fill: @ColorPrimary60;
+}
+
+div[aria-label="Avatar"].hover-initials:hover {
+  background: @ColorSparkle40;
+}
+  .custom-fill-color path {
+  fill: @ColorPrimary50;
+  }
+
+  .textStyle{
+    font-family: @PrimaryFont;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5;
+    letter-spacing: -0.0044rem;
+    text-transform: none;
+    color: @ColorSparkle60;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/NAvatar/index.js b/src/components/NAvatar/index.js
new file mode 100644
index 00000000..bd9bd2c3
--- /dev/null
+++ b/src/components/NAvatar/index.js
@@ -0,0 +1,2 @@
+import NAvatar from './NAvatar.vue';
+export default NAvatar;
\ No newline at end of file
diff --git a/src/components/NSearchBox/NSearchBox.vue b/src/components/NSearchBox/NSearchBox.vue
new file mode 100644
index 00000000..b2d4223c
--- /dev/null
+++ b/src/components/NSearchBox/NSearchBox.vue
@@ -0,0 +1,161 @@
+<template>
+    <div class="j-search-box has-prefix has-suffix search-container"
+    :class="{ 'disable-hover': disableHover }">
+        <span class="input-icon input-icon-prefix" tabindex="-1">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M10.004 2a7 7 0 015.6 11.19l6.11 6.1a1.002 1.002 0 01-.325 1.639.999.999 0 01-1.095-.219l-6.1-6.11A7 7 0 1110.004 2zm0 12a5 5 0 100-10 5 5 0 000 10z"
+                    fill="currentColor">
+                </path>
+            </svg>
+        </span>
+        <input type="search" :aria-label="label" :placeholder="label" v-model="searchText" class="hoverable" :style="{ paddingRight: showIcon ? '3em' :'1rem' }">
+        <span class="input-icon input-icon-suffix clickable hoverable" tabindex="0"
+        :style="{ width: showIcon ? '1.5em' : '0' }">
+            <img v-if="icon && showIcon" :src="icon" class="icon-image"/>
+        </span>
+    </div>
+</template>
+<script>
+export default {
+    name: "nitrozen-search-box",
+    props: {
+        kind: {
+        type: String,
+        default: "normal"
+      },
+      disableHover: {
+      type: Boolean,
+      default: false,
+    },
+      suffix:{
+        type: String,
+        default:''
+      },
+      label:{
+        type: String,
+        default: "Search Jio"
+      },
+      icon: {
+        type: String,
+      },
+    },
+  data() {
+    return{
+      searchText: "",
+      showIcon: true,
+    }
+  },
+  watch: {
+    searchText() {
+      this.showIcon = this.searchText === "";
+    },
+  }
+};
+
+</script>
+<style lang="less" scoped>
+@import "./../../base/base.less";
+.j-search-box input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 1em;
+  width: 1em;
+  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%232e31a1' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm3.71 12.29a1.002 1.002 0 01-.325 1.639 1 1 0 01-1.095-.219L12 13.41l-2.29 2.3a1 1 0 01-1.639-.325 1 1 0 01.219-1.095l2.3-2.29-2.3-2.29a1.004 1.004 0 011.42-1.42l2.29 2.3 2.29-2.3a1.004 1.004 0 011.42 1.42L13.41 12l2.3 2.29z'/></svg>");
+  background-repeat: no-repeat;
+  background-size: 1em;
+  background-position: center;
+  appearance: none;
+}
+
+.icon-image{
+    width: 100%;
+}
+.j-search-box {
+    position: relative;
+    width: auto;
+}
+
+.j-search-box label{
+    font-size: 1.2rem;
+}
+
+.j-search-box .input-icon.input-icon-prefix {
+    color: @ColorPrimaryGrey80;
+    left: @SpacingS;
+}
+
+.j-search-box .input-icon {
+    position: absolute;
+    box-sizing: border-box;
+    top: 0;
+    line-height: 0;
+    border-radius: @RadiusSmall;
+    width: 1.5em;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    transform: none;
+    z-index: auto;
+}
+
+.j-search-box input {
+    font-family: @PrimaryFont;
+    font-weight: 500;
+    text-transform: none;
+    font-size: 0.25rem;
+    letter-spacing: -0.0044rem;
+    line-height: 1.5;
+    padding-right: 3em;
+}
+
+
+.j-search-box:not(.disable-hover):hover .input-icon-clear {
+  display: none;
+}
+
+.j-search-box.has-prefix input {
+    padding-left: 3em;
+}
+
+
+.j-search-box .input-icon svg {
+    height: 100%;
+    width: 100%;
+}
+
+.j-search-box .input-icon.input-icon-suffix {
+    color: @ColorPrimary60;
+    right: @SpacingS;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+// .search-container:hover .input-icon.input-icon-prefix svg path,
+// .search-container:hover input::placeholder {
+//   color: @DefaultColor;
+// }
+
+.j-search-box:not(.disable-hover):hover .input-icon.input-icon-prefix svg path,
+.j-search-box:not(.disable-hover):hover input::placeholder {
+  color: @DefaultColor;
+}
+.j-search-box input {
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    border-radius: @RadiusPill;
+    background-color: @ColorPrimaryGrey20;
+    width: 100%;
+    padding: @SpacingS @SpacingBase;
+    padding-right: @SpacingS;
+    color: @ColorPrimaryGrey100;
+    outline: none;
+    font-family: @PrimaryFont;
+    font-weight: 500;
+    text-transform: none;
+    font-size: 1.5rem;
+    letter-spacing: -0.08px;
+    line-height: 1.5;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NSearchBox/index.js b/src/components/NSearchBox/index.js
new file mode 100644
index 00000000..b2ff6031
--- /dev/null
+++ b/src/components/NSearchBox/index.js
@@ -0,0 +1,2 @@
+import NSearchBox from './NSearchBox.vue';
+export default NSearchBox;
\ No newline at end of file
diff --git a/src/components/NTab/NTab.vue b/src/components/NTab/NTab.vue
index a0d1911d..bc90dead 100644
--- a/src/components/NTab/NTab.vue
+++ b/src/components/NTab/NTab.vue
@@ -1,12 +1,14 @@
 <template>
   <div :id="id" class="nitrozen-tab-container">
-    <ul class="nitrozen-tab">
+    <ul class="nitrozen-tab" ref="tabsContainer">
       <nitrozen-tab-item
+        :icon="tabIcon[index]"
         @click="selectTab(index, item)"
-        :class="{ 'nitrozen-tab-active': activeTab == index }"
+        :class="{ 'nitrozen-tab-active': activeTab == index , 'inactive-tab': activeTab !== index}"
         v-for="(item, index) in tabItem"
         :key="index"
       >{{ item[label] || item }}</nitrozen-tab-item>
+      <div v-if="showBottomBar" class="bottom-bar" :style="activeTabStyle"></div>
     </ul>
   </div>
 </template>
@@ -16,7 +18,10 @@
 .nitrozen-tab-container {
   display: flex;
   width: 100%;
+  transition: background-color var(@TransitionsEaseQuick);
+
   .nitrozen-tab {
+    position: relative;
     display: flex;
     width: 100%;
     box-sizing: border-box;
@@ -27,11 +32,33 @@
     -ms-overflow-style: none;
     padding: 0;
     margin: 0;
+    transition: transform 0.3s ease;
     &::-webkit-scrollbar {
       display: none;
     }
   }
+
+  .bottom-bar {
+  position: absolute;
+  bottom: 0;
+  height: 3px; 
+  background-color: @ColorPrimary50;
+  transition: @TransitionsDurationRapid; 
+  z-index: 1;
+}
+
+.inactive-tab {
+  color: grey; /* Set the text color to grey for inactive tabs */
+}
+}
+.nitrozen-tab-item:hover:not(.nitrozen-tab-active) {
+  color: black; 
 }
+
+.nitrozen-tab-active{
+  color: black; 
+}
+
 </style>
 
 <script>
@@ -52,6 +79,10 @@ export default {
       default: () => [],
       required: true
     },
+    tabIcon:{
+      type:Array,
+      default: () => [],
+    },
     label: {
       type: String
     },
@@ -62,8 +93,44 @@ export default {
   },
   data() {
     return {
-      activeTab: this.activeIndex
+      activeTab: this.activeIndex,
+      currentOffset: 0,
+      showBottomBar: true,
+      activeTabElement: null
+    };
+  },
+  mounted() {
+    this.updateActiveTabStyle();
+  },
+  watch: {
+  tabItem: {
+    immediate: true,
+    handler(newVal) {
+      this.$nextTick(() => {
+        this.showBottomBar = newVal && newVal.length > 0;
+        this.updateActiveTabStyle();
+      });
+    },
+  },
+},
+  computed: {
+    activeTabStyle() {
+    if (this.activeTabElement) {
+      const activeTabElement = this.$refs.tabsContainer.children[this.activeTab];
+      const activeTabRect = activeTabElement.getBoundingClientRect();
+      const transformX = activeTabRect.left - this.$refs.tabsContainer.getBoundingClientRect().left;
+      const width = activeTabRect.width;
+      return {
+        transform: `translateX(${transformX}px)`,
+        width: `${width}px`
+      };
+    }
+
+    return {
+      display: 'none'
     };
+    },
+ 
   },
   methods: {
     selectTab: function(index, item) {
@@ -73,7 +140,15 @@ export default {
       };
       this.activeTab = index;
       this.$emit("tab-change", obj);
-    }
+      this.currentOffset = index * -100;
+      this.showBottomBar=true;
+      this.updateActiveTabStyle();
+    },
+    updateActiveTabStyle() {
+      if (this.$refs.tabsContainer && this.$refs.tabsContainer.children.length > 0) {
+        this.activeTabElement = this.$refs.tabsContainer.children[this.activeTab];
+      }
+    },
   }
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/NTabItem/NTabItem.vue b/src/components/NTabItem/NTabItem.vue
index 9989f5b0..274960a3 100644
--- a/src/components/NTabItem/NTabItem.vue
+++ b/src/components/NTabItem/NTabItem.vue
@@ -1,6 +1,11 @@
 <template>
   <li class="nitrozen-tab-item" v-on="$listeners">
-    <slot />
+    <div class="icon-container">
+      <img v-if = "icon" :src="icon" alt="Icon">
+    </div>
+    <div class="text-container">
+      <slot />
+    </div>
   </li>
 </template>
 
@@ -13,6 +18,10 @@ export default {
     id: {
       type: [Number, String],
       default: () => "nitrozen-tab-item" + NitrozenUuid()
+    },
+    icon: {
+      type: String,
+      default: ""
     }
   }
 };
@@ -25,13 +34,17 @@ export default {
   color: @TypographyPrimaryColor;
   font-family: @PrimaryFont;
   cursor: pointer;
-  margin-right: 24px;
-  padding-bottom: 24px;
-  font-size: 14px;
-  font-weight: 400;
+  padding: @SpacingS;
+  font-size: 18px;
+  font-weight: 500;
 }
-.nitrozen-tab-active {
-  color: @SecondaryColor;
-  border-bottom: 3px solid @SecondaryColor;
+.icon-container img {
+  width: @SpacingM;
+  height:  @SpacingM;
+  margin-right: @SpacingXs;
+}
+.text-container{
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 </style>
diff --git a/src/components/NTag/NTag.vue b/src/components/NTag/NTag.vue
new file mode 100644
index 00000000..0c043b0d
--- /dev/null
+++ b/src/components/NTag/NTag.vue
@@ -0,0 +1,104 @@
+<template>
+<span :class="['j-tag', { active: isActive, 'dark-blue-hover': kind === 'toggle' || kind === 'filter' }]"
+     aria-label="tag-label"
+     @click="handleClick">
+    <span class="j-text">
+        {{label}}
+    </span>
+    <i class="j-tag-icon" v-if="kind ==='filter'">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="!isActive">
+        <path d="M20 11h-7V4a1 1 0 00-2 0v7H4a1 1 0 000 2h7v7a1 1 0 002 0v-7h7a1 1 0 000-2z" fill="currentColor">
+    </path>
+</svg>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" v-else>
+    <path d="M13.41 12l6.3-6.29a1.004 1.004 0 00-1.42-1.42L12 10.59l-6.29-6.3a1.004 1.004 0 10-1.42 1.42l6.3 6.29-6.3 6.29a.999.999 0 000 1.42 1 1 0 001.42 0l6.29-6.3 6.29 6.3a1.001 1.001 0 001.639-.325 1 1 0 00-.22-1.095L13.41 12z" fill="currentColor">
+</path>
+</svg>
+</i>
+</span>
+</template>
+
+<style lang="less" scoped>
+@import "./../../base/base.less";
+.j-tag .j-tag-icon {
+    width: @SpacingBase;
+    box-sizing: content-box;
+    line-height: 0;
+    padding-left: @SpacingXxs;
+}
+.j-tag.active {
+    color: @ColorSparkle80;
+    background-color: @ColorSparkle20;
+    border-color: @ColorSparkle20;
+}
+
+.j-tag {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    min-width: @SpacingXl;
+    border-radius: @RadiusLarge;
+    padding: @SpacingXxs @SpacingS;
+    color: @ColorPrimaryGrey100;
+    background-color: rgba(0,0,0,0);
+    border: 1px solid @ColorPrimaryGrey80;
+    max-width: 100%;
+    transition: var(--transitions-default);
+}
+
+.j-tag .j-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: @PrimaryFont;
+}
+.j-tag.dark-blue-hover:hover {
+  background-color: @ColorSparkle30;
+}
+
+</style>
+
+<script>
+export default{
+    name: "nitrozen-tag",
+    props: {
+        kind: {
+        type: String,
+        default: "normal"
+      },
+      label: {
+        type: String,
+        required: true
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      active:{
+        type: Boolean,
+      }
+    },
+    data() {
+    return {
+        isActive: this.active,
+    };
+  },
+  computed: {
+    tagBackgroundColor() {
+      if (this.kind === "toggle" || this.kind === "filter") {
+        return this.isActive ? "@ColorSparkle20" : "white";
+      } else {
+        return this.isActive ? "@ColorSparkle20" : "";
+      }
+    },
+  },
+    methods: {
+    handleClick() {
+        if ((this.kind === "toggle" || this.kind === "filter") && !this.disabled) {
+        this.isActive = !this.isActive;
+      }
+    },
+}
+}
+
+</script>
\ No newline at end of file
diff --git a/src/components/NTag/index.js b/src/components/NTag/index.js
new file mode 100644
index 00000000..226f4e33
--- /dev/null
+++ b/src/components/NTag/index.js
@@ -0,0 +1,3 @@
+import NTag from './NTag.vue';
+
+export default NTag;
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index c85b82f3..6425db93 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -18,6 +18,9 @@ import NitrozenStepper from './NStepper';
 import NitrozenToggleBtn from './NToggleBtn';
 import NitrozenTooltip from './NTooltip';
 import NitrozenCustomForm from './NCustomForm';
+import NitrozenAvatar from './NAvatar';
+import NitrozenSearchBox from './NSearchBox'
+import NitrozenTag from './NTag';
 
 export {
     NitrozenAutocomplete,
@@ -40,4 +43,7 @@ export {
     NitrozenToggleBtn,
     NitrozenTooltip,
     NitrozenCustomForm,
+    NitrozenAvatar,
+    NitrozenSearchBox,
+    NitrozenTag
 }
diff --git a/src/pages/demo.vue b/src/pages/demo.vue
index b6264daf..af43b571 100644
--- a/src/pages/demo.vue
+++ b/src/pages/demo.vue
@@ -67,9 +67,50 @@
         <nitrozen-tab
           @tab-change="tabChange"
           :tabItem="fruits"
+          :tabIcon="fruitsIcon"
           :label="'name'"
         ></nitrozen-tab>
       </div>
+      <div class="main-div space-between">
+        <nitrozen-search-box
+        :icon="'https://cdn.pixelbin.io/v2/falling-surf-7c8bb8/fyndnp/wrkr/x5/products/pictures/item/free/original/bY8N9S67n-Test.png'">
+        </nitrozen-search-box>
+      </div>
+      <div class="main-div space-between">
+        <nitrozen-tag
+        :kind="'filter'"
+        :label="'Test tag'"
+        :active.sync="isActive">
+
+        </nitrozen-tag>
+      </div>
+      <div>
+        <nitrozen-avatar
+        :isClickable="true"
+        :size="'large'">
+        </nitrozen-avatar>
+        <nitrozen-avatar
+        :size="'xlarge'"
+        :kind="'initials'"
+        :isClickable="true"
+        :initials="'anand'">
+        </nitrozen-avatar>
+        <nitrozen-avatar
+        :isClickable="true"
+        :size="'xxlarge'"
+        :kind="'image'"
+        :image="'https://cdn.pixelbin.io/v2/falling-surf-7c8bb8/fyndnp/wrkr/x5/products/pictures/item/free/original/bY8N9S67n-Test.png'">
+        </nitrozen-avatar>
+        <nitrozen-avatar
+        :size="'small'">
+        </nitrozen-avatar>
+        <nitrozen-avatar
+        :size="'medium'">
+        </nitrozen-avatar>
+        <nitrozen-avatar
+        :size="'xsmall'">
+        </nitrozen-avatar>
+      </div>
       <div class="main-div">
         <nitrozen-stepper
           :elements="stepper.elements"
@@ -78,7 +119,7 @@
           @stepperClicked="stepperClicked"
         ></nitrozen-stepper>
         <div class="stepper-btn-container">
-          <nitrozen-button v-flat-btn @click="stepperNext"
+          <nitrozen-button  @click="stepperNext"
             >Next</nitrozen-button
           >
         </div>
@@ -94,142 +135,142 @@
 
       <!-- Flat Button -->
       <div class="main-div space-between">
-        <nitrozen-button v-flat-btn @click="someFunc"
+        <nitrozen-button  @click="someFunc"
           >Primary Flat {{ numberOfClick }}</nitrozen-button
         >
         <div class="hover-new">
-          <nitrozen-button v-flat-btn>Hover Flat</nitrozen-button>
+          <nitrozen-button >Hover Flat</nitrozen-button>
         </div>
-        <nitrozen-button v-flat-btn :showProgress="true"></nitrozen-button>
-        <nitrozen-button v-flat-btn :focused="true"
+        <nitrozen-button  :showProgress="true"></nitrozen-button>
+        <nitrozen-button  :focused="true"
           >Focused Flat</nitrozen-button
         >
-        <nitrozen-button v-flat-btn :disabled="true"
+        <nitrozen-button  :disabled="true"
           >Disabled Flat</nitrozen-button
         >
       </div>
 
       <!-- Flat Stroke Button -->
       <div class="main-div space-between">
-        <nitrozen-button v-stroke-btn>Primary Stroke</nitrozen-button>
+        <nitrozen-button >Primary Stroke</nitrozen-button>
         <div class="hover-new">
-          <nitrozen-button v-stroke-btn>Hover Stroke</nitrozen-button>
+          <nitrozen-button >Hover Stroke</nitrozen-button>
         </div>
-        <nitrozen-button v-stroke-btn :focused="true"
+        <nitrozen-button  :focused="true"
           >Focused Stroke</nitrozen-button
         >
-        <nitrozen-button v-stroke-btn :disabled="true"
+        <nitrozen-button  :disabled="true"
           >Disabled Stroke</nitrozen-button
         >
       </div>
 
       <!-- Rounded Button -->
       <div class="main-div space-between">
-        <nitrozen-button v-flat-btn :rounded="true">Rounded</nitrozen-button>
+        <nitrozen-button  :rounded="true">Rounded</nitrozen-button>
         <div class="hover-new">
-          <nitrozen-button v-flat-btn :rounded="true">Hover</nitrozen-button>
+          <nitrozen-button  :rounded="true">Hover</nitrozen-button>
         </div>
         <nitrozen-button
-          v-flat-btn
+          
           :rounded="true"
           :showProgress="true"
         ></nitrozen-button>
-        <nitrozen-button v-flat-btn :rounded="true" :focused="true"
+        <nitrozen-button  :rounded="true" :focused="true"
           >Focused</nitrozen-button
         >
-        <nitrozen-button v-flat-btn :rounded="true" :disabled="true"
+        <nitrozen-button  :rounded="true" :disabled="true"
           >Disabled</nitrozen-button
         >
       </div>
 
       <!-- Rounded Stroke Button -->
       <div class="main-div space-between">
-        <nitrozen-button v-stroke-btn :rounded="true">Rounded</nitrozen-button>
+        <nitrozen-button  :rounded="true">Rounded</nitrozen-button>
         <div class="hover-new">
-          <nitrozen-button v-stroke-btn :rounded="true">Hover</nitrozen-button>
+          <nitrozen-button  :rounded="true">Hover</nitrozen-button>
         </div>
-        <nitrozen-button v-stroke-btn :rounded="true" :focused="true"
+        <nitrozen-button  :rounded="true" :focused="true"
           >Focused</nitrozen-button
         >
-        <nitrozen-button v-stroke-btn :rounded="true" :disabled="true"
+        <nitrozen-button  :rounded="true" :disabled="true"
           >Disabled</nitrozen-button
         >
       </div>
 
       <!-- Secondary Flat Button -->
       <div class="main-div space-between">
-        <nitrozen-button v-flat-btn :theme="'secondary'"
+        <nitrozen-button  :theme="'secondary'"
           >Primary Small Flat</nitrozen-button
         >
-        <nitrozen-button v-flat-btn :theme="'secondary'"
+        <nitrozen-button  :theme="'secondary'"
         size="medium"
           >Primary Medium Flat</nitrozen-button
         >
-        <nitrozen-button v-flat-btn :theme="'secondary'"
+        <nitrozen-button  :theme="'secondary'"
         size="large"
           >Primary Large Flat</nitrozen-button
         >
         <div class="hover-new">
-          <nitrozen-button v-flat-btn :theme="'secondary'"
+          <nitrozen-button  :theme="'secondary'"
             >Hover Flat</nitrozen-button
           >
         </div>
         <nitrozen-button
-          v-flat-btn
+          
           :showProgress="true"
           :theme="'secondary'"
         ></nitrozen-button>
-        <nitrozen-button v-flat-btn :focused="true" :theme="'secondary'"
+        <nitrozen-button  :focused="true" :theme="'secondary'"
           >Focused Flat</nitrozen-button
         >
-        <nitrozen-button v-flat-btn :disabled="true" :theme="'secondary'"
+        <nitrozen-button  :disabled="true" :theme="'secondary'"
           >Disabled Flat</nitrozen-button
         >
       </div>
 
       <!-- Secondary Stroke Button -->
       <div class="main-div space-between">
-        <nitrozen-button v-stroke-btn :theme="'secondary'"
+        <nitrozen-button  :theme="'secondary'"
           >Primary</nitrozen-button
         >
         <div class="hover-new">
-          <nitrozen-button v-stroke-btn :theme="'secondary'"
+          <nitrozen-button  :theme="'secondary'"
             >Hover</nitrozen-button
           >
         </div>
-        <nitrozen-button v-stroke-btn :focused="true" :theme="'secondary'"
+        <nitrozen-button  :focused="true" :theme="'secondary'"
           >Focused Stroke</nitrozen-button
         >
-        <nitrozen-button v-stroke-btn :disabled="true" :theme="'secondary'"
+        <nitrozen-button  :disabled="true" :theme="'secondary'"
           >Disabled</nitrozen-button
         >
       </div>
 
       <!-- Secondary Rounded Button -->
       <div class="main-div space-between">
-        <nitrozen-button v-flat-btn :theme="'secondary'" :rounded="true"
+        <nitrozen-button  :theme="'secondary'" :rounded="true"
           >Rounded</nitrozen-button
         >
         <div class="hover-new">
-          <nitrozen-button v-flat-btn :theme="'secondary'" :rounded="true"
+          <nitrozen-button  :theme="'secondary'" :rounded="true"
             >Hover</nitrozen-button
           >
         </div>
         <nitrozen-button
-          v-flat-btn
+          
           :showProgress="true"
           :theme="'secondary'"
           :rounded="true"
         ></nitrozen-button>
         <nitrozen-button
-          v-flat-btn
+          
           :focused="true"
           :rounded="true"
           :theme="'secondary'"
           >Disabled</nitrozen-button
         >
         <nitrozen-button
-          v-flat-btn
+          
           :disabled="true"
           :rounded="true"
           :theme="'secondary'"
@@ -239,23 +280,23 @@
 
       <!-- Secondary Rounded Stroke Button -->
       <div class="main-div space-between">
-        <nitrozen-button v-stroke-btn :rounded="true" :theme="'secondary'"
+        <nitrozen-button  :rounded="true" :theme="'secondary'"
           >Primary</nitrozen-button
         >
         <div class="hover-new">
-          <nitrozen-button v-stroke-btn :rounded="true" :theme="'secondary'"
+          <nitrozen-button  :rounded="true" :theme="'secondary'"
             >Hover</nitrozen-button
           >
         </div>
         <nitrozen-button
-          v-stroke-btn
+          
           :rounded="true"
           :focused="true"
           :theme="'secondary'"
           >Focused</nitrozen-button
         >
         <nitrozen-button
-          v-stroke-btn
+          
           :rounded="true"
           :disabled="true"
           :theme="'secondary'"
@@ -267,12 +308,12 @@
       <div class="main-div">
         <div class="grouping">
           <div class="width-50">
-            <nitrozen-button v-flat-btn>Save</nitrozen-button>
-            <nitrozen-button v-stroke-btn>Cancel</nitrozen-button>
+            <nitrozen-button >Save</nitrozen-button>
+            <nitrozen-button >Cancel</nitrozen-button>
           </div>
 
           <div class="width-50">
-            <nitrozen-button v-flat-btn>Save</nitrozen-button>
+            <nitrozen-button >Save</nitrozen-button>
             <nitrozen-button>Cancel</nitrozen-button>
           </div>
         </div>
@@ -280,10 +321,10 @@
 
       <!-- Large Button -->
       <div class="main-div space-between">
-        <nitrozen-button v-flat-btn :size="'large'"
+        <nitrozen-button  :size="'large'"
           >Large Button</nitrozen-button
         >
-        <nitrozen-button v-flat-btn :size="'large'" :theme="'secondary'"
+        <nitrozen-button  :size="'large'" :theme="'secondary'"
           >Large Button</nitrozen-button
         >
       </div>
@@ -297,16 +338,16 @@
         <nitrozen-button :href="'https://google.com'" :focused="true"
           >Focused</nitrozen-button
         >
-        <!-- <nitrozen-button v-flat-btn :large="true" :theme="'secondary'">Large Button</nitrozen-button>       -->
+        <!-- <nitrozen-button  :large="true" :theme="'secondary'">Large Button</nitrozen-button>       -->
       </div>
 
       <div class="main-div space-between">
-        <nitrozen-button v-flat-btn :icon="'facebook'" :theme="'secondary'"
+        <nitrozen-button  :icon="'facebook'" :theme="'secondary'"
           >Facebook</nitrozen-button
         >
         <nitrozen-button
           @click="autofocusSearch = !autofocusSearch"
-          v-flat-btn
+          
           :icon="'bag'"
           :theme="'secondary'"
           >Bag</nitrozen-button
@@ -727,16 +768,16 @@
       </div>
 
       <div class="main-div space-between">
-        <nitrozen-button v-flat-btn @click="openDialog('alert')"
+        <nitrozen-button  @click="openDialog('alert')"
           >Alert Dialog</nitrozen-button
         >
-        <nitrozen-button v-flat-btn @click="openDialog('confirm')"
+        <nitrozen-button  @click="openDialog('confirm')"
           >Confirmation Dialog</nitrozen-button
         >
-        <nitrozen-button v-flat-btn @click="openDialog"
+        <nitrozen-button  @click="openDialog"
           >Select Dialog</nitrozen-button
         >
-        <nitrozen-button v-flat-btn @click="openDialog('choose')"
+        <nitrozen-button  @click="openDialog('choose')"
           >Choose Dialog</nitrozen-button
         >
       </div>
@@ -815,6 +856,7 @@ export default {
       multiSelect: [11,12,13,14,15,21,22,23,24,25],
       numberOfClick: 0,
       abcd: true,
+      isActive: false,
       singleCheckboxModel: true,
       inputModel: "Some Value",
       numberModel: 1,
@@ -905,12 +947,17 @@ export default {
           name: "Lemon",
         },
         {
-          name: "Lime",
+          name: "Discover",
         },
         {
           name: "Apple",
         },
       ],
+      fruitsIcon:[
+      "https://cdn.pixelbin.io/v2/falling-surf-7c8bb8/fyndnp/wrkr/x5/products/pictures/item/free/original/bY8N9S67n-Test.png",
+      "https://cdn.pixelbin.io/v2/falling-surf-7c8bb8/fyndnp/wrkr/x5/products/pictures/item/free/original/bY8N9S67n-Test.png",
+      "https://cdn.pixelbin.io/v2/falling-surf-7c8bb8/fyndnp/wrkr/x5/products/pictures/item/free/original/bY8N9S67n-Test.png"
+      ],
       dataItems: [
         "Tess",
         "Kurtas",