diff --git a/app/components/SearchInput/Input.tsx b/app/components/SearchInput/Input.tsx
index b408f177..c313eeda 100644
--- a/app/components/SearchInput/Input.tsx
+++ b/app/components/SearchInput/Input.tsx
@@ -28,7 +28,9 @@ export const SearchInput = ({onChange, expandable, placeholderText}: SearchInput
   const clear = () => handleSearch('')
 
   return (
-    <div className={`search-box bordered ${expandable ? 'expandable' : ''}`}>
+    <div
+      className={`search-box bordered ${expandable ? 'expandable' : ''} ${search ? 'expanded' : ''}`}
+    >
       <div className="search-content">
         <MagnifyingIcon className="iconsMagnifyingGlass" />
         <input
diff --git a/app/components/SearchInput/input.css b/app/components/SearchInput/input.css
index b2ef14b6..a9fae302 100644
--- a/app/components/SearchInput/input.css
+++ b/app/components/SearchInput/input.css
@@ -3,7 +3,8 @@
   box-sizing: border-box;
   border-radius: var(--border-radius);
 }
-.search-box.expandable:focus-within {
+.search-box.expandable:focus-within,
+.search-box.expandable.expanded {
   width: 21.46vw;
 }