diff --git a/docker-compose.yml b/docker-compose.yml
index 5f378e6..33b3b86 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,7 +2,6 @@ services:
   postgresql:
     image: postgres:17-alpine
     container_name: projekt-arendehantering-postgres
-    profiles: ["postgres"]
     environment:
       POSTGRES_DB: arende
       POSTGRES_USER: arende
diff --git a/src/main/java/org/example/projektarendehantering/infrastructure/persistence/CaseEntity.java b/src/main/java/org/example/projektarendehantering/infrastructure/persistence/CaseEntity.java
index 2d57c78..c058a00 100644
--- a/src/main/java/org/example/projektarendehantering/infrastructure/persistence/CaseEntity.java
+++ b/src/main/java/org/example/projektarendehantering/infrastructure/persistence/CaseEntity.java
@@ -1,8 +1,7 @@
 package org.example.projektarendehantering.infrastructure.persistence;
 
-import jakarta.persistence.Entity;
-import jakarta.persistence.Id;
-import jakarta.persistence.Table;
+import jakarta.persistence.*;
+
 import java.time.Instant;
 import java.util.UUID;
 
@@ -11,6 +10,7 @@
 public class CaseEntity {
 
     @Id
+    @GeneratedValue(strategy = GenerationType.UUID)
     private UUID id;
     private String status;
     private UUID ownerId;
diff --git a/src/main/java/org/example/projektarendehantering/presentation/dto/CreateCaseForm.java b/src/main/java/org/example/projektarendehantering/presentation/dto/CreateCaseForm.java
new file mode 100644
index 0000000..2ed88e2
--- /dev/null
+++ b/src/main/java/org/example/projektarendehantering/presentation/dto/CreateCaseForm.java
@@ -0,0 +1,23 @@
+package org.example.projektarendehantering.presentation.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Size;
+
+public class CreateCaseForm {
+
+    @NotBlank(message = "Title is required")
+    @Size(max = 200, message = "Title must be under 200 characters")
+    private String title;
+
+    @NotBlank(message = "Description is required")
+    @Size(max = 4000, message = "Description must be under 4000 characters")
+    private String description;
+
+    public CreateCaseForm() {}
+
+    public String getTitle() { return title; }
+    public void setTitle(String title) { this.title = title; }
+
+    public String getDescription() { return description; }
+    public void setDescription(String description) { this.description = description; }
+}
diff --git a/src/main/java/org/example/projektarendehantering/presentation/web/UiController.java b/src/main/java/org/example/projektarendehantering/presentation/web/UiController.java
index 66c79c2..6ef3f47 100644
--- a/src/main/java/org/example/projektarendehantering/presentation/web/UiController.java
+++ b/src/main/java/org/example/projektarendehantering/presentation/web/UiController.java
@@ -1,31 +1,62 @@
 package org.example.projektarendehantering.presentation.web;
 
+import org.example.projektarendehantering.application.service.CaseService;
+import org.example.projektarendehantering.presentation.dto.CaseDTO;
+import org.example.projektarendehantering.presentation.dto.CreateCaseForm;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
+import org.springframework.validation.BindingResult;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+
+import jakarta.validation.Valid;
+import java.util.UUID;
 
 @Controller
 public class UiController {
 
+    private final CaseService caseService;
+
+    public UiController(CaseService caseService) {
+        this.caseService = caseService;
+    }
+
     @GetMapping("/")
     public String index() {
         return "index";
     }
 
     @GetMapping("/ui/cases")
-    public String listCases() {
+    public String listCases(Model model) {
+        model.addAttribute("cases", caseService.getAllCases());
         return "cases/list";
     }
 
     @GetMapping("/ui/cases/new")
-    public String newCase() {
+    public String newCase(Model model) {
+        model.addAttribute("createCaseForm", new CreateCaseForm());
         return "cases/new";
     }
 
+    @PostMapping("/ui/cases/new")
+    public String createCase(@Valid @ModelAttribute("createCaseForm") CreateCaseForm form, BindingResult result) {
+        if (result.hasErrors()) {
+            return "cases/new";
+        }
+
+        CaseDTO caseDTO = new CaseDTO();
+        caseDTO.setTitle(form.getTitle());
+        caseDTO.setDescription(form.getDescription());
+
+        caseService.createCase(caseDTO);
+        return "redirect:/ui/cases";
+    }
+
     @GetMapping("/ui/cases/{caseId}")
-    public String caseDetail(@PathVariable String caseId, Model model) {
-        model.addAttribute("caseId", caseId);
+    public String caseDetail(@PathVariable UUID caseId, Model model) {
+        caseService.getCase(caseId).ifPresent(c -> model.addAttribute("case", c));
         return "cases/detail";
     }
 }
diff --git a/src/main/resources/static/app.js b/src/main/resources/static/app.js
deleted file mode 100644
index 72f0529..0000000
--- a/src/main/resources/static/app.js
+++ /dev/null
@@ -1,123 +0,0 @@
-(() => {
-  const STORAGE_KEY = "case-ui-auth";
-
-  function loadAuth() {
-    try {
-      const raw = localStorage.getItem(STORAGE_KEY);
-      if (!raw) return null;
-      return JSON.parse(raw);
-    } catch {
-      return null;
-    }
-  }
-
-  function saveAuth(auth) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(auth));
-  }
-
-  function ensureDefaultAuth() {
-    const existing = loadAuth();
-    if (existing?.userId && existing?.role) return existing;
-    const defaultAuth = {
-      userId: crypto.randomUUID(),
-      role: "ADMIN",
-    };
-    saveAuth(defaultAuth);
-    return defaultAuth;
-  }
-
-  function setAuthInputs(auth) {
-    const userId = document.getElementById("authUserId");
-    const role = document.getElementById("authRole");
-    if (userId) userId.value = auth.userId ?? "";
-    if (role) role.value = auth.role ?? "ADMIN";
-  }
-
-  function bindAuthBar() {
-    const btn = document.getElementById("authSave");
-    if (!btn) return;
-
-    btn.addEventListener("click", () => {
-      const userId = document.getElementById("authUserId")?.value?.trim();
-      const role = document.getElementById("authRole")?.value?.trim();
-
-      if (!userId) {
-        alert("X-User-Id is required (UUID).");
-        return;
-      }
-      if (!role) {
-        alert("X-Role is required.");
-        return;
-      }
-
-      saveAuth({ userId, role });
-      alert("Saved headers for API requests.");
-    });
-  }
-
-  async function apiFetch(path, init = {}) {
-    const auth = ensureDefaultAuth();
-
-    const headers = new Headers(init.headers || {});
-    headers.set("X-User-Id", auth.userId);
-    headers.set("X-Role", auth.role);
-
-    return fetch(path, { ...init, headers });
-  }
-
-  function bindCreateCaseForm() {
-    const form = document.getElementById("createCaseForm");
-    if (!form) return;
-
-    const result = document.getElementById("createCaseResult");
-    const createdCaseId = document.getElementById("createdCaseId");
-    const openCaseLink = document.getElementById("openCaseLink");
-
-    const errorPanel = document.getElementById("createCaseError");
-    const errorText = document.getElementById("createCaseErrorText");
-
-    form.addEventListener("submit", async (e) => {
-      e.preventDefault();
-      if (result) result.hidden = true;
-      if (errorPanel) errorPanel.hidden = true;
-
-      const fd = new FormData(form);
-      const payload = {
-        title: String(fd.get("title") || ""),
-        description: String(fd.get("description") || ""),
-      };
-
-      try {
-        const res = await apiFetch("/cases", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-
-        if (!res.ok) {
-          const body = await res.text();
-          throw new Error(`HTTP ${res.status}\n${body}`);
-        }
-
-        const json = await res.json();
-        const caseId = json.caseId;
-
-        if (createdCaseId) createdCaseId.textContent = caseId;
-        if (openCaseLink) openCaseLink.href = `/ui/cases/${encodeURIComponent(caseId)}`;
-        if (result) result.hidden = false;
-      } catch (err) {
-        if (errorText) errorText.textContent = String(err?.message || err);
-        if (errorPanel) errorPanel.hidden = false;
-      }
-    });
-  }
-
-  document.addEventListener("DOMContentLoaded", () => {
-    const auth = ensureDefaultAuth();
-    setAuthInputs(auth);
-    bindAuthBar();
-    bindCreateCaseForm();
-    window.caseUi = { apiFetch };
-  });
-})();
-
diff --git a/src/main/resources/templates/cases/detail.html b/src/main/resources/templates/cases/detail.html
index ec222fb..1179be7 100644
--- a/src/main/resources/templates/cases/detail.html
+++ b/src/main/resources/templates/cases/detail.html
@@ -1,11 +1,6 @@
 <!doctype html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>Case</title>
-    <link rel="stylesheet" href="/app.css"/>
-    <script defer src="/app.js"></script>
+<head th:replace="~{fragments/head :: head(title='Case')}">
 </head>
 <body>
 <div th:replace="~{fragments/header :: header}"></div>
@@ -16,12 +11,23 @@ <h1>Case</h1>
         <a class="button button-secondary" href="/ui/cases">Back to list</a>
     </div>
 
-    <section class="panel">
-        <h2>Case id</h2>
-        <code th:text="${caseId}">case-id</code>
-        <p class="muted">
-            This is a placeholder until <code>GET /cases/{id}</code> exists. Once it does, we can populate this view with real data.
-        </p>
+    <section class="panel" th:if="${case != null}">
+        <div class="kv">
+            <div class="k">Title</div>
+            <div class="v" th:text="${case.title}">Title</div>
+        </div>
+        <div class="kv">
+            <div class="k">Description</div>
+            <div class="v" th:text="${case.description}">Description</div>
+        </div>
+        <div class="kv">
+            <div class="k">Created At</div>
+            <div class="v" th:text="${case.createdAt}">Date</div>
+        </div>
+    </section>
+    <section class="panel panel-error" th:if="${case == null}">
+        <h2>Error</h2>
+        <p>Case not found.</p>
     </section>
 </main>
 
diff --git a/src/main/resources/templates/cases/list.html b/src/main/resources/templates/cases/list.html
index 0cd4c55..a7a6eee 100644
--- a/src/main/resources/templates/cases/list.html
+++ b/src/main/resources/templates/cases/list.html
@@ -1,11 +1,6 @@
 <!doctype html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>Cases</title>
-    <link rel="stylesheet" href="/app.css"/>
-    <script defer src="/app.js"></script>
+<head th:replace="~{fragments/head :: head(title='Cases')}">
 </head>
 <body>
 <div th:replace="~{fragments/header :: header}"></div>
@@ -17,14 +12,25 @@ <h1>Cases</h1>
     </div>
 
     <section class="panel">
-        <h2>List (placeholder)</h2>
-        <p class="muted">
-            This page is ready to be wired up once you add read endpoints (e.g. <code>GET /cases</code>, <code>GET /cases/{id}</code>).
-        </p>
-        <div class="hint">
-            Tip: you can still open a specific case page by URL:
-            <code>/ui/cases/&lt;caseId&gt;</code>
-        </div>
+        <table class="table" th:if="${not #lists.isEmpty(cases)}">
+            <thead>
+                <tr>
+                    <th>Title</th>
+                    <th>Created</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr th:each="c : ${cases}">
+                    <td th:text="${c.title}">Title</td>
+                    <td th:text="${c.createdAt}">Date</td>
+                    <td>
+                        <a th:href="@{/ui/cases/{id}(id=${c.id})}" class="button button-secondary">View</a>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <p th:if="${#lists.isEmpty(cases)}" class="muted">No cases found.</p>
     </section>
 </main>
 
diff --git a/src/main/resources/templates/cases/new.html b/src/main/resources/templates/cases/new.html
index 31c5210..e46d3d4 100644
--- a/src/main/resources/templates/cases/new.html
+++ b/src/main/resources/templates/cases/new.html
@@ -1,11 +1,6 @@
 <!doctype html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>Create case</title>
-    <link rel="stylesheet" href="/app.css"/>
-    <script defer src="/app.js"></script>
+<head th:replace="~{fragments/head :: head(title='Create case')}">
 </head>
 <body>
 <div th:replace="~{fragments/header :: header}"></div>
@@ -16,35 +11,21 @@ <h1>Create case</h1>
         <a class="button button-secondary" href="/ui/cases">Back to list</a>
     </div>
 
-    <form class="form" id="createCaseForm">
+    <form class="form" th:action="@{/ui/cases/new}" th:object="${createCaseForm}" method="post">
         <label class="field">
             <span class="label">Title</span>
-            <input class="input" name="title" maxlength="200" required/>
+            <input class="input" th:field="*{title}" maxlength="200"/>
+            <span class="muted" th:if="${#fields.hasErrors('title')}" th:errors="*{title}" style="color: var(--danger)">Error</span>
         </label>
         <label class="field">
             <span class="label">Description</span>
-            <textarea class="input" name="description" rows="6" maxlength="4000" required></textarea>
+            <textarea class="input" th:field="*{description}" rows="6"></textarea>
+            <span class="muted" th:if="${#fields.hasErrors('description')}" th:errors="*{description}" style="color: var(--danger)">Error</span>
         </label>
         <div class="actions">
-            <button class="button" type="submit">Create</button>
+            <button class="button" type="submit">Create Case</button>
         </div>
     </form>
-
-    <section class="panel" id="createCaseResult" hidden>
-        <h2>Created</h2>
-        <div class="kv">
-            <div class="k">caseId</div>
-            <div class="v"><code id="createdCaseId"></code></div>
-        </div>
-        <div class="actions">
-            <a class="button" id="openCaseLink" href="#">Open case page</a>
-        </div>
-    </section>
-
-    <section class="panel panel-error" id="createCaseError" hidden>
-        <h2>Error</h2>
-        <pre class="pre" id="createCaseErrorText"></pre>
-    </section>
 </main>
 
 <div th:replace="~{fragments/footer :: footer}"></div>
diff --git a/src/main/resources/static/app.css b/src/main/resources/templates/fragments/head.html
similarity index 81%
rename from src/main/resources/static/app.css
rename to src/main/resources/templates/fragments/head.html
index f388b69..7151785 100644
--- a/src/main/resources/static/app.css
+++ b/src/main/resources/templates/fragments/head.html
@@ -1,3 +1,10 @@
+<!doctype html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:fragment="head(title)">
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title th:text="${title}">Ärendehantering</title>
+    <style th:inline="css">
 :root {
   --bg: #0b1020;
   --panel: #101a33;
@@ -70,21 +77,9 @@
 .auth {
   display: flex;
   gap: 10px;
-  align-items: end;
-}
-.auth-field { display: grid; gap: 6px; }
-.auth-label { font-size: 12px; color: var(--muted); }
-.auth-input {
-  height: 36px;
-  padding: 0 10px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text);
-  outline: none;
-  min-width: 160px;
+  align-items: center;
 }
-.auth-input::placeholder { color: rgba(231, 236, 255, 0.4); }
+.auth-label { font-size: 14px; color: var(--muted); margin-right: 10px; }
 
 .page { padding: 28px 0 40px; }
 .page-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@@ -126,13 +121,16 @@
 .field { display: grid; gap: 6px; }
 .label { color: var(--muted); font-size: 12px; }
 .input {
-  width: 100%;
-  border-radius: 12px;
-  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text);
-  padding: 10px 12px;
-  outline: none;
+    width: 100%;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--text);
+    padding: 10px 12px;
+}
+.input:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
 }
 textarea.input { padding: 12px; resize: vertical; }
 .actions { display: flex; gap: 10px; margin-top: 4px; }
