diff --git a/archivebox/core/views.py b/archivebox/core/views.py
index 78cdf99a..d6257055 100644
--- a/archivebox/core/views.py
+++ b/archivebox/core/views.py
@@ -9,7 +9,8 @@ from django.http import HttpResponse
 from django.db.models import Q
 from django.views import View, static
 from django.views.generic.list import ListView
-from django.views import View
+from django.views.generic import FormView
+from django.contrib.auth.mixins import UserPassesTestMixin
 
 from core.models import Snapshot
 from core.utils import get_icons
@@ -115,38 +116,37 @@ class PublicArchiveView(ListView):
             return redirect(f'/admin/login/?next={self.request.path}')
 
 
-class AddView(View):
-    extra_context = {'title': 'Add URLs'}
+class AddView(UserPassesTestMixin, FormView):
+    template_name = "add_links.html"
+    form_class = AddLinkForm
 
-    def get(self, request, *args, **kwargs):
-        if PUBLIC_ADD_VIEW or self.request.user.is_authenticated:
-            self.extra_context['form'] = AddLinkForm()
-            return render(template_name='add_links.html', request=request, context=self.extra_context)
-        else:
-            return redirect(f'/admin/login/?next={request.path}')
+    def test_func(self):
+        return PUBLIC_ADD_VIEW or self.request.user.is_authenticated
 
-    def post(self, request, *args, **kwargs):
-        form = AddLinkForm(request.POST)
-        if form.is_valid():
-            url = form.cleaned_data["url"]
-            print(f'[+] Adding URL: {url}')
-            depth = 0 if form.cleaned_data["depth"] == "0" else 1
-            input_kwargs = {
-                "urls": url,
-                "depth": depth,
-                "update_all": False,
-                "out_dir": OUTPUT_DIR,
-            }
-            add_stdout = StringIO()
-            with redirect_stdout(add_stdout):
-                add(**input_kwargs)
-                print(add_stdout.getvalue())
+    def get_context_data(self, *args, **kwargs):
+        context = super().get_context_data(*args, **kwargs)
+        context["title"]: "Add URLs"
+        return context
 
-            self.extra_context.update({
-                "stdout": ansi_to_html(add_stdout.getvalue().strip()),
-                "form": AddLinkForm()
-            })
-        else:
-            self.extra_context["form"] = form
-        
-        return render(template_name='add_links.html', request=request, context=self.extra_context)
\ No newline at end of file
+    def form_valid(self, form):
+        url = form.cleaned_data["url"]
+        print(f'[+] Adding URL: {url}')
+        depth = 0 if form.cleaned_data["depth"] == "0" else 1
+        input_kwargs = {
+            "urls": url,
+            "depth": depth,
+            "update_all": False,
+            "out_dir": OUTPUT_DIR,
+        }
+        add_stdout = StringIO()
+        with redirect_stdout(add_stdout):
+            add(**input_kwargs)
+            print(add_stdout.getvalue())
+
+        context = self.get_context_data()
+
+        context.update({
+            "stdout": ansi_to_html(add_stdout.getvalue().strip()),
+            "form": AddLinkForm()
+        })
+        return render(template_name=self.template_name, request=self.request, context=context)
\ No newline at end of file
diff --git a/archivebox/themes/default/add_links.html b/archivebox/themes/default/add_links.html
index 57bbffe4..cb6f4341 100644
--- a/archivebox/themes/default/add_links.html
+++ b/archivebox/themes/default/add_links.html
@@ -28,7 +28,7 @@
                 <a href="/add" id="submit">&nbsp; Add more URLs ➕</a>
             </center>
         {% else %}
-            <form id="add-form" action="?" method="POST" class="p-form">{% csrf_token %}
+            <form id="add-form" method="POST" class="p-form">{% csrf_token %}
                 <h1>Add new URLs to your archive</h1>
                 <br/>
                 {{ form.as_p }}
diff --git a/archivebox/themes/default/static/add.css b/archivebox/themes/default/static/add.css
index b4e83e42..b128bf4b 100644
--- a/archivebox/themes/default/static/add.css
+++ b/archivebox/themes/default/static/add.css
@@ -1,39 +1,62 @@
-       .dashboard #content {
-            width: 100%;
-            margin-right: 0px;
-            margin-left: 0px;
-        }
-        #submit {
-            border: 1px solid rgba(0,0,0,0.2);
-            padding: 10px;
-            border-radius: 4px;
-            background-color: #f5dd5d;
-            color: #333;
-            font-size: 18px;
-            font-weight: 800;
-        }
-        #add-form button[role=submit]:hover {
-            background-color: #e5cd4d;
-        }
-        #add-form label {
-            display: block;
-            font-size: 16px;
-        }
-        #add-form textarea {
-            width: 100%;
-            min-height: 300px;
-        }
-        #delay-warning div {
-            border: 1px solid red;
-            border-radius: 4px;
-            margin: 10px;
-            padding: 10px;
-            font-size: 15px;
-            background-color: #F5DD5D;
-        }
-        #stdout {
-            background-color: #ded;
-            padding: 10px 10px;
-            border-radius: 4px;
-            white-space: normal;
-        }
\ No newline at end of file
+.dashboard #content {
+  width: 100%;
+  margin-right: 0px;
+  margin-left: 0px;
+}
+#submit {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  border-radius: 4px;
+  background-color: #f5dd5d;
+  color: #333;
+  font-size: 18px;
+  font-weight: 800;
+}
+#add-form button[role="submit"]:hover {
+  background-color: #e5cd4d;
+}
+#add-form label {
+  display: block;
+  font-size: 16px;
+}
+#add-form textarea {
+  width: 100%;
+  min-height: 300px;
+}
+#delay-warning div {
+  border: 1px solid red;
+  border-radius: 4px;
+  margin: 10px;
+  padding: 10px;
+  font-size: 15px;
+  background-color: #f5dd5d;
+}
+#stdout {
+  background-color: #ded;
+  padding: 10px 10px;
+  border-radius: 4px;
+  white-space: normal;
+}
+ul#id_depth {
+  list-style-type: none;
+  padding: 0;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  box-sizing: border-box;
+  animation: spin 2s linear infinite;
+}