Index: src/main/java/edu/gjoko/schedlr/controllers/rest/ServiceApi.java
===================================================================
--- src/main/java/edu/gjoko/schedlr/controllers/rest/ServiceApi.java	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/java/edu/gjoko/schedlr/controllers/rest/ServiceApi.java	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -1,5 +1,7 @@
 package edu.gjoko.schedlr.controllers.rest;
 
+import edu.gjoko.schedlr.dto.ServiceDto;
 import edu.gjoko.schedlr.entity.Service;
+import edu.gjoko.schedlr.mappers.ServiceDtoMapper;
 import edu.gjoko.schedlr.services.ServicesService;
 import lombok.AllArgsConstructor;
@@ -18,4 +20,5 @@
 
     private ServicesService service;
+    private ServiceDtoMapper serviceDtoMapper;
     @PostMapping(path="/delete")
     public void saveBusiness(@RequestBody List<Service> serviceList) {
@@ -34,3 +37,11 @@
         service.saveOrUpdateServices(serviceList, ownerId);
     }
+
+    @GetMapping
+    public List<ServiceDto> searchServicesByKeyWord(@RequestParam(value = "searchKeyword", required = false) String searchKeyWord) {
+        return service.getServicesByKeyword(searchKeyWord)
+                .stream()
+                .map(serviceDtoMapper::serviceToServiceDto)
+                .toList();
+    }
 }
Index: src/main/java/edu/gjoko/schedlr/dto/ServiceDto.java
===================================================================
--- src/main/java/edu/gjoko/schedlr/dto/ServiceDto.java	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
+++ src/main/java/edu/gjoko/schedlr/dto/ServiceDto.java	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -0,0 +1,23 @@
+package edu.gjoko.schedlr.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@NoArgsConstructor
+@AllArgsConstructor
+public class ServiceDto {
+
+    private long id;
+    private String serviceName;
+    private String description;
+    private Float rating;
+    private int reviewsCount;
+    private long businessId;
+    private String businessName;
+    private int duration;
+    private int price;
+}
Index: src/main/java/edu/gjoko/schedlr/entity/Service.java
===================================================================
--- src/main/java/edu/gjoko/schedlr/entity/Service.java	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/java/edu/gjoko/schedlr/entity/Service.java	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -50,4 +50,7 @@
     private Business business;
 
+    @Column(name = "description")
+    private String description;
+
     @OneToMany(mappedBy="service")
     @JsonManagedReference(value = "serviceAppointments")
Index: src/main/java/edu/gjoko/schedlr/mappers/ServiceDtoMapper.java
===================================================================
--- src/main/java/edu/gjoko/schedlr/mappers/ServiceDtoMapper.java	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
+++ src/main/java/edu/gjoko/schedlr/mappers/ServiceDtoMapper.java	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -0,0 +1,33 @@
+package edu.gjoko.schedlr.mappers;
+
+import edu.gjoko.schedlr.dto.AppointmentDto;
+import edu.gjoko.schedlr.dto.ServiceDto;
+import edu.gjoko.schedlr.entity.Appointment;
+import org.modelmapper.ModelMapper;
+import org.modelmapper.TypeMap;
+import org.modelmapper.config.Configuration;
+import org.springframework.stereotype.Service;
+
+import java.lang.reflect.Type;
+
+@Service
+public class ServiceDtoMapper extends ModelMapper {
+
+    public ServiceDtoMapper() {
+        this.getConfiguration().setFieldMatchingEnabled(true).setFieldAccessLevel(Configuration.AccessLevel.PRIVATE);
+        TypeMap<edu.gjoko.schedlr.entity.Service, ServiceDto> propertyMapper = this.createTypeMap(edu.gjoko.schedlr.entity.Service.class, ServiceDto.class);
+        propertyMapper.addMappings(
+                mapper -> mapper.map(service -> service.getBusiness().getCompanyName(), ServiceDto::setBusinessName)
+        );
+        propertyMapper.addMappings(
+                mapper -> mapper.map(service -> service.getServiceType().getName(), ServiceDto::setServiceName)
+        );
+        propertyMapper.addMappings(
+                mapper -> mapper.map(service -> service.getBusiness().getId(), ServiceDto::setBusinessId)
+        );
+    }
+
+    public ServiceDto serviceToServiceDto(edu.gjoko.schedlr.entity.Service service) {
+        return this.map(service, ServiceDto.class);
+    }
+}
Index: src/main/java/edu/gjoko/schedlr/repositories/ServiceRepository.java
===================================================================
--- src/main/java/edu/gjoko/schedlr/repositories/ServiceRepository.java	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/java/edu/gjoko/schedlr/repositories/ServiceRepository.java	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -11,3 +11,9 @@
 @Repository
 public interface ServiceRepository extends JpaRepository<Service, Long> {
+
+    @Query(value = "select s from Service as s " +
+            " where (s.serviceType.name like CONCAT('%', :keyword, '%') " +
+            " or s.description like CONCAT('%', :keyword, '%'))" +
+            " and s.serviceStatus = 'ACTIVE'")
+    List<Service> getServicesByKeyword(String keyword);
 }
