diff --git a/backend/api/invoices/delete.py b/backend/api/invoices/delete.py
index d16b417fc..0074dbcf1 100644
--- a/backend/api/invoices/delete.py
+++ b/backend/api/invoices/delete.py
@@ -1,6 +1,8 @@
 from django.contrib import messages
-from django.http import HttpRequest, JsonResponse, QueryDict
+from django.http import HttpRequest, JsonResponse, QueryDict, HttpResponse
 from django.shortcuts import render
+from django.urls import resolve
+from django.urls.exceptions import Resolver404
 from django.views.decorators.http import require_http_methods
 
 from backend.models import Invoice
@@ -11,6 +13,7 @@ def delete_invoice(request: HttpRequest):
     delete_items = QueryDict(request.body)
 
     invoice = delete_items.get("invoice")
+    redirect = delete_items.get("redirect", None)
 
     try:
         invoice = Invoice.objects.get(id=invoice)
@@ -26,7 +29,17 @@ def delete_invoice(request: HttpRequest):
     invoice.delete()
 
     if request.htmx:
-        messages.success(request, "Invoice deleted")
-        return render(request, "base/toasts.html")
+        print("should send msg")
+        if not redirect:
+            messages.success(request, "Invoice deleted")
+            return render(request, "base/toasts.html")
+
+        try:
+            resolve(redirect)
+            response = HttpResponse(request, status=200)
+            response["HX-Location"] = redirect
+            return response
+        except Resolver404:
+            ...
 
     return JsonResponse({"message": "Invoice successfully deleted"}, status=200)
diff --git a/backend/api/invoices/manage.py b/backend/api/invoices/manage.py
new file mode 100644
index 000000000..c1e6e9a24
--- /dev/null
+++ b/backend/api/invoices/manage.py
@@ -0,0 +1,74 @@
+from dataclasses import dataclass
+from typing import Literal, TypedDict
+
+from django.contrib import messages
+from django.http import HttpRequest
+from django.shortcuts import render, redirect
+from django.views.decorators.http import require_http_methods
+
+from backend.models import Invoice, UserSettings
+
+
+class PreviewContext(TypedDict):
+    type: Literal["preview"]
+    invoice: Invoice
+    currency_symbol: str
+
+
+@dataclass(frozen=True)
+class SuccessResponse:
+    context: PreviewContext
+    success: Literal[True] = True
+
+
+@dataclass(frozen=True)
+class ErrorResponse:
+    message: str
+    success: Literal[False] = False
+
+
+@require_http_methods(["GET"])
+def tab_preview_invoice(request: HttpRequest, invoice_id):
+    # Redirect if not an HTMX request
+    if not request.htmx:
+        return redirect("invoices dashboard")  # Maybe should be 404?
+
+    prev_invoice = preview_invoice(request, invoice_id)
+
+    if prev_invoice.success:
+        return render(request, "pages/invoices/view/invoice.html", prev_invoice.context)
+
+    messages.error(request, prev_invoice.message)
+
+    return render(request, "base/toasts.html")
+
+
+def preview_invoice(request: HttpRequest, invoice_id) -> SuccessResponse | ErrorResponse:
+    context = {"type": "preview"}
+
+    try:
+        invoice = Invoice.objects.prefetch_related("items").get(id=invoice_id)
+
+    except Invoice.DoesNotExist:
+        return ErrorResponse("Invoice not found")
+
+    if request.user.logged_in_as_team:
+        if invoice.organization != request.user.logged_in_as_team:
+            return ErrorResponse("You don't have access to this invoice")
+    else:
+        if invoice.user != request.user:
+            return ErrorResponse("You don't have access to this invoice")
+    try:
+        currency_symbol = request.user.user_profile.get_currency_symbol
+    except UserSettings.DoesNotExist:
+        currency_symbol = "$"
+
+    context.update({"invoice": invoice, "currency_symbol": currency_symbol})
+
+    context_object = PreviewContext(
+        type="preview",
+        invoice=invoice,
+        currency_symbol=currency_symbol,
+    )
+
+    return SuccessResponse(context=context_object)
diff --git a/backend/api/invoices/urls.py b/backend/api/invoices/urls.py
index f5e7db46d..8bc66e9df 100644
--- a/backend/api/invoices/urls.py
+++ b/backend/api/invoices/urls.py
@@ -1,6 +1,6 @@
 from django.urls import path
 
-from . import fetch, delete, edit, schedule
+from . import fetch, delete, edit, schedule, manage
 from .create import set_destination
 from .create.services import add
 
@@ -36,6 +36,7 @@
     path("create_schedule/", schedule.create_schedule, name="create_schedule"),
     path("schedules/onetime/<str:schedule_id>/cancel/", schedule.cancel_onetime_schedule, name="schedules onetime cancel"),
     path("schedules/onetime/fetch/<str:invoice_id>/", schedule.fetch_onetime_schedules, name="schedules onetime fetch"),
+    path("manage/<int:invoice_id>/tabs/preview/", manage.tab_preview_invoice, name="tab preview"),
 ]
 
 app_name = "invoices"
diff --git a/backend/api/invoices/view.py b/backend/api/invoices/view.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/backend/urls.py b/backend/urls.py
index 543203048..3af88996f 100644
--- a/backend/urls.py
+++ b/backend/urls.py
@@ -12,6 +12,7 @@
     receipts,
 )
 from backend.views.core.currency_converter import dashboard as cc_dashboard
