diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css
index 9fe755e2..47e7eea9 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.css
@@ -3,7 +3,7 @@
   width: 100%;
 }
 
-input[type="text"], .suggestion-list {
+.autocomplete-input, .suggestion-list {
   box-sizing: border-box;
   border: 1px solid #f7f8f9;
   border-radius: 24px;
@@ -12,9 +12,10 @@ input[type="text"], .suggestion-list {
   width: 100%;
 }
 
-input[type="text"]:focus {
+.autocomplete-input:focus {
   outline: none;
   border: 2px solid #4360DF;
+  margin-bottom: 5px;
 }
 
 .suggestion-list {
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
index 059c5390..d1a17d3c 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/AutocompleteInput.tsx
@@ -53,12 +53,11 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
     <div className="autocomplete-container">
       <div className={isFocused ? 'suggestion-list' : ''}>
         <input
-          type="text"
+          className="autocomplete-input"
           value={word}
           onChange={handleInputChange}
           onFocus={handleInputFocus}
           onBlur={handleInputBlur}
-          style={{ marginBottom: isFocused ? '5px' : '0' }}
         />
         {isFocused &&
           suggestions.map(suggestion => (