Index: src/main/resources/templates/homepage.html
===================================================================
--- src/main/resources/templates/homepage.html	(revision 77205be723c8b2ffd1ee5618a05e1d12b1cee44a)
+++ src/main/resources/templates/homepage.html	(revision 943857ccadc5bd0933c2bd0b003629ae75c29b17)
@@ -16,5 +16,5 @@
     <link href='css/fullcalendar.print.css' rel='stylesheet' media='print'/>
     <link href="css/homepage.css" rel="stylesheet"/>
-    <link href="css/headers.css" rel="stylesheet" />
+    <link href="css/headers.css" rel="stylesheet"/>
 </head>
 <body>
@@ -23,6 +23,15 @@
 <header class="p-3 mb-3 border-bottom">
     <div class="row" style="justify-content: space-between;">
-        <div class="col-md-8 mb-8">
+        <div class="col-md-4 mb-4">
             Welcome to the Schedlr
+        </div>
+        <div class="col-md-3 mb-3">
+            <input class="form-control mr-sm-2" id="search-input" type="search" placeholder="Search" aria-label="Find services">
+        </div>
+
+        <div class="col-md-1 mb-1">
+            <button id="search" class="btn btn-primary btn-block" onclick="searchServices()">
+                Search
+            </button>
         </div>
         <div class="col-md-2 mb-2">
@@ -45,76 +54,85 @@
 <!-- Navbar end -->
 <div class="container">
-    <div id='wrap'>
-        <div id='calendar'></div>
-        <div style='clear:both'></div>
-    </div>
-
-
-    <div class="card">
-        <div class="form-outline mb-4">
-            <select class="form-select" id="companyType" aria-label="Select company type">
-                <option disabled selected hidden>Company Type</option>
-            </select>
+    <div id='body-after-search' style="display:none;">
+        <div id='wrap'>
+            <div id='calendar'></div>
+            <div style='clear:both'></div>
+        </div>
+        <div class="card">
+            <div class="form-outline mb-4">
+                <input id="company" disabled class="form-control" placeholder="company"
+                       aria-label="company"/>
+            </div>
+            <div class="form-outline mb-4">
+                <input id="service" disabled class="form-control" placeholder="service"
+                       aria-label="service"/>
+            </div>
+            <div class="form-outline mb-4">
+                <label for="startdatetime">Start:</label>
+                <input type="datetime-local" id="startdatetime" name="startdatetime" style="float:right;">
+            </div>
+            <div class="form-outline mb-4">
+                <label for="enddatetime">End:</label>
+                <input type="datetime-local" id="enddatetime" name="enddatetime" style="float:right;">
+            </div>
+            <div class="form-outline mb-4">
+                <button id="createAppointment" class="btn btn-primary btn-block">
+                    Create Appointment
+                </button>
+            </div>
+        </div>
+        <div class="card form-outline mb-4" style="margin-top:30px;">
+            <ul class="list-group list-group-flush" id="reviews-ul">
+                <li class="list-group-item"><b>service name: </b><span id="rating-service-name"></span></li>
+                <li class="list-group-item"><b>rating </b><span id="rating-value"></span></li>
+                <li class="list-group-item" style="margin-bottom:10px;"><b>reviews count </b><span
+                        id="rating-count"></span></li>
+                <li class="list-group-item" id="reviews-li"><a href="#/reviews_page">Checkout reviews</a></li>
+            </ul>
         </div>
 
-        <div class="form-outline mb-4">
-            <select class="form-select" id="company" aria-label="Select company">
-                <option disabled selected hidden>Company</option>
-            </select>
-        </div>
-        <div class="form-outline mb-4">
-            <select class="form-select" id="service" aria-label="Select service">
-                <option disabled selected hidden>Service</option>
-            </select>
-        </div>
-        <div class="form-outline mb-4">
-            <label for="startdatetime">Start:</label>
-            <input type="datetime-local" id="startdatetime" name="startdatetime" style="float:right;">
-        </div>
-        <div class="form-outline mb-4">
-            <label for="enddatetime">End:</label>
-            <input type="datetime-local" id="enddatetime" name="enddatetime" style="float:right;">
-        </div>
-        <div class="form-outline mb-4">
-            <button id="createAppointment" class="btn btn-primary btn-block">
-                Create Appointment
-            </button>
+    </div>
+    <div id="welcome-message" class="welcome_message">
+        <div class="card text-center">
+            <div class="card-body">
+                <h1 class="card-title">
+                    Welcome to Schedlr, please you the search bar to find the services you want.
+                </h1>
+            </div>
         </div>
     </div>
-    <div class="card form-outline mb-4" style="margin-top:30px;" >
-        <ul class="list-group list-group-flush" id="reviews-ul">
-            <li class="list-group-item"><b>service name: </b><span id="rating-service-name"></span></li>
-            <li class="list-group-item"><b>rating </b><span id="rating-value"></span></li>
-            <li class="list-group-item" style="margin-bottom:10px;"><b>reviews count </b><span id="rating-count"></span></li>
-            <li class="list-group-item" id="reviews-li"><a href="#/reviews_page">Checkout reviews</a></li>
-        </ul>
-    </div>
-
-</div>
-<div class="modal fade" id="showReviewsModal" tabindex="-1" aria-labelledby="showReviewsModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered" >
-        <div class="modal-content">
-            <div class="modal-header">
-                <h1>Reviews</h1>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body form-outline col-lg-12 row" id="reviewsModalBody" style="--mdb-gutter-x: 0 !important; background-color: #f0f0f0 !important;">
-                <div class="card m-3" style="max-width: 300px; padding: 0;">
-                    <div class="card-header text-bg-success">
-                        ☆☆☆☆☆
-                    </div>
-                    <ul class="list-group list-group-flush">
-                        <li class="list-group-item"><i>Business:</i> Businessname<</li>
-                        <li class="list-group-item"><i>Service:</i> Customer Name</li>
-                        <li class="list-group-item"><i>Reviewer:</i> Customer Name</li>
-                        <li class="list-group-item"><i>Comment:</i> Lorem ipsum diem amet</li>
-                        <li class="list-group-item"><small class="text-body-secondary">Created on 29-11-2023T11:32:23</small></li>
-                    </ul>
+    <div class="modal fade" id="showReviewsModal" tabindex="-1" aria-labelledby="showReviewsModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1>Reviews</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body form-outline col-lg-12 row" id="reviewsModalBody"
+                     style="--mdb-gutter-x: 0 !important; background-color: #f0f0f0 !important;">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                 </div>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+    </div>
+    <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="showSearchResultsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl modal-dialog-scrollable modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1>Search results</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body form-outline col-lg-12 row" id="searchResultsModalBody"
+                     style="--mdb-gutter-x: 0 !important; background-color: #f0f0f0 !important;">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
             </div>
         </div>
+
     </div>
 </div>
