Index: src/main/resources/templates/error-page.html
===================================================================
--- src/main/resources/templates/error-page.html	(revision 3e572eb5078b74bc9c8fc83edc749c611308dd26)
+++ src/main/resources/templates/error-page.html	(revision 501396eb0bc93eea13801d6b1a3904aa9457af83)
@@ -1,10 +1,50 @@
 <!DOCTYPE html>
-<html lang="en">
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:th="http://www.thymeleaf.org">
 <head>
-  <meta charset="UTF-8">
-  <title>$Title$</title>
+    <meta charset="UTF-8">
+    <title>Home page</title>
+    <!-- Add Bootstrap CSS link -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 </head>
 <body>
-$END$
+<!-- Bootstrap Navbar -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <a class="navbar-brand" href="#">
+        CookBook
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">About</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Contact</a>
+            </li>
+        </ul>
+    </div>
+</nav>
+
+<div class="container mt-5">
+    <h1>This is an error page</h1>
+    <div th:if="${error != null}">
+        <h5 th:text="${error}"></h5>
+    </div>
+
+    <h3>Something went wrong!</h3>
+
+
+</div>
+
+<!-- Add Bootstrap JS and Popper.js scripts (required for Bootstrap components) -->
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 </body>
 </html>
Index: src/main/resources/templates/home.html
===================================================================
--- src/main/resources/templates/home.html	(revision 3e572eb5078b74bc9c8fc83edc749c611308dd26)
+++ src/main/resources/templates/home.html	(revision 501396eb0bc93eea13801d6b1a3904aa9457af83)
@@ -1,10 +1,63 @@
 <!DOCTYPE html>
-<html lang="en">
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:th="http://www.thymeleaf.org">
 <head>
-  <meta charset="UTF-8">
-  <title>$Title$</title>
+    <meta charset="UTF-8">
+    <title>Home page</title>
+    <!-- Add Bootstrap CSS link -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 </head>
 <body>
-$END$
+<!-- Bootstrap Navbar -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <a class="navbar-brand" href="#">
+        CookBook
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">About</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Contact</a>
+            </li>
+        </ul>
+    </div>
+</nav>
+
+<div class="container mt-5">
+    <h1>This is home page</h1>
+
+    <table class="table">
+        <thead>
+        <tr>
+            <th>Ime</th>
+            <th>Ocena</th>
+            <th>Action</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr th:each="recept : ${recepti}">
+            <td><a th:href="@{'/recept/{id}' (id=${recept.recId})}" th:text="${recept.recIme}"></a></td>
+            <td th:text="${recept.srednaOcena}"></td>
+            <td>
+                <button class="btn btn-primary">Edit</button>
+                <button class="btn btn-danger">Delete</button>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+
+<!-- Add Bootstrap JS and Popper.js scripts (required for Bootstrap components) -->
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 </body>
 </html>
Index: src/main/resources/templates/recept.html
===================================================================
--- src/main/resources/templates/recept.html	(revision 3e572eb5078b74bc9c8fc83edc749c611308dd26)
+++ src/main/resources/templates/recept.html	(revision 501396eb0bc93eea13801d6b1a3904aa9457af83)
@@ -7,8 +7,14 @@
     <!-- Add Bootstrap CSS link -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <style>
+        img{
+            margin: 16px;
+            border-style: groove;
+        }
+    </style>
 </head>
 <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <a class="navbar-brand" href="#">
+    <a class="navbar-brand" th:href="@{/}">
         CookBook
     </a>
@@ -19,5 +25,5 @@
         <ul class="navbar-nav ml-auto">
             <li class="nav-item active">
-                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                <a class="nav-link" th:href="@{/}">Home <span class="sr-only">(current)</span></a>
             </li>
             <li class="nav-item">
@@ -31,12 +37,37 @@
 </nav>
 
-    <h1 th:text="${recept.recIme}"></h1>
-
-    <h4 th:text="${recept.srednaOcena}"></h4>
-
-    <div th:text="${recept.postapka}"></div>
 
 
-    <div>KOMENTARI TO DO</div>
+    <div class="container mt-4">
+        <h1 th:text="${recept.recIme}"></h1>
+
+        <h4 th:text="${recept.srednaOcena}"></h4>
+
+        <div class="row">
+            <div class="col-12">
+                <h6>Pictures</h6>
+            </div>
+            <div class="col-12">
+                <img th:each="slika : ${sliki}" th:src="${slika.pic}" class="img-fluid" alt="Recipe Image" width="200px" height="200px">
+            </div>
+        </div>
+
+        <div>
+            <h5>Состојки</h5>
+            <div th:if="${sostojki.size() == 0}">Состојките не се додадени!</div>
+            <ul>
+                <li th:each="sostojka : ${sostojki}" th:text="${sostojka.sNaziv}"></li>
+            </ul>
+        </div>
+
+
+        <div>
+            <h5>Постапка</h5>
+            <p class="mt-4" th:text="${recept.postapka}"></p>
+        </div>
+
+
+        <div class="mt-4">KOMENTARI TO DO</div>
+    </div>
 
 <!-- Add Bootstrap JS and Popper.js scripts (required for Bootstrap components) -->