Index: src/main/java/edu/gjoko/schedlr/services/ServicesService.java
===================================================================
--- src/main/java/edu/gjoko/schedlr/services/ServicesService.java	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/java/edu/gjoko/schedlr/services/ServicesService.java	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -5,5 +5,4 @@
 import edu.gjoko.schedlr.entity.ServiceType;
 import edu.gjoko.schedlr.repositories.BusinessRepository;
-import edu.gjoko.schedlr.repositories.BusinessTypeRepository;
 import edu.gjoko.schedlr.repositories.ServiceRepository;
 import edu.gjoko.schedlr.repositories.ServiceTypeRepository;
@@ -29,4 +28,8 @@
     }
 
+    public List<edu.gjoko.schedlr.entity.Service> getServicesByKeyword(String keyword) {
+        return serviceRepository.getServicesByKeyword(keyword);
+    }
+
     public void saveOrUpdateServices(List<edu.gjoko.schedlr.entity.Service> serviceList, Long ownerId) {
         if (!CollectionUtils.isEmpty(serviceList)) {
@@ -38,4 +41,5 @@
                     found.setPrice(service.getPrice());
                     found.setServiceStatus(ServiceStatus.ACTIVE);
+                    found.setDescription(service.getDescription());
                     serviceRepository.save(found);
                 } else {
Index: src/main/resources/data.sql
===================================================================
--- src/main/resources/data.sql	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/resources/data.sql	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -29,8 +29,8 @@
        (40001, 'ACTIVE', 'Manikir Marija', current_timestamp, current_timestamp, 2, 40000);
 
-insert into service (id, created, modified, service_status, duration, price, cumulated_rating, reviews_count, business_id, service_type_id)
-values (10002, current_timestamp, current_timestamp, 'ACTIVE', 60, 400, 0, 0, 10001, 6),
-       (10003, current_timestamp, current_timestamp, 'ACTIVE', 30, 200, 0, 0, 10001, 7),
-       (40002, current_timestamp, current_timestamp, 'ACTIVE', 60, 600, 0, 0, 40001, 5);
+insert into service (id, created, modified, service_status, duration, price, cumulated_rating, reviews_count, business_id, service_type_id, description)
+values (10002, current_timestamp, current_timestamp, 'ACTIVE', 60, 400, 0, 0, 10001, 6, 'Sewing dress with previously bought material.'),
+       (10003, current_timestamp, current_timestamp, 'ACTIVE', 30, 200, 0, 0, 10001, 7, 'Shortening of pants and fixing pant''s edges.'),
+       (40002, current_timestamp, current_timestamp, 'ACTIVE', 60, 600, 0, 0, 40001, 5, 'Removing old nail extensions and creating new ones.');
 
 insert into appointment (id, created, modified, start_time, end_time, stakeholder_id, service_id)
Index: src/main/resources/static/css/homepage.css
===================================================================
--- src/main/resources/static/css/homepage.css	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/resources/static/css/homepage.css	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -75,2 +75,7 @@
     padding: 10px;
 }
+
+.welcome_message {
+    width:480px;
+    margin:auto;
+}
Index: src/main/resources/static/js/business_admin.js
===================================================================
--- src/main/resources/static/js/business_admin.js	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/resources/static/js/business_admin.js	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -35,4 +35,9 @@
             '        </div>' +
             '    </div>' +
+            '    <div class="row" style="margin-top:10px;">' +
+            '        <div class="form-outline col-md-10 d-grid">' +
+            '            <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description" />' +
+            '        </div>' +
+            '    </div>' +
             '</div>');
         event.preventDefault();
