diff --git a/application/frontend/src/pages/Search/components/SearchBar.scss b/application/frontend/src/pages/Search/components/SearchBar.scss
index f77c61f7..0ab6f536 100644
--- a/application/frontend/src/pages/Search/components/SearchBar.scss
+++ b/application/frontend/src/pages/Search/components/SearchBar.scss
@@ -16,8 +16,8 @@
   }
 
   .search-icon {
-    position: absolute;
-    left: 0.75rem;
+    position: relative;
+    left: 1rem;
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted-foreground);
diff --git a/application/frontend/src/pages/Search/components/SearchBar.tsx b/application/frontend/src/pages/Search/components/SearchBar.tsx
index 7fa4830e..d7aab689 100644
--- a/application/frontend/src/pages/Search/components/SearchBar.tsx
+++ b/application/frontend/src/pages/Search/components/SearchBar.tsx
@@ -41,6 +41,8 @@ export const SearchBar = () => {
           Search OpenCRE
         </label>
 
+        <div className="search-container flex items-center">
+
         <Search className="search-icon" aria-hidden="true" />
 
         <input
@@ -58,6 +60,7 @@ export const SearchBar = () => {
             })
           }
         />
+        </div>
       </form>
       {/* Error text */}
       {search.error && (