diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 2138920ae..a448a83fc 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -59,6 +59,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1
+      - name: prepare ts api client
+        run: |
+          docker run --rm -v $(pwd):/local openapitools/openapi-generator-cli generate -i /local/swagger.yaml -g typescript-fetch -o /local/web/src/api --additional-properties=typescriptThreePlus=true
       - name: Docker Login Registry
         env:
           DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
diff --git a/Dockerfile b/Dockerfile
index 5041486ca..a806fb659 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -45,4 +45,5 @@ COPY ./lifecycle/ /lifecycle
 USER authentik
 STOPSIGNAL SIGINT
 ENV TMPDIR /dev/shm/
+ENV PYTHONUBUFFERED 1
 ENTRYPOINT [ "/lifecycle/bootstrap.sh" ]
diff --git a/authentik/admin/api/metrics.py b/authentik/admin/api/metrics.py
index d3e9f812e..ad3943e16 100644
--- a/authentik/admin/api/metrics.py
+++ b/authentik/admin/api/metrics.py
@@ -7,8 +7,8 @@ from django.db.models import Count, ExpressionWrapper, F, Model
 from django.db.models.fields import DurationField
 from django.db.models.functions import ExtractHour
 from django.utils.timezone import now
-from drf_yasg2.utils import swagger_auto_schema
-from rest_framework.fields import SerializerMethodField
+from drf_yasg2.utils import swagger_auto_schema, swagger_serializer_method
+from rest_framework.fields import IntegerField, SerializerMethodField
 from rest_framework.permissions import IsAdminUser
 from rest_framework.request import Request
 from rest_framework.response import Response
@@ -37,23 +37,39 @@ def get_events_per_1h(**filter_kwargs) -> list[dict[str, int]]:
     for hour in range(0, -24, -1):
         results.append(
             {
-                "x": time.mktime((_now + timedelta(hours=hour)).timetuple()) * 1000,
-                "y": data[hour * -1],
+                "x_cord": time.mktime((_now + timedelta(hours=hour)).timetuple())
+                * 1000,
+                "y_cord": data[hour * -1],
             }
         )
     return results
 
 
-class AdministrationMetricsSerializer(Serializer):
+class CoordinateSerializer(Serializer):
+    """Coordinates for diagrams"""
+
+    x_cord = IntegerField(read_only=True)
+    y_cord = IntegerField(read_only=True)
+
+    def create(self, validated_data: dict) -> Model:
+        raise NotImplementedError
+
+    def update(self, instance: Model, validated_data: dict) -> Model:
+        raise NotImplementedError
+
+
+class LoginMetricsSerializer(Serializer):
     """Login Metrics per 1h"""
 
     logins_per_1h = SerializerMethodField()
     logins_failed_per_1h = SerializerMethodField()
 
+    @swagger_serializer_method(serializer_or_field=CoordinateSerializer(many=True))
     def get_logins_per_1h(self, _):
         """Get successful logins per hour for the last 24 hours"""
         return get_events_per_1h(action=EventAction.LOGIN)
 
+    @swagger_serializer_method(serializer_or_field=CoordinateSerializer(many=True))
     def get_logins_failed_per_1h(self, _):
         """Get failed logins per hour for the last 24 hours"""
         return get_events_per_1h(action=EventAction.LOGIN_FAILED)
@@ -70,8 +86,8 @@ class AdministrationMetricsViewSet(ViewSet):
 
     permission_classes = [IsAdminUser]
 
-    @swagger_auto_schema(responses={200: AdministrationMetricsSerializer(many=True)})
+    @swagger_auto_schema(responses={200: LoginMetricsSerializer(many=False)})
     def list(self, request: Request) -> Response:
         """Login Metrics per 1h"""
-        serializer = AdministrationMetricsSerializer(True)
+        serializer = LoginMetricsSerializer(True)
         return Response(serializer.data)
diff --git a/authentik/admin/api/tasks.py b/authentik/admin/api/tasks.py
index 3dca24bc1..d3abd5dea 100644
--- a/authentik/admin/api/tasks.py
+++ b/authentik/admin/api/tasks.py
@@ -25,8 +25,8 @@ class TaskSerializer(Serializer):
     task_finish_timestamp = DateTimeField(source="finish_timestamp")
 
     status = ChoiceField(
-        source="result.status.value",
-        choices=[(x.value, x.name) for x in TaskResultStatus],
+        source="result.status.name",
+        choices=[(x.name, x.name) for x in TaskResultStatus],
     )
     messages = ListField(source="result.messages")
 
diff --git a/authentik/api/v2/urls.py b/authentik/api/v2/urls.py
index 8ea2ec4ae..9f3fd39e7 100644
--- a/authentik/api/v2/urls.py
+++ b/authentik/api/v2/urls.py
@@ -1,4 +1,5 @@
 """api v2 urls"""
+from django.conf import settings
 from django.urls import path, re_path
 from drf_yasg2 import openapi
 from drf_yasg2.views import get_schema_view
@@ -156,6 +157,14 @@ router.register("stages/user_write", UserWriteStageViewSet)
 router.register("stages/dummy", DummyStageViewSet)
 router.register("policies/dummy", DummyPolicyViewSet)
 
+api_urls = router.urls + [
+    path(
+        "flows/executor/<slug:flow_slug>/",
+        FlowExecutorView.as_view(),
+        name="flow-executor",
+    ),
+]
+
 info = openapi.Info(
     title="authentik API",
     default_version="v2",
@@ -165,26 +174,22 @@ info = openapi.Info(
     ),
 )
 SchemaView = get_schema_view(
-    info,
-    public=True,
-    permission_classes=(AllowAny,),
+    info, public=True, permission_classes=(AllowAny,), patterns=api_urls
 )
 
-urlpatterns = [
+urlpatterns = api_urls + [
     re_path(
         r"^swagger(?P<format>\.json|\.yaml)$",
         SchemaView.without_ui(cache_timeout=0),
         name="schema-json",
     ),
-    path(
-        "swagger/",
-        SchemaView.with_ui("swagger", cache_timeout=0),
-        name="schema-swagger-ui",
-    ),
-    path("redoc/", SchemaView.with_ui("redoc", cache_timeout=0), name="schema-redoc"),
-    path(
-        "flows/executor/<slug:flow_slug>/",
-        FlowExecutorView.as_view(),
-        name="flow-executor",
-    ),
-] + router.urls
+]
+
+if settings.DEBUG:
+    urlpatterns = urlpatterns + [
+        path(
+            "swagger/",
+            SchemaView.with_ui("swagger", cache_timeout=0),
+            name="schema-swagger-ui",
+        ),
+    ]
diff --git a/authentik/core/api/applications.py b/authentik/core/api/applications.py
index 76cc432b9..eae9fc986 100644
--- a/authentik/core/api/applications.py
+++ b/authentik/core/api/applications.py
@@ -2,6 +2,7 @@
 from django.core.cache import cache
 from django.db.models import QuerySet
 from django.http.response import Http404
+from drf_yasg2.utils import swagger_auto_schema
 from guardian.shortcuts import get_objects_for_user
 from rest_framework.decorators import action
 from rest_framework.fields import SerializerMethodField
@@ -13,7 +14,7 @@ from rest_framework.viewsets import ModelViewSet
 from rest_framework_guardian.filters import ObjectPermissionsFilter
 from structlog.stdlib import get_logger
 
-from authentik.admin.api.metrics import get_events_per_1h
+from authentik.admin.api.metrics import CoordinateSerializer, get_events_per_1h
 from authentik.core.api.providers import ProviderSerializer
 from authentik.core.models import Application
 from authentik.events.models import EventAction
@@ -109,6 +110,7 @@ class ApplicationViewSet(ModelViewSet):
         serializer = self.get_serializer(allowed_applications, many=True)
         return self.get_paginated_response(serializer.data)
 
+    @swagger_auto_schema(responses={200: CoordinateSerializer(many=True)})
     @action(detail=True)
     def metrics(self, request: Request, slug: str):
         """Metrics for application logins"""
diff --git a/authentik/core/api/utils.py b/authentik/core/api/utils.py
index b93f75155..438efa2df 100644
--- a/authentik/core/api/utils.py
+++ b/authentik/core/api/utils.py
@@ -28,9 +28,9 @@ class MetaNameSerializer(Serializer):
 class TypeCreateSerializer(Serializer):
     """Types of an object that can be created"""
 
-    name = CharField(read_only=True)
-    description = CharField(read_only=True)
-    link = CharField(read_only=True)
+    name = CharField(required=True)
+    description = CharField(required=True)
+    link = CharField(required=True)
 
     def create(self, validated_data: dict) -> Model:
         raise NotImplementedError
diff --git a/authentik/core/templates/login/base_full.html b/authentik/core/templates/login/base_full.html
index 6f58568d6..22c343ea9 100644
--- a/authentik/core/templates/login/base_full.html
+++ b/authentik/core/templates/login/base_full.html
@@ -16,6 +16,16 @@
 
 {% block body %}
 <div class="pf-c-background-image">
+    <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
+        <filter id="image_overlay">
+            <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
+                <feFuncR type="table" tableValues="0.0086274509803922 0.63921568627451"></feFuncR>
+                <feFuncG type="table" tableValues="0.0086274509803922 0.63921568627451"></feFuncG>
+                <feFuncB type="table" tableValues="0.0086274509803922 0.63921568627451"></feFuncB>
+                <feFuncA type="table" tableValues="0 1"></feFuncA>
+            </feComponentTransfer>
+        </filter>
+    </svg>
 </div>
 <ak-message-container></ak-message-container>
 <div class="pf-c-login">
diff --git a/authentik/core/views/user.py b/authentik/core/views/user.py
index 8554a9bc1..60286f2cb 100644
--- a/authentik/core/views/user.py
+++ b/authentik/core/views/user.py
@@ -7,6 +7,7 @@ from django.contrib.auth.mixins import (
 )
 from django.contrib.messages.views import SuccessMessageMixin
 from django.http.response import HttpResponse
+from django.urls import reverse_lazy
 from django.utils.translation import gettext as _
 from django.views.generic import UpdateView
 from django.views.generic.base import TemplateView
@@ -34,7 +35,7 @@ class UserDetailsView(SuccessMessageMixin, LoginRequiredMixin, UpdateView):
     form_class = UserDetailForm
 
     success_message = _("Successfully updated user.")
-    success_url = "/"
+    success_url = reverse_lazy("authentik_core:user-details")
 
     def get_object(self):
         return self.request.user
diff --git a/authentik/events/api/notification.py b/authentik/events/api/notification.py
index 9e7aef716..9908533ca 100644
--- a/authentik/events/api/notification.py
+++ b/authentik/events/api/notification.py
@@ -13,7 +13,7 @@ class NotificationSerializer(ModelSerializer):
 
     body = ReadOnlyField()
     severity = ReadOnlyField()
-    event = EventSerializer()
+    event = EventSerializer(required=False)
 
     class Meta:
 
diff --git a/authentik/events/api/notification_transport.py b/authentik/events/api/notification_transport.py
index b715285ad..e951f2a9f 100644
--- a/authentik/events/api/notification_transport.py
+++ b/authentik/events/api/notification_transport.py
@@ -1,11 +1,12 @@
 """NotificationTransport API Views"""
 from django.http.response import Http404
+from drf_yasg2.utils import no_body, swagger_auto_schema
 from guardian.shortcuts import get_objects_for_user
 from rest_framework.decorators import action
-from rest_framework.fields import SerializerMethodField
+from rest_framework.fields import CharField, ListField, SerializerMethodField
 from rest_framework.request import Request
 from rest_framework.response import Response
-from rest_framework.serializers import ModelSerializer
+from rest_framework.serializers import ModelSerializer, Serializer
 from rest_framework.viewsets import ModelViewSet
 
 from authentik.events.models import (
@@ -38,12 +39,28 @@ class NotificationTransportSerializer(ModelSerializer):
         ]
 
 
+class NotificationTransportTestSerializer(Serializer):
+    """Notification test serializer"""
+
+    messages = ListField(child=CharField())
+
+    def create(self, request: Request) -> Response:
+        raise NotImplementedError
+
+    def update(self, request: Request) -> Response:
+        raise NotImplementedError
+
+
 class NotificationTransportViewSet(ModelViewSet):
     """NotificationTransport Viewset"""
 
     queryset = NotificationTransport.objects.all()
     serializer_class = NotificationTransportSerializer
 
+    @swagger_auto_schema(
+        responses={200: NotificationTransportTestSerializer(many=False)},
+        request_body=no_body,
+    )
     @action(detail=True, methods=["post"])
     # pylint: disable=invalid-name
     def test(self, request: Request, pk=None) -> Response:
@@ -61,6 +78,10 @@ class NotificationTransportViewSet(ModelViewSet):
             user=request.user,
         )
         try:
-            return Response(transport.send(notification))
+            response = NotificationTransportTestSerializer(
+                data={"messages": transport.send(notification)}
+            )
+            response.is_valid()
+            return Response(response.data)
         except NotificationTransportError as exc:
             return Response(str(exc.__cause__ or None), status=503)
diff --git a/authentik/flows/challenge.py b/authentik/flows/challenge.py
index 9f45da474..0abf925d3 100644
--- a/authentik/flows/challenge.py
+++ b/authentik/flows/challenge.py
@@ -38,7 +38,9 @@ class Challenge(Serializer):
     """Challenge that gets sent to the client based on which stage
     is currently active"""
 
-    type = ChoiceField(choices=list(ChallengeTypes))
+    type = ChoiceField(
+        choices=[(x.name, x.name) for x in ChallengeTypes],
+    )
     component = CharField(required=False)
     title = CharField(required=False)
 
@@ -90,7 +92,7 @@ class ChallengeResponse(Serializer):
 
     stage: Optional["StageView"]
 
-    def __init__(self, instance, data, **kwargs):
+    def __init__(self, instance=None, data=None, **kwargs):
         self.stage = kwargs.pop("stage", None)
         super().__init__(instance=instance, data=data, **kwargs)
 
diff --git a/authentik/flows/stage.py b/authentik/flows/stage.py
index c55524191..59265d8aa 100644
--- a/authentik/flows/stage.py
+++ b/authentik/flows/stage.py
@@ -4,6 +4,7 @@ from django.http import HttpRequest
 from django.http.request import QueryDict
 from django.http.response import HttpResponse
 from django.views.generic.base import View
+from rest_framework.request import Request
 from structlog.stdlib import get_logger
 
 from authentik.core.models import DEFAULT_AVATAR, User
@@ -67,9 +68,9 @@ class ChallengeStageView(StageView):
         return HttpChallengeResponse(challenge)
 
     # pylint: disable=unused-argument
-    def post(self, request: HttpRequest, *args, **kwargs) -> HttpResponse:
+    def post(self, request: Request, *args, **kwargs) -> HttpResponse:
         """Handle challenge response"""
-        challenge: ChallengeResponse = self.get_response_instance(data=request.POST)
+        challenge: ChallengeResponse = self.get_response_instance(data=request.data)
         if not challenge.is_valid():
             return self.challenge_invalid(challenge)
         return self.challenge_valid(challenge)
diff --git a/authentik/flows/views.py b/authentik/flows/views.py
index 626dfe005..c44d1708f 100644
--- a/authentik/flows/views.py
+++ b/authentik/flows/views.py
@@ -9,11 +9,16 @@ from django.template.response import TemplateResponse
 from django.utils.decorators import method_decorator
 from django.views.decorators.clickjacking import xframe_options_sameorigin
 from django.views.generic import TemplateView, View
+from drf_yasg2.utils import no_body, swagger_auto_schema
+from rest_framework.permissions import AllowAny
+from rest_framework.views import APIView
 from structlog.stdlib import BoundLogger, get_logger
 
 from authentik.core.models import USER_ATTRIBUTE_DEBUG
 from authentik.events.models import cleanse_dict
 from authentik.flows.challenge import (
+    Challenge,
+    ChallengeResponse,
     ChallengeTypes,
     HttpChallengeResponse,
     RedirectChallenge,
@@ -40,9 +45,11 @@ SESSION_KEY_GET = "authentik_flows_get"
 
 
 @method_decorator(xframe_options_sameorigin, name="dispatch")
-class FlowExecutorView(View):
+class FlowExecutorView(APIView):
     """Stage 1 Flow executor, passing requests to Stage Views"""
 
+    permission_classes = [AllowAny]
+
     flow: Flow
 
     plan: Optional[FlowPlan] = None
@@ -113,8 +120,13 @@ class FlowExecutorView(View):
         self.current_stage_view.request = request
         return super().dispatch(request)
 
+    @swagger_auto_schema(
+        responses={200: Challenge()},
+        request_body=no_body,
+        operation_id="flows_executor_get",
+    )
     def get(self, request: HttpRequest, *args, **kwargs) -> HttpResponse:
-        """pass get request to current stage"""
+        """Get the next pending challenge from the currently active flow."""
         self._logger.debug(
             "f(exec): Passing GET",
             view_class=class_to_path(self.current_stage_view.__class__),
@@ -127,8 +139,13 @@ class FlowExecutorView(View):
             self._logger.exception(exc)
             return to_stage_response(request, FlowErrorResponse(request, exc))
 
+    @swagger_auto_schema(
+        responses={200: Challenge()},
+        request_body=ChallengeResponse(),
+        operation_id="flows_executor_solve",
+    )
     def post(self, request: HttpRequest, *args, **kwargs) -> HttpResponse:
-        """pass post request to current stage"""
+        """Solve the previously retrieved challenge and advanced to the next stage."""
         self._logger.debug(
             "f(exec): Passing POST",
             view_class=class_to_path(self.current_stage_view.__class__),
@@ -175,8 +192,10 @@ class FlowExecutorView(View):
                 "f(exec): Continuing with next stage",
                 reamining=len(self.plan.stages),
             )
+            kwargs = self.kwargs
+            kwargs.update({"flow_slug": self.flow.slug})
             return redirect_with_qs(
-                "authentik_api:flow-executor", self.request.GET, **self.kwargs
+                "authentik_api:flow-executor", self.request.GET, **kwargs
             )
         # User passed all stages
         self._logger.debug(
diff --git a/authentik/providers/saml/views/flows.py b/authentik/providers/saml/views/flows.py
index 2cd2758bc..eb03eb9c8 100644
--- a/authentik/providers/saml/views/flows.py
+++ b/authentik/providers/saml/views/flows.py
@@ -74,7 +74,7 @@ class SAMLFlowFinalView(ChallengeStageView):
             return super().get(
                 self.request,
                 **{
-                    "type": ChallengeTypes.native,
+                    "type": ChallengeTypes.native.value,
                     "component": "ak-stage-autosubmit",
                     "title": "Redirecting to %(app)s..." % {"app": application.name},
                     "url": provider.acs_url,
diff --git a/authentik/stages/authenticator_static/stage.py b/authentik/stages/authenticator_static/stage.py
index caa5ad6d2..f0a834464 100644
--- a/authentik/stages/authenticator_static/stage.py
+++ b/authentik/stages/authenticator_static/stage.py
@@ -31,7 +31,7 @@ class AuthenticatorStaticStageView(ChallengeStageView):
         tokens: list[StaticToken] = self.request.session[SESSION_STATIC_TOKENS]
         return AuthenticatorStaticChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "ak-stage-authenticator-static",
                 "codes": [token.token for token in tokens],
             }
diff --git a/authentik/stages/authenticator_totp/stage.py b/authentik/stages/authenticator_totp/stage.py
index 7c51e4993..060b1b6f8 100644
--- a/authentik/stages/authenticator_totp/stage.py
+++ b/authentik/stages/authenticator_totp/stage.py
@@ -51,7 +51,7 @@ class AuthenticatorTOTPStageView(ChallengeStageView):
         device: TOTPDevice = self.request.session[SESSION_TOTP_DEVICE]
         return AuthenticatorTOTPChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "ak-stage-authenticator-totp",
                 "config_url": device.config_url,
             }
diff --git a/authentik/stages/authenticator_validate/stage.py b/authentik/stages/authenticator_validate/stage.py
index a1facfa3f..4e2e9f86a 100644
--- a/authentik/stages/authenticator_validate/stage.py
+++ b/authentik/stages/authenticator_validate/stage.py
@@ -145,7 +145,7 @@ class AuthenticatorValidateStageView(ChallengeStageView):
         challenges = self.request.session["device_challenges"]
         return AuthenticatorChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "ak-stage-authenticator-validate",
                 "device_challenges": challenges,
             }
diff --git a/authentik/stages/authenticator_webauthn/stage.py b/authentik/stages/authenticator_webauthn/stage.py
index 71218b5f8..f4d20b7d8 100644
--- a/authentik/stages/authenticator_webauthn/stage.py
+++ b/authentik/stages/authenticator_webauthn/stage.py
@@ -122,7 +122,7 @@ class AuthenticatorWebAuthnStageView(ChallengeStageView):
 
         return AuthenticatorWebAuthnChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "ak-stage-authenticator-webauthn",
                 "registration": make_credential_options.registration_dict,
             }
diff --git a/authentik/stages/captcha/stage.py b/authentik/stages/captcha/stage.py
index 4254c8b94..8b26a054c 100644
--- a/authentik/stages/captcha/stage.py
+++ b/authentik/stages/captcha/stage.py
@@ -63,7 +63,7 @@ class CaptchaStageView(ChallengeStageView):
     def get_challenge(self, *args, **kwargs) -> Challenge:
         return CaptchaChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "ak-stage-captcha",
                 "site_key": self.executor.current_stage.public_key,
             }
diff --git a/authentik/stages/consent/stage.py b/authentik/stages/consent/stage.py
index 6b30cd078..c7d72ae31 100644
--- a/authentik/stages/consent/stage.py
+++ b/authentik/stages/consent/stage.py
@@ -38,7 +38,7 @@ class ConsentStageView(ChallengeStageView):
     def get_challenge(self) -> Challenge:
         challenge = ConsentChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "ak-stage-consent",
             }
         )
diff --git a/authentik/stages/dummy/stage.py b/authentik/stages/dummy/stage.py
index cf280d444..10f5ad3ca 100644
--- a/authentik/stages/dummy/stage.py
+++ b/authentik/stages/dummy/stage.py
@@ -24,7 +24,7 @@ class DummyStageView(ChallengeStageView):
     def get_challenge(self, *args, **kwargs) -> Challenge:
         return DummyChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "",
                 "title": self.executor.current_stage.name,
             }
diff --git a/authentik/stages/email/stage.py b/authentik/stages/email/stage.py
index 7c398ccb0..de3b2d394 100644
--- a/authentik/stages/email/stage.py
+++ b/authentik/stages/email/stage.py
@@ -94,7 +94,7 @@ class EmailStageView(ChallengeStageView):
 
     def get_challenge(self) -> Challenge:
         challenge = EmailChallenge(
-            data={"type": ChallengeTypes.native, "component": "ak-stage-email"}
+            data={"type": ChallengeTypes.native.value, "component": "ak-stage-email"}
         )
         return challenge
 
diff --git a/authentik/stages/identification/stage.py b/authentik/stages/identification/stage.py
index 61f99cb3b..a9365f515 100644
--- a/authentik/stages/identification/stage.py
+++ b/authentik/stages/identification/stage.py
@@ -78,7 +78,7 @@ class IdentificationStageView(ChallengeStageView):
         current_stage: IdentificationStage = self.executor.current_stage
         challenge = IdentificationChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "ak-stage-identification",
                 "primary_action": _("Log in"),
                 "input_type": "text",
diff --git a/authentik/stages/password/stage.py b/authentik/stages/password/stage.py
index b575c99f3..497c7d32c 100644
--- a/authentik/stages/password/stage.py
+++ b/authentik/stages/password/stage.py
@@ -78,7 +78,7 @@ class PasswordStageView(ChallengeStageView):
     def get_challenge(self) -> Challenge:
         challenge = PasswordChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "ak-stage-password",
             }
         )
