diff --git a/sanic/app.py b/sanic/app.py
index 4c0a1fc6..a7c042a8 100644
--- a/sanic/app.py
+++ b/sanic/app.py
@@ -57,6 +57,7 @@ from sanic.config import SANIC_PREFIX, Config
 from sanic.exceptions import (
     BadRequest,
     SanicException,
+    SanicIsADirectoryError,
     ServerError,
     URLBuildError,
 )
@@ -1578,6 +1579,10 @@ class Sanic(BaseSanic, StartupMixin, metaclass=TouchUpMeta):
                 TouchUp.run(self)
 
         self.state.is_started = True
+
+        self.exception(SanicIsADirectoryError)(
+            DirectoryHandler.default_handler
+        )
         self.directory_handler.debug = self.debug
 
     def ack(self):
diff --git a/sanic/handlers/error.py b/sanic/handlers/error.py
index ad2ab5c4..e5a14de6 100644
--- a/sanic/handlers/error.py
+++ b/sanic/handlers/error.py
@@ -3,8 +3,6 @@ from __future__ import annotations
 from typing import Dict, List, Optional, Tuple, Type
 
 from sanic.errorpages import BaseRenderer, TextRenderer, exception_response
-from sanic.exceptions import SanicIsADirectoryError
-from sanic.handlers.directory import DirectoryHandler
 from sanic.log import deprecation, error_logger
 from sanic.models.handler_types import RouteHandler
 from sanic.response import text
@@ -22,19 +20,13 @@ class ErrorHandler:
     realtime alerting system.
     """
 
-    DEFAULT_HANDLERS = {
-        (SanicIsADirectoryError, None): DirectoryHandler.default_handler
-    }
-
     def __init__(
         self,
         base: Type[BaseRenderer] = TextRenderer,
     ):
         self.cached_handlers: Dict[
             Tuple[Type[BaseException], Optional[str]], Optional[RouteHandler]
-        ] = {
-            **self.DEFAULT_HANDLERS  # type: ignore
-        }
+        ] = {}
         self.debug = False
         self.base = base
 
diff --git a/sanic/pages/autoindex.py b/sanic/pages/autoindex.py
index 26d61875..b2331c66 100644
--- a/sanic/pages/autoindex.py
+++ b/sanic/pages/autoindex.py
@@ -15,29 +15,31 @@ class FileInfo(TypedDict):
 
 class AutoIndex(BasePage):  # no cov
     EXTRA_STYLE = dedent(
-        """
-        #breadcrumbs a { text-decoration: none; }
-        #breadcrumbs .path-0 a::before { content: "🏠"; }
-        #breadcrumbs span:has(> a:hover, > a:focus) * {
-            color: #ff0d68; text-shadow: 0 0 1rem;
-        }
-        main a { color: inherit; font-weight: bold; }
-        table.autoindex { width: 100%; }
-        table.autoindex tr { display: flex; }
-        table.autoindex tr:hover { background-color: #eee; }
-        table.autoindex td { margin: 0 0.5rem; }
-        table.autoindex td:first-child { flex: 1; }
-        table.autoindex td:nth-child(2) { text-align: right; }
-        table.autoindex td:last-child {  text-align: right; }
-        @media (min-width:  915px) {
-            table.autoindex { font-size: 1.75vw; }
-        }
-        @media (min-width:  1600px) {
-            table.autoindex { font-size: 1.75rem; }
-        }
-        @media (prefers-color-scheme: dark) {
-            table.autoindex tr:hover { background-color: #222; }
-        }
+        f"""
+        #breadcrumbs a:hover {{ text-decoration: underline; }}
+        #breadcrumbs .path-0 a {{ text-decoration: none; }}
+        #breadcrumbs span::after {{
+            content: "/"; text-decoration: none; padding: 0 0.25em;
+        }}
+        #breadcrumbs .path-0 a::before {{ content: "🏠"; }}
+        #breadcrumbs > span > a {{ color: {BasePage.ACCENT}; }}
+        main a {{ color: inherit; font-weight: bold; }}
+        table.autoindex {{ width: 100%; }}
+        table.autoindex tr {{ display: flex; }}
+        table.autoindex tr:hover {{ background-color: #ddd; }}
+        table.autoindex td {{ margin: 0 0.5rem; }}
+        table.autoindex td:first-child {{ flex: 1; }}
+        table.autoindex td:nth-child(2) {{ text-align: right; }}
+        table.autoindex td:last-child {{  text-align: right; }}
+        @media (min-width:  915px) {{
+            table.autoindex {{ font-size: 1.75vw; }}
+        }}
+        @media (min-width:  1600px) {{
+            table.autoindex {{ font-size: 1.75rem; }}
+        }}
+        @media (prefers-color-scheme: dark) {{
+            table.autoindex tr:hover {{ background-color: #222; }}
+        }}
         """
     )
     TITLE = "File Browser"
@@ -67,7 +69,7 @@ class AutoIndex(BasePage):  # no cov
                 self.doc.span(class_=f"path-{i}").__enter__()
             for i, part in enumerate(p):
                 path = "/".join(p[: i + 1]) + "/"
-                self.doc.a(f"{part}/", href=path)
+                self.doc.a(part, href=path)
                 self.doc.__exit__(None, None, None)
 
     def _file_table(self, files: Iterable[FileInfo]):
diff --git a/sanic/pages/base.py b/sanic/pages/base.py
index 8bbe699a..fd4d4027 100644
--- a/sanic/pages/base.py
+++ b/sanic/pages/base.py
@@ -8,9 +8,10 @@ from sanic.application.logo import SVG_LOGO
 
 
 class BasePage(ABC):  # no cov
+    ACCENT = "#ff0d68"
     BASE_STYLE = dedent(
         """
-        html { font: 16px monospace; }
+        html { font: 16px monospace; background: #eee; color: #111; }
         body { margin: 0; font-size: 1.25rem; }
         body > * { padding: 1rem 2vw; }
         @media (max-width:  1200px) {
@@ -30,7 +31,6 @@ class BasePage(ABC):  # no cov
         a:hover, a:focus { text-decoration: underline; outline: none; }
         #logo { height: 2.75rem; padding: 0.25rem 0; }
         span.icon { margin-right: 1rem; }
-        html { background: #eee; color: #000; }
         @media (prefers-color-scheme: dark) {
             html { background: #111; color: #ccc; }
         }