diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
index c3083c0977..ff180c3490 100644
--- a/examples/wrapper-components/react-javascript/src/App.js
+++ b/examples/wrapper-components/react-javascript/src/App.js
@@ -1,14 +1,16 @@
 import './App.css';
 import Link from './components/Link/Link';
-import SearchInput from './components/SearchInput/SearchInput';
+import SearchField from './components/SearchField/SearchField';
 import Spinner from './components/Spinner/Spinner';
 import NumberIndicator from './components/NumberIndicator/NumberIndicator';
 
 function App() {
   return (
     <div>
+      <h1>Stencil Framework integration - React + TS </h1>
+
       <h2>Search Field</h2>
-      <SearchInput />
+      <SearchField />
       <br />
 
       <h2>Spinner</h2>
diff --git a/examples/wrapper-components/react-javascript/src/components/SearchBar/SearchBar.js b/examples/wrapper-components/react-javascript/src/components/SearchBar/SearchBar.js
index f9f666d11d..2cc7b52c24 100644
--- a/examples/wrapper-components/react-javascript/src/components/SearchBar/SearchBar.js
+++ b/examples/wrapper-components/react-javascript/src/components/SearchBar/SearchBar.js
@@ -3,7 +3,7 @@ import { IfxSearchBar } from '@infineon/infineon-design-system-react';
 
 function SearchBar() {
   const handleSearch = (event) => {
-    console.log("handling search: ", event.detail?.detail)
+    console.log("handling search: ", event.detail)
   };
   return (
     <div  >
diff --git a/examples/wrapper-components/react-javascript/src/components/SearchField/SearchField.js b/examples/wrapper-components/react-javascript/src/components/SearchField/SearchField.js
new file mode 100644
index 0000000000..f2cb803a98
--- /dev/null
+++ b/examples/wrapper-components/react-javascript/src/components/SearchField/SearchField.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { IfxSearchField } from '@infineon/infineon-design-system-react';
+
+function SearchField() {
+  const handleSearch = (event) => {
+    console.log("handling input: ", event.detail)
+  };
+
+  return (
+    <div  >
+      <IfxSearchField disabled="false" size='m' show-delete-icon="true" onIfxInput={handleSearch}></IfxSearchField>
+    </div>
+  )
+}
+
+export default SearchField;
+
+
diff --git a/examples/wrapper-components/react-javascript/src/components/SearchInput/SearchInput.js b/examples/wrapper-components/react-javascript/src/components/SearchInput/SearchInput.js
deleted file mode 100644
index d68a4cdec7..0000000000
--- a/examples/wrapper-components/react-javascript/src/components/SearchInput/SearchInput.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { IfxIcon, IfxSearchInput } from '@infineon/infineon-design-system-react';
-
-function SearchInput() {
-  const handleSearch = (event) => {
-    console.log("handling input: ", event.detail?.detail)
-  };
-
-  return (
-    <div  >
-        <IfxSearchInput disabled="false" size='m' show-delete-icon="true" onIfxInput={handleSearch}></IfxSearchInput>
-    </div>
-  )
-}
-
-export default SearchInput;
-
-
diff --git a/examples/wrapper-components/react-typescript/src/App.tsx b/examples/wrapper-components/react-typescript/src/App.tsx
index 60bdb4766b..398ccca0ee 100644
--- a/examples/wrapper-components/react-typescript/src/App.tsx
+++ b/examples/wrapper-components/react-typescript/src/App.tsx
@@ -8,11 +8,11 @@ import SearchBar from './components/SearchBar/SearchBar';
 import Accordion from './components/Accordion/Accordion';
 import RadioButton from './components/RadioButton/RadioButton';
 
-import Spinner from './Components/Spinner/Spinner'
+import Spinner from './components/Spinner'
 
 import NumberIndicator from './components/NumberIndicator/NumberIndicator'
 
-import SearchInput from './components/SearchInput/SearchInput'
+import SearchField from './components/SearchField/SearchField'
 
 function App() {
  
@@ -56,7 +56,7 @@ function App() {
       <br />
 
       <h2>Search Field</h2>
-       <SearchInput />
+       <SearchField />
        <br />
 
        <h2>Search Bar</h2>
diff --git a/examples/wrapper-components/react-typescript/src/components/SearchBar/SearchBar.tsx b/examples/wrapper-components/react-typescript/src/components/SearchBar/SearchBar.tsx
index feddf5e8a5..cfdd3993f7 100644
--- a/examples/wrapper-components/react-typescript/src/components/SearchBar/SearchBar.tsx
+++ b/examples/wrapper-components/react-typescript/src/components/SearchBar/SearchBar.tsx
@@ -2,7 +2,7 @@ import { IfxSearchBar } from '@infineon/infineon-design-system-react';
 
 function SearchBar() {
   const handleSearch = (event: CustomEvent) => {
-    console.log("handling search: ", event.detail?.detail)
+    console.log("handling search: ", event.detail)
   };
   return (
     <div  >
diff --git a/examples/wrapper-components/react-typescript/src/components/SearchField/SearchField.tsx b/examples/wrapper-components/react-typescript/src/components/SearchField/SearchField.tsx
new file mode 100644
index 0000000000..9c242fa261
--- /dev/null
+++ b/examples/wrapper-components/react-typescript/src/components/SearchField/SearchField.tsx
@@ -0,0 +1,17 @@
+import {  IfxSearchField } from '@infineon/infineon-design-system-react';
+
+function SearchField() {
+  const handleSearch = (event: CustomEvent) => {
+    console.log("handling input: ", event.detail)
+  };
+
+  return (
+    <div  >
+        <IfxSearchField disabled={false} size='m' show-delete-icon="true" onIfxInput={handleSearch}></IfxSearchField>
+    </div>
+  )
+}
+
+export default SearchField;
+
+
diff --git a/examples/wrapper-components/react-typescript/src/components/SearchInput/SearchInput.tsx b/examples/wrapper-components/react-typescript/src/components/SearchInput/SearchInput.tsx
deleted file mode 100644
index afebd68255..0000000000
--- a/examples/wrapper-components/react-typescript/src/components/SearchInput/SearchInput.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { IfxIcon, IfxSearchInput } from '@infineon/infineon-design-system-react';
-
-function SearchInput() {
-  const handleSearch = (event: CustomEvent) => {
-    console.log("handling input: ", event.detail?.detail)
-  };
-
-  return (
-    <div  >
-        <IfxSearchInput disabled={false} size='m' show-delete-icon="true" onIfxInput={handleSearch}></IfxSearchInput>
-    </div>
-  )
-}
-
-export default SearchInput;
-
-
diff --git a/examples/wrapper-components/react-typescript/src/Components/Spinner/Spinner.tsx b/examples/wrapper-components/react-typescript/src/components/Spinner.tsx
similarity index 100%
rename from examples/wrapper-components/react-typescript/src/Components/Spinner/Spinner.tsx
rename to examples/wrapper-components/react-typescript/src/components/Spinner.tsx
diff --git a/examples/wrapper-components/vue-javascript/src/App.vue b/examples/wrapper-components/vue-javascript/src/App.vue
index 84a0ca956d..0178af2a75 100644
--- a/examples/wrapper-components/vue-javascript/src/App.vue
+++ b/examples/wrapper-components/vue-javascript/src/App.vue
@@ -1,6 +1,5 @@
 
 <template>
-  <SearchInput />
   <h1 class="header">Stencil Framework integration - Vue + JS </h1>
   <Alert />
   <Button />
@@ -8,6 +7,7 @@
   <RadioButton />
   <ProgressBar />
   <Search />
+  <SearchField />
   <TextInput />
   <Spinner />
   <Link />
@@ -16,8 +16,7 @@
 
 
 <script lang="ts" setup>
-import SearchInput from './components/SearchInput.vue'
-
+import SearchField from './components/SearchField.vue'
 import Alert from './components/Alert.vue'
 import Button from './components/Button.vue'
 import Checkbox from './components/Checkbox.vue'
@@ -31,6 +30,4 @@ import Link from './components/Link.vue'
 
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/examples/wrapper-components/vue-javascript/src/components/Link.vue b/examples/wrapper-components/vue-javascript/src/components/Link.vue
index 4508047ab0..5d76cf97e8 100644
--- a/examples/wrapper-components/vue-javascript/src/components/Link.vue
+++ b/examples/wrapper-components/vue-javascript/src/components/Link.vue
@@ -2,7 +2,10 @@
 
 <template>
   <div>
+    <h2>Link</h2>
     <ifx-link href="http://google.com" color="secondary" target="_blank" bold="" underline="">link</ifx-link>
+    <br />
+    <br />
   </div>
 </template>
 
diff --git a/examples/wrapper-components/vue-javascript/src/components/Search.vue b/examples/wrapper-components/vue-javascript/src/components/Search.vue
index eb3cbbdf2b..13572ee0b5 100644
--- a/examples/wrapper-components/vue-javascript/src/components/Search.vue
+++ b/examples/wrapper-components/vue-javascript/src/components/Search.vue
@@ -1,13 +1,6 @@
 <template>
   <div>
-    <h2>Search-Input</h2>
-    <h3>Using v-model</h3>
-    <br />
-    <ifx-search-input v-model="searchInput" style="width: 100%" show-close-button="true"></ifx-search-input>
-    <p>Search input: {{ searchInput }}</p>
-
-    <br />
-    <h2>Ifx-Search-Bar</h2>
+    <h2>Search-Bar</h2>
     <h3>Using v-model</h3>
     <ifx-search-bar v-model="searchBarModel" style="width: 100%" show-close-button="true"></ifx-search-bar>
     <p>Search bar : {{ searchBar }}</p>
@@ -20,7 +13,6 @@
 import { ref, computed, onMounted } from 'vue'
 
 const searchBar = ref('');
-const searchInput = ref('');
 
 const searchBarModel = computed({
   get: () => searchBar.value,
@@ -37,7 +29,6 @@ onMounted(() => {
 
 function updateSearchBarAndSearchInput() {
   console.log("updating search input and search bar from parent component")
-  searchInput.value = searchInput.value + "+1";
   searchBar.value = searchBar.value + "+2";
 }
 
diff --git a/examples/wrapper-components/vue-javascript/src/components/SearchField.vue b/examples/wrapper-components/vue-javascript/src/components/SearchField.vue
new file mode 100644
index 0000000000..76a9739a13
--- /dev/null
+++ b/examples/wrapper-components/vue-javascript/src/components/SearchField.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h2>Search-Field</h2>
+    <h3>Using v-model</h3>
+
+    <ifx-search-field v-model="searchInput" disabled="false" size='m' show-delete-icon="true"></ifx-search-field>
+    <p>Search field: {{ searchInput }}</p>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script  setup>
+import { ref, onMounted } from 'vue'
+const searchInput = ref('');
+
+onMounted(() => {
+  updateSearchBarAndSearchInput();
+  setInterval(updateSearchBarAndSearchInput, 10000);
+})
+
+
+function updateSearchBarAndSearchInput() {
+  console.log("updating search field")
+  searchInput.value = searchInput.value + "+1";
+}
+
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/examples/wrapper-components/vue-javascript/src/components/SearchInput.vue b/examples/wrapper-components/vue-javascript/src/components/SearchInput.vue
deleted file mode 100644
index dad190eacd..0000000000
--- a/examples/wrapper-components/vue-javascript/src/components/SearchInput.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <ifx-search-input disabled="false" size='m' show-delete-icon="true" @ifxInput="handleSearch"></ifx-search-input>
-  </div>
-</template>
-
-<script  setup>
-
-const handleSearch = (e) => { 
-  console.log(e.detail)
-}
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/examples/wrapper-components/vue-javascript/src/components/TextInput.vue b/examples/wrapper-components/vue-javascript/src/components/TextInput.vue
index 6f186e3c40..d887f2e23f 100644
--- a/examples/wrapper-components/vue-javascript/src/components/TextInput.vue
+++ b/examples/wrapper-components/vue-javascript/src/components/TextInput.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <h2>Text Input</h2>
+    <h3>Using v-model</h3>
     <div>
       <ifx-text-input v-model="inputValue" error="false" disabled="false" success="false" placeholder="Placeholder"
         errorMessage="">Label</ifx-text-input>
diff --git a/examples/wrapper-components/vue-typescript/src/App.vue b/examples/wrapper-components/vue-typescript/src/App.vue
index 1a2aec7811..c9854564c6 100644
--- a/examples/wrapper-components/vue-typescript/src/App.vue
+++ b/examples/wrapper-components/vue-typescript/src/App.vue
@@ -7,7 +7,7 @@
   <Checkbox />
   <RadioButton />
   <ProgressBar />
-  <SearchInput />
+  <SearchField />
   <TextInput />
   <Spinner />
   <Link />
@@ -23,7 +23,7 @@ import Button from './components/Button.vue'
 import Checkbox from './components/Checkbox.vue'
 import NumberIndicator from './components/NumberIndicator.vue'
 import ProgressBar from './components/ProgressBar.vue'
-import SearchInput from './components/SearchInput.vue'
+import SearchField from './components/SearchField.vue'
 import RadioButton from './components/RadioButton.vue'
 import TextInput from './components/TextInput.vue'
 import Spinner from './components/Spinner.vue'
diff --git a/examples/wrapper-components/vue-typescript/src/components/Link.vue b/examples/wrapper-components/vue-typescript/src/components/Link.vue
index c4c4cbefbf..b9935984c7 100644
--- a/examples/wrapper-components/vue-typescript/src/components/Link.vue
+++ b/examples/wrapper-components/vue-typescript/src/components/Link.vue
@@ -2,7 +2,11 @@
 
 <template>
   <div>
+    <h2>Link</h2>
     <ifx-link href="http://google.com" color="secondary" target="_blank" bold="" underline="">link</ifx-link>
+
+    <br />
+    <br />
   </div>
 </template>
 
diff --git a/examples/wrapper-components/vue-typescript/src/components/NumberIndicator.vue b/examples/wrapper-components/vue-typescript/src/components/NumberIndicator.vue
index 3c64870287..a88596b0f7 100644
--- a/examples/wrapper-components/vue-typescript/src/components/NumberIndicator.vue
+++ b/examples/wrapper-components/vue-typescript/src/components/NumberIndicator.vue
@@ -7,6 +7,8 @@
     <ifx-number-indicator inverted="false">1</ifx-number-indicator>
     <button @click="increaseNumber">+</button>
     <button @click="decreaseNumber">-</button>
+    <br />
+    <br />
   </div>
 </template>
 
diff --git a/examples/wrapper-components/vue-typescript/src/components/Search.vue b/examples/wrapper-components/vue-typescript/src/components/Search.vue
index 1a14fa09ad..665578a708 100644
--- a/examples/wrapper-components/vue-typescript/src/components/Search.vue
+++ b/examples/wrapper-components/vue-typescript/src/components/Search.vue
@@ -2,13 +2,7 @@
 
 <template>
   <div>
-    <h2>Ifx-Search-Input</h2>
-    <h3>Using v-model</h3>
-    <ifx-search-input v-model="searchInputQuery" style="width: 100%" show-close-button="true"></ifx-search-input>
-    <p>Search input: {{ searchInput }}</p>
-
-    <br />
-    <h2>Ifx-Search-Bar</h2>
+    <h2>Search-Bar</h2>
     <h3>Using v-model</h3>
     <ifx-search-bar v-model="searchBarQuery" style="width: 100%" show-close-button="true"></ifx-search-bar>
     <p>Search bar: {{ searchBar }}</p>
@@ -21,13 +15,7 @@
 import { computed, ref } from 'vue'
 
 const searchBar = ref('');
-const searchInput = ref('');
 
-// Computed property to retrieve the query value
-const searchInputQuery = computed({
-  get: () => searchInput.value,
-  set: (newValue) => handleSearchInput(newValue)
-});
 
 // Computed property to retrieve the query value
 const searchBarQuery = computed({
@@ -43,9 +31,6 @@ function handleSearch(event: any) {
   searchBar.value = event.detail;//search input emits an event and even though the search bar event is accessed automatically in v-model, we need to go one layer down to the detail of the search input event
 }
 
-function handleSearchInput(event: string) {
-  console.log("updating search input: ", event)
-  searchInput.value = event; //v-model automatically accesses event.detail
-};
+
 </script>
  
\ No newline at end of file
diff --git a/examples/wrapper-components/vue-typescript/src/components/SearchField.vue b/examples/wrapper-components/vue-typescript/src/components/SearchField.vue
new file mode 100644
index 0000000000..3231831298
--- /dev/null
+++ b/examples/wrapper-components/vue-typescript/src/components/SearchField.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h2>Search Field</h2>
+    <h3>Using v-model</h3>
+
+    <ifx-search-field v-model="searchInput" disabled="false" size='m' show-delete-icon="true"></ifx-search-field>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+const searchInput = ref('');
+
+onMounted(() => {
+  updateSearchBarAndSearchInput();
+  setInterval(updateSearchBarAndSearchInput, 10000);
+})
+
+
+function updateSearchBarAndSearchInput() {
+  console.log("updating search field")
+  searchInput.value = searchInput.value + "+1";
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/examples/wrapper-components/vue-typescript/src/components/SearchInput.vue b/examples/wrapper-components/vue-typescript/src/components/SearchInput.vue
deleted file mode 100644
index dad190eacd..0000000000
--- a/examples/wrapper-components/vue-typescript/src/components/SearchInput.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div>
-    <ifx-search-input disabled="false" size='m' show-delete-icon="true" @ifxInput="handleSearch"></ifx-search-input>
-  </div>
-</template>
-
-<script  setup>
-
-const handleSearch = (e) => { 
-  console.log(e.detail)
-}
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/packages/components-react/lib/components/stencil-generated/index.ts b/packages/components-react/lib/components/stencil-generated/index.ts
index 5336d45f60..4d3df8bf73 100644
--- a/packages/components-react/lib/components/stencil-generated/index.ts
+++ b/packages/components-react/lib/components/stencil-generated/index.ts
@@ -47,6 +47,7 @@ export const IfxNumberIndicator = /*@__PURE__*/createReactComponent<JSX.IfxNumbe
 export const IfxProgressBar = /*@__PURE__*/createReactComponent<JSX.IfxProgressBar, HTMLIfxProgressBarElement>('ifx-progress-bar');
 export const IfxRadioButton = /*@__PURE__*/createReactComponent<JSX.IfxRadioButton, HTMLIfxRadioButtonElement>('ifx-radio-button');
 export const IfxRange = /*@__PURE__*/createReactComponent<JSX.IfxRange, HTMLIfxRangeElement>('ifx-range');
+export const IfxSearchBar = /*@__PURE__*/createReactComponent<JSX.IfxSearchBar, HTMLIfxSearchBarElement>('ifx-search-bar');
 export const IfxSearchField = /*@__PURE__*/createReactComponent<JSX.IfxSearchField, HTMLIfxSearchFieldElement>('ifx-search-field');
 export const IfxSelectInput = /*@__PURE__*/createReactComponent<JSX.IfxSelectInput, HTMLIfxSelectInputElement>('ifx-select-input');
 export const IfxSidebar = /*@__PURE__*/createReactComponent<JSX.IfxSidebar, HTMLIfxSidebarElement>('ifx-sidebar');
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
index e53c6fec13..11cb6dada1 100644
--- a/packages/components-vue/lib/components.ts
+++ b/packages/components-vue/lib/components.ts
@@ -288,6 +288,17 @@ export const IfxRange = /*@__PURE__*/ defineContainer<JSX.IfxRange>('ifx-range',
 ]);
 
 
+export const IfxSearchBar = /*@__PURE__*/ defineContainer<JSX.IfxSearchBar, JSX.IfxSearchBar["value"]>('ifx-search-bar', undefined, [
+  'showCloseButton',
+  'isOpen',
+  'value',
+  'hideLabel',
+  'size',
+  'ifxInput'
+],
+'value', 'ifxInput');
+
+
 export const IfxSearchField = /*@__PURE__*/ defineContainer<JSX.IfxSearchField, JSX.IfxSearchField["value"]>('ifx-search-field', undefined, [
   'value',
   'showDeleteIcon',
diff --git a/packages/components/src/components/icon/readme.md b/packages/components/src/components/icon/readme.md
index a8dc8ec73f..9996b0bb36 100644
--- a/packages/components/src/components/icon/readme.md
+++ b/packages/components/src/components/icon/readme.md
@@ -33,7 +33,8 @@
  - [ifx-navbar](../navbar)
  - [ifx-navbar-menu-item](../navbar)
  - [ifx-range](../range)
- - [ifx-search-field](../search-input)
+ - [ifx-search-bar](../search-bar)
+ - [ifx-search-field](../search-field)
  - [ifx-sidebar-item](../sidebar)
  - [ifx-text-input](../text-input)
 
@@ -56,6 +57,7 @@ graph TD;
   ifx-navbar --> ifx-icon
   ifx-navbar-menu-item --> ifx-icon
   ifx-range --> ifx-icon
+  ifx-search-bar --> ifx-icon
   ifx-search-field --> ifx-icon
   ifx-sidebar-item --> ifx-icon
   ifx-text-input --> ifx-icon
diff --git a/packages/components/src/components/search-bar/readme.md b/packages/components/src/components/search-bar/readme.md
index 484879aa80..2470ad059b 100644
--- a/packages/components/src/components/search-bar/readme.md
+++ b/packages/components/src/components/search-bar/readme.md
@@ -10,11 +10,10 @@
 | Property          | Attribute           | Description | Type      | Default     |
 | ----------------- | ------------------- | ----------- | --------- | ----------- |
 | `hideLabel`       | `hide-label`        |             | `boolean` | `false`     |
-| `icon`            | `icon`              |             | `string`  | `undefined` |
 | `isOpen`          | `is-open`           |             | `boolean` | `true`      |
 | `showCloseButton` | `show-close-button` |             | `boolean` | `true`      |
 | `size`            | `size`              |             | `string`  | `""`        |
-| `value`           | `value`             |             | `string`  | `''`        |
+| `value`           | `value`             |             | `string`  | `undefined` |
 
 
 ## Events
@@ -23,21 +22,20 @@
 | ---------- | ----------- | ------------------ |
 | `ifxInput` |             | `CustomEvent<any>` |
 
+
 ## Dependencies
 
 ### Depends on
 
-- [ifx-search-input](../search-input)
+- [ifx-search-field](../search-field)
 - [ifx-icon](../icon)
-- [ifx-link](../link)
 
 ### Graph
 ```mermaid
 graph TD;
-  ifx-search-bar --> ifx-search-input
+  ifx-search-bar --> ifx-search-field
   ifx-search-bar --> ifx-icon
-  ifx-search-bar --> ifx-link
-  ifx-search-input --> ifx-icon
+  ifx-search-field --> ifx-icon
   style ifx-search-bar fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/search-bar/search-bar.scss b/packages/components/src/components/search-bar/search-bar.scss
index 1de7f6e7a2..e14ea0b492 100644
--- a/packages/components/src/components/search-bar/search-bar.scss
+++ b/packages/components/src/components/search-bar/search-bar.scss
@@ -1,5 +1,5 @@
 @use "../../../node_modules/@infineon/design-system-tokens/dist/tokens";
-
+@use "../../global/font.scss";
 
 .search-bar {
   box-sizing: border-box;
@@ -9,60 +9,49 @@
   flex-direction: row;
   align-items: center;
   width: 100%;
-  
-  //padding: 12px 16px;
-  //border: 2px solid blue;
 
-  &.large { 
+  &.large {
     width: 362px;
   }
 
-  &.closed { 
+  &.closed {
     display: inline-flex;
     width: auto;
   }
 
-  & .search-bar-wrapper { 
+  & .search-bar-wrapper {
     display: flex;
     align-items: center;
     gap: 16px;
     width: 100%;
-    //border: 1px solid; //remove
-    //padding: 0 16px;
 
-    & ifx-search-input { 
+    & a {
+      text-decoration: none;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+      color: #0A8276;
+      cursor: pointer;
+    }
+
+    & ifx-search-input {
       width: 100%;
     }
-    // & input { 
-    //   width: 100%;
+
+    // & a:hover { 
+    //   cursor: pointer;
+    //   color: #0A8276;
     // }
-  
-    & ifx-link:hover { 
-      cursor: pointer;
-    }
   }
 
-  // & .search-input__wrapper {
-  //   display: flex;
-  //   flex-direction: row;
-  //   align-items: center;
-  //   padding: 12px 16px;
-  //   gap: 12px;
-  //   //width: 274px;
-  //   height: 40px;
-  //   border-radius: 1px;
-  //   flex: none;
-  //   order: 0;
-  //   flex-grow: 1;
-  // }
-
   .search-bar__icon-wrapper {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
 
-    & a { 
+    & a {
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -77,27 +66,8 @@
       padding-left: 11px;
     }
 
-    & ifx-icon:hover { 
+    & ifx-icon:hover {
       cursor: pointer;
     }
-
   }
-
-}
-
-
-// @media screen and (max-width: 720px) { 
-//   .search-bar { 
-//     padding: 0px 16px;
-//     width: 360px;
-//     height: 64px;
-//   }
-// }
-
-// @media screen and (min-width: 720px) { 
-//   .search-bar { 
-//     padding: 0px 16px;
-//     width: 360px;
-//     height: 64px;
-//   }
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/packages/components/src/components/search-bar/search-bar.stories.ts b/packages/components/src/components/search-bar/search-bar.stories.ts
index 3c645ab882..131f2fc80e 100644
--- a/packages/components/src/components/search-bar/search-bar.stories.ts
+++ b/packages/components/src/components/search-bar/search-bar.stories.ts
@@ -1,3 +1,4 @@
+import { action } from "@storybook/addon-actions";
 
 
 export default {
@@ -5,15 +6,10 @@ export default {
   tags: ['autodocs'],
 
   args: {
-    width: '100%',
     showCloseButton: true,
   },
   argTypes: {
     onIfxInput: { action: 'ifxInput' },
-    width: {
-      options: ['40%', '60%', '80%', '100%'],
-      control: { type: 'radio' },
-    },
     showCloseButton: {
       control: { type: 'boolean' },
     },
@@ -22,20 +18,15 @@ export default {
 
 
 
-const Template = (args) => {
-  const wrapper = document.createElement('div');
-  wrapper.innerHTML = `<ifx-search-bar  style="width: ${args.width}" show-close-button="${args.showCloseButton}"></ifx-search-bar>`;
-
-  const inputElement = wrapper.querySelector('ifx-search-bar');
-  inputElement.addEventListener('ifxChange', (event) => {
-    // console.log('Storybook Search-Field:', event);
-    args.onIfxChange(event);
-
-  });
+const DefaultTemplate = ({ isOpen, showCloseButton }) => {
+  const element = document.createElement('ifx-search-bar');
+  element.setAttribute('is-open', isOpen);
+  element.setAttribute('show-close-button', showCloseButton);
+  element.addEventListener('ifxInput', action('ifxInput'));
 
-  return wrapper.innerHTML;
+  return element;
 };
 
-export const Default = Template.bind({});
+export const Default = DefaultTemplate.bind({});
 Default.args = {
 };
\ No newline at end of file
diff --git a/packages/components/src/components/search-bar/search-bar.tsx b/packages/components/src/components/search-bar/search-bar.tsx
index 70072b652a..ed39abb1e0 100644
--- a/packages/components/src/components/search-bar/search-bar.tsx
+++ b/packages/components/src/components/search-bar/search-bar.tsx
@@ -1,19 +1,66 @@
-export default {
-  title: 'Components/SearchBar',
-  args: {
-    showCloseButton: true,
-  },
-  argTypes: {
-    showCloseButton: {
-      control: { type: 'boolean' },
-    },
-  },
-};
+import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';
 
+@Component({
+  tag: 'ifx-search-bar',
+  styleUrl: 'search-bar.scss',
+  shadow: true,
+})
+export class SearchBar {
+  @Prop() showCloseButton: boolean = true;
 
-const DefaultTemplate = (args) =>
-  `<ifx-search-bar is-open="${args.isOpen}" show-close-button="${args.showCloseButton}"></ifx-search-bar>`;
+  @Prop() isOpen: boolean = true;
+  @State() internalState: boolean;
+  @Prop({ mutable: true }) value: string;
+  @Prop() hideLabel: boolean = false;
+  @Prop() size: string = "";
+  @Event() ifxInput: EventEmitter;
 
 
-export const Default = DefaultTemplate.bind({});
+  @Watch('isOpen')
+  handlePropChange() {
+    this.internalState = this.isOpen;
+  }
 
+  handleCloseButton = () => {
+    this.internalState = !this.internalState;
+  }
+
+  handleSearchInput(event: CustomEvent) {
+    console.log("search field event in search bar", event)
+    this.value = event.detail.detail;
+    this.ifxInput.emit(event.detail);
+  }
+
+  setInitialState() {
+    this.internalState = this.isOpen;
+  }
+
+  componentWillLoad() {
+    this.setInitialState()
+  }
+
+  handleInput(event: CustomEvent) {
+    this.value = event.detail;
+  }
+
+  render() {
+    return (
+      <div class={`search-bar ${!this.internalState ? 'closed' : ""}`}>
+        {this.internalState ? (
+          <div class="search-bar-wrapper">
+            <ifx-search-field value={this.value} onIfxInput={this.handleInput.bind(this)}>
+              <ifx-icon icon="search-16" slot="search-icon"></ifx-icon>
+            </ifx-search-field>
+            {this.showCloseButton &&
+              <a href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>}
+          </div>
+        ) : (
+          <div class="search-bar__icon-wrapper" onClick={this.handleCloseButton}>
+            <ifx-icon icon="search-16"></ifx-icon>
+            <a href="javascript:void(0)">Search</a>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/components/src/components/search-input/readme.md b/packages/components/src/components/search-field/readme.md
similarity index 77%
rename from packages/components/src/components/search-input/readme.md
rename to packages/components/src/components/search-field/readme.md
index 22b5f0dddc..204b51818b 100644
--- a/packages/components/src/components/search-input/readme.md
+++ b/packages/components/src/components/search-field/readme.md
@@ -17,13 +17,17 @@
 
 ## Events
 
-| Event      | Description | Type                            |
-| ---------- | ----------- | ------------------------------- |
-| `ifxInput` |             | `CustomEvent<CustomEvent<any>>` |
+| Event      | Description | Type                  |
+| ---------- | ----------- | --------------------- |
+| `ifxInput` |             | `CustomEvent<String>` |
 
 
 ## Dependencies
 
+### Used by
+
+ - [ifx-search-bar](../search-bar)
+
 ### Depends on
 
 - [ifx-icon](../icon)
@@ -32,6 +36,7 @@
 ```mermaid
 graph TD;
   ifx-search-field --> ifx-icon
+  ifx-search-bar --> ifx-search-field
   style ifx-search-field fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/search-input/search-field.e2e.ts b/packages/components/src/components/search-field/search-field.e2e.ts
similarity index 100%
rename from packages/components/src/components/search-input/search-field.e2e.ts
rename to packages/components/src/components/search-field/search-field.e2e.ts
diff --git a/packages/components/src/components/search-input/search-field.scss b/packages/components/src/components/search-field/search-field.scss
similarity index 100%
rename from packages/components/src/components/search-input/search-field.scss
rename to packages/components/src/components/search-field/search-field.scss
diff --git a/packages/components/src/components/search-input/search-field.stories.ts b/packages/components/src/components/search-field/search-field.stories.ts
similarity index 94%
rename from packages/components/src/components/search-input/search-field.stories.ts
rename to packages/components/src/components/search-field/search-field.stories.ts
index 7079ba5c33..2b5d14702c 100644
--- a/packages/components/src/components/search-input/search-field.stories.ts
+++ b/packages/components/src/components/search-field/search-field.stories.ts
@@ -3,6 +3,8 @@ import { action } from "@storybook/addon-actions";
 export default {
   title: 'Components/Search Field',
   tags: ['autodocs'],
+  'parameters.docs.source.type': 'code',
+
   args: {
     showDeleteIcon: true,
     disabled: false,
diff --git a/packages/components/src/components/search-input/search-field.tsx b/packages/components/src/components/search-field/search-field.tsx
similarity index 91%
rename from packages/components/src/components/search-input/search-field.tsx
rename to packages/components/src/components/search-field/search-field.tsx
index 4640a55ec1..2b6418c454 100644
--- a/packages/components/src/components/search-input/search-field.tsx
+++ b/packages/components/src/components/search-field/search-field.tsx
@@ -13,7 +13,7 @@ export class SearchField {
   private inputElement: HTMLInputElement;
   @Prop({ mutable: true }) value: string = '';
 
-  @Event() ifxInput: EventEmitter<CustomEvent>;
+  @Event() ifxInput: EventEmitter<String>;
   @State() insideDropdown: boolean = false;
 
   @Prop() showDeleteIcon: boolean = false;
@@ -40,12 +40,8 @@ export class SearchField {
   handleInput = () => {
     const query = this.inputElement.value;
     this.value = query; // update the value property when input changes
-    const customEvent = new CustomEvent('ifxInput', {
-      detail: query,
-      bubbles: true,
-      composed: true
-    });
-    this.ifxInput.emit(customEvent);
+    this.ifxInput.emit(this.value);
+
   };
 
   handleDelete = () => {