diff --git a/api/desecapi/migrations/0018_tlsaidentity.py b/api/desecapi/migrations/0018_tlsaidentity.py
new file mode 100644
index 000000000..2bb7f3c2f
--- /dev/null
+++ b/api/desecapi/migrations/0018_tlsaidentity.py
@@ -0,0 +1,37 @@
+# Generated by Django 3.2.7 on 2021-09-25 15:30
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('desecapi', '0017_alter_user_limit_domains'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='TLSIdentity',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('name', models.CharField(default='', max_length=24)),
+                ('created', models.DateTimeField(auto_now_add=True)),
+                ('default_ttl', models.PositiveIntegerField(default=300)),
+                ('scheduled_removal', models.DateTimeField(null=True)),
+                ('certificate', models.TextField()),
+                ('tlsa_selector', models.IntegerField(choices=[(0, 'Full Certificate'), (1, 'Subject Public Key Info')], default=1)),
+                ('tlsa_matching_type', models.IntegerField(choices=[(0, 'No Hash Used'), (1, 'Sha256'), (2, 'Sha512')], default=1)),
+                ('tlsa_certificate_usage', models.IntegerField(choices=[(0, 'Ca Constraint'), (1, 'Service Certificate Constraint'), (2, 'Trust Anchor Assertion'), (3, 'Domain Issued Certificate')], default=3)),
+                ('port', models.IntegerField(default=443)),
+                ('protocol', models.TextField(choices=[('tcp', 'Tcp'), ('udp', 'Udp'), ('sctp', 'Sctp')], default='tcp')),
+                ('owner', models.ForeignKey(on_delete=django.db.models.deletion.PROTECT, related_name='identities', to=settings.AUTH_USER_MODEL)),
+                ('rrs', models.ManyToManyField(related_name='identities', to='desecapi.RR')),
+            ],
+            options={
+                'abstract': False,
+            },
+        ),
+    ]
diff --git a/api/desecapi/models.py b/api/desecapi/models.py
index 427df053c..d374eab51 100644
--- a/api/desecapi/models.py
+++ b/api/desecapi/models.py
@@ -12,10 +12,12 @@
 from datetime import timedelta
 from functools import cached_property
 from hashlib import sha256
+from typing import Set, List, Tuple
 
 import dns
 import psl_dns
 import rest_framework.authtoken.models
+from cryptography import x509, hazmat
 from django.conf import settings
 from django.contrib.auth.hashers import make_password
 from django.contrib.auth.models import AbstractBaseUser, AnonymousUser, BaseUserManager
@@ -217,6 +219,14 @@ def filter_qname(self, qname: str, **kwargs) -> models.query.QuerySet:
             name_length=Length('name'),
         ).filter(dotted_qname__endswith=F('dotted_name'), **kwargs)
 
+    def most_specific_zone(self, fqdn: str) -> Tuple[Domain, str]:
+        try:
+            domain = self.filter_qname(fqdn).order_by('-name_length')[0]
+        except IndexError:
+            raise Domain.DoesNotExist
+        subname = fqdn[:-len(domain.name)].removesuffix('.')
+        return domain, subname
+
 
 class Domain(ExportModelOperationsMixin('Domain'), models.Model):
     @staticmethod
@@ -982,3 +992,196 @@ def verify(self, solution: str):
             and
             age <= settings.CAPTCHA_VALIDITY_PERIOD  # not expired
         )
