diff --git a/ui/static/ui/button.css b/ui/static/ui/button.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/templates/ui/base.html b/ui/templates/ui/base.html
new file mode 100644
index 0000000..1842884
--- /dev/null
+++ b/ui/templates/ui/base.html
@@ -0,0 +1,24 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>The Button</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
+    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+    {% block css %}
+    {% endblock %}
+</head>
+
+<body>
+    {% csrf_token %}
+
+    {% block body %}
+    {% endblock %}
+
+    {% block js %}
+    {% endblock %}
+</body>
\ No newline at end of file
diff --git a/ui/templates/ui/button.html b/ui/templates/ui/button.html
index 495d27a..163d3f0 100644
--- a/ui/templates/ui/button.html
+++ b/ui/templates/ui/button.html
@@ -1,33 +1,29 @@
+{% extends 'ui/base.html' %}
+
 {% load static %}
 
-<!DOCTYPE html>
-<html>
+{% block css %}
+<link rel="stylesheet" href="{% static 'ui/button.css' %}">
+{% endblock %}
 
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Hello Bulma!</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
-    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
-</head>
+{% block js %}
+<script src="{% static 'ui/button.js' %}"></script>
+{% endblock %}
 
-<body>
-    {% csrf_token %}
-    <section class="section">
-        <div class="container">
-            <div>
-                <h1 class="title">
-                    The Button
-                </h1>
-                <button class="button" id="BUTTON">Press</button>
-            </div>
-            <div><br></div>
-            <div>
-                <h1 class="title" id="COUNT">{{ pressed }}</h1>
-            </div>
+
+{% block body %}
+<section class="section">
+    <div class="container">
+        <div>
+            <h1 class="title">
+                The Button
+            </h1>
+            <button class="button is-primary" id="BUTTON">Press</button>
         </div>
-    </section>
-    <script src="{% static 'ui/button.js' %}"></script>
-</body>
-
-</html>
\ No newline at end of file
+        <div><br></div>
+        <div>
+            <h1 class="title" id="COUNT">{{ pressed }}</h1>
+        </div>
+    </div>
+</section>
+{% endblock %}
\ No newline at end of file
