Set searchbox at the left side

frontend/src/App.css

@@ -16,6 +16,14 @@ body {
   text-align: center;
 }
 
+/* 🔹 מרכז כותרת */
+.title-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
 .main-title {
   display: flex;
   align-items: center;
@@ -34,8 +42,19 @@ body {
   vertical-align: middle;
 }
 
+/* 🔹 תיבת חיפוש בצד שמאל */
+.search-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  max-width: 1200px;
+  margin-bottom: 2rem;
+  margin-left: 2rem;
+}
+
 .search-input {
   background: transparent;
+  margin-bottom: 10px;
   border: none;
   border-bottom: 2px solid #2e6dc0;
   color: white;
@@ -55,3 +74,5 @@ body {
 .search-input:focus {
   border-bottom: 2px solid #4a90e2;
 }
+
+/* (שאר סגנונות שלך כמו add-button וכו') */

frontend/src/App.jsx

@@ -98,13 +98,17 @@ function App() {
   return (
     <div className="App">
       <Clock />
-      <h1 className="main-title">
-        <img src="/navix-logo.svg" alt="Navix logo" className="navix-logo" />
-        Navix
-      </h1>
 
-      {/* 🔍 Search Box */}
-      <div style={{ display: 'flex', justifyContent: 'flex-start', marginLeft: '2rem' }}>
+      {/* 🔹 לוגו וכותרת במרכז */}
+      <div className="title-wrapper">
+        <h1 className="main-title">
+          <img src="/navix-logo.svg" alt="Navix logo" className="navix-logo" />
+          Navix
+        </h1>
+      </div>
+
+      {/* 🔍 שורת חיפוש בצד שמאל */}
+      <div className="search-wrapper">
         <input
           type="text"
           placeholder="Search apps..."