+from backend.views.core.invoices.overview import manage_invoice
 from backend.views.core.other.index import index, dashboard
 
 url(
@@ -26,6 +27,11 @@
     path("dashboard/", dashboard, name="dashboard"),
     path("dashboard/settings/", settings_v.view.settings_page, name="user settings"),
     path("dashboard/invoices/", include("backend.views.core.invoices.urls")),
+    path(
+        "dashboard/invoice/<str:invoice_id>/",
+        manage_invoice,
+        name="invoice overview",
+    ),
     path("favicon.ico", RedirectView.as_view(url="favicon.ico")),
     path(
         "dashboard/settings/teams",
diff --git a/backend/views/core/auth/login.py b/backend/views/core/auth/login.py
index 5734d787d..8bcc63ce6 100644
--- a/backend/views/core/auth/login.py
+++ b/backend/views/core/auth/login.py
@@ -5,7 +5,8 @@
 from django.contrib.auth.hashers import check_password
 from django.core.validators import validate_email
 from django.http import HttpRequest
-from django.urls import reverse
+from django.urls import reverse, resolve
+from django.urls.exceptions import Resolver404
 from django.utils.decorators import method_decorator
 from django.views import View
 from django.views.decorators.http import require_GET, require_POST
@@ -26,10 +27,12 @@
 @require_GET
 @not_authenticated
 def login_initial_page(request: HttpRequest):
+    next = request.GET.get("next")
+
     return render(
         request,
         "pages/auth/login_initial.html",
-        {"github_enabled": SOCIAL_AUTH_GITHUB_ENABLED, "google_enabled": SOCIAL_AUTH_GOOGLE_OAUTH2_ENABLED},
+        {"github_enabled": SOCIAL_AUTH_GITHUB_ENABLED, "next": next, "google_enabled": SOCIAL_AUTH_GOOGLE_OAUTH2_ENABLED},
     )
 
 
@@ -41,12 +44,13 @@ def login_manual(request: HttpRequest):  # HTMX POST
     email = request.POST.get("email")
     password = request.POST.get("password")
     page = str(request.POST.get("page"))
+    next = request.POST.get("next")
 
     if not page or page == "1":
         return render(
             request,
             "pages/auth/login.html",
-            context={"email": email, "magic_links_enabled": ARE_EMAILS_ENABLED},
+            context={"email": email, "next": next, "magic_links_enabled": ARE_EMAILS_ENABLED},
         )
 
     if not email:
@@ -71,8 +75,16 @@ def login_manual(request: HttpRequest):  # HTMX POST
 
     login(request, user)
     messages.success(request, "Successfully logged in")
+
     response = HttpResponse(request, status=200)
-    response["HX-Refresh"] = "true"
+
+    try:
+        resolve(next)
+        response["HX-Location"] = next
+    except Resolver404:
+        print(f"did not resolve: {next}")
+        ...
+
     return response
 
 
diff --git a/backend/views/core/invoices/overview.py b/backend/views/core/invoices/overview.py
new file mode 100644
index 000000000..16e969fe9
--- /dev/null
+++ b/backend/views/core/invoices/overview.py
@@ -0,0 +1,22 @@
+from django.http import HttpRequest
+
+from backend.decorators import *
+from backend.models import *
+
+
+def invoices_dashboard(request: HttpRequest):
+    context = {}
+
+    return render(request, "pages/invoices/dashboard/dashboard.html", context)
+
+
+def manage_invoice(request: HttpRequest, invoice_id: str):
+    if not invoice_id.isnumeric():
+        messages.error(request, "Invalid invoice ID")
+        return redirect("invoices:dashboard")
+
+    invoice = Invoice.objects.get(id=invoice_id)
+
+    if not invoice:
+        return redirect("invoices:dashboard")
+    return render(request, "pages/invoices/dashboard/manage.html", {"invoice": invoice})
diff --git a/backend/views/core/invoices/view.py b/backend/views/core/invoices/view.py
index 98793a96b..1ef6ef7d8 100644
--- a/backend/views/core/invoices/view.py
+++ b/backend/views/core/invoices/view.py
@@ -30,7 +30,7 @@ def preview(request, invoice_id):
 
     return render(
         request,
-        "pages/invoices/view/invoice.html",
+        "pages/invoices/view/invoice_page.html",
         context,
     )
 
@@ -57,6 +57,6 @@ def view(request, uuid):
 
     return render(
         request,
-        "pages/invoices/view/invoice.html",
+        "pages/invoices/view/invoice_page.html",
         context,
     )
diff --git a/frontend/static/src/output.css b/frontend/static/src/output.css
index 75ae1333c..14f808c76 100644
--- a/frontend/static/src/output.css
+++ b/frontend/static/src/output.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -898,8 +902,8 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
-  .menu li > *:not(ul):not(.menu-title):not(details):active,
-.menu li > *:not(ul):not(.menu-title):not(details).active,
+  .menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
 .menu li > details > summary:active {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
@@ -1075,6 +1079,70 @@ html {
   --tw-border-opacity: 0.2;
 }
 
+.collapse:not(td):not(tr):not(colgroup) {
+  visibility: visible;
+}
+
+.collapse {
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  grid-template-rows: auto 0fr;
+  transition: grid-template-rows 0.2s;
+  width: 100%;
+  border-radius: var(--rounded-box, 1rem);
+}
+
+.collapse-title,
+.collapse > input[type="checkbox"],
+.collapse > input[type="radio"],
+.collapse-content {
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+
+.collapse > input[type="checkbox"],
+.collapse > input[type="radio"] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  opacity: 0;
+}
+
+.collapse-content {
+  visibility: hidden;
+  grid-column-start: 1;
+  grid-row-start: 2;
+  min-height: 0px;
+  transition: visibility 0.2s;
+  transition: padding 0.2s ease-out,
+    background-color 0.2s ease-out;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: unset;
+}
+
+.collapse[open],
+.collapse-open,
+.collapse:focus:not(.collapse-close) {
+  grid-template-rows: auto 1fr;
+}
+
+.collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
+.collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
+  grid-template-rows: auto 1fr;
+}
+
+.collapse[open] > .collapse-content,
+.collapse-open > .collapse-content,
+.collapse:focus:not(.collapse-close) > .collapse-content,
+.collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content,
+.collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content {
+  visibility: visible;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+}
+
 .divider {
   display: flex;
   flex-direction: row;
@@ -1122,7 +1190,8 @@ html {
   grid-template-rows: repeat(1, minmax(0, 1fr));
   align-items: flex-start;
   justify-items: start;
-  overflow-y: auto;
+  overflow-x: hidden;
+  overflow-y: hidden;
   overscroll-behavior: contain;
   height: 100vh;
   height: 100dvh;
@@ -1171,6 +1240,7 @@ html {
 .drawer-toggle:checked ~ .drawer-side {
   pointer-events: auto;
   visibility: visible;
+  overflow-y: auto;
 }
 
 .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
@@ -1450,14 +1520,14 @@ html {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
-  :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+  :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
 
   @supports (color: oklch(0 0 0)) {
-    :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+    :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
       background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
     }
   }
@@ -1587,6 +1657,13 @@ html {
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
 
+.input[type="number"]::-webkit-inner-spin-button,
+.input-md[type="number"]::-webkit-inner-spin-button {
+  margin-top: -1rem;
+  margin-bottom: -1rem;
+  margin-inline-end: -1rem;
+}
+
 .join {
   display: inline-flex;
   align-items: stretch;
@@ -1708,8 +1785,7 @@ html {
   padding-inline-start: 0.5rem;
 }
 
-.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
-  .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
   display: grid;
   grid-auto-flow: column;
   align-content: flex-start;
@@ -1837,7 +1913,7 @@ html {
   width: 100%;
 }
 
-:where(.navbar > *) {
+:where(.navbar > *:not(script, style)) {
   display: inline-flex;
   align-items: center;
 }
@@ -2257,9 +2333,9 @@ input.tab:checked + .tab-content,
     --btn-color: var(--fallback-s);
   }
 
-  .btn-accent {
-    --btn-color: var(--fallback-a);
-  }
+    .btn-accent {
+        --btn-color: var(--fallback-a);
+    }
 
   .btn-neutral {
     --btn-color: var(--fallback-n);
@@ -2332,9 +2408,9 @@ input.tab:checked + .tab-content,
     --btn-color: var(--s);
   }
 
-  .btn-accent {
-    --btn-color: var(--a);
-  }
+    .btn-accent {
+        --btn-color: var(--a);
+    }
 
   .btn-neutral {
     --btn-color: var(--n);
@@ -2356,9 +2432,9 @@ input.tab:checked + .tab-content,
 }
 
 .btn-accent {
-  --tw-text-opacity: 1;
-  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
-  outline-color: var(--fallback-a,oklch(var(--a)/1));
+    --tw-text-opacity: 1;
+    color: var(--fallback-ac, oklch(var(--ac)/var(--tw-text-opacity)));
+    outline-color: var(--fallback-a, oklch(var(--a)/1));
 }
 
 .btn-neutral {
@@ -2731,6 +2807,130 @@ input.tab:checked + .tab-content,
   }
 }
 
+details.collapse {
+  width: 100%;
+}
+
+details.collapse summary {
+  position: relative;
+  display: block;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+details.collapse summary::-webkit-details-marker {
+  display: none;
+}
+
+.collapse:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
+}
+
+.collapse:has(.collapse-title:focus-visible),
+.collapse:has(> input[type="checkbox"]:focus-visible),
+.collapse:has(> input[type="radio"]:focus-visible) {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
+}
+
+.collapse-arrow > .collapse-title:after {
+  position: absolute;
+  display: block;
+  height: 0.5rem;
+  width: 0.5rem;
+  --tw-translate-y: -100%;
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 0.2s;
+  top: 1.9rem;
+  inset-inline-end: 1.4rem;
+  content: "";
+  transform-origin: 75% 75%;
+  box-shadow: 2px 2px;
+  pointer-events: none;
+}
+
+.collapse-plus > .collapse-title:after {
+  position: absolute;
+  display: block;
+  height: 0.5rem;
+  width: 0.5rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 300ms;
+  top: 0.9rem;
+  inset-inline-end: 1.4rem;
+  content: "+";
+  pointer-events: none;
+}
+
+.collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"],
+.collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked),
+.collapse:not(.collapse-open):not(.collapse-close) > .collapse-title {
+  cursor: pointer;
+}
+
+.collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title {
+  cursor: unset;
+}
+
+.collapse-title {
+  position: relative;
+}
+
+:where(.collapse > input[type="checkbox"]),
+:where(.collapse > input[type="radio"]) {
+  z-index: 1;
+}
+
+.collapse-title,
+:where(.collapse > input[type="checkbox"]),
+:where(.collapse > input[type="radio"]) {
+  width: 100%;
+  padding: 1rem;
+  padding-inline-end: 3rem;
+  min-height: 3.75rem;
+  transition: background-color 0.2s ease-out;
+}
+
+.collapse[open] > :where(.collapse-content),
+.collapse-open > :where(.collapse-content),
+.collapse:focus:not(.collapse-close) > :where(.collapse-content),
+.collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content),
+.collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) {
+  padding-bottom: 1rem;
+  transition: padding 0.2s ease-out,
+    background-color 0.2s ease-out;
+}
+
+.collapse[open].collapse-arrow > .collapse-title:after,
+.collapse-open.collapse-arrow > .collapse-title:after,
+.collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
+.collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
+.collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
+  --tw-translate-y: -50%;
+  --tw-rotate: 225deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.collapse[open].collapse-plus > .collapse-title:after,
+.collapse-open.collapse-plus > .collapse-title:after,
+.collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
+.collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
+.collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
+  content: "−";
+}
+
 .divider:not(:empty) {
   gap: 1rem;
 }
@@ -2807,6 +3007,12 @@ input.tab:checked + .tab-content,
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
 }
 
+.input input {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  background-color: transparent;
+}
+
 .input input:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2994,7 +3200,7 @@ input.tab:checked + .tab-content,
   content: "";
 }
 
