diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..fd8d19c
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+<!-- meta info -->
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>arxiv-sanity</title>
+<!-- CSS -->
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
+<!-- Favicon -->
+<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}" />
+
+{% block variables %}
+{% endblock %}
+
+</head>
+
+<body>
+<div id="header">
+    <a href="/">arxiv-sanity</a>
+</div>
+
+{% block content %}
+{% endblock %}
+
+<!-- React -->
+<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
+<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
+<!-- Babel for displaying JSX -->
+<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+<!-- Load our React component -->
+{% block elements %}
+{% endblock %}
+
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index f81410a..88a1fa2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,29 +1,14 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-<!-- meta info -->
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>arxiv-sanity</title>
-<!-- CSS -->
-<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
-<!-- Favicon -->
-<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}" />
+{% extends "base.html" %}
 
+{% block variables %}
 <script>
 var papers = {{ papers | tojson }};
 var tags = {{ tags | tojson }};
 var gvars = {{ gvars | tojson }};
 </script>
+{% endblock %}
 
-</head>
-
-<body>
-
-<div id="header">
-    <a href="/">arxiv-sanity</a>
-</div>
-
+{% block content %}
 <div id="controls">
     <div>
 
@@ -91,14 +76,8 @@ var gvars = {{ gvars | tojson }};
 
 <div id="wrap">
 </div>
+{% endblock %}
 
-<!-- React -->
-<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
-<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
-<!-- Babel for displaying JSX -->
-<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-<!-- Load our React component -->
+{% block elements %}
 <script src="{{ url_for('static', filename='paper_list.js') }}" type="text/babel"></script>
-
-</body>
-</html>
+{% endblock %}
diff --git a/templates/inspect.html b/templates/inspect.html
index 553ffed..38b9da4 100644
--- a/templates/inspect.html
+++ b/templates/inspect.html
@@ -1,41 +1,19 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-<!-- meta info -->
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-<title>arxiv-sanity</title>
-<!-- CSS -->
-<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
-<!-- Favicon -->
-<link rel="shortcut icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}" />
+{% extends "base.html" %}
 
+{% block variables %}
 <script>
 var paper = {{ paper | tojson }};
 var words = {{ words | tojson }};
 </script>
+{% endblock %}
 
-</head>
-
-<body>
-
-<div id="header">
-    <a href="/">arxiv-sanity</a>
-</div>
-
+{% block content %}
 <div id="wrap">
 </div>
-
 <div id="wordwrap">
 </div>
+{% endblock %}
 
-<!-- React -->
-<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
-<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
-<!-- Babel for displaying JSX -->
-<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-<!-- Load our React component -->
+{% block elements %}
 <script src="{{ url_for('static', filename='paper_detail.js') }}" type="text/babel"></script>
-
-</body>
-</html>
+{% endblock %}
