diff --git a/src/main/resources/static/booking-style.css b/src/main/resources/static/booking-style.css
index f6299b0..af3bd3a 100644
--- a/src/main/resources/static/booking-style.css
+++ b/src/main/resources/static/booking-style.css
@@ -475,4 +475,24 @@ select#select-google-maps {
     font-size: 20px;
     padding: 20px;
     border: 2px solid #AFAFAF;
+}
+
+#filter input, select{
+    margin: 10px 20px;
+}
+
+#filter {
+    font-size: 15px;
+}
+
+.table-container {
+    margin: 20px;
+}
+
+.table-container form {
+    width: 100%;
+}
+
+.table-container form table tr td {
+    text-align: center;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/logging/secretary-landing.html b/src/main/resources/templates/logging/secretary-landing.html
index 4b1a1ac..6f230f7 100644
--- a/src/main/resources/templates/logging/secretary-landing.html
+++ b/src/main/resources/templates/logging/secretary-landing.html
@@ -16,7 +16,12 @@
 <!--Navigation bar-->
 <div class="topnav" style="height: 100px;" >
     <ul>
-        <li><a href="/secretary">Dashboard</a></li>
+        <li>
+            <form th:action="@{/logout}" method="post">
+                <button class="small-cta" style="margin-left: 50px;" type="submit">Log out</button>
+            </form>
+        </li>
+<!--        <li><a href="/secretary">Dashboard</a></li>-->
         <li style="float:right;"><a href="/"><img src="https://i.ibb.co/VMQ8rtj/corona-prevention-logo.png" alt="Corona Prevention Division" class="logo" style="height: 30px; margin: 0px 0px 0px 0px; "/></a></li>
         <li style="float:right;
     display: block;
@@ -30,7 +35,7 @@
 </div>
 <div style="height: 75px;"></div>
 <!--Dashboard-->
-<div class="booking-content" style="width: 85%;">
+<div class="booking-content" style="width: 85%; padding-bottom: 20px;">
     <h1 class="title" style="margin-bottom: 0px; margin-top: 20px;">Secretary Dashboard</h1>
     <div class="filter">
             <form id="filter">
@@ -45,15 +50,15 @@ <h1 class="title" style="margin-bottom: 0px; margin-top: 20px;">Secretary Dashbo
                     </option>
                 </select>
                 <input id="display-booked" type="checkbox" name="booked-only" value="BOOKED"> Display today's BOOKED appointments only<br>
-                <button id="filter-button" type="submit">Filter</button>
+                <button id="filter-button" type="submit" class="cta" style="margin-left: 20px;">Filter</button>
             </form>
         </div>
-    </div>
+
 
     <div class="table-container" style="display: flex; justify-content: center;">
 <!--         part of form: action="#" th:action="@{/get-center-appointments}" th:method="post" -->
         <form>
-            <table id="appointment-table" class="styled-table" style="padding: 20px; width: 80%;">
+            <table id="appointment-table" class="styled-table" style="padding: 20px; width: 100%;">
                 <thead class="styled-table-header">
                 <tr>
                     <th>ID</th>
@@ -84,7 +89,7 @@ <h1 class="title" style="margin-bottom: 0px; margin-top: 20px;">Secretary Dashbo
             </table>
         </form>
     </div>
-
+</div>
     <footer class="footer">© Copyright Corona prevention division, All rights reserved 2021</footer>
 
     <script th:inline="javascript">