@@ -49,4 +54,5 @@
             var time = $($($(label).parent()).siblings()[0]).children()[0].value;
             var price = $($($(label).parent()).siblings()[1]).children()[0].value;
+            var description = $($($($($($(label).parent())).parent()).siblings()[0]).children()[0]).children()[0].value;
 
             var serviceType = {};
@@ -61,4 +67,5 @@
             service['duration'] = parseInt(time);
             service['price'] = parseInt(price);
+            service['description'] = description;
             servicesObj.push(service);
         });
@@ -251,5 +258,6 @@
         $.each(business['services'], function (index, obj) {
 
-            var element = '<div class=\"form-outline mb-4\">' +
+            var element =
+                '<div class=\"form-outline mb-4\">' +
                 '    <div class="row">' +
                 '        <div class="col-md-6">\n' +
@@ -270,4 +278,9 @@
                 '        </div>' +
                 '    </div>' +
+                '    <div class="row" style="margin-top:10px;">' +
+                '        <div class="form-outline col-md-10 d-grid">' +
+                '            <input type="text" id="' + obj.id + obj['serviceType'].name.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description"  value=\"' + obj.description + '" />' +
+                '        </div>' +
+                '    </div>' +
                 '</div>';
 
Index: src/main/resources/static/js/homepage.js
===================================================================
--- src/main/resources/static/js/homepage.js	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/resources/static/js/homepage.js	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -94,28 +94,7 @@
     });
 
-    $("#company").change(function () {
-        resetRatingCard();
-        var selectedVal = $(this).find(':selected').val();
-        $.ajax({
-            url: "http://localhost:8080/api/appointment/business/" + selectedVal
-        }).then(function (data) {
-            // get already stored service from in-memory
-            selectedServices = businesses.find(item => item.id == selectedVal)['services'];
-            console.log(selectedServices);
-            resetAndAppendServices(selectedServices);
-        });
-        $('#calendar').fullCalendar('refetchEvents');
-    });
-
-    $("#service").change(function () {
-        var selectedVal = $("#service").find(':selected').val();
-        var service = selectedServices.find(item => item.id == selectedVal);
-        setRatingCard(service['serviceType']['name'], service['rating'], service['reviewsCount'], selectedVal);
-    });
-
     $("#startdatetime").change(function() {
         var date = new Date(document.getElementById("startdatetime").valueAsDate);
-        var selectedVal = $("#service").find(':selected').val();
-        var minutes = selectedServices.find(item => item.id == selectedVal)['duration'];
+        var minutes = parseInt($("#service").attr('duration'));
         date.setMinutes(date.getMinutes() + minutes);
         document.getElementById("enddatetime").value = date.toISOString().slice(0, 16);
@@ -131,7 +110,8 @@
         var appointment = {};
         var business  = {};
-        business['id'] = parseInt($("#company").val());
-        appointment['service'] = {'id': parseInt($("#service").val()), 'business':business};
+        business['id'] = parseInt($('#company').attr('business-id'));
+        appointment['service'] = {'id': parseInt($('#service').attr('service-id')), 'business':business};
         appointment['startTime'] = $("#startdatetime").val();
+        console.log(appointment);
 
         $.ajax({
@@ -143,5 +123,5 @@
             success: function(succ){
                 alert("Successful appointment!");
-                var companyId = parseInt($("#company").find(':selected').val());
+                var companyId = parseInt($('#company').attr('business-id'));
                 getAppointmentsByBusiness(companyId, events);
                 destroyCalendar();
@@ -154,4 +134,13 @@
     });
 
+    $('#search-input').keypress(function (e) {
+
+        var key = e.which;
+        if(key === 13) { // the enter key code
+            searchServices();
+            return false;
+        }
+    });
+
 });
 
@@ -176,6 +165,4 @@
     element.append(defaultOption);
 }
