diff --git a/sourcing/static/js/new_xanalink.js b/sourcing/static/js/new_xanalink.js
new file mode 100644
index 0000000..a84f1a1
--- /dev/null
+++ b/sourcing/static/js/new_xanalink.js
@@ -0,0 +1,11 @@
+$(function () {
+  $('#custom-field').hide();
+
+  $('.link-type-radio').click(function() {
+    if (this.id == 'btn-custom') {
+      $('#custom-field').show();
+    } else {
+      $('#custom-field').hide();
+    }
+  });
+});
diff --git a/sourcing/templates/new_xanalink.html b/sourcing/templates/new_xanalink.html
new file mode 100644
index 0000000..bb03f2e
--- /dev/null
+++ b/sourcing/templates/new_xanalink.html
@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+
+{% block title %}New xanalink {% endblock %}
+{% set link_types = ['untyped', 'title', 'author', 'custom'] %}
+
+{% block content %}
+  <h1 class="mt-3">{{ self.title() }}</h1>
+
+
+  <p>This is an empty link. You should add some facets.</p>
+
+  <h4>link type</h4>
+<div class="btn-group btn-group-toggle" data-toggle="buttons">
+  {% for link_type in link_types %}
+    <label class="btn btn-info{% if loop.index == 1 %} active{% endif %} link-type-radio" id="btn-{{ link_type }}">
+      <input type="radio" class="link-type-radio2" id="radio-{{ link_type }}" autocomplete="off"{% if loop.index == 1 %} checked{% endif %}> {{ link_type }}
+    </label>
+  {% endfor %}
+</div>
+  <p id="custom-field" class="mt-2">custom link type: <input type="text"></p>
+
+  <h4>new facet</h4>
+
+
+
+  <button class="btn btn-primary">add a facet</button>
+
+  <button class="btn btn-primary">save</button>
+
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/new_xanalink.js') }}"></script>
+{% endblock %}