Index: src/main/resources/static/css/fullcalendar.css
===================================================================
--- src/main/resources/static/css/fullcalendar.css	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/static/css/fullcalendar.css	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -135,5 +135,5 @@
 
 .fc-state-highlight > div > div.fc-day-number{
-    background-color: #ff3b30;
+    background-color: #3b71ca;
     color: #FFFFFF;
     border-radius: 50%;
@@ -212,6 +212,6 @@
 
 .fc-state-default {
-	border-color: #ff3b30;
-	color: #ff3b30;	
+	border-color: #3b71ca;
+	color: #3b71ca;
 }
 .fc-button-month.fc-state-default, .fc-button-agendaWeek.fc-state-default, .fc-button-agendaDay.fc-state-default{
@@ -226,9 +226,9 @@
 .fc-state-disabled {
 	color: #333333;
-	background-color: #FFE3E3;
+	background-color: #fff;
 	}
 
 .fc-state-hover {
-	color: #ff3b30;
+	color: #3b71ca;
 	text-decoration: none;
 	background-position: 0 -15px;
@@ -241,5 +241,5 @@
 .fc-state-down,
 .fc-state-active {
-	background-color: #ff3b30;
+	background-color: #3b71ca;
 	background-image: none;
 	outline: 0;
@@ -250,9 +250,9 @@
 	cursor: default;
 	background-image: none;
-	background-color: #FFE3E3;
+	background-color: #fff;
 	filter: alpha(opacity=65);
 	box-shadow: none;
-	border:1px solid #FFE3E3;
-	color: #ff3b30;
+	border:1px solid #fff;
+	color: #3b71ca;
 	}
 
@@ -648,5 +648,5 @@
 }
 .fc-week .fc-day.fc-state-highlight:hover .fc-day-number{
-    background-color:  #ff3b30;
+    background-color:  #3b71ca;
 }
 .fc-button-today{
Index: src/main/resources/static/css/homepage.css
===================================================================
--- src/main/resources/static/css/homepage.css	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/static/css/homepage.css	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -1,5 +1,5 @@
 #wrap {
-    margin-left: 50px;
     float:left;
+    width: 1000px;
 }
 
@@ -13,4 +13,5 @@
 header {
     background-color: white;
+    height: 67px;
 }
 
@@ -65,2 +66,12 @@
     -webkit-overflow-scrolling: touch;
 }
+
+.hidden-button {
+    display: none;
+    width: 0px;
+}
+
+.card {
+    padding: 10px;
+    
+}
Index: src/main/resources/static/js/business_admin.js
===================================================================
--- src/main/resources/static/js/business_admin.js	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/static/js/business_admin.js	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -7,5 +7,4 @@
     }).then(function (data) {
         business = data;
-        console.log(business);
         var $header = $("#header");
 
@@ -74,3 +73,76 @@
         event.preventDefault();
     });
+
+    $("#update_services_button").click(function () {
+        businesses = [];
+        console.log("Gjoko");
+        servicesObj = [];
+        $.each($('#predefined_services_admin_panel input:checked').siblings(), function (index, label) {
+
+            let service = {};
+            var id = $(label).prop('for');
+            var text = $(label).text();
+            var time = $($($(label).parent()).siblings()[0]).children()[0].value;
+            var price = $($($(label).parent()).siblings()[1]).children()[0].value;
+
+            var serviceType = {}
+            if (parseInt(id) != -1) {
+                service['id'] = parseInt(id);
+                serviceType['id'] = business['services'].find(obj => obj.id === parseInt(id))['serviceType']['id'];
+            } else {
+
+            }
+            serviceType['name'] = text.trim();
+            service['serviceType'] = serviceType;
+            service['duration'] = parseInt(time);
+            service['price'] = parseInt(price);
+            servicesObj.push(service);
+        });
+        business['services'] = servicesObj;
+
+        businesses.push(business);
+        console.log(JSON.stringify(businesses));
+
+        $.ajax({
+            url: "http://localhost:8080/api/business",
+            type:"PATCH",
+            data: JSON.stringify(businesses),
+            contentType:"application/json; charset=utf-8",
+            dataType: 'text',
+            success: function(succ){
+                alert( "Updates applied successfully" );
+            },
+            error: function(err) {
+                alert(err);
+            }
+        });
+        event.preventDefault();
+    });
+
+    $("#update_owner_button").click(function() {
+        businesses = [];
+        console.log("Gjoko");
+        business['owner']['firstName'] = $('#firstName').val();
+        business['owner']['lastName'] = $('#lastName').val();
+        business['owner']['email'] = $('#email').val();
+        business['owner']['username'] = $('#username').val();
+
+        businesses.push(business);
+        console.log(JSON.stringify(businesses));
+
+        $.ajax({
+            url: "http://localhost:8080/api/business",
+            type:"PATCH",
+            data: JSON.stringify(businesses),
+            contentType:"application/json; charset=utf-8",
+            dataType: 'text',
+            success: function(succ){
+                alert( "Updates applied successfully" );
+            },
+            error: function(err) {
+                alert(err);
+            }
+        });
+    });
+    event.preventDefault();
 });
