diff --git a/public/css/search.css b/public/css/search.css
index 59c7918619334758ed362d98396248aa88a59c54..c6da220f3f92a985d2e2f9f5034f4de0767483df 100644
--- a/public/css/search.css
+++ b/public/css/search.css
@@ -86,4 +86,42 @@ body {
   .button:hover {
     background-color: #005bb5;
   }
+  .search-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 400px;
+    border: 2px solid #007BFF;
+    border-radius: 25px;
+    overflow: hidden;
+    background: white;
+  }
+  
+  .search-container input {
+    flex: 1;
+    padding: 10px 15px;
+    border: none;
+    outline: none;
+    font-size: 16px;
+  }
+  
+  .search-container button {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+  }
+  
+  .search-container button:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+  }
+  
+  .search-container button:active {
+    background-color: #004494;
+    transform: scale(0.98);
+  }
   
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index 0631eb79c6cbe3233ce99c20d3a50506ee49115f..94bfbee9692556a5667dc17ce6142c9fdca6ac0c 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -14,7 +14,7 @@
       <% if (session.userId) { %>
         <a href="/create" class="btn-create">Create Tour</a>
       <% } %>
-      <form action="/search" method="GET">
+      <form action="/search" method="GET" class="search-container">
         <input type="text" name="query" placeholder="Search for tours..." required>
         <button type="submit">Search</button>
       </form>