diff --git a/packages/styles/src/button.scss b/packages/styles/src/button.scss
index 1e55ee626e..743509307f 100644
--- a/packages/styles/src/button.scss
+++ b/packages/styles/src/button.scss
@@ -204,14 +204,15 @@ $fd-button-badge-spacing: 0.25rem;
     }
 
     @include fd-active() {
-      --fdButton_ToolHeader_Background: var(--sapActiveColor);
+      --fdButton_ToolHeader_Background: var(--fdButton_ToolHeader_Background_Active);
       --fdButton_ToolHeader_Border_Color: var(--fdButton_ToolHeader_Border_Color_Active);
+      --fdButton_ToolHeader_Color: var(--fdButton_ToolHeader_Color_Active);
 
       outline: none;
 
       @include fd-focus() {
         --fdButton_ToolHeader_Border_Radius: 0.375rem;
-        --fdButton_ToolHeader_Background: var(--sapActiveColor);
+        --fdButton_ToolHeader_Background: var(--fdButton_ToolHeader_Background_Active);
         --fdButton_ToolHeader_Border_Color: var(--fdButton_ToolHeader_Border_Color_Active);
 
         outline: none;
@@ -300,14 +301,15 @@ $fd-button-badge-spacing: 0.25rem;
     }
 
     @include fd-active() {
-      --fdButton_Nested_Background: var(--sapActiveColor);
+      --fdButton_Nested_Background: var(--fdButton_Nested_Background_Active);
       --fdButton_Nested_Border_Color: var(--fdButton_Nested_Border_Color_Active);
+      --fdButton_Nested_Color: var(--fdButton_Nested_Color_Active);
 
       outline: none;
 
       @include fd-focus() {
         --fdButton_Nested_Border_Radius: 0.75rem;
-        --fdButton_Nested_Background: var(--sapActiveColor);
+        --fdButton_Nested_Background: var(--fdButton_Nested_Background_Active);
         --fdButton_Nested_Border_Color: var(--fdButton_Nested_Border_Color_Active);
 
         outline: none;
@@ -319,7 +321,7 @@ $fd-button-badge-spacing: 0.25rem;
     }
 
     @include fd-focus() {
-      --fdButton_Nested_Background: var(--sapButton_Background);
+      --fdButton_Nested_Background: var(--fdButton_Nested_Background_Focus);
       --fdButton_Nested_Border_Color: var(--fdButton_Nested_Border_Color_Focus);
       --fdButton_Nested_Border_Radius: var(--fdButton_Nested_Border_Radius_Focus);
 
diff --git a/packages/styles/src/fundamental-styles.scss b/packages/styles/src/fundamental-styles.scss
index edf590f3f0..6bb42877f3 100644
--- a/packages/styles/src/fundamental-styles.scss
+++ b/packages/styles/src/fundamental-styles.scss
@@ -75,6 +75,7 @@
 @import "rating-indicator";
 @import "resizable-card-layout";
 @import "scrollbar";
+@import "search-field";
 @import "section";
 @import "segmented-button";
 @import "select";
diff --git a/packages/styles/src/search-field.scss b/packages/styles/src/search-field.scss
new file mode 100644
index 0000000000..4bfaa8aab1
--- /dev/null
+++ b/packages/styles/src/search-field.scss
@@ -0,0 +1,199 @@
+@import "./new-settings";
+@import "./mixins";
+
+$block: #{$fd-namespace}-search-field;
+$blockUnderline: #{$fd-namespace}-search-field__underline;
+$blockActions: #{$fd-namespace}-search-field__actions;
+
+.#{$block} {
+  // Search Field
+  --fdSearchField_Height: 2.5rem;
+  --fdSearchField_Height_Compact: 2rem;
+  --fdSearchField_Height_Border: calc(var(--fdSearchField_Height) - 0.125rem);
+  --fdSearchField_Border_Radius: 2rem;
+  --fdSearchField_Padding: 0.625rem;
+  --fdSearchField_Padding_Compact: 0.5rem;
+  --fdSearchField_Box_Shadow: var(--sapField_Shadow);
+  --fdSearchField_Background: var(--sapShell_InteractiveBackground);
+  --fdSearchField_Color: var(--sapShell_TextColor);
+
+  // Search Field Icon
+  --fdSearchField_Icon_Size: 1rem;
+  --fdSearchField_Icon_Size_Offset: 0.375rem;
+
+  // Actions
+  --fdSearchField_Actions_Offset: 0.25rem;
+  --fdSearchField_Actions_Offset_Compact: 0.1875rem;
+
+  // Actions Button
+  --fdSearchField_Action_Container_Size: 2rem;
+  --fdSearchField_Action_Container_Size_Compact: 1.625rem;
+  --fdSearchField_Clear_Button_Display: none;
+
+  // Search Field Input Padding Left Calculations
+  --fdSearchField_Padding_Left: calc(var(--fdSearchField_Padding) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));
+  --fdSearchField_Padding_Left_Compact: calc(var(--fdSearchField_Padding_Compact) + var(--fdSearchField_Icon_Size) + var(--fdSearchField_Icon_Size_Offset));
+
+  // Search Field Input Padding Right Calculations
+  --fdSearchField_Padding_Right: calc(var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset));
+  --fdSearchField_Padding_Right_Compact: calc(var(--fdSearchField_Action_Container_Size_Compact) + var(--fdSearchField_Actions_Offset_Compact));
+  --fdSearchField_Padding_Right_Typed: calc(2 * var(--fdSearchField_Padding_Right));
+  --fdSearchField_Padding_Right_Typed_Compact: calc(2 * var(--fdSearchField_Padding_Right_Compact));
+
+  @include fd-reset();
+  @include fd-flex-vertical-center();
+  @include fd-set-height(var(--fdSearchField_Height));
+
+  position: relative;
+  width: 16rem;
+  border-radius: var(--fdSearchField_Border_Radius);
+  border: 0.0625rem solid var(--fdSearchField_Border_Color);
+
+  &__icon {
+    @include fd-set-square(1rem);
+    @include fd-set-position-left(var(--fdSearchField_Padding));
+
+    @include fd-icon-selector() {
+      @include fd-flex-center();
+
+      font-size: 1rem;
+    }
+
+    z-index: 10;
+    position: absolute;
+    color: var(--sapContent_NonInteractiveIconColor);
+  }
+
+  &__input {
+    @include fd-reset();
+    @include fd-set-height(var(--fdSearchField_Height_Border));
+    @include fd-set-paddings-x(var(--fdSearchField_Padding_Left), var(--fdSearchField_Padding_Right));
+    @include fd-set-paddings-y-equal(var(--fdSearchField_Padding));
+
+    z-index: 1;
+    width: 16rem;
+    border-radius: var(--fdSearchField_Border_Radius);
+    background: var(--fdSearchField_Background);
+    box-shadow: var(--fdSearchField_Box_Shadow);
+    color: var(--fdSearchField_Color);
+
+    &::placeholder {
+      font-family: var(--sapFontFamily);
+      font-size: var(--sapFontSize);
+      font-style: italic;
+      font-weight: normal;
+      line-height: 1rem;
+    }
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      -webkit-appearance: none;
+    }
+
+    &:not(:placeholder-shown) {
+      --fdSearchField_Padding_Right: calc(2 * (var(--fdSearchField_Action_Container_Size) + var(--fdSearchField_Actions_Offset)));
+      --fdSearchField_Background: var(--fdSearchField_Background_Focus);
+      --fdSearchField_Box_Shadow: var(--sapSearchHover_Shadow);
+
+      @include fd-compact-and-condensed() {
+        --fdSearchField_Padding_Right: var(--fdSearchField_Padding_Right_Typed_Compact);
+      }
+
+      & + .#{$blockUnderline} {
+        display: none;
+      }
+
+      & ~ .#{$blockActions} {
+        --fdSearchField_Clear_Button_Display: inline-flex;
+      }
+
+      @include fd-focus() {
+        --fdSearchField_Box_Shadow: var(--sapSearchHover_Shadow);
+
+        outline: none;
+      }
+    }
+
+    @include fd-hover() {
+      --fdSearchField_Background: var(--fdSearchField_Background_Hover);
+      --fdSearchField_Box_Shadow: var(--sapSearchHover_Shadow);
+
+      & + .#{$blockUnderline} {
+        display: none;
+      }
+    }
+
+    @include fd-focus() {
+      --fdSearchField_Background: var(--fdSearchField_Background_Focus);
+      --fdSearchField_Border_Color: transparent;
+      --fdSearchField_Box_Shadow: none;
+
+      outline: var(--fdSearchField_Outline);
+
+      & + .#{$blockUnderline} {
+        display: none;
+      }
+    }
+  }
+
+  &__underline {
+    @include fd-reset();
+
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    border-radius: var(--fdSearchField_Border_Radius);
+
+    &::after {
+      bottom: 0;
+      content: "";
+      z-index: 30;
+      width: 100%;
+      height: 0.0625rem;
+      position: absolute;
+      background: var(--fdSearchField_Underline_Color);
+    }
+  }
+
+  &__actions {
+    @include fd-reset();
+    @include fd-flex-vertical-center();
+    @include fd-set-position-right(var(--fdSearchField_Actions_Offset));
+
+    z-index: 10;
+    height: 100%;
+    position: absolute;
+
+    button {
+      @include fd-disabled () {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__action-container {
+    @include fd-reset();
+    @include fd-flex-center();
+    @include fd-set-square(var(--fdSearchField_Action_Container_Size));
+
+    &:first-child {
+      display: var(--fdSearchField_Clear_Button_Display);
+    }
+
+    button {
+      --fdButton_Nested_Color: var(--sapShell_TextColor);
+    }
+  }
+
+  @include fd-compact-and-condensed() {
+    --fdSearchField_Height: var(--fdSearchField_Height_Compact);
+    --fdSearchField_Padding: var(--fdSearchField_Padding_Compact);
+    --fdSearchField_Actions_Offset: var(--fdSearchField_Actions_Offset_Compact);
+    --fdSearchField_Action_Container_Size: var(--fdSearchField_Action_Container_Size_Compact);
+    --fdSearchField_Padding_Left: var(--fdSearchField_Padding_Left_Compact);
+    --fdSearchField_Padding_Right: var(--fdSearchField_Padding_Right_Compact);
+  }
+}
diff --git a/packages/styles/src/theming/common/button/_sap_fiori.scss b/packages/styles/src/theming/common/button/_sap_fiori.scss
index 60d711ee8b..34c7b582bb 100644
--- a/packages/styles/src/theming/common/button/_sap_fiori.scss
+++ b/packages/styles/src/theming/common/button/_sap_fiori.scss
@@ -41,8 +41,11 @@
   --fdButton_Menu_Transparent_Separator_Display: block;
 
   /** Tool Header */
+  --fdButton_ToolHeader_Color_Active: var(--sapButton_Active_TextColor);
+  --fdButton_ToolHeader_Background_Active: var(--sapButton_Lite_Active_Background);
+  --fdButton_ToolHeader_Background_Focus: var(--sapButton_Lite_Background);
   --fdButton_ToolHeader_Border_Color_Normal: transparent;
-  --fdButton_ToolHeader_Border_Color_Hover: transparent;
+  --fdButton_ToolHeader_Border_Color_Hover: var(--sapButton_Lite_Hover_BorderColor);
   --fdButton_ToolHeader_Border_Color_Active: transparent;
   --fdButton_ToolHeader_Border_Color_Focus: transparent;
   --fdButton_ToolHeader_Border_Color_Disabled: transparent;
@@ -50,8 +53,11 @@
   --fdButton_ToolHeader_Badge_Border_Color: var(--sapShellColor);
 
   /** Nested Button */
+  --fdButton_Nested_Color_Active: var(--sapButton_Active_TextColor);
+  --fdButton_Nested_Background_Active: var(--sapButton_Lite_Active_Background);
+  --fdButton_Nested_Background_Focus: var(--sapButton_Lite_Background);
   --fdButton_Nested_Border_Color_Normal: transparent;
-  --fdButton_Nested_Border_Color_Hover: transparent;
+  --fdButton_Nested_Border_Color_Hover: var(--sapButton_Lite_Hover_BorderColor);
   --fdButton_Nested_Border_Color_Active: transparent;
   --fdButton_Nested_Border_Color_Focus: transparent;
   --fdButton_Nested_Border_Color_Disabled: transparent;
diff --git a/packages/styles/src/theming/common/button/_sap_horizon.scss b/packages/styles/src/theming/common/button/_sap_horizon.scss
index d5aa07341b..a05fdb69d7 100644
--- a/packages/styles/src/theming/common/button/_sap_horizon.scss
+++ b/packages/styles/src/theming/common/button/_sap_horizon.scss
@@ -41,6 +41,9 @@
   --fdButton_Menu_Transparent_Separator_Display: block;
 
   /** Tool Header */
+  --fdButton_ToolHeader_Color_Active: var(--sapContent_IconColor);
+  --fdButton_ToolHeader_Background_Active: var(--sapActiveColor);
+  --fdButton_ToolHeader_Background_Focus: var(--sapButton_Background);
   --fdButton_ToolHeader_Border_Color_Normal: transparent;
   --fdButton_ToolHeader_Border_Color_Hover: transparent;
   --fdButton_ToolHeader_Border_Color_Active: transparent;
@@ -50,6 +53,9 @@
   --fdButton_ToolHeader_Badge_Border_Color: var(--sapShellColor);
 
   /** Nested Button */
+  --fdButton_Nested_Color_Active: var(--sapContent_IconColor);
+  --fdButton_Nested_Background_Active: var(--sapActiveColor);
+  --fdButton_Nested_Background_Focus: var(--sapButton_Background);
   --fdButton_Nested_Border_Color_Normal: transparent;
   --fdButton_Nested_Border_Color_Hover: transparent;
   --fdButton_Nested_Border_Color_Active: transparent;
diff --git a/packages/styles/src/theming/common/search-field/_sap_fiori.scss b/packages/styles/src/theming/common/search-field/_sap_fiori.scss
new file mode 100644
index 0000000000..1f37485c7a
--- /dev/null
+++ b/packages/styles/src/theming/common/search-field/_sap_fiori.scss
@@ -0,0 +1,7 @@
+:root {
+  --fdSearchField_Border_Color: transparent;
+  --fdSearchField_Background_Hover: var(--sapShell_Hover_Background);
+  --fdSearchField_Background_Focus: var(--sapShell_Active_Background);
+  --fdSearchField_Outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
+  --fdSearchField_Underline_Color: var(--sapField_BorderColor);
+}
diff --git a/packages/styles/src/theming/common/search-field/_sap_fiori_hc.scss b/packages/styles/src/theming/common/search-field/_sap_fiori_hc.scss
new file mode 100644
index 0000000000..c01cc32566
--- /dev/null
+++ b/packages/styles/src/theming/common/search-field/_sap_fiori_hc.scss
@@ -0,0 +1,7 @@
+:root {
+  --fdSearchField_Border_Color: var(--sapShell_BorderColor);
+  --fdSearchField_Background_Hover: var(--sapShellColor);
+  --fdSearchField_Background_Focus: var(--sapShellColor);
+  --fdSearchField_Outline: solid var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
+  --fdSearchField_Underline_Color: transparent;
+}
diff --git a/packages/styles/src/theming/common/search-field/_sap_horizon.scss b/packages/styles/src/theming/common/search-field/_sap_horizon.scss
new file mode 100644
index 0000000000..1f37485c7a
--- /dev/null
+++ b/packages/styles/src/theming/common/search-field/_sap_horizon.scss
@@ -0,0 +1,7 @@
+:root {
+  --fdSearchField_Border_Color: transparent;
+  --fdSearchField_Background_Hover: var(--sapShell_Hover_Background);
+  --fdSearchField_Background_Focus: var(--sapShell_Active_Background);
+  --fdSearchField_Outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
+  --fdSearchField_Underline_Color: var(--sapField_BorderColor);
+}
diff --git a/packages/styles/src/theming/common/search-field/_sap_horizon_hc.scss b/packages/styles/src/theming/common/search-field/_sap_horizon_hc.scss
new file mode 100644
index 0000000000..c01cc32566
--- /dev/null
+++ b/packages/styles/src/theming/common/search-field/_sap_horizon_hc.scss
@@ -0,0 +1,7 @@
+:root {
+  --fdSearchField_Border_Color: var(--sapShell_BorderColor);
+  --fdSearchField_Background_Hover: var(--sapShellColor);
+  --fdSearchField_Background_Focus: var(--sapShellColor);
+  --fdSearchField_Outline: solid var(--sapContent_FocusWidth) var(--sapContent_FocusColor);
+  --fdSearchField_Underline_Color: transparent;
+}
diff --git a/packages/styles/src/theming/sap_fiori_3.scss b/packages/styles/src/theming/sap_fiori_3.scss
index a29605b0c8..8a35a9636a 100644
--- a/packages/styles/src/theming/sap_fiori_3.scss
+++ b/packages/styles/src/theming/sap_fiori_3.scss
@@ -42,6 +42,7 @@
 @import "./common/tokenizer/sap_fiori";
 @import "./common/notification/sap_fiori";
 @import "./common/pagination/sap_fiori";
+@import "./common/search-field/sap_fiori";
 @import "./sap_fiori_3/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_fiori_3/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3/_css_variables.scss
index 7fba94dee1..7892ba69ff 100644
--- a/packages/styles/src/theming/sap_fiori_3/_css_variables.scss
+++ b/packages/styles/src/theming/sap_fiori_3/_css_variables.scss
@@ -857,6 +857,7 @@
   --sapMenu_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
   --sapMenu_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
   --sapNotifications_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
 }
 
 .background-image--sapCompanyLogo {
diff --git a/packages/styles/src/theming/sap_fiori_3_dark.scss b/packages/styles/src/theming/sap_fiori_3_dark.scss
index 403c873a99..25c61155ba 100644
--- a/packages/styles/src/theming/sap_fiori_3_dark.scss
+++ b/packages/styles/src/theming/sap_fiori_3_dark.scss
@@ -42,6 +42,7 @@
 @import "./common/tokenizer/sap_fiori";
 @import "./common/notification/sap_fiori";
 @import "./common/pagination/sap_fiori";
+@import "./common/search-field/sap_fiori";
 @import "./sap_fiori_3_dark/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss
index c434e8dbfa..59bace53dd 100644
--- a/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss
+++ b/packages/styles/src/theming/sap_fiori_3_dark/_css_variables.scss
@@ -857,6 +857,7 @@
   --sapMenu_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32);
   --sapMenu_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.64);
   --sapNotifications_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.64);
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32), 0 0 0 0.0625rem rgba(134, 150, 169, 0.16);
 }
 
 .background-image--sapCompanyLogo {
diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss
index 9a4c504242..b3a4323c69 100644
--- a/packages/styles/src/theming/sap_fiori_3_hcb.scss
+++ b/packages/styles/src/theming/sap_fiori_3_hcb.scss
@@ -49,6 +49,7 @@
 @import "./common/tokenizer/sap_fiori";
 @import "./common/notification/sap_fiori_hc";
 @import "./common/pagination/sap_fiori";
+@import "./common/search-field/sap_fiori_hc";
 @import "./sap_fiori_3_hcb/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss
index 92407d7690..6bb4cb92be 100644
--- a/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss
+++ b/packages/styles/src/theming/sap_fiori_3_hcb/_css_variables.scss
@@ -857,6 +857,7 @@
   --sapMenu_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
   --sapMenu_Shadow2: 0 0 0 0.0625rem #fff, 0 1rem 2rem 0 rgba(255, 255, 255, 0.16);
   --sapNotifications_Shadow2: 0 0 0 0.0625rem #fff, 0 1rem 2rem 0 rgba(255, 255, 255, 0.16);
+  --sapSearchHover_Shadow: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
 }
 
 .background-image--sapCompanyLogo {
diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss
index 600a9f24b4..2a564bb869 100644
--- a/packages/styles/src/theming/sap_fiori_3_hcw.scss
+++ b/packages/styles/src/theming/sap_fiori_3_hcw.scss
@@ -43,6 +43,7 @@
 @import "./common/tokenizer/sap_fiori";
 @import "./common/notification/sap_fiori_hc";
 @import "./common/pagination/sap_fiori";
+@import "./common/search-field/sap_fiori_hc";
 @import "./common/step-input/sap_fiori";
 
 :root {
diff --git a/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss
index 42fd7e9ec4..11b9b190ab 100644
--- a/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss
+++ b/packages/styles/src/theming/sap_fiori_3_hcw/_css_variables.scss
@@ -857,6 +857,7 @@
   --sapMenu_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
   --sapMenu_Shadow2: 0 0 0 0.0625rem #000, 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
   --sapNotifications_Shadow2: 0 0 0 0.0625rem #000, 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapSearchHover_Shadow: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
 }
 
 .background-image--sapCompanyLogo {
diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark.scss b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
index 4a2299ce92..b3ec591934 100644
--- a/packages/styles/src/theming/sap_fiori_3_light_dark.scss
+++ b/packages/styles/src/theming/sap_fiori_3_light_dark.scss
@@ -41,6 +41,7 @@
 @import "./common/tokenizer/sap_fiori";
 @import "./common/notification/sap_fiori";
 @import "./common/pagination/sap_fiori";
+@import "./common/search-field/sap_fiori";
 @import "./sap_fiori_3_light_dark/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss b/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss
index 151d918b20..f2315bedb0 100644
--- a/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss
+++ b/packages/styles/src/theming/sap_fiori_3_light_dark/_css_variables.scss
@@ -857,6 +857,7 @@
   --sapMenu_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
   --sapMenu_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
   --sapNotifications_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
 }
 
 .background-image--sapCompanyLogo {
@@ -1724,6 +1725,7 @@
     --sapChart_Sequence_10: #ee6868;
     --sapChart_Sequence_11: #3571aa;
     --sapChart_Sequence_Neutral: #848f94;
+    --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
   }
 
   .background-image--sapCompanyLogo {
diff --git a/packages/styles/src/theming/sap_horizon.scss b/packages/styles/src/theming/sap_horizon.scss
index 7d737478e8..b8101d9264 100644
--- a/packages/styles/src/theming/sap_horizon.scss
+++ b/packages/styles/src/theming/sap_horizon.scss
@@ -44,6 +44,7 @@
 @import "./common/tokenizer/sap_horizon";
 @import "./common/notification/sap_horizon";
 @import "./common/pagination/sap_horizon";
+@import "./common/search-field/sap_horizon";
 @import "./sap_horizon/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_horizon/_css_variables.scss b/packages/styles/src/theming/sap_horizon/_css_variables.scss
index aaac01412e..c5f4488eb0 100644
--- a/packages/styles/src/theming/sap_horizon/_css_variables.scss
+++ b/packages/styles/src/theming/sap_horizon/_css_variables.scss
@@ -857,6 +857,7 @@
   --sapMenu_Shadow1: 0 0 0.125rem 0 rgba(34, 53, 72, 0.16), 0 0.5rem 1rem 0 rgba(34, 53, 72, 0.16);
   --sapMenu_Shadow2: 0 0 0.125rem 0 rgba(34, 53, 72, 0.48), 0 1rem 2rem 0 rgba(34, 53, 72, 0.16);
   --sapNotifications_Shadow2: 0 0 0.125rem 0 rgba(34, 53, 72, 0.48), 0 1rem 2rem 0 rgba(34, 53, 72, 0.16);
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(34, 53, 72, 0.16), 0 0.5rem 1rem 0 rgba(34, 53, 72, 0.16);
 }
 
 .background-image--sapCompanyLogo {
diff --git a/packages/styles/src/theming/sap_horizon_dark.scss b/packages/styles/src/theming/sap_horizon_dark.scss
index 968fe35687..be05d66d75 100644
--- a/packages/styles/src/theming/sap_horizon_dark.scss
+++ b/packages/styles/src/theming/sap_horizon_dark.scss
@@ -44,6 +44,7 @@
 @import "./common/tokenizer/sap_horizon";
 @import "./common/notification/sap_horizon";
 @import "./common/pagination/sap_horizon";
+@import "./common/search-field/sap_horizon";
 @import "./sap_horizon_dark/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss b/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss
index cfc1adb1c4..4a849e1559 100644
--- a/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss
+++ b/packages/styles/src/theming/sap_horizon_dark/_css_variables.scss
@@ -857,6 +857,7 @@
   --sapMenu_Shadow1: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32);
   --sapMenu_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.64);
   --sapNotifications_Shadow2: 0 0 0.125rem 0 rgba(0, 0, 0, 0.48), 0 1rem 2rem 0 rgba(0, 0, 0, 0.64);