Index: src/main/resources/static/js/fullcalendar.js
===================================================================
--- src/main/resources/static/js/fullcalendar.js	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/static/js/fullcalendar.js	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -2755,5 +2755,6 @@
 	allDaySlot: true,
 	allDayText: 'all-day',
-	firstHour: 6,
+	firstHour: 8,
+	lastHour: 10,
 	slotMinutes: 30,
 	defaultEventMinutes: 120,
@@ -2767,5 +2768,5 @@
 	minTime: 0,
 	maxTime: 24,
-	slotEventOverlap: true
+	slotEventOverlap: false
 });
 
Index: src/main/resources/static/js/homepage.js
===================================================================
--- src/main/resources/static/js/homepage.js	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/static/js/homepage.js	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -1,3 +1,5 @@
 $(document).ready(function() {
+    var businessTypes = {};
+    var businesses = {};
     var date = new Date();
     var d = date.getDate();
@@ -11,5 +13,24 @@
     */
 
-
+    $.ajax({
+        type: 'GET',
+        url: "http://localhost:8080/api/user/me",
+        success: function(data, textStatus, request) {
+            if (data) {
+                $('#create').parent().removeClass('hidden-button');
+                $('#profile').parent().removeClass('hidden-button');
+                $('#logout').parent().removeClass('hidden-button');
+                $('#login').parent().addClass('hidden-button');
+            } else {
+                $('#create').parent().addClass('hidden-button');
+                $('#profile').parent().addClass('hidden-button');
+                $('#logout').parent().addClass('hidden-button');
+                $('#login').parent().removeClass('hidden-button');
+            }
+        },
+        error: function (request, textStatus, errorThrown) {
+            console.log(errorThrown);
+        }
+    });
     /* initialize the external events
     -----------------------------------------------------------------*/
@@ -35,4 +56,53 @@
     });
 
