diff --git a/src/main/resources/templates/OAuthResource/consents.html b/src/main/resources/templates/OAuthResource/consents.html
index e76ea3a..3c0fffc 100644
--- a/src/main/resources/templates/OAuthResource/consents.html
+++ b/src/main/resources/templates/OAuthResource/consents.html
@@ -1,44 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Page</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
-    <style>
-        body {
-            background-color: #f4f4f4;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-        }
-
-        .btn {
-            width: 100%;
-            background-color: #007BFF;
-        }
-
-        .btn:hover {
-            background-color: #0056b3
-        }
-
-        .collection {
-            border: none;
-        }
-
-        .collection-item {
-            border: none;
-        }
-    </style>
-</head>
-<body>
+{#include base}
+    {#title}Login{/title}
 <div class="container">
     <div class="row">
         <div class="col s12 m6 offset-m3">
@@ -76,5 +37,4 @@
         </div>
     </div>
 </div>
-</body>
-</html>
+{/include}
diff --git a/src/main/resources/templates/OAuthResource/login.html b/src/main/resources/templates/OAuthResource/login.html
index 76399b2..786ed3b 100644
--- a/src/main/resources/templates/OAuthResource/login.html
+++ b/src/main/resources/templates/OAuthResource/login.html
@@ -1,47 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Page</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
-    <style>
-        body {
-            background-color: #f4f4f4;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-        }
-
-        .error-popup {
-            background-color: rgb(253, 237, 237);
-            color: rgb(95, 33, 32);
-            padding: 12px 20px;
-            text-align: center;
-            border-radius: 4px;
-            margin-top: 10px;
-        }
-
-        .btn {
-            width: 100%;
-            background-color: #007BFF;
-        }
-
-        .btn:hover {
-            background-color: #0056b3
-        }
-    </style>
-</head>
-<body>
+{#include base}
+    {#title}Login{/title}
 <div class="container">
     <div class="row">
         <div class="col s12 m6 offset-m3">
@@ -84,6 +42,5 @@
         </div>
     </div>
 </div>
-</body>
-</html>
+{/include}
 
diff --git a/src/main/resources/templates/base.html b/src/main/resources/templates/base.html
new file mode 100644
index 0000000..57f5121
--- /dev/null
+++ b/src/main/resources/templates/base.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{#insert title}OAuth Playground{/}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <style>
+        body {
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .error-popup {
+            background-color: rgb(253, 237, 237);
+            color: rgb(95, 33, 32);
+            padding: 12px 20px;
+            text-align: center;
+            border-radius: 4px;
+            margin-top: 10px;
+        }
+
+        .btn {
+            width: 100%;
+            background-color: #007BFF;
+        }
+
+        .btn:hover {
+            background-color: #0056b3
+        }
+
+        .collection {
+            border: none;
+        }
+
+        .collection-item {
+            border: none;
+        }
+    </style>
+</head>
+<body>
+{#insert}No body!{/}
+</div>
+</body>
+</html>
+