-
-/*loadCalendar([{'title': 'Gjoko', 'start': '2023-09-01 01:00:00', 'end': '2023-09-01 01:30:00', 'allDay':false, 'color': 'blue'}])*/
 
 function getAppointmentsByBusiness(businessId, events) {
@@ -273,9 +260,8 @@
                 $(this).remove();
             }
-            console.log('dropped');
 
         },
         events: function (start, end, callback) {
-            var selectedVal = $("#company").find(':selected').val();
+            var selectedVal = $('#company').attr('business-id');
             if(!isNaN(parseInt(selectedVal))) {
                 $.ajax({
@@ -358,4 +344,90 @@
 }
 
+function searchServices() {
+    let value = document.getElementById("search-input").value;
+    $.ajax({
+        type: 'GET',
+        url: "http://localhost:8080/api/service?searchKeyword=" + value,
+        success: function(data, textStatus, request) {
+
+            // clear previous data
+            $('#searchResultsModalBody').html('');
+
+            if (data.length === 0) {
+                showNoSearchResultsFound();
+            } else {
+                showSearchResults(data);
+            }
+
+        },
+        error: function (request, textStatus, errorThrown) {
+            console.log(errorThrown);
+        }
+    });
+}
+
+function showSearchResults(data) {
+    var searchResultsBody = $('#searchResultsModalBody')
+    searchResultsBody.append(
+        '<div class="form-outline col-lg-12 row">\n' +
+        '            <div class="form-outline col-lg-12">\n' +
+        '                <div class="table-responsive">\n' +
+        '                    <table class="table">\n' +
+        '                        <thead>\n' +
+        '                        <tr>\n' +
+        '                            <th scope="col">#</th>\n' +
+        '                            <th scope="col">Business</th>\n' +
+        '                            <th scope="col">Service name</th>\n' +
+        '                            <th scope="col">Service Description</th>\n' +
+        '                            <th scope="col">Durantion/Price</th>\n' +
+        '                            <th scope="col">Rating/ReviewCount</th>\n' +
+        '                            <th scope="col">Make reserviation</th>\n' +
+        '                        </tr>\n' +
+        '                        </thead>\n' +
+        '                        <tbody id="search-results-table-body">\n' +
+        '                        </tbody>\n' +
+        '                    </table>\n' +
+        '                </div>\n' +
+        '            </div>\n' +
+        '        </div>');
+    let $el = $('#search-results-table-body');
+
+    $.each(data, function (index, obj) {
+        var element=
+            '<tr>' +
+            '   <th scope="row">' + (parseInt(index) + 1) + '</th>' +
+            '   <td>' + obj['businessName'] + '</td>' +
+            '   <td>' + obj['serviceName'] + '</td>' +
+            '   <td>' + obj['description'] + '</td>' +
+            '   <td>' + obj['duration'] + '/' + obj['price'] + '</td>' +
+            '   <td>' + obj['rating'] + '/' + obj['reviewsCount'] + '</td>' +
+            '   <td><button type="button" class="btn btn-primary" ' + 'onclick="makeReservation(\'' + obj['serviceName'] + '\',' + obj['rating'] + ',' + obj['reviewsCount'] + ',' + obj['id'] + ',\'' + obj['businessName'] + '\',' + obj['businessId'] + ',' + obj['duration'] +  ')" ' + '>Reserve</button></td>' +
+            '</tr>';
+
+        $el.append(element);
+    });
+
+    $('#searchModal').modal('show');
+}
+
+function makeReservation(name, value, count, serviceId, businessName, businessId, duration) {
+    $('#searchModal').modal('hide');
+    $('#body-after-search').css("display", "inline");
+    $('#welcome-message').css('display', 'none');
+    $('#calendar').fullCalendar('render');
+    setRatingCard(name, value, count, serviceId);
+    $('#company').val(businessName);
+    $('#company').attr('business-id', businessId);
+    $('#service').val(name);
+    $('#service').attr('duration', duration);
+    $('#service').attr('service-id', serviceId);
+    $('#calendar').fullCalendar('refetchEvents');
+}
+
+function showNoSearchResultsFound() {
+    $('#searchResultsModalBody').text('Sorry we have no results for the thing that you search, please close the modal and search for something else.');
+    $('#searchModal').modal('show');
+}
+
 function generateStars(number) {
     return '☆'.repeat(number);
Index: src/main/resources/static/js/register_business.js
===================================================================
--- src/main/resources/static/js/register_business.js	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/resources/static/js/register_business.js	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -17,19 +17,25 @@
         var $el = $("#predefined_services");
         $el.empty();
+        console.log(selectedObj['serviceTypes']);
         $.each(selectedObj['serviceTypes'], function (index, obj) {
             $el.append(
-                '<div class=\"form-outline mb-4\">' +
+                '<div class="form-outline mb-4">' +
                 '    <div class="row">' +
                 '        <div class="col-md-6">\n' +
-                '            <input class="form-check-input" type="checkbox" value=\"' + obj.id + '\" id=\"' + obj.id + '\">\n' +
-                '            <label class="form-check-label" for=\"' + obj.id + '\">\n' +
+                '            <input class="form-check-input" type="checkbox" value="' + obj.id + '" id="' + obj.id + '">\n' +
+                '            <label class="form-check-label" for="' + obj.id + '">\n' +
                 obj.name +
                 '            </label>\n' +
                 '        </div>' +
-                '        <div class=\"form-outline col-md-2 d-grid\">' +
-                '            <input type=\"text\" id=\"' + obj.id + obj.name.replace(/\s/g, "") + "duration" + '\" class=\"form-control\" placeholder="time" />' +
+                '        <div class="form-outline col-md-2 d-grid">' +
+                '            <input type="text" id="' + obj.id + obj.name.replace(/\s/g, "") + "duration" + '" class="form-control" placeholder="time" />' +
                 '        </div>' +
-                '        <div class=\"form-outline col-md-2 d-grid\">' +
-                '            <input type=\"text\" id=\"' + obj.id + obj.name.replace(/\s/g, "") + "price" + '\" class=\"form-control\" placeholder="price" />' +
+                '        <div class="form-outline col-md-2 d-grid">' +
+                '            <input type="text" id="' + obj.id + obj.name.replace(/\s/g, "") + "price" + '" class="form-control" placeholder="price" />' +
+                '        </div>' +
+                '    </div>' +
+                '    <div class="row" style="margin-top:10px;">' +
+                '        <div class="form-outline col-md-10 d-grid">' +
+                '            <input type="text" id="' + obj.id + obj.name.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description" />' +
                 '        </div>' +
                 '    </div>' +
@@ -58,5 +64,10 @@
             '        </div>' +
             '        <div class="form-outline col-md-2 d-grid">' +
-            '            <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "price"+ '" class="form-control" placeholder="price" />' +
+            '            <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "price" + '" class="form-control" placeholder="price" />' +
+            '        </div>' +
+            '        <div class="row" style="margin-top:10px;">' +
+            '            <div class="form-outline col-md-10 d-grid">' +
+            '                <input type="text" id="' + -1 + input_service.replace(/\s/g, "") + "description" + '" class="form-control" placeholder="description" />' +
+            '            </div>' +
             '        </div>' +
             '    </div>' +
@@ -90,4 +101,5 @@
             var time = $($($(label).parent()).siblings()[0]).children()[0].value;
             var price = $($($(label).parent()).siblings()[1]).children()[0].value;
+            var description = $($($($($($(label).parent())).parent()).siblings()[0]).children()[0]).children()[0].value;
 
             var serviceType = {}
@@ -99,4 +111,5 @@
             service['duration'] = time;
             service['price'] = price;
+            service['description'] = description;
             servicesObj.push(service);
         });
Index: src/main/resources/templates/homepage.html
===================================================================
--- src/main/resources/templates/homepage.html	(revision e8999eba0785f481065f4b72ccfe4cbd61c6fe20)
+++ src/main/resources/templates/homepage.html	(revision f29cd586347674fffc4883ad465fbbc408b2d042)
@@ -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>