diff --git a/src/App.css b/src/App.css
index 559bf97..cc5ed33 100644
--- a/src/App.css
+++ b/src/App.css
@@ -70,3 +70,22 @@ input[type=number]::-webkit-outer-spin-button {
   transform: scale(1.05);
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }
+.autocomplete-container .MuiOutlinedInput-root {
+  border-radius: 8px;
+  border-color: white;
+  color: white;
+  transition: border-color 0.3s ease, color 0.3s ease;
+}
+.autocomplete-container .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+  border-color: white; 
+}
+.autocomplete-container .MuiInputLabel-root {
+  color: white;
+  transition: color 0.3s ease;
+}
+.autocomplete-container .MuiInputLabel-root.Mui-focused {
+  color: white; 
+}
+.autocomplete-container .MuiOutlinedInput-input {
+  color: white; 
+}
diff --git a/src/App.jsx b/src/App.jsx
index f8b89ea..bdb09cd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -88,14 +88,20 @@ function App() {
           <label htmlFor="inputNumber" className="col-form-label">Episode Number</label>
         </div>
 
-        <div className="col-auto">
-          <Autocomplete
+        <div className="col-auto autocomplete-container">
+         <Autocomplete
             disablePortal
-            className="bg-white"
             options={options}
             sx={{ width: 300 }}
-            renderInput={(params) => <TextField onSelect={handleOnChange} onChange={handleOnChange} {...params} label="Input Ep.1 to 806 (Finale)" />}
-          />
+            renderInput={(params) => (
+         <TextField
+             onSelect={handleOnChange}
+            onChange={handleOnChange}
+             {...params}
+            label="Input Ep.1 to 806 (Finale)"
+              />
+            )}
+            />
         </div>
 
         <div className="col-auto">