diff --git a/docs/hugo.toml b/docs/hugo.toml
index 4438c75..0505a48 100644
--- a/docs/hugo.toml
+++ b/docs/hugo.toml
@@ -35,13 +35,24 @@ disablePathToLower = true
 
   [params.navbar]
     displayTitle = true
-    displayLogo = false
+    displayLogo = true
+
+    [params.navbar.logo]
+      path   = "images/logo.svg"
+      width  = "24"
+      height = "24"
 
   [params.footer]
     enable = true
-    displayCopyright = true
+    displayCopyright = false
     displayPoweredBy = false
 
+  [params.blog]
+    [params.blog.list]
+      displayTags = true
+      sortBy      = "date"
+      sortOrder   = "desc"
+
 [[menu.main]]
   identifier = "docs"
   name = "Docs"
diff --git a/docs/i18n/en.yaml b/docs/i18n/en.yaml
new file mode 100644
index 0000000..9e2c9ad
--- /dev/null
+++ b/docs/i18n/en.yaml
@@ -0,0 +1 @@
+copyright: "© 2026 [Tobias Gesellchen](https://github.com/gesellix)"
diff --git a/docs/layouts/_partials/custom/footer.html b/docs/layouts/_partials/custom/footer.html
new file mode 100644
index 0000000..a38c26e
--- /dev/null
+++ b/docs/layouts/_partials/custom/footer.html
@@ -0,0 +1,14 @@
+<div class="hx:flex hx:w-full hx:items-center hx:justify-between hx:text-sm" style="padding-top: 2rem; padding-bottom: 2rem;">
+  <a class="hx:inline-flex hx:items-center hx:gap-1.5 hx:text-gray-500 hx:dark:text-gray-400 hx:hover:text-pink-500 hx:dark:hover:text-pink-400 hx:transition-colors"
+     href="https://github.com/sponsors/gesellix"
+     target="_blank"
+     rel="noopener noreferrer">
+    <span style="color: #ec4899;">
+      {{- partial "utils/icon.html" (dict "name" "heart" "attributes" `height="1em" class="hx:inline-block hx:align-[-2px]"`) -}}
+    </span>
+    <span>Sponsor this project</span>
+  </a>
+  <span class="hx:text-xs hx:text-gray-500 hx:dark:text-gray-400">
+    © 2026 <a class="hx:hover:underline" href="https://github.com/gesellix" target="_blank" rel="noopener noreferrer">Tobias Gesellchen</a>
+  </span>
+</div>
diff --git a/docs/layouts/_partials/navbar-title.html b/docs/layouts/_partials/navbar-title.html
new file mode 100644
index 0000000..0525e35
--- /dev/null
+++ b/docs/layouts/_partials/navbar-title.html
@@ -0,0 +1,19 @@
+{{- $logoPath := .Site.Params.navbar.logo.path | default "images/logo.svg" -}}
+{{- $logoLink := .Site.Params.navbar.logo.link | default .Site.Home.RelPermalink -}}
+{{- $logoWidth := .Site.Params.navbar.logo.width | default "20" -}}
+{{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
+{{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}
+
+<a class="hx:flex hx:items-center hx:hover:opacity-75 hx:ltr:mr-auto hx:rtl:ml-auto" href="{{ $logoLink }}">
+  {{- $displayTitle := (.Site.Params.navbar.displayTitle | default true) }}
+  {{- if (.Site.Params.navbar.displayLogo | default true) }}
+    <img class="hx:mr-2 hx:block hx:dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ cond $displayTitle `Logo` .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
+    <img class="hx:mr-2 hx:hidden hx:dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ cond $displayTitle `Dark Logo` .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
+  {{- end }}
+  {{- if $displayTitle }}
+    <div class="hx:flex hx:flex-col hx:leading-tight">
+      <span class="hx:font-extrabold hx:select-none">{{- .Site.Title -}}</span>
+      <span class="hx:text-[0.6rem] hx:font-normal hx:select-none hx:opacity-60 hx:tracking-wide">Bose SoundTouch Toolkit</span>
+    </div>
+  {{- end }}
+</a>
diff --git a/docs/static/favicon.svg b/docs/static/favicon.svg
new file mode 100644
index 0000000..483882f
--- /dev/null
+++ b/docs/static/favicon.svg
@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- Braille Raster 2x3 (S + T kombiniert) -->
+  <!-- Spalte 1: Punkte 1, 2, 3 -->
+  <circle cx="10" cy="8" r="3" fill="#eee"/> <!-- Punkt 1 (inaktiv) -->
+  <circle cx="10" cy="16" r="3" fill="#0055aa"/> <!-- Punkt 2 (aktiv S/T) -->
+  <circle cx="10" cy="24" r="3" fill="#0055aa"/> <!-- Punkt 3 (aktiv S/T) -->
+
+  <!-- Spalte 2: Punkte 4, 5, 6 -->
+  <circle cx="22" cy="8" r="3" fill="#0055aa"/> <!-- Punkt 4 (aktiv S/T) -->
+  <circle cx="22" cy="16" r="3" fill="#ffcc00"/> <!-- Punkt 5 (Der "T"-Punkt, Akzent) -->
+  <circle cx="22" cy="24" r="3" fill="#eee"/> <!-- Punkt 6 (inaktiv) -->
+</svg>
diff --git a/docs/static/images/logo.svg b/docs/static/images/logo.svg
new file mode 100644
index 0000000..483882f
--- /dev/null
+++ b/docs/static/images/logo.svg
@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <!-- Braille Raster 2x3 (S + T kombiniert) -->
+  <!-- Spalte 1: Punkte 1, 2, 3 -->
+  <circle cx="10" cy="8" r="3" fill="#eee"/> <!-- Punkt 1 (inaktiv) -->
+  <circle cx="10" cy="16" r="3" fill="#0055aa"/> <!-- Punkt 2 (aktiv S/T) -->
+  <circle cx="10" cy="24" r="3" fill="#0055aa"/> <!-- Punkt 3 (aktiv S/T) -->
+
+  <!-- Spalte 2: Punkte 4, 5, 6 -->
+  <circle cx="22" cy="8" r="3" fill="#0055aa"/> <!-- Punkt 4 (aktiv S/T) -->
+  <circle cx="22" cy="16" r="3" fill="#ffcc00"/> <!-- Punkt 5 (Der "T"-Punkt, Akzent) -->
+  <circle cx="22" cy="24" r="3" fill="#eee"/> <!-- Punkt 6 (inaktiv) -->
+</svg>