diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
new file mode 100644
index 0000000..07b9627
--- /dev/null
+++ b/src/main/resources/static/style.css
@@ -0,0 +1,25 @@
+body {
+    background: #f54d9a;
+}
+
+.logo {
+    background: #FF9CCE;
+}
+
+main {
+    padding: 2%;
+    margin: 10% 5%;
+}
+
+main img {
+    width: 100%;
+    object-fit: cover;
+}
+
+form {
+    padding: 1%;
+}
+
+.product-div {
+    background: #e874ac;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/UserPage.html b/src/main/resources/templates/UserPage.html
new file mode 100644
index 0000000..2475208
--- /dev/null
+++ b/src/main/resources/templates/UserPage.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{default}">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <link rel="stylesheet" href="/style.css"/>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
+        rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
+        crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
+          integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
+          crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
+          integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
+          crossorigin="anonymous"></script>
+</head>
+<body style="background: #f54d9a">
+<div layout:fragment="content">
+<form method="post" th:object="${user}">
+  <div class="container">
+    <div class="row gy-5 p-2">
+      <input type="text" name="name" class="form-control"
+             id="name" placeholder="Name" th:value="${user.firstName}" th:field="*{firstName}">
+    </div>
+    <div class="row gy-5 p-2">
+      <input type="text"  name="surname" class="form-control"
+             id="surname" placeholder="Surname" th:value="${user.lastName}" th:field="*{lastName}">
+    </div>
+    <div class="row gy-5 p-2">
+      <input type="email"  name="email" class="form-control"
+             id="email" placeholder="Email" th:value="${user.email}" th:field="*{email}">
+    </div>
+    <div class="row gy-5 p-2">
+      <input type="password" name="password" class="form-control"
+             id="password" placeholder="Password" th:value="${user.password}" th:field="*{password}">
+    </div>
+    <div th:if='${user.firstName != null}' class="row align-items-start">
+      <div class="col">
+        <button name="action" class="btn btn-primary w-100" value="update">Update</button>
+      </div>
+      <div class="col">
+        <a href="/logout" class="btn btn-primary w-100">Log Out</a>
+      </div>
+    </div>
+    <div th:unless='${user.firstName != null}' class="row gy-5">
+      <button name="action" value="register" class="btn btn-primary w-100">Register</button>
+    </div>
+    <div th:unless='${user.firstName != null}' class="row align-items-start">
+      <a href="/sing_in" class="btn btn-primary">Sing In</a>
+    </div>
+  </div>
+</form>
+</div>
+</body>
+</html>
\ No newline at end of file
