Index: FullyStocked/src/main/resources/templates/fragments/footer.html
===================================================================
--- FullyStocked/src/main/resources/templates/fragments/footer.html	(revision e3df201708dcd80fe47a38cb7c8ace08fc6ee857)
+++ FullyStocked/src/main/resources/templates/fragments/footer.html	(revision e3df201708dcd80fe47a38cb7c8ace08fc6ee857)
@@ -0,0 +1,47 @@
+<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: FullyStocked/src/main/resources/templates/fragments/header.html
===================================================================
--- FullyStocked/src/main/resources/templates/fragments/header.html	(revision e3df201708dcd80fe47a38cb7c8ace08fc6ee857)
+++ FullyStocked/src/main/resources/templates/fragments/header.html	(revision e3df201708dcd80fe47a38cb7c8ace08fc6ee857)
@@ -0,0 +1,86 @@
+<header xmlns:th="http://www.thymeleaf.org">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+  <meta charset="UTF-8">
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+    <div class="container">
+      <a class="navbar-brand" href="/">FULLYSTOCKED</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 class="nav-item m-auto">
+            <!--za magacinoer prvite 4 -->
+            <a class="nav-link active">Преглед на магацинот</a>
+          </li>
+          <li class="nav-item m-auto">
+            <a class="nav-link active">Постави прашање</a>
+          </li>
+          <li class="nav-item m-auto">
+            <a class="nav-link active">Погледни одговори</a>
+          </li>
+          <li class="nav-item m-auto">
+            <a class="nav-link active">Креирај фактура</a>
+          </li>
+          <!--za menadzer narednite 3 -->
+          <li class="nav-item m-auto">
+            <a class="nav-link active">Одговори прашање</a>
+          </li>
+          <li class="nav-item m-auto">
+            <a class="nav-link active">Креирај нарачка</a>
+          </li>
+          <li class="nav-item m-auto">
+            <a class="nav-link active">Внеси нови артикли</a>
+          </li>
+          <!--za dobavuvac-->
+          <li class="nav-item m-auto">
+            <a class="nav-link active">Нарачки</a>
+          </li>
+          <li class="nav-item m-auto">
+            <a class="nav-link active">Категории</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">
+            <a class="btn btn-success btn-sm ml-3">
+              <i class="fa fa-shopping-cart"></i> Cart
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="btn btn-light btn-sm ml-3">
+              <i class="fa fa-shopping-cart"></i> Logout
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="btn btn-light btn-sm ml-3">
+              <i class="fa fa-shopping-cart"></i> Login
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</header>
Index: FullyStocked/src/main/resources/templates/login.html
===================================================================
--- FullyStocked/src/main/resources/templates/login.html	(revision e3df201708dcd80fe47a38cb7c8ace08fc6ee857)
+++ FullyStocked/src/main/resources/templates/login.html	(revision e3df201708dcd80fe47a38cb7c8ace08fc6ee857)
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
Index: FullyStocked/src/main/resources/templates/register.html
===================================================================
--- FullyStocked/src/main/resources/templates/register.html	(revision e3df201708dcd80fe47a38cb7c8ace08fc6ee857)
+++ FullyStocked/src/main/resources/templates/register.html	(revision e3df201708dcd80fe47a38cb7c8ace08fc6ee857)
@@ -0,0 +1,86 @@
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+<meta charset="UTF-8">
+<section class="vh-230" style="background-color: #eee;">
+  <div class="container h-150">
+    <div class="row d-flex justify-content-center align-items-center h-200">
+      <div class="col-lg-12 col-xl-11">
+        <div class="card text-black" style="border-radius: 25px;">
+          <div class="card-body p-md-5">
+            <div class="row justify-content-center">
+              <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
+
+                <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Регистрација</p>
+
+                <form class="mx-1 mx-md-4">
+
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-user fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <input type="text" id="ime" class="form-control" />
+                      <label class="form-label" for="ime">Име</label>
+                    </div>
+                  </div>
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-user fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <input type="text" id="prezime" class="form-control" />
+                      <label class="form-label" for="prezime">Презиме</label>
+                    </div>
+                  </div>
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-user fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <input type="text" id="username" class="form-control" />
+                      <label class="form-label" for="username">Username</label>
+                    </div>
+                  </div>
+
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <input type="email" id="email" class="form-control" />
+                      <label class="form-label" for="email">Email</label>
+                    </div>
+                  </div>
+
+                  <div class="d-flex flex-row align-items-center mb-4">
+                    <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
+                    <div class="form-outline flex-fill mb-0">
+                      <input type="password" id="password" class="form-control" />
+                      <label class="form-label" for="password">Password</label>
+                    </div>
+                  </div>
+                    <div class="d-flex flex-row align-items-center mb-4">
+                      <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
+                      <div class="form-outline flex-fill mb-0">
+                        <select class="form-select" id="tip">
+                          <option value="1" disabled>Избери тип на профил</option>
+                          <option value="2">Магационер</option>
+                          <option value="3">Добавувач</option>
+                          <option value="4">Магационер</option>
+                        </select>
+                        <label class="form-label" for="tip">Тип</label>
+                      </div>
+                  </div>
+                  <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
+                    <button type="button" class="btn btn-primary btn-lg">Регистрирај се</button>
+                  </div>
+
+                </form>
+
+              </div>
+              <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
+
+                <img src="https://www.usccg.com/wp-content/uploads/2019/10/bigstock-Forklift-Driver-Hitting-Collea-274046842-768x362.jpg"
+                     class="img-fluid" alt="Sample image">
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>