-.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
+.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
 .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
   border-radius: var(--rounded-btn, 0.5rem);
   padding-left: 1rem;
@@ -3011,12 +3217,7 @@ input.tab:checked + .tab-content,
   text-wrap: balance;
 }
 
-:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
-  :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
-  :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
-  :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
-  :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
-  :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
+:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
   cursor: pointer;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
   --tw-text-opacity: 1;
@@ -3025,8 +3226,8 @@ input.tab:checked + .tab-content,
   outline-offset: 2px;
 }
 
-.menu li > *:not(ul):not(.menu-title):not(details):active,
-.menu li > *:not(ul):not(.menu-title):not(details).active,
+.menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
 .menu li > details > summary:active {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
@@ -3721,6 +3922,14 @@ input.tab:checked + .tab-content,
   width: 320px;
 }
 
+.badge-lg {
+    height: 1.5rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    padding-left: 0.688rem;
+    padding-right: 0.688rem;
+}
+
 .btm-nav-xs > *:where(.active) {
   border-top-width: 1px;
 }
@@ -3753,6 +3962,14 @@ input.tab:checked + .tab-content,
   font-size: 0.875rem;
 }
 
+.btn-md {
+  height: 3rem;
+  min-height: 3rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 0.875rem;
+}
+
 .btn-lg {
   height: 4rem;
   min-height: 4rem;
@@ -3843,6 +4060,15 @@ input.tab:checked + .tab-content,
   visibility: visible;
 }
 
+.drawer-open > .drawer-side {
+  overflow-y: auto;
+}
+
+html:has(.drawer-toggle:checked) {
+  overflow-y: hidden;
+  scrollbar-gutter: stable;
+}
+
 .join.join-vertical {
   flex-direction: column;
 }
@@ -4009,8 +4235,7 @@ input.tab:checked + .tab-content,
   padding-bottom: 0.25rem;
 }
 
-.menu-sm :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
-  .menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+.menu-sm :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), .menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
   border-radius: var(--rounded-btn, 0.5rem);
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -4187,6 +4412,10 @@ input.tab:checked + .tab-content,
   visibility: visible;
 }
 
+.collapse {
+  visibility: collapse;
+}
+
 .static {
   position: static;
 }
@@ -4263,6 +4492,10 @@ input.tab:checked + .tab-content,
   float: left;
 }
 
+.m-1 {
+    margin: 0.25rem;
+}
+
 .m-auto {
   margin: auto;
 }
@@ -4353,7 +4586,7 @@ input.tab:checked + .tab-content,
 }
 
 .mb-8 {
-    margin-bottom: 2rem;
+  margin-bottom: 2rem;
 }
 
 .me-2 {
@@ -4376,6 +4609,10 @@ input.tab:checked + .tab-content,
   margin-left: 0.5rem;
 }
 
+.mr-1 {
+    margin-right: 0.25rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -4384,6 +4621,10 @@ input.tab:checked + .tab-content,
   margin-right: 0.75rem;
 }
 
+.mr-4 {
+    margin-right: 1rem;
+}
+
 .ms-2 {
   margin-inline-start: 0.5rem;
 }
@@ -4569,7 +4810,7 @@ input.tab:checked + .tab-content,
 }
 
 .w-24 {
-    width: 6rem;
+  width: 6rem;
 }
 
 .w-3\/4 {
@@ -4645,13 +4886,21 @@ input.tab:checked + .tab-content,
 }
 
 .max-w-0 {
-  max-width: 0rem;
+  max-width: 0px;
+}
+
+.max-w-12 {
+  max-width: 3rem;
 }
 
 .max-w-3xl {
   max-width: 48rem;
 }
 
+.max-w-44 {
+  max-width: 11rem;
+}
+
 .max-w-4xl {
   max-width: 56rem;
 }
@@ -4720,6 +4969,10 @@ input.tab:checked + .tab-content,
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -4783,6 +5036,16 @@ input.tab:checked + .tab-content,
   row-gap: 0.25rem;
 }
 
+.gap-y-4 {
+    row-gap: 1rem;
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -4863,10 +5126,22 @@ input.tab:checked + .tab-content,
   border-width: 1px;
 }
 
+.border-4 {
+    border-width: 4px;
+}
+
+.border-2 {
+    border-width: 2px;
+}
+
 .border-t-2 {
   border-top-width: 2px;
 }
 
+.border-s {
+    border-inline-start-width: 1px;
+}
+
 .border-none {
   border-style: none;
 }
@@ -4905,6 +5180,16 @@ input.tab:checked + .tab-content,
   border-color: transparent;
 }
 
+.border-error {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-er, oklch(var(--er)/var(--tw-border-opacity)));
+}
+
+.border-success {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-su, oklch(var(--su)/var(--tw-border-opacity)));
+}
+
 .bg-base-100 {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
@@ -5328,11 +5613,6 @@ input.tab:checked + .tab-content,
   --tw-ring-offset-color: var(--fallback-b1,oklch(var(--b1)/1));
 }
 
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .drop-shadow {
   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -5568,7 +5848,7 @@ input.tab:checked + .tab-content,
 }
 
 @media (hover:hover) {
-  .dropdown ul.dropdown-content li > *:not(ul):not(.menu-title):not(details):active,.dropdown ul.dropdown-content li > *:not(ul):not(.menu-title):not(details).active,.dropdown ul.dropdown-content li > details > summary:active {
+  .dropdown ul.dropdown-content li > *:not(ul, .menu-title, details, .btn):active,.dropdown ul.dropdown-content li > *:not(ul, .menu-title, details, .btn).active,.dropdown ul.dropdown-content li > details > summary:active {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
     --tw-text-opacity: 1;
@@ -5577,50 +5857,50 @@ input.tab:checked + .tab-content,
 }
 
 @media (hover: hover) {
-  :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+  :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
 
   @supports (color: oklch(0 0 0)) {
-    :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+    :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
       background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
     }
   }
 
-  :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+  :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
 
   @supports (color: oklch(0 0 0)) {
-    :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+    :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
       background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
     }
   }
 
-  :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+  :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
 
   @supports (color: oklch(0 0 0)) {
-    :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+    :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
       background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
     }
   }
 
