Index: bus-n-go-do-5ta-faza/src/main/resources/templates/fragments/footer.html
===================================================================
--- bus-n-go-do-5ta-faza/src/main/resources/templates/fragments/footer.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-do-5ta-faza/src/main/resources/templates/fragments/footer.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,48 @@
+<footer class="text-black-50 mt-xl-5" xmlns:th="http://www.thymeleaf.org">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-3 col-lg-4 col-xl-3">
+                <h5>About</h5>
+                <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
+                <p class="mb-0">
+                    Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant
+                    impression.
+                </p>
+            </div>
+
+            <div class="col-md-2 col-lg-2 col-xl-2 mx-auto">
+                <h5>Informations</h5>
+                <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
+                <ul class="list-unstyled">
+                    <li><a href="">Link 1</a></li>
+                    <li><a href="">Link 2</a></li>
+                    <li><a href="">Link 3</a></li>
+                    <li><a href="">Link 4</a></li>
+                </ul>
+            </div>
+
+            <div class="col-md-3 col-lg-2 col-xl-2 mx-auto">
+                <h5>Others links</h5>
+                <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
+                <ul class="list-unstyled">
+                    <li><a href="">Link 1</a></li>
+                    <li><a href="">Link 2</a></li>
+                    <li><a href="">Link 3</a></li>
+                    <li><a href="">Link 4</a></li>
+                </ul>
+            </div>
+
+            <div class="col-md-4 col-lg-3 col-xl-3">
+                <h5>Contact</h5>
+                <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25">
+                <ul class="list-unstyled">
+                    <li><i class="fa fa-home mr-2"></i> My company</li>
+                    <li><i class="fa fa-envelope mr-2"></i> email@example.com</li>
+                    <li><i class="fa fa-phone mr-2"></i> + 33 12 14 15 16</li>
+                    <li><i class="fa fa-print mr-2"></i> + 33 12 14 15 16</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</footer>
+
Index: bus-n-go-do-5ta-faza/src/main/resources/templates/fragments/header.html
===================================================================
--- bus-n-go-do-5ta-faza/src/main/resources/templates/fragments/header.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-do-5ta-faza/src/main/resources/templates/fragments/header.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,68 @@
+<header xmlns:th="http://www.thymeleaf.org">
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+    <div class="container">
+      <a class="navbar-brand" href="/">Bus & GO</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
+              aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
+        <ul class="navbar-nav m-auto">
+          <li sec:authorize="hasRole('ROLE_PASSENGER')" class="nav-item m-auto">
+            <a class="nav-link active" href="/bilet">Bileti</a>
+          </li>
+          <li sec:authorize="hasAnyRole('ROLE_PASSENGER')" class="nav-item m-auto">
+            <a class="nav-link active" href="/vozenje">Vozenja</a>
+          </li>
+          <li sec:authorize="hasRole('ROLE_PASSENGER')" class="nav-item m-auto">
+            <a class="nav-link active" href="/kazna">Kazni</a>
+          </li>
+          <li sec:authorize="hasAnyRole('ROLE_CONDUCTOR', 'ROLE_DRIVER')" class="nav-item m-auto">
+            <a class="nav-link active" href="/instanca-na-linija">Instanci</a>
+          </li>
+        </ul>
+
+
+        <form class="form-inline my-2 my-lg-0">
+          <div class="input-group input-group-sm">
+            <input type="text" class="form-control" aria-label="Small"
+                   aria-describedby="inputGroup-sizing-sm"
+                   placeholder="Search...">
+            <div class="input-group-append">
+              <button type="button" class="btn btn-secondary btn-number">
+                <i class="fa fa-search"></i>
+              </button>
+            </div>
+          </div>
+        </form>
+        <ul class="nav navbar-nav navbar-right">
+
+          <li class="nav-item">
+            <a class="nav-link" href="#"></a>
+          </li>
+
+          <li class="nav-item" sec:authorize="isAuthenticated()">
+            <a href="#" class="btn btn-light btn-sm ml-3" sec:authentication="name">
+            </a>
+          </li>
+          <li class="nav-item" sec:authorize="isAuthenticated()">
+            <a class="btn btn-light btn-sm ml-3" href="/logout">
+              <i class="fa-solid fa-right-from-bracket"></i> Logout
+            </a>
+          </li>
+          <li class="nav-item" sec:authorize="isAnonymous()">
+            <a class="btn btn-light btn-sm ml-3" href="/login">
+              <i class="fa-solid fa-right-to-bracket"></i> Login
+            </a>
+          </li>
+          <li class="nav-item" sec:authorize="hasRole('ROLE_ADMIN')">
+            <a class="btn btn-light btn-sm ml-3" href="/admin">
+               Admin Menu
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</header>
