diff --git a/app/templates/analytics.html b/app/templates/analytics.html
index 6a0457e..bd6d406 100644
--- a/app/templates/analytics.html
+++ b/app/templates/analytics.html
@@ -1,26 +1,16 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+{% extends "base.html" %}
+{% block title %}charts{% endblock %}
+{% block head_css %}
   <link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator_bulma.min.css">
   <!--link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator_simple.min.css"-->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-switch@2.0.4/dist/css/bulma-switch.min.css">
-
-  <script src="https://unpkg.com/htmx.org@1.9.9"></script>
+{% endblock %}
+{% block head_scripts %}
   <script src="https://unpkg.com/chart.js@4.4.0"></script>
   <script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
-
   <script src="../../static/js/utils.js"></script>
+{% endblock %}
 
-  <title>Charting</title>
-</head>
-
-<body id="body">
+{% block body %}
   <section class="section">
     <div class="container">
       <h1 class="title">
@@ -71,10 +61,6 @@ <h1 class="title">
   </section>
 
   <script>
-    // HTMX CSRF Token
-    document.body.addEventListener('htmx:configRequest', (event) => {
-      event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
-    })
     // chartjs + htmx with payload in HX-Trigger
     document.body.addEventListener("drawChart", function(evt){
       const chart = Chart.getChart(evt.detail.target)
@@ -130,5 +116,4 @@ <h1 class="title">
       }
     );
   </script>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/base.html b/app/templates/base.html
new file mode 100644
index 0000000..0c6f195
--- /dev/null
+++ b/app/templates/base.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-switch@2.0.4/dist/css/bulma-switch.min.css">
+  {% block head_css %}{% endblock %}
+
+  <script src="https://unpkg.com/htmx.org@1.9.9"></script>
+  {% block head_scripts %}{% endblock %}
+
+  <title>{% block title %}{% endblock %}</title>
+</head>
+
+<body id="body">
+  {% block body %}{% endblock %}
+  <script>
+    // HTMX CSRF Token
+    document.body.addEventListener('htmx:configRequest', (event) => {
+      event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
+    })
+  </script>
+</body>
+</html>
diff --git a/app/templates/index.html b/app/templates/index.html
index 2caa3bf..da31ed5 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,26 +1,6 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-
-  <!-- HTMX -->
-  <script src="https://unpkg.com/htmx.org@1.7.0"></script>
-
-  <!-- HTMX CSRF Token -->
-  <script>
-    document.body.addEventListener('htmx:configRequest', (event) => {
-      event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
-    })
-  </script>
-  <title>Demo</title>
-</head>
-
-<body id="body">
+{% extends "base.html" %}
+{% block title %}demo{% endblock %}
+{% block body %}
   <section class="hero is-info is-fullheight">
     <div class="hero-head">
       <nav class="navbar">
@@ -81,5 +61,4 @@ <h2 class="subtitle">
     </div>
 
   </section>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/login.html b/app/templates/login.html
index c970efd..7418d28 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -1,21 +1,10 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
-  <title>Login</title>
-</head>
-
-{% if login_user_form.email.errors or login_user_form.password.errors %}
-  {% set error_class = " is-danger" %}
-{% endif %}
-
-<body>
+{% extends "base.html" %}
+{% block title %}login{% endblock %}
 
+{% block body %}
+  {% if login_user_form.email.errors or login_user_form.password.errors %}
+    {% set error_class = " is-danger" %}
+  {% endif %}
   <section class="hero is-primary is-fullheight">
 
     <div class="hero-body">
@@ -23,7 +12,7 @@
 
         <div class="columns is-centered">
           <div class="column is-two-fifths">
-            <h3 class="title has-text-white">Log in to xyz</h3>
+            <h3 class="title has-text-white">Login to xyz</h3>
             <hr />
             <form action="/api/login" method="POST" class="box">
               {{ login_user_form.hidden_tag() }}
@@ -68,6 +57,4 @@ <h3 class="title has-text-white">Log in to xyz</h3>
       </div>
     </div>
   </section>
-
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/register.html b/app/templates/register.html
index c42b91b..32becb8 100644
--- a/app/templates/register.html
+++ b/app/templates/register.html
@@ -1,16 +1,6 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.    css">
-  <title>Register</title>
-</head>
-
-<body>
+{% extends "base.html" %}
+{% block title %}register{% endblock %}
+{% block body %}
   <section class="hero is-primary is-fullheight">
     <div class="hero-body is-justify-content-center is-align-items-center">
       <div class="container">
@@ -44,7 +34,4 @@
       </div>
     </div>
   </section>
-</body>
-
-</html>
-
+{% endblock %}