+
+
+class Identity(models.Model):
+    rr_type = None
+
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    name = models.CharField(max_length=24, default="")
+    created = models.DateTimeField(auto_now_add=True)
+    owner = models.ForeignKey(User, on_delete=models.PROTECT, related_name='identities')
+    default_ttl = models.PositiveIntegerField(default=300)
+    rrs = models.ManyToManyField(to=RR, related_name='identities')  # TODO OneToMany?
+    scheduled_removal = models.DateTimeField(null=True)
+
+    class Meta:
+        abstract = True
+
+    def get_rrs(self) -> List[RR]:
+        raise NotImplementedError
+
+    @property
+    def covered_names(self) -> List[str]:
+        raise NotImplementedError
+
+    def domains(self) -> List[Domain]:
+        # TODO improve query
+        return list({
+            d.name: d for d in [rr.rrset.domain for rr in self.rrs.all()]
+        }.values())
+
+    def save(self, *args, **kwargs):
+        ret = super().save(*args, **kwargs)
+        for rr in self.get_rrs():
+            rr.rrset.save()
+            rr.save()
+            self.rrs.add(rr)
+        return ret
+
+    def delete(self, using=None, keep_parents=False):
+        for rr in self.rrs.all():  # TODO use one query
+            if len(rr.identities.all()) == 1:
+                if (len(rr.rrset.records.all())) == 1:
+                    rr.rrset.delete()
+                else:
+                    rr.delete()
+        return super().delete(using, keep_parents)
+
+    # TODO move to RRset / RRset manager?
+    def get_or_create_rr_set(self, domain: Domain, subname: str) -> RRset:
+        try:
+            return RRset.objects.get(domain=domain, subname=subname, type=self.rr_type)
+        except RRset.DoesNotExist:
+            return RRset(domain=domain, subname=subname, type=self.rr_type, ttl=self.default_ttl)
+
+    # TODO move to RR / RR manager?
+    def get_or_create_rr(self, fqdn: str, content: str) -> RR:
+        domain, subname = self.owner.domains.most_specific_zone(fqdn)
+        rrset = self.get_or_create_rr_set(domain, subname)
+        try:
+            return RR.objects.get(rrset=rrset, content=content)
+        except RR.DoesNotExist:
+            return RR(rrset=rrset, content=content)
+
+
+class TLSIdentity(Identity):
+    rr_type = 'TLSA'
+
+    class CertificateUsage(models.IntegerChoices):
+        CA_CONSTRAINT = 0
+        SERVICE_CERTIFICATE_CONSTRAINT = 1
+        TRUST_ANCHOR_ASSERTION = 2
+        DOMAIN_ISSUED_CERTIFICATE = 3
+
+    class Selector(models.IntegerChoices):
+        FULL_CERTIFICATE = 0
+        SUBJECT_PUBLIC_KEY_INFO = 1
+
+    class MatchingType(models.IntegerChoices):
+        NO_HASH_USED = 0
+        SHA256 = 1
+        SHA512 = 2
+
+    class Protocol(models.TextChoices):
+        TCP = 'tcp'
+        UDP = 'udp'
+        SCTP = 'sctp'
+
+    certificate = models.TextField()
+
+    tlsa_selector = models.IntegerField(choices=Selector.choices, default=Selector.SUBJECT_PUBLIC_KEY_INFO)
+    tlsa_matching_type = models.IntegerField(choices=MatchingType.choices, default=MatchingType.SHA256)
+    tlsa_certificate_usage = models.IntegerField(choices=CertificateUsage.choices,
+                                                 default=CertificateUsage.DOMAIN_ISSUED_CERTIFICATE)
+
+    port = models.IntegerField(default=443)
+    protocol = models.TextField(choices=Protocol.choices, default=Protocol.TCP)
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        if 'not_valid_after' not in kwargs:
+            self.scheduled_removal = self.not_valid_after  # TODO check timezone
+
+    def get_record_content(self) -> str:
+        # choose hash function
+        if self.tlsa_matching_type == self.MatchingType.SHA256:
+            hash_function = hazmat.primitives.hashes.SHA256()
+        elif self.tlsa_matching_type == self.MatchingType.SHA512:
+            hash_function = hazmat.primitives.hashes.SHA512()
+        else:
+            raise NotImplementedError
+
+        # choose data to hash
+        if self.tlsa_selector == self.Selector.SUBJECT_PUBLIC_KEY_INFO:
+            to_be_hashed = self._cert.public_key().public_bytes(
+                hazmat.primitives.serialization.Encoding.DER,
+                hazmat.primitives.serialization.PublicFormat.SubjectPublicKeyInfo
+            )
+        else:
+            raise NotImplementedError
+
+        # compute the hash
+        h = hazmat.primitives.hashes.Hash(hash_function)
+        h.update(to_be_hashed)
+        hash = h.finalize().hex()
+
+        # create TLSA record content
+        return f"{self.tlsa_certificate_usage} {self.tlsa_selector} {self.tlsa_matching_type} {hash}"
+
+    @property
+    def _cert(self) -> x509.Certificate:
+        return x509.load_pem_x509_certificate(self.certificate.encode())
+
+    @property
+    def fingerprint(self) -> str:
+        return self._cert.fingerprint(hazmat.primitives.hashes.SHA256()).hex()
+
+    @property
+    def subject_names(self) -> Set[str]:
+        subject_names = {
+            x.value for x in
+            self._cert.subject.get_attributes_for_oid(x509.oid.NameOID.COMMON_NAME)
+        }
+
+        try:
+            subject_alternative_names = {
+                x for x in
+                self._cert.extensions.get_extension_for_oid(
+                    x509.oid.ExtensionOID.SUBJECT_ALTERNATIVE_NAME).value.get_values_for_type(x509.DNSName)
+            }
+        except x509.extensions.ExtensionNotFound:
+            subject_alternative_names = set()
+
+        return subject_names | subject_alternative_names
+
+    @property
+    def subject_names_clean(self) -> Set[str]:
+        clean = set()
+        for name in self.subject_names:
+            # cut off any wildcard prefix
+            name = name.lstrip('*').lstrip('.')  # TODO publish wildcard TLSA record?
+
+            # filter names for valid domain names
+            try:
+                validate_domain_name[1](name)
+            except ValidationError:
+                continue
+
+            clean.add(name)
+        return clean
+
+    def get_rrs(self) -> List[RR]:
+        rrs = []
+        content = self.get_record_content()
+        for qname in self.subject_names_clean:
+            try:
+                rrs.append(self.get_or_create_rr(
+                    fqdn=f"_{self.port:n}._{self.protocol}.{qname}",
+                    content=content,
+                ))
+            except Domain.DoesNotExist:
+                pass
+        return rrs
+
+    @property
+    def not_valid_before(self):
+        return self._cert.not_valid_before
+
+    @property
+    def not_valid_after(self):
+        return self._cert.not_valid_after
+
+    @property
+    def covered_names(self) -> Set[str]:
+        return {rr.rrset.name.split('.', 2)[-1].removesuffix('.') for rr in self.rrs.all()}
diff --git a/api/desecapi/serializers.py b/api/desecapi/serializers.py
index db75c7ef4..4b7a5967f 100644
--- a/api/desecapi/serializers.py
+++ b/api/desecapi/serializers.py
@@ -840,3 +840,40 @@ class AuthenticatedRenewDomainBasicUserActionSerializer(AuthenticatedDomainBasic
 
     class Meta(AuthenticatedDomainBasicUserActionSerializer.Meta):
         model = models.AuthenticatedRenewDomainBasicUserAction
+
+
+class TLSIdentitySerializer(serializers.ModelSerializer):
+    published_at = serializers.SerializerMethodField(read_only=True)
+    domains = serializers.SlugRelatedField(
+        many=True,
+        read_only=True,
+        slug_field='name'
+     )
+
+    def get_published_at(self, tls_identity: models.TLSIdentity):
+        return [
+            f"{rrset.type}/{rrset.name}"
+            for rrset in {rr.rrset for rr in tls_identity.rrs.all()}  # TODO improve query
+        ]
+
+    class Meta:
+        model = models.TLSIdentity
+        fields = (
+            # Identity fields
+            'id', 'name', 'created',
+
+            'default_ttl',
+            'scheduled_removal',
+            'published_at',
+            'domains',
+            'covered_names',
+
+            # TLSAIdentity fields
+            'certificate',
+            'tlsa_selector', 'tlsa_matching_type', 'tlsa_certificate_usage',
+
+            'port', 'protocol',
+
+            'fingerprint', 'not_valid_before', 'not_valid_after', 'subject_names',
+        )
+        read_only_fields = list(filter(lambda f: f not in ('name', 'certificate'), fields))  # TODO add tlsa_*, port, proto
diff --git a/api/desecapi/tests/test_identities.py b/api/desecapi/tests/test_identities.py
new file mode 100644
index 000000000..b5d501846
--- /dev/null
+++ b/api/desecapi/tests/test_identities.py
@@ -0,0 +1,154 @@
+from desecapi import models
+from desecapi.tests.base import DesecTestCase
+
+CERTIFICATE = r"""-----BEGIN CERTIFICATE-----
+MIIFXzCCBEegAwIBAgISBCpjR1Aco6QfGqTdBrLb3uFZMA0GCSqGSIb3DQEBCwUA
+MDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQD
+EwJSMzAeFw0yMTAxMTQwNzQyMDlaFw0yMTA0MTQwNzQyMDlaMB0xGzAZBgNVBAMM
+EiouZXhhbXBsZS5kZWR5bi5pbzCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoC
+ggEBAMn/csv0cxjfsDZQvbkAm+owpSaRKob+bsaBNCKsP79XetMdebL7Qp7uFaQp
+gcYAD08HMtCv85JoA8N4HFPWQB+ppjXHaDqG6fQkDUPhP+IglqLKhiFNHrcZwNVq
+3OLxT/Sjg7TP0zWKPQRaflz/hMpqYCsXvpdsfeSHcCOBOb8d7gjmmhpaghhsWE12
+jKEHVLHjotc8nRHp3ufxXIHu5Z0XblP/ohnDWKT/eg8lDD/lE95PAgsxpuKQUP8W
+eihOyg2GBRmlCaSadyKslOpK8Bhve5utPTYkWP7dshpzprL/gponuI44h+KXe9Se
+58u0acqqYEPrPPk6bIpIcHvG1o0CAwEAAaOCAoIwggJ+MA4GA1UdDwEB/wQEAwIF
+oDAdBgNVHSUEFjAUBggrBgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIwADAd
+BgNVHQ4EFgQUf1fUPkIolo4+mV11XDLl6R499y4wHwYDVR0jBBgwFoAUFC6zF7dY
+VsuuUAlA5h+vnYsUwsYwVQYIKwYBBQUHAQEESTBHMCEGCCsGAQUFBzABhhVodHRw
+Oi8vcjMuby5sZW5jci5vcmcwIgYIKwYBBQUHMAKGFmh0dHA6Ly9yMy5pLmxlbmNy
+Lm9yZy8wUQYDVR0RBEowSIIYKi5kZWR5bi5leGFtcGxlLmRlZHluLmlvghgqLmRl
+c2VjLmV4YW1wbGUuZGVkeW4uaW+CEiouZXhhbXBsZS5kZWR5bi5pbzBMBgNVHSAE
+RTBDMAgGBmeBDAECATA3BgsrBgEEAYLfEwEBATAoMCYGCCsGAQUFBwIBFhpodHRw
+Oi8vY3BzLmxldHNlbmNyeXB0Lm9yZzCCAQUGCisGAQQB1nkCBAIEgfYEgfMA8QB2
+APZclC/RdzAiFFQYCDCUVo7jTRMZM7/fDC8gC8xO8WTjAAABdwAPKecAAAQDAEcw
+RQIgMTqvW5jK+wy/77A7G+8ty4bjAMcqTSVA11cbYoBjx2gCIQD9KYwutem+G/Vu
+nrTAMzIhoK4ckyOFft5nszGaBwgcTgB3AG9Tdqwx8DEZ2JkApFEV/3cVHBHZAsEA
+KQaNsgiaN9kTAAABdwAPKrIAAAQDAEgwRgIhAMChRP6aIpAgK/0RhxJy5BHwxINO
+rI5aH606hLqr1adwAiEAhxxBTD8hI/X73E6f/dWgPeBXIodH3WFnTtpG6+Ex0L0w
+DQYJKoZIhvcNAQELBQADggEBADbPwMfqA3wd5iFBFtppEIgqPVdyA3rIci1DDo2D
+NwF4gjfJQEWPkSEAbgl/EpeDQzDOLwwHMYAqupqf9RfteN38i00fSNcGVPSExdcU
+/9bzGxHpXmoCMKsgoM0rgnlLNXPK9WlRCyun4VsJzsT2g/CDrYm+qysMXjUg5BWV
+GHsBo84w0KXj3TvpWOSMlBZyORdugu3Bix4R8F/A5jv9gh2LT5Nc0hzhQn1g7r2x
+qWiksTqmAMBtBKY7CaGXevaygr42XMp8FhIt7bU3ndr0yHu/gxPJB0qLHn/hvz5F
+VqgFUBTfxglKMUZ09W+6rBYqEKplpOhKgjXdrnChWgc/5ZM=
+-----END CERTIFICATE-----"""
+SUBJECT_NAMES = {'*.dedyn.example.dedyn.io', '*.desec.example.dedyn.io', '*.example.dedyn.io'}
+
+
+class TLSAIdentityTest(DesecTestCase):
+    # TODO load invalid cert
+
+    def read_subject_names(self):
+        id = models.TLSIdentity(certificate=CERTIFICATE, owner=self.user)
+        self.assertEqual(id.subject_names, SUBJECT_NAMES)
+
+    def test_generated_rrs_many_rrsets(self):
+        domain = models.Domain(name='example.dedyn.io', owner=self.user)
+        domain.save()
+
+        id = models.TLSIdentity(certificate=CERTIFICATE, owner=self.user, protocol=models.TLSIdentity.Protocol.SCTP)
+
+        self.assertEqual(id.subject_names, SUBJECT_NAMES)
+
+        rrs = id.get_rrs()
+        self.assertEqual(len(rrs), 3)
+
+        for rr in rrs:
+            self.assertEqual(rr.rrset.type, "TLSA")
+            self.assertEqual(rr.content, "3 1 1 9a3a491fe2dd6e4e0b7bf20a5bb62dd6212337642dcd7f4449d0b43dee4a8642")
+
+        self.assertEqual(
+            {rr.rrset.subname for rr in rrs},
+            {"_443._sctp", "_443._sctp.desec", "_443._sctp.dedyn"},
+        )
+
+    def test_generated_rrs_one_rrset(self):
+        domain = models.Domain(name='desec.example.dedyn.io', owner=self.user)
+        domain.save()
+
+        id = models.TLSIdentity(certificate=CERTIFICATE, owner=self.user, port=123)
+
+        rrs = id.get_rrs()
+        self.assertEqual(len(rrs), 1)
+        rr = rrs[0]
+
+        self.assertEqual(rr.rrset.type, "TLSA")
+        self.assertEqual(rr.rrset.subname, '_123._tcp')
+        self.assertEqual(rr.content, "3 1 1 9a3a491fe2dd6e4e0b7bf20a5bb62dd6212337642dcd7f4449d0b43dee4a8642")
+
+    def test_generated_rr_params(self):
+        domain = models.Domain(name='desec.example.dedyn.io', owner=self.user)
+        domain.save()
+        rrs = models.TLSIdentity(certificate=CERTIFICATE, owner=self.user, port=123,
+                                 tlsa_matching_type=models.TLSIdentity.MatchingType.SHA512,
+                                 tlsa_certificate_usage=models.TLSIdentity.CertificateUsage.TRUST_ANCHOR_ASSERTION
+                                 ).get_rrs()
+        self.assertEqual(
+            rrs[0].content,
+            "2 1 2 7e0c4276239bae692e17c748a53facf67599c05297ccd139f3b99822891ed"
+            "a1278fcd0d2cc5c932e3e3c38e5f5155038bf7135fb41c3afa0bc0abb245c4f2e62"
+        )
+
+    def test_create_delete_rrs(self):
+        domain = models.Domain(name='desec.example.dedyn.io', owner=self.user)
+        domain.save()
+
+        rrset = models.RRset(domain=domain, type='TLSA', subname='_123._tcp', ttl=1234)
+        rrset.save()
+
+        custom_rr = models.RR(rrset=rrset, content="3 1 1 deadbeef")
+        custom_rr.save()
+
+        id = models.TLSIdentity(
+            certificate=CERTIFICATE, owner=self.user, port=123,
+            tlsa_matching_type=models.TLSIdentity.MatchingType.SHA512,
+            tlsa_certificate_usage=models.TLSIdentity.CertificateUsage.TRUST_ANCHOR_ASSERTION,
+        )
+        id.save()
+
+        rrset = models.RRset.objects.get(domain__name='desec.example.dedyn.io', type='TLSA', subname='_123._tcp')
+        self.assertEqual(len(rrset.records.all()), 2)
+
+        id.delete()
+        rrset = models.RRset.objects.get(domain__name='desec.example.dedyn.io', type='TLSA', subname='_123._tcp')
+        self.assertEqual(len(rrset.records.all()), 1)
+
+    def test_duplicate_record(self):
+        def count_tlsa_records():
+            return models.RRset.objects.get(
+                    domain__name='desec.example.dedyn.io',
+                    type='TLSA', subname='_443._tcp'
+                ).records.count()
+
+        def count_tlsa_rrsets():
+            return models.RRset.objects.filter(
+                domain__name='desec.example.dedyn.io',
+                type='TLSA', subname='_443._tcp'
+            ).count()
+
+        domain = models.Domain(name='desec.example.dedyn.io', owner=self.user)
+        domain.save()
+
+        # insert first cert, insert second, delete first, delete second
+        id1 = models.TLSIdentity(certificate=CERTIFICATE, owner=self.user)
+        id2 = models.TLSIdentity(certificate=CERTIFICATE, owner=self.user)
+        id1.save()
+        self.assertEqual(count_tlsa_records(), 1)
+        id2.save()
+        self.assertEqual(count_tlsa_records(), 1)
+        id1.delete()
+        self.assertEqual(count_tlsa_records(), 1)
+        id2.delete()
+        self.assertEqual(count_tlsa_rrsets(), 0)
+
+        # insert first cert, insert second, delete second, delete first
+        id1 = models.TLSIdentity(certificate=CERTIFICATE, owner=self.user)
+        id2 = models.TLSIdentity(certificate=CERTIFICATE, owner=self.user)
+        id1.save()
+        self.assertEqual(count_tlsa_records(), 1)
+        id2.save()
+        self.assertEqual(count_tlsa_records(), 1)
+        id2.delete()
+        self.assertEqual(count_tlsa_records(), 1)
+        id1.delete()
+        self.assertEqual(count_tlsa_rrsets(), 0)
diff --git a/api/desecapi/urls/version_1.py b/api/desecapi/urls/version_1.py
index 1824afcf7..264f5de98 100644
--- a/api/desecapi/urls/version_1.py
+++ b/api/desecapi/urls/version_1.py
@@ -6,6 +6,9 @@
 tokens_router = SimpleRouter()
 tokens_router.register(r'', views.TokenViewSet, basename='token')
 
+identities_router = SimpleRouter()
+identities_router.register(r'tls', views.TLSIdentityViewSet, basename='identities-tls')
+
 auth_urls = [
     # User management
     path('', views.AccountCreateView.as_view(), name='register'),
@@ -56,6 +59,9 @@
 
     # CAPTCHA
     path('captcha/', views.CaptchaView.as_view(), name='captcha'),
+
+    # Identities management
+    path('identities/', include(identities_router.urls)),
 ]
 
 app_name = 'desecapi'
diff --git a/api/desecapi/views.py b/api/desecapi/views.py
index 191af9829..614c52666 100644
--- a/api/desecapi/views.py
+++ b/api/desecapi/views.py
@@ -771,3 +771,21 @@ def finalize(self):
 class CaptchaView(generics.CreateAPIView):
     serializer_class = serializers.CaptchaSerializer
     throttle_scope = 'account_management_passive'
+
+
+class IdentityViewSet(IdempotentDestroyMixin, viewsets.ModelViewSet):
+    permission_classes = (IsAuthenticated, IsOwner,)
+
+    def perform_create(self, serializer):
+        serializer.save(owner=self.request.user)
+
+
+class TLSIdentityViewSet(IdentityViewSet):
+    serializer_class = serializers.TLSIdentitySerializer
+
+    @property
+    def throttle_scope(self):
+        return 'dns_api_read' if self.request.method in SAFE_METHODS else 'dns_api_write_rrsets'
+
+    def get_queryset(self):
+        return self.request.user.identities.all()  # TODO filter for TLS
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 2d74ca226..7c5eb29c3 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -71,10 +71,7 @@ services:
     volumes:
     - ./webapp/:/usr/src/app/
     working_dir: /usr/src/app/
-    command: "npm run serve --fix"
-    environment:
-    - HOST=0.0.0.0
-    - PORT=443
+    command: bash -c "npm install && npm run serve"
     networks:
     - rearwebapp
     logging:
diff --git a/webapp/Dockerfile b/webapp/Dockerfile
index fbf1115b8..e8d7077bf 100644
--- a/webapp/Dockerfile
+++ b/webapp/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:latest
+FROM node:16
 RUN \
   apt-get update \
   && apt-get -y install gettext-base \
diff --git a/webapp/package.json b/webapp/package.json
index 37179098b..760dc469b 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 8080",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 44cf974b8..2750dcc94 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -57,6 +57,13 @@
             :to="{name: item.name}"
           >
             {{ item.text }}
+            <v-chip
+                class="ml-2"
+                v-if="item.beta"
+                small
+            >
+              BETA
+            </v-chip>
           </v-tab>
           <v-spacer></v-spacer>
           <v-menu
@@ -235,6 +242,11 @@ export default {
         'name': 'tokens',
         'text': 'Token Management',
       },
+      'dane': {
+        'name': 'dane',
+        'text': 'DANE Management',
+        'beta': true,
+      }
     },
     tabmenumore: {
       'change-email': {
diff --git a/webapp/src/components/Field/DomainList.vue b/webapp/src/components/Field/DomainList.vue
new file mode 100644
index 000000000..0b17911b7
--- /dev/null
+++ b/webapp/src/components/Field/DomainList.vue
@@ -0,0 +1,26 @@
+<template>
+  <ul>
+    <li v-for="d in value" v-bind:key="d">
+      <router-link :to="{name: 'domain', params: {'domain': d}}">{{ d }}</router-link>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'MultilineText',
+  props: {
+    label: {
+      type: String,
+      required: false,
+    },
+    value: {
+      type: [Array],
+      required: true,
+    },
+  },
+};
+</script>
+
+<style>
+</style>
diff --git a/webapp/src/components/Field/MultilineText.vue b/webapp/src/components/Field/MultilineText.vue
new file mode 100644
index 000000000..3efbe32cc
--- /dev/null
+++ b/webapp/src/components/Field/MultilineText.vue
@@ -0,0 +1,78 @@
+<template>
+  <v-textarea
+    :label="label"
+    :disabled="disabled || readonly"
+    :error-messages="errorMessages"
+    :value="value"
+    :type="type || ''"
+    :placeholder="required ? '' : '(optional)'"
+    :hint="hint"
+    persistent-hint
+    :required="required"
+    :rules="[v => !required || !!v || 'Required.']"
+    @input="changed('input', $event)"
+    @input.native="$emit('dirty', $event)"
+    @keyup="changed('keyup', $event)"
+  />
+</template>
+
+<script>
+export default {
+  name: 'MultilineText',
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    errorMessages: {
+      type: [String, Array],
+      default: () => [],
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Number],
+      required: false,
+    },
+    type: {
+      type: String,
+      required: false,
+    },
+  },
+  methods: {
+    changed(event, e) {
+      this.$emit(event, e);
+      this.$emit('dirty');
+    },
+  },
+};
+</script>
+
+<style>
+/* Removes dropdown icon from read-only select */
+.v-application--is-ltr .v-text-field.v-input--is-disabled .v-input__append-inner {
+  display: none;
+}
+/* remove underline from disabled text fields so they look like regular text */
+:not(v-select).theme--light.v-text-field.v-input--is-disabled .v-input__slot::before {
+  content: none;
+}
+/* display disabled text fields in normal color */
+.theme--light.v-input--is-disabled input {
+  color: rgba(0, 0, 0, 0.87);
+}
+</style>
\ No newline at end of file
diff --git a/webapp/src/components/Field/TLSAIdentity.vue b/webapp/src/components/Field/TLSAIdentity.vue
new file mode 100644
index 000000000..f8421a85c
--- /dev/null
+++ b/webapp/src/components/Field/TLSAIdentity.vue
@@ -0,0 +1,119 @@
+<template>
+  <!--v-textarea
+    :label="label"
+    :disabled="disabled || readonly"
+    :error-messages="errorMessages"
+    :value="value"
+    :type="type || ''"
+    :placeholder="required ? '' : '(optional)'"
+    :hint="hint"
+    persistent-hint
+    :required="required"
+    :rules="[v => !required || !!v || 'Required.']"
+    @input="changed('input', $event)"
+    @input.native="$emit('dirty', $event)"
+    @keyup="changed('keyup', $event)"
+  /-->
+  <v-container>
+    <h1 v-if="value.covered_names.length > 0">
+      Protects TLS connections to <code>{{ value.covered_names[0] }}:{{ value.port }}/{{ value.protocol }}</code>
+      <span v-if="value.covered_names.length > 1">and {{ value.covered_names.length - 1}} others</span>
+    </h1>
+    <h1 v-else>
+      Defunct Identity for <code>{{ value.subject_names[0] }}:{{ value.port }}/{{ value.protocol }}</code>
+      <span v-if="value.subject_names.length > 1">and {{ value.subject_names.length - 1}} others</span>
+    </h1>
+    <div>
+      <v-alert type="warning">
+        Warning: the following names are covered by the given certificate but are not available in your deSEC account:
+        <ul>
+          <li v-for="v in names_not_covered" :key="v"><code>{{v}}:{{ value.port }}/{{ value.protocol }}</code></li>
+        </ul>
+        Make these domains available in your deSEC account, then re-add this certificate to fix the problem.
+      </v-alert>
+      <p v-if="value.covered_names.length > 0">
+        Protected domain names:
+      </p>
+      <ul>
+        <li v-for="v in value.covered_names" :key="v"><code>{{v}}:{{ value.port }}/{{ value.protocol }}</code></li>
+      </ul>
+      <p/>
+      <p v-if="value.covered_names.length > 0">
+        TLSA-aware clients will verify that the contents of the TLSA record matches
+        <b v-if="value.tlsa_matching_type == 0"></b>
+        <b v-if="value.tlsa_matching_type == 1"> the SHA-256 hash of the</b>
+        <b v-if="value.tlsa_matching_type == 2"> the SHA-512 hash of the</b>
+
+        <b v-if="value.tlsa_selector == 0"> full certificate</b>
+        <b v-if="value.tlsa_selector == 1"> public key of the certificate</b>
+
+        <b v-if="value.tlsa_certificate_usage == 0"> of the issuing CA</b>
+        <b v-if="value.tlsa_certificate_usage == 1"> presented by the server</b>
+        <b v-if="value.tlsa_certificate_usage == 2"> of the issuing CA</b>
+        <b v-if="value.tlsa_certificate_usage == 3"> presented by the server</b>
+
+        <b v-if="value.tlsa_certificate_usage <= 1"> and that the certificate validates against the trust store</b>.
+      </p>
+      <!-- TODO use dialog to show certificate and fingerprint info -->
+<!--      <p>-->
+<!--        This identity was generated using an SSL certificate with fingerprint <code>{{ value.fingerprint }}</code>-->
+<!--        at {{ value.created }}.-->
+<!--      </p>-->
+    </div>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'TLSAIdentity',
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    errorMessages: {
+      type: [String, Array],
+      default: () => [],
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Number],
+      required: false,
+    },
+    type: {
+      type: String,
+      required: false,
+    },
+  },
+  computed: {
+    names_not_covered: function () {
+      let that = this;
+      return this.value.subject_names.filter(name => !that.value.covered_names.includes(name));
+    }
+  },
+  methods: {
+    changed(event, e) {
+      this.$emit(event, e);
+      this.$emit('dirty');
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/webapp/src/router/index.js b/webapp/src/router/index.js
index 907072f52..80803b3fb 100644
--- a/webapp/src/router/index.js
+++ b/webapp/src/router/index.js
@@ -123,6 +123,12 @@ const routes = [
     component: () => import(/* webpackChunkName: "gui" */ '../views/Domain/CrudDomain.vue'),
     meta: {guest: false},
   },
+  {
+    path: '/dane',
+    name: 'dane',
+    component: () => import(/* webpackChunkName: "gui" */ '../views/DaneHome.vue'),
+    meta: {guest: false},
+  },
 ]
 
 const router = new VueRouter({
diff --git a/webapp/src/views/CrudList.vue b/webapp/src/views/CrudList.vue
index 0e6bf0370..64a81231f 100644
--- a/webapp/src/views/CrudList.vue
+++ b/webapp/src/views/CrudList.vue
@@ -1,336 +1,339 @@
 <template>
-  <v-container class="fill-height" fluid>
-    <v-row align="center" justify="center">
-      <v-col cols="12" :sm="fullWidth ? '12' : '10'">
-        <v-card>
-          <!-- Error Snackbar -->
-          <v-snackbar
-            v-model="snackbar"
-            color="error"
-            multi-line
-            vertical
-            :timeout="-1"
-          >
-            {{ errors[errors.length - 1] }}
-            <v-btn @click="snackbar = false">
-              Close
-            </v-btn>
-          </v-snackbar>
+  <div>
+    <!-- Error Snackbar -->
+    <v-snackbar
+      v-model="snackbar"
+      color="error"
+      multi-line
+      vertical
+      :timeout="-1"
+    >
+      {{ errors[errors.length - 1] }}
+      <v-btn @click="snackbar = false">
+        Close
+      </v-btn>
+    </v-snackbar>
 
-          <!-- The Actual Table -->
-          <v-data-table
-                  :headers="headers"
-                  :item-class="itemClass"
-                  :items="rows"
-                  :search="search"
-                  :custom-filter="filterSearchableCols"
-                  :loading="$store.getters.working || createDialogWorking || destroyDialogWorking"
-                  class="elevation-1"
-                  @click:row="rowClick"
+    <!-- The Actual Table -->
+    <v-data-table
+            :headers="headers"
+            :item-class="itemClass"
+            :items="rows"
+            :search="search"
+            :custom-filter="filterSearchableCols"
+            :loading="$store.getters.working || createDialogWorking || destroyDialogWorking"
+            class="elevation-1"
+            @click:row="rowClick"
+            :show-expand="expandable"
+    >
+      <template slot="top">
+        <!-- Headline & Toolbar, Including New Form -->
+        <v-toolbar flat>
+          <v-toolbar-title>{{ headlines.table }}</v-toolbar-title>
+          <v-spacer />
+          <v-text-field
+                  v-model="search"
+                  v-if="$vuetify.breakpoint.smAndUp"
+                  append-icon="mdi-magnify"
+                  label="Search"
+                  single-line
+                  hide-details
+          />
+          <v-spacer v-if="Object.keys(writeableAdvancedColumns).length > 0"/>
+          <v-switch
+              v-model="showAdvanced"
+              v-if="Object.keys(writeableAdvancedColumns).length > 0"
+              label="Show advanced settings"
+              class="mt-6"
+          />
+          <v-spacer />
+          <v-btn
+                  id="create"
+                  color="primary"
+                  dark
+                  small
+                  fab
+                  depressed
+                  :disabled="$store.getters.working"
           >
-            <template slot="top">
-              <!-- Headline & Toolbar, Including New Form -->
-              <v-toolbar flat>
-                <v-toolbar-title>{{ headlines.table }}</v-toolbar-title>
-                <v-spacer />
-                <v-text-field
-                        v-model="search"
-                        v-if="$vuetify.breakpoint.smAndUp"
-                        append-icon="mdi-magnify"
-                        label="Search"
-                        single-line
-                        hide-details
-                />
-                <v-spacer v-if="Object.keys(writeableAdvancedColumns).length > 0"/>
-                <v-switch
-                    v-model="showAdvanced"
-                    v-if="Object.keys(writeableAdvancedColumns).length > 0"
-                    label="Show advanced settings"
-                    class="mt-6"
-                />
-                <v-spacer />
-                <v-btn
-                        id="create"
-                        color="primary"
-                        dark
-                        small
-                        fab
-                        depressed
-                        :disabled="$store.getters.working"
-                >
-                  <v-icon>mdi-plus</v-icon>
-                </v-btn>
-                <template v-slot:extension v-if="$vuetify.breakpoint.xsOnly">
-                  <v-text-field
-                          v-model="search"
-                          append-icon="mdi-magnify"
-                          label="Search"
-                          single-line
-                          hide-details
-                  />
-                </template>
-                <v-dialog
-                        v-if="createable"
-                        v-model="createDialog"
-                        activator="#create"
-                        max-width="500px"
-                        persistent
-                        @keydown.esc="close"
-                >
-                  <v-card>
-                    <v-form v-model="valid" @submit.prevent="save()">
-                      <v-card-title>
-                        <span class="headline">{{ headlines.create }}</span>
-                        <v-spacer />
-                        <v-icon @click.stop="close">
-                          mdi-close
-                        </v-icon>
-                      </v-card-title>
-                      <v-divider />
-                      <v-progress-linear
-                              v-if="createDialogWorking"
-                              height="2"
-                              :indeterminate="true"
-                      />
-
-                      <v-alert
-                              :value="createDialogError"
-                              type="error"
-                              style="overflow: auto"
-                      >
-                        {{ errors[errors.length - 1] }}
-                      </v-alert>
-
-                      <v-alert
-                              :value="createDialogSuccess"
-                              type="success"
-                              style="overflow: auto"
-                      >
-                        <span v-html="texts.createSuccess(createDialogItem)"></span>
-                      </v-alert>
-
-                      <v-alert
-                              :value="!!texts.createWarning(destroyDialogItem)"
-                              type="warning"
-                      >
-                        {{ texts.createWarning(createDialogItem) }}
-                      </v-alert>
-
-                      <v-card-text v-if="createDialog">
-                        <!-- v-if required here to make autofocus below working for the 2nd+ times, cf stackoverflow.com/a/51476992 -->
-                        <span v-html="texts.create()"></span>
-                        <!-- New Form -->
-                        <component
-                                :is="c.datatype"
-                                v-for="(c, id) in writeableStandardColumns"
-                                :key="id"
-                                v-model="createDialogItem[c.value]"
-                                v-bind="c.fieldProps ? c.fieldProps(createDialogItem) : {}"
-                                :label="c.textCreate || c.text"
-                                :error-messages="c.createErrors"
-                                :required="c.required || false"
-                                :disabled="createInhibited || createDialogSuccess"
-                                autofocus
-                                @input="clearErrors(c)"
-                        />
-
-                          <v-expansion-panels
-                              flat
-                              v-if="Object.keys(writeableAdvancedColumns).length > 0"
-                          >
-                            <v-expansion-panel>
-                              <v-expansion-panel-header class="primary lighten-5">
-                                <span>Advanced settings</span>
-                              </v-expansion-panel-header>
-                              <v-expansion-panel-content>
-                                <component
-                                        :is="c.datatype"
-                                        v-for="(c, id) in writeableAdvancedColumns"
-                                        :key="id"
-                                        v-model="createDialogItem[c.value]"
-                                        v-bind="c.fieldProps ? c.fieldProps(createDialogItem) : {}"
-                                        :label="c.textCreate || c.text"
-                                        :error-messages="c.createErrors"
-                                        :required="c.required || false"
-                                        :disabled="createInhibited || createDialogSuccess"
-                                        autofocus
-                                        @input="clearErrors(c)"
-                                />
-                              </v-expansion-panel-content>
-                            </v-expansion-panel>
-                          </v-expansion-panels>
-
-                        <div class="mt-4" v-html="texts.createBottom()"></div>
-                      </v-card-text>
-
-                      <v-card-actions class="pb-4">
-                        <v-spacer />
-                        <v-btn
-                                color="primary"
-                                class="grow"
-                                :outlined="!createDialogSuccess"
-                                :disabled="createDialogWorking"
-                                @click.native="close"
-                        >
-                          {{ createDialogSuccess ? 'Close' : 'Cancel' }}
-                        </v-btn>
-                        <v-btn
-                                type="submit"
-                                color="primary"
-                                class="grow"
-                                depressed
-                                :disabled="createInhibited || !valid || createDialogWorking || createDialogSuccess"
-                                :loading="createDialogWorking"
-                                v-if="!createDialogSuccess"
-                        >
-                          Save
-                        </v-btn>
-                        <v-spacer />
-                      </v-card-actions>
-                    </v-form>
-                  </v-card>
-                </v-dialog>
-              </v-toolbar>
-              <v-alert text type="info" v-if="texts.banner"><span v-html="texts.banner()"></span></v-alert>
-            </template>
-
-            <template
-              v-for="(column, id) in columns"
-              v-slot:[column.name]="itemFieldProps"
-            >
-              <component
-                :is="column.datatype"
-                :key="id"
-                :readonly="column.readonly"
-                :disabled="$store.getters.working || itemIsReadOnly(itemFieldProps.item)"
-                v-model="itemFieldProps.item[column.value]"
-                v-bind="column.fieldProps ? column.fieldProps(itemFieldProps.item) : {}"
-                @keyup="keyupHandler"
-                @dirty="dirty.add(itemFieldProps.item); dirtyError.delete(itemFieldProps.item);"
-              />
-            </template>
-            <template v-slot:[`item.actions`]="itemFieldProps">
-              <v-layout
-                      class="my-1 py-3"
-                      justify-end
-              >
-                <v-btn
-                        v-for="action in actions"
-                        :disabled="$store.getters.working || itemIsReadOnly(itemFieldProps.item)"
-                        :key="action.key"
-                        color="grey"
-                        icon
-                        @click.stop="action.go(itemFieldProps.item)"
-                >
-                  <v-icon>{{ action.icon }}</v-icon>
-                </v-btn>
-                <v-btn
-                        v-if="updatable"
-                        :disabled="$store.getters.working || itemIsReadOnly(itemFieldProps.item)"
-                        color="grey"
-                        icon
-                        @click.stop="save(itemFieldProps.item, $event)"
-                >
-                  <v-icon>mdi-content-save-edit</v-icon>
-                </v-btn>
-                <v-btn
-                        v-if="destroyable"
-                        :disabled="$store.getters.working || itemIsReadOnly(itemFieldProps.item)"
-                        color="grey"
-                        class="hover-red"
-                        icon
-                        @click.stop="destroyAsk(itemFieldProps.item)"
-                >
-                  <v-icon>mdi-delete</v-icon>
-                </v-btn>
-              </v-layout>
-            </template>
-            <template slot="no-data">
-              <div class="py-4 text-xs-center">
-                <h2 class="title">
-                  Feels so empty here!
-                </h2>
-                <p>No entries yet.</p>
-              </div>
-            </template>
-          </v-data-table>
-
-          <!-- Delete Dialog -->
+            <v-icon>mdi-plus</v-icon>
+          </v-btn>
+          <template v-slot:extension v-if="$vuetify.breakpoint.xsOnly">
+            <v-text-field
+                    v-model="search"
+                    append-icon="mdi-magnify"
+                    label="Search"
+                    single-line
+                    hide-details
+            />
+          </template>
           <v-dialog
-            v-model="destroyDialog"
-            max-width="500px"
-            persistent
+                  v-if="createable"
+                  v-model="createDialog"
+                  activator="#create"
+                  max-width="500px"
+                  persistent
+                  @keydown.esc="close"
           >
             <v-card>
-              <v-form @submit.prevent="destroy(destroyDialogItem)">
+              <v-form v-model="valid" @submit.prevent="save()">
                 <v-card-title>
-                  <span class="headline">{{ headlines.destroy }}</span>
+                  <span class="headline">{{ headlines.create }}</span>
+                  <v-spacer />
+                  <v-icon @click.stop="close">
+                    mdi-close
+                  </v-icon>
                 </v-card-title>
-
                 <v-divider />
                 <v-progress-linear
-                  v-if="destroyDialogWorking"
-                  height="2"
-                  :indeterminate="true"
+                        v-if="createDialogWorking"
+                        height="2"
+                        :indeterminate="true"
                 />
 
                 <v-alert
-                        :value="!!texts.destroyInfo(destroyDialogItem)"
-                        type="info"
+                        :value="createDialogError"
+                        type="error"
+                        style="overflow: auto"
                 >
-                  {{ texts.destroyInfo(destroyDialogItem) }}
+                  {{ errors[errors.length - 1] }}
                 </v-alert>
+
                 <v-alert
-                        :value="!!texts.destroyWarning(destroyDialogItem)"
-                        type="warning"
+                        :value="createDialogSuccess"
+                        type="success"
+                        style="overflow: auto"
                 >
-                  {{ texts.destroyWarning(destroyDialogItem) }}
+                  <span v-html="texts.createSuccess(createDialogItem)"></span>
                 </v-alert>
+
                 <v-alert
-                  :value="!!destroyDialogError"
-                  type="error"
+                        :value="!!texts.createWarning(destroyDialogItem)"
+                        type="warning"
                 >
-                  {{ errors[errors.length - 1] }}
+                  {{ texts.createWarning(createDialogItem) }}
                 </v-alert>
 
-                <v-card-text>
-                  {{ texts.destroy(destroyDialogItem) }}
+                <v-card-text v-if="createDialog">
+                  <!-- v-if required here to make autofocus below working for the 2nd+ times, cf stackoverflow.com/a/51476992 -->
+                  <span v-html="texts.create()"></span>
+                  <!-- New Form -->
+                  <component
+                          :is="c.datatype"
+                          v-for="(c, id) in writeableStandardColumns"
+                          :key="id"
+                          v-model="createDialogItem[c.value]"
+                          v-bind="c.fieldProps ? c.fieldProps(createDialogItem) : {}"
+                          :label="c.textCreate || c.text"
+                          :error-messages="c.createErrors"
+                          :required="c.required || false"
+                          :disabled="createInhibited || createDialogSuccess"
+                          autofocus
+                          @input="clearErrors(c)"
+                  />
+
+                    <v-expansion-panels
+                        flat
+                        v-if="Object.keys(writeableAdvancedColumns).length > 0"
+                    >
+                      <v-expansion-panel>
+                        <v-expansion-panel-header class="primary lighten-5">
+                          <span>Advanced settings</span>
+                        </v-expansion-panel-header>
+                        <v-expansion-panel-content>
+                          <component
+                                  :is="c.datatype"
+                                  v-for="(c, id) in writeableAdvancedColumns"
+                                  :key="id"
+                                  v-model="createDialogItem[c.value]"
+                                  v-bind="c.fieldProps ? c.fieldProps(createDialogItem) : {}"
+                                  :label="c.textCreate || c.text"
+                                  :error-messages="c.createErrors"
+                                  :required="c.required || false"
+                                  :disabled="createInhibited || createDialogSuccess"
+                                  autofocus
+                                  @input="clearErrors(c)"
+                          />
+                        </v-expansion-panel-content>
+                      </v-expansion-panel>
+                    </v-expansion-panels>
+
+                  <div class="mt-4" v-html="texts.createBottom()"></div>
                 </v-card-text>
 
-                <v-card-actions>
+                <v-card-actions class="pb-4">
                   <v-spacer />
                   <v-btn
-                    color="primary"
-                    class="grow"
-                    outlined
-                    :disabled="destroyDialogWorking"
-                    @click.native="destroyClose"
+                          color="primary"
+                          class="grow"
+                          :outlined="!createDialogSuccess"
+                          :disabled="createDialogWorking"
+                          @click.native="close"
                   >
-                    Cancel
+                    {{ createDialogSuccess ? 'Close' : 'Cancel' }}
                   </v-btn>
                   <v-btn
-                    color="primary"
-                    class="grow"
-                    depressed
-                    type="submit"
-                    :loading="destroyDialogWorking"
+                          type="submit"
+                          color="primary"
+                          class="grow"
+                          depressed
+                          :disabled="createInhibited || !valid || createDialogWorking || createDialogSuccess"
+                          :loading="createDialogWorking"
+                          v-if="!createDialogSuccess"
                   >
-                    Delete
+                    Save
                   </v-btn>
                   <v-spacer />
                 </v-card-actions>
               </v-form>
             </v-card>
           </v-dialog>
+        </v-toolbar>
+        <v-alert text type="info" v-if="texts.banner"><span v-html="texts.banner()"></span></v-alert>
+      </template>
+
+      <template
+        v-for="(column, id) in columns"
+        v-slot:[column.name]="itemFieldProps"
+      >
+        <component
+          :is="column.datatype"
+          :key="id"
+          :readonly="column.readonly"
+          :disabled="$store.getters.working || itemIsReadOnly(itemFieldProps.item)"
+          v-model="itemFieldProps.item[column.value]"
+          v-bind="column.fieldProps ? column.fieldProps(itemFieldProps.item) : {}"
+          @keyup="keyupHandler"
+          @dirty="dirty.add(itemFieldProps.item); dirtyError.delete(itemFieldProps.item);"
+        />
+      </template>
+      <template v-slot:[`item.actions`]="itemFieldProps">
+        <v-layout
+                class="my-1 py-3"
+                justify-end
+        >
+          <v-btn
+                  v-for="action in actions"
+                  :disabled="$store.getters.working || itemIsReadOnly(itemFieldProps.item)"
+                  :key="action.key"
+                  color="grey"
+                  icon
+                  @click.stop="action.go(itemFieldProps.item)"
+          >
+            <v-icon>{{ action.icon }}</v-icon>
+          </v-btn>
+          <v-btn
+                  v-if="updatable"
+                  :disabled="$store.getters.working || itemIsReadOnly(itemFieldProps.item)"
+                  color="grey"
+                  icon
+                  @click.stop="save(itemFieldProps.item, $event)"
+          >
+            <v-icon>mdi-content-save-edit</v-icon>
+          </v-btn>
+          <v-btn
+                  v-if="destroyable"
+                  :disabled="$store.getters.working || itemIsReadOnly(itemFieldProps.item)"
+                  color="grey"
+                  class="hover-red"
+                  icon
+                  @click.stop="destroyAsk(itemFieldProps.item)"
+          >
+            <v-icon>mdi-delete</v-icon>
+          </v-btn>
+        </v-layout>
+      </template>
+      <template slot="no-data">
+        <div class="py-4 text-xs-center">
+          <h2 class="title">
+            Feels so empty here!
+          </h2>
+          <p>No entries yet.</p>
+        </div>
+      </template>
+      <template v-slot:expanded-item="{ item }">
+        <td :colspan="headers.length" v-if="expandable">
           <component
-                  :is="extraComponentName"
-                  v-bind="extraComponentBind"
-                  @input="() => { this.extraComponentName = ''; }"
+            :is="expandComponentName"
+            v-model="rows[rows.indexOf(item)]"
           ></component>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
+        </td>
+    </template>
+    </v-data-table>
+
+    <!-- Delete Dialog -->
+    <v-dialog
+      v-model="destroyDialog"
+      max-width="500px"
+      persistent
+    >
+      <v-card>
+        <v-form @submit.prevent="destroy(destroyDialogItem)">
+          <v-card-title>
+            <span class="headline">{{ headlines.destroy }}</span>
+          </v-card-title>
+
+          <v-divider />
+          <v-progress-linear
+            v-if="destroyDialogWorking"
+            height="2"
+            :indeterminate="true"
+          />
+
+          <v-alert
+                  :value="!!texts.destroyInfo(destroyDialogItem)"
+                  type="info"
+          >
+            {{ texts.destroyInfo(destroyDialogItem) }}
+          </v-alert>
+          <v-alert
+                  :value="!!texts.destroyWarning(destroyDialogItem)"
+                  type="warning"
+          >
+            {{ texts.destroyWarning(destroyDialogItem) }}
+          </v-alert>
+          <v-alert
+            :value="!!destroyDialogError"
+            type="error"
+          >
+            {{ errors[errors.length - 1] }}
+          </v-alert>
+
+          <v-card-text>
+            {{ texts.destroy(destroyDialogItem) }}
+          </v-card-text>
+
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="primary"
+              class="grow"
+              outlined
+              :disabled="destroyDialogWorking"
+              @click.native="destroyClose"
+            >
+              Cancel
+            </v-btn>
+            <v-btn
+              color="primary"
+              class="grow"
+              depressed
+              type="submit"
+              :loading="destroyDialogWorking"
+            >
+              Delete
+            </v-btn>
+            <v-spacer />
+          </v-card-actions>
+        </v-form>
+      </v-card>
+    </v-dialog>
+    <component
+            :is="extraComponentName"
+            v-bind="extraComponentBind"
+            @input="() => { this.extraComponentName = ''; }"
+    ></component>
+  </div>
 </template>
 
 <script>
@@ -344,6 +347,9 @@ import Record from '@/components/Field/Record';
 import RecordList from '@/components/Field/RecordList';
 import Switchbox from '@/components/Field/Switchbox';
 import TTL from '@/components/Field/TTL';
+import MultilineText from "@/components/Field/MultilineText";
+import TLSAIdentity from "../components/Field/TLSAIdentity";
+import DomainList from "../components/Field/DomainList";
 
 const filter = function (obj, predicate) {
   const result = {};
@@ -372,6 +378,9 @@ export default {
     Record,
     RecordList,
     TTL,
+    MultilineText,
+    TLSAIdentity,
+    DomainList,
   },
   data() { return {
     createDialog: false,
@@ -419,6 +428,8 @@ export default {
     },
     columns: {},
     actions: [],
+    expandable: false,
+    expandComponentName: undefined,
     // resource
     paths: {
       list: 'needs/to/be/overwritten/',
diff --git a/webapp/src/views/DaneHome.vue b/webapp/src/views/DaneHome.vue
new file mode 100644
index 000000000..e6e226ac2
--- /dev/null
+++ b/webapp/src/views/DaneHome.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-container fluid="true">
+    <v-row>
+      <v-col class="flex-grow-0 flex-shrink-0">
+        <v-card
+            class="mx-auto"
+            max-width="300"
+            tile
+        >
+          <v-list disabled>
+            <v-subheader>IDENTITIES</v-subheader>
+            <v-list-item-group
+                v-model="selectedItem"
+                color="primary"
+            >
+              <v-list-item
+                  v-for="(item, i) in types"
+                  :key="i"
+              >
+                <v-list-item-icon>
+                  <v-icon v-text="item.icon"></v-icon>
+                </v-list-item-icon>
+                <v-list-item-content>
+                  <v-list-item-title v-text="item.name"></v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+        </v-card>
+      </v-col>
+      <v-col class="flex-grow-1">
+        <t-l-s-identity-list/>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+</style>
+
+<script>
+import TLSIdentityList from "@/views/TLSIdentityList";
+
+export default {
+  name: 'dane',
+  components: {TLSIdentityList},
+  data: () => ({
+    'types': [
+      {'id': 'tls', 'rdtype': 'TLSA', 'name': 'TLS Certificates'},
+      {'id': 'smime', 'rdtype': 'SMIMEA', 'name': 'S/MIME Certificates'},
+      {'id': 'OPENPGP', 'rdtype': 'OPENPGPKEY', 'name': 'OPEN PGP Keys'},
+      {'id': 'SSH', 'rdtype': 'SSHFP', 'name': 'SSH Fingerprints'},
+    ]
+  }),
+}
+</script>
diff --git a/webapp/src/views/TLSIdentityList.vue b/webapp/src/views/TLSIdentityList.vue
new file mode 100644
index 000000000..c3806753c
--- /dev/null
+++ b/webapp/src/views/TLSIdentityList.vue
@@ -0,0 +1,202 @@
+<script>
+import CrudList from './CrudList';
+
+export default {
+  name: 'TLSIdentityList',
+  extends: CrudList,
+  components: {
+  },
+  data() {
+    return {
+        createable: true,
+        updatable: false,
+        destroyable: true,
+        headlines: {
+          table: 'TLS Server Identities',
+          create: 'Add an identity',
+          destroy: 'Remove an identity',
+        },
+        texts: {
+          banner: () => 'Publish your TLS servers\' cryptographic identity in the DNS by adding your server certificate(s) below.',
+          create: () => `Adds a TLS identity.`,
+          destroy: d => (`Remove TLS identity ${d.name}?`),
+          destroyInfo: () => 'Removing this TLS identity may render your website unavailable users.',
+        },
+        columns: {
+          name: {
+            name: 'item.name',
+            text: 'Name',
+            textCreate: 'Enter identity name',
+            align: 'left',
+            sortable: true,
+            value: 'name',
+            readonly: true,
+            required: false,
+            writeOnCreate: true,
+            datatype: 'GenericText',
+            searchable: true,
+          },
+          cert: {
+            name: 'item.certificate',
+            text: 'Certificate',
+            textCreate: 'Paste certificte in PEM format',
+            align: 'left',
+            sortable: true,
+            value: 'certificate',
+            readonly: true,
+            required: true,
+            writeOnCreate: true,
+            datatype: 'MultilineText',
+            searchable: false,
+          },
+          // fingerprint: {
+          //   name: 'item.fingerprint',
+          //   text: 'Fingerprint',
+          //   algin: 'left',
+          //   sortable: true,
+          //   value: 'fingerprint',
+          //   readonly: true,
+          //   datatype: 'GenericText',
+          // },
+          // not_valid_before: {
+          //   name: 'item.not_valid_before',
+          //   text: 'Begin Validity',
+          //   algin: 'left',
+          //   sortable: true,
+          //   value: 'not_valid_before',
+          //   readonly: true,
+          //   datatype: 'TimeAgo',
+          // },
+          // not_valid_after: {
+          //   name: 'item.not_valid_after',
+          //   text: 'Expiration',
+          //   algin: 'left',
+          //   sortable: true,
+          //   value: 'not_valid_after',
+          //   readonly: true,
+          //   datatype: 'TimeAgo',
+          // },
+          // subject_names: {
+          //   name: 'item.subject_names',
+          //   text: 'Subject Names',
+          //   algin: 'left',
+          //   sortable: true,
+          //   value: 'subject_names',
+          //   readonly: true,
+          //   datatype: 'MultilineText',
+          // },
+          // published_at: {
+          //   name: 'item.published_at',
+          //   text: 'published at',
+          //   algin: 'left',
+          //   sortable: true,
+          //   value: 'published_at',
+          //   readonly: true,
+          //   datatype: 'MultilineText',
+          // },
+          domains: {
+            name: 'item.domains',
+            text: 'domains',
+            algin: 'left',
+            sortable: true,
+            value: 'domains',
+            readonly: true,
+            datatype: 'DomainList',
+          },
+          tlsa_selector: {
+            name: 'item.tlsa_selector',
+            text: 'TLSA Selector',
+            algin: 'left',
+            sortable: true,
+            value: 'tlsa_selector',
+            readonly: true,
+            writeOnCreate: true,
+            datatype: 'GenericText',
+          },
+          tlsa_matching_type: {
+            name: 'item.tlsa_matching_type',
+            text: 'TLSA Matching Type',
+            algin: 'left',
+            sortable: true,
+            value: 'tlsa_matching_type',
+            readonly: true,
+            writeOnCreate: true,
+            datatype: 'GenericText',
+          },
+          tlsa_certificate_usage: {
+            name: 'item.tlsa_certificate_usage',
+            text: 'TLSA Certificate Usage',
+            algin: 'left',
+            sortable: true,
+            value: 'tlsa_certificate_usage',
+            readonly: true,
+            writeOnCreate: true,
+            datatype: 'GenericText',
+          },
+          protocol: {
+            name: 'item.protocol',
+            text: 'Protocol',
+            algin: 'left',
+            sortable: true,
+            value: 'protocol',
+            readonly: true,
+            writeOnCreate: true,
+            datatype: 'GenericText',
+          },
+          port: {
+            name: 'item.port',
+            text: 'Port',
+            algin: 'left',
+            sortable: true,
+            value: 'port',
+            readonly: true,
+            writeOnCreate: true,
+            datatype: 'GenericText',
+          },
+
+          scheduled_removal: {
+            name: 'item.scheduled_removal',
+            text: 'Scheduled Removal',
+            align: 'left',
+            sortable: true,
+            value: 'scheduled_removal',
+            readonly: true,
+            datatype: 'TimeAgo',
+            searchable: false,
+          },
+          created: {
+            name: 'item.created',
+            text: 'Created',
+            align: 'left',
+            sortable: true,
+            value: 'created',
+            readonly: true,
+            datatype: 'TimeAgo',
+            searchable: false,
+          },
+        },
+        actions: [
+          // {
+          //   key: 'info',
+          //   go: d => this.showDomainInfo(d),
+          //   icon: 'mdi-information',
+          // },
+        ],
+        paths: {
+          list: 'identities/tls/',
+          create: 'identities/tls/',
+          delete: 'identities/tls/:{id}',
+        },
+        expandable: true,
+        expandComponentName: "TLSAIdentity",
+        itemDefaults: () => ({ name: '' }),
+        handleRowClick: (value) => {
+          console.log(value);
+          // this.$router.push({name: 'domain', params: {domain: value.name}});
+        },
+    }
+  },
+  computed: {
+  },
+};
+</script>
diff --git a/www/90-desec.static.dev.content b/www/90-desec.static.dev.content
index 37dc7d3f1..271b58e84 100644
--- a/www/90-desec.static.dev.content
+++ b/www/90-desec.static.dev.content
@@ -9,4 +9,4 @@ proxy_http_version 1.1;
 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";
 
-proxy_pass http://webapp:443; # FIXME Note that we use 443 for plain text communication, to make webpack dev tools use port 443, too. A vue-cli upgrade may help.
+proxy_pass http://webapp:8080;