Index: src/main/resources/templates/register_business.html
===================================================================
--- src/main/resources/templates/register_business.html	(revision a436340967abb97f2cda58184c9eaaa6f91fcea1)
+++ src/main/resources/templates/register_business.html	(revision 2b0a4db95e071b47a10460f6bb4d73d43885fb9c)
@@ -5,19 +5,7 @@
     <title>Schedlr</title>
 
-    <!-- Font Awesome -->
-    <link
-            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
-            rel="stylesheet"
-    />
-    <!-- Google Fonts -->
-    <link
-            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-            rel="stylesheet"
-    />
-    <!-- MDB -->
-    <link
-            href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css"
-            rel="stylesheet"
-    />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+
     <link rel="stylesheet" href="css/login.css">
 
@@ -29,5 +17,5 @@
             <div class="col-lg-6 mb-5 mb-lg-0">
                 <h1 class="my-5 display-3 fw-bold ls-tight">
-                    Register as  <br />
+                    Register as <br/>
                     <span class="text-primary">a business</span>
                 </h1>
@@ -49,12 +37,12 @@
                                 <div class="col-md-6 mb-4">
                                     <div class="form-outline">
-                                        <input type="text" id="firstName" class="form-control" />
-                                        <label class="form-label" for="firstName">First name</label>
+                                        <input type="text" id="firstName" class="form-control" placeholder="Username"
+                                               aria-label="Username"/>
                                     </div>
                                 </div>
                                 <div class="col-md-6 mb-4">
                                     <div class="form-outline">
-                                        <input type="text" id="lastName" class="form-control" />
-                                        <label class="form-label" for="lastName">Last name</label>
+                                        <input type="text" id="lastName" class="form-control" placeholder="Last name"
+                                               aria-label="lastname"/>
                                     </div>
                                 </div>
@@ -63,18 +51,18 @@
                             <!-- Email input -->
                             <div class="form-outline mb-4">
-                                <input type="email" id="email" class="form-control" />
-                                <label class="form-label" for="email">Email address</label>
+                                <input type="email" id="email" class="form-control" placeholder="Email"
+                                       aria-label="Email"/>
                             </div>
 
                             <!-- Email input -->
                             <div class="form-outline mb-4">
-                                <input type="email" id="username" class="form-control" />
-                                <label class="form-label" for="username">Username</label>
+                                <input type="text" id="username" class="form-control" placeholder="Username"
+                                       aria-label="username"/>
                             </div>
 
                             <!-- Password input -->
                             <div class="form-outline mb-4">
-                                <input type="password" id="password" class="form-control" />
-                                <label class="form-label" for="password">Password</label>
+                                <input type="password" id="password" class="form-control" placeholder="Password"
+                                       aria-label="password"/>
                             </div>
 
@@ -84,19 +72,32 @@
 
                             <div class="form-outline mb-4">
-                                <input type="email" id="companyName" class="form-control" />
-                                <label class="form-label" for="companyName">Company Name</label>
+                                <input type="email" id="companyName" class="form-control" placeholder="Company Name"
+                                       aria-label="companyName"/>
                             </div>
 
                             <div class="form-outline mb-4">
-                                <select class="form-select" id="companyType">
-                                    <option value="" disabled selected hidden>Company Type</option>
+                                <select class="form-select" id="companyType" aria-label="Default select example">
+                                    <option disabled selected hidden>Company Type</option>
                                 </select>
                             </div>
 
-                            <div class="form-group form-outline mb-4">
-                                <label for="services">Services</label>
-                                <input type="text" class="form-control" placeholder="Services" list="list-timezone" id="services">
-                                <datalist id="list-timezone">
-                                </datalist>
+                            <div class="text-center">
+                                <p>Select from the predefined services or add a new one</p>
+                            </div>
+
+                            <div class="row">
+                                <div class="form-outline col-md-10">
+                                    <div class="form-outline">
+                                        <input type="text" id="services" class="form-control" placeholder="Services"
+                                               aria-label="services"/>
+                                    </div>
+                                </div>
+                                <div class="form-outline col-md-2 d-grid">
+                                    <button class="btn btn-primary" id="add_service">Add</button>
+                                </div>
+                            </div>
+
+
+                            <div id="predefined_services" class="form-outline mb-4">
                             </div>
 
@@ -113,11 +114,13 @@
     </div>
 </div>
-<script src='js/jquery-1.10.2.js' type="text/javascript"></script>
-<script
-        type="text/javascript"
-        src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
-></script>
+<!-- jQuery library -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
+        integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
+        crossorigin="anonymous"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
 <script src="js/register_business.js" type="text/javascript"></script>
-<script src="js/bootstrap-autocomplete.min.js"></script>
 </body>
 </html>
