diff --git a/assets/js/app.js b/assets/js/app.js
index f2a8eae..1d3fc6b 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -26,6 +26,17 @@ import {hooks as colocatedHooks} from "phoenix-colocated/atjams"
 import topbar from "../vendor/topbar"
 
 const themeKey = "phx:theme"
+const themeCookie = "phx:theme"
+
+const persistThemeCookie = (theme) => {
+  const cookieBase = `${themeCookie}=; Path=/; SameSite=Lax`
+
+  if (theme === "light" || theme === "dark") {
+    document.cookie = `${themeCookie}=${theme}; Path=/; Max-Age=31536000; SameSite=Lax`
+  } else {
+    document.cookie = `${cookieBase}; Max-Age=0`
+  }
+}
 
 const updateThemeControls = (theme) => {
   document.querySelectorAll("[data-atj-theme-toggle] button").forEach((button) => {
@@ -39,9 +50,11 @@ const setTheme = (theme) => {
 
   if (resolvedTheme === "system") {
     localStorage.removeItem(themeKey)
+    persistThemeCookie(resolvedTheme)
     document.documentElement.removeAttribute("data-theme")
   } else {
     localStorage.setItem(themeKey, resolvedTheme)
+    persistThemeCookie(resolvedTheme)
     document.documentElement.setAttribute("data-theme", resolvedTheme)
   }
 
@@ -159,7 +172,15 @@ window.addEventListener("click", (event) => {
   if (window.getSelection && window.getSelection().toString()) return
 
   const href = card.dataset.cardHref
-  if (href) window.location.assign(href)
+  if (!href) return
+
+  const url = new URL(href, window.location.href)
+
+  if (url.origin === window.location.origin && liveSocket.isConnected() && liveSocket.main) {
+    liveSocket.historyRedirect(event, url.href, "push", null, card)
+  } else {
+    window.location.assign(href)
+  }
 })
 
 // connect if there are any LiveViews on the page
diff --git a/lib/atjams_web/components/layouts.ex b/lib/atjams_web/components/layouts.ex
index 4f72f93..414529a 100644
--- a/lib/atjams_web/components/layouts.ex
+++ b/lib/atjams_web/components/layouts.ex
@@ -174,4 +174,13 @@ defmodule AtjamsWeb.Layouts do
     </div>
     """
   end
+
+  defp theme_from_cookie(%{conn: %{cookies: cookies}}) do
+    case Map.get(cookies, "phx:theme") do
+      theme when theme in ["light", "dark"] -> theme
+      _ -> nil
+    end
+  end
+
+  defp theme_from_cookie(_assigns), do: nil
 end
diff --git a/lib/atjams_web/components/layouts/root.html.heex b/lib/atjams_web/components/layouts/root.html.heex
index d4f553f..87e306c 100644
--- a/lib/atjams_web/components/layouts/root.html.heex
+++ b/lib/atjams_web/components/layouts/root.html.heex
@@ -1,5 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html
+  lang="en"
+  data-theme={theme_from_cookie(assigns)}
+  data-theme-mode={theme_from_cookie(assigns)}
+>
   <head>
     <% og = AtjamsWeb.OpenGraph.build(assigns) %>
     <meta charset="utf-8" />