diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css
index 6fbc7be3a5..8aa99175b3 100644
--- a/packages/ui/css/styles.css
+++ b/packages/ui/css/styles.css
@@ -10564,14 +10564,33 @@
           opacity: 0;
         }
       }
+
+      & .bui-InputWrapper {
+        & .bui-Input[data-icon] {
+          padding-right: 0;
+        }
+      }
     }
   }
 }
 
 .bui-SearchField .bui-Input {
-  padding-left: var(--bui-space-6);
-  padding-right: var(--bui-space-1);
-  transition: padding .3s ease-in-out;
+  transition: padding .3s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out;
+
+  &[data-hovered] {
+    border-color: var(--bui-border-hover);
+  }
+
+  &[data-focused] {
+    border-color: var(--bui-border-pressed);
+    outline-width: 0;
+  }
+}
+
+.bui-SearchField .bui-InputWrapper {
+  & .bui-Input[data-icon] {
+    padding-right: var(--bui-space-6);
+  }
 }
 
 .bui-SearchField .bui-InputIcon {
@@ -10580,7 +10599,7 @@
   left: 0;
 
   &[data-size="small"] {
-    width: var(--bui-space-9);
+    width: var(--bui-space-8);
   }
 
   &[data-size="medium"] {
diff --git a/packages/ui/src/components/SearchField/SearchField.styles.css b/packages/ui/src/components/SearchField/SearchField.styles.css
index 2a505e5f14..b56bc0efd5 100644
--- a/packages/ui/src/components/SearchField/SearchField.styles.css
+++ b/packages/ui/src/components/SearchField/SearchField.styles.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
- .bui-SearchField {
+.bui-SearchField {
   flex: 1;
   flex-shrink: 0;
 
@@ -60,14 +60,34 @@
           opacity: 0;
         }
       }
+
+      .bui-InputWrapper {
+        .bui-Input[data-icon] {
+          padding-right: 0px;
+        }
+      }
     }
   }
 }
 
 .bui-SearchField .bui-Input {
-  padding-left: var(--bui-space-6);
-  padding-right: var(--bui-space-1);
-  transition: padding 0.3s ease-in-out;
+
+  transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
+
+  &[data-hovered] {
+    border-color: var(--bui-border-hover);
+  }
+
+  &[data-focused] {
+    border-color: var(--bui-border-pressed);
+    outline-width: 0px;
+  }
+}
+
+.bui-SearchField .bui-InputWrapper {
+  .bui-Input[data-icon] {
+    padding-right: var(--bui-space-6);
+  }
 }
 
 .bui-SearchField .bui-InputIcon {
@@ -76,7 +96,7 @@
   justify-content: center;
 
   &[data-size='small'] {
-    width: var(--bui-space-9);
+    width: var(--bui-space-8);
   }
 
   &[data-size='medium'] {