3 files changed, 6 insertions, 2 deletions
diff --git a/FrontEnd/src/views/center/index.tsx b/FrontEnd/src/views/center/index.tsx
index 77bb6ec8..d226e63c 100644
--- a/FrontEnd/src/views/center/index.tsx
+++ b/FrontEnd/src/views/center/index.tsx
@@ -23,7 +23,7 @@ const HomePage: React.FC = () => {
     <>
       <div className="container">
         <div className="row my-3 justify-content-center">
-          <div className="col col-12 col-sm-8 col-lg-6">
+          <div className="col col-12 col-md-8">
             <SearchInput
               className="justify-content-center"
               value={navText}
diff --git a/FrontEnd/src/views/common/SearchInput.css b/FrontEnd/src/views/common/SearchInput.css
index 2943b3a2..f0503016 100644
--- a/FrontEnd/src/views/common/SearchInput.css
+++ b/FrontEnd/src/views/common/SearchInput.css
@@ -2,3 +2,7 @@
   display: flex;
   flex-wrap: wrap;
 }
+
+.cru-search-input-input {
+  width: 100%;
+}
diff --git a/FrontEnd/src/views/common/SearchInput.tsx b/FrontEnd/src/views/common/SearchInput.tsx
index da3f1c19..0b1eb8e1 100644
--- a/FrontEnd/src/views/common/SearchInput.tsx
+++ b/FrontEnd/src/views/common/SearchInput.tsx
@@ -50,7 +50,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
     >
       <input
         type="text"
-        className="me-sm-2 flex-grow-1"
+        className="cru-search-input-input me-sm-2 flex-grow-1"
         value={props.value}
         onChange={onInputChange}
         onKeyPress={onInputKeyPress}