diff --git a/archivist/apps/templates/importer/index.html b/archivist/apps/templates/importer/index.html
new file mode 100644
index 0000000..9c4c69b
--- /dev/null
+++ b/archivist/apps/templates/importer/index.html
@@ -0,0 +1,55 @@
+{% extends "layouts/base-electric.html" %}
+
+{% load static %}
+
+{% block title %} Importer {% endblock title %}
+
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    {% include "includes/navigation-transparent.html" %}
+
+    <div class="container-fluid">
+        <div class="row row-gap-3">
+
+            <div class="col">
+                <div class="e-container-border e-container-radius">
+                    <div class="e-container e-container-radius p-2 pt-3 mb-3">
+                        <h1 class="text-center">Importer</h1>
+
+                        {% include "importer/partials/tabnavbar.html" %}
+
+                        <form class="p-3 m-auto border border-2 border-info-subtle rounded gap-2" style="width: 24rem;" role="form" method="post" action="">
+
+                            {% if ImportURLFormMSG %}
+                            <div class="row mb-3">
+                                <p class="mb-0 text-danger text-center">
+                                    {{ ImportURLFormMSG | safe }}
+                                </p>
+                            </div>
+                            {% endif %}
+
+                            {% csrf_token %}
+
+                            <div class="input-group mb-3" {% if form.url.errors %} style="border-color: red" {% endif %}>
+                                <label class="input-group-text" for="{{ form.url.id_for_label }}">{{ ImportURLForm.url.label }}</label>
+                                {{ ImportURLForm.url }}
+                            </div>
+                                {% comment %} <span class="input-group-text" id="basic-addon1">URL</span> {% endcomment %}
+                            <div class="d-grid">
+                                <button class="btn btn-primary" type="submit">Submit</button>
+                            </div>
+
+                        </form>
+
+                        <hr>
+
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+{% endblock content %}
diff --git a/archivist/apps/templates/importer/source_urls.html b/archivist/apps/templates/importer/source_urls.html
index b1ded4d..ba0af69 100644
--- a/archivist/apps/templates/importer/source_urls.html
+++ b/archivist/apps/templates/importer/source_urls.html
@@ -99,4 +99,27 @@
     </div>
 </div>
 
+<script>
+    function filterTable(tableId, columnIndex, input) {
+        console.log(tableId, columnIndex, input.value);
+        // Declare variables
+        var filter = input.toUpperCase();
+        var table = document.getElementById(tableId);
+        var rows = table.getElementsByTagName("tr");
+        
+        // Loop through all table rows, and hide those who don't match the search query
+        for (var i = 0; i < rows.length; i++) {
+            var cells = rows[i].getElementsByTagName("td");
+            if (cells.length) {
+                var txtValue = cells[columnIndex].textContent || cells[columnIndex].innerText;
+                if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                    rows[i].style.display = "";
+                } else {
+                    rows[i].style.display = "none";
+                }
+            }
+        }
+    }
+</script>
+
 {% endblock content %}