+  --sapSearchHover_Shadow: 0 0 0.125rem 0 rgba(0, 0, 0, 0.16), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.32), 0 0 0 0.0625rem rgba(169, 180, 190, 0.16);
 }
 
 .background-image--sapCompanyLogo {
diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss
index c107819669..aea450d947 100644
--- a/packages/styles/src/theming/sap_horizon_hcb.scss
+++ b/packages/styles/src/theming/sap_horizon_hcb.scss
@@ -44,6 +44,7 @@
 @import "./common/tokenizer/sap_horizon";
 @import "./common/notification/sap_horizon_hc";
 @import "./common/pagination/sap_horizon";
+@import "./common/search-field/sap_horizon_hc";
 @import "./sap_horizon_hcb/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss b/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss
index 5be77ca7c8..7e1153d1fa 100644
--- a/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss
+++ b/packages/styles/src/theming/sap_horizon_hcb/_css_variables.scss
@@ -857,6 +857,7 @@
   --sapMenu_Shadow1: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
   --sapMenu_Shadow2: 0 0 0 0.0625rem #fff, 0 1rem 2rem 0 rgba(255, 255, 255, 0.16);
   --sapNotifications_Shadow2: 0 0 0 0.0625rem #fff, 0 1rem 2rem 0 rgba(255, 255, 255, 0.16);
+  --sapSearchHover_Shadow: 0 0 0 0.0625rem #fff, 0 0.5rem 1rem 0 rgba(255, 255, 255, 0.16);
 }
 
 .background-image--sapCompanyLogo {
diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss
index 258066eb51..6ad8c792be 100644
--- a/packages/styles/src/theming/sap_horizon_hcw.scss
+++ b/packages/styles/src/theming/sap_horizon_hcw.scss
@@ -45,6 +45,7 @@
 @import "./common/tokenizer/sap_horizon";
 @import "./common/notification/sap_horizon_hc";
 @import "./common/pagination/sap_horizon";
+@import "./common/search-field/sap_horizon_hc";
 @import "./sap_horizon_hcw/css_variables";
 
 :root {
diff --git a/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss b/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss
index e0efaf016c..826c70344c 100644
--- a/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss
+++ b/packages/styles/src/theming/sap_horizon_hcw/_css_variables.scss
@@ -857,6 +857,7 @@
   --sapMenu_Shadow1: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
   --sapMenu_Shadow2: 0 0 0 0.0625rem #000, 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
   --sapNotifications_Shadow2: 0 0 0 0.0625rem #000, 0 1rem 2rem 0 rgba(0, 0, 0, 0.16);
+  --sapSearchHover_Shadow: 0 0 0 0.0625rem #000, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.16);
 }
 
 .background-image--sapCompanyLogo {
diff --git a/packages/styles/stories/Components/search-field/default.example.html b/packages/styles/stories/Components/search-field/default.example.html
new file mode 100644
index 0000000000..0459243673
--- /dev/null
+++ b/packages/styles/stories/Components/search-field/default.example.html
@@ -0,0 +1,77 @@
+<div style="height: 400px">
+    <h4>normal</h4>
+    <div class="fd-search-field">
+        <span role="presentation" aria-hidden="true" class="fd-search-field__icon sap-icon--search"></span>
+        <input placeholder="Search Anything" type="search" aria-label="Search" class="fd-search-field__input">
+        <div role="presentation" aria-hidden="true" class="fd-search-field__underline"></div>
+        <div class="fd-search-field__actions">
+            <div class="fd-search-field__action-container">
+                <button class="fd-button fd-button--nested" aria-label="Close">
+                    <i class="sap-icon--decline" role="presentation"></i>
+                </button>
+            </div>
+            <div class="fd-search-field__action-container">
+                <button class="fd-button fd-button--nested" aria-label="Search" aria-disabled="true" tabindex="-1">
+                    <i class="sap-icon--slim-arrow-right" role="presentation"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <h4>hover</h4>
+    <div class="fd-search-field">
+        <span role="presentation" aria-hidden="true" class="fd-search-field__icon sap-icon--search"></span>
+        <input placeholder="Search Anything" type="search" aria-label="Search" class="fd-search-field__input is-hover">
+        <div role="presentation" aria-hidden="true" class="fd-search-field__underline"></div>
+        <div class="fd-search-field__actions">
+            <div class="fd-search-field__action-container">
+                <button class="fd-button fd-button--nested" aria-label="Close">
+                    <i class="sap-icon--decline" role="presentation"></i>
+                </button>
+            </div>
+            <div class="fd-search-field__action-container">
+                <button class="fd-button fd-button--nested" aria-label="Search" aria-disabled="true" tabindex="-1">
+                    <i class="sap-icon--slim-arrow-right" role="presentation"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <h4>focus</h4>
+    <div class="fd-search-field">
+        <span role="presentation" aria-hidden="true" class="fd-search-field__icon sap-icon--search"></span>
+        <input placeholder="Search Anything" type="search" aria-label="Search" class="fd-search-field__input is-focus">
+        <div role="presentation" aria-hidden="true" class="fd-search-field__underline"></div>
+        <div class="fd-search-field__actions">
+            <div class="fd-search-field__action-container">
+                <button class="fd-button fd-button--nested" aria-label="Close">
+                    <i class="sap-icon--decline" role="presentation"></i>
+                </button>
+            </div>
+            <div class="fd-search-field__action-container">
+                <button class="fd-button fd-button--nested" aria-label="Search" aria-disabled="true" tabindex="-1">
+                    <i class="sap-icon--slim-arrow-right" role="presentation"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <h4>typed text</h4>
+    <div class="fd-search-field">
+        <span role="presentation" aria-hidden="true" class="fd-search-field__icon sap-icon--search"></span>
+        <input placeholder="Search Anything" type="search" aria-label="Search" class="fd-search-field__input" value="Typing">
+        <div role="presentation" aria-hidden="true" class="fd-search-field__underline"></div>
+        <div class="fd-search-field__actions">
+            <div class="fd-search-field__action-container">
+                <button class="fd-button fd-button--nested" aria-label="Close">
+                    <i class="sap-icon--decline" role="presentation"></i>
+                </button>
+            </div>
+            <div class="fd-search-field__action-container">
+                <button class="fd-button fd-button--nested is-focus" aria-label="Search" aria-disabled="false">
+                    <i class="sap-icon--slim-arrow-right" role="presentation"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/packages/styles/stories/Components/search-field/search-field.stories.js b/packages/styles/stories/Components/search-field/search-field.stories.js
new file mode 100644
index 0000000000..c1fac070a7
--- /dev/null
+++ b/packages/styles/stories/Components/search-field/search-field.stories.js
@@ -0,0 +1,23 @@
+import defaultExampleHtml from "./default.example.html?raw";
+import '../../../src/icon.scss';
+import '../../../src/popover.scss';
+import '../../../src/list.scss';
+import '../../../src/form-label.scss';
+import '../../../src/form-message.scss';
+import '../../../src/select.scss';
+import '../../../src/dialog.scss';
+import '../../../src/toolbar.scss';
+import '../../../src/button.scss';
+import '../../../src/icon.scss';
+import '../../../src/layout-grid.scss';
+import '../../../src/form-item.scss';
+import '../../../src/search-field.scss';
+
+export default {
+  title: 'BTP/Search Field',
+  parameters: {
+    description: `The Search Field component is intended to be used in BTP Tool Header. `,
+    tags: ['btp']
+  }
+};
+export const Default = () => defaultExampleHtml;
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap
index 3e6e4ecca1..5ee3d92f8e 100644
--- a/packages/styles/tests/__snapshots__/styles.test.ts.snap
+++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap
@@ -27916,6 +27916,87 @@ exports[`Check stories > Components/Scrollbar > Story DefaultExample > Should ma
 "
 `;
 
+exports[`Check stories > Components/Search Field > Story Default > Should match snapshot 1`] = `
+"<div style=\\"height: 400px\\">
+    <h4>normal</h4>
+    <div class=\\"fd-search-field\\">
+        <span role=\\"presentation\\" aria-hidden=\\"true\\" class=\\"fd-search-field__icon sap-icon--search\\"></span>
+        <input placeholder=\\"Search Anything\\" type=\\"search\\" aria-label=\\"Search\\" class=\\"fd-search-field__input\\">
+        <div role=\\"presentation\\" aria-hidden=\\"true\\" class=\\"fd-search-field__underline\\"></div>
+        <div class=\\"fd-search-field__actions\\">
+            <div class=\\"fd-search-field__action-container\\">
+                <button class=\\"fd-button fd-button--nested\\" aria-label=\\"Close\\">
+                    <i class=\\"sap-icon--decline\\" role=\\"presentation\\"></i>
+                </button>
+            </div>
+            <div class=\\"fd-search-field__action-container\\">
+                <button class=\\"fd-button fd-button--nested\\" aria-label=\\"Search\\" aria-disabled=\\"true\\" tabindex=\\"-1\\">
+                    <i class=\\"sap-icon--slim-arrow-right\\" role=\\"presentation\\"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <h4>hover</h4>
+    <div class=\\"fd-search-field\\">
+        <span role=\\"presentation\\" aria-hidden=\\"true\\" class=\\"fd-search-field__icon sap-icon--search\\"></span>
+        <input placeholder=\\"Search Anything\\" type=\\"search\\" aria-label=\\"Search\\" class=\\"fd-search-field__input is-hover\\">
+        <div role=\\"presentation\\" aria-hidden=\\"true\\" class=\\"fd-search-field__underline\\"></div>
+        <div class=\\"fd-search-field__actions\\">
+            <div class=\\"fd-search-field__action-container\\">
+                <button class=\\"fd-button fd-button--nested\\" aria-label=\\"Close\\">
+                    <i class=\\"sap-icon--decline\\" role=\\"presentation\\"></i>
+                </button>
+            </div>
+            <div class=\\"fd-search-field__action-container\\">
+                <button class=\\"fd-button fd-button--nested\\" aria-label=\\"Search\\" aria-disabled=\\"true\\" tabindex=\\"-1\\">
+                    <i class=\\"sap-icon--slim-arrow-right\\" role=\\"presentation\\"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <h4>focus</h4>
+    <div class=\\"fd-search-field\\">
+        <span role=\\"presentation\\" aria-hidden=\\"true\\" class=\\"fd-search-field__icon sap-icon--search\\"></span>
+        <input placeholder=\\"Search Anything\\" type=\\"search\\" aria-label=\\"Search\\" class=\\"fd-search-field__input is-focus\\">
+        <div role=\\"presentation\\" aria-hidden=\\"true\\" class=\\"fd-search-field__underline\\"></div>
+        <div class=\\"fd-search-field__actions\\">
+            <div class=\\"fd-search-field__action-container\\">
+                <button class=\\"fd-button fd-button--nested\\" aria-label=\\"Close\\">
+                    <i class=\\"sap-icon--decline\\" role=\\"presentation\\"></i>
+                </button>
+            </div>
+            <div class=\\"fd-search-field__action-container\\">
+                <button class=\\"fd-button fd-button--nested\\" aria-label=\\"Search\\" aria-disabled=\\"true\\" tabindex=\\"-1\\">
+                    <i class=\\"sap-icon--slim-arrow-right\\" role=\\"presentation\\"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <h4>typed text</h4>
+    <div class=\\"fd-search-field\\">
+        <span role=\\"presentation\\" aria-hidden=\\"true\\" class=\\"fd-search-field__icon sap-icon--search\\"></span>
+        <input placeholder=\\"Search Anything\\" type=\\"search\\" aria-label=\\"Search\\" class=\\"fd-search-field__input\\" value=\\"Typing\\">
+        <div role=\\"presentation\\" aria-hidden=\\"true\\" class=\\"fd-search-field__underline\\"></div>
+        <div class=\\"fd-search-field__actions\\">
+            <div class=\\"fd-search-field__action-container\\">
+                <button class=\\"fd-button fd-button--nested\\" aria-label=\\"Close\\">
+                    <i class=\\"sap-icon--decline\\" role=\\"presentation\\"></i>
+                </button>
+            </div>
+            <div class=\\"fd-search-field__action-container\\">
+                <button class=\\"fd-button fd-button--nested is-focus\\" aria-label=\\"Search\\" aria-disabled=\\"false\\">
+                    <i class=\\"sap-icon--slim-arrow-right\\" role=\\"presentation\\"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+"
+`;
+
 exports[`Check stories > Components/Select > Story AsFormItem > Should match snapshot 1`] = `
 "<div style=\\"height:220px\\">
     <div class=\\"fd-form-item\\">