-  :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+  :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;
   }
 
   @supports (color: oklch(0 0 0)) {
-    :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+    :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
       background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
     }
   }
@@ -5642,7 +5922,7 @@ input.tab:checked + .tab-content,
   padding-inline-start: 0.5rem;
 }
 
-.dropdown ul.dropdown-content :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),.dropdown ul.dropdown-content :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+.dropdown ul.dropdown-content :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),.dropdown ul.dropdown-content :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
   display: grid;
   grid-auto-flow: column;
   align-content: flex-start;
@@ -5699,7 +5979,7 @@ input.tab:checked + .tab-content,
   content: "";
 }
 
-.dropdown ul.dropdown-content :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),.dropdown ul.dropdown-content :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+.dropdown ul.dropdown-content :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),.dropdown ul.dropdown-content :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   border-radius: var(--rounded-btn, 0.5rem);
@@ -5717,12 +5997,7 @@ input.tab:checked + .tab-content,
   text-wrap: balance;
 }
 
-:where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
-  :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
-  :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
-  :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
-  :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
-  :where(.dropdown ul.dropdown-content li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
+:where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.dropdown ul.dropdown-content li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
   cursor: pointer;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
   --tw-text-opacity: 1;
@@ -5731,7 +6006,7 @@ input.tab:checked + .tab-content,
   outline-offset: 2px;
 }
 