+    $.ajax({
+        url: "http://localhost:8080/api/nomenclatures/businessTypes"
+    }).then(function (data) {
+        businessTypes = data;
+        var $el = $("#companyType");
+        emptyDropdown($el);
+
+        $.each(data, function (index, obj) {
+            $el.append("<option value=" + obj.value + ">" + obj.text + "</option>");
+        });
+    });
+
+    $("#companyType").change(function () {
+        var selectedVal = $(this).find(':selected').val();
+        var selectedObj = businessTypes[selectedVal - 1];
+        $.ajax({
+            url: "http://localhost:8080/api/business/" + selectedObj.value
+        }).then(function (data) {
+            businesses = data;
+            console.log(data);
+            var $el = $("#company");
+            var $servicesEl = $("#service");
+            emptyDropdown($el);
+            emptyDropdown($servicesEl);
+
+            $.each(data, function (index, obj) {
+                $el.append("<option value=" + obj.id + ">" + obj.companyName + "</option>");
+            });
+        });
+    });
+
+    $("#company").change(function () {
+        var selectedVal = $(this).find(':selected').val();
+        $.ajax({
+            url: "http://localhost:8080/api/appointment/business/" + selectedVal
+        }).then(function (data) {
+            console.log(data);
+            var $el = $("#service");
+            emptyDropdown($el);
+
+            var services = businesses.find(item => item.id == selectedVal)['services'];
+            console.log(services);
+
+            $.each(services, function (index, obj) {
+                $el.append("<option value=" + obj.id + ">" + obj.serviceType.name + "</option>");
+            });
+        });
+    });
+
 
     /* initialize the calendar
@@ -47,5 +117,6 @@
         editable: false,
         edit: function (start, end, allDay) {
-
+            console.log(start);
+            console.log(end);
         },
         firstDay: 1, //  1(Monday) this can be changed to 0(Sunday) for the USA system
@@ -131,5 +202,5 @@
                 start: new Date(y, m, d, 10, 30),
                 allDay: false,
-                className: 'important'
+                className: 'info'
             },
             {
@@ -138,5 +209,5 @@
                 end: new Date(y, m, d, 14, 0),
                 allDay: false,
-                className: 'important'
+                className: 'info'
             },
             {
@@ -155,17 +226,34 @@
         ],
     });
-    $("#search").click(function () {
-        alert("qweqew");
+
+    $("#createAppointment").click(function() {
+        var appointment = {};
+        appointment['business'] = {'id': parseInt($("#company").val())};
+        appointment['service'] = {'id': parseInt($("#service").val())};
+        appointment['startTime'] = $("#startdatetime").val();
 
         $.ajax({
-            url: "http://localhost:8080/events"
-        }).then(function(data) {
-            console.log(data);
-        });
-    });
+            url: "http://localhost:8080/api/appointment",
+            type:"POST",
+            data: JSON.stringify(appointment),
+            contentType:"application/json; charset=utf-8",
+            dataType: 'text',
+            success: function(succ){
+                console.log('success');
+            },
+            error: function(err) {
+                console.log(JSON.stringify(err));
+            }
+        });
+    })
 
 });
 
-function search() {
-
+document.getElementById("login").addEventListener("click", function(event){
+   window.location = "/login";
+});
+
+function emptyDropdown(element) {
+    var defaultOption = element.children().get(0);
+    element.children().remove().end().append(defaultOption);
 }
Index: src/main/resources/static/js/login.js
===================================================================
--- src/main/resources/static/js/login.js	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/static/js/login.js	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -1,3 +1,3 @@
 document.getElementById("login").addEventListener("click", function(event){
-    event.preventDefault()
+    event.preventDefault();
 });
Index: src/main/resources/static/js/logout.js
===================================================================
--- src/main/resources/static/js/logout.js	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
+++ src/main/resources/static/js/logout.js	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -0,0 +1,16 @@
+document.getElementById("logout").addEventListener("click", function(event){
+    $.ajax({
+        url: "http://localhost:8080/logout",
+        type:"POST",
+        data: "{}",
+        contentType:"application/json; charset=utf-8",
+        dataType: 'text',
+        success: function(succ){
+            alert( "Logout successful.");
+            window.location = "/login?logoutSuccessful";
+        },
+        error: function(err) {
+            alert(err);
+        }
+    });
+});
Index: src/main/resources/static/js/register_business.js
===================================================================
--- src/main/resources/static/js/register_business.js	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/static/js/register_business.js	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -49,5 +49,5 @@
             '<div class="form-outline mb-4">' +
             '    <div class="row">' +
-            '        <div class="col-md-8">\n' +
+            '        <div class="col-md-6">\n' +
             '            <input class="form-check-input" type="checkbox" checked value="' + -1 + '" id="' + -1 + '">\n' +
             '            <label class="form-check-label" for="' + -1 + '">\n' +
@@ -102,5 +102,4 @@
         });
         businessObj['services'] = servicesObj;
-        console.log(JSON.stringify(businessObj));
         $.ajax({
             url: "http://localhost:8080/api/business",
Index: src/main/resources/templates/admin.html
===================================================================
--- src/main/resources/templates/admin.html	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/templates/admin.html	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -14,7 +14,12 @@
 <!-- Navbar start -->
 <header class="p-3 mb-3 border-bottom">
-    <div class="container">
-        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+    <div class="row">
+        <div class="col-md-10 mb-10">
             Welcome to the admin page
+        </div>
+        <div class="col-md-2 mb-2">
+            <button id="logout" class="btn btn-primary btn-block">
+                Logout
+            </button>
         </div>
     </div>
@@ -39,5 +44,5 @@
 
     <!-- Submit button -->
-    <button type="buttom" class="btn btn-primary btn-block mb-4" id="save_button">
+    <button type="button" class="btn btn-primary btn-block mb-4" id="save_button">
         Save changes
     </button>
@@ -52,4 +57,5 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
 <script src="js/admin.js" type="text/javascript"></script>
+<script src="js/logout.js" type="text/javascript"></script>
 </body>
 </html>
Index: src/main/resources/templates/business_admin.html
===================================================================
--- src/main/resources/templates/business_admin.html	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/templates/business_admin.html	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -14,9 +14,14 @@
 <!-- Navbar start -->
 <header class="p-3 mb-3 border-bottom">
-    <div class="container">
-        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start" >
+    <div class="row">
+        <div class="col-md-10 mb-10" >
             <span id="header">
                 Welcome back
             </span>
+        </div>
+        <div class="col-md-2 mb-2">
+            <button id="logout" class="btn btn-primary btn-block">
+                Logout
+            </button>
         </div>
     </div>
@@ -77,5 +82,5 @@
                                aria-label="username"/>
                     </div>
-                    <button type="buttom" class="btn btn-primary btn-block mb-4" id="update_owner_button">
+                    <button type="button" class="btn btn-primary btn-block mb-4" id="update_owner_button">
                         Update profile
                     </button>
@@ -101,5 +106,5 @@
             </div>
             <div id="predefined_services_admin_panel" class="form-outline mb-4"></div>
-            <button type="buttom" class="btn btn-primary btn-block mb-4" id="update_services_button">
+            <button type="button" class="btn btn-primary btn-block mb-4" id="update_services_button">
                 Update services
             </button>
@@ -112,4 +117,5 @@
 <script src="js/business_admin.js" type="text/javascript"></script>
 <script src="js/bootstrap.bundle.min.js"></script>
+<script src="js/logout.js" type="text/javascript"></script>
 </body>
 </html>
Index: src/main/resources/templates/homepage.html
===================================================================
--- src/main/resources/templates/homepage.html	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/templates/homepage.html	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -22,60 +22,61 @@
 <!-- Navbar start -->
 <header class="p-3 mb-3 border-bottom">
-    <div class="container">
-        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
-            <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
-                <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap">
-                    <use xlink:href="#bootstrap"/>
-                </svg>
-            </a>
-
-            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
-                <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
-                <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li>
-                <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li>
-                <li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
-            </ul>
-
-            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
-                <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
-            </form>
-
-            <div class="dropdown text-end">
-                <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown"
-                   aria-expanded="false">
-                    <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
-                </a>
-                <ul class="dropdown-menu text-small">
-                    <li><a class="dropdown-item" href="#">New project...</a></li>
-                    <li><a class="dropdown-item" href="#">Settings</a></li>
-                    <li><a class="dropdown-item" href="#">Profile</a></li>
-                    <li>
-                        <hr class="dropdown-divider">
-                    </li>
-                    <li><a class="dropdown-item" href="#">Sign out</a></li>
-                </ul>
-            </div>
+    <div class="row" style="justify-content: space-between;">
+        <div class="col-md-8 mb-8">
+            Welcome to the Schedlr
+        </div>
+        <div class="col-md-2 mb-2">
+            <button id="profile" class="btn btn-primary btn-block">
+                Profile
+            </button>
+        </div>
+        <div class="col-md-2 mb-2">
+            <button id="logout" class="btn btn-primary btn-block">
+                Logout
+            </button>
+        </div>
+        <div class="col-md-2 mb-2">
+            <button id="login" class="btn btn-primary btn-block">
+                Login
+            </button>
         </div>
     </div>
 </header>
 <!-- Navbar end -->
+<div class="container">
+    <div id='wrap'>
+        <div id='calendar'></div>
+        <div style='clear:both'></div>
+    </div>
 
-<div id='wrap'>
-    <div id='calendar'></div>
-    <div style='clear:both'></div>
-</div>
 
-<div class="">
     <div class="card">
-        <div class="card-body py-5 px-md-5">
-            <div>
-                <label for="student-birth-date">Date of search:</label>
-                <input type="date" id="student-birth-date"/>
-            </div>
-            <div>
-                <button type="submit" class="button" id="search">Search</button>
-            </div>
+        <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>
+
+        <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">
+        </div>
+        <div class="form-outline mb-4">
+            <button id="createAppointment" class="btn btn-primary btn-block">
+                Create Appointment
+            </button>
         </div>
     </div>
+
 </div>
 <script src='js/jquery-1.10.2.js' type="text/javascript"></script>
@@ -84,4 +85,5 @@
 <script src="js/homepage.js" type="text/javascript"></script>
 <script src="js/bootstrap.bundle.min.js"></script>
+<script src="js/logout.js" type="text/javascript"></script>
 </body>
 </html>
Index: src/main/resources/templates/login.html
===================================================================
--- src/main/resources/templates/login.html	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/templates/login.html	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -58,11 +58,15 @@
                             </button>
                             <div th:if="${param.error}">
-                                <div th:if="${param.error.contains('notApproved')}" class="alert alert-danger">
+                                <div th:if="${param.error.contains('notApproved')}" class="alert alert-danger alert-dismissible fade show">
                                     Account not approved yet.
                                 </div>
 
-                                <div th:if="${param.error.contains('badCredentials')}" class="alert alert-danger">
+                                <div th:if="${param.error.contains('badCredentials')}" class="alert alert-danger alert-dismissible fade show">
                                     Invalid username or password.
                                 </div>
+                            </div>
+                            <div th:if="${#request.getParameter('logoutSuccessful') != null}"
+                                 class="alert alert-success alert-dismissible fade show" role="alert">
+                                Successful logout
                             </div>
                         </form>
Index: src/main/resources/templates/register_business.html
===================================================================
--- src/main/resources/templates/register_business.html	(revision 8bcd64c37eba4cd984953069331c9faa3a916671)
+++ src/main/resources/templates/register_business.html	(revision 950fa0d7a6b439770e79c885947e9b7d6058b424)
@@ -104,5 +104,5 @@
 
                             <!-- Submit button -->
-                            <button type="buttom" class="btn btn-primary btn-block mb-4" id="signup_business_button">
+                            <button type="button" class="btn btn-primary btn-block mb-4" id="signup_business_button">
                                 Sign up
                             </button>