@@ -168,24 +166,20 @@
 .k { color: var(--muted); }
 .v { overflow: auto; }
 
-.pre {
-  margin: 0;
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+.table th, .table td {
   padding: 12px;
-  border-radius: 12px;
-  background: rgba(255, 110, 138, 0.09);
-  border: 1px solid rgba(255, 110, 138, 0.18);
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: rgba(231, 236, 255, 0.92);
+  text-align: left;
+  border-bottom: 1px solid var(--border);
 }
-
-.hint {
-  margin-top: 10px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px dashed var(--border);
+.table th {
+  font-size: 12px;
+  text-transform: uppercase;
   color: var(--muted);
-  background: rgba(255,255,255,0.02);
 }
 
 .app-footer {
@@ -197,7 +191,8 @@
 
 @media (max-width: 980px) {
   .header-row { grid-template-columns: 1fr; align-items: start; }
-  .auth { flex-wrap: wrap; }
   .cards { grid-template-columns: 1fr; }
 }
-
+    </style>
+</head>
+</html>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index bf5ae9a..2e94ea4 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -1,11 +1,6 @@
 <!doctype html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>Ärendehantering</title>
-    <link rel="stylesheet" href="/app.css"/>
-    <script defer src="/app.js"></script>
+<head th:replace="~{fragments/head :: head(title='Home')}">
 </head>
 <body>
 <div th:replace="~{fragments/header :: header}"></div>