-.dropdown ul.dropdown-content li > *:not(ul):not(.menu-title):not(details):active,.dropdown ul.dropdown-content li > *:not(ul):not(.menu-title):not(details).active,.dropdown ul.dropdown-content li > details > summary:active {
+.dropdown ul.dropdown-content li > *:not(ul, .menu-title, details, .btn):active,.dropdown ul.dropdown-content li > *:not(ul, .menu-title, details, .btn).active,.dropdown ul.dropdown-content li > details > summary:active {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
   --tw-text-opacity: 1;
@@ -6726,76 +7001,6 @@ button.btn.loading-htmx.htmx-request {
   display: block;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:block {
-    display: block;
-  }
-
-  .dark\:hidden {
-    display: none;
-  }
-
-  .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-divide-opacity));
-  }
-
-  .dark\:border-gray-600 {
-    --tw-border-opacity: 1;
-    border-color: rgb(75 85 99 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-gray-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-border-opacity));
-  }
-
-  .dark\:bg-gray-700 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-  }
-
-  .dark\:text-gray-200 {
-    --tw-text-opacity: 1;
-    color: rgb(229 231 235 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-300 {
-    --tw-text-opacity: 1;
-    color: rgb(209 213 219 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-400 {
-    --tw-text-opacity: 1;
-    color: rgb(156 163 175 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-purple-400 {
-    --tw-text-opacity: 1;
-    color: rgb(192 132 252 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-
-  .peer:focus ~ .dark\:peer-focus\:ring-blue-800 {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-  }
-}
-
 @media (min-width: 640px) {
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -6926,6 +7131,76 @@ button.btn.loading-htmx.htmx-request {
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  .dark\:block {
+    display: block;
+  }
+
+  .dark\:hidden {
+    display: none;
+  }
+
+  .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 1;
+    border-color: rgb(55 65 81 / var(--tw-divide-opacity));
+  }
+
+  .dark\:border-gray-600 {
+    --tw-border-opacity: 1;
+    border-color: rgb(75 85 99 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-gray-700 {
+    --tw-border-opacity: 1;
+    border-color: rgb(55 65 81 / var(--tw-border-opacity));
+  }
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-gray-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-gray-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  }
+
+  .dark\:text-gray-200 {
+    --tw-text-opacity: 1;
+    color: rgb(229 231 235 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-gray-300 {
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-gray-400 {
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-purple-400 {
+    --tw-text-opacity: 1;
+    color: rgb(192 132 252 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+
+  .peer:focus ~ .dark\:peer-focus\:ring-blue-800 {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
+  }
+}
+
 .peer:checked~* .\[\.peer\:checked\~\*_\&\]\:decoration-gray-400 {
   text-decoration-color: #9ca3af;
 }
\ No newline at end of file
diff --git a/frontend/templates/pages/auth/login.html b/frontend/templates/pages/auth/login.html
index ebbff352b..3f47fe592 100644
--- a/frontend/templates/pages/auth/login.html
+++ b/frontend/templates/pages/auth/login.html
@@ -1,4 +1,5 @@
-<div hx-swap-oob='innerHTML:[data-swap="form_fields"]'>
+<div hx-swap-oob='innerHTML:[data-swap="form_fields"]'
+     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
     {% if email %}
         <div class="text-center mt-4">
             <small class="text-center">
@@ -17,13 +18,14 @@
                class="input input-bordered w-full">
         <input type="hidden" name="email" value="{{ email }}">
         <input type="hidden" name="page" value="2">
+        <input type="hidden" name="next" value="{{ next }}">
     </div>
     <button class="btn mt-2 w-full btn-primary">Login</button>
     <div class="divider mt-8">OR</div>
     {% if magic_links_enabled %}
         <button type="button"
                 hx-post="{% url 'auth:login magic_link request' %}"
-                hx-vals='{"email": "{{ email }}"}'
+                hx-vals='{"email": "{{ email }}", "next": "{{ next }}"}'
                 class="btn-large-card flex flex-col items-center">
             <span>Login with email magic link</span>
             <span class="text-xs text-center">This sends an email to your address, all you need to do is press the link and you're in!</span>
diff --git a/frontend/templates/pages/auth/login_initial.html b/frontend/templates/pages/auth/login_initial.html
index f34d9553a..a495d6897 100644
--- a/frontend/templates/pages/auth/login_initial.html
+++ b/frontend/templates/pages/auth/login_initial.html
@@ -69,6 +69,7 @@
                     <span class="label-text-alt text-error">Please enter a valid email.</span>
                 </label>
                 <input type="hidden" name="page" value="1">
+                <input type="hidden" name="next" value="{{ request.GET.next }}">
             </div>
             <button hx-swap="none" hx-target="form" class="btn mt-6 w-full btn-primary">
                 Next
diff --git a/frontend/templates/pages/invoices/dashboard/+payment_status_badge.html b/frontend/templates/pages/invoices/dashboard/+payment_status_badge.html
index 6a2d323ec..8cb0a0ca0 100644
--- a/frontend/templates/pages/invoices/dashboard/+payment_status_badge.html
+++ b/frontend/templates/pages/invoices/dashboard/+payment_status_badge.html
@@ -1,13 +1,30 @@
-{% if status == "paid" %}
-    <span class="badge badge-outline rounded p-3 badge-success"
-          data-status="paid"
-          data-invoice-id="{{ inv_id }}">Paid</span>
-{% elif status == "overdue" %}
-    <span class="badge badge-outline rounded p-3 badge-error drop-shadow drop-shadow-glow_red"
-          data-status="overdue"
-          data-invoice-id="{{ inv_id }}">Overdue</span>
+{% if design == "default" %}
+    <span class="p-3 rounded border border-2 shadow-2xl {% if status == "overdue" %}drop-shadow drop-shadow-glow_red text-error border-error {% elif status == "pending" %}text-base-400 border-base-400 {% elif status == "paid" %}text-success border-success {% endif %}">
+        {% if status == "paid" %}
+            <i class="fa-solid fa-check text-success mr-1"></i>
+            <span>Paid</span>
+        {% elif status == "overdue" %}
+            <i class="fa-solid fa-exclamation-triangle mr-1"></i>
+            <span>Overdue</span>
+        {% elif status == "pending" %}
+            <i class="fa-solid fa-hourglass-half mr-1"></i>
+            <span>Pending</span>
+        {% else %}
+            <span>{{ status }}</span>
+        {% endif %}
+    </span>
 {% else %}
-    <span class="badge badge-outline rounded p-3 badge-info"
-          data-status="{{ invoice.payment_status | lower }}"
-          data-invoice-id="{{ inv_id }}">{{ status | default:"sent" | title }}</span>
+    {% if status == "paid" %}
+        <span class="badge badge-outline rounded p-3 badge-success"
+              data-status="paid"
+              data-invoice-id="{{ inv_id }}">Paid</span>
+    {% elif status == "overdue" %}
+        <span class="badge badge-outline rounded p-3 badge-error drop-shadow drop-shadow-glow_red"
+              data-status="overdue"
+              data-invoice-id="{{ inv_id }}">Overdue</span>
+    {% else %}
+        <span class="badge badge-outline rounded p-3 badge-info"
+              data-status="{{ invoice.payment_status | lower }}"
+              data-invoice-id="{{ inv_id }}">{{ status | default:"sent" | title }}</span>
+    {% endif %}
 {% endif %}
diff --git a/frontend/templates/pages/invoices/dashboard/_fetch_body.html b/frontend/templates/pages/invoices/dashboard/_fetch_body.html
index d9984231d..a9515f053 100644
--- a/frontend/templates/pages/invoices/dashboard/_fetch_body.html
+++ b/frontend/templates/pages/invoices/dashboard/_fetch_body.html
@@ -6,7 +6,7 @@
     {% for invoice in invoices %}
         <tr>
             <td class="link link-primary">
-                <a href="{% url "invoices:preview" invoice_id=invoice.id %}">{{ invoice.id }}</a>
+                <a href="{% url "invoice overview" invoice_id=invoice.id %}">{{ invoice.id }}</a>
             </td>
             <td>{{ invoice.date_due | date:"d/m/Y" }}</td>
             <td>
@@ -22,7 +22,7 @@
                     </div>
                 </div>
             </td>
-            <td>£{{ invoice.amount | floatformat:2 | intcomma }}</td>
+            <td>£{{ invoice.amount | default_if_none:0 | floatformat:2 | intcomma }}</td>
             <td>
                 {% component "pages:invoices:dashboard:payment_status_badge" status=invoice.payment_status inv_id=invoice.id %}
             </td>
@@ -37,6 +37,12 @@
                     </label>
                     <ul tabindex="0"
                         class="dropdown-content z-[1] menu wp-2 shadow-2xl bg-base-200 rounded-box w-52">
+                        <li>
+                            <a href="{% url "invoice overview" invoice_id=invoice.id %}">
+                                <i class="fa-solid fa-eye"></i>
+                                Overview
+                            </a>
+                        </li>
                         <li>
                             <a href="{% url "invoices:preview" invoice_id=invoice.id %}">
                                 <i class="fa-solid fa-file-pdf"></i>
diff --git a/frontend/templates/pages/invoices/dashboard/_modify_payment_status.html b/frontend/templates/pages/invoices/dashboard/_modify_payment_status.html
index 21c824e57..2d4b9a780 100644
--- a/frontend/templates/pages/invoices/dashboard/_modify_payment_status.html
+++ b/frontend/templates/pages/invoices/dashboard/_modify_payment_status.html
@@ -2,3 +2,6 @@
 <div hx-swap-oob='outerHTML:span[data-invoice-id="{{ invoice_id }}"]'>
     {% component "pages:invoices:dashboard:payment_status_badge" status=status inv_id=invoice_id %}
 </div>
+<div hx-swap-oob='innerHTML:div[data-oob="status"]'>
+    {% component "pages:invoices:dashboard:payment_status_badge" status=status inv_id=invoice_id design="default" %}
+</div>
diff --git a/frontend/templates/pages/invoices/dashboard/manage.html b/frontend/templates/pages/invoices/dashboard/manage.html
new file mode 100644
index 000000000..f44bd6ad7
--- /dev/null
+++ b/frontend/templates/pages/invoices/dashboard/manage.html
@@ -0,0 +1,101 @@
+{% extends 'base/base.html' %}
+{% block content %}
+    {% load feature_enabled %}
+    {% feature_enabled "isInvoiceSchedulingEnabled" as schedule_invoices_enabled %}
+    <div class="card p-6 shadow-xl bg-base-100 mb-4">
+        <div class=" text-3xl w-full grid grid-cols-4">
+            <div>
+                <a href="{% url "invoices:dashboard" %}"
+                   class="btn btn-sm btn-outline btn-secondary me-3 float-left">Back to list</a>
+            </div>
+            <h1 class="text-center col-span-2">Invoice #{{ invoice.id }}</h1>
+            <div>
+                <button hx-delete="{% url 'api:invoices:delete' %}"
+                        hx-swap="none"
+                        hx-confirm="Are you sure you would like to delete invoice #{{ invoice.id }}?"
+                        hx-vals='{"invoice": "{{ invoice.id }}", "redirect": "/dashboard/invoices/"}'
+                        class="btn btn-sm btn-outline btn-error me-3 float-right">
+                    <i class="fa-solid fa-trash"></i>
+                    Delete
+                </button>
+            </div>
+        </div>
+    </div>
+    <div class="card bg-base-100 shadow-xl w-full p-6 flex-col gap-y-4">
+        <div class="flex flex-wrap gap-y-4">
+            <button class="btn btn-md btn-outline btn-default grow loading-htmx mr-4"
+                    hx-target="#container"
+                    hx-get="{% url "api:invoices:tab preview" invoice_id=invoice.id %}"
+                    hx-swap="innerHTML"
+                    hx-trigger="load,click,queue:last"
+                    hx-indicator="this">
+                <span class="loading-htmx-text">
+                    <i class="fa-solid fa-file-pdf"></i>
+                    Preview Invoice
+                </span>
+                <span class="loading loading-spinner loading-htmx-loader"></span>
+            </button>
+            <a href="{% url "invoices:edit" invoice_id=invoice.id %}"
+               class="btn btn-md btn-outline btn-default grow mr-4">
+                <i class="fa-solid fa-up-right-from-square"></i>
+                Edit Invoice
+            </a>
+            <a href="{% url "invoices:manage_access" invoice_id=invoice.id %}"
+               class="btn btn-md btn-outline btn-default grow mr-4">
+                <i class="fa-solid fa-share-nodes"></i>
+                Send Invoice
+            </a>
+            {% if schedule_invoices_enabled %}
+                <a href="{% url "invoices:schedules view" invoice_id=invoice.id %}"
+                   class="btn btn-outline btn-default grow mr-4">
+                    <i class="fa-solid fa-clock"></i>
+                    Schedule Invoice
+                </a>
+            {% endif %}
+        </div>
+        <div class="mt-2">
+            <div class="flex items-center space-x-2">
+                <!-- Icon and Text for Current Status -->
+                <div data-oob="status">
+                    {% component "pages:invoices:dashboard:payment_status_badge" status=invoice.payment_status inv_id=invoice_id design="default" %}
+                </div>
+                <!-- Mark As Button -->
+                <div class="dropdown dropdown-right dropdown-hover">
+                    <div class="m-1 btn btn-primary" tabindex="0" role="button">
+                        <i class="fa-solid fa-flag"></i>
+                        Mark As
+                    </div>
+                    <ul tabindex="0"
+                        class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
+                        <li>
+                            <button hx-swap="none"
+                                    hx-post="{% url "api:invoices:edit status" invoice_id=invoice.id status='pending' %}">
+                                <i class="fa-solid fa-hourglass-half"></i>
+                                Pending
+                            </button>
+                        </li>
+                        <li>
+                            <button hx-swap="none"
+                                    hx-post="{% url "api:invoices:edit status" invoice_id=invoice.id status='paid' %}">
+                                <i class="fa-solid fa-circle-check"></i>
+                                Paid
+                            </button>
+                        </li>
+                        <li>
+                            <button hx-swap="none"
+                                    hx-post="{% url "api:invoices:edit status" invoice_id=invoice.id status='overdue' %}">
+                                <i class="fa-solid fa-exclamation-triangle"></i>
+                                Overdue
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="collapse collapse-arrow card bg-base-100 shadow-xl w-full p-6 flex-row gap-x-4 mt-4">
+        <input type="checkbox" checked />
+        <div class="collapse-title text-xl font-medium">Manage Invoice Content</div>
+        <div id="container" class="collapse-content"></div>
+    </div>
+{% endblock content %}
diff --git a/frontend/templates/pages/invoices/view/invoice.html b/frontend/templates/pages/invoices/view/invoice.html
index daf4e33e1..a44cea8cc 100644
--- a/frontend/templates/pages/invoices/view/invoice.html
+++ b/frontend/templates/pages/invoices/view/invoice.html
@@ -1,310 +1,160 @@
 {% load static %}
 {% load mathfilters %}
 {% load markdownify %}
-<!DOCTYPE html>
-<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en" style="">
-    {% include 'base/_head.html' %}
-    <body style="background-color: #94c0eb;">
-        <div class="flex-1 min-h-screen overflow-y-auto pt-8 px-6 pb-4 bg-base-200">
-            <div tabindex="-1"
-                 id="status_banner"
-                 class="print-ignore fixed top-0 left-0 z-50 grid grid-cols-3 w-full p-4 bg-base-100 shadow text-base-content">
-                <div>
-                    {% if type == "preview" %}
-                        <a href="{% url 'invoices:dashboard' %}" class="btn btn-sm btn-outline">
-                            <i class="fa-solid fa-arrow-left me-2"></i>
-                            Go Back
-                        </a>
-                    {% endif %}
-                </div>
-                <div class="flex items-center mx-auto">
-                    <p class="flex items-center text-sm font-normal">
-                        {% with ps=invoice.payment_status %}
-                            {% if ps == "paid" %}
-                                <span class="circle-tick bg-success text-neutral">
-                                    <i class="fa-solid fa-check"></i>
-                                </span>
-                            {% elif ps == "pending" %}
-                                <span class="circle-tick bg-gray-500 text-black">
-                                    <i class="fa-solid fa-question"></i>
-                                </span>
-                            {% elif ps == "overdue" %}
-                                <span class="circle-tick bg-error text-neutral drop-shadow drop-shadow-glow_red">
-                                    <i class="fa-solid fa-x"></i>
-                                </span>
-                            {% endif %}
-                            <span>
-                                {% if ps == "paid" %}
-                                    This invoice has been <strong>paid</strong>
-                                {% elif ps == "pending" %}
-                                    This invoice is <strong>pending</strong>
-                                {% elif ps == "overdue" %}
-                                    This invoice is <strong>overdue</strong>
-                                {% endif %}
-                            </span>
-                        </p>
-                    {% endwith %}
-                </div>
-                <div class="flex justify-end float-right">
-                    <a class="btn btn-sm gradient-btn me-2" href="" download>
-                        <i class="fa-solid fa-download me-2"></i>
-                        Download
-                    </a>
-                    <button onclick="window.print()" class="btn btn-sm gradient-btn me-2">
-                        <i class="fa-solid fa-print me-2"></i>
-                        Print
-                    </button>
-                    <a class="btn btn-sm gradient-btn me-8"
-                       href="{% url "invoices:manage_access" invoice_id=invoice.id %}">Share Invoice</a>
-                    <div class="flex items-center">
-                        <button onclick="document.getElementById('status_banner').remove();"
-                                type="button"
-                                class="flex-shrink-0 inline-flex justify-center w-7 h-7 items-center rounded-lg text-sm p-1.5 hover:bg-gray-600 hover:text-white">
-                            <i class="fa-solid fa-xmark"></i>
-                            <span class="sr-only">Close Popup</span>
-                        </button>
-                    </div>
-                </div>
+<div class="max-w-3xl mx-auto p-6 bg-white rounded-lg shadow my-6 mt-16 min-h-screen">
+    <div class="flex justify-between items-center mb-8">
+        <!-- Company Logo and Info -->
+        <div>
+            {% if invoice.logo %}
+                <img src="{{ invoice.logo.url }}"
+                     alt="company-logo"
+                     class="h-24 w-24 object-cover rounded-full">
+            {% else %}
+                <img src="https://github.com/TreyWW/MyFinances/blob/main/documentation/assets/logo_single.png?raw=true"
+                     alt="company-logo"
+                     class="h-24 w-24 object-cover rounded-full">
+            {% endif %}
+            <div class="mt-4">
+                <h3 class="text-lg text-gray-800">{{ invoice.self_company|default_if_none:"" }}</h3>
+                <p class="text-gray-600">{{ invoice.self_name|default_if_none:"" }}</p>
+                <p class="text-gray-600">{{ invoice.self_phone|default_if_none:"" }}</p>
+                {% if invoice.vat_number %}<p class="text-gray-600">VAT: {{ invoice.vat_number }}</p>{% endif %}
             </div>
-            <!-- Start of Invoice -->
-            <div class="max-w-3xl mx-auto p-6 bg-white rounded-lg shadow my-6 mt-16 min-h-screen">
-                <div class="flex justify-between items-center mb-8">
-                    <!-- Company Logo and Info -->
-                    <div>
-                        {% if invoice.logo %}
-                            <img src="{{ invoice.logo.url }}"
-                                 alt="company-logo"
-                                 class="h-24 w-24 object-cover rounded-full">
-                        {% else %}
-                            <img src="https://github.com/TreyWW/MyFinances/blob/main/documentation/assets/logo_single.png?raw=true"
-                                 alt="company-logo"
-                                 class="h-24 w-24 object-cover rounded-full">
-                        {% endif %}
-                        <div class="mt-4">
-                            <h3 class="text-lg text-gray-800">{{ invoice.self_company|default_if_none:"" }}</h3>
-                            <p class="text-gray-600">{{ invoice.self_name|default_if_none:"" }}</p>
-                            <p class="text-gray-600">{{ invoice.self_phone|default_if_none:"" }}</p>
-                            {% if invoice.vat_number %}<p class="text-gray-600">VAT: {{ invoice.vat_number }}</p>{% endif %}
-                        </div>
-                    </div>
-                    <!-- Invoice Info -->
-                    <div class="text-right">
-                        <h2 class="text-2xl font-bold text-gray-800">INVOICE</h2>
-                        <p class="mt-2 text-gray-600">INV #{{ invoice.invoice_id|default:invoice.id }}</p>
-                        <p class="text-gray-600">Invoice date: {{ invoice.date_issued|date:"d/m/Y" }}</p>
-                        <p class="text-gray-600">Due date: {{ invoice.date_due|date:"d/m/Y" }}</p>
-                        <p class="text-gray-600">Balance Due: {{ currency_symbol }}{{ invoice.get_total_price }}</p>
-                    </div>
-                </div>
-                <!-- Client info -->
-                <div class="grid grid-cols-2 items-center mt-7">
-                    <div>
-                        {% with details=invoice.get_to_details %}
-                            {% include 'pages/invoices/view/_client-details.html' with c_type=details.0 c_details=details.1 %}
-                        {% endwith %}
-                    </div>
-                </div>
-                <!-- Invoice Items -->
-                <div class="-mx-4 mt-8 overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
-                            <tr>
-                                <th scope="col"
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Items
-                                </th>
-                                <th scope="col"
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Quantity
-                                </th>
-                                <th scope="col"
-                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Price
-                                </th>
-                                <th scope="col"
-                                    class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                    Amount
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
-                            {% for item in invoice.items.all %}
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <div class="text-sm text-gray-900">{{ item.name }}</div>
-                                        <div class="text-sm text-gray-500">{{ item.description|markdownify }}</div>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="text-sm text-gray-900">{{ item.hours }}</span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="text-sm text-gray-900">{{ item.price_per_hour }}</span>
-                                    </td>
-                                    <td class="px-6 py-4 text-right whitespace-nowrap">
-                                        <span class="text-sm text-gray-900">{{ currency_symbol }}{{ item.get_total_price | floatformat:2 }}</span>
-                                    </td>
-                                </tr>
-                            {% endfor %}
-                        </tbody>
-                        <tfoot>
-                            <tr class="bg-gray-50">
-                                <th colspan="3"
-                                    class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
-                                    Subtotal
-                                </th>
-                                <td class="px-6 py-3 text-right text-sm font-medium text-gray-500 uppercase tracking-wider">
-                                    {{ currency_symbol }}{{ invoice.get_subtotal }}
-                                </td>
-                            </tr>
-                            {% if tax %}
-                                {# todo add tax #}
-                                <tr class="bg-gray-50">
-                                    <th colspan="3"
-                                        class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
-                                        Tax
-                                    </th>
-                                    <td class="px-6 py-3 text-right text-sm font-medium text-gray-500 uppercase tracking-wider">
-                                        {{ currency_symbol }}0.00
-                                    </td>
-                                </tr>
-                            {% endif %}
-                            {% if invoice.discount %}
-                                <tr class="bg-gray-50">
-                                    <th colspan="3"
-                                        class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
-                                        Discount
-                                    </th>
-                                    <td class="px-6 py-3 text-right text-sm font-medium text-gray-500 uppercase tracking-wider">
-                                        -{{ invoice.discount }}%
-                                    </td>
-                                </tr>
-                            {% endif %}
-                            <tr class="bg-gray-50">
-                                <th colspan="3"
-                                    class="px-6 py-3 text-left text-sm font-bold text-gray-900 uppercase tracking-wider">
-                                    Total
-                                </th>
-                                <td class="px-6 py-3 text-right text-sm font-bold text-gray-900 uppercase tracking-wider">
-                                    {{ currency_symbol }}{{ invoice.get_total_price }}
-                                </td>
-                            </tr>
-                        </tfoot>
-                    </table>
-                </div>
-                <!-- Payment Details -->
-                <div class="text-sm text-gray-600 mt-16">
-                    {% if invoice.account_holder_name %}
-                        <p>
-                            Account Holder Name: <span class="font-semibold ms-2">{{ invoice.account_holder_name }}</span>
-                        </p>
-                    {% endif %}
-                    {% if invoice.account_number %}
-                        <p>
-                            Account Number: <span class="font-semibold ms-2">{{ invoice.account_number }}</span>
-                        </p>
-                    {% endif %}
-                    {% if invoice.sort_code %}
-                        <p>
-                            Account Sort Code: <span class="font-semibold ms-2">{{ invoice.sort_code }}</span>
-                        </p>
-                    {% endif %}
-                </div>
-                <!--  Footer  -->
-                {% if invoice.notes %}
-                    <div class="border-t-2 pt-4 text-xs text-gray-500 text-center mt-4">
-                        {#        Please pay the invoice before the due date. You can pay the invoice by logging in to your account from our client portal.#}
-                        {{ invoice.notes|markdownify }}
-                    </div>
+        </div>
+        <!-- Invoice Info -->
+        <div class="text-right">
+            <h2 class="text-2xl font-bold text-gray-800">INVOICE</h2>
+            <p class="mt-2 text-gray-600">INV #{{ invoice.invoice_id|default:invoice.id }}</p>
+            <p class="text-gray-600">Invoice date: {{ invoice.date_issued|date:"d/m/Y" }}</p>
+            <p class="text-gray-600">Due date: {{ invoice.date_due|date:"d/m/Y" }}</p>
+            <p class="text-gray-600">Balance Due: {{ currency_symbol }}{{ invoice.get_total_price }}</p>
+        </div>
+    </div>
+    <!-- Client info -->
+    <div class="grid grid-cols-2 items-center mt-7">
+        <div>
+            {% with details=invoice.get_to_details %}
+                {% include 'pages/invoices/view/_client-details.html' with c_type=details.0 c_details=details.1 %}
+            {% endwith %}
+        </div>
+    </div>
+    <!-- Invoice Items -->
+    <div class="-mx-4 mt-8 overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th scope="col"
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Items
+                    </th>
+                    <th scope="col"
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Quantity
+                    </th>
+                    <th scope="col"
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Price
+                    </th>
+                    <th scope="col"
+                        class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Amount
+                    </th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                {% for item in invoice.items.all %}
+                    <tr>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <div class="text-sm text-gray-900">{{ item.name }}</div>
+                            <div class="text-sm text-gray-500">{{ item.description|markdownify }}</div>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <span class="text-sm text-gray-900">{{ item.hours }}</span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            <span class="text-sm text-gray-900">{{ item.price_per_hour }}</span>
+                        </td>
+                        <td class="px-6 py-4 text-right whitespace-nowrap">
+                            <span class="text-sm text-gray-900">{{ currency_symbol }}{{ item.get_total_price | floatformat:2 }}</span>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+            <tfoot>
+                <tr class="bg-gray-50">
+                    <th colspan="3"
+                        class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+                        Subtotal
+                    </th>
+                    <td class="px-6 py-3 text-right text-sm font-medium text-gray-500 uppercase tracking-wider">
+                        {{ currency_symbol }}{{ invoice.get_subtotal }}
+                    </td>
+                </tr>
+                {% if tax %}
+                    {# todo add tax #}
+                    <tr class="bg-gray-50">
+                        <th colspan="3"
+                            class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+                            Tax
+                        </th>
+                        <td class="px-6 py-3 text-right text-sm font-medium text-gray-500 uppercase tracking-wider">
+                            {{ currency_symbol }}0.00
+                        </td>
+                    </tr>
                 {% endif %}
-                <!-- Credits -->
-                <div class="border-t-2 pt-4 text-xs text-gray-500 text-center mt-4 print-ignore">
-                    {# Print ignored #}
-                    This invoice was generated with 💜 by
-                    <a class="underline" href="https://github.com/TreyWW/MyFinances">MyFinances</a>
-                    .
-                </div>
-            </div>
+                {% if invoice.discount %}
+                    <tr class="bg-gray-50">
+                        <th colspan="3"
+                            class="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
+                            Discount
+                        </th>
+                        <td class="px-6 py-3 text-right text-sm font-medium text-gray-500 uppercase tracking-wider">
+                            -{{ invoice.discount }}%
+                        </td>
+                    </tr>
+                {% endif %}
+                <tr class="bg-gray-50">
+                    <th colspan="3"
+                        class="px-6 py-3 text-left text-sm font-bold text-gray-900 uppercase tracking-wider">
+                        Total
+                    </th>
+                    <td class="px-6 py-3 text-right text-sm font-bold text-gray-900 uppercase tracking-wider">
+                        {{ currency_symbol }}{{ invoice.get_total_price }}
+                    </td>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+    <!-- Payment Details -->
+    <div class="text-sm text-gray-600 mt-16">
+        {% if invoice.account_holder_name %}
+            <p>
+                Account Holder Name: <span class="font-semibold ms-2">{{ invoice.account_holder_name }}</span>
+            </p>
+        {% endif %}
+        {% if invoice.account_number %}
+            <p>
+                Account Number: <span class="font-semibold ms-2">{{ invoice.account_number }}</span>
+            </p>
+        {% endif %}
+        {% if invoice.sort_code %}
+            <p>
+                Account Sort Code: <span class="font-semibold ms-2">{{ invoice.sort_code }}</span>
+            </p>
+        {% endif %}
+    </div>
+    <!--  Footer  -->
+    {% if invoice.notes %}
+        <div class="border-t-2 pt-4 text-xs text-gray-500 text-center mt-4">
+            {#        Please pay the invoice before the due date. You can pay the invoice by logging in to your account from our client portal.#}
+            {{ invoice.notes|markdownify }}
         </div>
-    </body>
-    <style>
-        body { 
-            font-family: 'Inter', sans-serif;
-            font-size: 16px;
-            line-height: 1.6;
-            color: #333;
-            background-size: cover;
-        }
-
-        .glass-effect {
-            background: rgba(255, 255, 255, 0.2);
-            backdrop-filter: blur(10px);
-            border-radius: 10px;
-            border: 1px solid rgba(22, 22, 22, 0.18);
-        }
-
-        .gradient-btn {
-            background: linear-gradient(45deg, #6f26ff, #db93db);
-            color: #fff;
-            border: none;
-        }
-
-        .gradient-btn:hover {
-            background: linear-gradient(45deg, #6874fc, #80e1ff);
-        }
-        
-        @media print {
-
-        .print-ignore {
-            display: none;
-        }
-
-        body, html {
-            visibility: visible;
-            margin: 0;
-            padding: 0;
-        }
-
-
-        #invoice, #invoice * {
-            visibility: visible;
-            box-shadow: none;
-        }
-
-        #invoice {
-            width: 100%;
-            position: absolute;
-            left: 0;
-            top: 0;
-            margin: 0 auto;
-            padding: 10mm; /*Adjust padding to reduce white space */
-            box-shadow: none;
-            height: auto;
-            background: none;
-            overflow: visible;
-            border: none; /* Remove borders for printing */  
-        }
-
-        .glass-effect {
-            background: none;
-            backdrop-filter: none;
-        }
-
-        /* Avoid breaking inside these elements */
-        .avoid-page-break {
-            page-break-inside: avoid;
-        }
-
-        /* Scale the content if it still doesn't fit */
-        @page {
-            size: portrait; /* Adjust page size to content */
-            margin: 5mm; /* Reduce page margin to fit content */
-        }
-
-        .page-scale {
-            transform-origin: top left; 
-            transform: scale(0.95); 
-            width: 100% !important;
-        }
-    }
-    </style>
-</html>
+    {% endif %}
+    <!-- Credits -->
+    <div class="border-t-2 pt-4 text-xs text-gray-500 text-center mt-4 print-ignore">
+        {# Print ignored #}
+        This invoice was generated with 💜 by
+        <a class="underline" href="https://github.com/TreyWW/MyFinances">MyFinances</a>
+        .
+    </div>
+</div>
diff --git a/frontend/templates/pages/invoices/view/invoice_page.html b/frontend/templates/pages/invoices/view/invoice_page.html
new file mode 100644
index 000000000..147ee4a82
--- /dev/null
+++ b/frontend/templates/pages/invoices/view/invoice_page.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html :class="{ 'theme-dark': dark }" x-data="data()" lang="en" style="">
+    {% include 'base/_head.html' %}
+    <body style="background-color: #94c0eb;">
+        <div class="flex-1 min-h-screen overflow-y-auto pt-8 px-6 pb-4 bg-base-200">
+            <div tabindex="-1"
+                 id="status_banner"
+                 class="print-ignore fixed top-0 left-0 z-50 grid grid-cols-3 w-full p-4 bg-base-100 shadow text-base-content">
+                <div>
+                    {% if type == "preview" %}
+                        <a href="{% url 'invoices:dashboard' %}" class="btn btn-sm btn-outline">
+                            <i class="fa-solid fa-arrow-left me-2"></i>
+                            Go Back
+                        </a>
+                    {% endif %}
+                </div>
+                <div class="flex items-center mx-auto">
+                    <p class="flex items-center text-sm font-normal">
+                        {% with ps=invoice.payment_status %}
+                            {% if ps == "paid" %}
+                                <span class="circle-tick bg-success text-neutral">
+                                    <i class="fa-solid fa-check"></i>
+                                </span>
+                            {% elif ps == "pending" %}
+                                <span class="circle-tick bg-gray-500 text-black">
+                                    <i class="fa-solid fa-question"></i>
+                                </span>
+                            {% elif ps == "overdue" %}
+                                <span class="circle-tick bg-error text-neutral drop-shadow drop-shadow-glow_red">
+                                    <i class="fa-solid fa-x"></i>
+                                </span>
+                            {% endif %}
+                            <span>
+                                {% if ps == "paid" %}
+                                    This invoice has been <strong>paid</strong>
+                                {% elif ps == "pending" %}
+                                    This invoice is <strong>pending</strong>
+                                {% elif ps == "overdue" %}
+                                    This invoice is <strong>overdue</strong>
+                                {% endif %}
+                            </span>
+                        </p>
+                    {% endwith %}
+                </div>
+                <div class="flex justify-end float-right">
+                    <a class="btn btn-sm gradient-btn me-2" href="" download>
+                        <i class="fa-solid fa-download me-2"></i>
+                        Download
+                    </a>
+                    <button onclick="window.print()" class="btn btn-sm gradient-btn me-2">
+                        <i class="fa-solid fa-print me-2"></i>
+                        Print
+                    </button>
+                    <a class="btn btn-sm gradient-btn me-8"
+                       href="{% url "invoices: manage_access" invoice_id=invoice.id %}">Share Invoice</a>
+                    <div class="flex items-center">
+                        <button onclick="document.getElementById('status_banner').remove();"
+                                type="button"
+                                class="flex-shrink-0 inline-flex justify-center w-7 h-7 items-center rounded-lg text-sm p-1.5 hover:bg-gray-600 hover:text-white">
+                            <i class="fa-solid fa-xmark"></i>
+                            <span class="sr-only">Close Popup</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Start of Invoice -->
+            {% include "pages/invoices/view/invoice.html" %}
+        </div>
+        <style>
+    body {
+        font-family: 'Inter', sans-serif;
+        font-size: 16px;
+        line-height: 1.6;
+        color: #333;
+        background-size: cover;
+    }
+
+    .gradient-btn {
+        background: linear-gradient(45deg, #6f26ff, #db93db);
+        color: #fff;
+        border: none;
+    }
+
+    .gradient-btn:hover {
+        background: linear-gradient(45deg, #6874fc, #80e1ff);
+    }
+
+    @media print {
+
+        .print-ignore {
+            display: none;
+        }
+
+        body, html {
+            visibility: visible;
+            margin: 0;
+            padding: 0;
+        }
+
+
+        #invoice, #invoice * {
+            visibility: visible;
+            box-shadow: none;
+        }
+
+        #invoice {
+            width: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            margin: 0 auto;
+            padding: 10mm; /*Adjust padding to reduce white space */
+            box-shadow: none;
+            height: auto;
+            background: none;
+            overflow: visible;
+            border: none; /* Remove borders for printing */
+        }
+
+        .glass-effect {
+            background: none;
+            backdrop-filter: none;
+        }
+
+        /* Avoid breaking inside these elements */
+        .avoid-page-break {
+            page-break-inside: avoid;
+        }
+
+        /* Scale the content if it still doesn't fit */
+        @page {
+            size: portrait; /* Adjust page size to content */
+            margin: 5mm; /* Reduce page margin to fit content */
+        }
+
+        .page-scale {
+            transform-origin: top left;
+            transform: scale(0.95);
+            width: 100% !important;
+        }
+    }
+        </style>
+    </body>
+</html>