diff --git a/authentik/stages/prompt/stage.py b/authentik/stages/prompt/stage.py
index d6ca1e65b..6d895e659 100644
--- a/authentik/stages/prompt/stage.py
+++ b/authentik/stages/prompt/stage.py
@@ -164,7 +164,7 @@ class PromptStageView(ChallengeStageView):
         fields = list(self.executor.current_stage.fields.all().order_by("order"))
         challenge = PromptChallenge(
             data={
-                "type": ChallengeTypes.native,
+                "type": ChallengeTypes.native.value,
                 "component": "ak-stage-prompt",
                 "fields": [PromptSerializer(field).data for field in fields],
             },
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index c38dc075e..596ce8461 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -279,6 +279,7 @@ stages:
             displayName: Build static files for e2e
             inputs:
               script: |
+                docker run --rm -v $(pwd):/local openapitools/openapi-generator-cli generate -i /local/swagger.yaml -g typescript-fetch -o /local/web/src/api --additional-properties=typescriptThreePlus=true
                 cd web
                 npm i
                 npm run build
diff --git a/outpost/azure-pipelines.yml b/outpost/azure-pipelines.yml
index 6dfb8a5d9..5e7a5d9b8 100644
--- a/outpost/azure-pipelines.yml
+++ b/outpost/azure-pipelines.yml
@@ -33,7 +33,7 @@ stages:
           - task: PublishPipelineArtifact@1
             inputs:
               targetPath: 'outpost/pkg/'
-              artifact: 'swagger_client'
+              artifact: 'go_swagger_client'
               publishLocation: 'pipeline'
   - stage: lint
     jobs:
@@ -51,7 +51,7 @@ stages:
           - task: DownloadPipelineArtifact@2
             inputs:
               buildType: 'current'
-              artifactName: 'swagger_client'
+              artifactName: 'go_swagger_client'
               path: "outpost/pkg/"
           - task: CmdLine@2
             inputs:
@@ -70,7 +70,7 @@ stages:
           - task: DownloadPipelineArtifact@2
             inputs:
               buildType: 'current'
-              artifactName: 'swagger_client'
+              artifactName: 'go_swagger_client'
               path: "outpost/pkg/"
           - task: Go@0
             inputs:
@@ -89,7 +89,7 @@ stages:
           - task: DownloadPipelineArtifact@2
             inputs:
               buildType: 'current'
-              artifactName: 'swagger_client'
+              artifactName: 'go_swagger_client'
               path: "outpost/pkg/"
           - task: Bash@3
             inputs:
diff --git a/swagger.yaml b/swagger.yaml
index a71fea5e9..ffef5e83a 100755
--- a/swagger.yaml
+++ b/swagger.yaml
@@ -29,10 +29,7 @@ paths:
         '200':
           description: Login Metrics per 1h
           schema:
-            description: ''
-            type: array
-            items:
-              $ref: '#/definitions/AdministrationMetrics'
+            $ref: '#/definitions/LoginMetrics'
       tags:
         - admin
     parameters: []
@@ -318,9 +315,12 @@ paths:
       parameters: []
       responses:
         '200':
-          description: ''
+          description: Coordinates for diagrams
           schema:
-            $ref: '#/definitions/Application'
+            description: ''
+            type: array
+            items:
+              $ref: '#/definitions/Coordinate'
       tags:
         - core
     parameters:
@@ -1620,17 +1620,12 @@ paths:
       description: |-
         Send example notification using selected transport. Requires
         Modify permissions.
-      parameters:
-        - name: data
-          in: body
-          required: true
-          schema:
-            $ref: '#/definitions/NotificationTransport'
+      parameters: []
       responses:
-        '201':
-          description: ''
+        '200':
+          description: Notification test serializer
           schema:
-            $ref: '#/definitions/NotificationTransport'
+            $ref: '#/definitions/NotificationTransportTest'
       tags:
         - events
     parameters:
@@ -1822,6 +1817,42 @@ paths:
         required: true
         type: string
         format: uuid
+  /flows/executor/{flow_slug}/:
+    get:
+      operationId: flows_executor_get
+      description: Get the next pending challenge from the currently active flow.
+      parameters: []
+      responses:
+        '200':
+          description: Challenge that gets sent to the client based on which stage
+            is currently active
+          schema:
+            $ref: '#/definitions/Challenge'
+      tags:
+        - flows
+    post:
+      operationId: flows_executor_solve
+      description: Solve the previously retrieved challenge and advanced to the next
+        stage.
+      parameters:
+        - name: data
+          in: body
+          required: true
+          schema:
+            $ref: '#/definitions/ChallengeResponse'
+      responses:
+        '200':
+          description: Challenge that gets sent to the client based on which stage
+            is currently active
+          schema:
+            $ref: '#/definitions/Challenge'
+      tags:
+        - flows
+    parameters:
+      - name: flow_slug
+        in: path
+        required: true
+        type: string
   /flows/instances/:
     get:
       operationId: flows_instances_list
@@ -9296,17 +9327,33 @@ paths:
         type: string
         format: uuid
 definitions:
-  AdministrationMetrics:
+  Coordinate:
+    description: Coordinates for diagrams
+    type: object
+    properties:
+      x_cord:
+        title: X cord
+        type: integer
+        readOnly: true
+      y_cord:
+        title: Y cord
+        type: integer
+        readOnly: true
+  LoginMetrics:
     description: Login Metrics per 1h
     type: object
     properties:
       logins_per_1h:
-        title: Logins per 1h
-        type: string
+        description: ''
+        type: array
+        items:
+          $ref: '#/definitions/Coordinate'
         readOnly: true
       logins_failed_per_1h:
-        title: Logins failed per 1h
-        type: string
+        description: ''
+        type: array
+        items:
+          $ref: '#/definitions/Coordinate'
         readOnly: true
   Task:
     description: Serialize TaskInfo and TaskResult
@@ -9332,11 +9379,11 @@ definitions:
         format: date-time
       status:
         title: Status
-        type: integer
+        type: string
         enum:
-          - 1
-          - 2
-          - 4
+          - SUCCESSFUL
+          - WARNING
+          - ERROR
       messages:
         description: ''
         type: array
@@ -9728,8 +9775,6 @@ definitions:
         type: integer
   Notification:
     description: Notification Serializer
-    required:
-      - event
     type: object
     properties:
       pk:
@@ -9897,6 +9942,18 @@ definitions:
       webhook_url:
         title: Webhook url
         type: string
+  NotificationTransportTest:
+    description: Notification test serializer
+    required:
+      - messages
+    type: object
+    properties:
+      messages:
+        description: ''
+        type: array
+        items:
+          type: string
+          minLength: 1
   Flow:
     description: Flow Serializer
     required:
@@ -10050,6 +10107,55 @@ definitions:
           format: uuid
         readOnly: true
         uniqueItems: true
+  ErrorDetail:
+    description: Serializer for rest_framework's error messages
+    required:
+      - string
+      - code
+    type: object
+    properties:
+      string:
+        title: String
+        type: string
+        minLength: 1
+      code:
+        title: Code
+        type: string
+        minLength: 1
+  Challenge:
+    description: Challenge that gets sent to the client based on which stage is currently
+      active
+    required:
+      - type
+    type: object
+    properties:
+      type:
+        title: Type
+        type: string
+        enum:
+          - native
+          - shell
+          - redirect
+      component:
+        title: Component
+        type: string
+        minLength: 1
+      title:
+        title: Title
+        type: string
+        minLength: 1
+      response_errors:
+        title: Response errors
+        type: object
+        additionalProperties:
+          description: ''
+          type: array
+          items:
+            $ref: '#/definitions/ErrorDetail'
+  ChallengeResponse:
+    description: Base class for all challenge responses
+    type: object
+    properties: {}
   Cache:
     description: Generic cache stats for an object
     type: object
@@ -10303,22 +10409,23 @@ definitions:
         readOnly: true
   TypeCreate:
     description: Types of an object that can be created
+    required:
+      - name
+      - description
+      - link
     type: object
     properties:
       name:
         title: Name
         type: string
-        readOnly: true
         minLength: 1
       description:
         title: Description
         type: string
-        readOnly: true
         minLength: 1
       link:
         title: Link
         type: string
-        readOnly: true
         minLength: 1
   ServiceConnectionState:
     description: Serializer for Service connection state
diff --git a/web/.eslintignore b/web/.eslintignore
index 537b7fae4..0799251cf 100644
--- a/web/.eslintignore
+++ b/web/.eslintignore
@@ -4,3 +4,8 @@ node_modules
 dist
 # don't lint nyc coverage output
 coverage
+# don't lint generated code
+src/api/apis
+src/api/models
+src/api/index.ts
+src/api/runtime.ts
diff --git a/web/azure-pipelines.yml b/web/azure-pipelines.yml
index b09e9fe58..5275b7e3d 100644
--- a/web/azure-pipelines.yml
+++ b/web/azure-pipelines.yml
@@ -10,6 +10,25 @@ variables:
     branchName: ${{ replace(variables['Build.SourceBranchName'], 'refs/heads/', '') }}
 
 stages:
+  - stage: generate
+    jobs:
+      - job: swagger_generate
+        pool:
+          vmImage: 'ubuntu-latest'
+        steps:
+          - task: NodeTool@0
+            inputs:
+              versionSpec: '12.x'
+            displayName: 'Install Node.js'
+          - task: CmdLine@2
+            inputs:
+              script: |
+                docker run --rm -v $(pwd):/local openapitools/openapi-generator-cli generate -i /local/swagger.yaml -g typescript-fetch -o /local/web/src/api --additional-properties=typescriptThreePlus=true
+          - task: PublishPipelineArtifact@1
+            inputs:
+              targetPath: 'web/src/api/'
+              artifact: 'ts_swagger_client'
+              publishLocation: 'pipeline'
   - stage: lint
     jobs:
       - job: eslint
@@ -20,6 +39,11 @@ stages:
             inputs:
               versionSpec: '12.x'
             displayName: 'Install Node.js'
+          - task: DownloadPipelineArtifact@2
+            inputs:
+              buildType: 'current'
+              artifactName: 'ts_swagger_client'
+              path: "web/src/api/"
           - task: Npm@1
             inputs:
               command: 'install'
@@ -37,6 +61,11 @@ stages:
             inputs:
               versionSpec: '12.x'
             displayName: 'Install Node.js'
+          - task: DownloadPipelineArtifact@2
+            inputs:
+              buildType: 'current'
+              artifactName: 'ts_swagger_client'
+              path: "web/src/api/"
           - task: Npm@1
             inputs:
               command: 'install'
@@ -56,6 +85,11 @@ stages:
             inputs:
               versionSpec: '12.x'
             displayName: 'Install Node.js'
+          - task: DownloadPipelineArtifact@2
+            inputs:
+              buildType: 'current'
+              artifactName: 'ts_swagger_client'
+              path: "web/src/api/"
           - task: Npm@1
             inputs:
               command: 'install'
@@ -71,16 +105,21 @@ stages:
         pool:
           vmImage: 'ubuntu-latest'
         steps:
-        - task: Bash@3
-          inputs:
-            targetType: 'inline'
-            script: |
-              python ./scripts/az_do_set_branch.py
-        - task: Docker@2
-          inputs:
-            containerRegistry: 'beryjuorg-harbor'
-            repository: 'authentik/static'
-            command: 'buildAndPush'
-            Dockerfile: 'web/Dockerfile'
-            tags: "gh-$(branchName)"
-            buildContext: 'web/'
+          - task: DownloadPipelineArtifact@2
+            inputs:
+              buildType: 'current'
+              artifactName: 'ts_swagger_client'
+              path: "web/src/api/"
+          - task: Bash@3
+            inputs:
+              targetType: 'inline'
+              script: |
+                python ./scripts/az_do_set_branch.py
+          - task: Docker@2
+            inputs:
+              containerRegistry: 'beryjuorg-harbor'
+              repository: 'authentik/static'
+              command: 'buildAndPush'
+              Dockerfile: 'web/Dockerfile'
+              tags: "gh-$(branchName)"
+              buildContext: 'web/'
diff --git a/web/src/api/.gitignore b/web/src/api/.gitignore
new file mode 100644
index 000000000..d973fa4fa
--- /dev/null
+++ b/web/src/api/.gitignore
@@ -0,0 +1,4 @@
+apis/**
+models/**
+index.ts
+runtime.ts
diff --git a/web/src/api/.openapi-generator-ignore b/web/src/api/.openapi-generator-ignore
new file mode 100644
index 000000000..7484ee590
--- /dev/null
+++ b/web/src/api/.openapi-generator-ignore
@@ -0,0 +1,23 @@
+# OpenAPI Generator Ignore
+# Generated by openapi-generator https://github.com/openapitools/openapi-generator
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md
diff --git a/web/src/api/.openapi-generator/FILES b/web/src/api/.openapi-generator/FILES
new file mode 100644
index 000000000..e6cc1a8c5
--- /dev/null
+++ b/web/src/api/.openapi-generator/FILES
@@ -0,0 +1,167 @@
+apis/AdminApi.ts
+apis/CoreApi.ts
+apis/CryptoApi.ts
+apis/EventsApi.ts
+apis/FlowsApi.ts
+apis/OutpostsApi.ts
+apis/PoliciesApi.ts
+apis/PropertymappingsApi.ts
+apis/ProvidersApi.ts
+apis/RootApi.ts
+apis/SourcesApi.ts
+apis/StagesApi.ts
+apis/index.ts
+index.ts
+models/Application.ts
+models/AuthenticateWebAuthnStage.ts
+models/AuthenticatorStaticStage.ts
+models/AuthenticatorTOTPStage.ts
+models/AuthenticatorValidateStage.ts
+models/Cache.ts
+models/CaptchaStage.ts
+models/CertificateData.ts
+models/CertificateKeyPair.ts
+models/Challenge.ts
+models/Config.ts
+models/ConsentStage.ts
+models/Coordinate.ts
+models/DenyStage.ts
+models/DockerServiceConnection.ts
+models/DummyPolicy.ts
+models/DummyStage.ts
+models/EmailStage.ts
+models/ErrorDetail.ts
+models/Event.ts
+models/EventMatcherPolicy.ts
+models/EventTopPerUser.ts
+models/ExpressionPolicy.ts
+models/Flow.ts
+models/FlowDiagram.ts
+models/FlowStageBinding.ts
+models/Group.ts
+models/GroupMembershipPolicy.ts
+models/HaveIBeenPwendPolicy.ts
+models/IPReputation.ts
+models/IdentificationStage.ts
+models/InlineResponse200.ts
+models/InlineResponse2001.ts
+models/InlineResponse20010.ts
+models/InlineResponse20011.ts
+models/InlineResponse20012.ts
+models/InlineResponse20013.ts
+models/InlineResponse20014.ts
+models/InlineResponse20015.ts
+models/InlineResponse20016.ts
+models/InlineResponse20017.ts
+models/InlineResponse20018.ts
+models/InlineResponse20019.ts
+models/InlineResponse2002.ts
+models/InlineResponse20020.ts
+models/InlineResponse20021.ts
+models/InlineResponse20022.ts
+models/InlineResponse20023.ts
+models/InlineResponse20024.ts
+models/InlineResponse20025.ts
+models/InlineResponse20026.ts
+models/InlineResponse20027.ts
+models/InlineResponse20028.ts
+models/InlineResponse20029.ts
+models/InlineResponse2003.ts
+models/InlineResponse20030.ts
+models/InlineResponse20031.ts
+models/InlineResponse20032.ts
+models/InlineResponse20033.ts
+models/InlineResponse20034.ts
+models/InlineResponse20035.ts
+models/InlineResponse20036.ts
+models/InlineResponse20037.ts
+models/InlineResponse20038.ts
+models/InlineResponse20039.ts
+models/InlineResponse2004.ts
+models/InlineResponse20040.ts
+models/InlineResponse20041.ts
+models/InlineResponse20042.ts
+models/InlineResponse20043.ts
+models/InlineResponse20044.ts
+models/InlineResponse20045.ts
+models/InlineResponse20046.ts
+models/InlineResponse20047.ts
+models/InlineResponse20048.ts
+models/InlineResponse20049.ts
+models/InlineResponse2005.ts
+models/InlineResponse20050.ts
+models/InlineResponse20051.ts
+models/InlineResponse20052.ts
+models/InlineResponse20053.ts
+models/InlineResponse20054.ts
+models/InlineResponse20055.ts
+models/InlineResponse20056.ts
+models/InlineResponse20057.ts
+models/InlineResponse20058.ts
+models/InlineResponse20059.ts
+models/InlineResponse2006.ts
+models/InlineResponse20060.ts
+models/InlineResponse2007.ts
+models/InlineResponse2008.ts
+models/InlineResponse2009.ts
+models/InlineResponse200Pagination.ts
+models/Invitation.ts
+models/InvitationStage.ts
+models/KubernetesServiceConnection.ts
+models/LDAPPropertyMapping.ts
+models/LDAPSource.ts
+models/LDAPSourceSyncStatus.ts
+models/LoginMetrics.ts
+models/Notification.ts
+models/NotificationRule.ts
+models/NotificationRuleGroup.ts
+models/NotificationRuleGroupParent.ts
+models/NotificationRuleTransports.ts
+models/NotificationTransport.ts
+models/NotificationTransportTest.ts
+models/OAuth2Provider.ts
+models/OAuth2ProviderSetupURLs.ts
+models/OAuthSource.ts
+models/OpenIDConnectConfiguration.ts
+models/Outpost.ts
+models/OutpostHealth.ts
+models/PasswordExpiryPolicy.ts
+models/PasswordPolicy.ts
+models/PasswordStage.ts
+models/Policy.ts
+models/PolicyBinding.ts
+models/PolicyBindingPolicy.ts
+models/PolicyBindingUser.ts
+models/PolicyBindingUserAkGroups.ts
+models/PolicyBindingUserGroups.ts
+models/PolicyBindingUserSources.ts
+models/PolicyBindingUserUserPermissions.ts
+models/Prompt.ts
+models/PromptStage.ts
+models/PropertyMapping.ts
+models/Provider.ts
+models/ProxyOutpostConfig.ts
+models/ProxyProvider.ts
+models/ReputationPolicy.ts
+models/SAMLMetadata.ts
+models/SAMLPropertyMapping.ts
+models/SAMLProvider.ts
+models/SAMLSource.ts
+models/ScopeMapping.ts
+models/ServiceConnection.ts
+models/ServiceConnectionState.ts
+models/Source.ts
+models/Stage.ts
+models/Task.ts
+models/Token.ts
+models/TokenView.ts
+models/TypeCreate.ts
+models/User.ts
+models/UserDeleteStage.ts
+models/UserLoginStage.ts
+models/UserLogoutStage.ts
+models/UserReputation.ts
+models/UserWriteStage.ts
+models/Version.ts
+models/index.ts
+runtime.ts
diff --git a/web/src/api/.openapi-generator/VERSION b/web/src/api/.openapi-generator/VERSION
new file mode 100644
index 000000000..c30f0ec2b
--- /dev/null
+++ b/web/src/api/.openapi-generator/VERSION
@@ -0,0 +1 @@
+5.1.0-SNAPSHOT
\ No newline at end of file
diff --git a/web/src/api/Applications.ts b/web/src/api/Applications.ts
deleted file mode 100644
index cf10fdca0..000000000
--- a/web/src/api/Applications.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { DefaultClient, AKResponse, QueryArguments } from "./Client";
-import { Provider } from "./Providers";
-
-export class Application {
-    pk: string;
-    name: string;
-    slug: string;
-    provider?: Provider;
-
-    launch_url: string;
-    meta_launch_url: string;
-    meta_icon: string;
-    meta_description: string;
-    meta_publisher: string;
-    policies: string[];
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(slug: string): Promise<Application> {
-        return DefaultClient.fetch<Application>(["core", "applications", slug]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Application>> {
-        return DefaultClient.fetch<AKResponse<Application>>(["core", "applications"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/applications/${rest}`;
-    }
-}
diff --git a/web/src/api/CertificateKeyPair.ts b/web/src/api/CertificateKeyPair.ts
deleted file mode 100644
index 4681f8c0d..000000000
--- a/web/src/api/CertificateKeyPair.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { DefaultClient, AKResponse, QueryArguments } from "./Client";
-
-export class CertificateKeyPair {
-    pk: string;
-    name: string;
-    fingerprint: string;
-    cert_expiry: number;
-    cert_subject: string;
-    private_key_available: boolean;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(slug: string): Promise<CertificateKeyPair> {
-        return DefaultClient.fetch<CertificateKeyPair>(["crypto", "certificatekeypairs", slug]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<CertificateKeyPair>> {
-        return DefaultClient.fetch<AKResponse<CertificateKeyPair>>(["crypto", "certificatekeypairs"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/crypto/certificates/${rest}`;
-    }
-}
diff --git a/web/src/api/Client.ts b/web/src/api/Client.ts
index 6f6359d69..c893535d4 100644
--- a/web/src/api/Client.ts
+++ b/web/src/api/Client.ts
@@ -1,10 +1,3 @@
-import { gettext } from "django";
-import { showMessage } from "../elements/messages/MessageContainer";
-import { getCookie } from "../utils";
-import { NotFoundError, RequestError } from "./Error";
-
-export const VERSION = "v2beta";
-
 export interface QueryArguments {
     page?: number;
     page_size?: number;
@@ -20,97 +13,20 @@ export interface BaseInheritanceModel {
 
 }
 
-export class Client {
-    makeUrl(url: string[], query?: QueryArguments): string {
-        let builtUrl = `/api/${VERSION}/${url.join("/")}/`;
-        if (query) {
-            const queryString = Object.keys(query)
-                .filter((k) => query[k] !== null)
-                // we default to a string in query[k] as we've filtered out the null above
-                // this is just for type-hinting
-                .map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(query[k] || ""))
-                .join("&");
-            builtUrl += `?${queryString}`;
-        }
-        return builtUrl;
-    }
-
-    fetch<T>(url: string[], query?: QueryArguments): Promise<T> {
-        const finalUrl = this.makeUrl(url, query);
-        return fetch(finalUrl)
-            .then((r) => {
-                if (r.status > 300) {
-                    switch (r.status) {
-                    case 404:
-                        throw new NotFoundError(`URL ${finalUrl} not found`);
-                    default:
-                        throw new RequestError(r.statusText);
-                    }
-                }
-                return r;
-            })
-            .catch((e) => {
-                showMessage({
-                    level_tag: "error",
-                    message: gettext(`Unexpected error while fetching: ${e.toString()}`),
-                });
-                return e;
-            })
-            .then((r) => r.json())
-            .then((r) => <T>r);
-    }
-
-    private writeRequest<T>(url: string[], body: T, method: string, query?: QueryArguments): Promise<T> {
-        const finalUrl = this.makeUrl(url, query);
-        const csrftoken = getCookie("authentik_csrf");
-        const request = new Request(finalUrl, {
-            headers: {
-                "Accept": "application/json",
-                "Content-Type": "application/json",
-                "X-CSRFToken": csrftoken,
-            },
-        });
-        return fetch(request, {
-            method: method,
-            mode: "same-origin",
-            body: JSON.stringify(body),
-        })
-            .then((r) => {
-                if (r.status > 300) {
-                    switch (r.status) {
-                    case 404:
-                        throw new NotFoundError(`URL ${finalUrl} not found`);
-                    default:
-                        throw new RequestError(r.statusText);
-                    }
-                }
-                return r;
-            })
-            .then((r) => r.json())
-            .then((r) => <T>r);
-    }
-
-    update<T>(url: string[], body: T, query?: QueryArguments): Promise<T> {
-        return this.writeRequest(url, body, "PATCH", query);
-    }
-}
-
-export const DefaultClient = new Client();
-
-export interface PBPagination {
+export interface AKPagination {
     next?: number;
     previous?: number;
 
     count: number;
     current: number;
-    total_pages: number;
+    totalPages: number;
 
-    start_index: number;
-    end_index: number;
+    startIndex: number;
+    endIndex: number;
 }
 
 export interface AKResponse<T> {
-    pagination: PBPagination;
+    pagination: AKPagination;
 
     results: Array<T>;
 }
diff --git a/web/src/api/Config.ts b/web/src/api/Config.ts
index cac6dc067..2d4432d4a 100644
--- a/web/src/api/Config.ts
+++ b/web/src/api/Config.ts
@@ -1,42 +1,39 @@
-import { DefaultClient } from "./Client";
 import * as Sentry from "@sentry/browser";
 import { Integrations } from "@sentry/tracing";
 import { VERSION } from "../constants";
 import { SentryIgnoredError } from "../common/errors";
+import { Configuration } from "./runtime";
+import { RootApi } from "./apis";
+import { Config } from ".";
+import { getCookie } from "../utils";
 
-export class Config {
-    branding_logo: string;
-    branding_title: string;
-
-    error_reporting_enabled: boolean;
-    error_reporting_environment: string;
-    error_reporting_send_pii: boolean;
-
-    constructor() {
-        throw Error();
+export const DEFAULT_CONFIG = new Configuration({
+    basePath: "/api/v2beta",
+    headers: {
+        "X-CSRFToken": getCookie("authentik_csrf"),
     }
+});
 
-    static get(): Promise<Config> {
-        return DefaultClient.fetch<Config>(["root", "config"]).then((config) => {
-            if (config.error_reporting_enabled) {
-                Sentry.init({
-                    dsn: "https://a579bb09306d4f8b8d8847c052d3a1d3@sentry.beryju.org/8",
-                    release: `authentik@${VERSION}`,
-                    integrations: [
-                        new Integrations.BrowserTracing(),
-                    ],
-                    tracesSampleRate: 0.6,
-                    environment: config.error_reporting_environment,
-                    beforeSend(event: Sentry.Event, hint: Sentry.EventHint) {
-                        if (hint.originalException instanceof SentryIgnoredError) {
-                            return null;
-                        }
-                        return event;
-                    },
-                });
-                console.debug("authentik/config: Sentry enabled.");
-            }
-            return config;
-        });
-    }
+export function configureSentry(): Promise<Config> {
+    return new RootApi(DEFAULT_CONFIG).rootConfigList().then((config) => {
+        if (config.errorReportingEnabled) {
+            Sentry.init({
+                dsn: "https://a579bb09306d4f8b8d8847c052d3a1d3@sentry.beryju.org/8",
+                release: `authentik@${VERSION}`,
+                integrations: [
+                    new Integrations.BrowserTracing(),
+                ],
+                tracesSampleRate: 0.6,
+                environment: config.errorReportingEnvironment,
+                beforeSend(event: Sentry.Event, hint: Sentry.EventHint) {
+                    if (hint.originalException instanceof SentryIgnoredError) {
+                        return null;
+                    }
+                    return event;
+                },
+            });
+            console.debug("authentik/config: Sentry enabled.");
+        }
+        return config;
+    });
 }
diff --git a/web/src/api/EventNotification.ts b/web/src/api/EventNotification.ts
deleted file mode 100644
index c1171e319..000000000
--- a/web/src/api/EventNotification.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { DefaultClient, QueryArguments, AKResponse } from "./Client";
-import { Event } from "./Events";
-
-export class Notification {
-    pk: string;
-    severity: string;
-    body: string;
-    created: string;
-    event?: Event;
-    seen: boolean;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<Notification> {
-        return DefaultClient.fetch<Notification>(["events", "notifications", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Notification>> {
-        return DefaultClient.fetch<AKResponse<Notification>>(["events", "notifications"], filter);
-    }
-
-    static markSeen(pk: string): Promise<{seen: boolean}> {
-        return DefaultClient.update(["events", "notifications", pk], {
-            "seen": true
-        });
-    }
-
-}
diff --git a/web/src/api/EventRules.ts b/web/src/api/EventRules.ts
deleted file mode 100644
index e93e49994..000000000
--- a/web/src/api/EventRules.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { DefaultClient, QueryArguments, AKResponse } from "./Client";
-import { Group } from "./Groups";
-
-export class Rule {
-    pk: string;
-    name: string;
-    transports: string[];
-    severity: string;
-    group?: Group;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<Rule> {
-        return DefaultClient.fetch<Rule>(["events", "rules", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Rule>> {
-        return DefaultClient.fetch<AKResponse<Rule>>(["events", "rules"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/events/rules/${rest}`;
-    }
-}
diff --git a/web/src/api/EventTransports.ts b/web/src/api/EventTransports.ts
deleted file mode 100644
index e40ac1b1b..000000000
--- a/web/src/api/EventTransports.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DefaultClient, QueryArguments, AKResponse } from "./Client";
-
-export class Transport {
-    pk: string;
-    name: string;
-    mode: string;
-    mode_verbose: string;
-    webhook_url: string;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<Transport> {
-        return DefaultClient.fetch<Transport>(["events", "transports", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Transport>> {
-        return DefaultClient.fetch<AKResponse<Transport>>(["events", "transports"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/events/transports/${rest}`;
-    }
-}
diff --git a/web/src/api/Events.ts b/web/src/api/Events.ts
index bc1cafb41..8b021fc20 100644
--- a/web/src/api/Events.ts
+++ b/web/src/api/Events.ts
@@ -1,4 +1,4 @@
-import { DefaultClient, AKResponse, QueryArguments } from "./Client";
+import { Event } from "./models";
 
 export interface EventUser {
     pk: number;
@@ -11,37 +11,7 @@ export interface EventContext {
     [key: string]: EventContext | string | number | string[];
 }
 
-export class Event {
-    pk: string;
+export interface EventWithContext extends Event {
     user: EventUser;
-    action: string;
-    app: string;
     context: EventContext;
-    client_ip: string;
-    created: string;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<Event> {
-        return DefaultClient.fetch<Event>(["events", "events", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Event>> {
-        return DefaultClient.fetch<AKResponse<Event>>(["events", "events"], filter);
-    }
-
-    // events/events/top_per_user/?filter_action=authorize_application
-    static topForUser(action: string): Promise<TopNEvent[]> {
-        return DefaultClient.fetch<TopNEvent[]>(["events", "events", "top_per_user"], {
-            "filter_action": action,
-        });
-    }
-}
-
-export interface TopNEvent {
-    application: { [key: string]: string};
-    counted_events: number;
-    unique_users: number;
 }
diff --git a/web/src/api/Flows.ts b/web/src/api/Flows.ts
index 226fed3a3..91e76f2a1 100644
--- a/web/src/api/Flows.ts
+++ b/web/src/api/Flows.ts
@@ -1,12 +1,4 @@
-import { DefaultClient, AKResponse, QueryArguments, BaseInheritanceModel } from "./Client";
-import { TypeCreate } from "./Providers";
-
-export enum ChallengeTypes {
-    native = "native",
-    response = "response",
-    shell = "shell",
-    redirect = "redirect",
-}
+import { ChallengeTypeEnum } from "./models";
 
 export interface Error {
     code: string;
@@ -18,11 +10,12 @@ export interface ErrorDict {
 }
 
 export interface Challenge {
-    type: ChallengeTypes;
+    type: ChallengeTypeEnum;
     component?: string;
     title?: string;
     response_errors?: ErrorDict;
 }
+
 export interface WithUserInfoChallenge extends Challenge {
     pending_user: string;
     pending_user_avatar: string;
@@ -31,6 +24,7 @@ export interface WithUserInfoChallenge extends Challenge {
 export interface ShellChallenge extends Challenge {
     body: string;
 }
+
 export interface RedirectChallenge extends Challenge {
     to: string;
 }
@@ -44,104 +38,3 @@ export enum FlowDesignation {
     Recovery = "recovery",
     StageConfiguration = "stage_configuration",
 }
-
-export class Flow {
-    pk: string;
-    policybindingmodel_ptr_id: string;
-    name: string;
-    slug: string;
-    title: string;
-    designation: FlowDesignation;
-    background: string;
-    stages: string[];
-    policies: string[];
-    cache_count: number;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(slug: string): Promise<Flow> {
-        return DefaultClient.fetch<Flow>(["flows", "instances", slug]);
-    }
-
-    static diagram(slug: string): Promise<{ diagram: string }> {
-        return DefaultClient.fetch<{ diagram: string }>(["flows", "instances", slug, "diagram"]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Flow>> {
-        return DefaultClient.fetch<AKResponse<Flow>>(["flows", "instances"], filter);
-    }
-
-    static cached(): Promise<number> {
-        return DefaultClient.fetch<{ count: number }>(["flows", "instances", "cached"]).then(r => {
-            return r.count;
-        });
-    }
-
-    static executor(slug: string): Promise<Challenge> {
-        return DefaultClient.fetch(["flows", "executor", slug]);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/flows/${rest}`;
-    }
-}
-
-export class Stage implements BaseInheritanceModel {
-    pk: string;
-    name: string;
-    object_type: string;
-    verbose_name: string;
-    verbose_name_plural: string;
-    flow_set: Flow[];
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(slug: string): Promise<Stage> {
-        return DefaultClient.fetch<Stage>(["stages", "all", slug]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Stage>> {
-        return DefaultClient.fetch<AKResponse<Stage>>(["stages", "all"], filter);
-    }
-
-    static getTypes(): Promise<TypeCreate[]> {
-        return DefaultClient.fetch<TypeCreate[]>(["stages", "all", "types"]);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/stages/${rest}`;
-    }
-}
-
-export class FlowStageBinding {
-
-    pk: string;
-    policybindingmodel_ptr_id: string;
-    target: string;
-    stage: string;
-    stage_obj: Stage;
-    evaluate_on_plan: boolean;
-    re_evaluate_policies: boolean;
-    order: number;
-    policies: string[];
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(slug: string): Promise<FlowStageBinding> {
-        return DefaultClient.fetch<FlowStageBinding>(["flows", "bindings", slug]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<FlowStageBinding>> {
-        return DefaultClient.fetch<AKResponse<FlowStageBinding>>(["flows", "bindings"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/stages/bindings/${rest}`;
-    }
-}
diff --git a/web/src/api/Groups.ts b/web/src/api/Groups.ts
deleted file mode 100644
index 1d85c05b0..000000000
--- a/web/src/api/Groups.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { DefaultClient, QueryArguments, AKResponse } from "./Client";
-import { EventContext } from "./Events";
-
-export class Group {
-
-    pk: string;
-    name: string;
-    is_superuser: boolean;
-    attributes: EventContext;
-    parent?: Group;
-    users: number[];
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<Group> {
-        return DefaultClient.fetch<Group>(["core", "groups", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Group>> {
-        return DefaultClient.fetch<AKResponse<Group>>(["core", "groups"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/groups/${rest}`;
-    }
-}
diff --git a/web/src/api/Invitations.ts b/web/src/api/Invitations.ts
deleted file mode 100644
index e28bd8c25..000000000
--- a/web/src/api/Invitations.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DefaultClient, QueryArguments, AKResponse } from "./Client";
-import { EventContext } from "./Events";
-import { User } from "./Users";
-
-export class Invitation {
-
-    pk: string;
-    expires: number;
-    fixed_date: EventContext;
-    created_by: User;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<Invitation> {
-        return DefaultClient.fetch<Invitation>(["stages", "invitation", "invitations", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Invitation>> {
-        return DefaultClient.fetch<AKResponse<Invitation>>(["stages", "invitation", "invitations"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/stages/invitations/${rest}`;
-    }
-}
diff --git a/web/src/api/Outposts.ts b/web/src/api/Outposts.ts
deleted file mode 100644
index 10c60ed7e..000000000
--- a/web/src/api/Outposts.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { DefaultClient, AKResponse, QueryArguments } from "./Client";
-import { Provider, TypeCreate } from "./Providers";
-
-export interface OutpostHealth {
-    last_seen: number;
-    version: string;
-    version_should: string;
-    version_outdated: boolean;
-}
-
-export class Outpost {
-
-    pk: string;
-    name: string;
-    providers: number[];
-    providers_obj: Provider[];
-    service_connection?: string;
-    _config: QueryArguments;
-    token_identifier: string;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<Outpost> {
-        return DefaultClient.fetch<Outpost>(["outposts", "outposts", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Outpost>> {
-        return DefaultClient.fetch<AKResponse<Outpost>>(["outposts", "outposts"], filter);
-    }
-
-    static health(pk: string): Promise<OutpostHealth[]> {
-        return DefaultClient.fetch<OutpostHealth[]>(["outposts", "outposts", pk, "health"]);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/outposts/${rest}`;
-    }
-}
-
-export interface OutpostServiceConnectionState {
-    version: string;
-    healthy: boolean;
-}
-
-export class OutpostServiceConnection {
-    pk: string;
-    name: string;
-    local: boolean;
-    object_type: string;
-    verbose_name: string;
-    verbose_name_plural: string;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<OutpostServiceConnection> {
-        return DefaultClient.fetch<OutpostServiceConnection>(["outposts", "service_connections", "all", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<OutpostServiceConnection>> {
-        return DefaultClient.fetch<AKResponse<OutpostServiceConnection>>(["outposts", "service_connections", "all"], filter);
-    }
-
-    static state(pk: string): Promise<OutpostServiceConnectionState> {
-        return DefaultClient.fetch<OutpostServiceConnectionState>(["outposts", "service_connections", "all", pk, "state"]);
-    }
-
-    static getTypes(): Promise<TypeCreate[]> {
-        return DefaultClient.fetch<TypeCreate[]>(["outposts", "service_connections", "all", "types"]);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/outpost_service_connections/${rest}`;
-    }
-
-}
diff --git a/web/src/api/Policies.ts b/web/src/api/Policies.ts
deleted file mode 100644
index d720bd559..000000000
--- a/web/src/api/Policies.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DefaultClient, BaseInheritanceModel, AKResponse, QueryArguments } from "./Client";
-import { TypeCreate } from "./Providers";
-
-export class Policy implements BaseInheritanceModel {
-    pk: string;
-    name: string;
-    execution_logging: boolean;
-    object_type: string;
-    verbose_name: string;
-    verbose_name_plural: string;
-    bound_to: number;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<Policy> {
-        return DefaultClient.fetch<Policy>(["policies", "all", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Policy>> {
-        return DefaultClient.fetch<AKResponse<Policy>>(["policies", "all"], filter);
-    }
-
-    static cached(): Promise<number> {
-        return DefaultClient.fetch<{ count: number }>(["policies", "all", "cached"]).then(r => {
-            return r.count;
-        });
-    }
-
-    static getTypes(): Promise<TypeCreate[]> {
-        return DefaultClient.fetch<TypeCreate[]>(["policies", "all", "types"]);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/policies/${rest}`;
-    }
-}
diff --git a/web/src/api/PolicyBindings.ts b/web/src/api/PolicyBindings.ts
deleted file mode 100644
index ca54d85e8..000000000
--- a/web/src/api/PolicyBindings.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DefaultClient, AKResponse, QueryArguments } from "./Client";
-import { Group } from "./Groups";
-import { Policy } from "./Policies";
-import { User } from "./Users";
-
-export class PolicyBinding {
-    pk: string;
-    policy?: Policy;
-    group?: Group;
-    user?: User;
-    target: string;
-    enabled: boolean;
-    order: number;
-    timeout: number;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<PolicyBinding> {
-        return DefaultClient.fetch<PolicyBinding>(["policies", "bindings", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<PolicyBinding>> {
-        return DefaultClient.fetch<AKResponse<PolicyBinding>>(["policies", "bindings"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/policies/bindings/${rest}`;
-    }
-}
diff --git a/web/src/api/Prompts.ts b/web/src/api/Prompts.ts
deleted file mode 100644
index ee2100717..000000000
--- a/web/src/api/Prompts.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { DefaultClient, QueryArguments, AKResponse } from "./Client";
-import { Stage } from "./Flows";
-
-export class Prompt {
-
-    pk: string;
-    field_key: string;
-    label: string;
-    type: string;
-    required: boolean;
-    placeholder: string;
-    order: number;
-    promptstage_set: Stage[];
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<Prompt> {
-        return DefaultClient.fetch<Prompt>(["stages", "prompt", "prompts", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Prompt>> {
-        return DefaultClient.fetch<AKResponse<Prompt>>(["stages", "prompt", "prompts"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/stages_prompts/${rest}`;
-    }
-}
diff --git a/web/src/api/PropertyMapping.ts b/web/src/api/PropertyMapping.ts
deleted file mode 100644
index eae1f176f..000000000
--- a/web/src/api/PropertyMapping.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DefaultClient, AKResponse, QueryArguments } from "./Client";
-import { TypeCreate } from "./Providers";
-
-export class PropertyMapping {
-    pk: string;
-    name: string;
-    expression: string;
-
-    verbose_name: string;
-    verbose_name_plural: string;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<PropertyMapping> {
-        return DefaultClient.fetch<PropertyMapping>(["propertymappings", "all", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<PropertyMapping>> {
-        return DefaultClient.fetch<AKResponse<PropertyMapping>>(["propertymappings", "all"], filter);
-    }
-
-    static getTypes(): Promise<TypeCreate[]> {
-        return DefaultClient.fetch<TypeCreate[]>(["propertymappings", "all", "types"]);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/property-mappings/${rest}`;
-    }
-}
diff --git a/web/src/api/Providers.ts b/web/src/api/Providers.ts
deleted file mode 100644
index 6a5e66946..000000000
--- a/web/src/api/Providers.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { BaseInheritanceModel, DefaultClient, AKResponse, QueryArguments } from "./Client";
-
-export interface TypeCreate {
-    name: string;
-    description: string;
-    link: string;
-}
-
-export class Provider implements BaseInheritanceModel {
-    pk: number;
-    name: string;
-    authorization_flow: string;
-    object_type: string;
-
-    assigned_application_slug?: string;
-    assigned_application_name?: string;
-
-    verbose_name: string;
-    verbose_name_plural: string;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(id: number): Promise<Provider> {
-        return DefaultClient.fetch<Provider>(["providers", "all", id.toString()]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Provider>> {
-        return DefaultClient.fetch<AKResponse<Provider>>(["providers", "all"], filter);
-    }
-
-    static getTypes(): Promise<TypeCreate[]> {
-        return DefaultClient.fetch<TypeCreate[]>(["providers", "all", "types"]);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/providers/${rest}`;
-    }
-}
diff --git a/web/src/api/Sources.ts b/web/src/api/Sources.ts
deleted file mode 100644
index 0e05d2b5b..000000000
--- a/web/src/api/Sources.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { BaseInheritanceModel, DefaultClient, AKResponse, QueryArguments } from "./Client";
-import { TypeCreate } from "./Providers";
-
-export class Source implements BaseInheritanceModel {
-    pk: string;
-    name: string;
-    slug: string;
-    enabled: boolean;
-    authentication_flow: string;
-    enrollment_flow: string;
-
-    constructor() {
-        throw Error();
-    }
-    object_type: string;
-    verbose_name: string;
-    verbose_name_plural: string;
-
-    static get(slug: string): Promise<Source> {
-        return DefaultClient.fetch<Source>(["sources", "all", slug]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Source>> {
-        return DefaultClient.fetch<AKResponse<Source>>(["sources", "all"], filter);
-    }
-
-    static getTypes(): Promise<TypeCreate[]> {
-        return DefaultClient.fetch<TypeCreate[]>(["sources", "all", "types"]);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/sources/${rest}`;
-    }
-}
diff --git a/web/src/api/SystemTask.ts b/web/src/api/SystemTask.ts
deleted file mode 100644
index 222873286..000000000
--- a/web/src/api/SystemTask.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { DefaultClient, QueryArguments } from "./Client";
-
-export enum TaskStatus {
-    SUCCESSFUL = 1,
-    WARNING = 2,
-    ERROR = 4,
-}
-
-export class SystemTask {
-
-    task_name: string;
-    task_description: string;
-    task_finish_timestamp: number;
-    status: TaskStatus;
-    messages: string[];
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(task_name: string): Promise<SystemTask> {
-        return DefaultClient.fetch<SystemTask>(["admin", "system_tasks", task_name]);
-    }
-
-    static list(filter?: QueryArguments): Promise<SystemTask[]> {
-        return DefaultClient.fetch<SystemTask[]>(["admin", "system_tasks"], filter);
-    }
-
-    static retry(task_name: string): string {
-        return DefaultClient.makeUrl(["admin", "system_tasks", task_name, "retry"]);
-    }
-
-}
diff --git a/web/src/api/Tokens.ts b/web/src/api/Tokens.ts
deleted file mode 100644
index 9319efa7d..000000000
--- a/web/src/api/Tokens.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { AKResponse, DefaultClient, QueryArguments } from "./Client";
-import { User } from "./Users";
-
-export enum TokenIntent {
-    INTENT_VERIFICATION = "verification",
-    INTENT_API = "api",
-    INTENT_RECOVERY = "recovery",
-}
-
-export class Token {
-
-    pk: string;
-    identifier: string;
-    intent: TokenIntent;
-    user: User;
-    description: string;
-
-    expires: number;
-    expiring: boolean;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<User> {
-        return DefaultClient.fetch<User>(["core", "tokens", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<Token>> {
-        return DefaultClient.fetch<AKResponse<Token>>(["core", "tokens"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/tokens/${rest}`;
-    }
-
-    static userUrl(rest: string): string {
-        return `/-/user/tokens/${rest}`;
-    }
-
-    static getKey(identifier: string): Promise<string> {
-        return DefaultClient.fetch<{ key: string }>(["core", "tokens", identifier, "view_key"]).then(
-            (r) => r.key
-        );
-    }
-
-}
diff --git a/web/src/api/Users.ts b/web/src/api/Users.ts
index 6bf1a7604..f9b0de78b 100644
--- a/web/src/api/Users.ts
+++ b/web/src/api/Users.ts
@@ -1,45 +1,11 @@
-import { DefaultClient, AKResponse, QueryArguments } from "./Client";
+import { CoreApi } from "./apis";
+import { DEFAULT_CONFIG } from "./Config";
+import { User } from "./models";
 
 let _globalMePromise: Promise<User>;
-
-export class User {
-    pk: number;
-    username: string;
-    name: string;
-    is_superuser: boolean;
-    email: boolean;
-    avatar: string;
-    is_active: boolean;
-    last_login: number;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(pk: string): Promise<User> {
-        return DefaultClient.fetch<User>(["core", "users", pk]);
-    }
-
-    static list(filter?: QueryArguments): Promise<AKResponse<User>> {
-        return DefaultClient.fetch<AKResponse<User>>(["core", "users"], filter);
-    }
-
-    static adminUrl(rest: string): string {
-        return `/administration/users/${rest}`;
-    }
-
-    static me(): Promise<User> {
-        if (!_globalMePromise) {
-            _globalMePromise = DefaultClient.fetch<User>(["core", "users", "me"]);
-        }
-        return _globalMePromise;
-    }
-
-    static count(): Promise<number> {
-        return DefaultClient.fetch<AKResponse<User>>(["core", "users"], {
-            "page_size": 1
-        }).then(r => {
-            return r.pagination.count;
-        });
+export function me(): Promise<User> {
+    if (!_globalMePromise) {
+        _globalMePromise = new CoreApi(DEFAULT_CONFIG).coreUsersMe({});
     }
+    return _globalMePromise;
 }
diff --git a/web/src/api/Versions.ts b/web/src/api/Versions.ts
deleted file mode 100644
index df75dc1d2..000000000
--- a/web/src/api/Versions.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { DefaultClient } from "./Client";
-
-export class Version {
-
-    version_current: string;
-    version_latest: string;
-    outdated: boolean;
-
-    constructor() {
-        throw Error();
-    }
-
-    static get(): Promise<Version> {
-        return DefaultClient.fetch<Version>(["admin", "version"]);
-    }
-
-}
diff --git a/web/src/api/legacy.ts b/web/src/api/legacy.ts
new file mode 100644
index 000000000..1d4e6ba0b
--- /dev/null
+++ b/web/src/api/legacy.ts
@@ -0,0 +1,97 @@
+export class AdminURLManager {
+
+    static applications(rest: string): string {
+        return `/administration/applications/${rest}`;
+    }
+
+    static cryptoCertificates(rest: string): string {
+        return `/administration/crypto/certificates/${rest}`;
+    }
+
+    static policies(rest: string): string {
+        return `/administration/policies/${rest}`;
+    }
+
+    static policyBindings(rest: string): string {
+        return `/administration/policies/bindings/${rest}`;
+    }
+
+    static providers(rest: string): string {
+        return `/administration/providers/${rest}`;
+    }
+
+    static propertyMappings(rest: string): string {
+        return `/administration/property-mappings/${rest}`;
+    }
+
+    static outposts(rest: string): string {
+        return `/administration/outposts/${rest}`;
+    }
+
+    static outpostServiceConnections(rest: string): string {
+        return `/administration/outpost_service_connections/${rest}`;
+    }
+
+    static flows(rest: string): string {
+        return `/administration/flows/${rest}`;
+    }
+
+    static stages(rest: string): string {
+        return `/administration/stages/${rest}`;
+    }
+
+    static stagePrompts(rest: string): string {
+        return `/administration/stages_prompts/${rest}`;
+    }
+
+    static stageInvitations(rest: string): string {
+        return `/administration/stages/invitations/${rest}`;
+    }
+
+    static stageBindings(rest: string): string {
+        return `/administration/stages/bindings/${rest}`;
+    }
+
+    static sources(rest: string): string {
+        return `/administration/sources/${rest}`;
+    }
+
+    static tokens(rest: string): string {
+        return `/administration/tokens/${rest}`;
+    }
+
+    static eventRules(rest: string): string {
+        return `/administration/events/rules/${rest}`;
+    }
+
+    static eventTransports(rest: string): string {
+        return `/administration/events/transports/${rest}`;
+    }
+
+    static users(rest: string): string {
+        return `/administration/users/${rest}`;
+    }
+
+    static groups(rest: string): string {
+        return `/administration/groups/${rest}`;
+    }
+}
+
+export class UserURLManager {
+
+    static tokens(rest: string): string {
+        return `/-/user/tokens/${rest}`;
+    }
+
+}
+
+export class AppURLManager {
+
+    static sourceSAML(slug: string, rest: string): string {
+        return `/source/saml/${slug}/${rest}`;
+    }
+    static providerSAML(rest: string): string {
+        return `/application/saml/${rest}`;
+    }
+
+}
diff --git a/web/src/api/providers/OAuth2.ts b/web/src/api/providers/OAuth2.ts
deleted file mode 100644
index 3216d03cc..000000000
--- a/web/src/api/providers/OAuth2.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { DefaultClient } from "../Client";
-import { Provider } from "../Providers";
-
-export interface OAuth2SetupURLs {
-
-    issuer?: string;
-    authorize: string;
-    token: string;
-    user_info: string;
-    provider_info?: string;
-    logout?: string;
-
-}
-
-export class OAuth2Provider extends Provider {
-    client_type: string
-    client_id: string;
-    client_secret: string;
-    token_validity: string;
-    include_claims_in_id_token: boolean;
-    jwt_alg: string;
-    rsa_key: string;
-    redirect_uris: string;
-    sub_mode: string;
-    issuer_mode: string;
-
-    constructor() {
-        super();
-        throw Error();
-    }
-
-    static get(id: number): Promise<OAuth2Provider> {
-        return DefaultClient.fetch<OAuth2Provider>(["providers", "oauth2", id.toString()]);
-    }
-
-    static getLaunchURls(id: number): Promise<OAuth2SetupURLs> {
-        return DefaultClient.fetch(["providers", "oauth2", id.toString(), "setup_urls"]);
-    }
-
-    static appUrl(rest: string): string {
-        return `/application/oauth2/${rest}`;
-    }
-}
diff --git a/web/src/api/providers/Proxy.ts b/web/src/api/providers/Proxy.ts
deleted file mode 100644
index dad108593..000000000
--- a/web/src/api/providers/Proxy.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { DefaultClient } from "../Client";
-import { Provider } from "../Providers";
-
-export class ProxyProvider extends Provider {
-    internal_host: string;
-    external_host: string;
-    internal_host_ssl_validation: boolean
-    certificate?: string;
-    skip_path_regex: string;
-    basic_auth_enabled: boolean;
-    basic_auth_password_attribute: string;
-    basic_auth_user_attribute: string;
-
-    constructor() {
-        super();
-        throw Error();
-    }
-
-    static get(id: number): Promise<ProxyProvider> {
-        return DefaultClient.fetch<ProxyProvider>(["providers", "proxy", id.toString()]);
-    }
-
-    static getMetadata(id: number): Promise<{ metadata: string }> {
-        return DefaultClient.fetch(["providers", "proxy", id.toString(), "metadata"]);
-    }
-
-    static appUrl(rest: string): string {
-        return `/application/proxy/${rest}`;
-    }
-}
diff --git a/web/src/api/providers/SAML.ts b/web/src/api/providers/SAML.ts
deleted file mode 100644
index 814653b81..000000000
--- a/web/src/api/providers/SAML.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { DefaultClient } from "../Client";
-import { Provider } from "../Providers";
-
-export class SAMLProvider extends Provider {
-    acs_url: string;
-    audience: string;
-    issuer: string;
-    assertion_valid_not_before: string;
-    assertion_valid_not_on_or_after: string;
-    session_valid_not_on_or_after: string;
-    name_id_mapping?: string;
-    digest_algorithm: string;
-    signature_algorithm: string;
-    signing_kp?: string;
-    verification_kp?: string;
-
-    constructor() {
-        super();
-        throw Error();
-    }
-
-    static get(id: number): Promise<SAMLProvider> {
-        return DefaultClient.fetch<SAMLProvider>(["providers", "saml", id.toString()]);
-    }
-
-    static getMetadata(id: number): Promise<{ metadata: string }> {
-        return DefaultClient.fetch(["providers", "saml", id.toString(), "metadata"]);
-    }
-
-    static appUrl(rest: string): string {
-        return `/application/saml/${rest}`;
-    }
-}
diff --git a/web/src/api/sources/LDAP.ts b/web/src/api/sources/LDAP.ts
deleted file mode 100644
index 7d4c427c3..000000000
--- a/web/src/api/sources/LDAP.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DefaultClient } from "../Client";
-import { Source } from "../Sources";
-
-export class LDAPSource extends Source {
-    server_uri: string;
-    bind_cn: string;
-    start_tls: boolean
-    base_dn: string;
-    additional_user_dn: string;
-    additional_group_dn: string;
-    user_object_filter: string;
-    group_object_filter: string;
-    group_membership_field: string;
-    object_uniqueness_field: string;
-    sync_users: boolean;
-    sync_users_password: boolean;
-    sync_groups: boolean;
-    sync_parent_group?: string;
-    property_mappings: string[];
-    property_mappings_group: string[];
-
-    constructor() {
-        super();
-        throw Error();
-    }
-
-    static get(slug: string): Promise<LDAPSource> {
-        return DefaultClient.fetch<LDAPSource>(["sources", "ldap", slug]);
-    }
-
-    static syncStatus(slug: string): Promise<{ last_sync?: number }> {
-        return DefaultClient.fetch(["sources", "ldap", slug, "sync_status"]);
-    }
-
-}
diff --git a/web/src/api/sources/OAuth.ts b/web/src/api/sources/OAuth.ts
deleted file mode 100644
index 216d9c202..000000000
--- a/web/src/api/sources/OAuth.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DefaultClient } from "../Client";
-import { Source } from "../Sources";
-
-export class OAuthSource extends Source {
-    provider_type: string;
-    request_token_url: string;
-    authorization_url: string;
-    access_token_url: string;
-    profile_url: string;
-    consumer_key: string;
-    callback_url: string;
-
-    constructor() {
-        super();
-        throw Error();
-    }
-
-    static get(slug: string): Promise<OAuthSource> {
-        return DefaultClient.fetch<OAuthSource>(["sources", "oauth", slug]);
-    }
-
-}
diff --git a/web/src/api/sources/SAML.ts b/web/src/api/sources/SAML.ts
deleted file mode 100644
index 949f37b3c..000000000
--- a/web/src/api/sources/SAML.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { DefaultClient } from "../Client";
-import { Source } from "../Sources";
-
-export class SAMLSource extends Source {
-    issuer: string;
-    sso_url: string;
-    slo_url: string;
-    allow_idp_initiated: boolean;
-    name_id_policy: string;
-    binding_type: string
-    signing_kp?: string;
-    digest_algorithm: string;
-    signature_algorithm: string;
-    temporary_user_delete_after: string;
-
-    constructor() {
-        super();
-        throw Error();
-    }
-
-    static get(slug: string): Promise<SAMLSource> {
-        return DefaultClient.fetch<SAMLSource>(["sources", "saml", slug]);
-    }
-
-    static getMetadata(slug: string): Promise<{ metadata: string }> {
-        return DefaultClient.fetch(["sources", "saml", slug, "metadata"]);
-    }
-
-    static appUrl(slug: string, rest: string): string {
-        return `/source/saml/${slug}/${rest}`;
-    }
-}
diff --git a/web/src/authentik.css b/web/src/authentik.css
index f5edceb1c..f4569bdaf 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -157,7 +157,7 @@ ak-message {
         color: var(--ak-dark-foreground) !important;
     }
     /* tabs, vertical */
-    .pf-c-tabs__link {
+    .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
         background-color: var(--ak-dark-background-light);
     }
     /* table, on mobile */
diff --git a/web/src/elements/AdminLoginsChart.ts b/web/src/elements/AdminLoginsChart.ts
deleted file mode 100644
index 2d82dbf27..000000000
--- a/web/src/elements/AdminLoginsChart.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import Chart from "chart.js";
-import { DefaultClient } from "../api/Client";
-
-interface TickValue {
-    value: number;
-    major: boolean;
-}
-
-export interface LoginMetrics {
-    logins_failed_per_1h: { x: number, y: number }[];
-    logins_per_1h: { x: number, y: number }[];
-}
-
-@customElement("ak-admin-logins-chart")
-export class AdminLoginsChart extends LitElement {
-    @property({type: Array})
-    url: string[] = [];
-
-    chart?: Chart;
-
-    static get styles(): CSSResult[] {
-        return [css`
-            :host {
-                position: relative;
-                height: 100%;
-                width: 100%;
-                display: block;
-                min-height: 25rem;
-            }
-            canvas {
-                width: 100px;
-                height: 100px;
-            }
-        `];
-    }
-
-    constructor() {
-        super();
-        window.addEventListener("resize", () => {
-            if (this.chart) {
-                this.chart.resize();
-            }
-        });
-    }
-
-    firstUpdated(): void {
-        DefaultClient.fetch<LoginMetrics>(this.url)
-            .then((r) => {
-                const canvas = <HTMLCanvasElement>this.shadowRoot?.querySelector("canvas");
-                if (!canvas) {
-                    console.warn("Failed to get canvas element");
-                    return false;
-                }
-                const ctx = canvas.getContext("2d");
-                if (!ctx) {
-                    console.warn("failed to get 2d context");
-                    return false;
-                }
-                this.chart = new Chart(ctx, {
-                    type: "bar",
-                    data: {
-                        datasets: [
-                            {
-                                label: "Failed Logins",
-                                backgroundColor: "rgba(201, 25, 11, .5)",
-                                spanGaps: true,
-                                data: r.logins_failed_per_1h,
-                            },
-                            {
-                                label: "Successful Logins",
-                                backgroundColor: "rgba(189, 229, 184, .5)",
-                                spanGaps: true,
-                                data: r.logins_per_1h,
-                            },
-                        ],
-                    },
-                    options: {
-                        maintainAspectRatio: false,
-                        spanGaps: true,
-                        scales: {
-                            xAxes: [
-                                {
-                                    stacked: true,
-                                    gridLines: {
-                                        color: "rgba(0, 0, 0, 0)",
-                                    },
-                                    type: "time",
-                                    offset: true,
-                                    ticks: {
-                                        callback: function (value, index: number, values) {
-                                            const valueStamp = <TickValue>(<unknown>values[index]);
-                                            const delta = Date.now() - valueStamp.value;
-                                            const ago = Math.round(delta / 1000 / 3600);
-                                            return `${ago} Hours ago`;
-                                        },
-                                        autoSkip: true,
-                                        maxTicksLimit: 8,
-                                    },
-                                },
-                            ],
-                            yAxes: [
-                                {
-                                    stacked: true,
-                                    gridLines: {
-                                        color: "rgba(0, 0, 0, 0)",
-                                    },
-                                },
-                            ],
-                        },
-                    },
-                });
-            });
-    }
-
-    render(): TemplateResult {
-        return html`<canvas></canvas>`;
-    }
-}
diff --git a/web/src/elements/buttons/ActionButton.ts b/web/src/elements/buttons/ActionButton.ts
index 280409ce2..02f13eb50 100644
--- a/web/src/elements/buttons/ActionButton.ts
+++ b/web/src/elements/buttons/ActionButton.ts
@@ -1,4 +1,3 @@
-import { getCookie } from "../../utils";
 import { customElement, property } from "lit-element";
 import { ERROR_CLASS, SUCCESS_CLASS } from "../../constants";
 import { SpinnerButton } from "./SpinnerButton";
@@ -12,43 +11,33 @@ export class ActionButton extends SpinnerButton {
     @property()
     method = "POST";
 
+    @property({attribute: false})
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    apiRequest: () => Promise<any> = () => { throw new Error(); };
+
     callAction(): void {
         if (this.isRunning === true) {
             return;
         }
         this.setLoading();
-        const csrftoken = getCookie("authentik_csrf");
-        const request = new Request(this.url, {
-            headers: { "X-CSRFToken": csrftoken },
-        });
-        fetch(request, {
-            method: this.method,
-            mode: "same-origin",
+        this.apiRequest().then(() => {
+            this.setDone(SUCCESS_CLASS);
         })
-            .then((r) => {
-                if (!r.ok) {
-                    throw r;
-                }
-                return r;
-            })
-            .then(() => {
-                this.setDone(SUCCESS_CLASS);
-            })
-            .catch((e: Error | Response) => {
-                if (e instanceof Error) {
+        .catch((e: Error | Response) => {
+            if (e instanceof Error) {
+                showMessage({
+                    level_tag: "error",
+                    message: e.toString()
+                });
+            } else {
+                e.text().then(t => {
                     showMessage({
                         level_tag: "error",
-                        message: e.toString()
+                        message: t
                     });
-                } else {
-                    e.text().then(t => {
-                        showMessage({
-                            level_tag: "error",
-                            message: t
-                        });
-                    });
-                }
-                this.setDone(ERROR_CLASS);
-            });
+                });
+            }
+            this.setDone(ERROR_CLASS);
+        });
     }
 }
diff --git a/web/src/elements/buttons/TokenCopyButton.ts b/web/src/elements/buttons/TokenCopyButton.ts
index ee8b214df..6d203e5dc 100644
--- a/web/src/elements/buttons/TokenCopyButton.ts
+++ b/web/src/elements/buttons/TokenCopyButton.ts
@@ -3,9 +3,10 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
 import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
 // @ts-ignore
 import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
-import { Token } from "../../api/Tokens";
+import { CoreApi } from "../../api";
 import { ERROR_CLASS, PRIMARY_CLASS, SUCCESS_CLASS } from "../../constants";
 import { ColorStyles } from "../../common/styles";
+import { DEFAULT_CONFIG } from "../../api/Config";
 
 @customElement("ak-token-copy-button")
 export class TokenCopyButton extends LitElement {
@@ -36,8 +37,14 @@ export class TokenCopyButton extends LitElement {
             }, 1500);
             return;
         }
-        Token.getKey(this.identifier).then((token) => {
-            navigator.clipboard.writeText(token).then(() => {
+        new CoreApi(DEFAULT_CONFIG).coreTokensViewKey({
+            identifier: this.identifier
+        }).then((token) => {
+            if (!token.key) {
+                this.buttonClass = ERROR_CLASS;
+                return;
+            }
+            navigator.clipboard.writeText(token.key).then(() => {
                 this.buttonClass = SUCCESS_CLASS;
                 setTimeout(() => {
                     this.buttonClass = PRIMARY_CLASS;
diff --git a/web/src/elements/charts/AdminLoginsChart.ts b/web/src/elements/charts/AdminLoginsChart.ts
new file mode 100644
index 000000000..5bad3923f
--- /dev/null
+++ b/web/src/elements/charts/AdminLoginsChart.ts
@@ -0,0 +1,41 @@
+import { customElement } from "lit-element";
+import Chart from "chart.js";
+import { AdminApi, LoginMetrics } from "../../api";
+import { AKChart } from "./Chart";
+import { DEFAULT_CONFIG } from "../../api/Config";
+
+@customElement("ak-charts-admin-login")
+export class AdminLoginsChart extends AKChart<LoginMetrics> {
+
+    apiRequest(): Promise<LoginMetrics> {
+        return new AdminApi(DEFAULT_CONFIG).adminMetricsList();
+    }
+
+    getDatasets(data: LoginMetrics): Chart.ChartDataSets[] {
+        return [
+            {
+                label: "Failed Logins",
+                backgroundColor: "rgba(201, 25, 11, .5)",
+                spanGaps: true,
+                data: data.loginsFailedPer1h?.map((cord) => {
+                    return {
+                        x: cord.xCord,
+                        y: cord.yCord,
+                    };
+                }),
+            },
+            {
+                label: "Successful Logins",
+                backgroundColor: "rgba(189, 229, 184, .5)",
+                spanGaps: true,
+                data: data.loginsPer1h?.map((cord) => {
+                    return {
+                        x: cord.xCord,
+                        y: cord.yCord,
+                    };
+                }),
+            },
+        ];
+    }
+
+}
diff --git a/web/src/elements/charts/ApplicationAuthorizeChart.ts b/web/src/elements/charts/ApplicationAuthorizeChart.ts
new file mode 100644
index 000000000..a72bf44d9
--- /dev/null
+++ b/web/src/elements/charts/ApplicationAuthorizeChart.ts
@@ -0,0 +1,32 @@
+import { customElement, property } from "lit-element";
+import { Coordinate, CoreApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AKChart } from "./Chart";
+
+@customElement("ak-charts-application-authorize")
+export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
+
+    @property()
+    applicationSlug!: string;
+
+    apiRequest(): Promise<Coordinate[]> {
+        return new CoreApi(DEFAULT_CONFIG).coreApplicationsMetrics({ slug: this.applicationSlug });
+    }
+
+    getDatasets(data: Coordinate[]): Chart.ChartDataSets[] {
+        return [
+            {
+                label: "Authorizations",
+                backgroundColor: "rgba(189, 229, 184, .5)",
+                spanGaps: true,
+                data: data.map((cord) => {
+                    return {
+                        x: cord.xCord,
+                        y: cord.yCord,
+                    };
+                }),
+            },
+        ];
+    }
+
+}
diff --git a/web/src/elements/charts/Chart.ts b/web/src/elements/charts/Chart.ts
new file mode 100644
index 000000000..a4fec4550
--- /dev/null
+++ b/web/src/elements/charts/Chart.ts
@@ -0,0 +1,103 @@
+import { css, CSSResult, html, LitElement, TemplateResult } from "lit-element";
+import Chart from "chart.js";
+
+interface TickValue {
+    value: number;
+    major: boolean;
+}
+
+export abstract class AKChart<T> extends LitElement {
+
+    abstract apiRequest(): Promise<T>;
+    abstract getDatasets(data: T): Chart.ChartDataSets[];
+
+    chart?: Chart;
+
+    static get styles(): CSSResult[] {
+        return [css`
+            :host {
+                position: relative;
+                height: 100%;
+                width: 100%;
+                display: block;
+                min-height: 25rem;
+            }
+            canvas {
+                width: 100px;
+                height: 100px;
+            }
+        `];
+    }
+
+    constructor() {
+        super();
+        window.addEventListener("resize", () => {
+            if (this.chart) {
+                this.chart.resize();
+            }
+        });
+    }
+
+    configureChart(data: T, ctx: CanvasRenderingContext2D): Chart {
+        return new Chart(ctx, {
+            type: "bar",
+            data: {
+                datasets: this.getDatasets(data),
+            },
+            options: {
+                maintainAspectRatio: false,
+                spanGaps: true,
+                scales: {
+                    xAxes: [
+                        {
+                            stacked: true,
+                            gridLines: {
+                                color: "rgba(0, 0, 0, 0)",
+                            },
+                            type: "time",
+                            offset: true,
+                            ticks: {
+                                callback: function (value, index: number, values) {
+                                    const valueStamp = <TickValue>(<unknown>values[index]);
+                                    const delta = Date.now() - valueStamp.value;
+                                    const ago = Math.round(delta / 1000 / 3600);
+                                    return `${ago} Hours ago`;
+                                },
+                                autoSkip: true,
+                                maxTicksLimit: 8,
+                            },
+                        },
+                    ],
+                    yAxes: [
+                        {
+                            stacked: true,
+                            gridLines: {
+                                color: "rgba(0, 0, 0, 0)",
+                            },
+                        },
+                    ],
+                },
+            },
+        });
+    }
+
+    firstUpdated(): void {
+        this.apiRequest().then((r) => {
+            const canvas = <HTMLCanvasElement>this.shadowRoot?.querySelector("canvas");
+            if (!canvas) {
+                console.warn("Failed to get canvas element");
+                return false;
+            }
+            const ctx = canvas.getContext("2d");
+            if (!ctx) {
+                console.warn("failed to get 2d context");
+                return false;
+            }
+            this.chart = this.configureChart(r, ctx);
+        });
+    }
+
+    render(): TemplateResult {
+        return html`<canvas></canvas>`;
+    }
+}
diff --git a/web/src/elements/messages/MessageContainer.ts b/web/src/elements/messages/MessageContainer.ts
index 2f66d8721..394219dc7 100644
--- a/web/src/elements/messages/MessageContainer.ts
+++ b/web/src/elements/messages/MessageContainer.ts
@@ -35,6 +35,7 @@ export class MessageContainer extends LitElement {
     }
 
     connect(): void {
+        if (navigator.webdriver) return;
         const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
             window.location.host
         }/ws/client/`;
diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts
index 8b8e77ae8..4358dc659 100644
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/web/src/elements/notifications/NotificationDrawer.ts
@@ -1,7 +1,8 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { EventsApi, Notification } from "../../api";
 import { AKResponse } from "../../api/Client";
-import { Notification } from "../../api/EventNotification";
+import { DEFAULT_CONFIG } from "../../api/Config";
 import { COMMON_STYLES } from "../../common/styles";
 
 @customElement("ak-notification-drawer")
@@ -30,9 +31,9 @@ export class NotificationDrawer extends LitElement {
     }
 
     firstUpdated(): void {
-        Notification.list({
-            seen: false,
-            ordering: "-created"
+        new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
+            seen: "false",
+            ordering: "-created",
         }).then(r => {
             this.notifications = r;
             this.unread = r.results.length;
@@ -40,7 +41,6 @@ export class NotificationDrawer extends LitElement {
     }
 
     renderItem(item: Notification): TemplateResult {
-        const created = new Date(parseInt(item.created, 10) * 1000);
         let level = "";
         switch (item.severity) {
         case "notice":
@@ -66,15 +66,18 @@ export class NotificationDrawer extends LitElement {
             </div>
             <div class="pf-c-notification-drawer__list-item-action">
                 <button class="pf-c-dropdown__toggle pf-m-plain" type="button" @click=${() => {
-                    Notification.markSeen(item.pk).then(() => {
-                        this.firstUpdated();
+                    new EventsApi(DEFAULT_CONFIG).eventsNotificationsPartialUpdate({
+                        uuid: item.pk || "",
+                        data: {
+                            seen: true,
+                        }
                     });
                 }}>
                     <i class="fas fa-times"></i>
                 </button>
             </div>
             <p class="pf-c-notification-drawer__list-item-description">${item.body}</p>
-            <small class="pf-c-notification-drawer__list-item-timestamp">${created.toLocaleString()}</small>
+            <small class="pf-c-notification-drawer__list-item-timestamp">${item.created?.toLocaleString()}</small>
         </li>`;
     }
 
diff --git a/web/src/elements/policies/BoundPoliciesList.ts b/web/src/elements/policies/BoundPoliciesList.ts
index 03d198cbe..c608b5149 100644
--- a/web/src/elements/policies/BoundPoliciesList.ts
+++ b/web/src/elements/policies/BoundPoliciesList.ts
@@ -2,16 +2,16 @@ import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
 import { AKResponse } from "../../api/Client";
 import { Table, TableColumn } from "../../elements/table/Table";
-import { PolicyBinding } from "../../api/PolicyBindings";
+import { PoliciesApi, PolicyBinding } from "../../api";
 
 import "../../elements/Tabs";
-import "../../elements/AdminLoginsChart";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/Dropdown";
-import { Policy } from "../../api/Policies";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-bound-policies-list")
 export class BoundPoliciesList extends Table<PolicyBinding> {
@@ -19,11 +19,11 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
     target?: string;
 
     apiEndpoint(page: number): Promise<AKResponse<PolicyBinding>> {
-        return PolicyBinding.list({
+        return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsList({
             target: this.target || "",
             ordering: "order",
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
         });
     }
 
@@ -56,13 +56,13 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
             html`${item.order}`,
             html`${item.timeout}`,
             html`
-            <ak-modal-button href="${PolicyBinding.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.policyBindings(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${PolicyBinding.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.policyBindings(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -78,7 +78,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                 ${gettext("No policies are currently bound to this object.")}
             </div>
             <div slot="primary">
-                <ak-modal-button href=${PolicyBinding.adminUrl(`create/?target=${this.target}`)}>
+                <ak-modal-button href=${AdminURLManager.policyBindings(`create/?target=${this.target}`)}>
                     <ak-spinner-button slot="trigger" class="pf-m-primary">
                         ${gettext("Bind Policy")}
                     </ak-spinner-button>
@@ -96,7 +96,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                 <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
             </button>
             <ul class="pf-c-dropdown__menu" hidden>
-                ${until(Policy.getTypes().then((types) => {
+                ${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllTypes({}).then((types) => {
                     return types.map((type) => {
                         return html`<li>
                             <ak-modal-button href="${type.link}">
@@ -110,7 +110,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                 }), html`<ak-spinner></ak-spinner>`)}
             </ul>
         </ak-dropdown>
-        <ak-modal-button href=${PolicyBinding.adminUrl(`create/?target=${this.target}`)}>
+        <ak-modal-button href=${AdminURLManager.policyBindings(`create/?target=${this.target}`)}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Bind Policy")}
             </ak-spinner-button>
diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts
index e55e17edd..1d9e5eef7 100644
--- a/web/src/elements/sidebar/SidebarBrand.ts
+++ b/web/src/elements/sidebar/SidebarBrand.ts
@@ -3,15 +3,17 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu
 import PageStyle from "@patternfly/patternfly/components/Page/page.css";
 // @ts-ignore
 import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
-import { Config } from "../../api/Config";
+import { configureSentry } from "../../api/Config";
+import { Config } from "../../api";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 export const DefaultConfig: Config = {
-    branding_logo: " /static/dist/assets/icons/icon_left_brand.svg",
-    branding_title: "authentik",
+    brandingLogo: " /static/dist/assets/icons/icon_left_brand.svg",
+    brandingTitle: "authentik",
 
-    error_reporting_enabled: false,
-    error_reporting_environment: "",
-    error_reporting_send_pii: false,
+    errorReportingEnabled: false,
+    errorReportingEnvironment: "",
+    errorReportingSendPii: false,
 };
 
 @customElement("ak-sidebar-brand")
@@ -40,13 +42,13 @@ export class SidebarBrand extends LitElement {
     }
 
     firstUpdated(): void {
-        Config.get().then((c) => (this.config = c));
+        configureSentry().then((c) => {this.config = c;});
     }
 
     render(): TemplateResult {
         return html` <a href="#/" class="pf-c-page__header-brand-link">
             <div class="pf-c-brand ak-brand">
-                <img src="${this.config.branding_logo}" alt="authentik icon" loading="lazy" />
+                <img src="${ifDefined(this.config.brandingLogo)}" alt="authentik icon" loading="lazy" />
             </div>
         </a>`;
     }
diff --git a/web/src/elements/sidebar/SidebarUser.ts b/web/src/elements/sidebar/SidebarUser.ts
index 01a75d470..fc17cfbde 100644
--- a/web/src/elements/sidebar/SidebarUser.ts
+++ b/web/src/elements/sidebar/SidebarUser.ts
@@ -5,10 +5,11 @@ import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
 import fa from "@fortawesome/fontawesome-free/css/all.css";
 // @ts-ignore
 import AvatarStyle from "@patternfly/patternfly/components/Avatar/avatar.css";
-import { User } from "../../api/Users";
+import { me } from "../../api/Users";
 import { until } from "lit-html/directives/until";
 
 import "../notifications/NotificationTrigger";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-sidebar-user")
 export class SidebarUser extends LitElement {
@@ -37,8 +38,8 @@ export class SidebarUser extends LitElement {
     render(): TemplateResult {
         return html`
             <a href="#/-/user/" class="pf-c-nav__link user-avatar" id="user-settings">
-                ${until(User.me().then((u) => {
-                    return html`<img class="pf-c-avatar" src="${u.avatar}" alt="" />`;
+                ${until(me().then((u) => {
+                    return html`<img class="pf-c-avatar" src="${ifDefined(u.avatar)}" alt="" />`;
                 }), html``)}
             </a>
             <ak-notification-trigger class="pf-c-nav__link user-notifications">
diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index f6c4a2b22..c40412425 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -5,7 +5,7 @@ import { COMMON_STYLES } from "../../common/styles";
 
 import "./TablePagination";
 import "../EmptyState";
-
+import "../Spinner";
 
 export class TableColumn {
 
diff --git a/web/src/elements/table/TablePagination.ts b/web/src/elements/table/TablePagination.ts
index fbcae2f27..0bfee7c84 100644
--- a/web/src/elements/table/TablePagination.ts
+++ b/web/src/elements/table/TablePagination.ts
@@ -1,12 +1,12 @@
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { COMMON_STYLES } from "../../common/styles";
-import { PBPagination } from "../../api/Client";
+import { AKPagination } from "../../api/Client";
 import { gettext } from "django";
 
 @customElement("ak-table-pagination")
 export class TablePagination extends LitElement {
     @property({attribute: false})
-    pages?: PBPagination;
+    pages?: AKPagination;
 
     @property({attribute: false})
     // eslint-disable-next-line
@@ -22,8 +22,8 @@ export class TablePagination extends LitElement {
                 <div class="pf-c-options-menu">
                     <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
                         <span class="pf-c-options-menu__toggle-text">
-                            ${this.pages?.start_index} -
-                            ${this.pages?.end_index} of
+                            ${this.pages?.startIndex} -
+                            ${this.pages?.endIndex} of
                             ${this.pages?.count}
                         </span>
                     </div>
diff --git a/web/src/flow.ts b/web/src/flow.ts
index 202eaae2f..0c7d9baac 100644
--- a/web/src/flow.ts
+++ b/web/src/flow.ts
@@ -1,3 +1,3 @@
 import "construct-style-sheets-polyfill";
 
-import "./pages/generic/FlowExecutor";
+import "./flows/FlowExecutor";
diff --git a/web/src/pages/generic/FlowExecutor.ts b/web/src/flows/FlowExecutor.ts
similarity index 64%
rename from web/src/pages/generic/FlowExecutor.ts
rename to web/src/flows/FlowExecutor.ts
index c2de4caa4..fa8526ccc 100644
--- a/web/src/pages/generic/FlowExecutor.ts
+++ b/web/src/flows/FlowExecutor.ts
@@ -1,34 +1,34 @@
 import { gettext } from "django";
 import { LitElement, html, customElement, property, TemplateResult, CSSResult, css } from "lit-element";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
-import { getCookie } from "../../utils";
-import "../../elements/stages/authenticator_static/AuthenticatorStaticStage";
-import "../../elements/stages/authenticator_totp/AuthenticatorTOTPStage";
-import "../../elements/stages/authenticator_validate/AuthenticatorValidateStage";
-import "../../elements/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
-import "../../elements/stages/autosubmit/AutosubmitStage";
-import "../../elements/stages/captcha/CaptchaStage";
-import "../../elements/stages/consent/ConsentStage";
-import "../../elements/stages/email/EmailStage";
-import "../../elements/stages/identification/IdentificationStage";
-import "../../elements/stages/password/PasswordStage";
-import "../../elements/stages/prompt/PromptStage";
-import { ShellChallenge, Challenge, ChallengeTypes, Flow, RedirectChallenge } from "../../api/Flows";
-import { DefaultClient } from "../../api/Client";
-import { IdentificationChallenge } from "../../elements/stages/identification/IdentificationStage";
-import { PasswordChallenge } from "../../elements/stages/password/PasswordStage";
-import { ConsentChallenge } from "../../elements/stages/consent/ConsentStage";
-import { EmailChallenge } from "../../elements/stages/email/EmailStage";
-import { AutosubmitChallenge } from "../../elements/stages/autosubmit/AutosubmitStage";
-import { PromptChallenge } from "../../elements/stages/prompt/PromptStage";
-import { AuthenticatorTOTPChallenge } from "../../elements/stages/authenticator_totp/AuthenticatorTOTPStage";
-import { AuthenticatorStaticChallenge } from "../../elements/stages/authenticator_static/AuthenticatorStaticStage";
-import { AuthenticatorValidateStageChallenge } from "../../elements/stages/authenticator_validate/AuthenticatorValidateStage";
-import { WebAuthnAuthenticatorRegisterChallenge } from "../../elements/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
-import { CaptchaChallenge } from "../../elements/stages/captcha/CaptchaStage";
-import { COMMON_STYLES } from "../../common/styles";
-import { SpinnerSize } from "../../elements/Spinner";
-import { StageHost } from "../../elements/stages/base";
+import "./stages/authenticator_static/AuthenticatorStaticStage";
+import "./stages/authenticator_totp/AuthenticatorTOTPStage";
+import "./stages/authenticator_validate/AuthenticatorValidateStage";
+import "./stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
+import "./stages/autosubmit/AutosubmitStage";
+import "./stages/captcha/CaptchaStage";
+import "./stages/consent/ConsentStage";
+import "./stages/email/EmailStage";
+import "./stages/identification/IdentificationStage";
+import "./stages/password/PasswordStage";
+import "./stages/prompt/PromptStage";
+import { ShellChallenge, RedirectChallenge } from "../api/Flows";
+import { IdentificationChallenge } from "./stages/identification/IdentificationStage";
+import { PasswordChallenge } from "./stages/password/PasswordStage";
+import { ConsentChallenge } from "./stages/consent/ConsentStage";
+import { EmailChallenge } from "./stages/email/EmailStage";
+import { AutosubmitChallenge } from "./stages/autosubmit/AutosubmitStage";
+import { PromptChallenge } from "./stages/prompt/PromptStage";
+import { AuthenticatorTOTPChallenge } from "./stages/authenticator_totp/AuthenticatorTOTPStage";
+import { AuthenticatorStaticChallenge } from "./stages/authenticator_static/AuthenticatorStaticStage";
+import { AuthenticatorValidateStageChallenge } from "./stages/authenticator_validate/AuthenticatorValidateStage";
+import { WebAuthnAuthenticatorRegisterChallenge } from "./stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage";
+import { CaptchaChallenge } from "./stages/captcha/CaptchaStage";
+import { COMMON_STYLES } from "../common/styles";
+import { SpinnerSize } from "../elements/Spinner";
+import { StageHost } from "./stages/base";
+import { Challenge, ChallengeTypeEnum, FlowsApi } from "../api";
+import { DEFAULT_CONFIG } from "../api/Config";
 
 @customElement("ak-flow-executor")
 export class FlowExecutor extends LitElement implements StageHost {
@@ -68,37 +68,30 @@ export class FlowExecutor extends LitElement implements StageHost {
         });
     }
 
-    submit(formData?: FormData): Promise<void> {
-        const csrftoken = getCookie("authentik_csrf");
-        const request = new Request(DefaultClient.makeUrl(["flows", "executor", this.flowSlug]), {
-            headers: {
-                "X-CSRFToken": csrftoken,
-            },
-        });
+    submit<T>(formData?: T): Promise<void> {
         this.loading = true;
-        return fetch(request, {
-            method: "POST",
-            mode: "same-origin",
-            body: formData,
-        })
-            .then((response) => {
-                return response.json();
-            })
-            .then((data) => {
-                this.challenge = data;
-            })
-            .catch((e) => {
-                this.errorMessage(e);
-            })
-            .finally(() => {
-                this.loading = false;
-            });
+        return new FlowsApi(DEFAULT_CONFIG).flowsExecutorSolveRaw({
+            flowSlug: this.flowSlug,
+            data: formData || {},
+        }).then((challengeRaw) => {
+            return challengeRaw.raw.json();
+        }).then((data) => {
+            this.challenge = data;
+        }).catch((e) => {
+            this.errorMessage(e);
+        }).finally(() => {
+            this.loading = false;
+        });
     }
 
     firstUpdated(): void {
         this.loading = true;
-        Flow.executor(this.flowSlug).then((challenge) => {
-            this.challenge = challenge;
+        new FlowsApi(DEFAULT_CONFIG).flowsExecutorGetRaw({
+            flowSlug: this.flowSlug
+        }).then((challengeRaw) => {
+            return challengeRaw.raw.json();
+        }).then((challenge) => {
+            this.challenge = challenge as Challenge;
         }).catch((e) => {
             // Catch JSON or Update errors
             this.errorMessage(e);
@@ -109,7 +102,7 @@ export class FlowExecutor extends LitElement implements StageHost {
 
     errorMessage(error: string): void {
         this.challenge = <ShellChallenge>{
-            type: ChallengeTypes.shell,
+            type: ChallengeTypeEnum.Shell,
             body: `<style>
                     .ak-exception {
                         font-family: monospace;
@@ -139,13 +132,13 @@ export class FlowExecutor extends LitElement implements StageHost {
             return this.renderLoading();
         }
         switch (this.challenge.type) {
-            case ChallengeTypes.redirect:
+            case ChallengeTypeEnum.Redirect:
                 console.debug(`authentik/flows: redirecting to ${(this.challenge as RedirectChallenge).to}`);
                 window.location.assign((this.challenge as RedirectChallenge).to);
                 return this.renderLoading();
-            case ChallengeTypes.shell:
+            case ChallengeTypeEnum.Shell:
                 return html`${unsafeHTML((this.challenge as ShellChallenge).body)}`;
-            case ChallengeTypes.native:
+            case ChallengeTypeEnum.Native:
                 switch (this.challenge.component) {
                     case "ak-stage-identification":
                         return html`<ak-stage-identification .host=${this} .challenge=${this.challenge as IdentificationChallenge}></ak-stage-identification>`;
diff --git a/web/src/elements/stages/authenticator_static/AuthenticatorStaticStage.ts b/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
similarity index 98%
rename from web/src/elements/stages/authenticator_static/AuthenticatorStaticStage.ts
rename to web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
index ffd00c812..7d843bbde 100644
--- a/web/src/elements/stages/authenticator_static/AuthenticatorStaticStage.ts
+++ b/web/src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
@@ -4,6 +4,7 @@ import { WithUserInfoChallenge } from "../../../api/Flows";
 import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
 import "../form";
+import "../../../elements/utils/LoadingState";
 
 export interface AuthenticatorStaticChallenge extends WithUserInfoChallenge {
     codes: number[];
diff --git a/web/src/elements/stages/authenticator_totp/AuthenticatorTOTPStage.ts b/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
similarity index 97%
rename from web/src/elements/stages/authenticator_totp/AuthenticatorTOTPStage.ts
rename to web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
index 474964320..fe303fc58 100644
--- a/web/src/elements/stages/authenticator_totp/AuthenticatorTOTPStage.ts
+++ b/web/src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
@@ -5,7 +5,8 @@ import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
 import "webcomponent-qr-code";
 import "../form";
-import { showMessage } from "../../messages/MessageContainer";
+import { showMessage } from "../../../elements/messages/MessageContainer";
+import "../../../elements/utils/LoadingState";
 
 export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge {
     config_url: string;
diff --git a/web/src/elements/stages/authenticator_validate/AuthenticatorValidateStage.ts b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
similarity index 98%
rename from web/src/elements/stages/authenticator_validate/AuthenticatorValidateStage.ts
rename to web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
index a342c9c28..6b40afcc2 100644
--- a/web/src/elements/stages/authenticator_validate/AuthenticatorValidateStage.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
@@ -36,8 +36,8 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
     @property({attribute: false})
     selectedDeviceChallenge?: DeviceChallenge;
 
-    submit(formData?: FormData): Promise<void> {
-        return this.host?.submit(formData) || Promise.resolve();
+    submit<T>(formData?: T): Promise<void> {
+        return this.host?.submit<T>(formData) || Promise.resolve();
     }
 
     static get styles(): CSSResult[] {
diff --git a/web/src/elements/stages/authenticator_validate/AuthenticatorValidateStageCode.ts b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
similarity index 98%
rename from web/src/elements/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
rename to web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
index af7442b20..928d4fa36 100644
--- a/web/src/elements/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
@@ -4,6 +4,7 @@ import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
 import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
 import "../form";
+import "../../../elements/utils/LoadingState";
 
 @customElement("ak-stage-authenticator-validate-code")
 export class AuthenticatorValidateStageWebCode extends BaseStage {
diff --git a/web/src/elements/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
similarity index 98%
rename from web/src/elements/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
rename to web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
index 089e47a73..1f9b7514b 100644
--- a/web/src/elements/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
+++ b/web/src/flows/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
@@ -1,7 +1,7 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { COMMON_STYLES } from "../../../common/styles";
-import { SpinnerSize } from "../../Spinner";
+import { SpinnerSize } from "../../../elements/Spinner";
 import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
 import { BaseStage } from "../base";
 import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
diff --git a/web/src/elements/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts b/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
similarity index 98%
rename from web/src/elements/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
rename to web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
index 70e355466..909797e49 100644
--- a/web/src/elements/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
+++ b/web/src/flows/stages/authenticator_webauthn/WebAuthnAuthenticatorRegisterStage.ts
@@ -1,7 +1,7 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
-import { SpinnerSize } from "../../Spinner";
+import { SpinnerSize } from "../../../elements/Spinner";
 import { BaseStage } from "../base";
 import { Assertion, transformCredentialCreateOptions, transformNewAssertionForServer } from "./utils";
 
diff --git a/web/src/elements/stages/authenticator_webauthn/utils.ts b/web/src/flows/stages/authenticator_webauthn/utils.ts
similarity index 100%
rename from web/src/elements/stages/authenticator_webauthn/utils.ts
rename to web/src/flows/stages/authenticator_webauthn/utils.ts
diff --git a/web/src/elements/stages/autosubmit/AutosubmitStage.ts b/web/src/flows/stages/autosubmit/AutosubmitStage.ts
similarity index 95%
rename from web/src/elements/stages/autosubmit/AutosubmitStage.ts
rename to web/src/flows/stages/autosubmit/AutosubmitStage.ts
index 6979cb892..90de2518e 100644
--- a/web/src/elements/stages/autosubmit/AutosubmitStage.ts
+++ b/web/src/flows/stages/autosubmit/AutosubmitStage.ts
@@ -3,7 +3,8 @@ import { CSSResult, customElement, html, property, TemplateResult } from "lit-el
 import { WithUserInfoChallenge } from "../../../api/Flows";
 import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
-import "../../Spinner";
+import "../../../elements/Spinner";
+import "../../../elements/utils/LoadingState";
 
 export interface AutosubmitChallenge extends WithUserInfoChallenge {
     url: string;
diff --git a/web/src/elements/stages/base.ts b/web/src/flows/stages/base.ts
similarity index 58%
rename from web/src/elements/stages/base.ts
rename to web/src/flows/stages/base.ts
index 1e9b1db54..56ef98498 100644
--- a/web/src/elements/stages/base.ts
+++ b/web/src/flows/stages/base.ts
@@ -1,7 +1,7 @@
 import { LitElement } from "lit-element";
 
 export interface StageHost {
-    submit(formData?: FormData): Promise<void>;
+    submit<T>(formData?: T): Promise<void>;
 }
 
 export class BaseStage extends LitElement {
@@ -10,8 +10,12 @@ export class BaseStage extends LitElement {
 
     submitForm(e: Event): void {
         e.preventDefault();
+        const object: {
+            [key: string]: unknown;
+        } = {};
         const form = new FormData(this.shadowRoot?.querySelector("form") || undefined);
-        this.host?.submit(form);
+        form.forEach((value, key) => object[key] = value);
+        this.host?.submit(object);
     }
 
 }
diff --git a/web/src/elements/stages/captcha/CaptchaStage.ts b/web/src/flows/stages/captcha/CaptchaStage.ts
similarity index 96%
rename from web/src/elements/stages/captcha/CaptchaStage.ts
rename to web/src/flows/stages/captcha/CaptchaStage.ts
index 2ead2070b..d302fcaed 100644
--- a/web/src/elements/stages/captcha/CaptchaStage.ts
+++ b/web/src/flows/stages/captcha/CaptchaStage.ts
@@ -2,9 +2,10 @@ import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { WithUserInfoChallenge } from "../../../api/Flows";
 import { COMMON_STYLES } from "../../../common/styles";
-import { SpinnerSize } from "../../Spinner";
+import { SpinnerSize } from "../../../elements/Spinner";
 import { BaseStage } from "../base";
 import "../form";
+import "../../../elements/utils/LoadingState";
 
 export interface CaptchaChallenge extends WithUserInfoChallenge {
     site_key: string;
diff --git a/web/src/elements/stages/consent/ConsentStage.ts b/web/src/flows/stages/consent/ConsentStage.ts
similarity index 98%
rename from web/src/elements/stages/consent/ConsentStage.ts
rename to web/src/flows/stages/consent/ConsentStage.ts
index ea5c2410b..665b1858e 100644
--- a/web/src/elements/stages/consent/ConsentStage.ts
+++ b/web/src/flows/stages/consent/ConsentStage.ts
@@ -3,6 +3,7 @@ import { CSSResult, customElement, html, property, TemplateResult } from "lit-el
 import { WithUserInfoChallenge } from "../../../api/Flows";
 import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
+import "../../../elements/utils/LoadingState";
 
 export interface Permission {
     name: string;
diff --git a/web/src/elements/stages/email/EmailStage.ts b/web/src/flows/stages/email/EmailStage.ts
similarity index 92%
rename from web/src/elements/stages/email/EmailStage.ts
rename to web/src/flows/stages/email/EmailStage.ts
index d98c27dd7..d20a10544 100644
--- a/web/src/elements/stages/email/EmailStage.ts
+++ b/web/src/flows/stages/email/EmailStage.ts
@@ -1,10 +1,11 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { Challenge } from "../../../api/Flows";
+import { Challenge } from "../../../api";
 import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
+import "../../../elements/utils/LoadingState";
 
-export type EmailChallenge = Challenge
+export type EmailChallenge = Challenge;
 
 @customElement("ak-stage-email")
 export class EmailStage extends BaseStage {
diff --git a/web/src/elements/stages/form.ts b/web/src/flows/stages/form.ts
similarity index 100%
rename from web/src/elements/stages/form.ts
rename to web/src/flows/stages/form.ts
diff --git a/web/src/elements/stages/identification/IdentificationStage.ts b/web/src/flows/stages/identification/IdentificationStage.ts
similarity index 98%
rename from web/src/elements/stages/identification/IdentificationStage.ts
rename to web/src/flows/stages/identification/IdentificationStage.ts
index 51d6d3a6d..cc4237c8d 100644
--- a/web/src/elements/stages/identification/IdentificationStage.ts
+++ b/web/src/flows/stages/identification/IdentificationStage.ts
@@ -1,9 +1,10 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { Challenge } from "../../../api/Flows";
 import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
 import "../form";
+import "../../../elements/utils/LoadingState";
+import { Challenge } from "../../../api/Flows";
 
 export interface IdentificationChallenge extends Challenge {
 
diff --git a/web/src/elements/stages/password/PasswordStage.ts b/web/src/flows/stages/password/PasswordStage.ts
similarity index 98%
rename from web/src/elements/stages/password/PasswordStage.ts
rename to web/src/flows/stages/password/PasswordStage.ts
index 8b6045d72..b7e09ba34 100644
--- a/web/src/elements/stages/password/PasswordStage.ts
+++ b/web/src/flows/stages/password/PasswordStage.ts
@@ -4,6 +4,7 @@ import { WithUserInfoChallenge } from "../../../api/Flows";
 import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
 import "../form";
+import "../../../elements/utils/LoadingState";
 
 export interface PasswordChallenge extends WithUserInfoChallenge {
     recovery_url?: string;
diff --git a/web/src/elements/stages/prompt/PromptStage.ts b/web/src/flows/stages/prompt/PromptStage.ts
similarity index 99%
rename from web/src/elements/stages/prompt/PromptStage.ts
rename to web/src/flows/stages/prompt/PromptStage.ts
index 22d4455e9..b0994c2c5 100644
--- a/web/src/elements/stages/prompt/PromptStage.ts
+++ b/web/src/flows/stages/prompt/PromptStage.ts
@@ -1,10 +1,11 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { unsafeHTML } from "lit-html/directives/unsafe-html";
-import { Challenge } from "../../../api/Flows";
 import { COMMON_STYLES } from "../../../common/styles";
 import { BaseStage } from "../base";
 import "../form";
+import "../../../elements/utils/LoadingState";
+import { Challenge } from "../../../api/Flows";
 
 export interface Prompt {
     field_key: string;
diff --git a/web/src/interfaces/AdminInterface.ts b/web/src/interfaces/AdminInterface.ts
index b4861ec80..68322fba2 100644
--- a/web/src/interfaces/AdminInterface.ts
+++ b/web/src/interfaces/AdminInterface.ts
@@ -1,5 +1,5 @@
 import { customElement } from "lit-element";
-import { User } from "../api/Users";
+import { me } from "../api/Users";
 import { SidebarItem } from "../elements/sidebar/Sidebar";
 import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "../elements/router/Route";
 import { Interface } from "./Interface";
@@ -10,7 +10,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         new SidebarItem("Overview", "/administration/overview"),
         new SidebarItem("System Tasks", "/administration/system-tasks"),
     ).when((): Promise<boolean> => {
-        return User.me().then(u => u.is_superuser);
+        return me().then(u => u.isSuperuser||false);
     }),
     new SidebarItem("Events").children(
         new SidebarItem("Log", "/events/log").activeWhen(
@@ -19,7 +19,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         new SidebarItem("Notification Rules", "/events/rules"),
         new SidebarItem("Notification Transports", "/events/transports"),
     ).when((): Promise<boolean> => {
-        return User.me().then(u => u.is_superuser);
+        return me().then(u => u.isSuperuser||false);
     }),
     new SidebarItem("Resources").children(
         new SidebarItem("Applications", "/core/applications").activeWhen(
@@ -34,13 +34,13 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         new SidebarItem("Outposts", "/outpost/outposts"),
         new SidebarItem("Outpost Service Connections", "/outpost/service-connections"),
     ).when((): Promise<boolean> => {
-        return User.me().then(u => u.is_superuser);
+        return me().then(u => u.isSuperuser||false);
     }),
     new SidebarItem("Customisation").children(
         new SidebarItem("Policies", "/policy/policies"),
         new SidebarItem("Property Mappings", "/core/property-mappings"),
     ).when((): Promise<boolean> => {
-        return User.me().then(u => u.is_superuser);
+        return me().then(u => u.isSuperuser||false);
     }),
     new SidebarItem("Flows").children(
         new SidebarItem("Flows", "/flow/flows").activeWhen(`^/flow/flows/(?<slug>${SLUG_REGEX})$`),
@@ -48,7 +48,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         new SidebarItem("Prompts", "/flow/stages/prompts"),
         new SidebarItem("Invitations", "/flow/stages/invitations"),
     ).when((): Promise<boolean> => {
-        return User.me().then(u => u.is_superuser);
+        return me().then(u => u.isSuperuser||false);
     }),
     new SidebarItem("Identity & Cryptography").children(
         new SidebarItem("User", "/identity/users"),
@@ -56,7 +56,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         new SidebarItem("Certificates", "/crypto/certificates"),
         new SidebarItem("Tokens", "/core/tokens"),
     ).when((): Promise<boolean> => {
-        return User.me().then(u => u.is_superuser);
+        return me().then(u => u.isSuperuser||false);
     }),
 ];
 
diff --git a/web/src/main.ts b/web/src/main.ts
index 9d0176228..99dcfbc37 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,34 +1,13 @@
 import "construct-style-sheets-polyfill";
 
+// Elements that are used by SiteShell pages
+// And can't dynamically be imported
 import "./elements/buttons/ActionButton";
 import "./elements/buttons/Dropdown";
 import "./elements/buttons/ModalButton";
 import "./elements/buttons/SpinnerButton";
-import "./elements/buttons/TokenCopyButton";
-
-import "./elements/sidebar/Sidebar";
-import "./elements/sidebar/SidebarBrand";
-import "./elements/sidebar/SidebarUser";
-
-import "./elements/table/TablePagination";
-
-import "./elements/AdminLoginsChart";
-import "./elements/EmptyState";
-import "./elements/cards/AggregateCard";
-import "./elements/cards/AggregatePromiseCard";
 import "./elements/CodeMirror";
-import "./elements/messages/MessageContainer";
-import "./elements/Spinner";
-import "./elements/Tabs";
-import "./elements/router/RouterOutlet";
 
-import "./pages/generic/SiteShell";
-
-import "./pages/admin-overview/AdminOverviewPage";
-import "./pages/admin-overview/TopApplicationsTable";
-import "./pages/applications/ApplicationListPage";
-import "./pages/applications/ApplicationViewPage";
 import "./pages/tokens/UserTokenList";
-import "./pages/LibraryPage";
-
+import "./pages/generic/SiteShell";
 import "./interfaces/AdminInterface";
diff --git a/web/src/pages/LibraryPage.ts b/web/src/pages/LibraryPage.ts
index 7928272c9..5e9db57fc 100644
--- a/web/src/pages/LibraryPage.ts
+++ b/web/src/pages/LibraryPage.ts
@@ -1,8 +1,9 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
-import { Application } from "../api/Applications";
+import { Application, CoreApi } from "../api";
 import { AKResponse } from "../api/Client";
+import { DEFAULT_CONFIG } from "../api/Config";
 import { COMMON_STYLES } from "../common/styles";
 import { loading, truncate } from "../utils";
 
@@ -31,19 +32,19 @@ export class LibraryApplication extends LitElement {
         if (!this.application) {
             return html`<ak-spinner></ak-spinner>`;
         }
-        return html` <a href="${this.application.launch_url}" class="pf-c-card pf-m-hoverable pf-m-compact">
+        return html` <a href="${ifDefined(this.application.launchUrl)}" class="pf-c-card pf-m-hoverable pf-m-compact">
             <div class="pf-c-card__header">
-                ${this.application.meta_icon
-                    ? html`<img class="app-icon pf-c-avatar" src="${ifDefined(this.application.meta_icon)}" alt="Application Icon"/>`
+                ${this.application.metaIcon
+                    ? html`<img class="app-icon pf-c-avatar" src="${ifDefined(this.application.metaIcon)}" alt="Application Icon"/>`
                     : html`<i class="pf-icon pf-icon-arrow"></i>`}
             </div>
             <div class="pf-c-card__title">
                 <p id="card-1-check-label">${this.application.name}</p>
                 <div class="pf-c-content">
-                    <small>${this.application.meta_publisher}</small>
+                    <small>${this.application.metaPublisher}</small>
                 </div>
             </div>
-            <div class="pf-c-card__body">${truncate(this.application.meta_description, 35)}</div>
+            <div class="pf-c-card__body">${truncate(this.application.metaDescription, 35)}</div>
         </a>`;
     }
 
@@ -64,7 +65,9 @@ export class LibraryPage extends LitElement {
     }
 
     firstUpdated(): void {
-        Application.list().then((r) => (this.apps = r));
+        new CoreApi(DEFAULT_CONFIG).coreApplicationsList({}).then((apps) => {
+            this.apps = apps;
+        });
     }
 
     renderEmptyState(): TemplateResult {
diff --git a/web/src/pages/admin-overview/AdminOverviewPage.ts b/web/src/pages/admin-overview/AdminOverviewPage.ts
index 5d902c2af..b13a28545 100644
--- a/web/src/pages/admin-overview/AdminOverviewPage.ts
+++ b/web/src/pages/admin-overview/AdminOverviewPage.ts
@@ -2,7 +2,7 @@ import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
 import { COMMON_STYLES } from "../../common/styles";
 
-import "../../elements/AdminLoginsChart";
+import "../../elements/charts/AdminLoginsChart";
 import "../../elements/cards/AggregatePromiseCard";
 import "./TopApplicationsTable";
 import "./cards/AdminStatusCard";
@@ -30,7 +30,7 @@ export class AdminOverviewPage extends LitElement {
         <section class="pf-c-page__main-section">
             <div class="pf-l-gallery pf-m-gutter">
                 <ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Logins over the last 24 hours" style="grid-column-end: span 3;grid-row-end: span 2;">
-                    <ak-admin-logins-chart .url="${["admin", "metrics"]}"></ak-admin-logins-chart>
+                    <ak-charts-admin-login></ak-charts-admin-login>
                 </ak-aggregate-card>
                 <ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Apps with most usage" style="grid-column-end: span 2;grid-row-end: span 3;">
                     <ak-top-applications-table></ak-top-applications-table>
diff --git a/web/src/pages/admin-overview/TopApplicationsTable.ts b/web/src/pages/admin-overview/TopApplicationsTable.ts
index a47c80a04..a343d80f4 100644
--- a/web/src/pages/admin-overview/TopApplicationsTable.ts
+++ b/web/src/pages/admin-overview/TopApplicationsTable.ts
@@ -1,34 +1,39 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { Event, TopNEvent } from "../../api/Events";
 import { COMMON_STYLES } from "../../common/styles";
+import { EventsApi, EventTopPerUser } from "../../api";
 
 import "../../elements/Spinner";
+import { DEFAULT_CONFIG } from "../../api/Config";
 
 @customElement("ak-top-applications-table")
 export class TopApplicationsTable extends LitElement {
 
     @property({attribute: false})
-    topN?: TopNEvent[];
+    topN?: EventTopPerUser[];
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES;
     }
 
     firstUpdated(): void {
-        Event.topForUser("authorize_application").then(events => this.topN = events);
+        new EventsApi(DEFAULT_CONFIG).eventsEventsTopPerUser({
+            action: "authorize_application",
+        }).then((events) => {
+            this.topN = events;
+        });
     }
 
-    renderRow(event: TopNEvent): TemplateResult {
+    renderRow(event: EventTopPerUser): TemplateResult {
         return html`<tr role="row">
             <td role="cell">
                 ${event.application.name}
             </td>
             <td role="cell">
-                ${event.counted_events}
+                ${event.countedEvents}
             </td>
             <td role="cell">
-                <progress value="${event.counted_events}" max="${this.topN ? this.topN[0].counted_events : 0}"></progress>
+                <progress value="${event.countedEvents}" max="${this.topN ? this.topN[0].countedEvents : 0}"></progress>
             </td>
         </tr>`;
     }
diff --git a/web/src/pages/admin-overview/cards/AdminStatusCard.ts b/web/src/pages/admin-overview/cards/AdminStatusCard.ts
index e66304675..16160902e 100644
--- a/web/src/pages/admin-overview/cards/AdminStatusCard.ts
+++ b/web/src/pages/admin-overview/cards/AdminStatusCard.ts
@@ -23,14 +23,14 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
     renderInner(): TemplateResult {
         return html`<p class="center-value">
             ${until(this.getPrimaryValue().then((v) => {
-        this.value = v;
-        return this.getStatus(v);
-    }).then((status) => {
-        return html`<p class="ak-aggregate-card">
-                    <i class="${status.icon}"></i> ${this.renderValue()}
-                </p>
-                ${status.message ? html`<p class="subtext">${status.message}</p>` : html``}`;
-    }), html`<ak-spinner size="${SpinnerSize.Large}"></ak-spinner>`)}
+                this.value = v;
+                return this.getStatus(v);
+            }).then((status) => {
+                return html`<p class="ak-aggregate-card">
+                        <i class="${status.icon}"></i> ${this.renderValue()}
+                    </p>
+                    ${status.message ? html`<p class="subtext">${status.message}</p>` : html``}`;
+            }), html`<ak-spinner size="${SpinnerSize.Large}"></ak-spinner>`)}
         </p>`;
     }
 }
diff --git a/web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts b/web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts
index eb542ca2a..e61904e5b 100644
--- a/web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts
+++ b/web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts
@@ -1,14 +1,17 @@
 import { gettext } from "django";
 import { customElement, html, TemplateResult } from "lit-element";
-import { Flow } from "../../../api/Flows";
 import { AdminStatus, AdminStatusCard } from "./AdminStatusCard";
 import "../../../elements/buttons/ModalButton";
+import { FlowsApi } from "../../../api";
+import { DEFAULT_CONFIG } from "../../../api/Config";
 
 @customElement("ak-admin-status-card-flow-cache")
 export class FlowCacheStatusCard extends AdminStatusCard<number> {
 
     getPrimaryValue(): Promise<number> {
-        return Flow.cached();
+        return new FlowsApi(DEFAULT_CONFIG).flowsInstancesCached({}).then((value) => {
+            return value.count || 0;
+        });
     }
 
     getStatus(value: number): Promise<AdminStatus> {
diff --git a/web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts b/web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts
index 873932a5b..b2b3a657e 100644
--- a/web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts
+++ b/web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts
@@ -1,15 +1,18 @@
 import { gettext } from "django";
 import { customElement } from "lit-element";
 import { TemplateResult, html } from "lit-html";
-import { Policy } from "../../../api/Policies";
 import { AdminStatusCard, AdminStatus } from "./AdminStatusCard";
 import "../../../elements/buttons/ModalButton";
+import { PoliciesApi } from "../../../api";
+import { DEFAULT_CONFIG } from "../../../api/Config";
 
 @customElement("ak-admin-status-card-policy-cache")
 export class PolicyCacheStatusCard extends AdminStatusCard<number> {
 
     getPrimaryValue(): Promise<number> {
-        return Policy.cached();
+        return new PoliciesApi(DEFAULT_CONFIG).policiesAllCached({}).then((value) => {
+            return value.count || 0;
+        });
     }
 
     getStatus(value: number): Promise<AdminStatus> {
diff --git a/web/src/pages/admin-overview/cards/PolicyUnboundStatusCard.ts b/web/src/pages/admin-overview/cards/PolicyUnboundStatusCard.ts
index e1422b2db..3211d09f5 100644
--- a/web/src/pages/admin-overview/cards/PolicyUnboundStatusCard.ts
+++ b/web/src/pages/admin-overview/cards/PolicyUnboundStatusCard.ts
@@ -1,17 +1,18 @@
 import { gettext } from "django";
 import { customElement } from "lit-element";
-import { Policy } from "../../../api/Policies";
+import { PoliciesApi } from "../../../api";
+import { DEFAULT_CONFIG } from "../../../api/Config";
 import { AdminStatusCard, AdminStatus } from "./AdminStatusCard";
 
 @customElement("ak-admin-status-card-policy-unbound")
 export class PolicyUnboundStatusCard extends AdminStatusCard<number> {
 
     getPrimaryValue(): Promise<number> {
-        return Policy.list({
-            "bindings__isnull": true,
-            "promptstage__isnull": true,
-        }).then((response) => {
-            return response.pagination.count;
+        return new PoliciesApi(DEFAULT_CONFIG).policiesAllList({
+            bindingsIsnull: "true",
+            promptstageIsnull: "true",
+        }).then((value) => {
+            return value.pagination.count;
         });
     }
 
diff --git a/web/src/pages/admin-overview/cards/ProviderStatusCard.ts b/web/src/pages/admin-overview/cards/ProviderStatusCard.ts
index d97eafa2c..277614661 100644
--- a/web/src/pages/admin-overview/cards/ProviderStatusCard.ts
+++ b/web/src/pages/admin-overview/cards/ProviderStatusCard.ts
@@ -1,16 +1,17 @@
 import { gettext } from "django";
 import { customElement } from "lit-element";
-import { Provider } from "../../../api/Providers";
+import { ProvidersApi } from "../../../api";
+import { DEFAULT_CONFIG } from "../../../api/Config";
 import { AdminStatusCard, AdminStatus } from "./AdminStatusCard";
 
 @customElement("ak-admin-status-card-provider")
 export class ProviderStatusCard extends AdminStatusCard<number> {
 
     getPrimaryValue(): Promise<number> {
-        return Provider.list({
-            "application__isnull": true
-        }).then((response) => {
-            return response.pagination.count;
+        return new ProvidersApi(DEFAULT_CONFIG).providersAllList({
+            applicationIsnull: "true"
+        }).then((value) => {
+            return value.pagination.count;
         });
     }
 
diff --git a/web/src/pages/admin-overview/cards/UserCountStatusCard.ts b/web/src/pages/admin-overview/cards/UserCountStatusCard.ts
index 13886290a..2b0d90aad 100644
--- a/web/src/pages/admin-overview/cards/UserCountStatusCard.ts
+++ b/web/src/pages/admin-overview/cards/UserCountStatusCard.ts
@@ -1,12 +1,17 @@
 import { customElement } from "lit-element";
-import { User } from "../../../api/Users";
+import { CoreApi } from "../../../api";
+import { DEFAULT_CONFIG } from "../../../api/Config";
 import { AdminStatusCard, AdminStatus } from "./AdminStatusCard";
 
 @customElement("ak-admin-status-card-user-count")
 export class UserCountStatusCard extends AdminStatusCard<number> {
 
     getPrimaryValue(): Promise<number> {
-        return User.count();
+        return new CoreApi(DEFAULT_CONFIG).coreUsersList({
+            pageSize: 1
+        }).then((value) => {
+            return value.pagination.count;
+        });
     }
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/web/src/pages/admin-overview/cards/VersionStatusCard.ts b/web/src/pages/admin-overview/cards/VersionStatusCard.ts
index f101ccf17..c72179d64 100644
--- a/web/src/pages/admin-overview/cards/VersionStatusCard.ts
+++ b/web/src/pages/admin-overview/cards/VersionStatusCard.ts
@@ -1,20 +1,21 @@
 import { gettext } from "django";
 import { customElement, html, TemplateResult } from "lit-element";
-import { Version } from "../../../api/Versions";
+import { AdminApi, Version } from "../../../api";
+import { DEFAULT_CONFIG } from "../../../api/Config";
 import { AdminStatusCard, AdminStatus } from "./AdminStatusCard";
 
 @customElement("ak-admin-status-version")
 export class VersionStatusCard extends AdminStatusCard<Version> {
 
     getPrimaryValue(): Promise<Version> {
-        return Version.get();
+        return new AdminApi(DEFAULT_CONFIG).adminVersionList({});
     }
 
     getStatus(value: Version): Promise<AdminStatus> {
         if (value.outdated) {
             return Promise.resolve<AdminStatus>({
                 icon: "fa fa-exclamation-triangle pf-m-warning",
-                message: gettext(`${value.version_latest} is available!`),
+                message: gettext(`${value.versionLatest} is available!`),
             });
         } else {
             return Promise.resolve<AdminStatus>({
@@ -25,7 +26,7 @@ export class VersionStatusCard extends AdminStatusCard<Version> {
     }
 
     renderValue(): TemplateResult {
-        return html`${this.value?.version_current}`;
+        return html`${this.value?.versionCurrent}`;
     }
 
 }
diff --git a/web/src/pages/admin-overview/cards/WorkerStatusCard.ts b/web/src/pages/admin-overview/cards/WorkerStatusCard.ts
index f4a62194a..0f085184f 100644
--- a/web/src/pages/admin-overview/cards/WorkerStatusCard.ts
+++ b/web/src/pages/admin-overview/cards/WorkerStatusCard.ts
@@ -1,14 +1,15 @@
 import { gettext } from "django";
 import { customElement } from "lit-element";
-import { DefaultClient, AKResponse } from "../../../api/Client";
+import { AdminApi } from "../../../api";
+import { DEFAULT_CONFIG } from "../../../api/Config";
 import { AdminStatus, AdminStatusCard } from "./AdminStatusCard";
 
 @customElement("ak-admin-status-card-workers")
 export class WorkersStatusCard extends AdminStatusCard<number> {
 
     getPrimaryValue(): Promise<number> {
-        return DefaultClient.fetch<AKResponse<number>>(["admin", "workers"]).then((r) => {
-            return r.pagination.count;
+        return new AdminApi(DEFAULT_CONFIG).adminWorkersList({}).then((workers) => {
+            return workers.pagination.count;
         });
     }
 
diff --git a/web/src/pages/applications/ApplicationListPage.ts b/web/src/pages/applications/ApplicationListPage.ts
index 4e26216bc..b127c1815 100644
--- a/web/src/pages/applications/ApplicationListPage.ts
+++ b/web/src/pages/applications/ApplicationListPage.ts
@@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
-import { Application } from "../../api/Applications";
 import { AKResponse } from "../../api/Client";
 import { TablePage } from "../../elements/table/TablePage";
 
@@ -8,6 +7,9 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
+import { Application, CoreApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-application-list")
 export class ApplicationListPage extends TablePage<Application> {
@@ -28,10 +30,10 @@ export class ApplicationListPage extends TablePage<Application> {
     order = "name";
 
     apiEndpoint(page: number): Promise<AKResponse<Application>> {
-        return Application.list({
+        return new CoreApi(DEFAULT_CONFIG).coreApplicationsList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -49,26 +51,26 @@ export class ApplicationListPage extends TablePage<Application> {
 
     row(item: Application): TemplateResult[] {
         return [
-            item.meta_icon ?
-                html`<img class="app-icon pf-c-avatar" src="${item.meta_icon}" alt="${gettext("Application Icon")}">` :
+            item.metaIcon ?
+                html`<img class="app-icon pf-c-avatar" src="${item.metaIcon}" alt="${gettext("Application Icon")}">` :
                 html`<i class="pf-icon pf-icon-arrow"></i>`,
             html`<a href="#/core/applications/${item.slug}">
                 <div>
                     ${item.name}
                 </div>
-                ${item.meta_publisher ? html`<small>${item.meta_publisher}</small>` : html``}
+                ${item.metaPublisher ? html`<small>${item.metaPublisher}</small>` : html``}
             </a>`,
             html`<code>${item.slug}</code>`,
             html`${item.provider?.name}`,
-            html`${item.provider?.verbose_name}`,
+            html`${item.provider?.verboseName}`,
             html`
-            <ak-modal-button href="${Application.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.applications(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Application.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.applications(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -80,7 +82,7 @@ export class ApplicationListPage extends TablePage<Application> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${Application.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.applications("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
diff --git a/web/src/pages/applications/ApplicationViewPage.ts b/web/src/pages/applications/ApplicationViewPage.ts
index fb0c83b0d..467432595 100644
--- a/web/src/pages/applications/ApplicationViewPage.ts
+++ b/web/src/pages/applications/ApplicationViewPage.ts
@@ -1,14 +1,15 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { Application } from "../../api/Applications";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/Tabs";
-import "../../elements/AdminLoginsChart";
+import "../../elements/charts/ApplicationAuthorizeChart";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/policies/BoundPoliciesList";
 import "../../elements/utils/LoadingState";
+import { Application, CoreApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
 
 @customElement("ak-application-view")
 export class ApplicationViewPage extends LitElement {
@@ -19,11 +20,15 @@ export class ApplicationViewPage extends LitElement {
 
     @property()
     set applicationSlug(value: string) {
-        Application.get(value).then((app) => (this.application = app));
+        new CoreApi(DEFAULT_CONFIG).coreApplicationsRead({
+            slug: value
+        }).then((app) => {
+            this.application = app;
+        });
     }
 
     @property({attribute: false})
-    application?: Application;
+    application!: Application;
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES.concat(
@@ -52,10 +57,10 @@ export class ApplicationViewPage extends LitElement {
         return html`<section class="pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1>
-                        <img class="pf-icon" src="${this.application?.meta_icon || ""}" />
+                        <img class="pf-icon" src="${this.application?.metaIcon || ""}" />
                         ${this.application?.name}
                     </h1>
-                    <p>${this.application?.meta_publisher}</p>
+                    <p>${this.application?.metaPublisher}</p>
                 </div>
             </section>
             <ak-tabs>
@@ -69,9 +74,8 @@ export class ApplicationViewPage extends LitElement {
                             </div>
                             <div class="pf-c-card__body">
                                 ${this.application ? html`
-                                    <ak-admin-logins-chart
-                                        .url="${["core", "applications", this.application?.slug, "metrics"]}">
-                                    </ak-admin-logins-chart>`: ""}
+                                    <ak-charts-application-authorize applicationSlug=${this.application.slug}>
+                                    </ak-charts-application-authorize>`: ""}
                             </div>
                         </div>
                         <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-2-col">
diff --git a/web/src/pages/crypto/CertificateKeyPairListPage.ts b/web/src/pages/crypto/CertificateKeyPairListPage.ts
index 8a3591752..78a0a68b8 100644
--- a/web/src/pages/crypto/CertificateKeyPairListPage.ts
+++ b/web/src/pages/crypto/CertificateKeyPairListPage.ts
@@ -3,11 +3,14 @@ import { customElement, html, property, TemplateResult } from "lit-element";
 import { AKResponse } from "../../api/Client";
 import { TablePage } from "../../elements/table/TablePage";
 
+import { CryptoApi, CertificateKeyPair } from "../../api";
+
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
-import { CertificateKeyPair } from "../../api/CertificateKeyPair";
 import { PAGE_SIZE } from "../../constants";
+import { AdminURLManager } from "../../api/legacy";
+import { DEFAULT_CONFIG } from "../../api/Config";
 
 @customElement("ak-crypto-certificatekeypair-list")
 export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
@@ -30,10 +33,10 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
     order = "name";
 
     apiEndpoint(page: number): Promise<AKResponse<CertificateKeyPair>> {
-        return CertificateKeyPair.list({
+        return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -50,16 +53,16 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
     row(item: CertificateKeyPair): TemplateResult[] {
         return [
             html`${item.name}`,
-            html`${gettext(item.private_key_available ? "Yes" : "No")}`,
-            html`${new Date(item.cert_expiry * 1000).toLocaleString()}`,
+            html`${gettext(item.privateKeyAvailable ? "Yes" : "No")}`,
+            html`${item.certExpiry?.toLocaleString()}`,
             html`
-            <ak-modal-button href="${CertificateKeyPair.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.cryptoCertificates(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${CertificateKeyPair.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.cryptoCertificates(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -73,24 +76,24 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
         return html`
         <td role="cell" colspan="3">
             <div class="pf-c-table__expandable-row-content">
-                    <dl class="pf-c-description-list pf-m-horizontal">
-                        <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                                <span class="pf-c-description-list__text">${gettext("Certificate Fingerprint")}</span>
-                            </dt>
-                            <dd class="pf-c-description-list__description">
-                                <div class="pf-c-description-list__text">${item.fingerprint}</div>
-                            </dd>
-                        </div>
-                        <div class="pf-c-description-list__group">
-                            <dt class="pf-c-description-list__term">
-                                <span class="pf-c-description-list__text">${gettext("Certificate Subjet")}</span>
-                            </dt>
-                            <dd class="pf-c-description-list__description">
-                                <div class="pf-c-description-list__text">${item.cert_subject}</div>
-                            </dd>
-                        </div>
-                    </dl>
+                <dl class="pf-c-description-list pf-m-horizontal">
+                    <div class="pf-c-description-list__group">
+                        <dt class="pf-c-description-list__term">
+                            <span class="pf-c-description-list__text">${gettext("Certificate Fingerprint")}</span>
+                        </dt>
+                        <dd class="pf-c-description-list__description">
+                            <div class="pf-c-description-list__text">${item.fingerprint}</div>
+                        </dd>
+                    </div>
+                    <div class="pf-c-description-list__group">
+                        <dt class="pf-c-description-list__term">
+                            <span class="pf-c-description-list__text">${gettext("Certificate Subjet")}</span>
+                        </dt>
+                        <dd class="pf-c-description-list__description">
+                            <div class="pf-c-description-list__text">${item.certSubject}</div>
+                        </dd>
+                    </div>
+                </dl>
             </div>
         </td>
         <td></td>
@@ -99,13 +102,13 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${CertificateKeyPair.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.cryptoCertificates("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
             <div slot="modal"></div>
         </ak-modal-button>
-        <ak-modal-button href=${CertificateKeyPair.adminUrl("generate/")}>
+        <ak-modal-button href=${AdminURLManager.cryptoCertificates("generate/")}>
             <ak-spinner-button slot="trigger" class="pf-m-secondary">
                 ${gettext("Generate")}
             </ak-spinner-button>
diff --git a/web/src/pages/events/EventInfo.ts b/web/src/pages/events/EventInfo.ts
index 50a2c12f0..ae0509b4e 100644
--- a/web/src/pages/events/EventInfo.ts
+++ b/web/src/pages/events/EventInfo.ts
@@ -1,18 +1,19 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
-import { Event, EventContext } from "../../api/Events";
-import { Flow } from "../../api/Flows";
+import { FlowsApi } from "../../api";
 import { COMMON_STYLES } from "../../common/styles";
 import "../../elements/Spinner";
 import "../../elements/Expand";
 import { SpinnerSize } from "../../elements/Spinner";
+import { EventContext, EventWithContext } from "../../api/Events";
+import { DEFAULT_CONFIG } from "../../api/Config";
 
 @customElement("ak-event-info")
 export class EventInfo extends LitElement {
 
     @property({attribute: false})
-    event?: Event;
+    event!: EventWithContext;
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES.concat(
@@ -73,15 +74,15 @@ export class EventInfo extends LitElement {
 
     defaultResponse(): TemplateResult {
         return html`<div class="pf-l-flex">
-                    <div class="pf-l-flex__item">
-                        <h3>${gettext("Context")}</h3>
-                        <code>${JSON.stringify(this.event?.context, null, 4)}</code>
-                    </div>
-                    <div class="pf-l-flex__item">
-                        <h3>${gettext("User")}</h3>
-                        <code>${JSON.stringify(this.event?.user, null, 4)}</code>
-                    </div>
-                </div>`;
+                <div class="pf-l-flex__item">
+                    <h3>${gettext("Context")}</h3>
+                    <code>${JSON.stringify(this.event?.context, null, 4)}</code>
+                </div>
+                <div class="pf-l-flex__item">
+                    <h3>${gettext("User")}</h3>
+                    <code>${JSON.stringify(this.event?.user, null, 4)}</code>
+                </div>
+            </div>`;
     }
 
     render(): TemplateResult {
@@ -94,7 +95,7 @@ export class EventInfo extends LitElement {
         case "model_deleted":
             return html`
                 <h3>${gettext("Affected model:")}</h3>
-                ${this.getModelInfo(this.event.context.model as EventContext)}
+                ${this.getModelInfo(this.event.context?.model as EventContext)}
                 `;
         case "authorize_application":
             return html`<div class="pf-l-flex">
@@ -104,8 +105,8 @@ export class EventInfo extends LitElement {
                     </div>
                     <div class="pf-l-flex__item">
                         <h3>${gettext("Using flow")}</h3>
-                        <span>${until(Flow.list({
-                            flow_uuid: this.event.context.flow as string,
+                        <span>${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
+                            flowUuid: this.event.context.flow as string,
                         }).then(resp => {
                             return html`<a href="#/flow/flows/${resp.results[0].slug}">${resp.results[0].name}</a>`;
                         }), html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`)}
diff --git a/web/src/pages/events/EventInfoPage.ts b/web/src/pages/events/EventInfoPage.ts
index aa11e9294..cd83a8622 100644
--- a/web/src/pages/events/EventInfoPage.ts
+++ b/web/src/pages/events/EventInfoPage.ts
@@ -1,6 +1,8 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { Event } from "../../api/Events";
+import { EventsApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { EventWithContext } from "../../api/Events";
 import { COMMON_STYLES } from "../../common/styles";
 import "./EventInfo";
 
@@ -13,11 +15,15 @@ export class EventInfoPage extends LitElement {
 
     @property()
     set eventID(value: string) {
-        Event.get(value).then((e) => (this.event = e));
+        new EventsApi(DEFAULT_CONFIG).eventsEventsRead({
+            eventUuid: value
+        }).then((ev) => {
+            this.event = ev as EventWithContext;
+        });
     }
 
     @property({ attribute: false })
-    event?: Event;
+    event!: EventWithContext;
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES.concat(css`
diff --git a/web/src/pages/events/EventListPage.ts b/web/src/pages/events/EventListPage.ts
index 228add3e2..30bd7695b 100644
--- a/web/src/pages/events/EventListPage.ts
+++ b/web/src/pages/events/EventListPage.ts
@@ -1,11 +1,12 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
+import { Event, EventsApi } from "../../api";
 import { AKResponse } from "../../api/Client";
-import { Event } from "../../api/Events";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { EventWithContext } from "../../api/Events";
 import { PAGE_SIZE } from "../../constants";
 import { TableColumn } from "../../elements/table/Table";
 import { TablePage } from "../../elements/table/TablePage";
-import { time } from "../../utils";
 import "./EventInfo";
 
 @customElement("ak-event-list")
@@ -29,10 +30,10 @@ export class EventListPage extends TablePage<Event> {
     order = "-created";
 
     apiEndpoint(page: number): Promise<AKResponse<Event>> {
-        return Event.list({
+        return new EventsApi(DEFAULT_CONFIG).eventsEventsList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE * 3,
+            pageSize: PAGE_SIZE * 3,
             search: this.search || "",
         });
     }
@@ -45,16 +46,16 @@ export class EventListPage extends TablePage<Event> {
             new TableColumn("Client IP", "client_ip"),
         ];
     }
-    row(item: Event): TemplateResult[] {
+    row(item: EventWithContext): TemplateResult[] {
         return [
             html`<div>${item.action}</div>
             <small>${item.app}</small>`,
-            html`<div>${item.user.username}</div>
+            html`<div>${item.user?.username}</div>
             ${item.user.on_behalf_of ? html`<small>
                 ${gettext(`On behalf of ${item.user.on_behalf_of.username}`)}
             </small>` : html``}`,
-            html`<span>${time(item.created).toLocaleString()}</span>`,
-            html`<span>${item.client_ip}</span>`,
+            html`<span>${item.created?.toLocaleString()}</span>`,
+            html`<span>${item.clientIp}</span>`,
         ];
     }
 
@@ -62,7 +63,7 @@ export class EventListPage extends TablePage<Event> {
         return html`
         <td role="cell" colspan="4">
             <div class="pf-c-table__expandable-row-content">
-                <ak-event-info .event=${item}></ak-event-info>
+                <ak-event-info .event=${item as EventWithContext}></ak-event-info>
             </div>
         </td>
         <td></td>
diff --git a/web/src/pages/events/RuleListPage.ts b/web/src/pages/events/RuleListPage.ts
index 3cd4c0f1a..3160c4bd3 100644
--- a/web/src/pages/events/RuleListPage.ts
+++ b/web/src/pages/events/RuleListPage.ts
@@ -7,11 +7,13 @@ import "../../elements/policies/BoundPoliciesList";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
-import { Rule } from "../../api/EventRules";
 import { PAGE_SIZE } from "../../constants";
+import { EventsApi, NotificationRule } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-event-rule-list")
-export class RuleListPage extends TablePage<Rule> {
+export class RuleListPage extends TablePage<NotificationRule> {
     expandable = true;
 
     searchEnabled(): boolean {
@@ -30,11 +32,11 @@ export class RuleListPage extends TablePage<Rule> {
     @property()
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<Rule>> {
-        return Rule.list({
+    apiEndpoint(page: number): Promise<AKResponse<NotificationRule>> {
+        return new EventsApi(DEFAULT_CONFIG).eventsRulesList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -48,19 +50,19 @@ export class RuleListPage extends TablePage<Rule> {
         ];
     }
 
-    row(item: Rule): TemplateResult[] {
+    row(item: NotificationRule): TemplateResult[] {
         return [
             html`${item.name}`,
             html`${item.severity}`,
             html`${item.group?.name || gettext("None (rule disabled)")}`,
             html`
-            <ak-modal-button href="${Rule.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.eventRules(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Rule.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.eventRules(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -72,7 +74,7 @@ export class RuleListPage extends TablePage<Rule> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${Rule.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.eventRules("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
@@ -82,7 +84,7 @@ export class RuleListPage extends TablePage<Rule> {
         `;
     }
 
-    renderExpanded(item: Rule): TemplateResult {
+    renderExpanded(item: NotificationRule): TemplateResult {
         return html`
         <td role="cell" colspan="4">
             <div class="pf-c-table__expandable-row-content">
diff --git a/web/src/pages/events/TransportListPage.ts b/web/src/pages/events/TransportListPage.ts
index df21d5954..a51d46c4f 100644
--- a/web/src/pages/events/TransportListPage.ts
+++ b/web/src/pages/events/TransportListPage.ts
@@ -1,17 +1,19 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
-import { DefaultClient, AKResponse } from "../../api/Client";
+import { AKResponse } from "../../api/Client";
 import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/ActionButton";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
-import { Transport } from "../../api/EventTransports";
 import { PAGE_SIZE } from "../../constants";
+import { EventsApi, NotificationTransport } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-event-transport-list")
-export class TransportListPage extends TablePage<Transport> {
+export class TransportListPage extends TablePage<NotificationTransport> {
     searchEnabled(): boolean {
         return true;
     }
@@ -28,11 +30,11 @@ export class TransportListPage extends TablePage<Transport> {
     @property()
     order = "name";
 
-    apiEndpoint(page: number): Promise<AKResponse<Transport>> {
-        return Transport.list({
+    apiEndpoint(page: number): Promise<AKResponse<NotificationTransport>> {
+        return new EventsApi(DEFAULT_CONFIG).eventsTransportsList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -45,21 +47,26 @@ export class TransportListPage extends TablePage<Transport> {
         ];
     }
 
-    row(item: Transport): TemplateResult[] {
+    row(item: NotificationTransport): TemplateResult[] {
         return [
             html`${item.name}`,
-            html`${item.mode_verbose}`,
+            html`${item.modeVerbose}`,
             html`
-            <ak-action-button url="${DefaultClient.makeUrl(["events", "transports", item.pk,  "test"])}">
+            <ak-action-button
+                .apiRequest=${() => {
+                    return new EventsApi(DEFAULT_CONFIG).eventsTransportsTest({
+                        uuid: item.pk || "",
+                    });
+                }}>
                 ${gettext("Test")}
             </ak-action-button>
-            <ak-modal-button href="${Transport.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.eventTransports(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Transport.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.eventTransports(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -71,7 +78,7 @@ export class TransportListPage extends TablePage<Transport> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${Transport.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.eventTransports("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
diff --git a/web/src/pages/flows/BoundStagesList.ts b/web/src/pages/flows/BoundStagesList.ts
index 2d32d3c57..43ad54d52 100644
--- a/web/src/pages/flows/BoundStagesList.ts
+++ b/web/src/pages/flows/BoundStagesList.ts
@@ -4,14 +4,15 @@ import { AKResponse } from "../../api/Client";
 import { Table, TableColumn } from "../../elements/table/Table";
 
 import "../../elements/Tabs";
-import "../../elements/AdminLoginsChart";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/policies/BoundPoliciesList";
-import { FlowStageBinding, Stage } from "../../api/Flows";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
+import { FlowsApi, FlowStageBinding, StagesApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-bound-stages-list")
 export class BoundStagesList extends Table<FlowStageBinding> {
@@ -21,11 +22,11 @@ export class BoundStagesList extends Table<FlowStageBinding> {
     target?: string;
 
     apiEndpoint(page: number): Promise<AKResponse<FlowStageBinding>> {
-        return FlowStageBinding.list({
+        return new FlowsApi(DEFAULT_CONFIG).flowsBindingsList({
             target: this.target || "",
             ordering: "order",
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
         });
     }
 
@@ -41,22 +42,22 @@ export class BoundStagesList extends Table<FlowStageBinding> {
     row(item: FlowStageBinding): TemplateResult[] {
         return [
             html`${item.order}`,
-            html`${item.stage_obj.name}`,
-            html`${item.stage_obj.verbose_name}`,
+            html`${item.stageObj?.name}`,
+            html`${item.stageObj?.verboseName}`,
             html`
-            <ak-modal-button href="${FlowStageBinding.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.stageBindings(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit Binding")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Stage.adminUrl(`${item.stage}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.stages(`${item.stage}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit Stage")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${FlowStageBinding.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.stages(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -73,7 +74,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
             <div class="pf-c-table__expandable-row-content">
                 <div class="pf-c-content">
                     <p>${gettext("These policies control when this stage will be applied to the flow.")}</p>
-                    <ak-bound-policies-list .target=${item.policybindingmodel_ptr_id}>
+                    <ak-bound-policies-list .target=${item.policybindingmodelPtrId}>
                     </ak-bound-policies-list>
                 </div>
             </div>
@@ -88,7 +89,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                 ${gettext("No stages are currently bound to this flow.")}
             </div>
             <div slot="primary">
-                <ak-modal-button href="${FlowStageBinding.adminUrl(`create/?target=${this.target}`)}">
+                <ak-modal-button href="${AdminURLManager.stageBindings(`create/?target=${this.target}`)}">
                     <ak-spinner-button slot="trigger" class="pf-m-primary">
                         ${gettext("Bind Stage")}
                     </ak-spinner-button>
@@ -106,7 +107,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                 <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
             </button>
             <ul class="pf-c-dropdown__menu" hidden>
-                ${until(Stage.getTypes().then((types) => {
+                ${until(new StagesApi(DEFAULT_CONFIG).stagesAllTypes({}).then((types) => {
                     return types.map((type) => {
                         return html`<li>
                             <ak-modal-button href="${type.link}">
@@ -120,7 +121,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                 }), html`<ak-spinner></ak-spinner>`)}
             </ul>
         </ak-dropdown>
-        <ak-modal-button href="${FlowStageBinding.adminUrl(`create/?target=${this.target}`)}">
+        <ak-modal-button href="${AdminURLManager.stageBindings(`create/?target=${this.target}`)}">
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Bind Stage")}
             </ak-spinner-button>
diff --git a/web/src/pages/flows/FlowDiagram.ts b/web/src/pages/flows/FlowDiagram.ts
index 726a770ff..cf93fc729 100644
--- a/web/src/pages/flows/FlowDiagram.ts
+++ b/web/src/pages/flows/FlowDiagram.ts
@@ -1,7 +1,8 @@
 import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import FlowChart from "flowchart.js";
-import { Flow } from "../../api/Flows";
 import { loading } from "../../utils";
+import { FlowsApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
 
 export const FONT_COLOUR_DARK_MODE = "#fafafa";
 export const FONT_COLOUR_LIGHT_MODE = "#151515";
@@ -16,8 +17,10 @@ export class FlowDiagram extends LitElement {
     @property()
     set flowSlug(value: string) {
         this._flowSlug = value;
-        Flow.diagram(value).then((data) => {
-            this.diagram = FlowChart.parse(data.diagram);
+        new FlowsApi(DEFAULT_CONFIG).flowsInstancesDiagram({
+            slug: value,
+        }).then((data) => {
+            this.diagram = FlowChart.parse(data.diagram || "");
         });
     }
 
diff --git a/web/src/pages/flows/FlowListPage.ts b/web/src/pages/flows/FlowListPage.ts
index 8bcf06955..58999f20d 100644
--- a/web/src/pages/flows/FlowListPage.ts
+++ b/web/src/pages/flows/FlowListPage.ts
@@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
-import { Flow } from "../../api/Flows";
 import { AKResponse } from "../../api/Client";
 import { TablePage } from "../../elements/table/TablePage";
 
@@ -8,6 +7,9 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
+import { Flow, FlowsApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-flow-list")
 export class FlowListPage extends TablePage<Flow> {
@@ -28,10 +30,10 @@ export class FlowListPage extends TablePage<Flow> {
     order = "slug";
 
     apiEndpoint(page: number): Promise<AKResponse<Flow>> {
-        return Flow.list({
+        return new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -54,25 +56,25 @@ export class FlowListPage extends TablePage<Flow> {
             </a>`,
             html`${item.name}`,
             html`${item.designation}`,
-            html`${item.stages.length}`,
-            html`${item.policies.length}`,
+            html`${item.stages?.size}`,
+            html`${item.policies?.size}`,
             html`
-            <ak-modal-button href="${Flow.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.flows(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Flow.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.flows(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <a class="pf-c-button pf-m-secondary ak-root-link" href="${Flow.adminUrl(`${item.pk}/execute/?next=/%23${window.location.href}`)}">
+            <a class="pf-c-button pf-m-secondary ak-root-link" href="${AdminURLManager.flows(`${item.pk}/execute/?next=/%23${window.location.href}`)}">
                 ${gettext("Execute")}
             </a>
-            <a class="pf-c-button pf-m-secondary ak-root-link" href="${Flow.adminUrl(`${item.pk}/export/`)}">
+            <a class="pf-c-button pf-m-secondary ak-root-link" href="${AdminURLManager.flows(`${item.pk}/export/`)}">
                 ${gettext("Export")}
             </a>
             `,
@@ -81,13 +83,13 @@ export class FlowListPage extends TablePage<Flow> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${Flow.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.flows("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
             <div slot="modal"></div>
         </ak-modal-button>
-        <ak-modal-button href=${Flow.adminUrl("import/")}>
+        <ak-modal-button href=${AdminURLManager.flows("import/")}>
             <ak-spinner-button slot="trigger" class="pf-m-secondary">
                 ${gettext("Import")}
             </ak-spinner-button>
diff --git a/web/src/pages/flows/FlowViewPage.ts b/web/src/pages/flows/FlowViewPage.ts
index 093b2ce32..01f550e4e 100644
--- a/web/src/pages/flows/FlowViewPage.ts
+++ b/web/src/pages/flows/FlowViewPage.ts
@@ -1,25 +1,29 @@
 import { gettext } from "django";
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { COMMON_STYLES } from "../../common/styles";
-import { Flow } from "../../api/Flows";
 
 import "../../elements/Tabs";
-import "../../elements/AdminLoginsChart";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/policies/BoundPoliciesList";
 import "./BoundStagesList";
 import "./FlowDiagram";
+import { Flow, FlowsApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
 
 @customElement("ak-flow-view")
 export class FlowViewPage extends LitElement {
     @property()
     set flowSlug(value: string) {
-        Flow.get(value).then((flow) => (this.flow = flow));
+        new FlowsApi(DEFAULT_CONFIG).flowsInstancesRead({
+            slug: value
+        }).then((flow) => {
+            this.flow = flow;
+        });
     }
 
     @property({attribute: false})
-    flow?: Flow;
+    flow!: Flow;
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES.concat(
@@ -67,7 +71,7 @@ export class FlowViewPage extends LitElement {
                                 ${gettext("These policies control which users can access this flow.")}
                             </div>
                         </div>
-                        <ak-bound-policies-list .target=${this.flow.policybindingmodel_ptr_id}>
+                        <ak-bound-policies-list .target=${this.flow.policybindingmodelPtrId}>
                         </ak-bound-policies-list>
                     </div>
                 </div>
diff --git a/web/src/pages/groups/GroupListPage.ts b/web/src/pages/groups/GroupListPage.ts
index 57140f7e7..82dfceb5e 100644
--- a/web/src/pages/groups/GroupListPage.ts
+++ b/web/src/pages/groups/GroupListPage.ts
@@ -6,8 +6,10 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
-import { Group } from "../../api/Groups";
 import { PAGE_SIZE } from "../../constants";
+import { CoreApi, Group } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-group-list")
 export class GroupListPage extends TablePage<Group> {
@@ -28,10 +30,10 @@ export class GroupListPage extends TablePage<Group> {
     order = "slug";
 
     apiEndpoint(page: number): Promise<AKResponse<Group>> {
-        return Group.list({
+        return new CoreApi(DEFAULT_CONFIG).coreGroupsList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -50,16 +52,16 @@ export class GroupListPage extends TablePage<Group> {
         return [
             html`${item.name}`,
             html`${item.parent || "-"}`,
-            html`${item.users.length}`,
-            html`${item.is_superuser ? "Yes" : "No"}`,
+            html`${item.users.keys.length}`,
+            html`${item.isSuperuser ? "Yes" : "No"}`,
             html`
-            <ak-modal-button href="${Group.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.groups(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Group.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.groups(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -70,7 +72,7 @@ export class GroupListPage extends TablePage<Group> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${Group.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.groups("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
diff --git a/web/src/pages/outposts/OutpostHealth.ts b/web/src/pages/outposts/OutpostHealth.ts
index 7ba5ddc97..55ab0528d 100644
--- a/web/src/pages/outposts/OutpostHealth.ts
+++ b/web/src/pages/outposts/OutpostHealth.ts
@@ -1,8 +1,10 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
-import { Outpost } from "../../api/Outposts";
+import { OutpostsApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
 import { COMMON_STYLES } from "../../common/styles";
+import "../../elements/Spinner";
 
 @customElement("ak-outpost-health")
 export class OutpostHealth extends LitElement {
@@ -18,7 +20,9 @@ export class OutpostHealth extends LitElement {
         if (!this.outpostId) {
             return html`<ak-spinner></ak-spinner>`;
         }
-        return html`<ul>${until(Outpost.health(this.outpostId).then((oh) => {
+        return html`<ul>${until(new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsHealth({
+            uuid: this.outpostId
+        }).then((oh) => {
             if (oh.length === 0) {
                 return html`<li>
                     <ul>
@@ -32,12 +36,12 @@ export class OutpostHealth extends LitElement {
                 return html`<li>
                     <ul>
                         <li role="cell">
-                            <i class="fas fa-check pf-m-success"></i>${gettext(`Last seen: ${new Date(h.last_seen * 1000).toLocaleTimeString()}`)}
+                            <i class="fas fa-check pf-m-success"></i>${gettext(`Last seen: ${h.lastSeen?.toLocaleTimeString()}`)}
                         </li>
                         <li role="cell">
-                            ${h.version_outdated ?
+                            ${h.versionOutdated ?
                             html`<i class="fas fa-times pf-m-danger"></i>
-                                ${gettext(`${h.version}, should be ${h.version_should}`)}` :
+                                ${gettext(`${h.version}, should be ${h.versionShould}`)}` :
                             html`<i class="fas fa-check pf-m-success"></i>${gettext(`Version: ${h.version}`)}`}
                         </li>
                     </ul>
diff --git a/web/src/pages/outposts/OutpostListPage.ts b/web/src/pages/outposts/OutpostListPage.ts
index dbb35852b..c9bbfea8b 100644
--- a/web/src/pages/outposts/OutpostListPage.ts
+++ b/web/src/pages/outposts/OutpostListPage.ts
@@ -2,7 +2,6 @@ import { gettext } from "django";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { AKResponse } from "../../api/Client";
-import { Outpost } from "../../api/Outposts";
 import { TableColumn } from "../../elements/table/Table";
 import { TablePage } from "../../elements/table/TablePage";
 
@@ -11,6 +10,10 @@ import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/TokenCopyButton";
 import { PAGE_SIZE } from "../../constants";
+import { Outpost, OutpostsApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-outpost-list")
 export class OutpostListPage extends TablePage<Outpost> {
@@ -27,10 +30,10 @@ export class OutpostListPage extends TablePage<Outpost> {
         return true;
     }
     apiEndpoint(page: number): Promise<AKResponse<Outpost>> {
-        return Outpost.list({
+        return new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -49,18 +52,18 @@ export class OutpostListPage extends TablePage<Outpost> {
     row(item: Outpost): TemplateResult[] {
         return [
             html`${item.name}`,
-            html`<ul>${item.providers_obj.map((p) => {
+            html`<ul>${item.providersObj?.map((p) => {
                 return html`<li><a href="#/core/providers/${p.pk}">${p.name}</a></li>`;
             })}</ul>`,
-            html`<ak-outpost-health outpostId=${item.pk}></ak-outpost-health>`,
+            html`<ak-outpost-health outpostId=${ifDefined(item.pk)}></ak-outpost-health>`,
             html`
-            <ak-modal-button href="${Outpost.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.outposts(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>&nbsp;
-            <ak-modal-button href="${Outpost.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.outposts(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -88,7 +91,7 @@ export class OutpostListPage extends TablePage<Outpost> {
                                     <span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
                                 </label>
                                 <div>
-                                    <ak-token-copy-button identifier="${item.token_identifier}">
+                                    <ak-token-copy-button identifier="${ifDefined(item.tokenIdentifier)}">
                                         ${gettext("Click to copy token")}
                                     </ak-token-copy-button>
                                 </div>
@@ -112,7 +115,7 @@ export class OutpostListPage extends TablePage<Outpost> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${Outpost.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.outposts("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
diff --git a/web/src/pages/outposts/OutpostServiceConnectionListPage.ts b/web/src/pages/outposts/OutpostServiceConnectionListPage.ts
index 86e729769..a904f4b34 100644
--- a/web/src/pages/outposts/OutpostServiceConnectionListPage.ts
+++ b/web/src/pages/outposts/OutpostServiceConnectionListPage.ts
@@ -2,7 +2,6 @@ import { gettext } from "django";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
 import { AKResponse } from "../../api/Client";
-import { OutpostServiceConnection } from "../../api/Outposts";
 import { TableColumn } from "../../elements/table/Table";
 import { TablePage } from "../../elements/table/TablePage";
 
@@ -12,9 +11,12 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
+import { OutpostsApi, ServiceConnection } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-outpost-service-connection-list")
-export class OutpostServiceConnectionListPage extends TablePage<OutpostServiceConnection> {
+export class OutpostServiceConnectionListPage extends TablePage<ServiceConnection> {
     pageTitle(): string {
         return "Outpost Service-Connections";
     }
@@ -28,14 +30,15 @@ export class OutpostServiceConnectionListPage extends TablePage<OutpostServiceCo
         return true;
     }
 
-    apiEndpoint(page: number): Promise<AKResponse<OutpostServiceConnection>> {
-        return OutpostServiceConnection.list({
+    apiEndpoint(page: number): Promise<AKResponse<ServiceConnection>> {
+        return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
+
     columns(): TableColumn[] {
         return [
             new TableColumn("Name", "name"),
@@ -49,25 +52,28 @@ export class OutpostServiceConnectionListPage extends TablePage<OutpostServiceCo
     @property()
     order = "name";
 
-    row(item: OutpostServiceConnection): TemplateResult[] {
+    row(item: ServiceConnection): TemplateResult[] {
         return [
             html`${item.name}`,
-            html`${item.verbose_name}`,
+            html`${item.verboseName}`,
             html`${item.local ? "Yes" : "No"}`,
-            html`${until(OutpostServiceConnection.state(item.pk).then((state) => {
-                if (state.healthy) {
-                    return html`<i class="fas fa-check pf-m-success"></i> ${state.version}`;
-                }
-                return html`<i class="fas fa-times pf-m-danger"></i> ${gettext("Unhealthy")}`;
-            }), html`<ak-spinner></ak-spinner>`)}`,
+            html`${until(
+                new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllState({
+                    uuid: item.pk || ""
+                }).then((state) => {
+                    if (state.healthy) {
+                        return html`<i class="fas fa-check pf-m-success"></i> ${state.version}`;
+                    }
+                    return html`<i class="fas fa-times pf-m-danger"></i> ${gettext("Unhealthy")}`;
+                }), html`<ak-spinner></ak-spinner>`)}`,
             html`
-            <ak-modal-button href="${OutpostServiceConnection.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.outpostServiceConnections(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${OutpostServiceConnection.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.outpostServiceConnections(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -84,7 +90,7 @@ export class OutpostServiceConnectionListPage extends TablePage<OutpostServiceCo
                 <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
             </button>
             <ul class="pf-c-dropdown__menu" hidden>
-                ${until(OutpostServiceConnection.getTypes().then((types) => {
+                ${until(new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllTypes({}).then((types) => {
                     return types.map((type) => {
                         return html`<li>
                             <ak-modal-button href="${type.link}">
diff --git a/web/src/pages/policies/PolicyListPage.ts b/web/src/pages/policies/PolicyListPage.ts
index 444b925f6..20481c427 100644
--- a/web/src/pages/policies/PolicyListPage.ts
+++ b/web/src/pages/policies/PolicyListPage.ts
@@ -7,9 +7,11 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
-import { Policy } from "../../api/Policies";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
+import { PoliciesApi, Policy } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-policy-list")
 export class PolicyListPage extends TablePage<Policy> {
@@ -30,10 +32,10 @@ export class PolicyListPage extends TablePage<Policy> {
     order = "name";
 
     apiEndpoint(page: number): Promise<AKResponse<Policy>> {
-        return Policy.list({
+        return new PoliciesApi(DEFAULT_CONFIG).policiesAllList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -50,29 +52,29 @@ export class PolicyListPage extends TablePage<Policy> {
         return [
             html`<div>
                 <div>${item.name}</div>
-                ${item.bound_to > 0 ?
+                ${(item.boundTo || 0) > 0 ?
                         html`<i class="pf-icon pf-icon-ok"></i>
                         <small>
-                            ${gettext(`Assigned to ${item.bound_to} objects.`)}
+                            ${gettext(`Assigned to ${item.boundTo} objects.`)}
                         </small>`:
                     html`<i class="pf-icon pf-icon-warning-triangle"></i>
                     <small>${gettext("Warning: Policy is not assigned.")}</small>`}
             </div>`,
-            html`${item.verbose_name}`,
+            html`${item.verboseName}`,
             html`
-            <ak-modal-button href="${Policy.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.policies(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Policy.adminUrl(`${item.pk}/test/`)}">
+            <ak-modal-button href="${AdminURLManager.policies(`${item.pk}/test/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Test")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Policy.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.policies(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -90,7 +92,7 @@ export class PolicyListPage extends TablePage<Policy> {
                     <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
                 </button>
                 <ul class="pf-c-dropdown__menu" hidden>
-                    ${until(Policy.getTypes().then((types) => {
+                    ${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllTypes({}).then((types) => {
                         return types.map((type) => {
                             return html`<li>
                                 <ak-modal-button href="${type.link}">
diff --git a/web/src/pages/property-mappings/PropertyMappingListPage.ts b/web/src/pages/property-mappings/PropertyMappingListPage.ts
index f9bd61ab0..88e191a3b 100644
--- a/web/src/pages/property-mappings/PropertyMappingListPage.ts
+++ b/web/src/pages/property-mappings/PropertyMappingListPage.ts
@@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
-import { PropertyMapping } from "../../api/PropertyMapping";
 import { AKResponse } from "../../api/Client";
 import { TablePage } from "../../elements/table/TablePage";
 
@@ -10,6 +9,9 @@ import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
+import { PropertyMapping, PropertymappingsApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-property-mapping-list")
 export class PropertyMappingListPage extends TablePage<PropertyMapping> {
@@ -33,12 +35,12 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
     hideManaged = false;
 
     apiEndpoint(page: number): Promise<AKResponse<PropertyMapping>> {
-        return PropertyMapping.list({
+        return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
-            managed__isnull: this.hideManaged,
+            managedIsnull: this.hideManaged.toString(),
         });
     }
 
@@ -53,21 +55,21 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
     row(item: PropertyMapping): TemplateResult[] {
         return [
             html`${item.name}`,
-            html`${item.verbose_name}`,
+            html`${item.verboseName}`,
             html`
-            <ak-modal-button href="${PropertyMapping.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.propertyMappings(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${PropertyMapping.adminUrl(`${item.pk}/test/`)}">
+            <ak-modal-button href="${AdminURLManager.propertyMappings(`${item.pk}/test/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Test")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${PropertyMapping.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.propertyMappings(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -85,7 +87,7 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
                 <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
             </button>
             <ul class="pf-c-dropdown__menu" hidden>
-                ${until(PropertyMapping.getTypes().then((types) => {
+                ${until(new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllTypes({}).then((types) => {
                     return types.map((type) => {
                         return html`<li>
                             <ak-modal-button href="${type.link}">
diff --git a/web/src/pages/providers/OAuth2ProviderViewPage.ts b/web/src/pages/providers/OAuth2ProviderViewPage.ts
index 08ec15ca8..611703aca 100644
--- a/web/src/pages/providers/OAuth2ProviderViewPage.ts
+++ b/web/src/pages/providers/OAuth2ProviderViewPage.ts
@@ -1,7 +1,5 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { Provider } from "../../api/Providers";
-import { OAuth2Provider, OAuth2SetupURLs } from "../../api/providers/OAuth2";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/buttons/ModalButton";
@@ -11,6 +9,9 @@ import "../../elements/Tabs";
 import { Page } from "../../elements/Page";
 import { convertToTitle } from "../../utils";
 import "./RelatedApplicationButton";
+import { OAuth2Provider, OAuth2ProviderSetupURLs, ProvidersApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-provider-oauth2-view")
 export class OAuth2ProviderViewPage extends Page {
@@ -26,15 +27,24 @@ export class OAuth2ProviderViewPage extends Page {
 
     @property({type: Number})
     set providerID(value: number) {
-        OAuth2Provider.get(value).then((app) => this.provider = app);
-        OAuth2Provider.getLaunchURls(value).then((urls) => this.providerUrls = urls);
+        const api = new ProvidersApi(DEFAULT_CONFIG);
+        api.providersOauth2Read({
+            id: value
+        }).then((prov) => {
+            this.provider = prov;
+        });
+        api.providersOauth2SetupUrls({
+            id: value
+        }).then((prov) => {
+            this.providerUrls = prov;
+        });
     }
 
     @property({ attribute: false })
     provider?: OAuth2Provider;
 
     @property({ attribute: false })
-    providerUrls?: OAuth2SetupURLs;
+    providerUrls?: OAuth2ProviderSetupURLs;
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES;
@@ -82,7 +92,7 @@ export class OAuth2ProviderViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Client type")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${convertToTitle(this.provider.client_type)}</div>
+                                                <div class="pf-c-description-list__text">${convertToTitle(this.provider.clientType || "")}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -90,7 +100,7 @@ export class OAuth2ProviderViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Client ID")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.provider.client_id}</div>
+                                                <div class="pf-c-description-list__text">${this.provider.clientId}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -98,13 +108,13 @@ export class OAuth2ProviderViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Redirect URIs")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.provider.redirect_uris}</div>
+                                                <div class="pf-c-description-list__text">${this.provider.redirectUris}</div>
                                             </dd>
                                         </div>
                                     </dl>
                                 </div>
                                 <div class="pf-c-card__footer">
-                                    <ak-modal-button href="${Provider.adminUrl(`${this.provider.pk}/update/`)}">
+                                    <ak-modal-button href="${AdminURLManager.providers(`${this.provider.pk}/update/`)}">
                                         <ak-spinner-button slot="trigger" class="pf-m-primary">
                                             ${gettext("Edit")}
                                         </ak-spinner-button>
@@ -125,7 +135,7 @@ export class OAuth2ProviderViewPage extends Page {
                                             <label class="pf-c-form__label" for="help-text-simple-form-name">
                                                 <span class="pf-c-form__label-text">${gettext("OpenID Configuration URL")}</span>
                                             </label>
-                                            <input class="pf-c-form-control" readonly type="text" value="${this.providerUrls?.provider_info || "-"}" />
+                                            <input class="pf-c-form-control" readonly type="text" value="${this.providerUrls?.providerInfo || "-"}" />
                                         </div>
                                         <div class="pf-c-form__group">
                                             <label class="pf-c-form__label" for="help-text-simple-form-name">
@@ -150,7 +160,7 @@ export class OAuth2ProviderViewPage extends Page {
                                             <label class="pf-c-form__label" for="help-text-simple-form-name">
                                                 <span class="pf-c-form__label-text">${gettext("Userinfo URL")}</span>
                                             </label>
-                                            <input class="pf-c-form-control" readonly type="text" value="${this.providerUrls?.user_info || "-"}" />
+                                            <input class="pf-c-form-control" readonly type="text" value="${this.providerUrls?.userInfo || "-"}" />
                                         </div>
                                         <div class="pf-c-form__group">
                                             <label class="pf-c-form__label" for="help-text-simple-form-name">
diff --git a/web/src/pages/providers/ProviderListPage.ts b/web/src/pages/providers/ProviderListPage.ts
index eb996d0be..6c5effaab 100644
--- a/web/src/pages/providers/ProviderListPage.ts
+++ b/web/src/pages/providers/ProviderListPage.ts
@@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
-import { Provider } from "../../api/Providers";
 import { AKResponse } from "../../api/Client";
 import { TablePage } from "../../elements/table/TablePage";
 
@@ -10,6 +9,9 @@ import "../../elements/buttons/Dropdown";
 import { TableColumn } from "../../elements/table/Table";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
+import { Provider, ProvidersApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-provider-list")
 export class ProviderListPage extends TablePage<Provider> {
@@ -30,10 +32,10 @@ export class ProviderListPage extends TablePage<Provider> {
     order = "name";
 
     apiEndpoint(page: number): Promise<AKResponse<Provider>> {
-        return Provider.list({
+        return new ProvidersApi(DEFAULT_CONFIG).providersAllList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -52,21 +54,21 @@ export class ProviderListPage extends TablePage<Provider> {
             html`<a href="#/core/providers/${item.pk}">
                 ${item.name}
             </a>`,
-            item.assigned_application_name ?
+            item.assignedApplicationName ?
                 html`<i class="pf-icon pf-icon-ok"></i>
                     ${gettext("Assigned to application ")}
-                    <a href="#/core/applications/${item.assigned_application_slug}">${item.assigned_application_name}</a>` :
+                    <a href="#/core/applications/${item.assignedApplicationSlug}">${item.assignedApplicationName}</a>` :
                 html`<i class="pf-icon pf-icon-warning-triangle"></i>
                 ${gettext("Warning: Provider not assigned to any application.")}`,
-            html`${item.verbose_name}`,
+            html`${item.verboseName}`,
             html`
-            <ak-modal-button href="${Provider.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.providers(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Provider.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.providers(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -84,7 +86,7 @@ export class ProviderListPage extends TablePage<Provider> {
                 <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
             </button>
             <ul class="pf-c-dropdown__menu" hidden>
-                ${until(Provider.getTypes().then((types) => {
+                ${until(new ProvidersApi(DEFAULT_CONFIG).providersAllTypes({}).then((types) => {
                     return types.map((type) => {
                         return html`<li>
                             <ak-modal-button href="${type.link}">
diff --git a/web/src/pages/providers/ProviderViewPage.ts b/web/src/pages/providers/ProviderViewPage.ts
index 239507762..d6d5bc80d 100644
--- a/web/src/pages/providers/ProviderViewPage.ts
+++ b/web/src/pages/providers/ProviderViewPage.ts
@@ -1,5 +1,4 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { Provider } from "../../api/Providers";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/buttons/ModalButton";
@@ -9,13 +8,18 @@ import "../../elements/utils/LoadingState";
 import "./SAMLProviderViewPage";
 import "./OAuth2ProviderViewPage";
 import "./ProxyProviderViewPage";
+import { Provider, ProvidersApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-provider-view")
 export class ProviderViewPage extends LitElement {
 
     @property({type: Number})
     set providerID(value: number) {
-        Provider.get(value).then((app) => (this.provider = app));
+        new ProvidersApi(DEFAULT_CONFIG).providersAllRead({
+            id: value,
+        }).then((prov) => (this.provider = prov));
     }
 
     @property({ attribute: false })
@@ -33,15 +37,15 @@ export class ProviderViewPage extends LitElement {
         if (!this.provider) {
             return html`<ak-loading-state></ak-loading-state>`;
         }
-        switch (this.provider?.object_type) {
+        switch (this.provider?.objectType) {
             case "saml":
-                return html`<ak-provider-saml-view providerID=${this.provider.pk}></ak-provider-saml-view>`;
+                return html`<ak-provider-saml-view providerID=${ifDefined(this.provider.pk)}></ak-provider-saml-view>`;
             case "oauth2":
-                return html`<ak-provider-oauth2-view providerID=${this.provider.pk}></ak-provider-oauth2-view>`;
+                return html`<ak-provider-oauth2-view providerID=${ifDefined(this.provider.pk)}></ak-provider-oauth2-view>`;
             case "proxy":
-                return html`<ak-provider-proxy-view providerID=${this.provider.pk}></ak-provider-proxy-view>`;
+                return html`<ak-provider-proxy-view providerID=${ifDefined(this.provider.pk)}></ak-provider-proxy-view>`;
             default:
-                return html`<p>Invalid provider type ${this.provider?.object_type}</p>`;
+                return html`<p>Invalid provider type ${this.provider?.objectType}</p>`;
         }
     }
 }
diff --git a/web/src/pages/providers/ProxyProviderViewPage.ts b/web/src/pages/providers/ProxyProviderViewPage.ts
index 10c0f8e0a..a2727f94b 100644
--- a/web/src/pages/providers/ProxyProviderViewPage.ts
+++ b/web/src/pages/providers/ProxyProviderViewPage.ts
@@ -1,7 +1,5 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
-import { Provider } from "../../api/Providers";
-import { ProxyProvider } from "../../api/providers/Proxy";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/buttons/ModalButton";
@@ -10,6 +8,9 @@ import "../../elements/CodeMirror";
 import "../../elements/Tabs";
 import { Page } from "../../elements/Page";
 import "./RelatedApplicationButton";
+import { ProvidersApi, ProxyProvider } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-provider-proxy-view")
 export class ProxyProviderViewPage extends Page {
@@ -30,7 +31,9 @@ export class ProxyProviderViewPage extends Page {
 
     @property({type: Number})
     set providerID(value: number) {
-        ProxyProvider.get(value).then((app) => (this.provider = app));
+        new ProvidersApi(DEFAULT_CONFIG).providersProxyRead({
+            id: value,
+        }).then((prov) => (this.provider = prov));
     }
 
     @property({ attribute: false })
@@ -82,7 +85,7 @@ export class ProxyProviderViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Internal Host")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.provider.internal_host}</div>
+                                                <div class="pf-c-description-list__text">${this.provider.internalHost}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -90,7 +93,7 @@ export class ProxyProviderViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("External Host")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.provider.internal_host}</div>
+                                                <div class="pf-c-description-list__text">${this.provider.externalHost}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -99,7 +102,7 @@ export class ProxyProviderViewPage extends Page {
                                             </dt>
                                             <dd class="pf-c-description-list__description">
                                                 <div class="pf-c-description-list__text">
-                                                    ${this.provider.basic_auth_enabled ?
+                                                    ${this.provider.basicAuthEnabled ?
                                                         html`<span class="pf-c-button__icon pf-m-start">
                                                             <i class="fas fa-check-circle" aria-hidden="true"></i>
                                                             </span>${gettext("Yes")}`:
@@ -113,7 +116,7 @@ export class ProxyProviderViewPage extends Page {
                                     </dl>
                                 </div>
                                 <div class="pf-c-card__footer">
-                                    <ak-modal-button href="${Provider.adminUrl(`${this.provider.pk}/update/`)}">
+                                    <ak-modal-button href="${AdminURLManager.providers(`${this.provider.pk}/update/`)}">
                                         <ak-spinner-button slot="trigger" class="pf-m-primary">
                                             ${gettext("Edit")}
                                         </ak-spinner-button>
diff --git a/web/src/pages/providers/RelatedApplicationButton.ts b/web/src/pages/providers/RelatedApplicationButton.ts
index e7194c8a2..c2a1fa24c 100644
--- a/web/src/pages/providers/RelatedApplicationButton.ts
+++ b/web/src/pages/providers/RelatedApplicationButton.ts
@@ -1,7 +1,7 @@
 import { gettext } from "django";
 import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
-import { Application } from "../../api/Applications";
-import { Provider } from "../../api/Providers";
+import { Provider } from "../../api";
+import { AdminURLManager } from "../../api/legacy";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/Spinner";
@@ -13,12 +13,12 @@ export class RelatedApplicationButton extends LitElement {
     provider?: Provider;
 
     render(): TemplateResult {
-        if (this.provider?.assigned_application_slug) {
-            return html`<a href="#/core/applications/${this.provider.assigned_application_slug}">
-                ${this.provider.assigned_application_name}
+        if (this.provider?.assignedApplicationSlug) {
+            return html`<a href="#/core/applications/${this.provider.assignedApplicationSlug}">
+                ${this.provider.assignedApplicationName}
             </a>`;
         }
-        return html`<ak-modal-button href=${Application.adminUrl(`create/?provider=${this.provider ? this.provider.pk : ""}`)}>
+        return html`<ak-modal-button href=${AdminURLManager.applications(`create/?provider=${this.provider ? this.provider.pk : ""}`)}>
                 <ak-spinner-button slot="trigger" class="pf-m-primary">
                     ${gettext("Create")}
                 </ak-spinner-button>
diff --git a/web/src/pages/providers/SAMLProviderViewPage.ts b/web/src/pages/providers/SAMLProviderViewPage.ts
index d9d446c9e..0abcfc32b 100644
--- a/web/src/pages/providers/SAMLProviderViewPage.ts
+++ b/web/src/pages/providers/SAMLProviderViewPage.ts
@@ -1,8 +1,6 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
-import { Provider } from "../../api/Providers";
-import { SAMLProvider } from "../../api/providers/SAML";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/buttons/ModalButton";
@@ -11,6 +9,9 @@ import "../../elements/CodeMirror";
 import "../../elements/Tabs";
 import { Page } from "../../elements/Page";
 import "./RelatedApplicationButton";
+import { ProvidersApi, SAMLProvider } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager, AppURLManager } from "../../api/legacy";
 
 @customElement("ak-provider-saml-view")
 export class SAMLProviderViewPage extends Page {
@@ -31,7 +32,9 @@ export class SAMLProviderViewPage extends Page {
 
     @property({type: Number})
     set providerID(value: number) {
-        SAMLProvider.get(value).then((app) => (this.provider = app));
+        new ProvidersApi(DEFAULT_CONFIG).providersSamlRead({
+            id: value,
+        }).then((prov) => (this.provider = prov));
     }
 
     @property({ attribute: false })
@@ -83,7 +86,7 @@ export class SAMLProviderViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("ACS URL")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.provider.acs_url}</div>
+                                                <div class="pf-c-description-list__text">${this.provider.acsUrl}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -105,7 +108,7 @@ export class SAMLProviderViewPage extends Page {
                                     </dl>
                                 </div>
                                 <div class="pf-c-card__footer">
-                                    <ak-modal-button href="${Provider.adminUrl(`${this.provider.pk}/update/`)}">
+                                    <ak-modal-button href="${AdminURLManager.providers(`${this.provider.pk}/update/`)}">
                                         <ak-spinner-button slot="trigger" class="pf-m-primary">
                                             ${gettext("Edit")}
                                         </ak-spinner-button>
@@ -122,13 +125,15 @@ export class SAMLProviderViewPage extends Page {
                             <div class="pf-c-card pf-c-card-aggregate">
                                 <div class="pf-c-card__body">
                                     ${until(
-                                        SAMLProvider.getMetadata(this.provider.pk).then(m => {
+                                        new ProvidersApi(DEFAULT_CONFIG).providersSamlMetadata({
+                                            id: this.provider.pk || 0,
+                                        }).then(m => {
                                             return html`<ak-codemirror mode="xml"><textarea class="pf-c-form-control" readonly>${m.metadata}</textarea></ak-codemirror>`;
                                         })
                                     )}
                                 </div>
                                 <div class="pf-c-card__footer">
-                                    <a class="pf-c-button pf-m-primary" target="_blank" href="${SAMLProvider.appUrl(`${this.provider.assigned_application_slug}/metadata/`)}">
+                                    <a class="pf-c-button pf-m-primary" target="_blank" href="${AppURLManager.providerSAML(`${this.provider.assignedApplicationSlug}/metadata/`)}">
                                         ${gettext("Download")}
                                     </a>
                                 </div>
diff --git a/web/src/pages/sources/LDAPSourceViewPage.ts b/web/src/pages/sources/LDAPSourceViewPage.ts
index f93fe04b1..b07a08514 100644
--- a/web/src/pages/sources/LDAPSourceViewPage.ts
+++ b/web/src/pages/sources/LDAPSourceViewPage.ts
@@ -8,10 +8,10 @@ import "../../elements/buttons/ActionButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
 import { Page } from "../../elements/Page";
-import { LDAPSource } from "../../api/sources/LDAP";
-import { Source } from "../../api/Sources";
 import { until } from "lit-html/directives/until";
-import { DefaultClient } from "../../api/Client";
+import { LDAPSource, SourcesApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-source-ldap-view")
 export class LDAPSourceViewPage extends Page {
@@ -27,11 +27,15 @@ export class LDAPSourceViewPage extends Page {
 
     @property({ type: String })
     set sourceSlug(slug: string) {
-        LDAPSource.get(slug).then((s) => this.source = s);
+        new SourcesApi(DEFAULT_CONFIG).sourcesLdapRead({
+            slug: slug
+        }).then((source) => {
+            this.source = source;
+        });
     }
 
     @property({ attribute: false })
-    source?: LDAPSource;
+    source!: LDAPSource;
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES;
@@ -69,7 +73,7 @@ export class LDAPSourceViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Server URI")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.source.server_uri}</div>
+                                                <div class="pf-c-description-list__text">${this.source.serverUri}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -79,7 +83,7 @@ export class LDAPSourceViewPage extends Page {
                                             <dd class="pf-c-description-list__description">
                                                 <div class="pf-c-description-list__text">
                                                     <ul>
-                                                        <li>${this.source.base_dn}</li>
+                                                        <li>${this.source.baseDn}</li>
                                                     </ul>
                                                 </div>
                                             </dd>
@@ -87,7 +91,7 @@ export class LDAPSourceViewPage extends Page {
                                     </dl>
                                 </div>
                                 <div class="pf-c-card__footer">
-                                    <ak-modal-button href="${Source.adminUrl(`${this.source.pk}/update/`)}">
+                                    <ak-modal-button href="${AdminURLManager.sources(`${this.source.pk}/update/`)}">
                                         <ak-spinner-button slot="trigger" class="pf-m-primary">
                                             ${gettext("Edit")}
                                         </ak-spinner-button>
@@ -102,26 +106,31 @@ export class LDAPSourceViewPage extends Page {
                     <div class="pf-u-display-flex pf-u-justify-content-center">
                         <div class="pf-u-w-75">
                             <div class="pf-c-card pf-c-card-aggregate">
-                                <div class="pf-c-card pf-c-card-aggregate">
-                                    <div class="pf-c-card__title">
-                                        <p>${gettext("Sync status")}</p>
-                                    </div>
-                                    <div class="pf-c-card__body">
-                                        <p>
-                                        ${until(LDAPSource.syncStatus(this.source.slug).then((ls) => {
-                                            if (!ls.last_sync) {
-                                                return gettext("Not synced in the last hour, check System tasks.");
-                                            }
-                                            const syncDate = new Date(ls.last_sync * 1000);
-                                            return gettext(`Last sync: ${syncDate.toLocaleString()}`);
-                                        }), "loading")}
-                                        </p>
-                                    </div>
-                                    <div class="pf-c-card__footer">
-                                        <ak-action-button method="PATCH" url="${DefaultClient.makeUrl(["sources", "ldap", this.source.slug])}">
-                                            ${gettext("Retry Task")}
-                                        </ak-action-button>
-                                    </div>
+                                <div class="pf-c-card__title">
+                                    <p>${gettext("Sync status")}</p>
+                                </div>
+                                <div class="pf-c-card__body">
+                                    <p>
+                                    ${until(new SourcesApi(DEFAULT_CONFIG).sourcesLdapSyncStatus({
+                                        slug: this.source.slug
+                                    }).then((ls) => {
+                                        if (!ls.lastSync) {
+                                            return gettext("Not synced in the last hour, check System tasks.");
+                                        }
+                                        return gettext(`Last sync: ${ls.lastSync.toLocaleString()}`);
+                                    }), "loading")}
+                                    </p>
+                                </div>
+                                <div class="pf-c-card__footer">
+                                    <ak-action-button
+                                        .apiRequest=${() => {
+                                            return new SourcesApi(DEFAULT_CONFIG).sourcesLdapPartialUpdate({
+                                                slug: this.source?.slug || "",
+                                                data: this.source,
+                                            });
+                                        }}>
+                                        ${gettext("Retry Task")}
+                                    </ak-action-button>
                                 </div>
                             </div>
                         </div>
diff --git a/web/src/pages/sources/OAuthSourceViewPage.ts b/web/src/pages/sources/OAuthSourceViewPage.ts
index 0c327f24d..5cf883f86 100644
--- a/web/src/pages/sources/OAuthSourceViewPage.ts
+++ b/web/src/pages/sources/OAuthSourceViewPage.ts
@@ -7,8 +7,9 @@ import "../../elements/buttons/SpinnerButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
 import { Page } from "../../elements/Page";
-import { OAuthSource } from "../../api/sources/OAuth";
-import { Source } from "../../api/Sources";
+import { OAuthSource, SourcesApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-source-oauth-view")
 export class OAuthSourceViewPage extends Page {
@@ -24,7 +25,11 @@ export class OAuthSourceViewPage extends Page {
 
     @property({ type: String })
     set sourceSlug(value: string) {
-        OAuthSource.get(value).then((s) => this.source = s);
+        new SourcesApi(DEFAULT_CONFIG).sourcesOauthRead({
+            slug: value
+        }).then((source) => {
+            this.source = source;
+        });
     }
 
     @property({ attribute: false })
@@ -66,7 +71,7 @@ export class OAuthSourceViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Provider Type")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.source.provider_type}</div>
+                                                <div class="pf-c-description-list__text">${this.source.providerType}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -74,7 +79,7 @@ export class OAuthSourceViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Callback URL")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <code class="pf-c-description-list__text">${this.source.callback_url}</code>
+                                                <code class="pf-c-description-list__text">${this.source.callbackUrl}</code>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -82,7 +87,7 @@ export class OAuthSourceViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Access Key")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.source.consumer_key}</div>
+                                                <div class="pf-c-description-list__text">${this.source.consumerKey}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -90,7 +95,7 @@ export class OAuthSourceViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Authorization URL")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.source.authorization_url}</div>
+                                                <div class="pf-c-description-list__text">${this.source.authorizationUrl}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -98,13 +103,13 @@ export class OAuthSourceViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("Token URL")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.source.access_token_url}</div>
+                                                <div class="pf-c-description-list__text">${this.source.accessTokenUrl}</div>
                                             </dd>
                                         </div>
                                     </dl>
                                 </div>
                                 <div class="pf-c-card__footer">
-                                    <ak-modal-button href="${Source.adminUrl(`${this.source.pk}/update/`)}">
+                                    <ak-modal-button href="${AdminURLManager.sources(`${this.source.pk}/update/`)}">
                                         <ak-spinner-button slot="trigger" class="pf-m-primary">
                                             ${gettext("Edit")}
                                         </ak-spinner-button>
diff --git a/web/src/pages/sources/SAMLSourceViewPage.ts b/web/src/pages/sources/SAMLSourceViewPage.ts
index 755c4fd82..2afd0ec73 100644
--- a/web/src/pages/sources/SAMLSourceViewPage.ts
+++ b/web/src/pages/sources/SAMLSourceViewPage.ts
@@ -1,8 +1,6 @@
 import { gettext } from "django";
 import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until";
-import { Source } from "../../api/Sources";
-import { SAMLSource } from "../../api/sources/SAML";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/buttons/ModalButton";
@@ -10,6 +8,9 @@ import "../../elements/buttons/SpinnerButton";
 import "../../elements/CodeMirror";
 import "../../elements/Tabs";
 import { Page } from "../../elements/Page";
+import { SAMLSource, SourcesApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager, AppURLManager } from "../../api/legacy";
 
 @customElement("ak-source-saml-view")
 export class SAMLSourceViewPage extends Page {
@@ -25,7 +26,11 @@ export class SAMLSourceViewPage extends Page {
 
     @property({ type: String })
     set sourceSlug(slug: string) {
-        SAMLSource.get(slug).then((s) => this.source = s);
+        new SourcesApi(DEFAULT_CONFIG).sourcesSamlRead({
+            slug: slug
+        }).then((source) => {
+            this.source = source;
+        });
     }
 
     @property({ attribute: false })
@@ -67,7 +72,7 @@ export class SAMLSourceViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("SSO URL")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.source.sso_url}</div>
+                                                <div class="pf-c-description-list__text">${this.source.ssoUrl}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -75,7 +80,7 @@ export class SAMLSourceViewPage extends Page {
                                                 <span class="pf-c-description-list__text">${gettext("SLO URL")}</span>
                                             </dt>
                                             <dd class="pf-c-description-list__description">
-                                                <div class="pf-c-description-list__text">${this.source.slo_url}</div>
+                                                <div class="pf-c-description-list__text">${this.source.sloUrl}</div>
                                             </dd>
                                         </div>
                                         <div class="pf-c-description-list__group">
@@ -89,7 +94,7 @@ export class SAMLSourceViewPage extends Page {
                                     </dl>
                                 </div>
                                 <div class="pf-c-card__footer">
-                                    <ak-modal-button href="${Source.adminUrl(`${this.source.pk}/update/`)}">
+                                    <ak-modal-button href="${AdminURLManager.sources(`${this.source.pk}/update/`)}">
                                         <ak-spinner-button slot="trigger" class="pf-m-primary">
                                             ${gettext("Edit")}
                                         </ak-spinner-button>
@@ -105,14 +110,15 @@ export class SAMLSourceViewPage extends Page {
                         <div class="pf-u-w-75">
                             <div class="pf-c-card pf-c-card-aggregate">
                                 <div class="pf-c-card__body">
-                                    ${until(
-                                        SAMLSource.getMetadata(this.source.slug).then(m => {
+                                    ${until(new SourcesApi(DEFAULT_CONFIG).sourcesSamlMetadata({
+                                            slug: this.source.slug,
+                                        }).then(m => {
                                             return html`<ak-codemirror mode="xml"><textarea class="pf-c-form-control" readonly>${m.metadata}</textarea></ak-codemirror>`;
                                         })
                                     )}
                                 </div>
                                 <div class="pf-c-card__footer">
-                                    <a class="pf-c-button pf-m-primary" target="_blank" href="${SAMLSource.appUrl(this.source.slug, "metadata/")}">
+                                    <a class="pf-c-button pf-m-primary" target="_blank" href="${AppURLManager.sourceSAML(this.source.slug, "metadata/")}">
                                         ${gettext("Download")}
                                     </a>
                                 </div>
diff --git a/web/src/pages/sources/SourceViewPage.ts b/web/src/pages/sources/SourceViewPage.ts
index 3d3edf1fd..ebafc074c 100644
--- a/web/src/pages/sources/SourceViewPage.ts
+++ b/web/src/pages/sources/SourceViewPage.ts
@@ -1,4 +1,6 @@
 import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { Source, SourcesApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
 import { COMMON_STYLES } from "../../common/styles";
 
 import "../../elements/buttons/ModalButton";
@@ -8,7 +10,6 @@ import { SpinnerSize } from "../../elements/Spinner";
 import "./LDAPSourceViewPage";
 import "./OAuthSourceViewPage";
 import "./SAMLSourceViewPage";
-import { Source } from "../../api/Sources";
 
 @customElement("ak-source-view")
 export class SourceViewPage extends LitElement {
@@ -19,7 +20,11 @@ export class SourceViewPage extends LitElement {
 
     @property({ type: String })
     set sourceSlug(slug: string) {
-        Source.get(slug).then((app) => (this.source = app));
+        new SourcesApi(DEFAULT_CONFIG).sourcesAllRead({
+            slug: slug
+        }).then((source) => {
+            this.source = source;
+        });
     }
 
     @property({ attribute: false })
@@ -45,7 +50,7 @@ export class SourceViewPage extends LitElement {
                 </div>
             </div>`;
         }
-        switch (this.source?.object_type) {
+        switch (this.source?.objectType) {
             case "ldap":
                 return html`<ak-source-ldap-view sourceSlug=${this.source.slug}></ak-source-ldap-view>`;
             case "oauth":
@@ -53,7 +58,7 @@ export class SourceViewPage extends LitElement {
             case "saml":
                 return html`<ak-source-saml-view sourceSlug=${this.source.slug}></ak-source-saml-view>`;
             default:
-                return html`<p>Invalid source type ${this.source.object_type}</p>`;
+                return html`<p>Invalid source type ${this.source.objectType}</p>`;
         }
     }
 }
diff --git a/web/src/pages/sources/SourcesListPage.ts b/web/src/pages/sources/SourcesListPage.ts
index b747f5920..27f3dd2e4 100644
--- a/web/src/pages/sources/SourcesListPage.ts
+++ b/web/src/pages/sources/SourcesListPage.ts
@@ -1,7 +1,6 @@
 import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
 import { AKResponse } from "../../api/Client";
-import { Source } from "../../api/Sources";
 import { TableColumn } from "../../elements/table/Table";
 import { TablePage } from "../../elements/table/TablePage";
 
@@ -10,6 +9,9 @@ import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/Dropdown";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
+import { Source, SourcesApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-source-list")
 export class SourceListPage extends TablePage<Source> {
@@ -30,10 +32,10 @@ export class SourceListPage extends TablePage<Source> {
     order = "name";
 
     apiEndpoint(page: number): Promise<AKResponse<Source>> {
-        return Source.list({
+        return new SourcesApi(DEFAULT_CONFIG).sourcesAllList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -41,7 +43,7 @@ export class SourceListPage extends TablePage<Source> {
     columns(): TableColumn[] {
         return [
             new TableColumn("Name", "name"),
-            new TableColumn("Type", "verbose_name"),
+            new TableColumn("Type", "verboseName"),
             new TableColumn(""),
         ];
     }
@@ -52,15 +54,15 @@ export class SourceListPage extends TablePage<Source> {
                 <div>${item.name}</div>
                 ${item.enabled ? html`` : html`<small>${gettext("Disabled")}</small>`}
             </a>`,
-            html`${item.verbose_name}`,
+            html`${item.verboseName}`,
             html`
-            <ak-modal-button href="${Source.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.sources(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Source.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.sources(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -78,7 +80,7 @@ export class SourceListPage extends TablePage<Source> {
                 <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
             </button>
             <ul class="pf-c-dropdown__menu" hidden>
-                ${until(Source.getTypes().then((types) => {
+                ${until(new SourcesApi(DEFAULT_CONFIG).sourcesAllTypes({}).then((types) => {
                     return types.map((type) => {
                         return html`<li>
                             <ak-modal-button href="${type.link}">
diff --git a/web/src/pages/stages/InvitationListPage.ts b/web/src/pages/stages/InvitationListPage.ts
index a5f6cced5..4fba9f84f 100644
--- a/web/src/pages/stages/InvitationListPage.ts
+++ b/web/src/pages/stages/InvitationListPage.ts
@@ -6,8 +6,10 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
-import { Invitation } from "../../api/Invitations";
 import { PAGE_SIZE } from "../../constants";
+import { Invitation, StagesApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-stage-invitation-list")
 export class InvitationListPage extends TablePage<Invitation> {
@@ -28,10 +30,10 @@ export class InvitationListPage extends TablePage<Invitation> {
     order = "expires";
 
     apiEndpoint(page: number): Promise<AKResponse<Invitation>> {
-        return Invitation.list({
+        return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -48,10 +50,10 @@ export class InvitationListPage extends TablePage<Invitation> {
     row(item: Invitation): TemplateResult[] {
         return [
             html`${item.pk}`,
-            html`${item.created_by.username}`,
-            html`${new Date(item.expires * 1000).toLocaleString()}`,
+            html`${item.createdBy?.username}`,
+            html`${item.expires?.toLocaleString()}`,
             html`
-            <ak-modal-button href="${Invitation.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.stageInvitations(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -62,7 +64,7 @@ export class InvitationListPage extends TablePage<Invitation> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${Invitation.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.stageInvitations("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
diff --git a/web/src/pages/stages/PromptListPage.ts b/web/src/pages/stages/PromptListPage.ts
index ba9926d9f..e83a7c401 100644
--- a/web/src/pages/stages/PromptListPage.ts
+++ b/web/src/pages/stages/PromptListPage.ts
@@ -6,8 +6,10 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
-import { Prompt } from "../../api/Prompts";
 import { PAGE_SIZE } from "../../constants";
+import { Prompt, StagesApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-stage-prompt-list")
 export class PromptListPage extends TablePage<Prompt> {
@@ -28,10 +30,10 @@ export class PromptListPage extends TablePage<Prompt> {
     order = "order";
 
     apiEndpoint(page: number): Promise<AKResponse<Prompt>> {
-        return Prompt.list({
+        return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -49,21 +51,21 @@ export class PromptListPage extends TablePage<Prompt> {
 
     row(item: Prompt): TemplateResult[] {
         return [
-            html`${item.field_key}`,
+            html`${item.fieldKey}`,
             html`${item.label}`,
             html`${item.type}`,
             html`${item.order}`,
-            html`${item.promptstage_set.map((stage) => {
+            html`${item.promptstageSet?.map((stage) => {
                 return html`<li>${stage.name}</li>`;
             })}`,
             html`
-            <ak-modal-button href="${Prompt.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.stagePrompts(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Prompt.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.stagePrompts(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -74,7 +76,7 @@ export class PromptListPage extends TablePage<Prompt> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${Prompt.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.stagePrompts("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
diff --git a/web/src/pages/stages/StageListPage.ts b/web/src/pages/stages/StageListPage.ts
index 4d2cddb1e..06f82eb78 100644
--- a/web/src/pages/stages/StageListPage.ts
+++ b/web/src/pages/stages/StageListPage.ts
@@ -8,8 +8,10 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/Dropdown";
 import { until } from "lit-html/directives/until";
-import { Stage } from "../../api/Flows";
 import { PAGE_SIZE } from "../../constants";
+import { Stage, StagesApi } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-stage-list")
 export class StageListPage extends TablePage<Stage> {
@@ -30,10 +32,10 @@ export class StageListPage extends TablePage<Stage> {
     order = "name";
 
     apiEndpoint(page: number): Promise<AKResponse<Stage>> {
-        return Stage.list({
+        return new StagesApi(DEFAULT_CONFIG).stagesAllList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -50,21 +52,21 @@ export class StageListPage extends TablePage<Stage> {
         return [
             html`<div>
                 <div>${item.name}</div>
-                <small>${item.verbose_name}</small>
+                <small>${item.verboseName}</small>
             </div>`,
-            html`${item.flow_set.map((flow) => {
+            html`${item.flowSet?.map((flow) => {
                 return html`<a href="#/flow/flows/${flow.slug}">
                     <code>${flow.slug}</code>
                 </a>`;
             })}`,
             html`
-            <ak-modal-button href="${Stage.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.stages(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Stage.adminUrl(`${item.pk}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.stages(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
@@ -82,7 +84,7 @@ export class StageListPage extends TablePage<Stage> {
                 <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
             </button>
             <ul class="pf-c-dropdown__menu" hidden>
-                ${until(Stage.getTypes().then((types) => {
+                ${until(new StagesApi(DEFAULT_CONFIG).stagesAllTypes({}).then((types) => {
                     return types.map((type) => {
                         return html`<li>
                             <ak-modal-button href="${type.link}">
diff --git a/web/src/pages/system-tasks/SystemTaskListPage.ts b/web/src/pages/system-tasks/SystemTaskListPage.ts
index bce1e09d3..77c8b8746 100644
--- a/web/src/pages/system-tasks/SystemTaskListPage.ts
+++ b/web/src/pages/system-tasks/SystemTaskListPage.ts
@@ -7,10 +7,11 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/ActionButton";
 import { TableColumn } from "../../elements/table/Table";
-import { SystemTask, TaskStatus } from "../../api/SystemTask";
+import { AdminApi, Task, TaskStatusEnum } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
 
 @customElement("ak-system-task-list")
-export class SystemTaskListPage extends TablePage<SystemTask> {
+export class SystemTaskListPage extends TablePage<Task> {
     searchEnabled(): boolean {
         return false;
     }
@@ -27,18 +28,15 @@ export class SystemTaskListPage extends TablePage<SystemTask> {
     @property()
     order = "slug";
 
-    apiEndpoint(page: number): Promise<AKResponse<SystemTask>> {
-        return SystemTask.list({
-            ordering: this.order,
-            page: page,
-        }).then((tasks) => {
+    apiEndpoint(page: number): Promise<AKResponse<Task>> {
+        return new AdminApi(DEFAULT_CONFIG).adminSystemTasksList().then((tasks) => {
             return {
                 pagination: {
                     count: tasks.length,
-                    total_pages: 1,
-                    start_index: 0,
-                    end_index: tasks.length,
-                    current: 1,
+                    totalPages: 1,
+                    startIndex: 0,
+                    endIndex: tasks.length,
+                    current: page,
                 },
                 results: tasks,
             };
@@ -56,29 +54,34 @@ export class SystemTaskListPage extends TablePage<SystemTask> {
         ];
     }
 
-    taskStatus(task: SystemTask): TemplateResult {
+    taskStatus(task: Task): TemplateResult {
         switch (task.status) {
-            case TaskStatus.SUCCESSFUL:
+            case TaskStatusEnum.Successful:
                 return html`<i class="fas fa-check pf-m-success" > </i> ${gettext("Successful")}`;
-            case TaskStatus.WARNING:
+            case TaskStatusEnum.Warning:
                 return html`<i class="fas fa-exclamation-triangle pf-m-warning" > </i> ${gettext("Warning")}`;
-            case TaskStatus.ERROR:
+            case TaskStatusEnum.Error:
                 return html`<i class="fas fa-times pf-m-danger" > </i> ${gettext("Error")}`;
             default:
                 return html`<i class="fas fa-question-circle" > </i> ${gettext("Unknown")}`;
         }
     }
 
-    row(item: SystemTask): TemplateResult[] {
+    row(item: Task): TemplateResult[] {
         return [
-            html`${item.task_name}`,
-            html`${item.task_description}`,
-            html`${new Date(item.task_finish_timestamp * 1000).toLocaleString()}`,
+            html`${item.taskName}`,
+            html`${item.taskDescription}`,
+            html`${item.taskFinishTimestamp.toLocaleString()}`,
             this.taskStatus(item),
             html`${item.messages.map(m => {
                 return html`<li>${m}</li>`;
             })}`,
-            html`<ak-action-button url=${SystemTask.retry(item.task_name)}>
+            html`<ak-action-button
+                .apiRequest=${() => {
+                    return new AdminApi(DEFAULT_CONFIG).adminSystemTasksRetry({
+                        id: item.taskName
+                    });
+                }}>
                 ${gettext("Retry Task")}
             </ak-action-button>`,
         ];
diff --git a/web/src/pages/tokens/TokenListPage.ts b/web/src/pages/tokens/TokenListPage.ts
index 4f6926192..573b385fe 100644
--- a/web/src/pages/tokens/TokenListPage.ts
+++ b/web/src/pages/tokens/TokenListPage.ts
@@ -7,8 +7,10 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/TokenCopyButton";
 import { TableColumn } from "../../elements/table/Table";
-import { Token } from "../../api/Tokens";
 import { PAGE_SIZE } from "../../constants";
+import { CoreApi, Token } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-token-list")
 export class TokenListPage extends TablePage<Token> {
@@ -29,10 +31,10 @@ export class TokenListPage extends TablePage<Token> {
     order = "expires";
 
     apiEndpoint(page: number): Promise<AKResponse<Token>> {
-        return Token.list({
+        return new CoreApi(DEFAULT_CONFIG).coreTokensList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -52,9 +54,9 @@ export class TokenListPage extends TablePage<Token> {
             html`${item.identifier}`,
             html`${item.user.username}`,
             html`${item.expiring ? "Yes" : "No"}`,
-            html`${item.expiring ? new Date(item.expires * 1000).toLocaleString() : "-"}`,
+            html`${item.expiring ? item.expires?.toLocaleString() : "-"}`,
             html`
-            <ak-modal-button href="${Token.adminUrl(`${item.identifier}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.tokens(`${item.identifier}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
diff --git a/web/src/pages/tokens/UserTokenList.ts b/web/src/pages/tokens/UserTokenList.ts
index 9d4f41d97..86a1a62fb 100644
--- a/web/src/pages/tokens/UserTokenList.ts
+++ b/web/src/pages/tokens/UserTokenList.ts
@@ -6,8 +6,10 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/TokenCopyButton";
 import { Table, TableColumn } from "../../elements/table/Table";
-import { Token } from "../../api/Tokens";
 import { PAGE_SIZE } from "../../constants";
+import { CoreApi, Token } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-token-user-list")
 export class UserTokenList extends Table<Token> {
@@ -15,14 +17,16 @@ export class UserTokenList extends Table<Token> {
         return true;
     }
 
+    expandable = true;
+
     @property()
     order = "expires";
 
     apiEndpoint(page: number): Promise<AKResponse<Token>> {
-        return Token.list({
+        return new CoreApi(DEFAULT_CONFIG).coreTokensList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -30,9 +34,6 @@ export class UserTokenList extends Table<Token> {
     columns(): TableColumn[] {
         return [
             new TableColumn("Identifier", "identifier"),
-            new TableColumn("User", "user"),
-            new TableColumn("Expires?", "expiring"),
-            new TableColumn("Expiry date", "expires"),
             new TableColumn(""),
         ];
     }
@@ -49,20 +50,52 @@ export class UserTokenList extends Table<Token> {
         `;
     }
 
+    renderExpanded(item: Token): TemplateResult {
+        return html`
+        <td role="cell" colspan="3">
+            <div class="pf-c-table__expandable-row-content">
+                <dl class="pf-c-description-list pf-m-horizontal">
+                    <div class="pf-c-description-list__group">
+                        <dt class="pf-c-description-list__term">
+                            <span class="pf-c-description-list__text">${gettext("User")}</span>
+                        </dt>
+                        <dd class="pf-c-description-list__description">
+                            <div class="pf-c-description-list__text">${item.user.username}</div>
+                        </dd>
+                    </div>
+                    <div class="pf-c-description-list__group">
+                        <dt class="pf-c-description-list__term">
+                            <span class="pf-c-description-list__text">${gettext("Expiring")}</span>
+                        </dt>
+                        <dd class="pf-c-description-list__description">
+                            <div class="pf-c-description-list__text">${item.expiring ? "Yes" : "No"}</div>
+                        </dd>
+                    </div>
+                    <div class="pf-c-description-list__group">
+                        <dt class="pf-c-description-list__term">
+                            <span class="pf-c-description-list__text">${gettext("Expiring")}</span>
+                        </dt>
+                        <dd class="pf-c-description-list__description">
+                            <div class="pf-c-description-list__text">${item.expiring ? item.expires?.toLocaleString() : "-"}</div>
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+        </td>
+        <td></td>`;
+    }
+
     row(item: Token): TemplateResult[] {
         return [
             html`${item.identifier}`,
-            html`${item.user.username}`,
-            html`${item.expiring ? "Yes" : "No"}`,
-            html`${item.expiring ? new Date(item.expires * 1000).toLocaleString() : "-"}`,
             html`
-            <ak-modal-button href="${Token.userUrl(`${item.identifier}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.tokens(`${item.identifier}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${Token.userUrl(`${item.identifier}/delete/`)}">
+            <ak-modal-button href="${AdminURLManager.tokens(`${item.identifier}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
                     ${gettext("Delete")}
                 </ak-spinner-button>
diff --git a/web/src/pages/users/UserListPage.ts b/web/src/pages/users/UserListPage.ts
index e714a05a1..ab32aca24 100644
--- a/web/src/pages/users/UserListPage.ts
+++ b/web/src/pages/users/UserListPage.ts
@@ -7,8 +7,10 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/ActionButton";
 import { TableColumn } from "../../elements/table/Table";
-import { User } from "../../api/Users";
 import { PAGE_SIZE } from "../../constants";
+import { CoreApi, User } from "../../api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-user-list")
 export class UserListPage extends TablePage<User> {
@@ -29,10 +31,10 @@ export class UserListPage extends TablePage<User> {
     order = "username";
 
     apiEndpoint(page: number): Promise<AKResponse<User>> {
-        return User.list({
+        return new CoreApi(DEFAULT_CONFIG).coreUsersList({
             ordering: this.order,
             page: page,
-            page_size: PAGE_SIZE,
+            pageSize: PAGE_SIZE,
             search: this.search || "",
         });
     }
@@ -52,10 +54,10 @@ export class UserListPage extends TablePage<User> {
                 <div>${item.username}</div>
                 <small>${item.name}</small>
             </div>`,
-            html`${item.is_active ? "Yes" : "No"}`,
-            html`${new Date(item.last_login * 1000).toLocaleString()}`,
+            html`${item.isActive ? "Yes" : "No"}`,
+            html`${item.lastLogin?.toLocaleString()}`,
             html`
-            <ak-modal-button href="${User.adminUrl(`${item.pk}/update/`)}">
+            <ak-modal-button href="${AdminURLManager.users(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
                     ${gettext("Edit")}
                 </ak-spinner-button>
@@ -63,19 +65,19 @@ export class UserListPage extends TablePage<User> {
             </ak-modal-button>
             <ak-dropdown class="pf-c-dropdown">
                 <button class="pf-c-dropdown__toggle pf-m-primary" type="button">
-                    <span class="pf-c-dropdown__toggle-text">${gettext(item.is_active ? "Disable" : "Enable")}</span>
+                    <span class="pf-c-dropdown__toggle-text">${gettext(item.isActive ? "Disable" : "Enable")}</span>
                     <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
                 </button>
                 <ul class="pf-c-dropdown__menu" hidden>
                     <li>
-                        ${item.is_active ?
-                            html`<ak-modal-button href="${User.adminUrl(`${item.pk}/disable/`)}">
+                        ${item.isActive ?
+                            html`<ak-modal-button href="${AdminURLManager.users(`${item.pk}/disable/`)}">
                                 <button slot="trigger" class="pf-c-dropdown__menu-item">
                                     ${gettext("Disable")}
                                 </button>
                                 <div slot="modal"></div>
                             </ak-modal-button>`:
-                            html`<ak-modal-button href="${User.adminUrl(`${item.pk}/enable/`)}">
+                            html`<ak-modal-button href="${AdminURLManager.users(`${item.pk}/enable/`)}">
                                 <button slot="trigger" class="pf-c-dropdown__menu-item">
                                     ${gettext("Enable")}
                                 </button>
@@ -84,7 +86,7 @@ export class UserListPage extends TablePage<User> {
                     </li>
                     <li class="pf-c-divider" role="separator"></li>
                     <li>
-                        <ak-modal-button href="${User.adminUrl(`${item.pk}/delete/`)}">
+                        <ak-modal-button href="${AdminURLManager.users(`${item.pk}/delete/`)}">
                             <button slot="trigger" class="pf-c-dropdown__menu-item">
                                 ${gettext("Delete")}
                             </button>
@@ -93,7 +95,7 @@ export class UserListPage extends TablePage<User> {
                     </li>
                 </ul>
             </ak-dropdown>
-            <ak-action-button method="GET" url="${User.adminUrl(`${item.pk}/reset/`)}">
+            <ak-action-button method="GET" url="${AdminURLManager.users(`${item.pk}/reset/`)}">
                 ${gettext("Reset Password")}
             </ak-action-button>
             <a class="pf-c-button pf-m-tertiary" href="${`-/impersonation/${item.pk}/`}">
@@ -104,7 +106,7 @@ export class UserListPage extends TablePage<User> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${User.adminUrl("create/")}>
+        <ak-modal-button href=${AdminURLManager.users("create/")}>
             <ak-spinner-button slot="trigger" class="pf-m-primary">
                 ${gettext("Create")}
             </ak-spinner-button>
diff --git a/web/src/utils.ts b/web/src/utils.ts
index f9bb7c865..affce6a91 100644
--- a/web/src/utils.ts
+++ b/web/src/utils.ts
@@ -41,17 +41,9 @@ export function truncate(input?: string, max = 10): string {
     return array.slice(0, max).join(" ") + ellipsis;
 }
 
-export function htmlFromString(...strings: string[]): TemplateResult {
-    return html(<TemplateStringsArray><unknown>strings);
-}
-
 export function loading<T>(v: T, actual: TemplateResult): TemplateResult {
     if (!v) {
         return html`<ak-loading-state></ak-loading-state>`;
     }
     return actual;
 }
-
-export function time(t: string): Date {
-    return new Date(parseInt(t, 10) * 1000);
-}